diff options
Diffstat (limited to 'demo/src')
45 files changed, 1367 insertions, 1347 deletions
diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js new file mode 100644 index 00000000..5808cc7e --- /dev/null +++ b/demo/src/js/demo.js @@ -0,0 +1,246 @@ +// ========================================================================== +// Plyr.io demo +// This code is purely for the https://plyr.io website +// Please see readme.md in the root or github.com/sampotts/plyr +// ========================================================================== + +document.addEventListener('DOMContentLoaded', () => { + if (window.shr) { + window.shr.setup({ + count: { + classname: 'button__count', + }, + }); + } + + // Setup tab focus + const tabClassName = 'tab-focus'; + + // Remove class on blur + document.addEventListener('focusout', event => { + event.target.classList.remove(tabClassName); + }); + + // Add classname to tabbed elements + document.addEventListener('keydown', event => { + if (event.keyCode !== 9) { + return; + } + + // Delay the adding of classname until the focus has changed + // This event fires before the focusin event + setTimeout(() => { + document.activeElement.classList.add(tabClassName); + }, 0); + }); + + // Setup the player + const player = new Plyr('#player', { + debug: true, + title: 'View From A Blue Moon', + iconUrl: '../dist/plyr.svg', + keyboard: { + global: true, + }, + tooltips: { + controls: true, + }, + captions: { + active: true, + }, + keys: { + google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c', + }, + ads: { + enabled: true, + publisherId: '918848828995742', + }, + }); + + // Expose for tinkering in the console + window.player = player; + + // Setup type toggle + const buttons = document.querySelectorAll('[data-source]'); + const types = { + video: 'video', + audio: 'audio', + youtube: 'youtube', + vimeo: 'vimeo', + }; + let currentType = window.location.hash.replace('#', ''); + const historySupport = window.history && window.history.pushState; + + // Toggle class on an element + function toggleClass(element, className, state) { + if (element) { + element.classList[state ? 'add' : 'remove'](className); + } + } + + // Set a new source + function newSource(type, init) { + // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video + if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) { + return; + } + + switch (type) { + case types.video: + player.source = { + type: 'video', + title: 'View From A Blue Moon', + sources: [{ + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4', + type: 'video/mp4', + }], + poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg', + tracks: [ + { + kind: 'captions', + label: 'English', + srclang: 'en', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt', + default: true, + }, + { + kind: 'captions', + label: 'French', + srclang: 'fr', + src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt', + }, + ], + }; + + break; + + case types.audio: + player.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 types.youtube: + player.source = { + type: 'video', + title: 'View From A Blue Moon', + sources: [{ + src: 'https://youtube.com/watch?v=bTqVqk7FSmY', + provider: 'youtube', + }], + }; + + break; + + case types.vimeo: + player.source = { + type: 'video', + sources: [{ + src: 'https://vimeo.com/76979871', + provider: 'vimeo', + }], + }; + + break; + + default: + break; + } + + // Set the current type for next time + currentType = type; + + // Remove active classes + Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false)); + + // Set active on parent + toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true); + + // Show cite + Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => { + cite.setAttribute('hidden', ''); + }); + document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden'); + } + + // Bind to each button + Array.from(buttons).forEach(button => { + button.addEventListener('click', () => { + const type = button.getAttribute('data-source'); + + newSource(type); + + if (historySupport) { + window.history.pushState({ type }, '', `#${type}`); + } + }); + }); + + // List for backwards/forwards + window.addEventListener('popstate', event => { + if (event.state && 'type' in event.state) { + newSource(event.state.type); + } + }); + + // On load + if (historySupport) { + const video = !currentType.length; + + // If there's no current type set, assume video + if (video) { + currentType = types.video; + } + + // Replace current history state + if (currentType in types) { + window.history.replaceState( + { + type: currentType, + }, + '', + video ? '' : `#${currentType}`, + ); + } + + // If it's not video, load the source + if (currentType !== types.video) { + newSource(currentType, true); + } + } +}); + +// Google analytics +// For demo site (https://plyr.io) only +/* eslint-disable */ +if (window.location.host === 'plyr.io') { + (function(i, s, o, g, r, a, m) { + i.GoogleAnalyticsObject = r; + i[r] = + i[r] || + function() { + (i[r].q = i[r].q || []).push(arguments); + }; + i[r].l = 1 * new Date(); + a = s.createElement(o); + m = s.getElementsByTagName(o)[0]; + a.async = 1; + a.src = g; + m.parentNode.insertBefore(a, m); + })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); + window.ga('create', 'UA-40881672-11', 'auto'); + window.ga('send', 'pageview'); +} +/* eslint-enable */ diff --git a/demo/src/js/lib/classlist.js b/demo/src/js/lib/classlist.js deleted file mode 100644 index eac1e99e..00000000 --- a/demo/src/js/lib/classlist.js +++ /dev/null @@ -1,237 +0,0 @@ -/* - * classList.js: Cross-browser full element.classList implementation. - * 1.1.20150312 - * - * By Eli Grey, http://eligrey.com - * License: Dedicated to the public domain. - * See https://github.com/eligrey/classList.js/blob/master/LICENSE.md - */ - -/*global self, document, DOMException */ - -/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */ - -if ("document" in self) { - -// Full polyfill for browsers with no classList support -if (!("classList" in document.createElement("_"))) { - -(function (view) { - -"use strict"; - -if (!('Element' in view)) return; - -var - classListProp = "classList" - , protoProp = "prototype" - , elemCtrProto = view.Element[protoProp] - , objCtr = Object - , strTrim = String[protoProp].trim || function () { - return this.replace(/^\s+|\s+$/g, ""); - } - , arrIndexOf = Array[protoProp].indexOf || function (item) { - var - i = 0 - , len = this.length - ; - for (; i < len; i++) { - if (i in this && this[i] === item) { - return i; - } - } - return -1; - } - // Vendors: please allow content code to instantiate DOMExceptions - , DOMEx = function (type, message) { - this.name = type; - this.code = DOMException[type]; - this.message = message; - } - , checkTokenAndGetIndex = function (classList, token) { - if (token === "") { - throw new DOMEx( - "SYNTAX_ERR" - , "An invalid or illegal string was specified" - ); - } - if (/\s/.test(token)) { - throw new DOMEx( - "INVALID_CHARACTER_ERR" - , "String contains an invalid character" - ); - } - return arrIndexOf.call(classList, token); - } - , ClassList = function (elem) { - var - trimmedClasses = strTrim.call(elem.getAttribute("class") || "") - , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [] - , i = 0 - , len = classes.length - ; - for (; i < len; i++) { - this.push(classes[i]); - } - this._updateClassName = function () { - elem.setAttribute("class", this.toString()); - }; - } - , classListProto = ClassList[protoProp] = [] - , classListGetter = function () { - return new ClassList(this); - } -; -// Most DOMException implementations don't allow calling DOMException's toString() -// on non-DOMExceptions. Error's toString() is sufficient here. -DOMEx[protoProp] = Error[protoProp]; -classListProto.item = function (i) { - return this[i] || null; -}; -classListProto.contains = function (token) { - token += ""; - return checkTokenAndGetIndex(this, token) !== -1; -}; -classListProto.add = function () { - var - tokens = arguments - , i = 0 - , l = tokens.length - , token - , updated = false - ; - do { - token = tokens[i] + ""; - if (checkTokenAndGetIndex(this, token) === -1) { - this.push(token); - updated = true; - } - } - while (++i < l); - - if (updated) { - this._updateClassName(); - } -}; -classListProto.remove = function () { - var - tokens = arguments - , i = 0 - , l = tokens.length - , token - , updated = false - , index - ; - do { - token = tokens[i] + ""; - index = checkTokenAndGetIndex(this, token); - while (index !== -1) { - this.splice(index, 1); - updated = true; - index = checkTokenAndGetIndex(this, token); - } - } - while (++i < l); - - if (updated) { - this._updateClassName(); - } -}; -classListProto.toggle = function (token, force) { - token += ""; - - var - result = this.contains(token) - , method = result ? - force !== true && "remove" - : - force !== false && "add" - ; - - if (method) { - this[method](token); - } - - if (force === true || force === false) { - return force; - } else { - return !result; - } -}; -classListProto.toString = function () { - return this.join(" "); -}; - -if (objCtr.defineProperty) { - var classListPropDesc = { - get: classListGetter - , enumerable: true - , configurable: true - }; - try { - objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); - } catch (ex) { // IE 8 doesn't support enumerable:true - if (ex.number === -0x7FF5EC54) { - classListPropDesc.enumerable = false; - objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); - } - } -} else if (objCtr[protoProp].__defineGetter__) { - elemCtrProto.__defineGetter__(classListProp, classListGetter); -} - -}(self)); - -} else { -// There is full or partial native classList support, so just check if we need -// to normalize the add/remove and toggle APIs. - -(function () { - "use strict"; - - var testElement = document.createElement("_"); - - testElement.classList.add("c1", "c2"); - - // Polyfill for IE 10/11 and Firefox <26, where classList.add and - // classList.remove exist but support only one argument at a time. - if (!testElement.classList.contains("c2")) { - var createMethod = function(method) { - var original = DOMTokenList.prototype[method]; - - DOMTokenList.prototype[method] = function(token) { - var i, len = arguments.length; - - for (i = 0; i < len; i++) { - token = arguments[i]; - original.call(this, token); - } - }; - }; - createMethod('add'); - createMethod('remove'); - } - - testElement.classList.toggle("c3", false); - - // Polyfill for IE 10 and Firefox <24, where classList.toggle does not - // support the second argument. - if (testElement.classList.contains("c3")) { - var _toggle = DOMTokenList.prototype.toggle; - - DOMTokenList.prototype.toggle = function(token, force) { - if (1 in arguments && !this.contains(token) === !force) { - return force; - } else { - return _toggle.call(this, token); - } - }; - - } - - testElement = null; -}()); - -} - -}
\ No newline at end of file diff --git a/demo/src/js/main.js b/demo/src/js/main.js deleted file mode 100644 index 7d732dcd..00000000 --- a/demo/src/js/main.js +++ /dev/null @@ -1,203 +0,0 @@ -// ========================================================================== -// Plyr.io demo -// This code is purely for the plyr.io website -// Please see readme.md in the root or github.com/selz/plyr -// ========================================================================== - -/*global plyr*/ - -// General functions -(function() { - //document.body.addEventListener('ready', function(event) { console.log(event); }); - - // Setup the player - var instances = plyr.setup({ - debug: true, - title: "Video demo", - iconUrl: "../dist/plyr.svg", - tooltips: { - controls: true - }, - captions: { - defaultActive: true - } - }); - plyr.loadSprite("dist/demo.svg"); - - // Plyr returns an array regardless - var player = instances[0]; - - // Setup type toggle - var buttons = document.querySelectorAll("[data-source]"), - types = { - video: "video", - audio: "audio", - youtube: "youtube", - vimeo: "vimeo" - }, - currentType = window.location.hash.replace("#", ""), - historySupport = window.history && window.history.pushState; - - // Bind to each button - for (var i = buttons.length - 1; i >= 0; i--) { - buttons[i].addEventListener("click", function() { - var type = this.getAttribute("data-source"); - - newSource(type); - - if (historySupport) { - history.pushState({ type: type }, "", "#" + type); - } - }); - } - - // List for backwards/forwards - window.addEventListener("popstate", function(event) { - if (event.state && "type" in event.state) { - newSource(event.state.type); - } - }); - - // On load - if (historySupport) { - var video = !currentType.length; - - // If there's no current type set, assume video - if (video) { - currentType = types.video; - } - - // Replace current history state - if (currentType in types) { - history.replaceState({ type: currentType }, "", video ? "" : "#" + currentType); - } - - // If it's not video, load the source - if (currentType !== types.video) { - newSource(currentType, true); - } - } - - // Toggle class on an element - function toggleClass(element, className, state) { - if (element) { - if (element.classList) { - element.classList[state ? "add" : "remove"](className); - } else { - var name = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + className + " ", ""); - element.className = name + (state ? " " + className : ""); - } - } - } - - // Set a new source - function newSource(type, init) { - // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video - if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) { - return; - } - - switch (type) { - case types.video: - player.source({ - type: "video", - title: "View From A Blue Moon", - sources: [ - { - src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4", - type: "video/mp4" - }, - { - src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm", - type: "video/webm" - } - ], - poster: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg", - tracks: [ - { - kind: "captions", - label: "English", - srclang: "en", - src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt", - default: true - } - ] - }); - break; - - case types.audio: - player.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 types.youtube: - player.source({ - type: "video", - title: "View From A Blue Moon", - sources: [ - { - src: "bTqVqk7FSmY", - type: "youtube" - } - ] - }); - break; - - case types.vimeo: - player.source({ - type: "video", - title: "View From A Blue Moon", - sources: [ - { - src: "147865858", - type: "vimeo" - } - ] - }); - break; - } - - // Set the current type for next time - currentType = type; - - // Remove active classes - for (var x = buttons.length - 1; x >= 0; x--) { - toggleClass(buttons[x].parentElement, "active", false); - } - - // Set active on parent - toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, "active", true); - } -})(); - -// Google analytics -// For demo site (http://[www.]plyr.io) only -if (document.domain.indexOf("plyr.io") > -1) { - (function(i, s, o, g, r, a, m) { - i.GoogleAnalyticsObject = r; - (i[r] = - i[r] || - function() { - (i[r].q = i[r].q || []).push(arguments); - }), - (i[r].l = 1 * new Date()); - (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]); - a.async = 1; - a.src = g; - m.parentNode.insertBefore(a, m); - })(window, document, "script", "//www.google-analytics.com/analytics.js", "ga"); - ga("create", "UA-40881672-11", "auto"); - ga("send", "pageview"); -} diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less deleted file mode 100644 index 502196cf..00000000 --- a/demo/src/less/components/base.less +++ /dev/null @@ -1,48 +0,0 @@ -// ========================================================================== -// Base layout -// ========================================================================== - -// BORDER-BOX ALL THE THINGS! -// http://paulirish.com/2012/box-sizing-border-box-ftw/ -*, *::after, *::before { - box-sizing: border-box; -} - -// Hidden -[hidden] { - display: none; -} - -// Base -html { - height: 100%; - background: @body-background fixed; -} -body { - margin: 0; - padding: (@padding-base / 2); -} - -// Header -header { - padding: @padding-base; - margin-bottom: @padding-base; - - p { - .font-size(18); - } - @media (min-width: @screen-sm) { - padding-top: (@padding-base * 3); - padding-bottom: (@padding-base * 3); - } -} - -// Sections -section { - max-width: @example-width-video; - margin: 0 auto @padding-base; - - @media (min-width: @screen-sm) { - margin-bottom: (@padding-base * 2); - } -}
\ No newline at end of file diff --git a/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less deleted file mode 100644 index c99a0836..00000000 --- a/demo/src/less/components/buttons.less +++ /dev/null @@ -1,172 +0,0 @@ -// ========================================================================== -// Buttons -// ========================================================================== - -nav { - ul { - list-style: none; - margin: 0; - padding: 0; - font-size: 0; - } - li { - display: inline-block; - margin-top: (@padding-base / 2); - .font-size(); - white-space: nowrap; - } - li + li { - margin-left: @padding-base; - } -} - -// Tabs -.btn__bar { - position: relative; - margin: 0 auto @padding-base; - max-width: @example-width-video; - white-space: nowrap; - - &::before { - content: ""; - position: absolute; - top: 50%; - left: 0; - right: 0; - height: 1px; - background: @gray-lighter; - } - - ul { - position: relative; - z-index: 1; - display: inline-block; - user-select: none; - } - li { - margin: 0; - - &:first-child .btn { - border-radius: 4px 0 0 4px; - } - &:last-child .btn { - border-radius: 0 4px 4px 0; - } - & + li .btn { - margin-left: -1px; - } - - &.active .btn { - &:extend(.btn--primary); - box-shadow: inset 0 1px 1px rgba(0,0,0, .2); - position: relative; - z-index: 1; - - .icon { - color: inherit; - } - } - &.active + li .btn:hover { - z-index: 0; - } - } - .btn { - position: relative; - display: block; - border-radius: 0; - - &:hover, - &:focus { - z-index: 1; - } - } - - @media (min-width: 560px) { - margin-bottom: (@padding-base * 2); - } -} - -// Shared -.btn, -.btn__count { - display: inline-block; - vertical-align: middle; - border-radius: @border-radius-base; - user-select: none; - font-weight: @font-weight-bold; -} - -// Buttons -.btn { - padding: (@padding-base / 2) ((@padding-base / 2) + 2); - background: linear-gradient(lighten(@off-white, 2%), darken(@off-white, 3%)); - border: 1px solid @gray-light; - box-shadow: 0 1px 1px rgba(0,0,0, .05); - text-shadow: 0 1px 1px #fff; - color: @gray; - transition: background .1s ease, color .1s ease; - .font-size(@font-size-small); - - &:hover, - &:focus { - border-color: darken(@gray-light, 8%); - color: @gray; - outline: 0; - } -} - -// Sizes -.btn--large { - padding: (@padding-base / 2) @padding-base; - .font-size(); -} - -// Styles -.btn--primary { - background-image: linear-gradient(@link-color, darken(@link-color, 5%)); - background-color: @link-color; - border-color: darken(@link-color, 10%); - box-shadow: 0 1px 1px rgba(0,0,0, .15); - text-shadow: 0 1px 1px rgba(0,0,0, .1); - color: #fff; - - &:hover, - &:focus { - color: #fff; - border-color: darken(@link-color, 20%); - } -} -.btn--youtube .icon { - color: @color-youtube; -} -.btn--vimeo .icon { - color: @color-vimeo; -} -.btn--twitter .icon { - color: @color-twitter; -} - -// Count bubble -.btn__count { - position: relative; - margin-left: (@padding-base / 2); - padding: (@padding-base / 2) (@padding-base * .75); - background: #fff; - border: 1px solid @gray-light; - - &::before { - content: ""; - position: absolute; - display: block; - width: @arrow-size; - height: @arrow-size; - left: 1px; - top: 50%; - margin-top: -(@arrow-size / 2); - - background: inherit; - border: inherit; - border-width: 1px 0 0 1px; - transform: rotate(-45deg) translate(-50%, -50%); - } -} diff --git a/demo/src/less/components/type.less b/demo/src/less/components/type.less deleted file mode 100644 index 951be36d..00000000 --- a/demo/src/less/components/type.less +++ /dev/null @@ -1,75 +0,0 @@ -// ========================================================================== -// Typography -// ========================================================================== - -// Base -html { - font-size: 100%; -} -body { - font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif; - line-height: 1.5; - text-align: center; - color: @gray; - font-weight: @font-weight-base; - .font-smoothing(); -} - -// Headings -h1, -h2 { - letter-spacing: -.025em; - color: @brand-primary; - margin: 0 0 (@padding-base / 2); - line-height: 1.2; - font-weight: @font-weight-bold; -} -h1 { - .font-size(@font-size-h1); -} - -// Paragraph and small -p, -small { - margin: 0 0 @padding-base; -} -small { - display: block; - padding: 0 (@padding-base / 2); - .font-size(@font-size-small); -} - -// Lists -ul, -li { - list-style: none; - margin: 0; - padding: 0; -} - -// Links -a { - text-decoration: none; - color: @link-color; - border-bottom: 1px dotted currentColor; - transition: background .3s ease, color .3s ease, border .3s ease; - - &:hover, - &:focus { - color: @gray-dark; - border-bottom-color: rgba(0,0,0,0); - } - &:focus { - .tab-focus(); - } - &.logo { - border: 0; - } -} - -.color--vimeo { - color: @color-vimeo; -} -.color--youtube { - color: @color-youtube; -} diff --git a/demo/src/less/demo.less b/demo/src/less/demo.less deleted file mode 100644 index ac15a3c0..00000000 --- a/demo/src/less/demo.less +++ /dev/null @@ -1,26 +0,0 @@ -// ========================================================================== -// Plyr.io Demo Page -// ========================================================================== - -// CSS Reset -@import "lib/normalize.less"; - -// Mixins -@import "lib/mixins.less"; - -// Variables -@import "variables.less"; - -// Animation -@import "lib/animation.less"; - -// Type -@import "lib/fontface.less"; -@import "components/type.less"; - -// Components -@import "components/base.less"; -@import "components/icons.less"; -@import "components/buttons.less"; -@import "components/error.less"; -@import "components/examples.less"; diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less deleted file mode 100644 index 82a2a160..00000000 --- a/demo/src/less/lib/fontface.less +++ /dev/null @@ -1,18 +0,0 @@ -// ========================================================================== -// Fonts -// ========================================================================== - -@font-face { - font-family: 'Avenir'; - src: url('https://cdn.plyr.io/static/fonts/avenir-medium.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/avenir-medium.woff') format('woff'); - font-style: normal; - font-weight: @font-weight-base; - font-display: swap; -} -@font-face { - font-family: 'Avenir'; - src: url('https://cdn.plyr.io/static/fonts/avenir-bold.woff2') format('woff2'), url('https://cdn.plyr.io/static/fonts/avenir-bold.woff') format('woff'); - font-style: normal; - font-weight: @font-weight-bold; - font-display: swap; -} diff --git a/demo/src/less/lib/mixins.less b/demo/src/less/lib/mixins.less deleted file mode 100644 index 923df1ea..00000000 --- a/demo/src/less/lib/mixins.less +++ /dev/null @@ -1,41 +0,0 @@ -// ========================================================================== -// Mixins -// ========================================================================== - -// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ -// --------------------------------------- -.clearfix() { - zoom: 1; - &:before, - &:after { content: ""; display: table; } - &:after { clear: both; } -} - -// Webkit-style focus -// --------------------------------------- -.tab-focus() { - // Default - outline: thin dotted @gray-dark; - // Webkit - outline-offset: 1px; -} - -// Use rems for font sizing -// Leave <body> at 100%/16px -// --------------------------------------- -.font-size(@font-size: 16){ - @rem: round((@font-size / 16), 3); - 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; -}
\ No newline at end of file diff --git a/demo/src/less/lib/normalize.less b/demo/src/less/lib/normalize.less deleted file mode 100644 index 562891ab..00000000 --- a/demo/src/less/lib/normalize.less +++ /dev/null @@ -1,406 +0,0 @@ -/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ - -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ - -/** - * Correct `block` display not defined in IE 8/9. - */ - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; -} - -/** - * Correct `inline-block` display not defined in IE 8/9. - */ - -audio, -canvas, -video { - display: inline-block; -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address `[hidden]` styling not present in IE 8/9. - * Hide the `template` element in IE, Safari, and Firefox < 22. - */ - -[hidden], -template { - display: none; -} - -/* ========================================================================== - Base - ========================================================================== */ - -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} - -/* ========================================================================== - Links - ========================================================================== */ - -/** - * Remove the gray background color from active links in IE 10. - */ - -a { - background: transparent; -} - -/** - * Address `outline` inconsistency between Chrome and other browsers. - */ - -a:focus { - outline: thin dotted; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ - -a:active, -a:hover { - outline: 0; -} - -/* ========================================================================== - Typography - ========================================================================== */ - -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari 5, and Chrome. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9, Safari 5, and Chrome. - */ - -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. - */ - -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari 5 and Chrome. - */ - -dfn { - font-style: italic; -} - -/** - * Address differences between Firefox and other browsers. - */ - -hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; -} - -/** - * Address styling not present in IE 8/9. - */ - -mark { - background: #ff0; - color: #000; -} - -/** - * Correct font family set oddly in Safari 5 and Chrome. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} - -/** - * Improve readability of pre-formatted text in all browsers. - */ - -pre { - white-space: pre-wrap; -} - -/** - * Set consistent quote types. - */ - -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* ========================================================================== - Embedded content - ========================================================================== */ - -/** - * Remove border when inside `a` element in IE 8/9. - */ - -img { - border: 0; -} - -/** - * Correct overflow displayed oddly in IE 9. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* ========================================================================== - Figures - ========================================================================== */ - -/** - * Address margin not present in IE 8/9 and Safari 5. - */ - -figure { - margin: 0; -} - -/* ========================================================================== - Forms - ========================================================================== */ - -/** - * Define consistent border, margin, and padding. - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ - -legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * 1. Correct font family not being inherited in all browsers. - * 2. Correct font size not being inherited in all browsers. - * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. - */ - -button, -input, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 2 */ - margin: 0; /* 3 */ -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ - -button, -input { - line-height: normal; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. - * Correct `select` style inheritance in Firefox 4+ and Opera. - */ - -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ - -button, -html input[type="button"], /* 1 */ -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ - -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * 1. Address box sizing set to `content-box` in IE 8/9/10. - * 2. Remove excess padding in IE 8/9/10. - */ - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome - * (include `-moz` to future-proof). - */ - -input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari 5 and Chrome - * on OS X. - */ - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * 1. Remove default vertical scrollbar in IE 8/9. - * 2. Improve readability and alignment in all browsers. - */ - -textarea { - overflow: auto; /* 1 */ - vertical-align: top; /* 2 */ -} - -/* ========================================================================== - Tables - ========================================================================== */ - -/** - * Remove most spacing between table cells. - */ - -table { - border-collapse: collapse; - border-spacing: 0; -}
\ No newline at end of file diff --git a/demo/src/less/variables.less b/demo/src/less/variables.less deleted file mode 100644 index 4768cdd6..00000000 --- a/demo/src/less/variables.less +++ /dev/null @@ -1,48 +0,0 @@ -// ========================================================================== -// Variables -// ========================================================================== - -// Colors -@gray-dark: #343f4a; -@gray: #55646b; -@gray-light: #cbd0d3; -@gray-lighter: #dbe3e8; -@off-white: #f2f5f7; - -@brand-primary: #3498db; -@brand-secondary: #02BD9B; - -// Brands -@color-twitter: #4BAAF4; -@color-youtube: #cc181e; -@color-vimeo: #19b7ed; - -// Base -@body-background: @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary); - -// Type -@font-size-base: 16; -@font-size-small: 14; -@font-size-h1: 64; -@font-weight-base: 500; -@font-weight-bold: 700; - -// Elements -@link-color: @brand-primary; -@padding-base: 20px; -@arrow-size: 8px; - -// Icons -@icon-size: 18px; - -// Breakpoints -@screen-sm: 480px; -@screen-md: 768px; - -// Radii -@border-radius-base: 4px; -@border-radius-large: 6px; - -// Examples -@example-width-audio: 520px; -@example-width-video: 1200px; diff --git a/demo/src/sass/bundles/demo.scss b/demo/src/sass/bundles/demo.scss new file mode 100644 index 00000000..2f89b858 --- /dev/null +++ b/demo/src/sass/bundles/demo.scss @@ -0,0 +1,46 @@ +// ========================================================================== +// Plyr.io Demo Page +// ========================================================================== +@charset 'UTF-8'; + +// Settings +@import '../settings/breakpoints'; +@import '../settings/colors'; +@import '../settings/cosmetic'; +@import '../settings/icons'; +@import '../settings/layout'; +@import '../settings/plyr'; +@import '../settings/spacing'; +@import '../settings/type'; + +// Libs +@import '../lib/fontface'; +@import '../lib/animation'; +@import '../lib/mixins'; +@import '../lib/normalize'; +@import '../lib/reset'; + +// Layout +@import '../layout/core'; +@import '../layout/grid'; + +// Type +@import '../type/base'; +@import '../type/headings'; + +// Components +@import '../components/buttons'; +@import '../components/header'; +@import '../components/icons'; +@import '../components/links'; +@import '../components/lists'; +@import '../components/media'; +@import '../components/navigation'; +@import '../components/players'; + +// Plyr +@import '../../../../src/sass/plyr'; + +// Utils +@import '../utilities/cosmetic'; +@import '../utilities/hidden'; diff --git a/demo/src/sass/bundles/error.scss b/demo/src/sass/bundles/error.scss new file mode 100644 index 00000000..29c98947 --- /dev/null +++ b/demo/src/sass/bundles/error.scss @@ -0,0 +1,29 @@ +// ========================================================================== +// Plyr.io Error Page +// ========================================================================== +@charset 'UTF-8'; + +// Libs +@import '../lib/fontface'; +@import '../lib/mixins'; +@import '../lib/normalize'; +@import '../lib/reset'; + +// Settings +@import '../settings/colors'; +@import '../settings/cosmetic'; +@import '../settings/icons'; +@import '../settings/layout'; +@import '../settings/spacing'; +@import '../settings/type'; + +// Layout +@import '../layout/error'; + +// Type +@import '../type/base'; +@import '../type/headings'; + +// Components +@import '../components/buttons'; +@import '../components/links'; diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss new file mode 100644 index 00000000..1b2d652e --- /dev/null +++ b/demo/src/sass/components/buttons.scss @@ -0,0 +1,83 @@ +// ========================================================================== +// Buttons +// ========================================================================== + +// Shared +.button, +.button__count { + align-items: center; + background: $color-button-background; + border: 0; + border-radius: $border-radius-base; + box-shadow: 0 1px 1px rgba(#000, 0.1); + color: $color-button-text; + display: inline-flex; + padding: ($spacing-base * 0.75); + position: relative; + text-shadow: none; + user-select: none; + vertical-align: middle; +} + +// Buttons +.button { + font-weight: $font-weight-bold; + padding-left: $spacing-base; + padding-right: $spacing-base; + transition: all 0.2s ease; + + &:hover, + &:focus { + color: $gray-dark; + + // Remove the underline/border + &::after { + display: none; + } + } + + &:hover { + box-shadow: 0 2px 2px rgba(#000, 0.1); + transform: translateY(-1px); + } + + &:focus { + outline: 0; + } + + &.tab-focus { + @include tab-focus(); + } + + &:active { + transform: translateY(1px); + } +} + +// Button group +.button--with-count { + display: inline-flex; + + .button .icon { + flex-shrink: 0; + } +} + +// Count bubble +.button__count { + animation: fadein 0.2s ease; + margin-left: ($spacing-base / 2); + + &::before { + border: $arrow-size solid transparent; + border-left-width: 0; + border-right-color: $color-button-background; + content: ''; + height: 0; + position: absolute; + right: 100%; + top: 50%; + transform: translateY(-50%); + width: 0; + } +} diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss new file mode 100644 index 00000000..eab2214e --- /dev/null +++ b/demo/src/sass/components/header.scss @@ -0,0 +1,19 @@ +// ========================================================================== +// Header +// ========================================================================== + +header { + padding-bottom: $spacing-base; + text-align: center; + + .call-to-action { + margin-top: ($spacing-base * 1.5); + } + + @media only screen and (min-width: $screen-md) { + margin-right: ($spacing-base * 3); + max-width: 360px; + padding-bottom: ($spacing-base * 2); + text-align: left; + } +} diff --git a/demo/src/less/components/icons.less b/demo/src/sass/components/icons.scss index 9530b601..b2b353a6 100644 --- a/demo/src/less/components/icons.less +++ b/demo/src/sass/components/icons.scss @@ -4,23 +4,20 @@ // Base size icon styles .icon { - fill: currentColor; - width: @icon-size; - height: @icon-size; - vertical-align: -3px; + fill: currentColor; + height: $icon-size; + vertical-align: -3px; + width: $icon-size; } // Within elements a svg, button svg, label svg { - pointer-events: none; + pointer-events: none; } + a .icon, .btn .icon { - margin-right: (@padding-base / 2); -} -.btn:not(.btn-large) .icon { - width: (@icon-size - 2); - height: (@icon-size - 2); + margin-right: floor($spacing-base / 3); } diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss new file mode 100644 index 00000000..b2930862 --- /dev/null +++ b/demo/src/sass/components/links.scss @@ -0,0 +1,49 @@ +// ========================================================================== +// Links +// ========================================================================== + +// Make a <button> look like an <a> +button.faux-link { + @extend a; // stylelint-disable-line + @include cancel-button-styles(); +} + +// Links +a { + border-bottom: 1px dotted currentColor; + color: $color-link; + font-weight: $font-weight-bold; + position: relative; + text-decoration: none; + transition: all 0.2s ease; + + &::after { + background: currentColor; + content: ''; + height: 1px; + left: 50%; + position: absolute; + top: 100%; + transform: translateX(-50%); + transition: width 0.2s ease; + width: 0; + } + + &:hover, + &:focus { + border-bottom-color: transparent; + outline: 0; + + &::after { + width: 100%; + } + } + + &.tab-focus { + @include tab-focus(); + } + + &.no-border::after { + display: none; + } +} diff --git a/demo/src/sass/components/lists.scss b/demo/src/sass/components/lists.scss new file mode 100644 index 00000000..bae3d11d --- /dev/null +++ b/demo/src/sass/components/lists.scss @@ -0,0 +1,11 @@ +// ========================================================================== +// Lists +// ========================================================================== + +// Lists +ul, +li { + list-style: none; + margin: 0; + padding: 0; +} diff --git a/demo/src/sass/components/media.scss b/demo/src/sass/components/media.scss new file mode 100644 index 00000000..c6744bcc --- /dev/null +++ b/demo/src/sass/components/media.scss @@ -0,0 +1,10 @@ +// ========================================================================== +// Basic media +// ========================================================================== + +img, +video, +audio { + max-width: 100%; + vertical-align: middle; +} diff --git a/demo/src/sass/components/navigation.scss b/demo/src/sass/components/navigation.scss new file mode 100644 index 00000000..fe14c000 --- /dev/null +++ b/demo/src/sass/components/navigation.scss @@ -0,0 +1,9 @@ +// ========================================================================== +// Navigation +// ========================================================================== + +nav { + display: flex; + justify-content: center; + margin-bottom: $spacing-base; +} diff --git a/demo/src/less/components/examples.less b/demo/src/sass/components/players.scss index a9e72d21..90e2bc94 100644 --- a/demo/src/less/components/examples.less +++ b/demo/src/sass/components/players.scss @@ -10,31 +10,34 @@ video { // Example players .plyr { - margin: 0 auto; - border-radius: @border-radius-large; -} -.plyr--audio { - max-width: @example-width-audio; + border-radius: $border-radius-base; + box-shadow: 0 2px 5px rgba(#000, 0.2); + margin: $spacing-base auto; + + &.plyr--audio { + max-width: 480px; + } } + .plyr__video-wrapper::after { - content: ""; - pointer-events: none; - position: absolute; - top: 0; + border: 1px solid rgba(#000, 0.15); + border-radius: inherit; bottom: 0; + content: ''; left: 0; + pointer-events: none; + position: absolute; right: 0; - border: 1px solid fade(#000, 15%); - border-radius: inherit; + top: 0; } // Style full supported player .plyr__cite { display: none; - margin-top: @padding-base; + margin-top: $spacing-base; .icon { - margin-right: (@padding-base / 4); + margin-right: ceil($spacing-base / 6); } } diff --git a/demo/src/sass/layout/core.scss b/demo/src/sass/layout/core.scss new file mode 100644 index 00000000..0501c1df --- /dev/null +++ b/demo/src/sass/layout/core.scss @@ -0,0 +1,64 @@ +// ========================================================================== +// Core +// ========================================================================== + +html, +body { + display: flex; + width: 100%; +} + +html { + background: $page-background; + background-attachment: fixed; + height: 100%; +} + +body { + align-items: center; + display: flex; + flex-direction: column; + min-height: 100%; +} + +.grid { + flex: 1; + overflow: auto; +} + +main { + margin: auto; + padding-bottom: 1px; // Collapsing margins + text-align: center; +} + +aside { + align-items: center; + background: #fff; + color: $gray; + display: flex; + flex-shrink: 0; + justify-content: center; + padding: ($spacing-base * 0.75); + position: relative; + text-align: center; + text-shadow: none; + width: 100%; + + .icon { + fill: $color-twitter; + margin-right: ($spacing-base / 2); + } + + p { + margin: 0; + } + + a { + color: $color-twitter; + + &.tab-focus { + @include tab-focus($color-twitter); + } + } +} diff --git a/demo/src/less/components/error.less b/demo/src/sass/layout/error.scss index b1427173..385ecbf3 100644 --- a/demo/src/less/components/error.less +++ b/demo/src/sass/layout/error.scss @@ -7,13 +7,24 @@ html.error, .error body { height: 100%; } + +html.error { + background: $page-background; + background-attachment: fixed; +} + .error body { + align-items: center; + display: flex; width: 100%; - display: table; - table-layout: fixed; } + .error main { - display: table-cell; + padding: $spacing-base; + text-align: center; width: 100%; - vertical-align: middle; -}
\ No newline at end of file + + p { + @include font-size($font-size-large); + } +} diff --git a/demo/src/sass/layout/grid.scss b/demo/src/sass/layout/grid.scss new file mode 100644 index 00000000..40dd829e --- /dev/null +++ b/demo/src/sass/layout/grid.scss @@ -0,0 +1,19 @@ +// ========================================================================== +// Super basic grid +// ========================================================================== + +.grid { + margin: 0 auto; + padding: $spacing-base; + + @media only screen and (min-width: $screen-md) { + align-items: center; + display: flex; + max-width: $container-max-width; + width: 100%; + + > * { + flex: 1; + } + } +} diff --git a/demo/src/less/lib/animation.less b/demo/src/sass/lib/animation.scss index 386c6613..3c14b0a7 100644 --- a/demo/src/less/lib/animation.less +++ b/demo/src/sass/lib/animation.scss @@ -3,7 +3,11 @@ // ========================================================================== // Fade -@keyframes fade-in { - 0% { opacity: 0 } - 100% { opacity: 1 } -}
\ No newline at end of file +@keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} diff --git a/demo/src/sass/lib/fontface.scss b/demo/src/sass/lib/fontface.scss new file mode 100644 index 00000000..e7e4edf8 --- /dev/null +++ b/demo/src/sass/lib/fontface.scss @@ -0,0 +1,45 @@ +// ========================================================================== +// Fonts +// ========================================================================== + +@font-face { + 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-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-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-face { + 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'); +} diff --git a/demo/src/sass/lib/mixins.scss b/demo/src/sass/lib/mixins.scss new file mode 100644 index 00000000..cdfcb87d --- /dev/null +++ b/demo/src/sass/lib/mixins.scss @@ -0,0 +1,54 @@ +// ========================================================================== +// Mixins +// ========================================================================== + +// Convert a <button> into an <a> +// --------------------------------------- +@mixin cancel-button-styles() { + background: transparent; + border: 0; + border-radius: 0; + cursor: pointer; + font: inherit; + line-height: $line-height-base; + margin: 0; + padding: 0; + position: relative; + text-align: inherit; + text-shadow: inherit; + -moz-user-select: text; // stylelint-disable-line + vertical-align: baseline; + width: auto; +} + +// Nicer focus styles +// --------------------------------------- +@mixin tab-focus($color: $tab-focus-default-color) { + box-shadow: 0 0 0 3px rgba($color, 0.35); + outline: 0; +} + +// Use rems for font sizing +// Leave <body> at 100%/16px +// --------------------------------------- +@function calculate-rem($size) { + $rem: $size / 16; + @return #{$rem}rem; +} + +@mixin font-size($size: 16) { + font-size: $size * 1px; // Fallback in px + font-size: calculate-rem($size); +} + +// Font smoothing +// --------------------------------------- +@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; + } +} diff --git a/demo/src/sass/lib/normalize.scss b/demo/src/sass/lib/normalize.scss new file mode 100644 index 00000000..4f8542c1 --- /dev/null +++ b/demo/src/sass/lib/normalize.scss @@ -0,0 +1,450 @@ +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers (opinionated). + */ + +body { + margin: 0; +} + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { + /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { + /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { + /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type='button']:-moz-focusring, +[type='reset']:-moz-focusring, +[type='submit']:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type='checkbox'], +[type='radio'] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type='search'] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type='search']::-webkit-search-cancel-button, +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/demo/src/sass/lib/reset.scss b/demo/src/sass/lib/reset.scss new file mode 100644 index 00000000..50798b10 --- /dev/null +++ b/demo/src/sass/lib/reset.scss @@ -0,0 +1,11 @@ +// ========================================================================== +// Resets +// ========================================================================== + +// BORDER-BOX ALL THE THINGS! +// http://paulirish.com/2012/box-sizing-border-box-ftw/ +*, +*::after, +*::before { + box-sizing: border-box; +} diff --git a/demo/src/sass/settings/breakpoints.scss b/demo/src/sass/settings/breakpoints.scss new file mode 100644 index 00000000..65940ad6 --- /dev/null +++ b/demo/src/sass/settings/breakpoints.scss @@ -0,0 +1,6 @@ +// ========================================================================== +// Breakpoints +// ========================================================================== + +$screen-sm: 480px; +$screen-md: 768px; diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss new file mode 100644 index 00000000..65d3f7b7 --- /dev/null +++ b/demo/src/sass/settings/colors.scss @@ -0,0 +1,32 @@ +// ========================================================================== +// 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; +$color-background: $color-brand-primary; + +// Buttons +$color-button-background: #fff; +$color-button-text: $gray; + +// Focus +$tab-focus-default-color: #fff; diff --git a/demo/src/sass/settings/cosmetic.scss b/demo/src/sass/settings/cosmetic.scss new file mode 100644 index 00000000..d750efe2 --- /dev/null +++ b/demo/src/sass/settings/cosmetic.scss @@ -0,0 +1,12 @@ +// ========================================================================== +// Misc cosmetic +// ========================================================================== + +// Button count arrow size +$arrow-size: 5px; + +// Radii +$border-radius-base: 4px; + +// Background +$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%)); diff --git a/demo/src/sass/settings/icons.scss b/demo/src/sass/settings/icons.scss new file mode 100644 index 00000000..ad16a645 --- /dev/null +++ b/demo/src/sass/settings/icons.scss @@ -0,0 +1,5 @@ +// ========================================================================== +// Icons +// ========================================================================== + +$icon-size: 16px; diff --git a/demo/src/sass/settings/layout.scss b/demo/src/sass/settings/layout.scss new file mode 100644 index 00000000..8d1fbd28 --- /dev/null +++ b/demo/src/sass/settings/layout.scss @@ -0,0 +1,5 @@ +// ========================================================================== +// Layout +// ========================================================================== + +$container-max-width: 1280px; diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss new file mode 100644 index 00000000..3d30ce71 --- /dev/null +++ b/demo/src/sass/settings/plyr.scss @@ -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; diff --git a/demo/src/sass/settings/spacing.scss b/demo/src/sass/settings/spacing.scss new file mode 100644 index 00000000..a19b0a95 --- /dev/null +++ b/demo/src/sass/settings/spacing.scss @@ -0,0 +1,5 @@ +// ========================================================================== +// Colors +// ========================================================================== + +$spacing-base: 20px; diff --git a/demo/src/sass/settings/type.scss b/demo/src/sass/settings/type.scss new file mode 100644 index 00000000..e8f0b2c8 --- /dev/null +++ b/demo/src/sass/settings/type.scss @@ -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; diff --git a/demo/src/sass/type/base.scss b/demo/src/sass/type/base.scss new file mode 100644 index 00000000..452298bd --- /dev/null +++ b/demo/src/sass/type/base.scss @@ -0,0 +1,35 @@ +// ========================================================================== +// Base +// ========================================================================== + +// Set to 100% for rem sizing +html { + font-size: 100%; +} + +body { + @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, +input, +select, +textarea { + font: inherit; +} + +p, +small { + margin: 0 0 $spacing-base; +} + +small { + @include font-size($font-size-small); + display: block; +} diff --git a/demo/src/sass/type/headings.scss b/demo/src/sass/type/headings.scss new file mode 100644 index 00000000..c2abc97e --- /dev/null +++ b/demo/src/sass/type/headings.scss @@ -0,0 +1,10 @@ +// ========================================================================== +// Headings +// ========================================================================== + +h1 { + @include font-size($font-size-h1); + font-weight: $font-weight-bold; + letter-spacing: $letter-spacing-headings; + margin: 0 0 ($spacing-base / 2); +} diff --git a/demo/src/sass/utilities/cosmetic.scss b/demo/src/sass/utilities/cosmetic.scss new file mode 100644 index 00000000..91374d9d --- /dev/null +++ b/demo/src/sass/utilities/cosmetic.scss @@ -0,0 +1,7 @@ +// ========================================================================== +// Misc cosmetic +// ========================================================================== + +.no-border { + border: 0; +} diff --git a/demo/src/sass/utilities/hidden.scss b/demo/src/sass/utilities/hidden.scss new file mode 100644 index 00000000..665bfd76 --- /dev/null +++ b/demo/src/sass/utilities/hidden.scss @@ -0,0 +1,20 @@ +// ========================================================================== +// Hidden +// ========================================================================== + +[hidden] { + display: none; +} + +// Hide only visually, but have it available for screen readers: h5bp.com/v +.sr-only { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + opacity: 0.001; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} diff --git a/demo/src/sprite/icon-github.svg b/demo/src/sprite/icon-github.svg deleted file mode 100755 index 685dd746..00000000 --- a/demo/src/sprite/icon-github.svg +++ /dev/null @@ -1,12 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
- C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
- c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
- c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
- c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
- c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"/>
-</svg>
diff --git a/demo/src/sprite/icon-twitter.svg b/demo/src/sprite/icon-twitter.svg deleted file mode 100755 index b3f644b1..00000000 --- a/demo/src/sprite/icon-twitter.svg +++ /dev/null @@ -1,11 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
- <title>Twitter</title>
-<path d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1
- C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7
- c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3
- c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"/>
-</svg>
diff --git a/demo/src/sprite/icon-vimeo.svg b/demo/src/sprite/icon-vimeo.svg deleted file mode 100755 index 83dd3dc0..00000000 --- a/demo/src/sprite/icon-vimeo.svg +++ /dev/null @@ -1,9 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
-<path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
- C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
- c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"/>
-</svg>
diff --git a/demo/src/sprite/icon-youtube.svg b/demo/src/sprite/icon-youtube.svg deleted file mode 100755 index 8b5d6897..00000000 --- a/demo/src/sprite/icon-youtube.svg +++ /dev/null @@ -1,9 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
- width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
-<path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
- s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
- M6,11V5l5,3L6,11z"/>
-</svg>
|
