ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

More work on custom properties and documentation

Browse Source
This commit is contained in:
Sam Potts
2020-04-24 00:14:50 +10:00
parent a9b24f5e1f
commit a97008aeeb
18 changed files with 290 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/sass/components/badges.scss
View File

@ -5,7 +5,7 @@
.plyr__badge {
background: $plyr-badge-background;
border-radius: $plyr-badge-border-radius;
color: $plyr-badge-color;
color: $plyr-badge-text-color;
font-size: $plyr-font-size-badge;
line-height: 1;
padding: 3px 4px;

30
src/sass/components/captions.scss
View File

@ -19,21 +19,6 @@
transition: transform 0.4s ease-in-out;
width: 100%;
.plyr__caption {
background: $plyr-captions-background;
border-radius: 2px;
box-decoration-break: clone;
color: $plyr-captions-text-color;
line-height: 185%;
padding: 0.2em 0.5em;
white-space: pre-wrap;
// Firefox adds a <div> when using getCueAsHTML()
div {
display: inline;
}
}
span:empty {
display: none;
}
@ -56,3 +41,18 @@
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
transform: translateY(calc(#{$plyr-control-spacing} * -4));
}
.plyr__caption {
background: $plyr-captions-background;
border-radius: 2px;
box-decoration-break: clone;
color: $plyr-captions-text-color;
line-height: 185%;
padding: 0.2em 0.5em;
white-space: pre-wrap;
// Firefox adds a <div> when using getCueAsHTML()
div {
display: inline;
}
}

18
src/sass/components/menus.scss
View File

@ -44,12 +44,12 @@
// Arrow
&::after {
border: 4px solid transparent;
border: $plyr-menu-arrow-size solid transparent;
border-top-color: $plyr-menu-background;
content: '';
height: 0;
position: absolute;
right: 15px;
right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
top: 100%;
width: 0;
}
@ -87,7 +87,7 @@
}
&::after {
border: 4px solid transparent;
border: $plyr-menu-item-arrow-size solid transparent;
content: '';
position: absolute;
top: 50%;
@ -98,8 +98,8 @@
padding-right: calc(#{$plyr-control-padding} * 4);
&::after {
border-left-color: $plyr-menu-arrow-color;
right: 5px;
border-left-color: $plyr-menu-item-arrow-color;
right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
}
&.plyr__tab-focus::after,
@ -117,13 +117,13 @@
width: calc(100% - (#{$plyr-control-padding} * 2));
&::after {
border-right-color: $plyr-menu-arrow-color;
left: $plyr-control-padding;
border-right-color: $plyr-menu-item-arrow-color;
left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
}
&::before {
background: $plyr-menu-border-color;
box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
background: $plyr-menu-back-border-color;
box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
content: '';
height: 1px;
left: 0;

4
src/sass/components/sliders.scss
View File

@ -8,10 +8,10 @@
background: transparent;
border: 0;
border-radius: calc(#{$plyr-range-thumb-height} * 2);
// color is used in JS to populate lower fill for WebKit
// `color` property is used in JS to populate lower fill for WebKit
color: $plyr-range-fill-background;
display: block;
height: $plyr-range-max-height;
height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
margin: 0;
padding: 0;
transition: box-shadow 0.3s ease;