create folder and files in rep styl
This commit is contained in:
Arnaud CARIOU
parent
b33501b2b7
commit
7a8701c929
9
styl/config/_breakpoints.styl
Normal file
9
styl/config/_breakpoints.styl
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
// Responsive breakpoints variables
|
||||||
|
|
||||||
|
// Warning : you should use your own values, regardless of the devices
|
||||||
|
// Best practise : (max-width: $BP) and (min-width: ($BP + 1))
|
||||||
|
tiny = 543px // or 'em' if you prefer, of course
|
||||||
|
small = 767px
|
||||||
|
medium = 991px
|
||||||
|
large = 1199px
|
||||||
|
extra-large = 1439px
|
||||||
33
styl/config/_mixins.styl
Normal file
33
styl/config/_mixins.styl
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
// Additionnal "utility" breakpoints aliases
|
||||||
|
// ex. @include respond-to("medium-up") {...}
|
||||||
|
breakpoint(bp)
|
||||||
|
if bp == 'tiny'
|
||||||
|
return '(max-width: {tiny})'
|
||||||
|
else if bp == 'small'
|
||||||
|
return '(max-width: {small})'
|
||||||
|
else if bp == 'medium'
|
||||||
|
return '(max-width: {medium})'
|
||||||
|
else if bp == 'large'
|
||||||
|
return '(max-width: {large})'
|
||||||
|
else if bp == 'extra-large'
|
||||||
|
return '(max-width: {extra-large})'
|
||||||
|
else if bp == 'tiny-up'
|
||||||
|
return '(min-width: {tiny + 1})'
|
||||||
|
else if bp == 'small-up'
|
||||||
|
return '(min-width: {small + 1})'
|
||||||
|
else if bp == 'medium-up'
|
||||||
|
return '(min-width: {medium + 1})'
|
||||||
|
else if bp == 'large-up'
|
||||||
|
return '(min-width: {large + 1})'
|
||||||
|
else if bp == 'extra-large-up'
|
||||||
|
return '(min-width: {extra-large + 1})'
|
||||||
|
else if bp == 'retina'
|
||||||
|
return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
respond-to(value)
|
||||||
|
string = breakpoint(value)
|
||||||
|
@media screen and {string}
|
||||||
|
{block}
|
||||||
|
*/
|
||||||
50
styl/config/_variables.styl
Normal file
50
styl/config/_variables.styl
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
// Config file and project variables
|
||||||
|
|
||||||
|
// font sizes
|
||||||
|
base-font-size = 1.6rem // ex. 1.6rem would be "16px" equivalent
|
||||||
|
line-height = 1.5 // equiv line-height 1.5
|
||||||
|
h1-size = 3.2rem // equiv "32px"
|
||||||
|
h2-size = 2.8rem // equiv "28px"
|
||||||
|
h3-size = 2.4rem // equiv "24px"
|
||||||
|
h4-size = 2.0rem // equiv "20px"
|
||||||
|
h5-size = 1.8rem // equiv "18px"
|
||||||
|
h6-size = 1.6rem // equiv "16px"
|
||||||
|
|
||||||
|
// font stacks
|
||||||
|
font-stack-common = sans-serif // common font
|
||||||
|
font-stack-headings = sans-serif // headings font
|
||||||
|
font-stack-monospace = consolas, courier, monospace // monospace font
|
||||||
|
|
||||||
|
// color scheme
|
||||||
|
color1 = #000
|
||||||
|
color2 = #fff
|
||||||
|
color3 = #333
|
||||||
|
color4 = #000
|
||||||
|
color5 = #6FA939
|
||||||
|
|
||||||
|
// colors used in project
|
||||||
|
base-color = color1
|
||||||
|
link-color = color3
|
||||||
|
base-background = color2
|
||||||
|
// If you don't want any effect on focused/hovered links,
|
||||||
|
// comment variable below or make it equal to either link-color or false or null
|
||||||
|
link-hover-color = color4
|
||||||
|
brand-primary = color5
|
||||||
|
|
||||||
|
|
||||||
|
// spacings (choose unit you prefer)
|
||||||
|
tiny-value = .5rem // tiny value for margins / paddings
|
||||||
|
tiny-plus-value = .7rem // tiny+ value for margins / paddings
|
||||||
|
small-value = 1rem // small value for margins / paddings
|
||||||
|
small-plus-value = 1.5rem // small+ value for margins / paddings
|
||||||
|
medium-value = 2rem // medium value for margins / paddings
|
||||||
|
medium-plus-value = 3rem // medium+ value for margins / paddings
|
||||||
|
large-value = 4rem // large value for margins / paddings
|
||||||
|
large-plus-value = 6rem // large value for margins / paddings
|
||||||
|
extra-large-value = 8rem // extra large value for margins / paddings
|
||||||
|
extra-large-plus-value = 12rem // extra large value for margins / paddings
|
||||||
|
ultra-large-value = 16rem // ultra large value for margins / paddings
|
||||||
|
ultra-large-plus-value = 20rem // ultra large value for margins / paddings
|
||||||
|
|
||||||
|
//kna-namespace (default : null)
|
||||||
|
kna-namespace = null;
|
||||||
293
styl/grids/_grillade.styl
Normal file
293
styl/grids/_grillade.styl
Normal file
@ -0,0 +1,293 @@
|
|||||||
|
/* ---------------------------------- */
|
||||||
|
/* ==Grillade : Simple Grid System */
|
||||||
|
/* ---------------------------------- */
|
||||||
|
/* Doc : http://grillade.knacss.com */
|
||||||
|
// gutter values for grid layouts. Unit can be: %, px, em, rem
|
||||||
|
grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem }
|
||||||
|
// IEfixing, see
|
||||||
|
// https://github.com/alsacreations/KNACSS/issues/133;
|
||||||
|
iefix = 0.01px
|
||||||
|
|
||||||
|
tiny = 543px
|
||||||
|
small = 767px
|
||||||
|
medium = 991px
|
||||||
|
large = 1199px
|
||||||
|
extra-large = 1439px
|
||||||
|
|
||||||
|
displayFlex()
|
||||||
|
display: -webkit-box
|
||||||
|
display: -ms-flexbox
|
||||||
|
display: flex
|
||||||
|
|
||||||
|
@media (min-width: tiny + 1)
|
||||||
|
[class*=" grid-"]
|
||||||
|
[class^="grid-"]
|
||||||
|
displayFlex()
|
||||||
|
-webkit-box-orient: horizontal
|
||||||
|
-webkit-box-direction: normal
|
||||||
|
flex-direction: row
|
||||||
|
flex-wrap: wrap
|
||||||
|
& > *
|
||||||
|
box-sizing: border-box
|
||||||
|
min-width: 0
|
||||||
|
min-height: 0
|
||||||
|
|
||||||
|
// Multi-line grid constructor
|
||||||
|
// example : .grid-perso { @include grid(12, 3rem); }
|
||||||
|
grid(grid-number = 1, own-gutter = 0)
|
||||||
|
& > *
|
||||||
|
width: calc(100% / grid-number - iefix)
|
||||||
|
|
||||||
|
for key, size in grid-gutters
|
||||||
|
&.has-gutter{key}
|
||||||
|
margin-right: -(size / 2)
|
||||||
|
margin-left: -(size / 2)
|
||||||
|
& > *
|
||||||
|
width: calc(100% / grid-number - size - iefix)
|
||||||
|
margin-right size / 2
|
||||||
|
margin-left size / 2
|
||||||
|
|
||||||
|
if own-gutter != 0
|
||||||
|
margin-right: own-gutter / 2
|
||||||
|
margin-left: own-gutter / 2
|
||||||
|
|
||||||
|
// Mono-line grid constructor (.grid)
|
||||||
|
@media (min-width: tiny + 1)
|
||||||
|
.grid
|
||||||
|
.grid--reverse
|
||||||
|
displayFlex()
|
||||||
|
& > *
|
||||||
|
flex: 1 1 0%
|
||||||
|
box-sizing: border-box
|
||||||
|
min-width: 0
|
||||||
|
min-height: 0
|
||||||
|
|
||||||
|
for key, size in grid-gutters
|
||||||
|
&.has-gutter{key} > * + *
|
||||||
|
margin-left: size - iefix
|
||||||
|
|
||||||
|
// Constructing grids : will be compiled in CSS
|
||||||
|
@media (min-width: tiny + 1)
|
||||||
|
for i in 2..12
|
||||||
|
grid-selector = 'grid-%s' % i
|
||||||
|
[class*={grid-selector}] > *
|
||||||
|
grid(i, 0)
|
||||||
|
|
||||||
|
.push {
|
||||||
|
margin-left: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull {
|
||||||
|
margin-right: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-first {
|
||||||
|
-webkit-box-ordinal-group: 0;
|
||||||
|
-ms-flex-order: -1;
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-last {
|
||||||
|
-webkit-box-ordinal-group: 2;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*[class*="grid-"][class*="--reverse"] {
|
||||||
|
-webkit-box-orient: horizontal;
|
||||||
|
-webkit-box-direction: reverse;
|
||||||
|
-ms-flex-direction: row-reverse;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/*@media (min-width: 544px) {
|
||||||
|
.full {
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 1 - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter .full {
|
||||||
|
width: calc(100% / 1 - 1rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-l .full {
|
||||||
|
width: calc(100% / 1 - 2rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-xl .full {
|
||||||
|
width: calc(100% / 1 - 4rem - 0.01px);
|
||||||
|
}
|
||||||
|
.one-half {
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 2 - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter .one-half {
|
||||||
|
width: calc(100% / 2 - 1rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-l .one-half {
|
||||||
|
width: calc(100% / 2 - 2rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-xl .one-half {
|
||||||
|
width: calc(100% / 2 - 4rem - 0.01px);
|
||||||
|
}
|
||||||
|
.one-third {
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 3 - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter .one-third {
|
||||||
|
width: calc(100% / 3 - 1rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-l .one-third {
|
||||||
|
width: calc(100% / 3 - 2rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-xl .one-third {
|
||||||
|
width: calc(100% / 3 - 4rem - 0.01px);
|
||||||
|
}
|
||||||
|
.one-quarter {
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 4 - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter .one-quarter {
|
||||||
|
width: calc(100% / 4 - 1rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-l .one-quarter {
|
||||||
|
width: calc(100% / 4 - 2rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-xl .one-quarter {
|
||||||
|
width: calc(100% / 4 - 4rem - 0.01px);
|
||||||
|
}
|
||||||
|
.one-fifth {
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 5 - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter .one-fifth {
|
||||||
|
width: calc(100% / 5 - 1rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-l .one-fifth {
|
||||||
|
width: calc(100% / 5 - 2rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-xl .one-fifth {
|
||||||
|
width: calc(100% / 5 - 4rem - 0.01px);
|
||||||
|
}
|
||||||
|
.one-sixth {
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 6 - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter .one-sixth {
|
||||||
|
width: calc(100% / 6 - 1rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-l .one-sixth {
|
||||||
|
width: calc(100% / 6 - 2rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-xl .one-sixth {
|
||||||
|
width: calc(100% / 6 - 4rem - 0.01px);
|
||||||
|
}
|
||||||
|
.two-thirds {
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 3 * 2 - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter .two-thirds {
|
||||||
|
width: calc(100% / 3 * 2 - 1rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-l .two-thirds {
|
||||||
|
width: calc(100% / 3 * 2 - 2rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-xl .two-thirds {
|
||||||
|
width: calc(100% / 3 * 2 - 4rem - 0.01px);
|
||||||
|
}
|
||||||
|
.three-quarters {
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 4 * 3 - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter .three-quarters {
|
||||||
|
width: calc(100% / 4 * 3 - 1rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-l .three-quarters {
|
||||||
|
width: calc(100% / 4 * 3 - 2rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-xl .three-quarters {
|
||||||
|
width: calc(100% / 4 * 3 - 4rem - 0.01px);
|
||||||
|
}
|
||||||
|
.five-sixths {
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-ms-flex: 0 0 auto;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 6 * 5 - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter .five-sixths {
|
||||||
|
width: calc(100% / 6 * 5 - 1rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-l .five-sixths {
|
||||||
|
width: calc(100% / 6 * 5 - 2rem - 0.01px);
|
||||||
|
}
|
||||||
|
.has-gutter-xl .five-sixths {
|
||||||
|
width: calc(100% / 6 * 5 - 4rem - 0.01px);
|
||||||
|
}
|
||||||
|
}*/
|
||||||
|
|
||||||
|
/* Responsive Small Breakpoint */
|
||||||
|
/*
|
||||||
|
@media (min-width: 544px) and (max-width: 991px) {
|
||||||
|
[class*="-small-1"] > * {
|
||||||
|
width: calc(100% / 1 - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-1"].has-gutter > * {
|
||||||
|
width: calc(100% / 1 - 1rem - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-1"].has-gutter-l > * {
|
||||||
|
width: calc(100% / 1 - 2rem - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-1"].has-gutter-xl > * {
|
||||||
|
width: calc(100% / 1 - 4rem - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-2"] > * {
|
||||||
|
width: calc(100% / 2 - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-2"].has-gutter > * {
|
||||||
|
width: calc(100% / 2 - 1rem - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-2"].has-gutter-l > * {
|
||||||
|
width: calc(100% / 2 - 2rem - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-2"].has-gutter-xl > * {
|
||||||
|
width: calc(100% / 2 - 4rem - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-3"] > * {
|
||||||
|
width: calc(100% / 3 - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-3"].has-gutter > * {
|
||||||
|
width: calc(100% / 3 - 1rem - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-3"].has-gutter-l > * {
|
||||||
|
width: calc(100% / 3 - 2rem - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-3"].has-gutter-xl > * {
|
||||||
|
width: calc(100% / 3 - 4rem - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-4"] > * {
|
||||||
|
width: calc(100% / 4 - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-4"].has-gutter > * {
|
||||||
|
width: calc(100% / 4 - 1rem - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-4"].has-gutter-l > * {
|
||||||
|
width: calc(100% / 4 - 2rem - 0.01px);
|
||||||
|
}
|
||||||
|
[class*="-small-4"].has-gutter-xl > * {
|
||||||
|
width: calc(100% / 4 - 4rem - 0.01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
64
styl/knacss.styl
Normal file
64
styl/knacss.styl
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
/*!
|
||||||
|
* www.KNACSS.com V6.0.5 (1er décembre 2016) @author: Alsacreations, Raphael Goetter
|
||||||
|
* Licence WTFPL http://www.wtfpl.net/
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* ==Table Of Content */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* 1- Normalize (basic reset) */
|
||||||
|
/* 2- Base (basic styles) */
|
||||||
|
/* 3- Print (print quick reset) */
|
||||||
|
/* 4- Stylings (minor stylings) */
|
||||||
|
/* 5- Misc (skip links, hyphens) */
|
||||||
|
/* 6- Tables (data tables consistency) */
|
||||||
|
/* 7- Forms (forms consistency) */
|
||||||
|
/* 8- Media object */
|
||||||
|
/* 9- Autogrid object */
|
||||||
|
/* 10- Global Layout (alignment, modules, positionning) */
|
||||||
|
/* 11- Helpers (width and spacers helpers) */
|
||||||
|
/* (12- WordPress reset (disabled by default)) */
|
||||||
|
/* 13- Responsive (Responsive Web Design helpers) */
|
||||||
|
/* 14- Grid Layout (grillade) */
|
||||||
|
|
||||||
|
/* ---------------------------------- */
|
||||||
|
/* ==Normalize (basic reset) */
|
||||||
|
/* ---------------------------------- */
|
||||||
|
|
||||||
|
@import 'vendor/_normalize.styl' // normalize (basic reset)
|
||||||
|
|
||||||
|
// WARNING : you should comment the following @import (variables)
|
||||||
|
// and move variables file from knacss folder to your own project folder!
|
||||||
|
@import 'config/_variables.styl'
|
||||||
|
@import 'config/_breakpoints.styl'
|
||||||
|
@import 'config/_mixins.styl'
|
||||||
|
|
||||||
|
// Libraries
|
||||||
|
@import 'library/_base.styl' // basic styles
|
||||||
|
@import 'library/_print.styl' // print quick reset
|
||||||
|
@import 'library/_styling.styl' // minor stylings
|
||||||
|
@import 'library/_misc.styl'; // skip links, hyphens
|
||||||
|
@import 'library/_tables.styl'; // data tables consistency
|
||||||
|
@import 'library/_forms.styl'; // forms consistency
|
||||||
|
|
||||||
|
// Objects
|
||||||
|
@import 'objects/_media.styl'; // media object
|
||||||
|
@import 'objects/_autogrid.styl'; // media autogrid
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
@import 'utilities/_layout.styl'; // alignment, modules, positionning
|
||||||
|
@import 'utilities/_helpers.styl'; // width and spacers helpers
|
||||||
|
@import 'utilities/_responsive.styl'; // Responsive Web Design helpers
|
||||||
|
|
||||||
|
// Grids
|
||||||
|
@import 'grids/_grillade.styl'; // grids
|
||||||
|
|
||||||
|
|
||||||
|
/* ----------------------------- */
|
||||||
|
/* ==Own stylesheet */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* Here should go your own CSS styles */
|
||||||
|
// You can also link them with a Sass @import
|
||||||
|
// @import "my-styles";
|
||||||
169
styl/library/_base.styl
Normal file
169
styl/library/_base.styl
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
/* ----------------------------- */
|
||||||
|
/* ==Base (basic styles) */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* switching to border-box model for all elements */
|
||||||
|
html
|
||||||
|
box-sizing border-box
|
||||||
|
|
||||||
|
*
|
||||||
|
box-sizing inherit
|
||||||
|
|
||||||
|
html
|
||||||
|
/* set base font-size to equiv "10px", which is adapted to rem unit */
|
||||||
|
font-size 62.5%
|
||||||
|
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
|
||||||
|
/* thanks to @guardian, @victorbritopro and @eQRoeil */
|
||||||
|
font-size calc(1em * 0.625)
|
||||||
|
|
||||||
|
body
|
||||||
|
font-size base-font-size
|
||||||
|
background-color base-background
|
||||||
|
color base-color
|
||||||
|
font-family font-stack-common
|
||||||
|
line-height line-height
|
||||||
|
|
||||||
|
a
|
||||||
|
color link-color
|
||||||
|
|
||||||
|
// No styling on focus/hover if there's no effect. Avoids to then have to
|
||||||
|
// override it countless times. See Issue #232
|
||||||
|
if link-hover-color is defined // && ( null == list( (link-color, null, false), link-hover-color) )
|
||||||
|
&:focus,
|
||||||
|
&:hover,
|
||||||
|
&:active
|
||||||
|
color link-hover-color
|
||||||
|
|
||||||
|
ul
|
||||||
|
ol
|
||||||
|
padding-left 2em
|
||||||
|
|
||||||
|
img
|
||||||
|
vertical-align middle
|
||||||
|
|
||||||
|
blockquote
|
||||||
|
figure
|
||||||
|
margin-left 0
|
||||||
|
margin-right 0
|
||||||
|
|
||||||
|
/* font-sizing for content */
|
||||||
|
p
|
||||||
|
.{kna-namespace}p-like
|
||||||
|
ul
|
||||||
|
ol
|
||||||
|
dl
|
||||||
|
blockquote
|
||||||
|
pre
|
||||||
|
td
|
||||||
|
th
|
||||||
|
label
|
||||||
|
textarea
|
||||||
|
caption
|
||||||
|
details
|
||||||
|
figure
|
||||||
|
margin-top 0.75em
|
||||||
|
margin-bottom 0
|
||||||
|
line-height line-height
|
||||||
|
|
||||||
|
h1 .{kna-namespace}h1-like
|
||||||
|
font-size h1-size
|
||||||
|
if font-stack-headings is defined && font-stack-headings != font-stack-common
|
||||||
|
font-family font-stack-headings
|
||||||
|
|
||||||
|
h2 .{kna-namespace}h2-like
|
||||||
|
font-size h2-size
|
||||||
|
if font-stack-headings is defined && font-stack-headings != font-stack-common
|
||||||
|
font-family font-stack-headings
|
||||||
|
|
||||||
|
h3 .{kna-namespace}h3-like
|
||||||
|
font-size h3-size
|
||||||
|
|
||||||
|
h4 .{kna-namespace}h4-like
|
||||||
|
font-size h4-size
|
||||||
|
|
||||||
|
h5 .{kna-namespace}h5-like
|
||||||
|
font-size h5-size
|
||||||
|
|
||||||
|
h6 .{kna-namespace}h6-like
|
||||||
|
font-size h6-size
|
||||||
|
|
||||||
|
/* alternate font-sizing */
|
||||||
|
.{kna-namespace}smaller
|
||||||
|
font-size 0.6em
|
||||||
|
|
||||||
|
.{kna-namespace}small
|
||||||
|
font-size 0.8em
|
||||||
|
|
||||||
|
.{kna-namespace}big
|
||||||
|
font-size 1.2em
|
||||||
|
|
||||||
|
.{kna-namespace}bigger
|
||||||
|
font-size: 1.5em
|
||||||
|
|
||||||
|
.{kna-namespace}biggest
|
||||||
|
font-size 2em
|
||||||
|
|
||||||
|
code
|
||||||
|
pre
|
||||||
|
samp
|
||||||
|
kbd
|
||||||
|
/* IE fix */
|
||||||
|
white-space pre-line
|
||||||
|
white-space pre-wrap
|
||||||
|
font-family font-stack-monospace
|
||||||
|
line-height normal
|
||||||
|
|
||||||
|
em
|
||||||
|
.{kna-namespace}italic
|
||||||
|
address
|
||||||
|
cite
|
||||||
|
i
|
||||||
|
var
|
||||||
|
font-style italic
|
||||||
|
|
||||||
|
/* avoid top margins on first content element */
|
||||||
|
p
|
||||||
|
.{kna-namespace}p-like
|
||||||
|
ul
|
||||||
|
ol
|
||||||
|
dl
|
||||||
|
blockquote
|
||||||
|
pre
|
||||||
|
h1
|
||||||
|
.{kna-namespace}h1-like
|
||||||
|
h2
|
||||||
|
.{kna-namespace}h2-like
|
||||||
|
h3
|
||||||
|
.{kna-namespace}h3-like
|
||||||
|
h4
|
||||||
|
.{kna-namespace}h4-like
|
||||||
|
h5
|
||||||
|
.{kna-namespace}h5-like
|
||||||
|
h6
|
||||||
|
.{kna-namespace}h6-like
|
||||||
|
&:first-child
|
||||||
|
margin-top 0
|
||||||
|
|
||||||
|
/* avoid margins on nested elements */
|
||||||
|
li p
|
||||||
|
li .{kna-namespace}p-like
|
||||||
|
li ul
|
||||||
|
li ol
|
||||||
|
margin-top 0
|
||||||
|
margin-bottom 0
|
||||||
|
|
||||||
|
/* max values */
|
||||||
|
img
|
||||||
|
table
|
||||||
|
td
|
||||||
|
blockquote
|
||||||
|
code
|
||||||
|
pre
|
||||||
|
textarea
|
||||||
|
input
|
||||||
|
video
|
||||||
|
svg
|
||||||
|
max-width 100%
|
||||||
|
|
||||||
|
img
|
||||||
|
height auto
|
||||||
99
styl/library/_forms.styl
Normal file
99
styl/library/_forms.styl
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
/* ----------------------------- */
|
||||||
|
/* ==Forms */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* thanks to HTML5boilerplate,
|
||||||
|
* github.com/nathansmith/formalize and www.sitepen.com
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* buttons */
|
||||||
|
.{kna-namespace}btn
|
||||||
|
display inline-block
|
||||||
|
|
||||||
|
/* forms items */
|
||||||
|
form
|
||||||
|
fieldset
|
||||||
|
border none
|
||||||
|
|
||||||
|
input
|
||||||
|
button
|
||||||
|
select
|
||||||
|
label
|
||||||
|
.{kna-namespace}btn
|
||||||
|
font-family inherit
|
||||||
|
font-size inherit
|
||||||
|
|
||||||
|
button
|
||||||
|
input
|
||||||
|
optgroup
|
||||||
|
select
|
||||||
|
textarea
|
||||||
|
color base-color
|
||||||
|
|
||||||
|
label
|
||||||
|
vertical-align middle
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
|
legend
|
||||||
|
border 0
|
||||||
|
white-space normal
|
||||||
|
|
||||||
|
textarea
|
||||||
|
min-height 5em
|
||||||
|
vertical-align top
|
||||||
|
font-family inherit
|
||||||
|
font-size inherit
|
||||||
|
resize vertical
|
||||||
|
|
||||||
|
select
|
||||||
|
-webkit-appearance menulist-button
|
||||||
|
|
||||||
|
/* if select styling bugs on WebKit */
|
||||||
|
/* select { -webkit-appearance: none; } */
|
||||||
|
|
||||||
|
/* 'x' appears on right of search input when text is entered. This removes it */
|
||||||
|
input[type="search"]
|
||||||
|
&::-webkit-search-decoration
|
||||||
|
&::-webkit-search-cancel-button
|
||||||
|
&::-webkit-search-results-button
|
||||||
|
&::-webkit-search-results-decoration
|
||||||
|
display: none
|
||||||
|
|
||||||
|
::-webkit-input-placeholder
|
||||||
|
color #777
|
||||||
|
|
||||||
|
input:-moz-placeholder
|
||||||
|
textarea:-moz-placeholder
|
||||||
|
color #777
|
||||||
|
|
||||||
|
.{kna-namespace}btn
|
||||||
|
input[type="button"]
|
||||||
|
button
|
||||||
|
&:focus
|
||||||
|
-webkit-tap-highlight-color transparent
|
||||||
|
-webkit-user-select none
|
||||||
|
-moz-user-select none
|
||||||
|
-ms-user-select none
|
||||||
|
user-select none
|
||||||
|
|
||||||
|
/* unstyled forms */
|
||||||
|
|
||||||
|
button
|
||||||
|
input[type="button"]
|
||||||
|
input[type="submit"]
|
||||||
|
input[type="reset"]
|
||||||
|
&.{kna-namespace}unstyled
|
||||||
|
padding 0
|
||||||
|
border none
|
||||||
|
line-height 1
|
||||||
|
text-align left
|
||||||
|
background none
|
||||||
|
border-radius 0
|
||||||
|
box-shadow none
|
||||||
|
-webkit-appearance none
|
||||||
|
-moz-appearance none
|
||||||
|
appearance none
|
||||||
|
|
||||||
|
&:focus
|
||||||
|
box-shadow none
|
||||||
|
outline none
|
||||||
46
styl/library/_misc.styl
Normal file
46
styl/library/_misc.styl
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
/* ----------------------------- */
|
||||||
|
/* ==Misc (skip links, hyphens) */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* styling skip links */
|
||||||
|
.{kna-namespace}skip-links
|
||||||
|
position absolute
|
||||||
|
|
||||||
|
& a
|
||||||
|
position absolute
|
||||||
|
overflow hidden
|
||||||
|
clip rect(1px, 1px, 1px, 1px)
|
||||||
|
padding 0.5em
|
||||||
|
background black
|
||||||
|
color white
|
||||||
|
text-decoration none
|
||||||
|
|
||||||
|
&:focus
|
||||||
|
position static
|
||||||
|
overflow visible
|
||||||
|
clip auto
|
||||||
|
|
||||||
|
// hyphens on tiny screens
|
||||||
|
@media (max-width: tiny)
|
||||||
|
/* you shall not pass */
|
||||||
|
div
|
||||||
|
textarea
|
||||||
|
table
|
||||||
|
td
|
||||||
|
th
|
||||||
|
code
|
||||||
|
pre
|
||||||
|
samp
|
||||||
|
word-wrap break-word
|
||||||
|
hyphens auto
|
||||||
|
|
||||||
|
// use .no-wrapping to disallow hyphens on tiny screens
|
||||||
|
@media (max-width: tiny)
|
||||||
|
.no-wrapping
|
||||||
|
word-wrap normal
|
||||||
|
hyphens manual
|
||||||
|
|
||||||
|
// SVG width IE fix
|
||||||
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
|
||||||
|
img[src$=".svg"]
|
||||||
|
width 100%
|
||||||
83
styl/library/_print.styl
Normal file
83
styl/library/_print.styl
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
/* ----------------------------- */
|
||||||
|
/* ==Print (quick print reset) */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
@media print
|
||||||
|
*
|
||||||
|
background transparent !important
|
||||||
|
box-shadow none !important
|
||||||
|
text-shadow none !important
|
||||||
|
|
||||||
|
body
|
||||||
|
width auto
|
||||||
|
margin auto
|
||||||
|
font-family serif
|
||||||
|
font-size 12pt
|
||||||
|
|
||||||
|
p
|
||||||
|
.{kna-namespace}p-like
|
||||||
|
h1
|
||||||
|
.{kna-namespace}h1-like
|
||||||
|
h2
|
||||||
|
.{kna-namespace}h2-like
|
||||||
|
h3
|
||||||
|
.{kna-namespace}h3-like
|
||||||
|
h4
|
||||||
|
.{kna-namespace}h4-like
|
||||||
|
h5
|
||||||
|
.{kna-namespace}h5-like
|
||||||
|
h6
|
||||||
|
.{kna-namespace}h6-like
|
||||||
|
blockquote
|
||||||
|
ul
|
||||||
|
ol
|
||||||
|
color #000
|
||||||
|
margin auto
|
||||||
|
|
||||||
|
.{kna-namespace}print
|
||||||
|
display block
|
||||||
|
|
||||||
|
.{kna-namespace}no-print
|
||||||
|
display none
|
||||||
|
|
||||||
|
/* no orphans, no widows */
|
||||||
|
p
|
||||||
|
.{kna-namespace}p-like
|
||||||
|
blockquote
|
||||||
|
orphans 3
|
||||||
|
widows 3
|
||||||
|
|
||||||
|
/* no breaks inside these elements */
|
||||||
|
blockquote
|
||||||
|
ul
|
||||||
|
ol
|
||||||
|
page-break-inside avoid
|
||||||
|
|
||||||
|
/* page break before main headers
|
||||||
|
h1
|
||||||
|
.h1-like
|
||||||
|
page-break-before always
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* no breaks after these elements */
|
||||||
|
h1
|
||||||
|
.{kna-namespace}h1-like
|
||||||
|
h2
|
||||||
|
.{kna-namespace}h2-like
|
||||||
|
h3
|
||||||
|
.{kna-namespace}h3-like
|
||||||
|
caption
|
||||||
|
page-break-after avoid
|
||||||
|
|
||||||
|
a
|
||||||
|
color #000
|
||||||
|
|
||||||
|
/* displaying URLs
|
||||||
|
a[href]::after
|
||||||
|
content " (" attr(href) ")"
|
||||||
|
*/
|
||||||
|
|
||||||
|
a[href^="javascript:"]
|
||||||
|
a[href^="#"]
|
||||||
|
&::after
|
||||||
|
content: ""
|
||||||
97
styl/library/_styling.styl
Normal file
97
styl/library/_styling.styl
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
/* ----------------------------- */
|
||||||
|
/* ==Stylings (minor stylings) */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* styling elements */
|
||||||
|
code
|
||||||
|
kbd
|
||||||
|
mark
|
||||||
|
border-radius 2px
|
||||||
|
|
||||||
|
kbd
|
||||||
|
padding 0 2px
|
||||||
|
border 1px solid #999
|
||||||
|
|
||||||
|
code
|
||||||
|
padding 2px 4px
|
||||||
|
background rgba(0, 0, 0, 0.04)
|
||||||
|
color #b11
|
||||||
|
|
||||||
|
pre code
|
||||||
|
padding 0
|
||||||
|
background none
|
||||||
|
color inherit
|
||||||
|
border-radius 0
|
||||||
|
|
||||||
|
mark
|
||||||
|
padding 2px 4px
|
||||||
|
|
||||||
|
sup
|
||||||
|
sub
|
||||||
|
vertical-align 0
|
||||||
|
|
||||||
|
sup
|
||||||
|
bottom 1ex
|
||||||
|
|
||||||
|
sub
|
||||||
|
top 0.5ex
|
||||||
|
|
||||||
|
blockquote
|
||||||
|
position relative
|
||||||
|
padding-left 3em
|
||||||
|
min-height 2em
|
||||||
|
|
||||||
|
blockquote::before
|
||||||
|
content "\201C"
|
||||||
|
position absolute
|
||||||
|
left 0
|
||||||
|
top 0
|
||||||
|
font-family georgia, serif
|
||||||
|
font-size 5em
|
||||||
|
height .4em
|
||||||
|
line-height .9
|
||||||
|
color rgba(0, 0, 0, .3)
|
||||||
|
|
||||||
|
blockquote > footer
|
||||||
|
margin-top .75em
|
||||||
|
font-size 0.9em
|
||||||
|
color rgba(0, 0, 0, .7)
|
||||||
|
|
||||||
|
&::before
|
||||||
|
content "\2014 \0020"
|
||||||
|
|
||||||
|
q
|
||||||
|
font-style normal
|
||||||
|
|
||||||
|
q
|
||||||
|
.{kna-namespace}q
|
||||||
|
quotes: "“\00a0" "\00a0”"
|
||||||
|
|
||||||
|
&:lang(fr)
|
||||||
|
quotes "«\00a0" "\00a0»"
|
||||||
|
|
||||||
|
hr
|
||||||
|
display block
|
||||||
|
clear both
|
||||||
|
height 1px
|
||||||
|
margin 1em 0 2em
|
||||||
|
padding 0
|
||||||
|
border 0
|
||||||
|
color #ccc
|
||||||
|
background-color #ccc
|
||||||
|
|
||||||
|
/* tables */
|
||||||
|
table
|
||||||
|
.{kna-namespace}table
|
||||||
|
border 1px solid #ccc
|
||||||
|
|
||||||
|
caption
|
||||||
|
padding small-value
|
||||||
|
color #555
|
||||||
|
font-style italic
|
||||||
|
|
||||||
|
td
|
||||||
|
th
|
||||||
|
padding 0.3em 0.8em
|
||||||
|
border 1px #aaa dotted
|
||||||
|
text-align left
|
||||||
25
styl/library/_tables.styl
Normal file
25
styl/library/_tables.styl
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
/* ----------------------------- */
|
||||||
|
/* ==Tables */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
table
|
||||||
|
.{kna-namespace}table
|
||||||
|
width 100%
|
||||||
|
max-width 100%
|
||||||
|
table-layout fixed
|
||||||
|
border-collapse collapse
|
||||||
|
vertical-align top
|
||||||
|
margin-bottom medium-value
|
||||||
|
|
||||||
|
.{kna-namespace}table
|
||||||
|
display table
|
||||||
|
|
||||||
|
#recaptcha_table
|
||||||
|
.{kna-namespace}table-auto
|
||||||
|
table-layout auto
|
||||||
|
|
||||||
|
td
|
||||||
|
th
|
||||||
|
vertical-align top
|
||||||
|
min-width medium-value
|
||||||
|
cursor default
|
||||||
19
styl/objects/_autogrid.styl
Normal file
19
styl/objects/_autogrid.styl
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
/* Autogrid object */
|
||||||
|
/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
|
||||||
|
@media (min-width: (tiny + 1))
|
||||||
|
[class^="autogrid"]
|
||||||
|
[class*=" autogrid"]
|
||||||
|
display flex
|
||||||
|
|
||||||
|
[class^="autogrid"] > *
|
||||||
|
[class*=" autogrid"] > *
|
||||||
|
flex 1
|
||||||
|
min-width 0 /* avoid min-width:auto */
|
||||||
|
|
||||||
|
/* Autogrid variants */
|
||||||
|
@media (min-width: (tiny + 1))
|
||||||
|
.has-gutter > *:not(:first-child)
|
||||||
|
margin-left 1rem
|
||||||
|
|
||||||
|
[class*="--reverse"]
|
||||||
|
flex-direction: row-reverse
|
||||||
18
styl/objects/_media.styl
Normal file
18
styl/objects/_media.styl
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
/* Media object */
|
||||||
|
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
|
||||||
|
@media (min-width: (tiny + 1))
|
||||||
|
.o-media
|
||||||
|
display flex
|
||||||
|
align-items flex-start
|
||||||
|
|
||||||
|
.o-media-content
|
||||||
|
flex 1
|
||||||
|
min-width 0 /* avoid min-width:auto */
|
||||||
|
|
||||||
|
/* Media variants */
|
||||||
|
@media (min-width: (tiny + 1))
|
||||||
|
.o-media--reverse
|
||||||
|
flex-direction row-reverse
|
||||||
|
|
||||||
|
.o-media-figure--center
|
||||||
|
align-self center
|
||||||
278
styl/utilities/_helpers.styl
Normal file
278
styl/utilities/_helpers.styl
Normal file
@ -0,0 +1,278 @@
|
|||||||
|
/* ---------------------------------- */
|
||||||
|
/* ==Helpers */
|
||||||
|
/* ---------------------------------- */
|
||||||
|
|
||||||
|
/* State Helpers */
|
||||||
|
/* ------------- */
|
||||||
|
|
||||||
|
/* invisible for all */
|
||||||
|
.is-hidden
|
||||||
|
[hidden]
|
||||||
|
display none
|
||||||
|
|
||||||
|
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
|
||||||
|
.visually-hidden
|
||||||
|
position absolute !important
|
||||||
|
border 0 !important
|
||||||
|
height 1px !important
|
||||||
|
width 1px !important
|
||||||
|
padding 0 !important
|
||||||
|
overflow hidden !important
|
||||||
|
clip rect(0, 0, 0, 0) !important
|
||||||
|
|
||||||
|
.is-disabled
|
||||||
|
[disabled]
|
||||||
|
opacity 0.5
|
||||||
|
pointer-events none
|
||||||
|
cursor not-allowed
|
||||||
|
filter grayscale(1)
|
||||||
|
|
||||||
|
|
||||||
|
ul
|
||||||
|
&.is-unstyled
|
||||||
|
&.unstyled
|
||||||
|
list-style none
|
||||||
|
padding-left 0
|
||||||
|
|
||||||
|
/* Width Helpers */
|
||||||
|
/* ------------- */
|
||||||
|
|
||||||
|
/* blocks widths (percentage and pixels) */
|
||||||
|
.{kna-namespace}w10
|
||||||
|
width 10%
|
||||||
|
|
||||||
|
.{kna-namespace}w20
|
||||||
|
width 20%
|
||||||
|
|
||||||
|
.{kna-namespace}w25
|
||||||
|
width 25%
|
||||||
|
|
||||||
|
.{kna-namespace}w30
|
||||||
|
width 30%
|
||||||
|
|
||||||
|
.{kna-namespace}w33
|
||||||
|
width 33.3333%
|
||||||
|
|
||||||
|
.{kna-namespace}w40
|
||||||
|
width 40%
|
||||||
|
|
||||||
|
.{kna-namespace}w50
|
||||||
|
width 50%
|
||||||
|
|
||||||
|
.{kna-namespace}w60
|
||||||
|
width 60%
|
||||||
|
|
||||||
|
.{kna-namespace}w66
|
||||||
|
width 66.6666%
|
||||||
|
|
||||||
|
.{kna-namespace}w70
|
||||||
|
width 70%
|
||||||
|
|
||||||
|
.{kna-namespace}w75
|
||||||
|
width 75%
|
||||||
|
|
||||||
|
.{kna-namespace}w80
|
||||||
|
width 80%
|
||||||
|
|
||||||
|
.{kna-namespace}w90
|
||||||
|
width 90%
|
||||||
|
|
||||||
|
.{kna-namespace}w100
|
||||||
|
width 100%
|
||||||
|
|
||||||
|
.{kna-namespace}w50p
|
||||||
|
width 50px
|
||||||
|
|
||||||
|
.{kna-namespace}w100p
|
||||||
|
width 100px
|
||||||
|
|
||||||
|
.{kna-namespace}w150p
|
||||||
|
width 150px
|
||||||
|
|
||||||
|
.{kna-namespace}w200p
|
||||||
|
width 200px
|
||||||
|
|
||||||
|
.{kna-namespace}w300p
|
||||||
|
width 300px
|
||||||
|
|
||||||
|
@media (min-width: 401px)
|
||||||
|
.{kna-namespace}w400p
|
||||||
|
width 400px
|
||||||
|
|
||||||
|
.{kna-namespace}w500p
|
||||||
|
width 500px
|
||||||
|
|
||||||
|
.{kna-namespace}w600p
|
||||||
|
width 600px
|
||||||
|
|
||||||
|
@media (min-width: 701px)
|
||||||
|
|
||||||
|
.{kna-namespace}w700p
|
||||||
|
width 700px
|
||||||
|
|
||||||
|
.{kna-namespace}w800p
|
||||||
|
width 800px
|
||||||
|
|
||||||
|
@media (min-width: 961px)
|
||||||
|
.{kna-namespace}w960p
|
||||||
|
width 960px
|
||||||
|
|
||||||
|
.{kna-namespace}mw960p
|
||||||
|
max-width 960px
|
||||||
|
|
||||||
|
.{kna-namespace}w1140p
|
||||||
|
width 1140px
|
||||||
|
|
||||||
|
.{kna-namespace}mw1140p
|
||||||
|
max-width 1140px
|
||||||
|
|
||||||
|
.{kna-namespace}wauto
|
||||||
|
width auto
|
||||||
|
|
||||||
|
/* Spacing Helpers */
|
||||||
|
/* --------------- */
|
||||||
|
|
||||||
|
.{kna-namespace}man
|
||||||
|
.{kna-namespace}ma0
|
||||||
|
margin 0
|
||||||
|
|
||||||
|
.{kna-namespace}pan
|
||||||
|
.{kna-namespace}pa0
|
||||||
|
padding 0
|
||||||
|
|
||||||
|
.{kna-namespace}mas
|
||||||
|
margin small-value
|
||||||
|
|
||||||
|
.{kna-namespace}mam
|
||||||
|
margin medium-value
|
||||||
|
|
||||||
|
.{kna-namespace}mal
|
||||||
|
margin large-value
|
||||||
|
|
||||||
|
.{kna-namespace}pas
|
||||||
|
padding small-value
|
||||||
|
|
||||||
|
.{kna-namespace}pam
|
||||||
|
padding medium-value
|
||||||
|
|
||||||
|
.{kna-namespace}pal
|
||||||
|
padding large-value
|
||||||
|
|
||||||
|
.{kna-namespace}mtn
|
||||||
|
.{kna-namespace}mt0
|
||||||
|
margin-top 0
|
||||||
|
|
||||||
|
.{kna-namespace}mts
|
||||||
|
margin-top small-value
|
||||||
|
|
||||||
|
.{kna-namespace}mtm
|
||||||
|
margin-top medium-value
|
||||||
|
|
||||||
|
.{kna-namespace}mtl
|
||||||
|
margin-top large-value
|
||||||
|
|
||||||
|
.{kna-namespace}mrn
|
||||||
|
.{kna-namespace}mr0
|
||||||
|
margin-right 0
|
||||||
|
|
||||||
|
.{kna-namespace}mrs
|
||||||
|
margin-right small-value
|
||||||
|
|
||||||
|
.{kna-namespace}mrm
|
||||||
|
margin-right medium-value
|
||||||
|
|
||||||
|
.{kna-namespace}mrl
|
||||||
|
margin-right large-value
|
||||||
|
|
||||||
|
.{kna-namespace}mbn
|
||||||
|
.{kna-namespace}mb0
|
||||||
|
margin-bottom 0
|
||||||
|
|
||||||
|
.{kna-namespace}mbs
|
||||||
|
margin-bottom small-value
|
||||||
|
|
||||||
|
.{kna-namespace}mbm
|
||||||
|
margin-bottom medium-value
|
||||||
|
|
||||||
|
.{kna-namespace}mbl
|
||||||
|
margin-bottom large-value
|
||||||
|
|
||||||
|
.{kna-namespace}mln
|
||||||
|
.{kna-namespace}ml0
|
||||||
|
margin-left 0
|
||||||
|
|
||||||
|
.{kna-namespace}mls
|
||||||
|
margin-left small-value
|
||||||
|
|
||||||
|
.{kna-namespace}mlm
|
||||||
|
margin-left medium-value
|
||||||
|
|
||||||
|
.{kna-namespace}mll
|
||||||
|
margin-left large-value
|
||||||
|
|
||||||
|
.{kna-namespace}mauto
|
||||||
|
margin auto
|
||||||
|
|
||||||
|
.{kna-namespace}mtauto
|
||||||
|
margin-top auto
|
||||||
|
|
||||||
|
.{kna-namespace}mrauto
|
||||||
|
margin-right auto
|
||||||
|
|
||||||
|
.{kna-namespace}mbauto
|
||||||
|
margin-bottom auto
|
||||||
|
|
||||||
|
.{kna-namespace}mlauto
|
||||||
|
margin-left: auto
|
||||||
|
|
||||||
|
.{kna-namespace}ptn
|
||||||
|
.{kna-namespace}pt0
|
||||||
|
padding-top 0
|
||||||
|
|
||||||
|
.{kna-namespace}pts
|
||||||
|
padding-top small-value
|
||||||
|
|
||||||
|
.{kna-namespace}ptm
|
||||||
|
padding-top medium-value
|
||||||
|
|
||||||
|
.{kna-namespace}ptl
|
||||||
|
padding-top large-value
|
||||||
|
|
||||||
|
.{kna-namespace}prn
|
||||||
|
.{kna-namespace}pr0
|
||||||
|
padding-right 0
|
||||||
|
|
||||||
|
.{kna-namespace}prs
|
||||||
|
padding-right small-value
|
||||||
|
|
||||||
|
.{kna-namespace}prm
|
||||||
|
padding-right medium-value
|
||||||
|
|
||||||
|
.{kna-namespace}prl
|
||||||
|
padding-right large-value
|
||||||
|
|
||||||
|
.{kna-namespace}pbn
|
||||||
|
.{kna-namespace}pb0
|
||||||
|
padding-bottom 0
|
||||||
|
|
||||||
|
.{kna-namespace}pbs
|
||||||
|
padding-bottom small-value
|
||||||
|
|
||||||
|
.{kna-namespace}pbm
|
||||||
|
padding-bottom medium-value
|
||||||
|
|
||||||
|
.{kna-namespace}pbl
|
||||||
|
padding-bottom large-value
|
||||||
|
|
||||||
|
.{kna-namespace}pln
|
||||||
|
.{kna-namespace}pl0
|
||||||
|
padding-left 0
|
||||||
|
|
||||||
|
.{kna-namespace}pls
|
||||||
|
padding-left small-value
|
||||||
|
|
||||||
|
.{kna-namespace}plm
|
||||||
|
padding-left medium-value
|
||||||
|
|
||||||
|
.{kna-namespace}pll
|
||||||
|
padding-left large-value
|
||||||
98
styl/utilities/_layout.styl
Normal file
98
styl/utilities/_layout.styl
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
/* ----------------------------- */
|
||||||
|
/* ==Global Layout */
|
||||||
|
/* ----------------------------- */
|
||||||
|
|
||||||
|
/* module, gains superpower "BFC" Block Formating Context */
|
||||||
|
.mod
|
||||||
|
.bfc
|
||||||
|
overflow hidden
|
||||||
|
|
||||||
|
/* blocks that needs to be placed under floats */
|
||||||
|
.clear
|
||||||
|
clear both
|
||||||
|
|
||||||
|
/* blocks that must contain floats */
|
||||||
|
.clearfix
|
||||||
|
&::after
|
||||||
|
content ""
|
||||||
|
display table
|
||||||
|
clear both
|
||||||
|
border-collapse collapse
|
||||||
|
|
||||||
|
/* simple blocks alignment */
|
||||||
|
.{kna-namespace}left
|
||||||
|
margin-right auto
|
||||||
|
|
||||||
|
.{kna-namespace}right
|
||||||
|
margin-left auto
|
||||||
|
|
||||||
|
.{kna-namespace}center
|
||||||
|
margin-left auto
|
||||||
|
margin-right auto
|
||||||
|
|
||||||
|
/* text and contents alignment */
|
||||||
|
.{kna-namespace}txtleft
|
||||||
|
text-align left
|
||||||
|
|
||||||
|
.{kna-namespace}txtright
|
||||||
|
text-align right
|
||||||
|
|
||||||
|
.{kna-namespace}txtcenter
|
||||||
|
text-align center
|
||||||
|
|
||||||
|
/* floating elements */
|
||||||
|
.{kna-namespace}fl
|
||||||
|
float left
|
||||||
|
|
||||||
|
img.{kna-namespace}fl
|
||||||
|
margin-right small-value
|
||||||
|
|
||||||
|
.{kna-namespace}fr
|
||||||
|
float right
|
||||||
|
|
||||||
|
img.{kna-namespace}fr
|
||||||
|
margin-left small-value
|
||||||
|
|
||||||
|
img.{kna-namespace}fl
|
||||||
|
img.{kna-namespace}fr
|
||||||
|
margin-bottom tiny-value
|
||||||
|
|
||||||
|
/* inline-block */
|
||||||
|
.{kna-namespace}inbl
|
||||||
|
display inline-block
|
||||||
|
vertical-align top
|
||||||
|
|
||||||
|
/* flexbox layout
|
||||||
|
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||||
|
*/
|
||||||
|
|
||||||
|
[class*="{kna-namespace}flex-container"]
|
||||||
|
.{kna-namespace}flex-container
|
||||||
|
display flex
|
||||||
|
flex-wrap wrap
|
||||||
|
|
||||||
|
.{kna-namespace}flex-container-h
|
||||||
|
flex-direction row
|
||||||
|
|
||||||
|
.{kna-namespace}flex-container-v
|
||||||
|
flex-direction column
|
||||||
|
|
||||||
|
.{kna-namespace}flex-item-fluid
|
||||||
|
flex 1
|
||||||
|
min-width 0
|
||||||
|
|
||||||
|
.{kna-namespace}flex-item-first
|
||||||
|
.{kna-namespace}item-first
|
||||||
|
order -1
|
||||||
|
|
||||||
|
.{kna-namespace}flex-item-medium
|
||||||
|
.{kna-namespace}item-medium
|
||||||
|
order 0
|
||||||
|
|
||||||
|
.{kna-namespace}flex-item-last
|
||||||
|
.{kna-namespace}item-last
|
||||||
|
order 1
|
||||||
|
|
||||||
|
.{kna-namespace}flex-item-center
|
||||||
|
.{kna-namespace}item-center
|
||||||
|
margin auto
|
||||||
230
styl/utilities/_responsive.styl
Normal file
230
styl/utilities/_responsive.styl
Normal file
@ -0,0 +1,230 @@
|
|||||||
|
/* -------------------------- */
|
||||||
|
/* ==Responsive helpers */
|
||||||
|
/* -------------------------- */
|
||||||
|
|
||||||
|
/* large screens */
|
||||||
|
/* ------------- */
|
||||||
|
|
||||||
|
@media (min-width: (medium + 1))
|
||||||
|
|
||||||
|
/* layouts for large screens */
|
||||||
|
.{kna-namespace}large-hidden
|
||||||
|
display none !important
|
||||||
|
|
||||||
|
.{kna-namespace}large-visible
|
||||||
|
display block !important
|
||||||
|
|
||||||
|
.{kna-namespace}large-no-float
|
||||||
|
float none
|
||||||
|
|
||||||
|
.{kna-namespace}large-inbl
|
||||||
|
display inline-block
|
||||||
|
float none
|
||||||
|
vertical-align top
|
||||||
|
|
||||||
|
/* widths for large screens */
|
||||||
|
.{kna-namespace}large-w25
|
||||||
|
width 25% !important
|
||||||
|
|
||||||
|
.{kna-namespace}large-w33
|
||||||
|
width 33.333333% !important
|
||||||
|
|
||||||
|
.{kna-namespace}large-w50
|
||||||
|
width 50% !important
|
||||||
|
|
||||||
|
.{kna-namespace}large-w66
|
||||||
|
width 66.666666% !important
|
||||||
|
|
||||||
|
.{kna-namespace}large-w75
|
||||||
|
width 75% !important
|
||||||
|
|
||||||
|
.{kna-namespace}large-w100
|
||||||
|
.{kna-namespace}large-wauto
|
||||||
|
display block !important
|
||||||
|
float none !important
|
||||||
|
clear none !important
|
||||||
|
width auto !important
|
||||||
|
margin-left 0 !important
|
||||||
|
margin-right 0 !important
|
||||||
|
border 0
|
||||||
|
|
||||||
|
/* margins for large screens */
|
||||||
|
.{kna-namespace}large-man
|
||||||
|
.{kna-namespace}large-ma0
|
||||||
|
margin 0 !important
|
||||||
|
|
||||||
|
/* medium screens */
|
||||||
|
/* -------------- */
|
||||||
|
|
||||||
|
@media (min-width: (small + 1)) and (max-width: large)
|
||||||
|
|
||||||
|
/* layouts for medium screens */
|
||||||
|
.{kna-namespace}medium-hidden
|
||||||
|
display none !important
|
||||||
|
|
||||||
|
.{kna-namespace}medium-visible
|
||||||
|
display block !important
|
||||||
|
|
||||||
|
.{kna-namespace}medium-no-float
|
||||||
|
float none
|
||||||
|
|
||||||
|
.{kna-namespace}medium-inbl
|
||||||
|
display inline-block
|
||||||
|
float none
|
||||||
|
vertical-align top
|
||||||
|
|
||||||
|
/* widths for medium screens */
|
||||||
|
.{kna-namespace}medium-w25
|
||||||
|
width 25% !important
|
||||||
|
|
||||||
|
.{kna-namespace}medium-w33
|
||||||
|
width 33.333333% !important
|
||||||
|
|
||||||
|
.{kna-namespace}medium-w50
|
||||||
|
width 50% !important
|
||||||
|
|
||||||
|
.{kna-namespace}medium-w66
|
||||||
|
width 66.666666% !important
|
||||||
|
|
||||||
|
.{kna-namespace}medium-w75
|
||||||
|
width 75% !important
|
||||||
|
|
||||||
|
.{kna-namespace}medium-w100
|
||||||
|
.{kna-namespace}medium-wauto
|
||||||
|
display block !important
|
||||||
|
float none !important
|
||||||
|
clear none !important
|
||||||
|
width auto !important
|
||||||
|
margin-left 0 !important
|
||||||
|
margin-right 0 !important
|
||||||
|
border 0
|
||||||
|
|
||||||
|
/* margins for medium screens */
|
||||||
|
.{kna-namespace}medium-man
|
||||||
|
.{kna-namespace}medium-ma0
|
||||||
|
margin 0 !important
|
||||||
|
|
||||||
|
/* small screens */
|
||||||
|
/* ------------- */
|
||||||
|
|
||||||
|
@media (min-width: (tiny + 1)) and (max-width: small)
|
||||||
|
|
||||||
|
/* layouts for small screens */
|
||||||
|
.{kna-namespace}small-hidden
|
||||||
|
display none !important
|
||||||
|
|
||||||
|
.{kna-namespace}small-visible
|
||||||
|
display block !important
|
||||||
|
|
||||||
|
.{kna-namespace}small-no-float
|
||||||
|
float none
|
||||||
|
|
||||||
|
.{kna-namespace}small-inbl
|
||||||
|
display inline-block
|
||||||
|
float none
|
||||||
|
vertical-align top
|
||||||
|
|
||||||
|
/* widths for small screens */
|
||||||
|
.{kna-namespace}small-w25
|
||||||
|
width 25% !important
|
||||||
|
|
||||||
|
.{kna-namespace}small-w33
|
||||||
|
width 33.333333% !important
|
||||||
|
|
||||||
|
.{kna-namespace}small-w50
|
||||||
|
width 50% !important
|
||||||
|
|
||||||
|
.{kna-namespace}small-w66
|
||||||
|
width 66.666666% !important
|
||||||
|
|
||||||
|
.{kna-namespace}small-w75
|
||||||
|
width 75% !important
|
||||||
|
|
||||||
|
.{kna-namespace}small-w100
|
||||||
|
.{kna-namespace}small-wauto
|
||||||
|
display block !important
|
||||||
|
float none !important
|
||||||
|
clear none !important
|
||||||
|
width auto !important
|
||||||
|
margin-left 0 !important
|
||||||
|
margin-right 0 !important
|
||||||
|
border 0
|
||||||
|
|
||||||
|
/* margins for small screens */
|
||||||
|
.{kna-namespace}small-man
|
||||||
|
.{kna-namespace}small-ma0
|
||||||
|
margin 0 !important
|
||||||
|
|
||||||
|
.{kna-namespace}small-pan
|
||||||
|
.{kna-namespace}small-pa0
|
||||||
|
padding 0 !important
|
||||||
|
|
||||||
|
/* tiny screens */
|
||||||
|
/* ------------ */
|
||||||
|
|
||||||
|
@media (max-width: tiny)
|
||||||
|
|
||||||
|
/* quick small resolution reset */
|
||||||
|
.{kna-namespace}mod
|
||||||
|
.{kna-namespace}col
|
||||||
|
fieldset
|
||||||
|
display block !important
|
||||||
|
float none !important
|
||||||
|
clear none !important
|
||||||
|
width auto !important
|
||||||
|
margin-left 0 !important
|
||||||
|
margin-right 0 !important
|
||||||
|
border 0
|
||||||
|
|
||||||
|
.{kna-namespace}flex-container
|
||||||
|
flex-direction column
|
||||||
|
|
||||||
|
/* layouts for tiny screens */
|
||||||
|
.{kna-namespace}tiny-hidden
|
||||||
|
display none !important
|
||||||
|
|
||||||
|
.{kna-namespace}tiny-visible
|
||||||
|
display block !important
|
||||||
|
|
||||||
|
.{kna-namespace}tiny-no-float
|
||||||
|
float none
|
||||||
|
|
||||||
|
.{kna-namespace}tiny-inbl
|
||||||
|
display inline-block
|
||||||
|
float none
|
||||||
|
vertical-align top
|
||||||
|
|
||||||
|
/* widths for tiny screens */
|
||||||
|
.{kna-namespace}tiny-w25
|
||||||
|
width 25% !important
|
||||||
|
|
||||||
|
.{kna-namespace}tiny-w33
|
||||||
|
width 33.333333% !important
|
||||||
|
|
||||||
|
.{kna-namespace}tiny-w50
|
||||||
|
width 50% !important
|
||||||
|
|
||||||
|
.{kna-namespace}tiny-w66
|
||||||
|
width 66.666666% !important
|
||||||
|
|
||||||
|
.{kna-namespace}tiny-w75
|
||||||
|
width 75% !important
|
||||||
|
|
||||||
|
.{kna-namespace}tiny-w100
|
||||||
|
.{kna-namespace}tiny-wauto
|
||||||
|
display block !important
|
||||||
|
float none !important
|
||||||
|
clear none !important
|
||||||
|
width auto !important
|
||||||
|
margin-left 0 !important
|
||||||
|
margin-right 0 !important
|
||||||
|
border 0
|
||||||
|
|
||||||
|
/* margins for tiny screens */
|
||||||
|
.{kna-namespace}tiny-man
|
||||||
|
.{kna-namespace}tiny-ma0
|
||||||
|
margin 0 !important
|
||||||
|
|
||||||
|
.{kna-namespace}tiny-pan
|
||||||
|
.{kna-namespace}tiny-pa0
|
||||||
|
padding 0 !important
|
||||||
419
styl/vendor/_normalize.styl
vendored
Normal file
419
styl/vendor/_normalize.styl
vendored
Normal file
@ -0,0 +1,419 @@
|
|||||||
|
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the default font family in all browsers (opinionated).
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in IE and iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: sans-serif; /* 1 */
|
||||||
|
-ms-text-size-adjust: 100%; /* 2 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in all browsers (opinionated).
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* HTML5 display definitions
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||||
|
* 2. Add the correct display in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
details, /* 1 */
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
main, /* 2 */
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
section,
|
||||||
|
summary { /* 1 */
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
progress,
|
||||||
|
video {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in iOS 4-7.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10-.
|
||||||
|
* 1. Add the correct display in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template, /* 1 */
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the gray background on active links in IE 10.
|
||||||
|
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent; /* 1 */
|
||||||
|
-webkit-text-decoration-skip: objects; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the outline on focused links when they are also active or hovered
|
||||||
|
* in all browsers (opinionated).
|
||||||
|
*/
|
||||||
|
|
||||||
|
a:active,
|
||||||
|
a:hover {
|
||||||
|
outline-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the bottom border in Firefox 39-.
|
||||||
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none; /* 1 */
|
||||||
|
text-decoration: underline; /* 2 */
|
||||||
|
text-decoration: underline dotted; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font style in Android 4.3-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
dfn {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct background and color in IE 9-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background-color: #ff0;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
* all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images inside links in IE 10-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hide the overflow in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
pre,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct margin in IE 8.
|
||||||
|
*/
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 1em 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in Firefox.
|
||||||
|
* 2. Show the overflow in Edge and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; /* 1 */
|
||||||
|
height: 0; /* 1 */
|
||||||
|
overflow: visible; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change font properties to `inherit` in all browsers (opinionated).
|
||||||
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font: inherit; /* 1 */
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the font weight unset by the previous rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
optgroup {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in IE.
|
||||||
|
* 1. Show the overflow in Edge.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input { /* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select { /* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||||
|
* controls in Android 4.
|
||||||
|
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
html [type="button"], /* 1 */
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner border and padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the focus styles unset by the previous rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button:-moz-focusring,
|
||||||
|
[type="button"]:-moz-focusring,
|
||||||
|
[type="reset"]:-moz-focusring,
|
||||||
|
[type="submit"]:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Change the border, margin, and padding in all browsers (opinionated).
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: 1px solid #c0c0c0;
|
||||||
|
margin: 0 2px;
|
||||||
|
padding: 0.35em 0.625em 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
* `fieldset` elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
display: table; /* 1 */
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
padding: 0; /* 3 */
|
||||||
|
white-space: normal; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in IE 10-.
|
||||||
|
* 2. Remove the padding in IE 10-.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
* 2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
outline-offset: -2px; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-cancel-button,
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the text style of placeholders in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-input-placeholder {
|
||||||
|
color: inherit;
|
||||||
|
opacity: 0.54;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user