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

chore: SASS clean up

Browse Source
This commit is contained in:
Sam Potts
2021-12-16 22:59:25 +11:00
parent 950786b117
commit 675a853e2e
29 changed files with 98 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demo/src/sass/bundles/demo.scss
View File

@ -2,8 +2,8 @@
// Plyr.io Demo Page
// ==========================================================================
@charset 'UTF-8';
@import '../../../../src/sass/lib/css-vars';
$css-vars-use-native: true;
// Settings

4
demo/src/sass/components/buttons.scss
View File

@ -45,7 +45,7 @@
}
&.tab-focus {
@include tab-focus();
@include tab-focus;
}
&:active {
@ -64,7 +64,7 @@
// Count bubble
.button__count {
animation: fadein 0.2s ease;
animation: fade-in 0.2s ease;
background: $color-button-count-background;
color: $color-button-count-text;
margin-left: ($spacing-base * 0.75);

2
demo/src/sass/components/header.scss
View File

@ -7,7 +7,7 @@ header {
text-align: center;
h1 span {
animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
animation: shrink-hide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
display: inline-block;
font-weight: $font-weight-light;
opacity: 0.5;

4
demo/src/sass/components/links.scss
View File

@ -5,7 +5,7 @@
// Make a <button> look like an <a>
button.faux-link {
@extend a; // stylelint-disable-line
@include cancel-button-styles();
@include cancel-button-styles;
}
// Links
@ -39,7 +39,7 @@ a {
}
&.tab-focus {
@include tab-focus();
@include tab-focus;
}
&.no-border::after {

7
demo/src/sass/lib/animation.scss
View File

@ -3,23 +3,26 @@
// ==========================================================================
// Fade
@keyframes fadein {
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes shrinkHide {
@keyframes shrink-hide {
0% {
opacity: 0.5;
width: 38px;
}
20% {
width: 45px;
}
100% {
opacity: 0;
width: 0;

10
demo/src/sass/lib/fontface.scss
View File

@ -4,7 +4,7 @@
@font-face {
font-display: swap;
font-family: 'Gordita';
font-family: Gordita;
font-style: normal;
font-weight: $font-weight-light;
src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'),
@ -13,7 +13,7 @@
@font-face {
font-display: swap;
font-family: 'Gordita';
font-family: Gordita;
font-style: normal;
font-weight: $font-weight-regular;
src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
@ -22,7 +22,7 @@
@font-face {
font-display: swap;
font-family: 'Gordita';
font-family: Gordita;
font-style: normal;
font-weight: $font-weight-medium;
src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
@ -31,7 +31,7 @@
@font-face {
font-display: swap;
font-family: 'Gordita';
font-family: Gordita;
font-style: normal;
font-weight: $font-weight-bold;
src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'),
@ -40,7 +40,7 @@
@font-face {
font-display: swap;
font-family: 'Gordita';
font-family: Gordita;
font-style: normal;
font-weight: $font-weight-black;
src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'),

2
demo/src/sass/lib/mixins.scss
View File

@ -18,7 +18,7 @@
position: relative;
text-align: inherit;
text-shadow: inherit;
-moz-user-select: text; // stylelint-disable-line
user-select: text;
vertical-align: baseline;
width: auto;
}

17
demo/src/sass/lib/normalize.scss vendored
View File

@ -11,8 +11,7 @@
html {
line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
text-size-adjust: 100%; /* 2 */
}
/* Sections
@ -89,7 +88,7 @@ hr {
*/
pre {
font-family: monospace, monospace; /* 1 */
font-family: monospace; /* 1 */
font-size: 1em; /* 2 */
}
@ -103,7 +102,7 @@ pre {
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
text-decoration-skip: objects; /* 2 */
}
/**
@ -112,7 +111,7 @@ a {
*/
abbr[title] {
border-bottom: none; /* 1 */
border-bottom: 0; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
@ -281,7 +280,7 @@ button,
html [type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 2 */
appearance: button; /* 2 */
}
/**
@ -375,7 +374,7 @@ textarea {
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
@ -385,7 +384,7 @@ textarea {
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
-webkit-appearance: none;
appearance: none;
}
/**
@ -394,7 +393,7 @@ textarea {
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
appearance: button; /* 1 */
font: inherit; /* 2 */
}

10
demo/src/sass/settings/colors.scss
View File

@ -3,7 +3,7 @@
// ==========================================================================
// Grayscale
$color-gray-900: hsl(210, 15%, 16%);
$color-gray-900: hsl(210deg 15% 16%);
$color-gray-800: lighten($color-gray-900, 9%);
$color-gray-700: lighten($color-gray-800, 9%);
$color-gray-600: lighten($color-gray-700, 9%);
@ -15,7 +15,7 @@ $color-gray-100: lighten($color-gray-200, 9%);
$color-gray-50: lighten($color-gray-100, 9%);
// Branding
$color-brand-primary: hsl(198, 100%, 50%);
$color-brand-primary: hsl(198deg 100% 50%);
// Text
$color-text: $color-gray-700;
@ -28,13 +28,13 @@ $color-twitter: #4baaf4;
$color-link: $color-brand-primary;
// Background
$color-background-from: hsl(198, 100%, 94%);
$color-background-to: hsl(198, 100%, 98%);
$color-background-from: hsl(198deg 100% 94%);
$color-background-to: hsl(198deg 100% 98%);
// Buttons
$color-button-background: $color-brand-primary;
$color-button-text: #fff;
$color-button-background-hover: hsl(198, 100%, 55%);
$color-button-background-hover: hsl(198deg 100% 55%);
$color-button-count-background: #fff;
$color-button-count-text: $color-gray-600;

4
demo/src/sass/settings/type.scss
View File

@ -4,18 +4,14 @@
$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol';
$font-size-base: 15;
$font-size-small: 13;
$font-size-large: 18;
$font-size-h1: 64;
$font-weight-light: 300;
$font-weight-regular: 400;
$font-weight-medium: 500;
$font-weight-bold: 600;
$font-weight-black: 900;
$line-height-base: 1.75;
$letter-spacing-headings: -0.025em;

4
demo/src/sass/type/base.scss
View File

@ -8,8 +8,9 @@ html {
}
body {
@include font-smoothing();
@include font-smoothing;
@include font-size($font-size-base);
color: $color-text;
font-family: $font-sans-serif;
font-weight: $font-weight-medium;
@ -30,5 +31,6 @@ small {
small {
@include font-size($font-size-small);
display: block;
}

1
demo/src/sass/type/headings.scss
View File

@ -4,6 +4,7 @@
h1 {
@include font-size($font-size-h1);
color: $color-headings;
font-weight: $font-weight-bold;
letter-spacing: $letter-spacing-headings;