Restauration du $ avant les variables pour des raisons de compatibilité
This commit is contained in:
Arnaud CARIOU
parent
7e97249bae
commit
2aa7f8cb9d
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"brackets": false,
|
||||
"colons": 'always',
|
||||
"commentSpace": false,
|
||||
"depthLimit": 4,
|
||||
"exclude": ["node_modules/**/*"],
|
||||
"globalDupe": true,
|
||||
"groupOutputByFile": true,
|
||||
"namingConvention": "lowercase-dash",
|
||||
"noImportant": false,
|
||||
"placeholders": "always",
|
||||
"prefixVarsWithDollar": "always",
|
||||
"quotePref": false,
|
||||
"reporterOptions": {
|
||||
"columns": ["lineData", "severity", "description", "rule"],
|
||||
"columnSplitter": " ",
|
||||
"showHeaders": false,
|
||||
"truncate": true
|
||||
}
|
||||
}
|
||||
|
|
@ -268,7 +268,7 @@ details,
|
|||
figure {
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.5;
|
||||
line-height: line-height;
|
||||
}
|
||||
h1 .h1-like {
|
||||
font-size: 3.2rem;
|
||||
|
|
@ -443,9 +443,9 @@ code {
|
|||
}
|
||||
pre code {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
mark {
|
||||
padding: 2px 4px;
|
||||
|
|
@ -466,7 +466,7 @@ blockquote {
|
|||
min-height: 2em;
|
||||
}
|
||||
blockquote::before {
|
||||
content: "\201C";
|
||||
content: '\201C';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
@ -488,11 +488,11 @@ q {
|
|||
font-style: normal;
|
||||
}
|
||||
q,
|
||||
.q {
|
||||
.kna-namespaceq {
|
||||
quotes: "“\00a0" "\00a0”";
|
||||
}
|
||||
q:lang(fr),
|
||||
.q:lang(fr) {
|
||||
.kna-namespaceq:lang(fr) {
|
||||
quotes: "«\00a0" "\00a0»";
|
||||
}
|
||||
hr {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
|
||||
// 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
|
||||
$tiny = 543px // or 'em' if you prefer, of course
|
||||
$small = 767px
|
||||
$medium = 991px
|
||||
$large = 1199px
|
||||
$extra-large = 1439px
|
||||
|
|
|
|||
|
|
@ -1,27 +1,27 @@
|
|||
// Additionnal "utility" breakpoints aliases
|
||||
// ex. @include respond-to("medium-up") {...}
|
||||
breakpoint(bp)
|
||||
if bp == 'tiny'
|
||||
return '(max-width: %s)' % tiny
|
||||
else if bp == 'small'
|
||||
return '(max-width: %s)' % small
|
||||
else if bp == 'medium'
|
||||
return '(max-width: %s)' % medium
|
||||
else if bp == 'large'
|
||||
return '(max-width: %s)' % large
|
||||
else if bp == 'extra-large'
|
||||
return '(max-width: %s)' % extra-large
|
||||
else if bp == 'tiny-up'
|
||||
return '(min-width: %s + 1)' % tiny
|
||||
else if bp == 'small-up'
|
||||
return '(min-width: %s + 1)' % small
|
||||
else if bp == 'medium-up'
|
||||
return '(min-width: %s + 1)' % medium
|
||||
else if bp == 'large-up'
|
||||
return '(min-width: %s + 1)' % large
|
||||
else if bp == 'extra-large-up'
|
||||
return '(min-width: %s + 1)' % extra-large
|
||||
else if bp == 'retina'
|
||||
breakpoint($bp)
|
||||
if $bp == 'tiny'
|
||||
return '(max-width: %s)' % $tiny
|
||||
else if $bp == 'small'
|
||||
return '(max-width: %s)' % $small
|
||||
else if $bp == 'medium'
|
||||
return '(max-width: %s)' % $medium
|
||||
else if $bp == 'large'
|
||||
return '(max-width: %s)' % $large
|
||||
else if $bp == 'extra-large'
|
||||
return '(max-width: %s)' % $extra-large
|
||||
else if $bp == 'tiny-up'
|
||||
return '(min-width: %s + 1)' % $tiny
|
||||
else if $bp == 'small-up'
|
||||
return '(min-width: %s + 1)' % $small
|
||||
else if $bp == 'medium-up'
|
||||
return '(min-width: %s + 1)' % $medium
|
||||
else if $bp == 'large-up'
|
||||
return '(min-width: %s + 1)' % $large
|
||||
else if $bp == 'extra-large-up'
|
||||
return '(min-width: %s + 1)' % $extra-large
|
||||
else if $bp == 'retina'
|
||||
return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -1,50 +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"
|
||||
$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
|
||||
$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
|
||||
$color1 = #000
|
||||
$color2 = #fff
|
||||
$color3 = #333
|
||||
$color4 = #000
|
||||
$color5 = #6FA939
|
||||
|
||||
// colors used in project
|
||||
base-color = color1
|
||||
link-color = color3
|
||||
base-background = color2
|
||||
$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
|
||||
$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
|
||||
$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;
|
||||
$kna-namespace = null;
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
@import '../vendor/flexbox-stylus/stylus/flexbox.styl'
|
||||
/* Doc : http://grillade.knacss.com */
|
||||
// gutter values for grid layouts. Unit can be: %, px, em, rem
|
||||
grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem }
|
||||
$grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem }
|
||||
// IEfixing, see
|
||||
// https://github.com/alsacreations/KNACSS/issues/133;
|
||||
iefix = 0.01px
|
||||
$iefix = 0.01px
|
||||
|
||||
@media (min-width: tiny + 1)
|
||||
@media (min-width: $tiny + 1)
|
||||
[class*=" grid-"]
|
||||
[class^="grid-"]
|
||||
flexbox(flex)
|
||||
|
|
@ -22,23 +22,23 @@ iefix = 0.01px
|
|||
|
||||
// Multi-line grid constructor
|
||||
// example : .grid-perso { @include grid(12, 3rem); }
|
||||
grid(grid-number = 1, own-gutter = 0)
|
||||
grid($grid-number = 1, $own-gutter = 0)
|
||||
& > *
|
||||
width 'calc(100% / %s - %s)' % (grid-number iefix)
|
||||
for key, size in grid-gutters
|
||||
&.has-gutter{key}
|
||||
margin-right -(size / 2)
|
||||
margin-left -(size / 2)
|
||||
width 'calc(100% / %s - %s)' % ($grid-number $iefix)
|
||||
for $key, $size in $grid-gutters
|
||||
&.has-gutter{$key}
|
||||
margin-right -($size / 2)
|
||||
margin-left -($size / 2)
|
||||
& > *
|
||||
width 'calc(100% / %s - %s - %s)' % (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)
|
||||
width 'calc(100% / %s - %s - %s)' % ($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)
|
||||
@media (min-width: $tiny + 1)
|
||||
.grid
|
||||
.grid--reverse
|
||||
flexbox(flex)
|
||||
|
|
@ -47,16 +47,16 @@ grid(grid-number = 1, own-gutter = 0)
|
|||
box-sizing border-box
|
||||
min-width 0
|
||||
min-height 0
|
||||
for key, size in grid-gutters
|
||||
&.has-gutter{key} > * + *
|
||||
margin-left 'calc(%s - %s)' % (size iefix)
|
||||
for $key, $size in $grid-gutters
|
||||
&.has-gutter{$key} > * + *
|
||||
margin-left 'calc(%s - %s)' % ($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)
|
||||
@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
|
||||
|
|
@ -77,23 +77,23 @@ grid(grid-number = 1, own-gutter = 0)
|
|||
[class*="grid-"][class*="--reverse"]
|
||||
flex-direction(row-reverse)
|
||||
|
||||
@media (min-width: tiny + 1)
|
||||
flowToDivid = {'full': 1, 'one-half': 2, 'one-third': 3, 'one-quarter': 4, 'one-fifth': 5, 'one-sixth': 6, 'two-thirds': 3 * 2, 'three-quarters': 4 * 3, 'five-sixths': 6 * 5}
|
||||
for flow, divider in flowToDivid
|
||||
.{flow}
|
||||
@media (min-width: $tiny + 1)
|
||||
$flow-to-divid = {'full': 1, 'one-half': 2, 'one-third': 3, 'one-quarter': 4, 'one-fifth': 5, 'one-sixth': 6, 'two-thirds': 3 * 2, 'three-quarters': 4 * 3, 'five-sixths': 6 * 5}
|
||||
for $flow, $divider in $flow-to-divid
|
||||
.{$flow}
|
||||
flex(0 0 auto)
|
||||
width 'calc(100% / %s - %s)' % (divider iefix)
|
||||
for key, size in grid-gutters
|
||||
.has-gutter{key} .{flow}
|
||||
width 'calc(100% / %s - %s - %s)' % (divider size iefix)
|
||||
width 'calc(100% / %s - %s)' % ($divider $iefix)
|
||||
for $key, $size in $grid-gutters
|
||||
.has-gutter{$key} .{$flow}
|
||||
width 'calc(100% / %s - %s - %s)' % ($divider $size $iefix)
|
||||
|
||||
/* Responsive Small Breakpoint */
|
||||
@media (min-width: tiny + 1) and (max-width: medium)
|
||||
for i in 1..4
|
||||
index = '-small-%s' % i
|
||||
[class*=\"{index}\"]
|
||||
@media (min-width: $tiny + 1) and (max-width: $medium)
|
||||
for $i in 1..4
|
||||
$index = '-small-%s' % $i
|
||||
[class*=\"{$index}\"]
|
||||
& > *
|
||||
width: 'calc(100% / %s - %s)' % (i iefix)
|
||||
for key, size in grid-gutters
|
||||
&.has-gutter{key} > *
|
||||
width: 'calc(100% / %s - %s - %s)' % (i size iefix)
|
||||
width: 'calc(100% / %s - %s)' % ($i $iefix)
|
||||
for $key, $size in $grid-gutters
|
||||
&.has-gutter{$key} > *
|
||||
width: 'calc(100% / %s - %s - %s)' % ($i $size $iefix)
|
||||
|
|
|
|||
|
|
@ -38,21 +38,21 @@
|
|||
@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
|
||||
@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
|
||||
@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
|
||||
@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
|
||||
@import 'grids/_grillade.styl' // grids
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
|
|
@ -61,4 +61,4 @@
|
|||
|
||||
/* Here should go your own CSS styles */
|
||||
// You can also link them with a Sass @import
|
||||
// @import "my-styles";
|
||||
// @import "my-styles"
|
||||
|
|
|
|||
|
|
@ -17,22 +17,22 @@ html
|
|||
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
|
||||
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
|
||||
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) )
|
||||
if $link-hover-color is defined // && ( null == list( (link-color, null, false), link-hover-color) )
|
||||
&:focus,
|
||||
&:hover,
|
||||
&:active
|
||||
color link-hover-color
|
||||
color $link-hover-color
|
||||
|
||||
ul
|
||||
ol
|
||||
|
|
@ -48,7 +48,7 @@ figure
|
|||
|
||||
/* font-sizing for content */
|
||||
p
|
||||
.{kna-namespace}p-like
|
||||
.{$kna-namespace}p-like
|
||||
ul
|
||||
ol
|
||||
dl
|
||||
|
|
@ -65,42 +65,42 @@ figure
|
|||
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
|
||||
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
|
||||
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
|
||||
h3 .{$kna-namespace}h3-like
|
||||
font-size $h3-size
|
||||
|
||||
h4 .{kna-namespace}h4-like
|
||||
font-size h4-size
|
||||
h4 .{$kna-namespace}h4-like
|
||||
font-size $h4-size
|
||||
|
||||
h5 .{kna-namespace}h5-like
|
||||
font-size h5-size
|
||||
h5 .{$kna-namespace}h5-like
|
||||
font-size $h5-size
|
||||
|
||||
h6 .{kna-namespace}h6-like
|
||||
font-size h6-size
|
||||
h6 .{$kna-namespace}h6-like
|
||||
font-size $h6-size
|
||||
|
||||
/* alternate font-sizing */
|
||||
.{kna-namespace}smaller
|
||||
.{$kna-namespace}smaller
|
||||
font-size 0.6em
|
||||
|
||||
.{kna-namespace}small
|
||||
.{$kna-namespace}small
|
||||
font-size 0.8em
|
||||
|
||||
.{kna-namespace}big
|
||||
.{$kna-namespace}big
|
||||
font-size 1.2em
|
||||
|
||||
.{kna-namespace}bigger
|
||||
.{$kna-namespace}bigger
|
||||
font-size: 1.5em
|
||||
|
||||
.{kna-namespace}biggest
|
||||
.{$kna-namespace}biggest
|
||||
font-size 2em
|
||||
|
||||
code
|
||||
|
|
@ -110,11 +110,11 @@ kbd
|
|||
/* IE fix */
|
||||
white-space pre-line
|
||||
white-space pre-wrap
|
||||
font-family font-stack-monospace
|
||||
font-family $font-stack-monospace
|
||||
line-height normal
|
||||
|
||||
em
|
||||
.{kna-namespace}italic
|
||||
.{$kna-namespace}italic
|
||||
address
|
||||
cite
|
||||
i
|
||||
|
|
@ -123,30 +123,30 @@ var
|
|||
|
||||
/* avoid top margins on first content element */
|
||||
p
|
||||
.{kna-namespace}p-like
|
||||
.{$kna-namespace}p-like
|
||||
ul
|
||||
ol
|
||||
dl
|
||||
blockquote
|
||||
pre
|
||||
h1
|
||||
.{kna-namespace}h1-like
|
||||
.{$kna-namespace}h1-like
|
||||
h2
|
||||
.{kna-namespace}h2-like
|
||||
.{$kna-namespace}h2-like
|
||||
h3
|
||||
.{kna-namespace}h3-like
|
||||
.{$kna-namespace}h3-like
|
||||
h4
|
||||
.{kna-namespace}h4-like
|
||||
.{$kna-namespace}h4-like
|
||||
h5
|
||||
.{kna-namespace}h5-like
|
||||
.{$kna-namespace}h5-like
|
||||
h6
|
||||
.{kna-namespace}h6-like
|
||||
.{$kna-namespace}h6-like
|
||||
&:first-child
|
||||
margin-top 0
|
||||
|
||||
/* avoid margins on nested elements */
|
||||
li p
|
||||
li .{kna-namespace}p-like
|
||||
li .{$kna-namespace}p-like
|
||||
li ul
|
||||
li ol
|
||||
margin-top 0
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
|
||||
/* buttons */
|
||||
.{kna-namespace}btn
|
||||
.{$kna-namespace}btn
|
||||
display inline-block
|
||||
|
||||
/* forms items */
|
||||
|
|
@ -19,7 +19,7 @@ input
|
|||
button
|
||||
select
|
||||
label
|
||||
.{kna-namespace}btn
|
||||
.{$kna-namespace}btn
|
||||
font-family inherit
|
||||
font-size inherit
|
||||
|
||||
|
|
@ -28,7 +28,7 @@ input
|
|||
optgroup
|
||||
select
|
||||
textarea
|
||||
color base-color
|
||||
color $base-color
|
||||
|
||||
label
|
||||
vertical-align middle
|
||||
|
|
@ -66,7 +66,7 @@ input:-moz-placeholder
|
|||
textarea:-moz-placeholder
|
||||
color #777
|
||||
|
||||
.{kna-namespace}btn
|
||||
.{$kna-namespace}btn
|
||||
input[type="button"]
|
||||
button
|
||||
&:focus
|
||||
|
|
@ -82,7 +82,7 @@ button
|
|||
input[type="button"]
|
||||
input[type="submit"]
|
||||
input[type="reset"]
|
||||
&.{kna-namespace}unstyled
|
||||
&.{$kna-namespace}unstyled
|
||||
padding 0
|
||||
border none
|
||||
line-height 1
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
/* ----------------------------- */
|
||||
|
||||
/* styling skip links */
|
||||
.{kna-namespace}skip-links
|
||||
.{$kna-namespace}skip-links
|
||||
position absolute
|
||||
|
||||
& a
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
clip auto
|
||||
|
||||
// hyphens on tiny screens
|
||||
@media (max-width: tiny)
|
||||
@media (max-width: $tiny)
|
||||
/* you shall not pass */
|
||||
div
|
||||
textarea
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
hyphens auto
|
||||
|
||||
// use .no-wrapping to disallow hyphens on tiny screens
|
||||
@media (max-width: tiny)
|
||||
@media (max-width: $tiny)
|
||||
.no-wrapping
|
||||
word-wrap normal
|
||||
hyphens manual
|
||||
|
|
|
|||
|
|
@ -15,34 +15,34 @@
|
|||
font-size 12pt
|
||||
|
||||
p
|
||||
.{kna-namespace}p-like
|
||||
.{$kna-namespace}p-like
|
||||
h1
|
||||
.{kna-namespace}h1-like
|
||||
.{$kna-namespace}h1-like
|
||||
h2
|
||||
.{kna-namespace}h2-like
|
||||
.{$kna-namespace}h2-like
|
||||
h3
|
||||
.{kna-namespace}h3-like
|
||||
.{$kna-namespace}h3-like
|
||||
h4
|
||||
.{kna-namespace}h4-like
|
||||
.{$kna-namespace}h4-like
|
||||
h5
|
||||
.{kna-namespace}h5-like
|
||||
.{$kna-namespace}h5-like
|
||||
h6
|
||||
.{kna-namespace}h6-like
|
||||
.{$kna-namespace}h6-like
|
||||
blockquote
|
||||
ul
|
||||
ol
|
||||
color #000
|
||||
margin auto
|
||||
|
||||
.{kna-namespace}print
|
||||
.{$kna-namespace}print
|
||||
display block
|
||||
|
||||
.{kna-namespace}no-print
|
||||
.{$kna-namespace}no-print
|
||||
display none
|
||||
|
||||
/* no orphans, no widows */
|
||||
p
|
||||
.{kna-namespace}p-like
|
||||
.{$kna-namespace}p-like
|
||||
blockquote
|
||||
orphans 3
|
||||
widows 3
|
||||
|
|
@ -61,11 +61,11 @@
|
|||
|
||||
/* no breaks after these elements */
|
||||
h1
|
||||
.{kna-namespace}h1-like
|
||||
.{$kna-namespace}h1-like
|
||||
h2
|
||||
.{kna-namespace}h2-like
|
||||
.{$kna-namespace}h2-like
|
||||
h3
|
||||
.{kna-namespace}h3-like
|
||||
.{$kna-namespace}h3-like
|
||||
caption
|
||||
page-break-after avoid
|
||||
|
||||
|
|
|
|||
|
|
@ -19,9 +19,9 @@ code
|
|||
|
||||
pre code
|
||||
padding 0
|
||||
border-radius 0
|
||||
background none
|
||||
color inherit
|
||||
border-radius 0
|
||||
|
||||
mark
|
||||
padding 2px 4px
|
||||
|
|
@ -42,7 +42,7 @@ blockquote
|
|||
min-height 2em
|
||||
|
||||
blockquote::before
|
||||
content "\201C"
|
||||
content '\201C'
|
||||
position absolute
|
||||
left 0
|
||||
top 0
|
||||
|
|
@ -82,11 +82,11 @@ hr
|
|||
|
||||
/* tables */
|
||||
table
|
||||
.{kna-namespace}table
|
||||
.{$kna-namespace}table
|
||||
border 1px solid #ccc
|
||||
|
||||
caption
|
||||
padding small-value
|
||||
padding $small-value
|
||||
color #555
|
||||
font-style italic
|
||||
|
||||
|
|
|
|||
|
|
@ -3,23 +3,23 @@
|
|||
/* ----------------------------- */
|
||||
|
||||
table
|
||||
.{kna-namespace}table
|
||||
.{$kna-namespace}table
|
||||
width 100%
|
||||
max-width 100%
|
||||
table-layout fixed
|
||||
border-collapse collapse
|
||||
vertical-align top
|
||||
margin-bottom medium-value
|
||||
margin-bottom $medium-value
|
||||
|
||||
.{kna-namespace}table
|
||||
.{$kna-namespace}table
|
||||
display table
|
||||
|
||||
#recaptcha_table
|
||||
.{kna-namespace}table-auto
|
||||
.{$kna-namespace}table-auto
|
||||
table-layout auto
|
||||
|
||||
td
|
||||
th
|
||||
vertical-align top
|
||||
min-width medium-value
|
||||
min-width $medium-value
|
||||
cursor default
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* Autogrid object */
|
||||
/* see http://codepen.io/raphaelgoetter/pen/KMgBJd */
|
||||
@media (min-width: (tiny + 1))
|
||||
@media (min-width: ($tiny + 1))
|
||||
[class^="autogrid"]
|
||||
[class*=" autogrid"]
|
||||
display flex
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
min-width 0 /* avoid min-width:auto */
|
||||
|
||||
/* Autogrid variants */
|
||||
@media (min-width: (tiny + 1))
|
||||
@media (min-width: ($tiny + 1))
|
||||
.has-gutter > *:not(:first-child)
|
||||
margin-left 1rem
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/* Media object */
|
||||
/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
|
||||
@media (min-width: (tiny + 1))
|
||||
@media (min-width: ($tiny + 1))
|
||||
.o-media
|
||||
display flex
|
||||
align-items flex-start
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
min-width 0 /* avoid min-width:auto */
|
||||
|
||||
/* Media variants */
|
||||
@media (min-width: (tiny + 1))
|
||||
@media (min-width: ($tiny + 1))
|
||||
.o-media--reverse
|
||||
flex-direction row-reverse
|
||||
|
||||
|
|
|
|||
|
|
@ -38,241 +38,241 @@ ul
|
|||
/* ------------- */
|
||||
|
||||
/* blocks widths (percentage and pixels) */
|
||||
.{kna-namespace}w10
|
||||
.{$kna-namespace}w10
|
||||
width 10%
|
||||
|
||||
.{kna-namespace}w20
|
||||
.{$kna-namespace}w20
|
||||
width 20%
|
||||
|
||||
.{kna-namespace}w25
|
||||
.{$kna-namespace}w25
|
||||
width 25%
|
||||
|
||||
.{kna-namespace}w30
|
||||
.{$kna-namespace}w30
|
||||
width 30%
|
||||
|
||||
.{kna-namespace}w33
|
||||
.{$kna-namespace}w33
|
||||
width 33.3333%
|
||||
|
||||
.{kna-namespace}w40
|
||||
.{$kna-namespace}w40
|
||||
width 40%
|
||||
|
||||
.{kna-namespace}w50
|
||||
.{$kna-namespace}w50
|
||||
width 50%
|
||||
|
||||
.{kna-namespace}w60
|
||||
.{$kna-namespace}w60
|
||||
width 60%
|
||||
|
||||
.{kna-namespace}w66
|
||||
.{$kna-namespace}w66
|
||||
width 66.6666%
|
||||
|
||||
.{kna-namespace}w70
|
||||
.{$kna-namespace}w70
|
||||
width 70%
|
||||
|
||||
.{kna-namespace}w75
|
||||
.{$kna-namespace}w75
|
||||
width 75%
|
||||
|
||||
.{kna-namespace}w80
|
||||
.{$kna-namespace}w80
|
||||
width 80%
|
||||
|
||||
.{kna-namespace}w90
|
||||
.{$kna-namespace}w90
|
||||
width 90%
|
||||
|
||||
.{kna-namespace}w100
|
||||
.{$kna-namespace}w100
|
||||
width 100%
|
||||
|
||||
.{kna-namespace}w50p
|
||||
.{$kna-namespace}w50p
|
||||
width 50px
|
||||
|
||||
.{kna-namespace}w100p
|
||||
.{$kna-namespace}w100p
|
||||
width 100px
|
||||
|
||||
.{kna-namespace}w150p
|
||||
.{$kna-namespace}w150p
|
||||
width 150px
|
||||
|
||||
.{kna-namespace}w200p
|
||||
.{$kna-namespace}w200p
|
||||
width 200px
|
||||
|
||||
.{kna-namespace}w300p
|
||||
.{$kna-namespace}w300p
|
||||
width 300px
|
||||
|
||||
@media (min-width: 401px)
|
||||
.{kna-namespace}w400p
|
||||
.{$kna-namespace}w400p
|
||||
width 400px
|
||||
|
||||
.{kna-namespace}w500p
|
||||
.{$kna-namespace}w500p
|
||||
width 500px
|
||||
|
||||
.{kna-namespace}w600p
|
||||
.{$kna-namespace}w600p
|
||||
width 600px
|
||||
|
||||
@media (min-width: 701px)
|
||||
|
||||
.{kna-namespace}w700p
|
||||
.{$kna-namespace}w700p
|
||||
width 700px
|
||||
|
||||
.{kna-namespace}w800p
|
||||
.{$kna-namespace}w800p
|
||||
width 800px
|
||||
|
||||
@media (min-width: 961px)
|
||||
.{kna-namespace}w960p
|
||||
.{$kna-namespace}w960p
|
||||
width 960px
|
||||
|
||||
.{kna-namespace}mw960p
|
||||
.{$kna-namespace}mw960p
|
||||
max-width 960px
|
||||
|
||||
.{kna-namespace}w1140p
|
||||
.{$kna-namespace}w1140p
|
||||
width 1140px
|
||||
|
||||
.{kna-namespace}mw1140p
|
||||
.{$kna-namespace}mw1140p
|
||||
max-width 1140px
|
||||
|
||||
.{kna-namespace}wauto
|
||||
.{$kna-namespace}wauto
|
||||
width auto
|
||||
|
||||
/* Spacing Helpers */
|
||||
/* --------------- */
|
||||
|
||||
.{kna-namespace}man
|
||||
.{kna-namespace}ma0
|
||||
.{$kna-namespace}man
|
||||
.{$kna-namespace}ma0
|
||||
margin 0
|
||||
|
||||
.{kna-namespace}pan
|
||||
.{kna-namespace}pa0
|
||||
.{$kna-namespace}pan
|
||||
.{$kna-namespace}pa0
|
||||
padding 0
|
||||
|
||||
.{kna-namespace}mas
|
||||
margin small-value
|
||||
.{$kna-namespace}mas
|
||||
margin $small-value
|
||||
|
||||
.{kna-namespace}mam
|
||||
margin medium-value
|
||||
.{$kna-namespace}mam
|
||||
margin $medium-value
|
||||
|
||||
.{kna-namespace}mal
|
||||
margin large-value
|
||||
.{$kna-namespace}mal
|
||||
margin $large-value
|
||||
|
||||
.{kna-namespace}pas
|
||||
padding small-value
|
||||
.{$kna-namespace}pas
|
||||
padding $small-value
|
||||
|
||||
.{kna-namespace}pam
|
||||
padding medium-value
|
||||
.{$kna-namespace}pam
|
||||
padding $medium-value
|
||||
|
||||
.{kna-namespace}pal
|
||||
padding large-value
|
||||
.{$kna-namespace}pal
|
||||
padding $large-value
|
||||
|
||||
.{kna-namespace}mtn
|
||||
.{kna-namespace}mt0
|
||||
.{$kna-namespace}mtn
|
||||
.{$kna-namespace}mt0
|
||||
margin-top 0
|
||||
|
||||
.{kna-namespace}mts
|
||||
margin-top small-value
|
||||
.{$kna-namespace}mts
|
||||
margin-top $small-value
|
||||
|
||||
.{kna-namespace}mtm
|
||||
margin-top medium-value
|
||||
.{$kna-namespace}mtm
|
||||
margin-top $medium-value
|
||||
|
||||
.{kna-namespace}mtl
|
||||
margin-top large-value
|
||||
.{$kna-namespace}mtl
|
||||
margin-top $large-value
|
||||
|
||||
.{kna-namespace}mrn
|
||||
.{kna-namespace}mr0
|
||||
.{$kna-namespace}mrn
|
||||
.{$kna-namespace}mr0
|
||||
margin-right 0
|
||||
|
||||
.{kna-namespace}mrs
|
||||
margin-right small-value
|
||||
.{$kna-namespace}mrs
|
||||
margin-right $small-value
|
||||
|
||||
.{kna-namespace}mrm
|
||||
margin-right medium-value
|
||||
.{$kna-namespace}mrm
|
||||
margin-right $medium-value
|
||||
|
||||
.{kna-namespace}mrl
|
||||
margin-right large-value
|
||||
.{$kna-namespace}mrl
|
||||
margin-right $large-value
|
||||
|
||||
.{kna-namespace}mbn
|
||||
.{kna-namespace}mb0
|
||||
.{$kna-namespace}mbn
|
||||
.{$kna-namespace}mb0
|
||||
margin-bottom 0
|
||||
|
||||
.{kna-namespace}mbs
|
||||
margin-bottom small-value
|
||||
.{$kna-namespace}mbs
|
||||
margin-bottom $small-value
|
||||
|
||||
.{kna-namespace}mbm
|
||||
margin-bottom medium-value
|
||||
.{$kna-namespace}mbm
|
||||
margin-bottom $medium-value
|
||||
|
||||
.{kna-namespace}mbl
|
||||
margin-bottom large-value
|
||||
.{$kna-namespace}mbl
|
||||
margin-bottom $large-value
|
||||
|
||||
.{kna-namespace}mln
|
||||
.{kna-namespace}ml0
|
||||
.{$kna-namespace}mln
|
||||
.{$kna-namespace}ml0
|
||||
margin-left 0
|
||||
|
||||
.{kna-namespace}mls
|
||||
margin-left small-value
|
||||
.{$kna-namespace}mls
|
||||
margin-left $small-value
|
||||
|
||||
.{kna-namespace}mlm
|
||||
margin-left medium-value
|
||||
.{$kna-namespace}mlm
|
||||
margin-left $medium-value
|
||||
|
||||
.{kna-namespace}mll
|
||||
margin-left large-value
|
||||
.{$kna-namespace}mll
|
||||
margin-left $large-value
|
||||
|
||||
.{kna-namespace}mauto
|
||||
.{$kna-namespace}mauto
|
||||
margin auto
|
||||
|
||||
.{kna-namespace}mtauto
|
||||
.{$kna-namespace}mtauto
|
||||
margin-top auto
|
||||
|
||||
.{kna-namespace}mrauto
|
||||
.{$kna-namespace}mrauto
|
||||
margin-right auto
|
||||
|
||||
.{kna-namespace}mbauto
|
||||
.{$kna-namespace}mbauto
|
||||
margin-bottom auto
|
||||
|
||||
.{kna-namespace}mlauto
|
||||
.{$kna-namespace}mlauto
|
||||
margin-left: auto
|
||||
|
||||
.{kna-namespace}ptn
|
||||
.{kna-namespace}pt0
|
||||
.{$kna-namespace}ptn
|
||||
.{$kna-namespace}pt0
|
||||
padding-top 0
|
||||
|
||||
.{kna-namespace}pts
|
||||
padding-top small-value
|
||||
.{$kna-namespace}pts
|
||||
padding-top $small-value
|
||||
|
||||
.{kna-namespace}ptm
|
||||
padding-top medium-value
|
||||
.{$kna-namespace}ptm
|
||||
padding-top $medium-value
|
||||
|
||||
.{kna-namespace}ptl
|
||||
padding-top large-value
|
||||
.{$kna-namespace}ptl
|
||||
padding-top $large-value
|
||||
|
||||
.{kna-namespace}prn
|
||||
.{kna-namespace}pr0
|
||||
.{$kna-namespace}prn
|
||||
.{$kna-namespace}pr0
|
||||
padding-right 0
|
||||
|
||||
.{kna-namespace}prs
|
||||
padding-right small-value
|
||||
.{$kna-namespace}prs
|
||||
padding-right $small-value
|
||||
|
||||
.{kna-namespace}prm
|
||||
padding-right medium-value
|
||||
.{$kna-namespace}prm
|
||||
padding-right $medium-value
|
||||
|
||||
.{kna-namespace}prl
|
||||
padding-right large-value
|
||||
.{$kna-namespace}prl
|
||||
padding-right $large-value
|
||||
|
||||
.{kna-namespace}pbn
|
||||
.{kna-namespace}pb0
|
||||
.{$kna-namespace}pbn
|
||||
.{$kna-namespace}pb0
|
||||
padding-bottom 0
|
||||
|
||||
.{kna-namespace}pbs
|
||||
padding-bottom small-value
|
||||
.{$kna-namespace}pbs
|
||||
padding-bottom $small-value
|
||||
|
||||
.{kna-namespace}pbm
|
||||
padding-bottom medium-value
|
||||
.{$kna-namespace}pbm
|
||||
padding-bottom $medium-value
|
||||
|
||||
.{kna-namespace}pbl
|
||||
padding-bottom large-value
|
||||
.{$kna-namespace}pbl
|
||||
padding-bottom $large-value
|
||||
|
||||
.{kna-namespace}pln
|
||||
.{kna-namespace}pl0
|
||||
.{$kna-namespace}pln
|
||||
.{$kna-namespace}pl0
|
||||
padding-left 0
|
||||
|
||||
.{kna-namespace}pls
|
||||
padding-left small-value
|
||||
.{$kna-namespace}pls
|
||||
padding-left $small-value
|
||||
|
||||
.{kna-namespace}plm
|
||||
padding-left medium-value
|
||||
.{$kna-namespace}plm
|
||||
padding-left $medium-value
|
||||
|
||||
.{kna-namespace}pll
|
||||
padding-left large-value
|
||||
.{$kna-namespace}pll
|
||||
padding-left $large-value
|
||||
|
|
|
|||
|
|
@ -20,45 +20,45 @@
|
|||
border-collapse collapse
|
||||
|
||||
/* simple blocks alignment */
|
||||
.{kna-namespace}left
|
||||
.{$kna-namespace}left
|
||||
margin-right auto
|
||||
|
||||
.{kna-namespace}right
|
||||
.{$kna-namespace}right
|
||||
margin-left auto
|
||||
|
||||
.{kna-namespace}center
|
||||
.{$kna-namespace}center
|
||||
margin-left auto
|
||||
margin-right auto
|
||||
|
||||
/* text and contents alignment */
|
||||
.{kna-namespace}txtleft
|
||||
.{$kna-namespace}txtleft
|
||||
text-align left
|
||||
|
||||
.{kna-namespace}txtright
|
||||
.{$kna-namespace}txtright
|
||||
text-align right
|
||||
|
||||
.{kna-namespace}txtcenter
|
||||
.{$kna-namespace}txtcenter
|
||||
text-align center
|
||||
|
||||
/* floating elements */
|
||||
.{kna-namespace}fl
|
||||
.{$kna-namespace}fl
|
||||
float left
|
||||
|
||||
img.{kna-namespace}fl
|
||||
margin-right small-value
|
||||
img.{$kna-namespace}fl
|
||||
margin-right $small-value
|
||||
|
||||
.{kna-namespace}fr
|
||||
.{$kna-namespace}fr
|
||||
float right
|
||||
|
||||
img.{kna-namespace}fr
|
||||
margin-left small-value
|
||||
img.{$kna-namespace}fr
|
||||
margin-left $small-value
|
||||
|
||||
img.{kna-namespace}fl
|
||||
img.{kna-namespace}fr
|
||||
margin-bottom tiny-value
|
||||
img.{$kna-namespace}fl
|
||||
img.{$kna-namespace}fr
|
||||
margin-bottom $tiny-value
|
||||
|
||||
/* inline-block */
|
||||
.{kna-namespace}inbl
|
||||
.{$kna-namespace}inbl
|
||||
display inline-block
|
||||
vertical-align top
|
||||
|
||||
|
|
@ -66,33 +66,33 @@ img.{kna-namespace}fr
|
|||
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||
*/
|
||||
|
||||
[class*={kna-namespace}"flex-container"]
|
||||
.{kna-namespace}flex-container
|
||||
[class*=\"{$kna-namespace}flex-container\"]
|
||||
.{$kna-namespace}flex-container
|
||||
flexbox(flex)
|
||||
flex-wrap(wrap)
|
||||
|
||||
.{kna-namespace}flex-container-h
|
||||
.{$kna-namespace}flex-container-h
|
||||
flex-direction(row)
|
||||
|
||||
.{kna-namespace}flex-container-v
|
||||
.{$kna-namespace}flex-container-v
|
||||
flex-direction(column)
|
||||
|
||||
.{kna-namespace}flex-item-fluid
|
||||
.{$kna-namespace}flex-item-fluid
|
||||
flex 1
|
||||
min-width 0
|
||||
|
||||
.{kna-namespace}flex-item-first
|
||||
.{kna-namespace}item-first
|
||||
.{$kna-namespace}flex-item-first
|
||||
.{$kna-namespace}item-first
|
||||
order -1
|
||||
|
||||
.{kna-namespace}flex-item-medium
|
||||
.{kna-namespace}item-medium
|
||||
.{$kna-namespace}flex-item-medium
|
||||
.{$kna-namespace}item-medium
|
||||
order 0
|
||||
|
||||
.{kna-namespace}flex-item-last
|
||||
.{kna-namespace}item-last
|
||||
.{$kna-namespace}flex-item-last
|
||||
.{$kna-namespace}item-last
|
||||
order 1
|
||||
|
||||
.{kna-namespace}flex-item-center
|
||||
.{kna-namespace}item-center
|
||||
.{$kna-namespace}flex-item-center
|
||||
.{$kna-namespace}item-center
|
||||
margin auto
|
||||
|
|
|
|||
|
|
@ -5,41 +5,41 @@
|
|||
/* large screens */
|
||||
/* ------------- */
|
||||
|
||||
@media (min-width: (medium + 1))
|
||||
@media (min-width: ($medium + 1))
|
||||
|
||||
/* layouts for large screens */
|
||||
.{kna-namespace}large-hidden
|
||||
.{$kna-namespace}large-hidden
|
||||
display none !important
|
||||
|
||||
.{kna-namespace}large-visible
|
||||
.{$kna-namespace}large-visible
|
||||
display block !important
|
||||
|
||||
.{kna-namespace}large-no-float
|
||||
.{$kna-namespace}large-no-float
|
||||
float none
|
||||
|
||||
.{kna-namespace}large-inbl
|
||||
.{$kna-namespace}large-inbl
|
||||
display inline-block
|
||||
float none
|
||||
vertical-align top
|
||||
|
||||
/* widths for large screens */
|
||||
.{kna-namespace}large-w25
|
||||
.{$kna-namespace}large-w25
|
||||
width 25% !important
|
||||
|
||||
.{kna-namespace}large-w33
|
||||
.{$kna-namespace}large-w33
|
||||
width 33.333333% !important
|
||||
|
||||
.{kna-namespace}large-w50
|
||||
.{$kna-namespace}large-w50
|
||||
width 50% !important
|
||||
|
||||
.{kna-namespace}large-w66
|
||||
.{$kna-namespace}large-w66
|
||||
width 66.666666% !important
|
||||
|
||||
.{kna-namespace}large-w75
|
||||
.{$kna-namespace}large-w75
|
||||
width 75% !important
|
||||
|
||||
.{kna-namespace}large-w100
|
||||
.{kna-namespace}large-wauto
|
||||
.{$kna-namespace}large-w100
|
||||
.{$kna-namespace}large-wauto
|
||||
display block !important
|
||||
float none !important
|
||||
clear none !important
|
||||
|
|
@ -49,48 +49,48 @@
|
|||
border 0
|
||||
|
||||
/* margins for large screens */
|
||||
.{kna-namespace}large-man
|
||||
.{kna-namespace}large-ma0
|
||||
.{$kna-namespace}large-man
|
||||
.{$kna-namespace}large-ma0
|
||||
margin 0 !important
|
||||
|
||||
/* medium screens */
|
||||
/* -------------- */
|
||||
|
||||
@media (min-width: (small + 1)) and (max-width: large)
|
||||
@media (min-width: ($small + 1)) and (max-width: $large)
|
||||
|
||||
/* layouts for medium screens */
|
||||
.{kna-namespace}medium-hidden
|
||||
.{$kna-namespace}medium-hidden
|
||||
display none !important
|
||||
|
||||
.{kna-namespace}medium-visible
|
||||
.{$kna-namespace}medium-visible
|
||||
display block !important
|
||||
|
||||
.{kna-namespace}medium-no-float
|
||||
.{$kna-namespace}medium-no-float
|
||||
float none
|
||||
|
||||
.{kna-namespace}medium-inbl
|
||||
.{$kna-namespace}medium-inbl
|
||||
display inline-block
|
||||
float none
|
||||
vertical-align top
|
||||
|
||||
/* widths for medium screens */
|
||||
.{kna-namespace}medium-w25
|
||||
.{$kna-namespace}medium-w25
|
||||
width 25% !important
|
||||
|
||||
.{kna-namespace}medium-w33
|
||||
.{$kna-namespace}medium-w33
|
||||
width 33.333333% !important
|
||||
|
||||
.{kna-namespace}medium-w50
|
||||
.{$kna-namespace}medium-w50
|
||||
width 50% !important
|
||||
|
||||
.{kna-namespace}medium-w66
|
||||
.{$kna-namespace}medium-w66
|
||||
width 66.666666% !important
|
||||
|
||||
.{kna-namespace}medium-w75
|
||||
.{$kna-namespace}medium-w75
|
||||
width 75% !important
|
||||
|
||||
.{kna-namespace}medium-w100
|
||||
.{kna-namespace}medium-wauto
|
||||
.{$kna-namespace}medium-w100
|
||||
.{$kna-namespace}medium-wauto
|
||||
display block !important
|
||||
float none !important
|
||||
clear none !important
|
||||
|
|
@ -100,48 +100,48 @@
|
|||
border 0
|
||||
|
||||
/* margins for medium screens */
|
||||
.{kna-namespace}medium-man
|
||||
.{kna-namespace}medium-ma0
|
||||
.{$kna-namespace}medium-man
|
||||
.{$kna-namespace}medium-ma0
|
||||
margin 0 !important
|
||||
|
||||
/* small screens */
|
||||
/* ------------- */
|
||||
|
||||
@media (min-width: (tiny + 1)) and (max-width: small)
|
||||
@media (min-width: ($tiny + 1)) and (max-width: $small)
|
||||
|
||||
/* layouts for small screens */
|
||||
.{kna-namespace}small-hidden
|
||||
.{$kna-namespace}small-hidden
|
||||
display none !important
|
||||
|
||||
.{kna-namespace}small-visible
|
||||
.{$kna-namespace}small-visible
|
||||
display block !important
|
||||
|
||||
.{kna-namespace}small-no-float
|
||||
.{$kna-namespace}small-no-float
|
||||
float none
|
||||
|
||||
.{kna-namespace}small-inbl
|
||||
.{$kna-namespace}small-inbl
|
||||
display inline-block
|
||||
float none
|
||||
vertical-align top
|
||||
|
||||
/* widths for small screens */
|
||||
.{kna-namespace}small-w25
|
||||
.{$kna-namespace}small-w25
|
||||
width 25% !important
|
||||
|
||||
.{kna-namespace}small-w33
|
||||
.{$kna-namespace}small-w33
|
||||
width 33.333333% !important
|
||||
|
||||
.{kna-namespace}small-w50
|
||||
.{$kna-namespace}small-w50
|
||||
width 50% !important
|
||||
|
||||
.{kna-namespace}small-w66
|
||||
.{$kna-namespace}small-w66
|
||||
width 66.666666% !important
|
||||
|
||||
.{kna-namespace}small-w75
|
||||
.{$kna-namespace}small-w75
|
||||
width 75% !important
|
||||
|
||||
.{kna-namespace}small-w100
|
||||
.{kna-namespace}small-wauto
|
||||
.{$kna-namespace}small-w100
|
||||
.{$kna-namespace}small-wauto
|
||||
display block !important
|
||||
float none !important
|
||||
clear none !important
|
||||
|
|
@ -151,22 +151,22 @@
|
|||
border 0
|
||||
|
||||
/* margins for small screens */
|
||||
.{kna-namespace}small-man
|
||||
.{kna-namespace}small-ma0
|
||||
.{$kna-namespace}small-man
|
||||
.{$kna-namespace}small-ma0
|
||||
margin 0 !important
|
||||
|
||||
.{kna-namespace}small-pan
|
||||
.{kna-namespace}small-pa0
|
||||
.{$kna-namespace}small-pan
|
||||
.{$kna-namespace}small-pa0
|
||||
padding 0 !important
|
||||
|
||||
/* tiny screens */
|
||||
/* ------------ */
|
||||
|
||||
@media (max-width: tiny)
|
||||
@media (max-width: $tiny)
|
||||
|
||||
/* quick small resolution reset */
|
||||
.{kna-namespace}mod
|
||||
.{kna-namespace}col
|
||||
.{$kna-namespace}mod
|
||||
.{$kna-namespace}col
|
||||
fieldset
|
||||
display block !important
|
||||
float none !important
|
||||
|
|
@ -176,42 +176,42 @@
|
|||
margin-right 0 !important
|
||||
border 0
|
||||
|
||||
.{kna-namespace}flex-container
|
||||
.{$kna-namespace}flex-container
|
||||
flex-direction column
|
||||
|
||||
/* layouts for tiny screens */
|
||||
.{kna-namespace}tiny-hidden
|
||||
.{$kna-namespace}tiny-hidden
|
||||
display none !important
|
||||
|
||||
.{kna-namespace}tiny-visible
|
||||
.{$kna-namespace}tiny-visible
|
||||
display block !important
|
||||
|
||||
.{kna-namespace}tiny-no-float
|
||||
.{$kna-namespace}tiny-no-float
|
||||
float none
|
||||
|
||||
.{kna-namespace}tiny-inbl
|
||||
.{$kna-namespace}tiny-inbl
|
||||
display inline-block
|
||||
float none
|
||||
vertical-align top
|
||||
|
||||
/* widths for tiny screens */
|
||||
.{kna-namespace}tiny-w25
|
||||
.{$kna-namespace}tiny-w25
|
||||
width 25% !important
|
||||
|
||||
.{kna-namespace}tiny-w33
|
||||
.{$kna-namespace}tiny-w33
|
||||
width 33.333333% !important
|
||||
|
||||
.{kna-namespace}tiny-w50
|
||||
.{$kna-namespace}tiny-w50
|
||||
width 50% !important
|
||||
|
||||
.{kna-namespace}tiny-w66
|
||||
.{$kna-namespace}tiny-w66
|
||||
width 66.666666% !important
|
||||
|
||||
.{kna-namespace}tiny-w75
|
||||
.{$kna-namespace}tiny-w75
|
||||
width 75% !important
|
||||
|
||||
.{kna-namespace}tiny-w100
|
||||
.{kna-namespace}tiny-wauto
|
||||
.{$kna-namespace}tiny-w100
|
||||
.{$kna-namespace}tiny-wauto
|
||||
display block !important
|
||||
float none !important
|
||||
clear none !important
|
||||
|
|
@ -221,10 +221,10 @@
|
|||
border 0
|
||||
|
||||
/* margins for tiny screens */
|
||||
.{kna-namespace}tiny-man
|
||||
.{kna-namespace}tiny-ma0
|
||||
.{$kna-namespace}tiny-man
|
||||
.{$kna-namespace}tiny-ma0
|
||||
margin 0 !important
|
||||
|
||||
.{kna-namespace}tiny-pan
|
||||
.{kna-namespace}tiny-pa0
|
||||
.{$kna-namespace}tiny-pan
|
||||
.{$kna-namespace}tiny-pa0
|
||||
padding 0 !important
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user