_volume_control.scss 649 Bytes
Newer Older
Agate's avatar
Agate committed
1
2
3
4
5
6
.component-volume-control {
  display: flex;
  line-height: inherit;
  align-items: center;
  position: relative;
  overflow: visible;
7
  top: 3px;
Agate's avatar
Agate committed
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  input {
    max-width: 5.5em;
    height: 4px;
  }
  &.expandable {
    .popup {
      background-color: #1B1C1D;
      position: absolute;
      left: -4em;
      top: -7em;
      transform: rotate(-90deg);
      display: flex;
      align-items: center;
      height: 2.5em;
      padding: 0 0.5em;
      box-shadow: 1px 1px 3px rgba(125, 125, 125, 0.5);
    }
    input {
      max-width: 8.5em;
27
      padding: 1em;
Agate's avatar
Agate committed
28
29
30
31
32
33
    }
    &:not(:hover):not(.expanded) .popup {
      display: none;
    }
  }
}