KNACSS Sass - first draft
This commit is contained in:
Hugo Giraudel
parent
e575add79d
commit
5356c7b918
38 changed files with 1409 additions and 702 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
.sass-cache/1fab9070f6b8fd3ae392c3f414414c80d4a5c8a3/_box.scssc
Normal file
BIN
.sass-cache/1fab9070f6b8fd3ae392c3f414414c80d4a5c8a3/_box.scssc
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
.sass-cache/8d1bbecbf03b462f4c6289df796a863187871fc8/_css3.scssc
Normal file
BIN
.sass-cache/8d1bbecbf03b462f4c6289df796a863187871fc8/_css3.scssc
Normal file
Binary file not shown.
Binary file not shown.
BIN
.sass-cache/a80e0c9e3ec90ae3429b8714998fa5c67c631f77/forms.scssc
Normal file
BIN
.sass-cache/a80e0c9e3ec90ae3429b8714998fa5c67c631f77/forms.scssc
Normal file
Binary file not shown.
BIN
.sass-cache/a80e0c9e3ec90ae3429b8714998fa5c67c631f77/grids.scssc
Normal file
BIN
.sass-cache/a80e0c9e3ec90ae3429b8714998fa5c67c631f77/grids.scssc
Normal file
Binary file not shown.
BIN
.sass-cache/a80e0c9e3ec90ae3429b8714998fa5c67c631f77/icons.scssc
Normal file
BIN
.sass-cache/a80e0c9e3ec90ae3429b8714998fa5c67c631f77/icons.scssc
Normal file
Binary file not shown.
Binary file not shown.
BIN
.sass-cache/a80e0c9e3ec90ae3429b8714998fa5c67c631f77/print.scssc
Normal file
BIN
.sass-cache/a80e0c9e3ec90ae3429b8714998fa5c67c631f77/print.scssc
Normal file
Binary file not shown.
BIN
.sass-cache/a80e0c9e3ec90ae3429b8714998fa5c67c631f77/rwd.scssc
Normal file
BIN
.sass-cache/a80e0c9e3ec90ae3429b8714998fa5c67c631f77/rwd.scssc
Normal file
Binary file not shown.
BIN
.sass-cache/a80e0c9e3ec90ae3429b8714998fa5c67c631f77/table.scssc
Normal file
BIN
.sass-cache/a80e0c9e3ec90ae3429b8714998fa5c67c631f77/table.scssc
Normal file
Binary file not shown.
Binary file not shown.
702
knacss.scss
702
knacss.scss
|
|
@ -1,702 +0,0 @@
|
|||
/**
|
||||
* www.KNACSS.com V2.5c @author: Raphael Goetter, Alsacreations
|
||||
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
|
||||
*/
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* Table of content */
|
||||
/* ----------------------------- */
|
||||
/*
|
||||
* 0 - Mixins and variables
|
||||
* 1 - Reset
|
||||
* 2 - Layout and modules
|
||||
* 3 - Header
|
||||
* 4 - Sidebar
|
||||
* 5 - Footer
|
||||
* 6 - Forms
|
||||
* 7 - Main
|
||||
* 8 - IEfix
|
||||
* 9 - Print
|
||||
* 10 - Desktop medias
|
||||
* 11 - Mobile
|
||||
*/
|
||||
|
||||
/* Compass imports */
|
||||
@import "compass/css3/images";
|
||||
@import "compass/css3";
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Mixins & variables */
|
||||
/* ----------------------------- */
|
||||
|
||||
/**
|
||||
* REM mixin with PX fallback
|
||||
* @include rem('font-size', 1.4) outputs:
|
||||
* font-size: 14px;
|
||||
* font-size: 1.4rem;
|
||||
*/
|
||||
@mixin rem($property, $val) {
|
||||
#{$property}: ($val * 10) + px;
|
||||
#{$property}: $val + rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mixin handling media queries breakpoints
|
||||
* Usage:
|
||||
* @include breakpoint(small) { ... }
|
||||
* Can be used INSIDE a rule
|
||||
*/
|
||||
@mixin breakpoint($point) {
|
||||
@if $point == small {
|
||||
@media (max-width: 45em) { @content; }
|
||||
}
|
||||
@if $point == medium {
|
||||
@media (max-width: 55em) { @content; }
|
||||
}
|
||||
@if $point == large {
|
||||
@media (min-width: 55em) { @content; }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Mixin making easier absolute/fixed positioning
|
||||
* Usage:
|
||||
* @include position(0, 0, 0, 0, absolute);
|
||||
* Currently unused. Only here for posterity.
|
||||
*/
|
||||
@mixin position($top: auto, $right: auto, $bottom: auto, $left: auto, $position: absolute) {
|
||||
top: $top;
|
||||
right: $right;
|
||||
bottom: $bottom;
|
||||
left: $left;
|
||||
position: $position;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to parse int a value
|
||||
* parseInt(15px) returns 15
|
||||
* Value must be unquoted
|
||||
*/
|
||||
@function parseInt($number) {
|
||||
@return $number / ($number * 0 + 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Mixin handling width-helpers classes
|
||||
* Usage:
|
||||
* @include w(100px) -> .w100p { width: 100px; }
|
||||
* @include w(60%) -> .w60 { width: 60%; }
|
||||
* Also handles media-queries
|
||||
* If value >= 60% or 600px, becomes "auto" on tablets
|
||||
* If value >= 30% or 300px, becomes "auto" on mobiles
|
||||
* Change variables below to suit your needs
|
||||
*/
|
||||
|
||||
$valuePercentTablet: 60;
|
||||
$valuePercentMobile: 30;
|
||||
$valuePixelTablet: 600;
|
||||
$valuePixelMobile: 300;
|
||||
|
||||
@mixin w($val, $modifier: '') {
|
||||
$int: parseInt($val);
|
||||
$unit: unit($val);
|
||||
$className: floor($int);
|
||||
@if $unit == '%' {
|
||||
#{'.w#{$className}'} {
|
||||
#{$modifier}width: $val;
|
||||
|
||||
@if $int >= $valuePercentTablet {
|
||||
@include breakpoint(medium) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@if $int >= $valuePercentMobile {
|
||||
@include breakpoint(small) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
} @else if $unit == 'px' {
|
||||
#{'.w#{$className}p'} {
|
||||
#{$modifier}width: $val;
|
||||
|
||||
@if $int >= $valuePixelTablet {
|
||||
@include breakpoint(medium) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@if $int >= $valuePixelMobile {
|
||||
@include breakpoint(small) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Reset */
|
||||
/* ----------------------------- */
|
||||
|
||||
/**
|
||||
* Base font-size
|
||||
* corresponds to 10px
|
||||
* adapted to rem unit
|
||||
*/
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
/* Orientation iOS font-size fix */
|
||||
@media (orientation: landscape) and (max-device-width: 768px) {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: white;
|
||||
color: black;
|
||||
font-family: "Century Gothic", helvetica, arial, sans-serif;
|
||||
@include rem('font-size', 1.4); /* equiv 14px */
|
||||
line-height: 1.5; /* adapt to your design */
|
||||
}
|
||||
|
||||
/**
|
||||
* Font-sizing for content
|
||||
* Preserve vertical rythm
|
||||
* Thanks to http://soqr.fr/vertical-rhythm/
|
||||
*/
|
||||
p, ul, ol, dl,
|
||||
blockquote, pre,
|
||||
td, th,
|
||||
label, textarea,
|
||||
caption, details, figure,
|
||||
hgroup {
|
||||
@include rem('font-size', 1.4); /* equiv 14px */
|
||||
line-height: 1.5;
|
||||
margin: .75em 0 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Titles from h1 (.h1-like) to h6 (.h6-like)
|
||||
* h1: 26px;
|
||||
* h2: 24px;
|
||||
* h3: 22px;
|
||||
* h4: 20px;
|
||||
* h5: 18px;
|
||||
* h6: 16px;
|
||||
*/
|
||||
$j: 2.6; $k: 2.25;
|
||||
@for $i from 1 through 6 {
|
||||
#{'h#{$i}'}, #{'.h#{$i}-like'} {
|
||||
@include rem('font-size', $j);
|
||||
@include rem('line-height', $k);
|
||||
font-weight: normal;
|
||||
}
|
||||
$j: $j - 0.2; $k: $k + 0.2;
|
||||
@if $i == 3 { $k: 1.45; }
|
||||
}
|
||||
|
||||
/**
|
||||
* Alternate font-sizing
|
||||
* .smaller: 10px;
|
||||
* .small : 12px;
|
||||
* .medium : 14px;
|
||||
* .big : 16px;
|
||||
* .bigger : 18px;
|
||||
* .biggest: 20px;
|
||||
*/
|
||||
$l: 1;
|
||||
$sizes: smaller, small, medium, big, bigger, biggest;
|
||||
@each $size in $sizes {
|
||||
#{'.#{$size}'} {
|
||||
@include rem('font-size', $l);
|
||||
}
|
||||
$l: $l + 0.2;
|
||||
}
|
||||
|
||||
/* Soft reset */
|
||||
html, body,
|
||||
textarea, label
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul, ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
code, pre, samp {
|
||||
white-space: pre-wrap;
|
||||
font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
|
||||
}
|
||||
code { line-height: 1em; }
|
||||
table { margin-bottom: 1.5em; }
|
||||
|
||||
/* Avoid top margins on first content element */
|
||||
p, ul, ol, dl,
|
||||
blockquote, pre,
|
||||
h1,h2, h3, h4, h5, h6 {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Avoid margins on nested elements */
|
||||
li {
|
||||
p, ul, ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Max width */
|
||||
img, table, td, blockquote, code, pre, textarea, input, video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* You shall not pass */
|
||||
div, textarea, table, td, th, code, pre, samp {
|
||||
word-wrap: break-word;
|
||||
@include hyphens(auto);
|
||||
}
|
||||
|
||||
/* Pictures */
|
||||
img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
a img { border: 0; }
|
||||
|
||||
/* Scripts */
|
||||
body > script { display: none !important; }
|
||||
|
||||
/* Skip-links */
|
||||
.skip-links {
|
||||
position: absolute;
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
padding: 0.5em;
|
||||
background: black;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==layout and modules */
|
||||
/* ----------------------------- */
|
||||
|
||||
/**
|
||||
* Switching box-model for all elements
|
||||
* Content-box: width = width + padding + border
|
||||
* Padding-box: width = width + padding
|
||||
* Border-box : width = width (FUCK YEAH!)
|
||||
*/
|
||||
* {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Include this rule to trigger hasLayout and contain floats.
|
||||
* 2. The space content is one way to avoid an Opera bug when the
|
||||
* contenteditable attribute is included anywhere else in the document.
|
||||
* Otherwise it causes space to appear at the top and bottom of elements
|
||||
* that are clearfixed.
|
||||
* 3. The use of `table` rather than `block` is only necessary if using
|
||||
* `:before` to contain the top-margins of child elements.
|
||||
*/
|
||||
.clearfix {
|
||||
*zoom: 1; /* 1 */
|
||||
|
||||
&:after, &:before {
|
||||
content : ' '; /* 2 */
|
||||
display: table; /* 3 */
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/* Clearfix blocks that must contain floats */
|
||||
.line, .mod {
|
||||
@extend .clearfix;
|
||||
}
|
||||
|
||||
/* Clear blocks that needs to be placed under floats */
|
||||
.clear, .line, .row {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/**
|
||||
* Float layout
|
||||
* ------------
|
||||
* Tutorial : http://knacss.com/demos/tutoriel.html
|
||||
*/
|
||||
|
||||
/* Module, contains floats (.item is the same) */
|
||||
.mod, .item {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Table layout
|
||||
* ------------
|
||||
*/
|
||||
.row {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint(small) {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.row > *,
|
||||
.col {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/**
|
||||
* Alignments (blocks and inline)
|
||||
* ------------------------------
|
||||
*/
|
||||
|
||||
/* Left elements */
|
||||
.left { float: left; }
|
||||
img.left { margin-right: 1em; }
|
||||
|
||||
/* Right elements */
|
||||
.right { float: right; }
|
||||
img.right { margin-left: 1em; }
|
||||
|
||||
img.left,
|
||||
img.right { margin-bottom: 5px; }
|
||||
|
||||
.center { margin-left: auto; margin-right: auto; }
|
||||
.txtleft { text-align: left; }
|
||||
.txtright { text-align: right; }
|
||||
.txtcenter { text-align: center; }
|
||||
|
||||
/* Simply inline-block */
|
||||
.inbl {
|
||||
@include inline-block(top); /* All browsers back to IE6 */
|
||||
margin-right: -.25em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Grids
|
||||
* -----
|
||||
*/
|
||||
|
||||
/* Equal grids with 2% gutter */
|
||||
[class*=grid] > * {float: left; } /* direct childrens are floating */
|
||||
[class*=grid] > * + * { margin-left: 2%; } /* here's the gutter */
|
||||
.grid2 > * { width: 49%; }
|
||||
.grid3 > * { width: 32%; }
|
||||
.grid4 > * { width: 23.5%; }
|
||||
.grid5 > * { width: 18.4%; }
|
||||
.grid6 > * { width: 15%; }
|
||||
|
||||
/* Unequal grids (1-2, 2-1, 1-3 and 3-1) */
|
||||
.grid2-1 > *:first-child,
|
||||
.grid1-2 > * + * { width: 66%; }
|
||||
.grid1-2 > *:first-child,
|
||||
.grid2-1 > * + * { width: 32%; }
|
||||
.grid1-3 > *:first-child,
|
||||
.grid3-1 > * + * { width: 23.5%; }
|
||||
.grid3-1 > *:first-child,
|
||||
.grid1-3 > * + * { width: 74.5%; }
|
||||
|
||||
/**
|
||||
* Blocks widths (percentage and pixels)
|
||||
* + media queries automagically handled
|
||||
*/
|
||||
|
||||
/**
|
||||
* .w10 to .w100 (step 10) and
|
||||
* .w100 to .w1000 (step 100)
|
||||
*/
|
||||
@for $i from 1 through 10 {
|
||||
@include w($i*10%);
|
||||
@include w($i*100px);
|
||||
}
|
||||
|
||||
/**
|
||||
* Additional not-round numbers
|
||||
* Add more to the list to suit your needs
|
||||
*/
|
||||
$runClasses: 25%, 33.33%, 50%, 66.66%, 75%, 50px, 150px, 960px;
|
||||
@each $class in $runClasses {
|
||||
@include w($class);
|
||||
}
|
||||
|
||||
/**
|
||||
* You can even prefix width with
|
||||
* 'max-' or 'min-' to handle min/max-width
|
||||
*/
|
||||
@include w(960px, 'max-');
|
||||
|
||||
/**
|
||||
* Spacing helpers
|
||||
* p = padding
|
||||
* m = margin
|
||||
* a = all
|
||||
* t = top
|
||||
* r = right
|
||||
* b = bottom
|
||||
* l = left
|
||||
* s = small (10px)
|
||||
* m = medium (20px)
|
||||
* l = large (30px)
|
||||
* n = none (0)
|
||||
* Source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
||||
*/
|
||||
.m-reset, .ma0 { margin: 0; }
|
||||
.p-reset, .pa0 { padding: 0; }
|
||||
.ma1, .mas { margin: 10px; }
|
||||
.ma2, .mam { margin: 20px; }
|
||||
.ma3, .mal { margin: 30px; }
|
||||
.pa1, .pas { padding: 10px; }
|
||||
.pa2, .pam { padding: 20px; }
|
||||
.pa3, .pal { padding: 30px; }
|
||||
|
||||
.mt0, .mtn { margin-top: 0; }
|
||||
.mt1, .mts { margin-top: 10px; }
|
||||
.mt2, .mtm { margin-top: 20px; }
|
||||
.mt3, .mtl { margin-top: 30px; }
|
||||
.mr0, .mrn { margin-right: 0; }
|
||||
.mr1, .mrs { margin-right: 10px; }
|
||||
.mr2, .mrm { margin-right: 20px; }
|
||||
.mr3, .mrl { margin-right: 30px; }
|
||||
.mb0, .mbn { margin-bottom: 0; }
|
||||
.mb1, .mbs { margin-bottom: 10px; }
|
||||
.mb2, .mbm { margin-bottom: 20px; }
|
||||
.mb3, .mbl { margin-bottom: 30px; }
|
||||
.ml0, .mln { margin-left: 0; }
|
||||
.ml1, .mls { margin-left: 10px; }
|
||||
.ml2, .mlm { margin-left: 20px; }
|
||||
.ml3, .mll { margin-left: 30px; }
|
||||
|
||||
.pt0, .ptn { padding-top: 0; }
|
||||
.pt1, .pts { padding-top: 10px; }
|
||||
.pt2, .ptm { padding-top: 20px; }
|
||||
.pt3, .ptl { padding-top: 30px; }
|
||||
.pr0, .prn { padding-right: 0; }
|
||||
.pr1, .prs { padding-right: 10px; }
|
||||
.pr2, .prm { padding-right: 20px; }
|
||||
.pr3, .prl { padding-right: 30px; }
|
||||
.pb0, .pbn { padding-bottom: 0; }
|
||||
.pb1, .pbs { padding-bottom: 10px; }
|
||||
.pb2, .pbm { padding-bottom: 20px; }
|
||||
.pb3, .pbl { padding-bottom: 30px; }
|
||||
.pl0, .pln { padding-left: 0; }
|
||||
.pl1, .pls { padding-left: 10px; }
|
||||
.pl2, .plm { padding-left: 20px; }
|
||||
.pl3, .pll { padding-left: 30px; }
|
||||
|
||||
/* Hidden yet accessible content */
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
height : 1px !important;
|
||||
width : 1px !important;
|
||||
margin : -1px !important;
|
||||
padding: 0 !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.desktop-hidden { /* Hidden on desktop */
|
||||
@include breakpoint(large) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.mobile-hidden { /* Hidden on mobile */
|
||||
@include breakpoint(small) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.tablet-hidden { /* Hidden on tablets */
|
||||
@include breakpoint(medium) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Header */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Sidebar */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Footer */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Forms */
|
||||
/* ----------------------------- */
|
||||
form,
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
label,
|
||||
.btn {
|
||||
vertical-align: middle; /* @bugfix alignment */
|
||||
}
|
||||
textarea {
|
||||
resize: vertical;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Main */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==IEfix */
|
||||
/* ----------------------------- */
|
||||
|
||||
|
||||
.ie67 {
|
||||
/* haslayout for IE6/IE7 */
|
||||
.clearfix, .line, .mod, .row, .col {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* inline-block and table-cell for IE6/IE7
|
||||
* warning: .col needs width on IE6/IE7
|
||||
*/
|
||||
.btn, .col {
|
||||
display: inline;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a slash at the end of this comment
|
||||
* to enable box-sizing for IE6/IE7
|
||||
* @source https://github.com/Schepp/box-sizing-polyfill
|
||||
*
|
||||
|
||||
* {
|
||||
behavior: url(/js/boxsizing.htc);
|
||||
}
|
||||
|
||||
/**/
|
||||
}
|
||||
|
||||
.ie8 img {
|
||||
width: auto; /* @bugfix for IE8 */
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Print */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* Quick print reset */
|
||||
@media print {
|
||||
p, blockquote {
|
||||
orphans: 2;
|
||||
widows: 2;
|
||||
}
|
||||
blockquote, ul, ol {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
h1, h2, h3, caption {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Desktop medias */
|
||||
/* ----------------------------- */
|
||||
|
||||
@include breakpoint(large) {
|
||||
/**
|
||||
* Here go rules for big resources and big screens
|
||||
* e.g. background-images, font-faces, etc.
|
||||
*/
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==Mobile */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* quick tablet reset */
|
||||
@include breakpoint(medium) {
|
||||
/* responsive widths for medium (m) screens, like tablets */
|
||||
.m25 { width: 25%; }
|
||||
.m33 { width: 33.3333%; }
|
||||
.m50 { width: 50%; }
|
||||
.m66 { width: 66.6666%; }
|
||||
.m75 { width: 75%; }
|
||||
.m100 {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* quick smartphone reset */
|
||||
@include breakpoint(small) {
|
||||
.mod,
|
||||
.item,
|
||||
.col,
|
||||
fieldset {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
/* responsive widths for tiny (t) screens, like smartphones */
|
||||
.t25 { width: 25%; }
|
||||
.t33 { width: 33.3333%; }
|
||||
.t50 { width: 50%; }
|
||||
.t66 { width: 66.6666%; }
|
||||
.t75 { width: 75%; }
|
||||
.t100 {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
thead { display: none; }
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
|
||||
/* Style adjustments for retina devices */
|
||||
}
|
||||
123
sass/forms.scss
Normal file
123
sass/forms.scss
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
/* ----------------------------- */
|
||||
/* ==forms */
|
||||
/* ----------------------------- */
|
||||
|
||||
/**
|
||||
* Thanks to HTML5boilerplate
|
||||
* Source: github.com/nathansmith/formalize and www.sitepen.com
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Buttons
|
||||
*/
|
||||
.btn {
|
||||
@include inline-block();
|
||||
}
|
||||
|
||||
.btn.alternate {}
|
||||
.btn.highlight {}
|
||||
.login {}
|
||||
.logout {}
|
||||
.primary {}
|
||||
.warning {}
|
||||
.error {}
|
||||
.success {}
|
||||
|
||||
/**
|
||||
* Form elements
|
||||
*/
|
||||
label {
|
||||
@include inline-block(middle);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
legend {
|
||||
border: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font-family: "Century Gothic", helvetica, arial, sans-serif;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Removes default vertical scrollbar on empty textarea in IE6/7/8/9
|
||||
* 2. Prevents horizontal resizing
|
||||
*/
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
min-height: 5em;
|
||||
font-size: 1.75em;
|
||||
vertical-align: top;
|
||||
resize: vertical; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Clickable input types in iOS
|
||||
* 2. Corrects inner spacing displayed oddly in IE7
|
||||
*/
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
-webkit-appearance: button; /* 1 */
|
||||
*overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Corrects excess space around these inputs in IE8/9
|
||||
* 2. Corrects excess space around these inputs in IE7
|
||||
*/
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
padding: 0; /* 1 */
|
||||
*width: 13px; /* 2 */
|
||||
*height: 13px; /* 2 */
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a slash at the end of this comment
|
||||
* if select styling bugs on WebKit *
|
||||
select { -webkit-appearance: none; } /**/
|
||||
|
||||
/**
|
||||
* Removes 'x' on right of search input when text is entered
|
||||
*/
|
||||
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, textarea {
|
||||
&:-moz-placeholder { color: #777; }
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes inner padding and border in FF3+
|
||||
*/
|
||||
button,
|
||||
input[type='button'],
|
||||
input[type='reset'],
|
||||
input[type='submit'] {
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
35
sass/grids.scss
Normal file
35
sass/grids.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/* ----------------------------- */
|
||||
/* ==grids */
|
||||
/* ----------------------------- */
|
||||
|
||||
/**
|
||||
* Equal grids with 2% gutter
|
||||
* 1. Direct childrens are floating
|
||||
* 2. Gutter
|
||||
*/
|
||||
[class*=grid] > * {
|
||||
float: left; /* 1 */
|
||||
|
||||
+ * {
|
||||
margin-left: 2%; /* 2 */
|
||||
}
|
||||
}
|
||||
|
||||
.grid2 > * { width: 49%; }
|
||||
.grid3 > * { width: 32%; }
|
||||
.grid4 > * { width: 23.5%; }
|
||||
.grid5 > * { width: 18.4%; }
|
||||
.grid6 > * { width: 15%; }
|
||||
|
||||
/**
|
||||
* Unequal grids (1-2, 2-1, 1-3 and 3-1)
|
||||
*/
|
||||
.grid2-1 > *:first-child,
|
||||
.grid1-2 > * + * { width: 66%; }
|
||||
.grid1-2 > *:first-child,
|
||||
.grid2-1 > * + * { width: 32%; }
|
||||
.grid1-3 > *:first-child,
|
||||
.grid3-1 > * + * { width: 23.5%; }
|
||||
.grid3-1 > *:first-child,
|
||||
.grid1-3 > * + * { width: 74.5%; }
|
||||
|
||||
255
sass/icons.scss
Normal file
255
sass/icons.scss
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
/* ----------------------------- */
|
||||
/* ==icons and bullets */
|
||||
/* ----------------------------- */
|
||||
|
||||
.icon {
|
||||
@include inline-block();
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Future proof; prevent screen-reader from reading it
|
||||
*/
|
||||
.icon:before,
|
||||
.icon > li:before,
|
||||
.icon.after:after,
|
||||
.icon.after > li:after {
|
||||
content: "";
|
||||
@include inline-block(middle);
|
||||
position: relative;
|
||||
top: -.1em;
|
||||
margin: 0 .3em 0 0;
|
||||
font: 1.4em/1 sans-serif;
|
||||
color: #000;
|
||||
text-shadow: 1px 1px 0 rgba(0,0,0,.1);
|
||||
speak: none; /* 1 */
|
||||
}
|
||||
|
||||
@media (min-device-width: 768px) {
|
||||
.icon:before,
|
||||
.icon > li:before,
|
||||
.icon.after:after,
|
||||
.icon.after > li:after {
|
||||
font: 1em/0.6 sans-serif;
|
||||
-webkit-transform: rotateZ(0.05deg);
|
||||
}
|
||||
}
|
||||
|
||||
.icon.after,
|
||||
.icon.after > li {
|
||||
&:after {
|
||||
margin: 0 0 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
ul.icon > li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.icon:before,
|
||||
ul.icon.after:after {
|
||||
content:""
|
||||
}
|
||||
|
||||
.icon.after,
|
||||
.icon.after > li {
|
||||
&:before {
|
||||
content: "" !important
|
||||
}
|
||||
}
|
||||
|
||||
.icon-rate:before,
|
||||
.icon-rate > li:before,
|
||||
.icon-rate.after:after,
|
||||
.icon-rate.after > li:after {
|
||||
content: "\2605";
|
||||
}
|
||||
|
||||
.icon-unrate:before,
|
||||
.icon-unrate > li:before,
|
||||
.icon-unrate.after:after,
|
||||
.icon-unrate.after > li:after {
|
||||
content: "\2606";
|
||||
}
|
||||
|
||||
.icon-check:before,
|
||||
.icon-check > li:before,
|
||||
.icon-check.after:after,
|
||||
.icon-check.after > li:after {
|
||||
content: "\2713";
|
||||
}
|
||||
|
||||
.icon-uncheck:before,
|
||||
.icon-uncheck > li:before,
|
||||
.icon-uncheck.after:after,
|
||||
.icon-uncheck.after > li:after {
|
||||
content: "\2717";
|
||||
}
|
||||
|
||||
.icon-cloud:before,
|
||||
.icon-cloud > li:before,
|
||||
.icon-cloud.after:after,
|
||||
.icon-cloud.after > li:after {
|
||||
content: "\2601";
|
||||
}
|
||||
|
||||
.icon-dl:before,
|
||||
.icon-dl > li:before,
|
||||
.icon-dl.after:after,
|
||||
.icon-dl.after > li:after {
|
||||
content: "\21E3";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.icon-cross:before,
|
||||
.icon-cross > li:before,
|
||||
.icon-cross.after:after,
|
||||
.icon-cross.after > li:after {
|
||||
content: "\2716";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.icon-arrow1:before,
|
||||
.icon-arrow1 > li:before,
|
||||
.icon-arrow1.after:after,
|
||||
.icon-arrow1.after > li:after {
|
||||
content: "\2192";
|
||||
position: relative; top: -0.15em;
|
||||
}
|
||||
|
||||
.icon-arrow2:before,
|
||||
.icon-arrow2 > li:before,
|
||||
.icon-arrow2.after:after,
|
||||
.icon-arrow2.after > li:after {
|
||||
content: "\279E";
|
||||
}
|
||||
|
||||
.icon-arrow3:before,
|
||||
.icon-arrow3 > li:before,
|
||||
.icon-arrow3.after:after,
|
||||
.icon-arrow3.after > li:after {
|
||||
content: "\279A";
|
||||
}
|
||||
|
||||
.icon-bracket1:before,
|
||||
.icon-bracket1 > li:before,
|
||||
.icon-bracket1.after:after,
|
||||
.icon-bracket1.after > li:after {
|
||||
content: "\2039";
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
position: relative;
|
||||
top: -.15em;
|
||||
}
|
||||
|
||||
.icon-bracket2:before,
|
||||
.icon-bracket2 > li:before,
|
||||
.icon-bracket2.after:after,
|
||||
.icon-bracket2.after > li:after {
|
||||
content: "\203A";
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
position: relative; top: -0.15em;
|
||||
}
|
||||
|
||||
.icon-up:before,
|
||||
.icon-up > li:before,
|
||||
.icon-up.after:after,
|
||||
.icon-up.after > li:after {
|
||||
content: "\25B2";
|
||||
}
|
||||
|
||||
.icon-down:before,
|
||||
.icon-down > li:before,
|
||||
.icon-down.after:after,
|
||||
.icon-down.after > li:after {
|
||||
content: "\25BC";
|
||||
}
|
||||
|
||||
.icon-bull:before,
|
||||
.icon-bull > li:before,
|
||||
.icon-bull.after:after,
|
||||
.icon-bull.after > li:after {
|
||||
content: "\2022";
|
||||
font-size: 1.2em;
|
||||
top: -0.05em;
|
||||
}
|
||||
|
||||
.icon-bull2:before,
|
||||
.icon-bull2 > li:before,
|
||||
.icon-bull2.after:after,
|
||||
.icon-bull2.after > li:after {
|
||||
content: "\25E6";
|
||||
top: -0.05em;
|
||||
}
|
||||
|
||||
.icon-bull3:before,
|
||||
.icon-bull3 > li:before,
|
||||
.icon-bull3.after:after,
|
||||
.icon-bull3.after > li:after {
|
||||
content: "\2023";
|
||||
font-size: 1.6em;
|
||||
top: -0.05em;
|
||||
}
|
||||
|
||||
.icon-nav:before,
|
||||
.icon-nav > li:before,
|
||||
.icon-nav.after:after,
|
||||
.icon-nav.after > li:after {
|
||||
content: "\2261";
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.icon-losange:before,
|
||||
.icon-losange > li:before,
|
||||
.icon-losange.after:after,
|
||||
.icon-losange.after > li:after {
|
||||
content: "\25C6";
|
||||
}
|
||||
|
||||
.icon-asteri:before,
|
||||
.icon-asteri > li:before,
|
||||
.icon-asteri.after:after,
|
||||
.icon-asteri.after > li:after {
|
||||
content: "\2731";
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.icon-mail:before,
|
||||
.icon-mail > li:before,
|
||||
.icon-mail.after:after,
|
||||
.icon-mail.after > li:after {
|
||||
content: "\2709";
|
||||
font-size: 1.6em;
|
||||
top: -.05em;
|
||||
}
|
||||
|
||||
ol.styled {
|
||||
counter-reset: styled;
|
||||
}
|
||||
|
||||
ol.styled > li {
|
||||
list-style-type: none;
|
||||
counter-increment: styled;
|
||||
margin-bottom: .3em;
|
||||
}
|
||||
|
||||
ol.styled > li:before {
|
||||
content: counter(styled);
|
||||
display: inline-block;
|
||||
width: 1em; height: 1em;
|
||||
line-height: 1;
|
||||
padding: 2px;
|
||||
margin-right: .4em;
|
||||
vertical-align: middle;
|
||||
background: rgba(0,0,0,.5);
|
||||
border-radius: 50%;
|
||||
font-size: .9em;
|
||||
text-align: center;
|
||||
text-indent: -0.1em;
|
||||
color: white;
|
||||
}
|
||||
612
sass/knacss.scss
Normal file
612
sass/knacss.scss
Normal file
|
|
@ -0,0 +1,612 @@
|
|||
/*
|
||||
* www.KNACSS.com V2.6d @author: Raphael Goetter, Alsacreations
|
||||
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
|
||||
*/
|
||||
|
||||
/* Compass imports */
|
||||
@import "compass/css3";
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==helpers */
|
||||
/* ----------------------------- */
|
||||
|
||||
/**
|
||||
* Mixin handling REM with PX fallback
|
||||
* Takes either PX or REM as input
|
||||
* Outputs both in appropriate order
|
||||
*/
|
||||
@mixin rem($property, $values) {
|
||||
$px : ();
|
||||
$rem: ();
|
||||
|
||||
@each $value in $values {
|
||||
|
||||
@if $value == 0 or $value == auto {
|
||||
$px : append($px , $value);
|
||||
$rem: append($rem, $value);
|
||||
}
|
||||
|
||||
@else {
|
||||
$unit: unit($value);
|
||||
$val: $value / ($value * 0 + 1);
|
||||
|
||||
@if $unit == "px" {
|
||||
$px : append($px, $value);
|
||||
$rem: append($rem, ($val / 10 + rem));
|
||||
}
|
||||
|
||||
@if $unit == "rem" {
|
||||
$px : append($px, ($val * 10 + px));
|
||||
$rem: append($rem, $value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$property}: $px;
|
||||
#{$property}: $rem;
|
||||
}
|
||||
|
||||
@mixin r($breakpoint) {
|
||||
@if $breakpoint == "large" {
|
||||
@media (min-width: 1280px) { @content; }
|
||||
}
|
||||
@if $breakpoint == "medium" {
|
||||
@media (max-width: 768px) { @content; }
|
||||
}
|
||||
@if $breakpoint == "small" {
|
||||
@media (max-width: 640px) { @content; }
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clearfix
|
||||
*/
|
||||
.clearfix:after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hidden yet accessible content
|
||||
*/
|
||||
.visuallyhidden {
|
||||
clip: rect(0 0 0 0);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==reset */
|
||||
/* ----------------------------- */
|
||||
|
||||
/**
|
||||
* 1. Base font-size (corresponds to 10px) adapted to REM unit
|
||||
* 2. Orientation iOS font-size fix
|
||||
*/
|
||||
html {
|
||||
font-size: 62.5%; /* 1 */
|
||||
@media (orientation: landscape) and (max-device-width: 768px) {
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
font-family: "Century Gothic", helvetica, arial, sans-serif;
|
||||
@include rem('font-size', 14px);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/**
|
||||
* Font-sizing for content
|
||||
* Preserves vertical-rythm
|
||||
* Source: http://soqr.fr/vertical-rhythm/
|
||||
*/
|
||||
p, ul, ol, dl,
|
||||
blockquote, pre,
|
||||
td, th,
|
||||
label, textarea,
|
||||
caption, details, figure, hgroup {
|
||||
@include rem('font-size', 14px);
|
||||
line-height: 1.5;
|
||||
margin: .75em 0 0;
|
||||
}
|
||||
|
||||
h1, .h1-like,
|
||||
h2, .h2-like,
|
||||
h3, .h3-like,
|
||||
h4, .h4-like,
|
||||
h5, .h5-like,
|
||||
h6, .h6-like {
|
||||
font-weight: normal;
|
||||
@include rem('margin', 21px 0 0 0);
|
||||
}
|
||||
|
||||
h1, .h1-like,
|
||||
h2, .h2-like,
|
||||
h3, .h3-like {
|
||||
@include rem('line-height', 42px 0 0 0);
|
||||
}
|
||||
|
||||
h4, .h4-like,
|
||||
h5, .h5-like,
|
||||
h6, .h6-like {
|
||||
@include rem('line-height', 21px 0 0 0);
|
||||
}
|
||||
|
||||
h1, .h1-like { @include rem('font-size', 26px); }
|
||||
h2, .h2-like { @include rem('font-size', 24px); }
|
||||
h3, .h3-like { @include rem('font-size', 22px); }
|
||||
h4, .h4-like { @include rem('font-size', 20px); }
|
||||
h5, .h5-like { @include rem('font-size', 18px); }
|
||||
h6, .h6-like { @include rem('font-size', 16px); }
|
||||
|
||||
/* alternate font-sizing */
|
||||
.smaller { @include rem('font-size', 10px); }
|
||||
.small { @include rem('font-size', 12px); }
|
||||
.medium { @include rem('font-size', 14px); }
|
||||
.big { @include rem('font-size', 16px); }
|
||||
.bigger { @include rem('font-size', 18px); }
|
||||
.biggest { @include rem('font-size', 20px); }
|
||||
|
||||
/**
|
||||
* Soft reset
|
||||
*/
|
||||
html, body,
|
||||
textarea,
|
||||
figure, label {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
code, pre,
|
||||
samp, kbd {
|
||||
white-space: pre-wrap;
|
||||
font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
code, kbd, mark {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
kbd {
|
||||
padding: 0 2px;
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
background: rgba(0,0,0,.04);
|
||||
color: #b11;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding:2px 4px;
|
||||
background: #ff0;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Avoid top margins on first content element
|
||||
*/
|
||||
p, ul, ol dl,
|
||||
blockquote, pre,
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Avoid margins on nested elements
|
||||
*/
|
||||
li {
|
||||
p, ul, ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevents those to break out of their container
|
||||
*/
|
||||
img, table, td,
|
||||
blockquote, code, pre,
|
||||
textarea, input, video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* You shall not pass
|
||||
*/
|
||||
div, textarea,
|
||||
table, td, th,
|
||||
code, pre, samp {
|
||||
word-wrap: break-word;
|
||||
@include hyphens(auto);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pictures
|
||||
*/
|
||||
img {
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
|
||||
/* Gmap3 max-width bug fix on images */
|
||||
#map_canvas &,
|
||||
.gmnoprint & {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
a & {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* scripts */
|
||||
body > script { display: none !important; }
|
||||
|
||||
/* skip-links */
|
||||
.skip-links {
|
||||
position: absolute;
|
||||
|
||||
a {
|
||||
position: absolute;
|
||||
left: -7000px;
|
||||
padding: 0.5em;
|
||||
background: #000;
|
||||
color:#fff;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==layout and modules */
|
||||
/* ----------------------------- */
|
||||
|
||||
/**
|
||||
* Switching box-model for all elements
|
||||
* 1. ...and pseudo-elements
|
||||
*/
|
||||
*,
|
||||
*:after, /* 1 */
|
||||
*:before {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
/**
|
||||
* Float layout
|
||||
* module, contains floats (.item is the same)
|
||||
*/
|
||||
.mod, .item {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* Blocks that needs to be placed under floats
|
||||
*/
|
||||
.clear, .line, .row {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/**
|
||||
* Blocks that must contain floats
|
||||
*/
|
||||
.clearfix, .line, .mod {
|
||||
@extend .clearfix;
|
||||
}
|
||||
|
||||
/**
|
||||
* Table layout
|
||||
*/
|
||||
.row {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row > *,
|
||||
.col {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/**
|
||||
* Inline-blocks
|
||||
*/
|
||||
.inbl {
|
||||
@include inline-block(top);
|
||||
margin-right: -.25em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Flexbox layout
|
||||
*/
|
||||
.flex {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-h {
|
||||
-webkit-box-orient: horizontal;
|
||||
-moz-box-orient: horizontal;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flex-v {
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-fluid {
|
||||
-webkit-box-flox: 1;
|
||||
-moz-box-flex: 1;
|
||||
-webkit-flex: 1;
|
||||
-moz-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flex-start {
|
||||
-webkit-box-ordinal-group: -1;
|
||||
-moz-box-ordinal-group: 0;
|
||||
-ms-flex-order: -1;
|
||||
-webkit-order: -1;
|
||||
-moz-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.flex-mid {
|
||||
-webkit-box-ordinal-group: 1;
|
||||
-moz-box-ordinal-group: 1;
|
||||
-ms-flex-order: 1;
|
||||
-webkit-order: 1;
|
||||
-moz-order: 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.flex-end {
|
||||
-webkit-box-ordinal-group: 42;
|
||||
-moz-box-ordinal-group: 42;
|
||||
-ms-flex-order: 42;
|
||||
-webkit-order: 42;
|
||||
-moz-order: 42;
|
||||
order: 42;
|
||||
}
|
||||
|
||||
/* Alignments (blocks and inline) */
|
||||
/* ------------------------------ */
|
||||
|
||||
.left { float: left; }
|
||||
.right { float: right; }
|
||||
|
||||
img.left { margin-right: 1em; }
|
||||
img.right { margin-left: 1em; }
|
||||
|
||||
img.left,
|
||||
img.right { margin-bottom: 5px; }
|
||||
|
||||
.center { margin-left: auto; margin-right: auto; }
|
||||
.txtleft { text-align: left; }
|
||||
.txtright { text-align: right; }
|
||||
.txtcenter { text-align: center; }
|
||||
|
||||
/**
|
||||
* Blocks widths
|
||||
* (percentages and pixels)
|
||||
*/
|
||||
.w10 { width: 10%; }
|
||||
.w20 { width: 20%; }
|
||||
.w25 { width: 25%; }
|
||||
.w30 { width: 30%; }
|
||||
.w33 { width: 33.333%; }
|
||||
.w40 { width: 40%; }
|
||||
.w50 { width: 50%; }
|
||||
.w60 { width: 60%; }
|
||||
.w66 { width: 66.666%; }
|
||||
.w70 { width: 70%; }
|
||||
.w75 { width: 75%; }
|
||||
.w80 { width: 80%; }
|
||||
.w90 { width: 90%; }
|
||||
.w100 { width: 100%; }
|
||||
|
||||
.w50p { width: 50px; }
|
||||
.w100p { width: 100px; }
|
||||
.w150p { width: 150px; }
|
||||
.w200p { width: 200px; }
|
||||
.w300p { width: 300px; }
|
||||
.w400p { width: 400px; }
|
||||
.w500p { width: 500px; }
|
||||
.w600p { width: 600px; }
|
||||
.w700p { width: 700px; }
|
||||
.w800p { width: 800px; }
|
||||
.w960p { width: 960px; }
|
||||
.mw960p { max-width: 960px; }
|
||||
|
||||
/**
|
||||
* Spacing helpers
|
||||
* p, m = padding,margin
|
||||
* a, t, r, b, l = all, top, right, bottom, left
|
||||
* s, m, l, n, 0 = small(10px), medium(20px), large(30px), zero or none(0)
|
||||
* Source: https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
||||
*/
|
||||
.m-reset, .ma0 { margin: 0 !important; }
|
||||
.p-reset, .pa0 { padding: 0 !important; }
|
||||
.ma1, .mas { margin: 10px !important; }
|
||||
.ma2, .mam { margin: 20px !important; }
|
||||
.ma3, .mal { margin: 30px !important; }
|
||||
.pa1, .pas { padding: 10px; }
|
||||
.pa2, .pam { padding: 20px; }
|
||||
.pa3, .pal { padding: 30px; }
|
||||
|
||||
.mt0, .mtn { margin-top: 0 !important; }
|
||||
.mt1, .mts { margin-top: 10px !important; }
|
||||
.mt2, .mtm { margin-top: 20px !important; }
|
||||
.mt3, .mtl { margin-top: 30px !important; }
|
||||
.mr0, .mrn { margin-right: 0; }
|
||||
.mr1, .mrs { margin-right: 10px; }
|
||||
.mr2, .mrm { margin-right: 20px; }
|
||||
.mr3, .mrl { margin-right: 30px; }
|
||||
.mb0, .mbn { margin-bottom: 0 !important; }
|
||||
.mb1, .mbs { margin-bottom: 10px !important; }
|
||||
.mb2, .mbm { margin-bottom: 20px !important; }
|
||||
.mb3, .mbl { margin-bottom: 30px !important; }
|
||||
.ml0, .mln { margin-left: 0; }
|
||||
.ml1, .mls { margin-left: 10px; }
|
||||
.ml2, .mlm { margin-left: 20px; }
|
||||
.ml3, .mll { margin-left: 30px; }
|
||||
|
||||
.pt0, .ptn { padding-top: 0; }
|
||||
.pt1, .pts { padding-top: 10px; }
|
||||
.pt2, .ptm { padding-top: 20px; }
|
||||
.pt3, .ptl { padding-top: 30px; }
|
||||
.pr0, .prn { padding-right: 0; }
|
||||
.pr1, .prs { padding-right: 10px; }
|
||||
.pr2, .prm { padding-right: 20px; }
|
||||
.pr3, .prl { padding-right: 30px; }
|
||||
.pb0, .pbn { padding-bottom: 0; }
|
||||
.pb1, .pbs { padding-bottom: 10px; }
|
||||
.pb2, .pbm { padding-bottom: 20px; }
|
||||
.pb3, .pbl { padding-bottom: 30px; }
|
||||
.pl0, .pln { padding-left: 0; }
|
||||
.pl1, .pls { padding-left: 10px; }
|
||||
.pl2, .plm { padding-left: 20px; }
|
||||
.pl3, .pll { padding-left: 30px; }
|
||||
|
||||
|
||||
|
||||
.desktop-hidden { display: none; } /* hidden on desktop */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==header */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==sidebar */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==footer */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==forms */
|
||||
/* ----------------------------- */
|
||||
form,
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Bugfix alignment
|
||||
*/
|
||||
input,
|
||||
button, select,
|
||||
label, .btn {
|
||||
vertical-align: middle; /* 1 */
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevents horizontal resizing
|
||||
*/
|
||||
textarea {
|
||||
resize: vertical; /* 1 */
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==main */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==iefix */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* HasLayout for IE6/IE7 */
|
||||
.ie67 {
|
||||
.clearfix, .line, .mod, .row, .col {
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
/* Warning: .col needs a width on IE6/IE7 */
|
||||
.col {
|
||||
display: inline;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a slash at the end of this comment
|
||||
* If you want to enable box-sizing for IE6/IE7
|
||||
* with a polyfill
|
||||
* Source: https://github.com/Schepp/box-sizing-polyfill *
|
||||
* {
|
||||
behavior: url(/js/boxsizing.htc);
|
||||
}
|
||||
/**/
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Bugfixes for IE8
|
||||
*/
|
||||
.ie8 img {
|
||||
width: auto; /* 1 */
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* ==print */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* Quick print reset */
|
||||
@media print {
|
||||
p, blockquote {
|
||||
orphans: 2;
|
||||
widows: 2;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
ul, ol {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
h1, h2, h3,
|
||||
caption {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
}
|
||||
73
sass/print.scss
Normal file
73
sass/print.scss
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
/* ----------------------------- */
|
||||
/* ==print */
|
||||
/* ----------------------------- */
|
||||
|
||||
@media print {
|
||||
body {
|
||||
width: auto !important;
|
||||
margin: auto !important;
|
||||
font-family: serif;
|
||||
font-size: 12pt;
|
||||
background-color: #fff !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
blockquote, p
|
||||
ul, ol {
|
||||
color: #000 !important;
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays possible .print elements
|
||||
*/
|
||||
.print {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. No orphans
|
||||
* 2. No widows
|
||||
*/
|
||||
p,
|
||||
blockquote {
|
||||
orphans: 3; /* 1 */
|
||||
widows: 3; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevents breaks inside these elements
|
||||
*/
|
||||
blockquote,
|
||||
ul, ol {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/**
|
||||
* Forces page break before main headers
|
||||
*/
|
||||
h1 {
|
||||
page-break-before: always;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevents breaks after these elements
|
||||
*/
|
||||
h1, h2, h3,
|
||||
caption {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Displays url after link
|
||||
*/
|
||||
a {
|
||||
color: #000 !important;
|
||||
text-decoration: underline !important;
|
||||
|
||||
&[href]:after {
|
||||
content: " (" attr(href) ")"; /* 1 */
|
||||
}
|
||||
}
|
||||
}
|
||||
222
sass/rwd.scss
Normal file
222
sass/rwd.scss
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
/* ----------------------------- */
|
||||
/* ==desktop and retina medias */
|
||||
/* ----------------------------- */
|
||||
|
||||
@include r(medium) {
|
||||
/* Here go rules for big resources and big screens
|
||||
* like: background-images, font-faces, etc.
|
||||
*/
|
||||
}
|
||||
|
||||
@media
|
||||
only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
only screen and ( min--moz-device-pixel-ratio: 2),
|
||||
only screen and ( -o-min-device-pixel-ratio: 2/1),
|
||||
only screen and ( min-device-pixel-ratio: 2),
|
||||
only screen and ( min-resolution: 192dpi),
|
||||
only screen and ( min-resolution: 2dppx) {
|
||||
/* Retina-specific stuff here */
|
||||
}
|
||||
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ==Responsive large / medium / tiny */
|
||||
/* ---------------------------------- */
|
||||
|
||||
@include r(large) {
|
||||
|
||||
/* Layouts for large (l) screens */
|
||||
.large-hidden,
|
||||
.tablet-hidden { display: none !important; }
|
||||
.large-visible { display: block !important; }
|
||||
|
||||
.large-no-float { float: none; }
|
||||
|
||||
.large-inbl {
|
||||
@include inline-block(top);
|
||||
float: none;
|
||||
}
|
||||
|
||||
.large-row {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.large-col {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Widths for large (l) screens */
|
||||
.large-w25 { width: 25% !important; }
|
||||
.large-w33 { width: 33.3333% !important; }
|
||||
.large-w50 { width: 50% !important; }
|
||||
.large-w66 { width: 66.6666% !important; }
|
||||
.large-w75 { width: 75% !important; }
|
||||
.large-w100 {
|
||||
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 (l) screens */
|
||||
.large-ma0,
|
||||
.large-man { margin: 0 !important; }
|
||||
}
|
||||
|
||||
@include r(medium) {
|
||||
|
||||
/* quick tablet reset */
|
||||
.w60,
|
||||
.w66,
|
||||
.w70,
|
||||
.w75,
|
||||
.w80,
|
||||
.w90,
|
||||
.w100,
|
||||
.w600p,
|
||||
.w700p,
|
||||
.w800p,
|
||||
.w960p,
|
||||
.mw960p,
|
||||
.medium-wauto { width: auto; }
|
||||
|
||||
/* layouts for medium (m) screens */
|
||||
.medium-hidden,
|
||||
.tablet-hidden { display: none !important; }
|
||||
.medium-visible { display: block !important; }
|
||||
|
||||
.medium-no-float {float: none; }
|
||||
|
||||
.medium-inbl {
|
||||
@include inline-block(top);
|
||||
float: none;
|
||||
}
|
||||
|
||||
.medium-row {
|
||||
display: table !important;
|
||||
table-layout: fixed !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.medium-col {
|
||||
display: table-cell !important;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
/* widths for medium (m) screens */
|
||||
.medium-w25 { width: 25% !important; }
|
||||
.medium-w33 { width: 33.3333% !important; }
|
||||
.medium-w50 { width: 50% !important; }
|
||||
.medium-w66 { width: 66.6666% !important; }
|
||||
.medium-w75 { width: 75% !important; }
|
||||
|
||||
.medium-w100 {
|
||||
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 (m) screens */
|
||||
.medium-ma0,
|
||||
.medium-man { margin: 0 !important; }
|
||||
|
||||
/* Responsive grids */
|
||||
.grid4 > * {width: 49% !important; }
|
||||
.grid4 > :first-child + * + * {margin-left: 0 !important;}
|
||||
.grid6 > * {width: 32% !important; }
|
||||
.grid6 > :first-child + * + * + * {margin-left: 0 !important;}
|
||||
}
|
||||
|
||||
@include r(small) {
|
||||
|
||||
/* Quick smartphone reset */
|
||||
.mod,
|
||||
.item,
|
||||
.col,
|
||||
fieldset {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.w30,
|
||||
.w33,
|
||||
.w40,
|
||||
.w50,
|
||||
.w300p,
|
||||
.w400p,
|
||||
.w500p {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: block !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Layouts for tiny (t) screens */
|
||||
.tiny-hidden,
|
||||
.phone-hidden { display: none !important; }
|
||||
.tiny-visible { display: block !important; }
|
||||
|
||||
.tiny-no-float { float: none; }
|
||||
|
||||
.tiny-inbl {
|
||||
@include inline-block(top);
|
||||
float: none;
|
||||
}
|
||||
|
||||
.tiny-row {
|
||||
display: table !important;
|
||||
table-layout: fixed !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.tiny-col {
|
||||
display: table-cell !important;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
display: block !important;
|
||||
width: auto !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
thead { display: none; }
|
||||
|
||||
/* widths for tiny (t) screens */
|
||||
.tiny-w25 { width: 25% !important; }
|
||||
.tiny-w33 { width: 33.3333% !important; }
|
||||
.tiny-w50 { width: 50% !important; }
|
||||
.tiny-w66 { width: 66.6666% !important; }
|
||||
.tiny-w75 { width: 75% !important; }
|
||||
|
||||
.tiny-w100 {
|
||||
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 (t) screens */
|
||||
.tiny-ma0,
|
||||
.tiny-man { margin: 0 !important; }
|
||||
}
|
||||
89
sass/table.scss
Normal file
89
sass/table.scss
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
/* ----------------------------- */
|
||||
/* ==tables */
|
||||
/* ----------------------------- */
|
||||
$border: 1px solid #ccc;
|
||||
|
||||
table,
|
||||
.table {
|
||||
max-width : 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding: 10px;
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
table {
|
||||
border: $border;
|
||||
}
|
||||
|
||||
tr > * + * {
|
||||
border-left: $border;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: .3em .8em;
|
||||
text-align: left;
|
||||
border-bottom: $border;
|
||||
}
|
||||
|
||||
td {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/**
|
||||
* Alternate tables
|
||||
*/
|
||||
.alternate {
|
||||
border: 0;
|
||||
|
||||
tbody { border: $border; }
|
||||
|
||||
thead tr > * + * { border-left: 0; }
|
||||
tbody tr > * + * { border-left: $border; }
|
||||
}
|
||||
|
||||
/**
|
||||
* Alternate-vert tables
|
||||
*/
|
||||
.alternate-vert {
|
||||
border: 0;
|
||||
border-right: $border;
|
||||
|
||||
tr > :first-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
tr > * + * {
|
||||
border-top: $border;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Striped tables
|
||||
*/
|
||||
.striped tbody tr:nth-child(odd) {
|
||||
background: #eee;
|
||||
background: rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
/**
|
||||
* Striped-vert tables
|
||||
*/
|
||||
.striped-vert tr > :first-child {
|
||||
background: #eee;
|
||||
background: rgba(0, 0, 0, .05);
|
||||
}
|
||||
Loading…
Reference in a new issue