create folder and files in rep styl
This commit is contained in:
Arnaud CARIOU
parent
b33501b2b7
commit
7a8701c929
17 changed files with 2030 additions and 0 deletions
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 a new issue