Docs/demo refresh

This commit is contained in:
Sam Potts
2017-10-25 23:59:53 +11:00
parent 57517a9dcc
commit 378aa159b8
39 changed files with 618 additions and 575 deletions

View File

@ -3,7 +3,11 @@
// ==========================================================================
// Fade
@keyframes fade-in {
0% { opacity: 0 }
100% { opacity: 1 }
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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;
}