Skip to content

Fix #2877 -- Remove Deprecated SASS warnings #2889

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sebastiencl wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Fix #2877 -- Remove Deprecated SASS warnings #2889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8cb80fb
Misc bug fixes (#2883)
sampotts Jan 3, 2026
ae888e3
fix: remove sass deprecation warnings
sebastiencl Jan 22, 2026
3584b0f
fix: remove sass deprecation warnings 2
sebastiencl Jan 22, 2026
02ce1dd
remove unwanted line in package.json
sebastiencl Jan 22, 2026
41ec97a
revert last commit
sebastiencl Jan 22, 2026
13d764e
Merge branch 'master' into fix/remove-deprecated-sass-warnings
sebastiencl Jan 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions src/sass/base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,22 @@
// Base styling
// --------------------------------------------------------------

@use 'lib/mixins';
@use 'settings/helpers';
@use 'settings/type';

// Base
.plyr {
@include plyr-font-smoothing($plyr-font-smoothing);
@include mixins.plyr-font-smoothing(type.$plyr-font-smoothing);

align-items: center;
direction: ltr;
display: flex;
flex-direction: column;
font-family: $plyr-font-family;
font-family: type.$plyr-font-family;
font-variant-numeric: tabular-nums; // Force monosace-esque number widths
font-weight: $plyr-font-weight-regular;
line-height: $plyr-line-height;
font-weight: type.$plyr-font-weight-regular;
line-height: type.$plyr-line-height;
max-width: 100%;
min-width: 200px;
position: relative;
Expand Down Expand Up @@ -44,7 +48,7 @@

// border-box everything
// http://paulirish.com/2012/box-sizing-border-box-ftw/
@if $plyr-border-box {
@if helpers.$plyr-border-box {
.plyr--full-ui {
box-sizing: border-box;

Expand All @@ -57,7 +61,7 @@
}

// Fix 300ms delay
@if $plyr-touch-action {
@if helpers.$plyr-touch-action {
.plyr--full-ui {
a,
button,
Expand Down
11 changes: 7 additions & 4 deletions src/sass/components/badges.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,14 @@
// Badges
// --------------------------------------------------------------

@use '../settings/badges';
@use '../settings/type';

.plyr__badge {
background: $plyr-badge-background;
border-radius: $plyr-badge-border-radius;
color: $plyr-badge-text-color;
font-size: $plyr-font-size-badge;
background: badges.$plyr-badge-background;
border-radius: badges.$plyr-badge-border-radius;
color: badges.$plyr-badge-text-color;
font-size: type.$plyr-font-size-badge;
line-height: 1;
padding: 3px 4px;
}
24 changes: 14 additions & 10 deletions src/sass/components/captions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
// Captions
// --------------------------------------------------------------

@use '../settings/breakpoints';
@use '../settings/captions';
@use '../settings/controls';

// Hide default captions
.plyr--full-ui ::-webkit-media-text-track-container {
display: none;
Expand All @@ -11,9 +15,9 @@
animation: plyr-fade-in 0.3s ease;
bottom: 0;
display: none;
font-size: $plyr-font-size-captions-small;
font-size: captions.$plyr-font-size-captions-small;
left: 0;
padding: $plyr-control-spacing;
padding: controls.$plyr-control-spacing;
position: absolute;
text-align: center;
transition: transform 0.4s ease-in-out;
Expand All @@ -23,13 +27,13 @@
display: none;
}

@media (min-width: $plyr-bp-sm) {
font-size: $plyr-font-size-captions-base;
padding: calc(#{$plyr-control-spacing} * 2);
@media (min-width: breakpoints.$plyr-bp-sm) {
font-size: captions.$plyr-font-size-captions-base;
padding: calc(#{controls.$plyr-control-spacing} * 2);
}

@media (min-width: $plyr-bp-md) {
font-size: $plyr-font-size-captions-medium;
@media (min-width: breakpoints.$plyr-bp-md) {
font-size: captions.$plyr-font-size-captions-medium;
}
}

Expand All @@ -39,14 +43,14 @@

// If the lower controls are shown and not empty
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
transform: translateY(calc(#{$plyr-control-spacing} * -4));
transform: translateY(calc(#{controls.$plyr-control-spacing} * -4));
}

.plyr__caption {
background: $plyr-captions-background;
background: captions.$plyr-captions-background;
border-radius: 4px;
box-decoration-break: clone;
color: $plyr-captions-text-color;
color: captions.$plyr-captions-text-color;
line-height: 185%;
padding: 0.2em 0.5em;
white-space: pre-wrap;
Expand Down
13 changes: 8 additions & 5 deletions src/sass/components/control.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,27 @@
// Control buttons
// --------------------------------------------------------------

@use '../lib/mixins';
@use '../settings/controls';

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

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

// Default focus
Expand All @@ -29,7 +32,7 @@

// Tab focus
&:focus-visible {
@include plyr-focus-visible;
@include mixins.plyr-focus-visible;
}
}

Expand Down
8 changes: 5 additions & 3 deletions src/sass/components/controls.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
// Controls
// --------------------------------------------------------------

@use '../settings/controls';

// Hide native controls
.plyr--full-ui ::-webkit-media-controls {
display: none;
Expand All @@ -21,19 +23,19 @@

// Spacing
.plyr__controls__item {
margin-left: calc(#{$plyr-control-spacing} / 4);
margin-left: calc(#{controls.$plyr-control-spacing} / 4);

&:first-child {
margin-left: 0;
margin-right: auto;
}

&.plyr__progress__container {
padding-left: calc(#{$plyr-control-spacing} / 4);
padding-left: calc(#{controls.$plyr-control-spacing} / 4);
}

&.plyr__time {
padding: 0 calc(#{$plyr-control-spacing} / 2);
padding: 0 calc(#{controls.$plyr-control-spacing} / 2);
}

&.plyr__progress__container:first-child,
Expand Down
72 changes: 40 additions & 32 deletions src/sass/components/menus.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
// Menus
// --------------------------------------------------------------

@use '../settings/colors';
@use '../settings/controls';
@use '../settings/menus';
@use '../settings/type';

.plyr__menu {
display: flex; // Edge fix
position: relative;
Expand All @@ -25,12 +30,12 @@
// The actual menu container
&__container {
animation: plyr-popup 0.2s ease;
background: $plyr-menu-background;
border-radius: $plyr-menu-radius;
background: menus.$plyr-menu-background;
border-radius: menus.$plyr-menu-radius;
bottom: 100%;
box-shadow: $plyr-menu-shadow;
color: $plyr-menu-color;
font-size: $plyr-font-size-base;
box-shadow: menus.$plyr-menu-shadow;
color: menus.$plyr-menu-color;
font-size: type.$plyr-font-size-base;
margin-bottom: 10px;
position: absolute;
right: -3px;
Expand All @@ -47,18 +52,21 @@

// Arrow
&::after {
border: $plyr-menu-arrow-size solid transparent;
border-top-color: $plyr-menu-background;
border: menus.$plyr-menu-arrow-size solid transparent;
border-top-color: menus.$plyr-menu-background;
content: '';
height: 0;
position: absolute;
right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
right: calc(
((#{controls.$plyr-control-icon-size} / 2) + #{controls.$plyr-control-padding}) -
(#{menus.$plyr-menu-arrow-size} / 2)
);
top: 100%;
width: 0;
}

[role='menu'] {
padding: $plyr-control-padding;
padding: controls.$plyr-control-padding;
}

[role='menuitem'],
Expand All @@ -73,10 +81,10 @@
// Options
.plyr__control {
align-items: center;
color: $plyr-menu-color;
color: menus.$plyr-menu-color;
display: flex;
font-size: $plyr-font-size-menu;
padding: calc(#{$plyr-control-padding} / 1.5) calc(#{$plyr-control-padding} * 1.5);
font-size: type.$plyr-font-size-menu;
padding: calc(#{controls.$plyr-control-padding} / 1.5) calc(#{controls.$plyr-control-padding} * 1.5);
user-select: none;
width: 100%;

Expand All @@ -87,19 +95,19 @@
}

&::after {
border: $plyr-menu-item-arrow-size solid transparent;
border: menus.$plyr-menu-item-arrow-size solid transparent;
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
}

&--forward {
padding-right: calc(#{$plyr-control-padding} * 4);
padding-right: calc(#{controls.$plyr-control-padding} * 4);

&::after {
border-left-color: $plyr-menu-item-arrow-color;
right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
border-left-color: menus.$plyr-menu-item-arrow-color;
right: calc((#{controls.$plyr-control-padding} * 1.5) - #{menus.$plyr-menu-item-arrow-size});
}

&:focus-visible::after,
Expand All @@ -109,25 +117,25 @@
}

&--back {
font-weight: $plyr-font-weight-regular;
margin: $plyr-control-padding;
margin-bottom: calc(#{$plyr-control-padding} / 2);
padding-left: calc(#{$plyr-control-padding} * 4);
font-weight: type.$plyr-font-weight-regular;
margin: controls.$plyr-control-padding;
margin-bottom: calc(#{controls.$plyr-control-padding} / 2);
padding-left: calc(#{controls.$plyr-control-padding} * 4);
position: relative;
width: calc(100% - (#{$plyr-control-padding} * 2));
width: calc(100% - (#{controls.$plyr-control-padding} * 2));

&::after {
border-right-color: $plyr-menu-item-arrow-color;
left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
border-right-color: menus.$plyr-menu-item-arrow-color;
left: calc((#{controls.$plyr-control-padding} * 1.5) - #{menus.$plyr-menu-item-arrow-size});
}

&::before {
background: $plyr-menu-back-border-color;
box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
background: menus.$plyr-menu-back-border-color;
box-shadow: 0 1px 0 menus.$plyr-menu-back-border-shadow-color;
content: '';
height: 1px;
left: 0;
margin-top: calc(#{$plyr-control-padding} / 2);
margin-top: calc(#{controls.$plyr-control-padding} / 2);
overflow: hidden;
position: absolute;
right: 0;
Expand All @@ -142,7 +150,7 @@
}

.plyr__control[role='menuitemradio'] {
padding-left: $plyr-control-padding;
padding-left: controls.$plyr-control-padding;

&::before,
&::after {
Expand All @@ -155,7 +163,7 @@
display: block;
flex-shrink: 0;
height: 16px;
margin-right: $plyr-control-spacing;
margin-right: controls.$plyr-control-spacing;
transition: all 0.3s ease;
width: 16px;
}
Expand All @@ -176,7 +184,7 @@

&[aria-checked='true'] {
&::before {
background: $plyr-control-toggle-checked-background;
background: controls.$plyr-control-toggle-checked-background;
}

&::after {
Expand All @@ -187,7 +195,7 @@

&:focus-visible::before,
&:hover::before {
background: rgba($plyr-color-gray-900, 0.1);
background: rgba(colors.$plyr-color-gray-900, 0.1);
}
}

Expand All @@ -196,9 +204,9 @@
align-items: center;
display: flex;
margin-left: auto;
margin-right: calc((#{$plyr-control-padding} - 2px) * -1);
margin-right: calc((#{controls.$plyr-control-padding} - 2px) * -1);
overflow: hidden;
padding-left: calc(#{$plyr-control-padding} * 3.5);
padding-left: calc(#{controls.$plyr-control-padding} * 3.5);
pointer-events: none;
}
}
Expand Down
4 changes: 3 additions & 1 deletion src/sass/components/poster.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@
// Faux poster overlay
// --------------------------------------------------------------

@use '../settings/colors';

.plyr__poster {
background-color: var(--plyr-video-background, $plyr-video-background);
background-color: var(--plyr-video-background, colors.$plyr-video-background);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
Expand Down
Loading