Converted to SASS/SCSS
This commit is contained in:
Sam Potts
2
demo/dist/demo.css
vendored
2
demo/dist/demo.css
vendored
File diff suppressed because one or more lines are too long
2
demo/dist/demo.js
vendored
2
demo/dist/demo.js
vendored
@ -1,3 +1,3 @@
|
||||
document.addEventListener("DOMContentLoaded",function(){function e(e,t,o){e&&e.classList[o?"add":"remove"](t)}function t(t,n){if(t in r&&(n||t!==a)&&(a.length||t!==r.video)){switch(t){case r.video:o.source={type:"video",title:"View From A Blue Moon",sources:[{src:"media/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"media/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"media/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case r.audio:o.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case r.youtube:o.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case r.vimeo:o.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}a=t,Array.from(i).forEach(function(t){return e(t.parentElement,"active",!1)}),e(document.querySelector('[data-source="'+t+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+t).removeAttribute("hidden")}}window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&window.setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var o=new window.Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen","pip","airplay"],keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"}});window.player=o;var i=document.querySelectorAll("[data-source]"),r={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},a=window.location.hash.replace("#",""),n=window.history&&window.history.pushState;if(Array.from(i).forEach(function(e){e.addEventListener("click",function(){var o=e.getAttribute("data-source");t(o),n&&window.history.pushState({type:o},"","#"+o)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),n){var s=!a.length;s&&(a=r.video),a in r&&window.history.replaceState({type:a},"",s?"":"#"+a),a!==r.video&&t(a,!0)}}),"plyr.io"===window.location.host&&(!function(e,t,o,i,r,a,n){e.GoogleAnalyticsObject="ga",e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,a=t.createElement("script"),n=t.getElementsByTagName("script")[0],a.async=1,a.src="//www.google-analytics.com/analytics.js",n.parentNode.insertBefore(a,n)}(window,document),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"));
|
||||
document.addEventListener("DOMContentLoaded",function(){function e(e,t,o){e&&e.classList[o?"add":"remove"](t)}function t(t,o){if(t in a&&(o||t!==n)&&(n.length||t!==a.video)){switch(t){case a.video:i.source={type:"video",title:"View From A Blue Moon",sources:[{src:"media/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"media/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"media/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case a.audio:i.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case a.youtube:i.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case a.vimeo:i.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}n=t,Array.from(r).forEach(function(t){return e(t.parentElement,"active",!1)}),e(document.querySelector('[data-source="'+t+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+t).removeAttribute("hidden")}}window.shr&&window.shr.setup({count:{classname:"button__count"}});var o="tab-focus";document.addEventListener("focusout",function(e){e.target.classList.remove(o)}),document.addEventListener("keydown",function(e){9===e.keyCode&&window.setTimeout(function(){document.activeElement.classList.add(o)},0)});var i=new window.Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen","pip","airplay"],keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"}});window.player=i;var r=document.querySelectorAll("[data-source]"),a={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},n=window.location.hash.replace("#",""),s=window.history&&window.history.pushState;if(Array.from(r).forEach(function(e){e.addEventListener("click",function(){var o=e.getAttribute("data-source");t(o),s&&window.history.pushState({type:o},"","#"+o)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),s){var c=!n.length;c&&(n=a.video),n in a&&window.history.replaceState({type:n},"",c?"":"#"+n),n!==a.video&&t(n,!0)}}),"plyr.io"===window.location.host&&(!function(e,t,o,i,r,a,n){e.GoogleAnalyticsObject="ga",e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,a=t.createElement("script"),n=t.getElementsByTagName("script")[0],a.async=1,a.src="//www.google-analytics.com/analytics.js",n.parentNode.insertBefore(a,n)}(window,document),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"));
|
||||
|
||||
//# sourceMappingURL=demo.js.map
|
||||
|
||||
2
demo/dist/demo.js.map
vendored
2
demo/dist/demo.js.map
vendored
File diff suppressed because one or more lines are too long
1
demo/dist/error.css
vendored
1
demo/dist/error.css
vendored
File diff suppressed because one or more lines are too long
@ -1,9 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Breakpoints
|
||||
// ==========================================================================
|
||||
|
||||
@screen-sm: 480px;
|
||||
@screen-md: 768px;
|
||||
|
||||
@mq-sm: ~'only screen and (min-width: @{screen-sm}) ';
|
||||
@mq-md: ~'only screen and (min-width: @{screen-md}) ';
|
||||
@ -1,27 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Colors
|
||||
// ==========================================================================
|
||||
|
||||
// Greyscale
|
||||
@gray-dark: #343f4a;
|
||||
@gray: #55646b;
|
||||
@gray-light: #cbd0d3;
|
||||
@gray-lighter: #dbe3e8;
|
||||
@off-white: #f2f5f7;
|
||||
|
||||
// Text
|
||||
@color-text: #fff;
|
||||
|
||||
// Plyr
|
||||
@color-brand-primary: #1aafff;
|
||||
|
||||
// Brands
|
||||
@color-twitter: #4baaf4;
|
||||
@color-youtube: #cc181e;
|
||||
@color-vimeo: #19b7ed;
|
||||
|
||||
// Elements
|
||||
@color-link: #fff;
|
||||
|
||||
// Focus
|
||||
@tab-focus-default-color: #fff;
|
||||
@ -1,18 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Plyr Settings
|
||||
// ==========================================================================
|
||||
|
||||
// Font
|
||||
@plyr-font-family: inherit;
|
||||
|
||||
// Sizes
|
||||
@plyr-font-size-base: 13px;
|
||||
@plyr-font-size-small: 12px;
|
||||
@plyr-font-size-time: 11px;
|
||||
@plyr-font-size-badges: 9px;
|
||||
|
||||
// Captions
|
||||
@plyr-font-size-captions-base: @plyr-font-size-base;
|
||||
@plyr-font-size-captions-small: @plyr-font-size-small;
|
||||
@plyr-font-size-captions-medium: 18px;
|
||||
@plyr-font-size-captions-large: 21px;
|
||||
@ -1,20 +0,0 @@
|
||||
// ==========================================================================
|
||||
// Typography
|
||||
// ==========================================================================
|
||||
|
||||
@font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
|
||||
|
||||
@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;
|
||||
@ -3,12 +3,6 @@
|
||||
// ==========================================================================
|
||||
@charset 'UTF-8';
|
||||
|
||||
// Libs
|
||||
@import '../lib/fontface';
|
||||
@import '../lib/animation';
|
||||
@import '../lib/mixins';
|
||||
@import '../lib/normalize';
|
||||
|
||||
// Settings
|
||||
@import '../settings/breakpoints';
|
||||
@import '../settings/colors';
|
||||
@ -19,6 +13,12 @@
|
||||
@import '../settings/spacing';
|
||||
@import '../settings/type';
|
||||
|
||||
// Libs
|
||||
@import '../lib/fontface';
|
||||
@import '../lib/animation';
|
||||
@import '../lib/mixins';
|
||||
@import '../lib/normalize';
|
||||
|
||||
// Layout
|
||||
@import '../layout/core';
|
||||
@import '../layout/grid';
|
||||
@ -37,5 +37,5 @@
|
||||
@import '../components/players';
|
||||
|
||||
// Plyr
|
||||
@import '../../../../src/less/bundle';
|
||||
@import '../settings/plyr';
|
||||
@import '../../../../src/sass/bundle';
|
||||
@ -5,30 +5,30 @@
|
||||
// Shared
|
||||
.button,
|
||||
.button__count {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
padding: (@spacing-base * 0.75);
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: 0 1px 1px fade(#000, 10%);
|
||||
background: #fff;
|
||||
border: 0;
|
||||
user-select: none;
|
||||
border-radius: $border-radius-base;
|
||||
box-shadow: 0 1px 1px rgba(#000, 0.1);
|
||||
color: $gray;
|
||||
display: inline-flex;
|
||||
padding: ($spacing-base * 0.75);
|
||||
position: relative;
|
||||
text-shadow: none;
|
||||
color: @gray;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.button {
|
||||
padding-left: @spacing-base;
|
||||
padding-right: @spacing-base;
|
||||
font-weight: $font-weight-bold;
|
||||
padding-left: $spacing-base;
|
||||
padding-right: $spacing-base;
|
||||
transition: all 0.2s ease;
|
||||
font-weight: @font-weight-bold;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @gray-dark;
|
||||
color: $gray-dark;
|
||||
|
||||
// Remove the underline/border
|
||||
&::after {
|
||||
@ -37,8 +37,8 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 2px 2px rgba(#000, 0.1);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 2px fade(#000, 10%);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@ -46,7 +46,7 @@
|
||||
}
|
||||
|
||||
&.tab-focus {
|
||||
.tab-focus();
|
||||
@include tab-focus();
|
||||
}
|
||||
|
||||
&:active {
|
||||
@ -65,19 +65,19 @@
|
||||
|
||||
// Count bubble
|
||||
.button__count {
|
||||
margin-left: (@spacing-base / 2);
|
||||
animation: fadein 0.2s ease;
|
||||
margin-left: ($spacing-base / 2);
|
||||
|
||||
&::before {
|
||||
border: $arrow-size solid transparent;
|
||||
border-left-width: 0;
|
||||
border-right-color: #fff;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: @arrow-size solid transparent;
|
||||
border-right-color: #fff;
|
||||
border-left-width: 0;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
@ -3,17 +3,17 @@
|
||||
// ==========================================================================
|
||||
|
||||
header {
|
||||
padding-bottom: @spacing-base;
|
||||
padding-bottom: $spacing-base;
|
||||
text-align: center;
|
||||
|
||||
.call-to-action {
|
||||
margin-top: (@spacing-base * 1.5);
|
||||
margin-top: ($spacing-base * 1.5);
|
||||
}
|
||||
|
||||
@media @mq-md {
|
||||
@media only screen and (min-width: $screen-md) {
|
||||
margin-right: ($spacing-base * 3);
|
||||
max-width: 360px;
|
||||
margin-right: (@spacing-base * 3);
|
||||
padding-bottom: (@spacing-base * 2);
|
||||
padding-bottom: ($spacing-base * 2);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@ -5,9 +5,9 @@
|
||||
// Base size icon styles
|
||||
.icon {
|
||||
fill: currentColor;
|
||||
width: @icon-size;
|
||||
height: @icon-size;
|
||||
height: $icon-size;
|
||||
vertical-align: -3px;
|
||||
width: $icon-size;
|
||||
}
|
||||
|
||||
// Within elements
|
||||
@ -19,5 +19,5 @@ label svg {
|
||||
|
||||
a .icon,
|
||||
.btn .icon {
|
||||
margin-right: floor(@spacing-base / 3);
|
||||
margin-right: floor($spacing-base / 3);
|
||||
}
|
||||
@ -4,30 +4,29 @@
|
||||
|
||||
// Make a <button> look like an <a>
|
||||
button.faux-link {
|
||||
.cancel-button-styles();
|
||||
|
||||
&:extend(a all);
|
||||
@extend a; // stylelint-disable-line
|
||||
@include cancel-button-styles();
|
||||
}
|
||||
|
||||
// Links
|
||||
a {
|
||||
position: relative;
|
||||
border-bottom: 1px dotted currentColor;
|
||||
transition: all 0.2s ease;
|
||||
color: $color-link;
|
||||
font-weight: $font-weight-bold;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
color: @color-link;
|
||||
font-weight: @font-weight-bold;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&::after {
|
||||
background: currentColor;
|
||||
content: '';
|
||||
height: 1px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 1px;
|
||||
transition: width 0.2s ease;
|
||||
background: currentColor;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
@ -41,6 +40,6 @@ a {
|
||||
}
|
||||
|
||||
&.tab-focus {
|
||||
.tab-focus();
|
||||
@include tab-focus();
|
||||
}
|
||||
}
|
||||
@ -5,5 +5,5 @@
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: @spacing-base;
|
||||
margin-bottom: $spacing-base;
|
||||
}
|
||||
@ -10,9 +10,9 @@ video {
|
||||
|
||||
// Example players
|
||||
.plyr {
|
||||
margin: @spacing-base auto;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: 0 2px 5px fade(#000, 20%);
|
||||
border-radius: $border-radius-base;
|
||||
box-shadow: 0 2px 5px rgba(#000, 0.2);
|
||||
margin: $spacing-base auto;
|
||||
|
||||
&.plyr--audio {
|
||||
max-width: 480px;
|
||||
@ -20,24 +20,24 @@ video {
|
||||
}
|
||||
|
||||
.plyr__video-wrapper::after {
|
||||
border: 1px solid rgba(#000, 0.15);
|
||||
border-radius: inherit;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border: 1px solid fade(#000, 15%);
|
||||
border-radius: inherit;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// Style full supported player
|
||||
.plyr__cite {
|
||||
display: none;
|
||||
margin-top: @spacing-base;
|
||||
margin-top: $spacing-base;
|
||||
|
||||
.icon {
|
||||
margin-right: ceil(@spacing-base / 6);
|
||||
margin-right: ceil($spacing-base / 6);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,12 +2,6 @@
|
||||
// Core
|
||||
// ==========================================================================
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
display: flex;
|
||||
@ -15,16 +9,16 @@ body {
|
||||
}
|
||||
|
||||
html {
|
||||
background: @page-background;
|
||||
background: $page-background;
|
||||
background-attachment: fixed;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
min-height: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.grid {
|
||||
@ -38,21 +32,21 @@ main {
|
||||
}
|
||||
|
||||
aside {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
color: $gray;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: (@spacing-base * 0.75);
|
||||
background: #fff;
|
||||
padding: ($spacing-base * 0.75);
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: @gray;
|
||||
text-shadow: none;
|
||||
width: 100%;
|
||||
|
||||
.icon {
|
||||
margin-right: (@spacing-base / 2);
|
||||
fill: @color-twitter;
|
||||
fill: $color-twitter;
|
||||
margin-right: ($spacing-base / 2);
|
||||
}
|
||||
|
||||
p {
|
||||
@ -60,10 +54,10 @@ aside {
|
||||
}
|
||||
|
||||
a {
|
||||
color: @color-twitter;
|
||||
color: $color-twitter;
|
||||
|
||||
&.tab-focus {
|
||||
.tab-focus(@color-twitter);
|
||||
@include tab-focus($color-twitter);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -9,22 +9,22 @@ html.error,
|
||||
}
|
||||
|
||||
html.error {
|
||||
background: @page-background;
|
||||
background: $page-background;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.error body {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error main {
|
||||
width: 100%;
|
||||
padding: @spacing-base;
|
||||
padding: $spacing-base;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
p {
|
||||
.font-size(@font-size-large);
|
||||
@include font-size($font-size-large);
|
||||
}
|
||||
}
|
||||
@ -4,13 +4,13 @@
|
||||
|
||||
.grid {
|
||||
margin: 0 auto;
|
||||
padding: @spacing-base;
|
||||
padding: $spacing-base;
|
||||
|
||||
@media @mq-md {
|
||||
display: flex;
|
||||
@media only screen and (min-width: $screen-md) {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
max-width: $container-max-width;
|
||||
width: 100%;
|
||||
max-width: @container-max-width;
|
||||
|
||||
> * {
|
||||
flex: 1;
|
||||
@ -7,7 +7,6 @@
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
79
demo/src/sass/lib/decimal.scss
Normal file
79
demo/src/sass/lib/decimal.scss
Normal file
@ -0,0 +1,79 @@
|
||||
// _decimal.scss | MIT License | gist.github.com/terkel/4373420
|
||||
|
||||
// Round a number to specified digits.
|
||||
//
|
||||
// @param {Number} $number A number to round
|
||||
// @param {Number} [$digits:0] Digits to output
|
||||
// @param {String} [$mode:round] (round|ceil|floor) How to round a number
|
||||
// @return {Number} A rounded number
|
||||
// @example
|
||||
// decimal-round(0.333) => 0
|
||||
// decimal-round(0.333, 1) => 0.3
|
||||
// decimal-round(0.333, 2) => 0.33
|
||||
// decimal-round(0.666) => 1
|
||||
// decimal-round(0.666, 1) => 0.7
|
||||
// decimal-round(0.666, 2) => 0.67
|
||||
//
|
||||
@function decimal-round ($number, $digits: 0, $mode: round) {
|
||||
$n: 1;
|
||||
// $number must be a number
|
||||
@if type-of($number) != number {
|
||||
@warn '#{ $number } is not a number.';
|
||||
@return $number;
|
||||
}
|
||||
// $digits must be a unitless number
|
||||
@if type-of($digits) != number {
|
||||
@warn '#{ $digits } is not a number.';
|
||||
@return $number;
|
||||
} @else if not unitless($digits) {
|
||||
@warn '#{ $digits } has a unit.';
|
||||
@return $number;
|
||||
}
|
||||
@for $i from 1 through $digits {
|
||||
$n: $n * 10;
|
||||
}
|
||||
@if $mode == round {
|
||||
@return round($number * $n) / $n;
|
||||
} @else if $mode == ceil {
|
||||
@return ceil($number * $n) / $n;
|
||||
} @else if $mode == floor {
|
||||
@return floor($number * $n) / $n;
|
||||
} @else {
|
||||
@warn '#{ $mode } is undefined keyword.';
|
||||
@return $number;
|
||||
}
|
||||
}
|
||||
|
||||
// Ceil a number to specified digits.
|
||||
//
|
||||
// @param {Number} $number A number to round
|
||||
// @param {Number} [$digits:0] Digits to output
|
||||
// @return {Number} A ceiled number
|
||||
// @example
|
||||
// decimal-ceil(0.333) => 1
|
||||
// decimal-ceil(0.333, 1) => 0.4
|
||||
// decimal-ceil(0.333, 2) => 0.34
|
||||
// decimal-ceil(0.666) => 1
|
||||
// decimal-ceil(0.666, 1) => 0.7
|
||||
// decimal-ceil(0.666, 2) => 0.67
|
||||
//
|
||||
@function decimal-ceil ($number, $digits: 0) {
|
||||
@return decimal-round($number, $digits, ceil);
|
||||
}
|
||||
|
||||
// Floor a number to specified digits.
|
||||
//
|
||||
// @param {Number} $number A number to round
|
||||
// @param {Number} [$digits:0] Digits to output
|
||||
// @return {Number} A floored number
|
||||
// @example
|
||||
// decimal-floor(0.333) => 0
|
||||
// decimal-floor(0.333, 1) => 0.3
|
||||
// decimal-floor(0.333, 2) => 0.33
|
||||
// decimal-floor(0.666) => 0
|
||||
// decimal-floor(0.666, 1) => 0.6
|
||||
// decimal-floor(0.666, 2) => 0.66
|
||||
//
|
||||
@function decimal-floor ($number, $digits: 0) {
|
||||
@return decimal-round($number, $digits, floor);
|
||||
}
|
||||
@ -3,43 +3,43 @@
|
||||
// ==========================================================================
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gordita';
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
|
||||
font-weight: @font-weight-light;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-family: 'Gordita';
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-light;
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-light.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-light.woff') format('woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Gordita';
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-regular;
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-regular.woff2') format('woff2'),
|
||||
url('https://cdn.plyr.io/static/fonts/gordita-regular.woff') format('woff');
|
||||
font-weight: @font-weight-regular;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Gordita';
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-medium;
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-medium.woff2') format('woff2'),
|
||||
url('https://cdn.plyr.io/static/fonts/gordita-medium.woff') format('woff');
|
||||
font-weight: @font-weight-medium;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-display: swap;
|
||||
font-family: 'Gordita';
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-bold;
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-bold.woff') format('woff');
|
||||
font-weight: @font-weight-bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Gordita';
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
|
||||
font-weight: @font-weight-black;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-family: 'Gordita';
|
||||
font-style: normal;
|
||||
font-weight: $font-weight-black;
|
||||
src: url('https://cdn.plyr.io/static/fonts/gordita-black.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/gordita-black.woff') format('woff');
|
||||
}
|
||||
@ -4,47 +4,48 @@
|
||||
|
||||
// Convert a <button> into an <a>
|
||||
// ---------------------------------------
|
||||
.cancel-button-styles() {
|
||||
position: relative;
|
||||
@mixin cancel-button-styles() {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
line-height: $line-height-base;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
vertical-align: baseline;
|
||||
position: relative;
|
||||
text-align: inherit;
|
||||
font: inherit;
|
||||
line-height: @line-height-base;
|
||||
cursor: pointer;
|
||||
-moz-user-select: text;
|
||||
text-shadow: inherit;
|
||||
border-radius: 0;
|
||||
-moz-user-select: text; // stylelint-disable-line
|
||||
vertical-align: baseline;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Nicer focus styles
|
||||
// ---------------------------------------
|
||||
.tab-focus(@color: @tab-focus-default-color) {
|
||||
@mixin tab-focus($color: $tab-focus-default-color) {
|
||||
box-shadow: 0 0 0 3px rgba($color, 0.35);
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 3px fade(@color, 35%);
|
||||
}
|
||||
|
||||
// Use rems for font sizing
|
||||
// Leave <body> at 100%/16px
|
||||
// ---------------------------------------
|
||||
.font-size(@font-size: 16) {
|
||||
@rem: round((@font-size / 16), 3);
|
||||
@mixin font-size($font-size: 16) {
|
||||
$rem: decimal-round(($font-size / 16), 3);
|
||||
|
||||
font-size: (@font-size * 1px);
|
||||
font-size: ~'@{rem}rem';
|
||||
font-size: ($font-size * 1px);
|
||||
font-size: '#{$rem}rem';
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
// ---------------------------------------
|
||||
.font-smoothing(@mode: on) when (@mode = on) {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.font-smoothing(@mode: on) when (@mode = off) {
|
||||
-moz-osx-font-smoothing: auto;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
@mixin font-smoothing($enabled: true) {
|
||||
@if $enabled {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
} @else {
|
||||
-moz-osx-font-smoothing: auto;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
}
|
||||
6
demo/src/sass/settings/breakpoints.scss
Normal file
6
demo/src/sass/settings/breakpoints.scss
Normal file
@ -0,0 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Breakpoints
|
||||
// ==========================================================================
|
||||
|
||||
$screen-sm: 480px;
|
||||
$screen-md: 768px;
|
||||
27
demo/src/sass/settings/colors.scss
Normal file
27
demo/src/sass/settings/colors.scss
Normal file
@ -0,0 +1,27 @@
|
||||
// ==========================================================================
|
||||
// Colors
|
||||
// ==========================================================================
|
||||
|
||||
// Greyscale
|
||||
$gray-dark: #343f4a;
|
||||
$gray: #55646b;
|
||||
$gray-light: #cbd0d3;
|
||||
$gray-lighter: #dbe3e8;
|
||||
$off-white: #f2f5f7;
|
||||
|
||||
// Text
|
||||
$color-text: #fff;
|
||||
|
||||
// Plyr
|
||||
$color-brand-primary: #1aafff;
|
||||
|
||||
// Brands
|
||||
$color-twitter: #4baaf4;
|
||||
$color-youtube: #cc181e;
|
||||
$color-vimeo: #19b7ed;
|
||||
|
||||
// Elements
|
||||
$color-link: #fff;
|
||||
|
||||
// Focus
|
||||
$tab-focus-default-color: #fff;
|
||||
@ -3,10 +3,10 @@
|
||||
// ==========================================================================
|
||||
|
||||
// Button count arrow size
|
||||
@arrow-size: 5px;
|
||||
$arrow-size: 5px;
|
||||
|
||||
// Radii
|
||||
@border-radius-base: 4px;
|
||||
$border-radius-base: 4px;
|
||||
|
||||
// Background
|
||||
@page-background: linear-gradient(to left top, lighten(@color-brand-primary, 10%), darken(@color-brand-primary, 20%));
|
||||
$page-background: linear-gradient(to left top, lighten($color-brand-primary, 10%), darken($color-brand-primary, 20%));
|
||||
@ -2,4 +2,4 @@
|
||||
// Icons
|
||||
// ==========================================================================
|
||||
|
||||
@icon-size: 16px;
|
||||
$icon-size: 16px;
|
||||
@ -2,4 +2,4 @@
|
||||
// Layout
|
||||
// ==========================================================================
|
||||
|
||||
@container-max-width: 1280px;
|
||||
$container-max-width: 1280px;
|
||||
18
demo/src/sass/settings/plyr.scss
Normal file
18
demo/src/sass/settings/plyr.scss
Normal file
@ -0,0 +1,18 @@
|
||||
// ==========================================================================
|
||||
// Plyr Settings
|
||||
// ==========================================================================
|
||||
|
||||
// Font
|
||||
$plyr-font-family: inherit;
|
||||
|
||||
// Sizes
|
||||
$plyr-font-size-base: 13px;
|
||||
$plyr-font-size-small: 12px;
|
||||
$plyr-font-size-time: 11px;
|
||||
$plyr-font-size-badges: 9px;
|
||||
|
||||
// Captions
|
||||
$plyr-font-size-captions-base: $plyr-font-size-base;
|
||||
$plyr-font-size-captions-small: $plyr-font-size-small;
|
||||
$plyr-font-size-captions-medium: 18px;
|
||||
$plyr-font-size-captions-large: 21px;
|
||||
@ -2,4 +2,4 @@
|
||||
// Colors
|
||||
// ==========================================================================
|
||||
|
||||
@spacing-base: 20px;
|
||||
$spacing-base: 20px;
|
||||
20
demo/src/sass/settings/type.scss
Normal file
20
demo/src/sass/settings/type.scss
Normal file
@ -0,0 +1,20 @@
|
||||
// ==========================================================================
|
||||
// Typography
|
||||
// ==========================================================================
|
||||
|
||||
$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
|
||||
|
||||
$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;
|
||||
@ -8,13 +8,13 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: @font-sans-serif;
|
||||
line-height: @line-height-base;
|
||||
color: @color-text;
|
||||
font-weight: @font-weight-medium;
|
||||
text-shadow: 0 1px 1px fade(#000, 15%);
|
||||
.font-smoothing();
|
||||
.font-size(@font-size-base);
|
||||
@include font-smoothing();
|
||||
@include font-size($font-size-base);
|
||||
color: $color-text;
|
||||
font-family: $font-sans-serif;
|
||||
font-weight: $font-weight-medium;
|
||||
line-height: $line-height-base;
|
||||
text-shadow: 0 1px 1px rgba(#000, 0.15);
|
||||
}
|
||||
|
||||
button,
|
||||
@ -26,10 +26,10 @@ textarea {
|
||||
|
||||
p,
|
||||
small {
|
||||
margin: 0 0 @spacing-base;
|
||||
margin: 0 0 $spacing-base;
|
||||
}
|
||||
|
||||
small {
|
||||
@include font-size($font-size-small);
|
||||
display: block;
|
||||
.font-size(@font-size-small);
|
||||
}
|
||||
@ -3,8 +3,8 @@
|
||||
// ==========================================================================
|
||||
|
||||
h1 {
|
||||
margin: 0 0 (@spacing-base / 2);
|
||||
font-weight: @font-weight-bold;
|
||||
letter-spacing: @letter-spacing-headings;
|
||||
.font-size(@font-size-h1);
|
||||
@include font-size($font-size-h1);
|
||||
font-weight: $font-weight-bold;
|
||||
letter-spacing: $letter-spacing-headings;
|
||||
margin: 0 0 ($spacing-base / 2);
|
||||
}
|
||||
@ -3,9 +3,9 @@
|
||||
// ==========================================================================
|
||||
|
||||
.color--vimeo {
|
||||
color: @color-vimeo;
|
||||
color: $color-vimeo;
|
||||
}
|
||||
|
||||
.color--youtube {
|
||||
color: @color-youtube;
|
||||
color: $color-youtube;
|
||||
}
|
||||
Reference in New Issue
Block a user