diff options
Diffstat (limited to 'demo/src/less/lib')
| -rw-r--r-- | demo/src/less/lib/animation.less | 12 | ||||
| -rw-r--r-- | demo/src/less/lib/fontface.less | 9 | ||||
| -rw-r--r-- | demo/src/less/lib/mixins.less | 38 | ||||
| -rw-r--r-- | demo/src/less/lib/reset.less | 11 |
4 files changed, 51 insertions, 19 deletions
diff --git a/demo/src/less/lib/animation.less b/demo/src/less/lib/animation.less index 386c6613..3c14b0a7 100644 --- a/demo/src/less/lib/animation.less +++ b/demo/src/less/lib/animation.less @@ -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/less/lib/fontface.less b/demo/src/less/lib/fontface.less index bd5f9feb..7fa06a63 100644 --- a/demo/src/less/lib/fontface.less +++ b/demo/src/less/lib/fontface.less @@ -19,3 +19,12 @@ font-weight: @font-weight-bold; font-display: swap; } + +@font-face { + font-family: "Avenir"; + src: url("https://cdn.plyr.io/static/fonts/avenir-black.woff2?v=3") format("woff2"), + url("https://cdn.plyr.io/static/fonts/avenir-black.woff?v=3") format("woff"); + font-style: normal; + font-weight: @font-weight-heavy; + font-display: swap; +} diff --git a/demo/src/less/lib/mixins.less b/demo/src/less/lib/mixins.less index 923df1ea..fbf36546 100644 --- a/demo/src/less/lib/mixins.less +++ b/demo/src/less/lib/mixins.less @@ -2,31 +2,39 @@ // Mixins // ========================================================================== -// Contain floats: nicolasgallagher.com/micro-clearfix-hack/ +// Convert a <button> into an <a> // --------------------------------------- -.clearfix() { - zoom: 1; - &:before, - &:after { content: ""; display: table; } - &:after { clear: both; } +.cancel-button-styles() { + position: relative; + margin: 0; + padding: 0; + width: auto; + border: 0; + background: transparent; + vertical-align: baseline; + text-align: inherit; + font: inherit; + line-height: @line-height-base; + cursor: pointer; + -moz-user-select: text; + text-shadow: inherit; + border-radius: 0; } -// Webkit-style focus +// Nicer focus styles // --------------------------------------- -.tab-focus() { - // Default - outline: thin dotted @gray-dark; - // Webkit - outline-offset: 1px; +.tab-focus(@color: @tab-focus-default-color) { + outline: 0; + box-shadow: 0 0 0 3px fade(@color, 35%); } // Use rems for font sizing // Leave <body> at 100%/16px // --------------------------------------- -.font-size(@font-size: 16){ +.font-size(@font-size: 16) { @rem: round((@font-size / 16), 3); font-size: (@font-size * 1px); - font-size: ~"@{rem}rem"; + font-size: ~'@{rem}rem'; } // Font smoothing @@ -38,4 +46,4 @@ .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/reset.less b/demo/src/less/lib/reset.less new file mode 100644 index 00000000..50798b10 --- /dev/null +++ b/demo/src/less/lib/reset.less @@ -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; +} |