diff options
Diffstat (limited to 'demo/src/less')
| -rw-r--r-- | demo/src/less/components/base.less | 47 | ||||
| -rw-r--r-- | demo/src/less/components/buttons.less | 172 | ||||
| -rw-r--r-- | demo/src/less/components/error.less | 19 | ||||
| -rw-r--r-- | demo/src/less/components/examples.less | 51 | ||||
| -rw-r--r-- | demo/src/less/components/icons.less | 26 | ||||
| -rw-r--r-- | demo/src/less/components/type.less | 75 | ||||
| -rw-r--r-- | demo/src/less/demo.less | 26 | ||||
| -rw-r--r-- | demo/src/less/lib/animation.less | 9 | ||||
| -rw-r--r-- | demo/src/less/lib/fontface.less | 18 | ||||
| -rw-r--r-- | demo/src/less/lib/mixins.less | 41 | ||||
| -rw-r--r-- | demo/src/less/lib/normalize.less | 406 | ||||
| -rw-r--r-- | demo/src/less/variables.less | 48 |
12 files changed, 938 insertions, 0 deletions
diff --git a/demo/src/less/components/base.less b/demo/src/less/components/base.less new file mode 100644 index 00000000..c584b57e --- /dev/null +++ b/demo/src/less/components/base.less @@ -0,0 +1,47 @@ +// ========================================================================== +// 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/demo/src/less/components/buttons.less b/demo/src/less/components/buttons.less new file mode 100644 index 00000000..c99a0836 --- /dev/null +++ b/demo/src/less/components/buttons.less @@ -0,0 +1,172 @@ +// ========================================================================== +// 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/error.less b/demo/src/less/components/error.less new file mode 100644 index 00000000..b1427173 --- /dev/null +++ b/demo/src/less/components/error.less @@ -0,0 +1,19 @@ +// ========================================================================== +// 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/demo/src/less/components/examples.less b/demo/src/less/components/examples.less new file mode 100644 index 00000000..8649c023 --- /dev/null +++ b/demo/src/less/components/examples.less @@ -0,0 +1,51 @@ +// ========================================================================== +// 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-wrapper::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/demo/src/less/components/icons.less b/demo/src/less/components/icons.less new file mode 100644 index 00000000..9530b601 --- /dev/null +++ b/demo/src/less/components/icons.less @@ -0,0 +1,26 @@ +// ========================================================================== +// 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/demo/src/less/components/type.less b/demo/src/less/components/type.less new file mode 100644 index 00000000..951be36d --- /dev/null +++ b/demo/src/less/components/type.less @@ -0,0 +1,75 @@ +// ========================================================================== +// 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 new file mode 100644 index 00000000..ac15a3c0 --- /dev/null +++ b/demo/src/less/demo.less @@ -0,0 +1,26 @@ +// ========================================================================== +// 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/animation.less b/demo/src/less/lib/animation.less new file mode 100644 index 00000000..386c6613 --- /dev/null +++ b/demo/src/less/lib/animation.less @@ -0,0 +1,9 @@ +// ========================================================================== +// Animations +// ========================================================================== + +// Fade +@keyframes fade-in { + 0% { opacity: 0 } + 100% { opacity: 1 } +}
\ No newline at end of file diff --git a/demo/src/less/lib/fontface.less b/demo/src/less/lib/fontface.less new file mode 100644 index 00000000..a7da5ad9 --- /dev/null +++ b/demo/src/less/lib/fontface.less @@ -0,0 +1,18 @@ +// ========================================================================== +// 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/demo/src/less/lib/mixins.less b/demo/src/less/lib/mixins.less new file mode 100644 index 00000000..923df1ea --- /dev/null +++ b/demo/src/less/lib/mixins.less @@ -0,0 +1,41 @@ +// ========================================================================== +// 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 new file mode 100644 index 00000000..562891ab --- /dev/null +++ b/demo/src/less/lib/normalize.less @@ -0,0 +1,406 @@ +/*! 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 new file mode 100644 index 00000000..4768cdd6 --- /dev/null +++ b/demo/src/less/variables.less @@ -0,0 +1,48 @@ +// ========================================================================== +// 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; |