53 lines
1.1 KiB
SCSS
53 lines
1.1 KiB
SCSS
// --------------------------------------------------------------
|
|
// 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;
|
|
}
|