diff options
author | Sam Potts <me@sampotts.me> | 2016-08-20 17:46:05 +1000 |
---|---|---|
committer | Sam Potts <me@sampotts.me> | 2016-08-20 17:46:05 +1000 |
commit | fc45ab48c932c6ecb810ed6456ff824ef43be73c (patch) | |
tree | 557e7520a47f00c89410f124d418722627e0e86e /docs/src/less | |
parent | 6425a33ccd015a4e21545669c0774e2f12d1c47f (diff) | |
parent | 58e9b02405ccd3c3502bbf221097aa0604796769 (diff) | |
download | plyr-fc45ab48c932c6ecb810ed6456ff824ef43be73c.tar.lz plyr-fc45ab48c932c6ecb810ed6456ff824ef43be73c.tar.xz plyr-fc45ab48c932c6ecb810ed6456ff824ef43be73c.zip |
Merge branch 'master' into develop
# Conflicts:
# src/js/plyr.js
Diffstat (limited to 'docs/src/less')
-rw-r--r-- | docs/src/less/components/base.less | 47 | ||||
-rw-r--r-- | docs/src/less/components/buttons.less | 172 | ||||
-rw-r--r-- | docs/src/less/components/error.less | 19 | ||||
-rw-r--r-- | docs/src/less/components/examples.less | 51 | ||||
-rw-r--r-- | docs/src/less/components/icons.less | 26 | ||||
-rw-r--r-- | docs/src/less/components/type.less | 75 | ||||
-rw-r--r-- | docs/src/less/docs.less | 26 | ||||
-rw-r--r-- | docs/src/less/lib/animation.less | 9 | ||||
-rw-r--r-- | docs/src/less/lib/fontface.less | 18 | ||||
-rw-r--r-- | docs/src/less/lib/mixins.less | 41 | ||||
-rw-r--r-- | docs/src/less/lib/normalize.less | 406 | ||||
-rw-r--r-- | docs/src/less/variables.less | 48 |
12 files changed, 0 insertions, 938 deletions
diff --git a/docs/src/less/components/base.less b/docs/src/less/components/base.less deleted file mode 100644 index c584b57e..00000000 --- a/docs/src/less/components/base.less +++ /dev/null @@ -1,47 +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 { - padding-bottom: @padding-base; - - @media (min-width: @screen-sm) { - padding-bottom: (@padding-base * 2); - } -}
\ No newline at end of file diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less deleted file mode 100644 index c99a0836..00000000 --- a/docs/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/docs/src/less/components/error.less b/docs/src/less/components/error.less deleted file mode 100644 index b1427173..00000000 --- a/docs/src/less/components/error.less +++ /dev/null @@ -1,19 +0,0 @@ -// ========================================================================== -// Errors (AWS pages) -// ========================================================================== - -// Error page -html.error, -.error body { - height: 100%; -} -.error body { - width: 100%; - display: table; - table-layout: fixed; -} -.error main { - display: table-cell; - width: 100%; - vertical-align: middle; -}
\ No newline at end of file diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less deleted file mode 100644 index 24bf1e9c..00000000 --- a/docs/src/less/components/examples.less +++ /dev/null @@ -1,51 +0,0 @@ -// ========================================================================== -// Examples -// ========================================================================== - -section { - margin: 0 auto @padding-base; - max-width: @example-width-video; -} - -// For non supported browsers -video { - max-width: 100%; - vertical-align: middle; -} - -// Example players -.plyr { - margin: 0 auto; - border-radius: @border-radius-large; -} -.plyr--audio { - max-width: @example-width-audio; -} -.plyr--video::after { - content: ""; - pointer-events: none; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: 1px solid fade(#000, 15%); - border-radius: inherit; -} - -// Style full supported player -.plyr__cite { - display: none; - margin-top: @padding-base; - - .icon { - margin-right: (@padding-base / 4); - } -} - -.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video, -.plyr--audio ~ ul .plyr__cite--audio, -.plyr--youtube ~ ul .plyr__cite--youtube, -.plyr--vimeo ~ ul .plyr__cite--vimeo { - display: block; -} diff --git a/docs/src/less/components/icons.less b/docs/src/less/components/icons.less deleted file mode 100644 index 9530b601..00000000 --- a/docs/src/less/components/icons.less +++ /dev/null @@ -1,26 +0,0 @@ -// ========================================================================== -// Icons -// ========================================================================== - -// Base size icon styles -.icon { - fill: currentColor; - width: @icon-size; - height: @icon-size; - vertical-align: -3px; -} - -// Within elements -a svg, -button svg, -label svg { - 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); -} diff --git a/docs/src/less/components/type.less b/docs/src/less/components/type.less deleted file mode 100644 index 951be36d..00000000 --- a/docs/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/docs/src/less/docs.less b/docs/src/less/docs.less deleted file mode 100644 index e828d3b3..00000000 --- a/docs/src/less/docs.less +++ /dev/null @@ -1,26 +0,0 @@ -// ========================================================================== -// HTML5 Video Player 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/docs/src/less/lib/animation.less b/docs/src/less/lib/animation.less deleted file mode 100644 index 386c6613..00000000 --- a/docs/src/less/lib/animation.less +++ /dev/null @@ -1,9 +0,0 @@ -// ========================================================================== -// Animations -// ========================================================================== - -// Fade -@keyframes fade-in { - 0% { opacity: 0 } - 100% { opacity: 1 } -}
\ No newline at end of file diff --git a/docs/src/less/lib/fontface.less b/docs/src/less/lib/fontface.less deleted file mode 100644 index a7da5ad9..00000000 --- a/docs/src/less/lib/fontface.less +++ /dev/null @@ -1,18 +0,0 @@ -// ========================================================================== -// Fonts -// ========================================================================== - -@font-face { - font-family: "Avenir"; - src: url("//cdn.plyr.io/fonts/avenir-medium.woff2") format("woff2"), - url("//cdn.plyr.io/fonts/avenir-medium.woff") format("woff"); - font-style: normal; - font-weight: @font-weight-base; -} -@font-face { - font-family: "Avenir"; - src: url("//cdn.plyr.io/fonts/avenir-bold.woff2") format("woff2"), - url("//cdn.plyr.io/fonts/avenir-bold.woff") format("woff"); - font-style: normal; - font-weight: @font-weight-bold; -}
\ No newline at end of file diff --git a/docs/src/less/lib/mixins.less b/docs/src/less/lib/mixins.less deleted file mode 100644 index 923df1ea..00000000 --- a/docs/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/docs/src/less/lib/normalize.less b/docs/src/less/lib/normalize.less deleted file mode 100644 index 562891ab..00000000 --- a/docs/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/docs/src/less/variables.less b/docs/src/less/variables.less deleted file mode 100644 index 4768cdd6..00000000 --- a/docs/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; |