yaffs.net Git - yaffs-website/blob - node_modules/video.js/src/css/components/menu/_menu-inline.scss

   1 .video-js .vjs-menu-button-inline {
   2   @include transition(all 0.4s);
   3   overflow: hidden;
   4 }
   5
   6 .video-js .vjs-menu-button-inline:before {
   7   // Icon pseudoelement has a different base font size (1.8em), so we need to
   8   // account for that in the width. 4em (standard button width) divided by 1.8
   9   // to get the same button width as normal.
  10   width: 2.222222222em;
  11 }
  12
  13 // Hover state
  14 .video-js .vjs-menu-button-inline:hover,
  15 .video-js .vjs-menu-button-inline:focus,
  16 .video-js .vjs-menu-button-inline.vjs-slider-active,
  17 .video-js.vjs-no-flex .vjs-menu-button-inline {
  18   // This width is currently specific to the inline volume bar.
  19   width: 12em;
  20 }
  21 // Don't transition when tabbing in reverse to the volume menu
  22 // because it looks weird
  23 .video-js .vjs-menu-button-inline.vjs-slider-active {
  24   @include transition(none);
  25 }
  26
  27 .vjs-menu-button-inline .vjs-menu {
  28   opacity: 0;
  29   height: 100%;
  30   width: auto;
  31
  32   position: absolute;
  33   left: 4em;
  34   top: 0;
  35
  36   padding: 0;
  37   margin: 0;
  38
  39   @include transition(all 0.4s);
  40 }
  41
  42 .vjs-menu-button-inline:hover .vjs-menu,
  43 .vjs-menu-button-inline:focus .vjs-menu,
  44 .vjs-menu-button-inline.vjs-slider-active .vjs-menu {
  45   display: block;
  46   opacity: 1;
  47 }
  48
  49 .vjs-no-flex .vjs-menu-button-inline .vjs-menu {
  50   display: block;
  51   opacity: 1;
  52   position: relative;
  53   width: auto;
  54 }
  55
  56 .vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu,
  57 .vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu,
  58 .vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu {
  59   width: auto;
  60 }
  61
  62 .vjs-menu-button-inline .vjs-menu-content {
  63   width: auto;
  64   height: 100%;
  65   margin: 0;
  66   overflow: hidden;
  67 }