Docs/demo refresh
This commit is contained in:
@ -3,7 +3,11 @@
|
||||
// ==========================================================================
|
||||
|
||||
// Fade
|
||||
@keyframes fade-in {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
}
|
||||
@keyframes fadein {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
11
demo/src/less/lib/reset.less
Normal file
11
demo/src/less/lib/reset.less
Normal 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;
|
||||
}
|
Reference in New Issue
Block a user