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

Split up settings file

Browse Source
This commit is contained in:
Sam Potts 2017-12-20 18:00:05 +00:00
parent 6bc3592381
commit f3df7aba15
15 changed files with 134 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/error.html
View File

@ -10,8 +10,8 @@
<link rel="stylesheet" href="dist/error.css"> <link rel="stylesheet" href="dist/error.css">
<!-- Preload --> <!-- Preload -->
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-medium.woff2"> <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/avenir-bold.woff2"> <link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
</head> </head>
<body> <body>

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

@ -9,7 +9,7 @@
@import '../settings/cosmetic'; @import '../settings/cosmetic';
@import '../settings/icons'; @import '../settings/icons';
@import '../settings/layout'; @import '../settings/layout';
@import '../settings/plyr';
@import '../settings/spacing'; @import '../settings/spacing';
@import '../settings/type'; @import '../settings/type';
@ -37,5 +37,4 @@
@import '../components/players'; @import '../components/players';
// Plyr // Plyr
@import '../settings/plyr';
@import '../../../../src/sass/bundle'; @import '../../../../src/sass/bundle';

12
src/sass/bundle.scss
View File

@ -5,7 +5,17 @@
// ========================================================================== // ==========================================================================
@charset 'UTF-8'; @charset 'UTF-8';
@import 'settings'; @import 'settings/breakpoints';
@import 'settings/captions';
@import 'settings/colors';
@import 'settings/controls';
@import 'settings/cosmetics';
@import 'settings/helpers';
@import 'settings/menus';
@import 'settings/progress';
@import 'settings/sliders';
@import 'settings/tooltips';
@import 'settings/type';
@import 'lib/animation'; @import 'lib/animation';
@import 'lib/mixins'; @import 'lib/mixins';

102
src/sass/settings.scss
View File

@ -1,102 +0,0 @@
// ==========================================================================
// Plyr variables
// https://github.com/sampotts/plyr
// ==========================================================================
// Settings
$plyr-border-box: true !default;
$plyr-touch-action: true !default;
$plyr-sr-only-important: true !default;
// Colors
$plyr-color-main: #1aafff !default;
$plyr-color-gunmetal: #2f343d !default;
$plyr-color-fiord: #4f5b5f !default;
$plyr-color-lynch: #6b7d85 !default;
$plyr-color-heather: #b7c5cd !default;
// Type
$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
$plyr-font-size-base: 16px !default;
$plyr-font-size-small: 14px !default;
$plyr-font-size-time: 14px !default;
$plyr-font-size-badge: 10px !default;
$plyr-font-weight-regular: 500 !default;
$plyr-font-weight-bold: 600 !default;
$plyr-line-height: 1.7 !default;
$plyr-font-smoothing: true !default;
// Focus
$plyr-tab-focus-default-color: $plyr-color-main !default;
// Captions
$plyr-captions-bg: rgba(#000, 0.8) !default;
$plyr-captions-color: #fff !default;
$plyr-font-size-captions-base: $plyr-font-size-base !default;
$plyr-font-size-captions-small: $plyr-font-size-small !default;
$plyr-font-size-captions-medium: 18px !default;
$plyr-font-size-captions-large: 21px !default;
// Controls
$plyr-control-icon-size: 18px !default;
$plyr-control-icon-size-large: 20px !default;
$plyr-control-spacing: 10px !default;
$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
$plyr-control-radius: 3px !default;
$plyr-video-controls-bg: #000 !default;
$plyr-video-control-color: #fff !default;
$plyr-video-control-color-hover: #fff !default;
$plyr-video-control-bg-hover: $plyr-color-main !default;
$plyr-audio-controls-bg: #fff !default;
$plyr-audio-control-color: $plyr-color-fiord !default;
$plyr-audio-control-color-hover: #fff !default;
$plyr-audio-control-bg-hover: $plyr-color-main !default;
// Tooltips
$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
$plyr-tooltip-color: $plyr-color-fiord !default;
$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
$plyr-tooltip-arrow-size: 4px !default;
$plyr-tooltip-radius: 3px !default;
$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default;
// Menus
$plyr-menu-bg: $plyr-tooltip-bg !default;
$plyr-menu-color: $plyr-tooltip-color !default;
$plyr-menu-arrow-size: 6px !default;
$plyr-menu-border-color: $plyr-color-heather !default;
$plyr-menu-border-shadow-color: #fff !default;
$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
// Progress
$plyr-progress-loading-size: 25px !default;
$plyr-progress-loading-bg: rgba($plyr-color-gunmetal, 0.2) !default;
$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
$plyr-audio-progress-buffered-bg: rgba($plyr-color-heather, 0.66) !default;
// Range sliders
$plyr-range-track-height: 6px !default;
$plyr-range-thumb-height: 14px !default;
$plyr-range-thumb-bg: #fff !default;
$plyr-range-thumb-border: 2px solid transparent !default;
$plyr-range-thumb-shadow: 0 1px 1px rgba($plyr-video-controls-bg, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
$plyr-range-fill-bg: $plyr-color-main !default;
$plyr-range-thumb-active-border-color: #fff !default;
$plyr-range-thumb-active-bg: $plyr-video-control-bg-hover !default;
$plyr-range-thumb-active-height: 20px !default;
$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
// Breakpoints
$plyr-bp-sm: 480px !default;
$plyr-bp-md: 768px !default;
$plyr-bp-lg: 1024px !default;
// Max-width media queries
$plyr-bp-xs-max: ($plyr-bp-sm - 1) !default;
$plyr-bp-sm-max: ($plyr-bp-md - 1) !default;
$plyr-bp-md-max: ($plyr-bp-lg - 1) !default;

12
src/sass/settings/breakpoints.scss Normal file
View File

@ -0,0 +1,12 @@
// ==========================================================================
// Breakpoints
// ==========================================================================
$plyr-bp-sm: 480px !default;
$plyr-bp-md: 768px !default;
$plyr-bp-lg: 1024px !default;
// Max-width media queries
$plyr-bp-xs-max: ($plyr-bp-sm - 1);
$plyr-bp-sm-max: ($plyr-bp-md - 1);
$plyr-bp-md-max: ($plyr-bp-lg - 1);

10
src/sass/settings/captions.scss Normal file
View File

@ -0,0 +1,10 @@
// ==========================================================================
// Captions
// ==========================================================================
$plyr-captions-bg: rgba(#000, 0.8) !default;
$plyr-captions-color: #fff !default;
$plyr-font-size-captions-base: $plyr-font-size-base !default;
$plyr-font-size-captions-small: $plyr-font-size-small !default;
$plyr-font-size-captions-medium: 18px !default;
$plyr-font-size-captions-large: 21px !default;

9
src/sass/settings/colors.scss Normal file
View File

@ -0,0 +1,9 @@
// ==========================================================================
// Colors
// ==========================================================================
$plyr-color-main: #1aafff !default;
$plyr-color-gunmetal: #2f343d !default;
$plyr-color-fiord: #4f5b5f !default;
$plyr-color-lynch: #6b7d85 !default;
$plyr-color-heather: #b7c5cd !default;

19
src/sass/settings/controls.scss Normal file
View File

@ -0,0 +1,19 @@
// ==========================================================================
// Controls
// ==========================================================================
$plyr-control-icon-size: 18px !default;
$plyr-control-icon-size-large: 20px !default;
$plyr-control-spacing: 10px !default;
$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
$plyr-control-radius: 3px !default;
$plyr-video-controls-bg: #000 !default;
$plyr-video-control-color: #fff !default;
$plyr-video-control-color-hover: #fff !default;
$plyr-video-control-bg-hover: $plyr-color-main !default;
$plyr-audio-controls-bg: #fff !default;
$plyr-audio-control-color: $plyr-color-fiord !default;
$plyr-audio-control-color-hover: #fff !default;
$plyr-audio-control-bg-hover: $plyr-color-main !default;

5
src/sass/settings/cosmetics.scss Normal file
View File

@ -0,0 +1,5 @@
// ==========================================================================
// Cosmetic
// ==========================================================================
$plyr-tab-focus-default-color: $plyr-color-main !default;

7
src/sass/settings/helpers.scss Normal file
View File

@ -0,0 +1,7 @@
// ==========================================================================
// Enable helpers
// ==========================================================================
$plyr-border-box: true !default;
$plyr-touch-action: true !default;
$plyr-sr-only-important: true !default;

10
src/sass/settings/menus.scss Normal file
View File

@ -0,0 +1,10 @@
// ==========================================================================
// Menus
// ==========================================================================
$plyr-menu-bg: rgba(#fff, 0.9) !default;
$plyr-menu-color: $plyr-color-fiord !default;
$plyr-menu-arrow-size: 6px !default;
$plyr-menu-border-color: $plyr-color-heather !default;
$plyr-menu-border-shadow-color: #fff !default;
$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;

8
src/sass/settings/progress.scss Normal file
View File

@ -0,0 +1,8 @@
// ==========================================================================
// Progress
// ==========================================================================
$plyr-progress-loading-size: 25px !default;
$plyr-progress-loading-bg: rgba($plyr-color-gunmetal, 0.2) !default;
$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
$plyr-audio-progress-buffered-bg: rgba($plyr-color-heather, 0.66) !default;

17
src/sass/settings/sliders.scss Normal file
View File

@ -0,0 +1,17 @@
// ==========================================================================
// Sliders
// ==========================================================================
$plyr-range-track-height: 6px !default;
$plyr-range-thumb-height: 14px !default;
$plyr-range-thumb-bg: #fff !default;
$plyr-range-thumb-border: 2px solid transparent !default;
$plyr-range-thumb-shadow: 0 1px 1px rgba($plyr-video-controls-bg, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
$plyr-range-fill-bg: $plyr-color-main !default;
$plyr-range-thumb-active-border-color: #fff !default;
$plyr-range-thumb-active-bg: $plyr-video-control-bg-hover !default;
$plyr-range-thumb-active-height: 20px !default;
$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;

10
src/sass/settings/tooltips.scss Normal file
View File

@ -0,0 +1,10 @@
// ==========================================================================
// Tooltips
// ==========================================================================
$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
$plyr-tooltip-color: $plyr-color-fiord !default;
$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
$plyr-tooltip-arrow-size: 4px !default;
$plyr-tooltip-radius: 3px !default;
$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default;

13
src/sass/settings/type.scss Normal file
View File

@ -0,0 +1,13 @@
// ==========================================================================
// Typography
// ==========================================================================
$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
$plyr-font-size-base: 16px !default;
$plyr-font-size-small: 14px !default;
$plyr-font-size-time: 14px !default;
$plyr-font-size-badge: 10px !default;
$plyr-font-weight-regular: 500 !default;
$plyr-font-weight-bold: 600 !default;
$plyr-line-height: 1.7 !default;
$plyr-font-smoothing: true !default;