src/sass/components/control.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

// --------------------------------------------------------------
// Control buttons
// --------------------------------------------------------------

.plyr__control {
  background: transparent;
  border: 0;
  border-radius: $plyr-control-radius;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible; // IE11
  padding: $plyr-control-padding;
  position: relative;
  transition: all 0.3s ease;

  svg {
    display: block;
    fill: currentColor;
    height: $plyr-control-icon-size;
    pointer-events: none;
    width: $plyr-control-icon-size;
  }

  // Default focus
  &:focus {
    outline: 0;
  }

  // Tab focus
  &.plyr__tab-focus {
    @include plyr-tab-focus();
  }
}

// Remove any link styling
a.plyr__control {
  text-decoration: none;

  &::after,
  &::before {
    display: none;
  }
}

// Change icons on state change
.plyr__control:not(.plyr__control--pressed) .icon--pressed,
.plyr__control.plyr__control--pressed .icon--not-pressed,
.plyr__control:not(.plyr__control--pressed) .label--pressed,
.plyr__control.plyr__control--pressed .label--not-pressed {
  display: none;
}