233 lines
5.3 KiB
SCSS
233 lines
5.3 KiB
SCSS
/* ----------------------------- */
|
|
/* ==layouts */
|
|
/* ----------------------------- */
|
|
|
|
/**
|
|
* Switching box-model for all elements
|
|
* 1. ...and pseudo-elements
|
|
*/
|
|
*,
|
|
*:after, /* 1 */
|
|
*:before {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
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)
|
|
*/
|
|
%width-helper {
|
|
@include mq(small) {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
.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%; @extend %width-helper; }
|
|
.w66 { width: 66.666%; @extend %width-helper; }
|
|
.w70 { width: 70%; @extend %width-helper; }
|
|
.w75 { width: 75%; @extend %width-helper; }
|
|
.w80 { width: 80%; @extend %width-helper; }
|
|
.w90 { width: 90%; @extend %width-helper; }
|
|
.w100 { width: 100%; @extend %width-helper; }
|
|
|
|
.w50p { width: 50px; }
|
|
.w100p { width: 100px; }
|
|
.w150p { width: 150px; }
|
|
.w200p { width: 200px; }
|
|
.w300p { width: 300px; }
|
|
.w400p { width: 400px; }
|
|
.w500p { width: 500px; }
|
|
.w600p { width: 600px; @extend %width-helper; }
|
|
.w700p { width: 700px; @extend %width-helper; }
|
|
.w800p { width: 800px; @extend %width-helper; }
|
|
.w960p { width: 960px; @extend %width-helper; }
|
|
.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; } |