Updates some of the files in this code.
This commit is contained in:
mrmrs
commit
97bbc7b191
50 changed files with 3979 additions and 0 deletions
13
Rakefile
Normal file
13
Rakefile
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
require "rubygems"
|
||||
require 'rake'
|
||||
|
||||
desc "Start Sass so that is compiles to css upon file save"
|
||||
task :sass do
|
||||
system "sass --watch sass:css"
|
||||
end # task :sass
|
||||
|
||||
desc "Start Sass so that is compiles to css upon file save"
|
||||
task :minify do
|
||||
system "sass --watch sass:css --style compressed"
|
||||
end # task :minify
|
||||
|
||||
1
css/i.css
Normal file
1
css/i.css
Normal file
File diff suppressed because one or more lines are too long
BIN
css/i.css.gz
Normal file
BIN
css/i.css.gz
Normal file
Binary file not shown.
30
sass/_background_repeat.scss
Normal file
30
sass/_background_repeat.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
/* ==========================================================================
|
||||
BACKGROUND REPEAT
|
||||
========================================================================== */
|
||||
|
||||
.bg-norep { background-repeat: no-repeat; }
|
||||
.bg-x { background-repeat: repeat-x; }
|
||||
.bg-y { background-repeat: repeat-y; }
|
||||
.bg-rep { background-repeat: repeat; }
|
||||
|
||||
@include break(not-small) {
|
||||
.bg-norep-ns { background-repeat: no-repeat; }
|
||||
.bg-x-ns { background-repeat: repeat-x; }
|
||||
.bg-y-ns { background-repeat: repeat-y; }
|
||||
.bg-rep-ns { background-repeat: repeat; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.bg-norep-m { background-repeat: no-repeat; }
|
||||
.bg-x-m { background-repeat: repeat-x; }
|
||||
.bg-y-m { background-repeat: repeat-y; }
|
||||
.bg-rep-m { background-repeat: repeat; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.bg-norep-l { background-repeat: no-repeat; }
|
||||
.bg-x-l { background-repeat: repeat-x; }
|
||||
.bg-y-l { background-repeat: repeat-y; }
|
||||
.bg-rep-l { background-repeat: repeat; }
|
||||
}
|
||||
|
||||
42
sass/_background_size.scss
Normal file
42
sass/_background_size.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/* ==========================================================================
|
||||
BACKGROUND SIZE
|
||||
========================================================================== */
|
||||
|
||||
.bg-cv { background-size: cover; }
|
||||
.bg-cn { background-size: contain; }
|
||||
.bg-quarter { background-size: 25%; }
|
||||
.bg-half { background-size: 50%; }
|
||||
.bg-three-quarters { background-size: 75%; }
|
||||
.bg-full { background-size: 100%; }
|
||||
.bg-auto { background-size: auto; }
|
||||
|
||||
@include break(not-small) {
|
||||
.bg-cv-ns { background-size: cover; }
|
||||
.bg-cn-ns { background-size: contain; }
|
||||
.bg-quarter-ns { background-size: 25%; }
|
||||
.bg-half-ns { background-size: 50%; }
|
||||
.bg-three-quarters-ns { background-size: 75%; }
|
||||
.bg-full-ns { background-size: 100%; }
|
||||
.bg-auto-ns { background-size: auto; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.bg-cv-m { background-size: cover; }
|
||||
.bg-cn-m { background-size: contain; }
|
||||
.bg-quarter-m { background-size: 25%; }
|
||||
.bg-half-m { background-size: 50%; }
|
||||
.bg-three-quarters-m { background-size: 75%; }
|
||||
.bg-full-m { background-size: 100%; }
|
||||
.bg-auto-m { background-size: auto; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.bg-cv-l { background-size: cover; }
|
||||
.bg-cn-l { background-size: contain; }
|
||||
.bg-quarter-l { background-size: 25%; }
|
||||
.bg-half-l { background-size: 50%; }
|
||||
.bg-three-quarters-l { background-size: 75%; }
|
||||
.bg-full-l { background-size: 100%; }
|
||||
.bg-auto-l { background-size: auto; }
|
||||
}
|
||||
|
||||
145
sass/_border_colors.scss
Normal file
145
sass/_border_colors.scss
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
/* ==========================================================================
|
||||
BORDER COLORS
|
||||
========================================================================== */
|
||||
|
||||
.bor--blk { border-color: $near-black; }
|
||||
.bor--dk-gry { border-color: $dark-gray; }
|
||||
.bor--md-gry { border-color: $mid-gray; }
|
||||
.bor--gray { border-color: $gray; }
|
||||
.bor--silver { border-color: $silver; }
|
||||
.bor--lt-slvr { border-color: $light-silver; }
|
||||
.bor--lt-gry { border-color: $light-gray; }
|
||||
.bor--near-wht { border-color: $near-white; }
|
||||
.bor--wht { border-color: $white; }
|
||||
|
||||
.bor--pink { border-color: $pink;}
|
||||
.bor--lightpink { border-color: $lightpink; }
|
||||
.bor--hotpink { border-color: $hotpink; }
|
||||
.bor--deeppink { border-color: $deeppink; }
|
||||
.bor--palevioletred { border-color: $palevioletred; }
|
||||
.bor--mediumvioletred { border-color: $mediumvioletred; }
|
||||
.bor--lightsalmon { border-color: $lightsalmon; }
|
||||
.bor--salmon { border-color: $salmon; }
|
||||
.bor--darksalmon { border-color: $darksalmon; }
|
||||
.bor--lightcoral { border-color: $lightcoral; }
|
||||
.bor--indianred { border-color: $indianred; }
|
||||
.bor--crimson { border-color: $crimson; }
|
||||
.bor--firebrick { border-color: $firebrick; }
|
||||
.bor--darkred { border-color: $darkred; }
|
||||
.bor--red { border-color: $red; }
|
||||
.bor--orangered { border-color: $orangered; }
|
||||
.bor--tomato { border-color: $tomato; }
|
||||
.bor--coral { border-color: $coral; }
|
||||
.bor--darkorange { border-color: $darkorange; }
|
||||
.bor--orange { border-color: $orange; }
|
||||
.bor--gold { border-color: $gold; }
|
||||
.bor--yellow { border-color: $yellow; }
|
||||
.bor--lightyellow { border-color: $lightyellow; }
|
||||
.bor--lemonchiffon { border-color: $lemonchiffon; }
|
||||
.bor--lightgoldenrod { border-color: $lightgoldenrodyellow; }
|
||||
.bor--papayawhip { border-color: $papayawhip; }
|
||||
.bor--moccasin { border-color: $moccasin; }
|
||||
.bor--peachpuff { border-color: $peachpuff; }
|
||||
.bor--palegoldenrod { border-color: $palegoldenrod; }
|
||||
.bor--khaki { border-color: $khaki; }
|
||||
.bor--darkkhaki { border-color: $darkkhaki; }
|
||||
.bor--cornsilk { border-color: $cornsilk; }
|
||||
.bor--blanchedalmond { border-color: $blanchedalmond; }
|
||||
.bor--bisque { border-color: $bisque; }
|
||||
.bor--navajowhite { border-color: $navajowhite; }
|
||||
.bor--wheat { border-color: $wheat; }
|
||||
.bor--burlywood { border-color: $burlywood; }
|
||||
.bor--tan { border-color: $tan; }
|
||||
.bor--rosybrown { border-color: $rosybrown; }
|
||||
.bor--sandybrown { border-color: $sandybrown; }
|
||||
.bor--goldenrod { border-color: $goldenrod; }
|
||||
.bor--darkgoldenrod { border-color: $darkgoldenrod; }
|
||||
.bor--peru { border-color: $peru; }
|
||||
.bor--chocolate { border-color: $chocolate; }
|
||||
.bor--saddlebrown { border-color: $saddlebrown; }
|
||||
.bor--sienna { border-color: $sienna; }
|
||||
.bor--brown { border-color: $brown; }
|
||||
.bor--maroon { border-color: $maroon; }
|
||||
.bor--darkolivegreen { border-color: $darkolivegreen; }
|
||||
.bor--olive { border-color: $olive; }
|
||||
.bor--olivedrab { border-color: $olivedrab; }
|
||||
.bor--yellowgreen { border-color: $yellowgreen; }
|
||||
.bor--limegreen { border-color: $limegreen; }
|
||||
.bor--lime { border-color: $lime; }
|
||||
.bor--lawngreen { border-color: $lawngreen; }
|
||||
.bor--chartreuse { border-color: $chartreuse; }
|
||||
.bor--greenyellow { border-color: $greenyellow; }
|
||||
.bor--springgreen { border-color: $springgreen; }
|
||||
.bor--medpringgreen { border-color: $mediumspringgreen; }
|
||||
.bor--lightgreen { border-color: $lightgreen; }
|
||||
.bor--palegreen { border-color: $palegreen; }
|
||||
.bor--darkseagreen { border-color: $darkseagreen; }
|
||||
.bor--mediumseagreen { border-color: $mediumseagreen; }
|
||||
.bor--seagreen { border-color: $seagreen; }
|
||||
.bor--forestgreen { border-color: $forestgreen; }
|
||||
.bor--green { border-color: $green; }
|
||||
.bor--darkgreen { border-color: $darkgreen; }
|
||||
.bor--mediumaquamarine { border-color: $mediumaquamarine; }
|
||||
.bor--aqua { border-color: $aqua; }
|
||||
.bor--cyan { border-color: $cyan; }
|
||||
.bor--lightcyan { border-color: $lightcyan; }
|
||||
.bor--paleturquoise { border-color: $paleturquoise; }
|
||||
.bor--aquamarine { border-color: $aquamarine; }
|
||||
.bor--turquoise { border-color: $turquoise; }
|
||||
.bor--mediumturquoise { border-color: $mediumturquoise; }
|
||||
.bor--darkturquoise { border-color: $darkturquoise; }
|
||||
.bor--lightseagreen { border-color: $lightseagreen; }
|
||||
.bor--cadetblue { border-color: $cadetblue; }
|
||||
.bor--darkcyan { border-color: $darkcyan; }
|
||||
.bor--teal { border-color: $teal; }
|
||||
.bor--lightsteelblue { border-color: $lightsteelblue; }
|
||||
.bor--powderblue { border-color: $powderblue; }
|
||||
.bor--lightblue { border-color: $lightblue; }
|
||||
.bor--skyblue { border-color: $skyblue; }
|
||||
.bor--lightskyblue { border-color: $lightskyblue; }
|
||||
.bor--deepskyblue { border-color: $deepskyblue; }
|
||||
.bor--dodgerblue { border-color: $dodgerblue; }
|
||||
.bor--cornflowerblue { border-color: $cornflowerblue; }
|
||||
.bor--steelblue { border-color: $steelblue; }
|
||||
.bor--royalblue { border-color: $royalblue; }
|
||||
.bor--blue { border-color: $blue; }
|
||||
.bor--mediumblue { border-color: $mediumblue; }
|
||||
.bor--darkblue { border-color: $darkblue; }
|
||||
.bor--navy { border-color: $navy; }
|
||||
.bor--midnightblue { border-color: $midnightblue; }
|
||||
.bor--lavender { border-color: $lavender; }
|
||||
.bor--thistle { border-color: $thistle; }
|
||||
.bor--plum { border-color: $plum; }
|
||||
.bor--violet { border-color: $violet; }
|
||||
.bor--orchid { border-color: $orchid; }
|
||||
.bor--fuchsia { border-color: $fuchsia; }
|
||||
.bor--magenta { border-color: $magenta; }
|
||||
.bor--mediumorchid { border-color: $mediumorchid; }
|
||||
.bor--mediumpurple { border-color: $mediumpurple; }
|
||||
.bor--blueviolet { border-color: $blueviolet; }
|
||||
.bor--darkviolet { border-color: $darkviolet; }
|
||||
.bor--darkorchid { border-color: $darkorchid; }
|
||||
.bor--darkmagenta { border-color: $darkmagenta; }
|
||||
.bor--purple { border-color: $purple; }
|
||||
.bor--indigo { border-color: $indigo; }
|
||||
.bor--darkslateblue { border-color: $darkslateblue; }
|
||||
.bor--slateblue { border-color: $slateblue; }
|
||||
.bor--mediumslateblue { border-color: $mediumslateblue; }
|
||||
.bor--white { border-color: $white; }
|
||||
.bor--snow { border-color: $snow; }
|
||||
.bor--honeydew { border-color: $honeydew; }
|
||||
.bor--mintcream { border-color: $mintcream; }
|
||||
.bor--azure { border-color: $azure; }
|
||||
.bor--aliceblue { border-color: $aliceblue; }
|
||||
.bor--ghostwhite { border-color: $ghostwhite; }
|
||||
.bor--whitesmoke { border-color: $whitesmoke; }
|
||||
.bor--seashell { border-color: $seashell; }
|
||||
.bor--beige { border-color: $beige; }
|
||||
.bor--oldlace { border-color: $oldlace; }
|
||||
.bor--floralwhite { border-color: $floralwhite; }
|
||||
.bor--ivory { border-color: $ivory; }
|
||||
.bor--antiquewhite { border-color: $antiquewhite; }
|
||||
.bor--linen { border-color: $linen; }
|
||||
.bor--lavenderblush { border-color: $lavenderblush; }
|
||||
.bor--mistyrose { border-color: $mistyrose; }
|
||||
.bor--gainsboro { border-color: $gainsboro; }
|
||||
46
sass/_border_radius.scss
Normal file
46
sass/_border_radius.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/* ==========================================================================
|
||||
BORDER RADIUS
|
||||
========================================================================== */
|
||||
|
||||
.brn { border-radius: 0; }
|
||||
.br { border-radius: .125rem; }
|
||||
.br2 { border-radius: .25rem; }
|
||||
.br3 { border-radius: .5rem; }
|
||||
.br4 { border-radius: 1rem; }
|
||||
.br5 { border-radius: 2rem; }
|
||||
.br-circ { border-radius: 9999px; }
|
||||
.br-100 { border-radius: 100%; }
|
||||
|
||||
@include break(not-small) {
|
||||
.brn-ns { border-radius: 0; }
|
||||
.br-ns { border-radius: .125rem; }
|
||||
.br2-ns { border-radius: .25rem; }
|
||||
.br3-ns { border-radius: .5rem; }
|
||||
.br4-ns { border-radius: 1rem; }
|
||||
.br5-ns { border-radius: 2rem; }
|
||||
.br-circ-ns { border-radius: 9999px; }
|
||||
.br-100-ns { border-radius: 100%; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.brn-m { border-radius: 0; }
|
||||
.br-m { border-radius: .125rem; }
|
||||
.br2-m { border-radius: .25rem; }
|
||||
.br3-m { border-radius: .5rem; }
|
||||
.br4-m { border-radius: 1rem; }
|
||||
.br5-m { border-radius: 2rem; }
|
||||
.br-circ-m { border-radius: 9999px; }
|
||||
.br-100-m { border-radius: 100%; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.brn-l { border-radius: 0; }
|
||||
.br-l { border-radius: .125rem; }
|
||||
.br2-l { border-radius: .25rem; }
|
||||
.br3-l { border-radius: .5rem; }
|
||||
.br4-l { border-radius: 1rem; }
|
||||
.br5-l { border-radius: 2rem; }
|
||||
.br-circ-l { border-radius: 9999px; }
|
||||
.br-100-l { border-radius: 100%; }
|
||||
}
|
||||
|
||||
10
sass/_border_style.scss
Normal file
10
sass/_border_style.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/* ==========================================================================
|
||||
BORDER STYLES
|
||||
========================================================================== */
|
||||
|
||||
.ba-none { border-style: none; }
|
||||
.ba-hidden { border-style: hidden; }
|
||||
.ba-dotted { border-style: dotted; }
|
||||
.ba-dashed { border-style: dashed; }
|
||||
.ba-solid { border-style: solid; }
|
||||
|
||||
26
sass/_border_widths.scss
Normal file
26
sass/_border_widths.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/* ==========================================================================
|
||||
BORDER WIDTHS
|
||||
|
||||
LEGEND
|
||||
|
||||
b = border
|
||||
|
||||
a = all
|
||||
t = top
|
||||
b = bottom
|
||||
l = left
|
||||
r = right
|
||||
|
||||
w = width
|
||||
|
||||
0-5 = step in sizing scale
|
||||
|
||||
========================================================================== */
|
||||
|
||||
.baw0 { border-width: 0; }
|
||||
.baw1 { border-width: .125rem; }
|
||||
.baw2 { border-width: .25rem; }
|
||||
.baw3 { border-width: .5rem; }
|
||||
.baw4 { border-width: .75rem; }
|
||||
.baw5 { border-width: 1rem; }
|
||||
|
||||
34
sass/_borders.scss
Normal file
34
sass/_borders.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
/* ==========================================================================
|
||||
BORDER BASE
|
||||
========================================================================== */
|
||||
|
||||
.ba { border-style: solid; border-width: 1px; }
|
||||
.bt { border-style: solid; border-left-width: 1px; }
|
||||
.br { border-style: solid; border-right-width: 1px; }
|
||||
.bb { border-style: solid; border-bottom-width: 1px; }
|
||||
.bl { border-style: solid; border-left-width: 1px; }
|
||||
|
||||
@include break(not-small) {
|
||||
.ba-ns { border-style: solid; border-width: 1px; }
|
||||
.bt-ns { border-style: solid; border-left-width: 1px; }
|
||||
.br-ns { border-style: solid; border-right-width: 1px; }
|
||||
.bb-ns { border-style: solid; border-bottom-width: 1px; }
|
||||
.bl-ns { border-style: solid; border-left-width: 1px; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.ba-m { border-style: solid; border-width: 1px; }
|
||||
.bt-m { border-style: solid; border-left-width: 1px; }
|
||||
.br-m { border-style: solid; border-right-width: 1px; }
|
||||
.bb-m { border-style: solid; border-bottom-width: 1px; }
|
||||
.bl-m { border-style: solid; border-left-width: 1px; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.ba-l { border-style: solid; border-width: 1px; }
|
||||
.bt-l { border-style: solid; border-left-width: 1px; }
|
||||
.br-l { border-style: solid; border-right-width: 1px; }
|
||||
.bb-l { border-style: solid; border-bottom-width: 1px; }
|
||||
.bl-l { border-style: solid; border-left-width: 1px; }
|
||||
}
|
||||
|
||||
17
sass/_clears.scss
Normal file
17
sass/_clears.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/* ==========================================================================
|
||||
CLEARS
|
||||
========================================================================== */
|
||||
|
||||
.cn { clear: none; }
|
||||
.cl { clear: left; }
|
||||
.cr { clear: right; }
|
||||
.cb { clear: both; }
|
||||
|
||||
/* Nicolas Gallaghers Clearfix solution
|
||||
Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
|
||||
|
||||
.cf:before,
|
||||
.cf:after { content: " "; display: table; }
|
||||
.cf:after { clear: both; }
|
||||
.cf { *zoom: 1; }
|
||||
|
||||
157
sass/_colors.scss
Normal file
157
sass/_colors.scss
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
/* ==========================================================================
|
||||
COLORS
|
||||
========================================================================== */
|
||||
|
||||
/* variables */
|
||||
|
||||
$near-black: #111;
|
||||
$dark-gray:#333;
|
||||
$mid-gray:#666;
|
||||
$gray: #888;
|
||||
$silver: #999;
|
||||
$light-silver: #aaa;
|
||||
$light-gray: #ccc;
|
||||
$near-white: #eee;
|
||||
$white: #fff;
|
||||
|
||||
$pink: #ffc0cb;
|
||||
$lightpink: #ffb6c1;
|
||||
$hotpink: #ff69b4;
|
||||
$deeppink: #ff1493;
|
||||
$palevioletred: #db7093;
|
||||
$mediumvioletred: #c71585;
|
||||
$lightsalmon: #ffa07a;
|
||||
$salmon: #fa8072;
|
||||
$darksalmon: #e9967a;
|
||||
$lightcoral: #f08080;
|
||||
$indianred: #cd5c5c;
|
||||
$crimson: #dc143c;
|
||||
$firebrick: #b22222;
|
||||
$darkred: #8b0000;
|
||||
$red: #ff0000;
|
||||
$orangered: #ff4500;
|
||||
$tomato: #ff6347;
|
||||
$coral: #ff7f50;
|
||||
$darkorange: #ff8c00;
|
||||
$orange: #ffa500;
|
||||
$gold: #ffd700;
|
||||
$yellow: #ffff00;
|
||||
$lightyellow: #ffffe0;
|
||||
$lemonchiffon: #fffacd;
|
||||
$lightgoldenrodyellow: #fafad2;
|
||||
$papayawhip: #ffefd5;
|
||||
$moccasin: #ffe4b5;
|
||||
$peachpuff: #ffdab9;
|
||||
$palegoldenrod: #eee8aa;
|
||||
$khaki: #f0e68c;
|
||||
$darkkhaki: #bdb76b;
|
||||
$cornsilk: #fff8dc;
|
||||
$blanchedalmond: #ffebcd;
|
||||
$bisque: #ffe4c4;
|
||||
$navajowhite: #ffdead;
|
||||
$wheat: #f5deb3;
|
||||
$burlywood: #deb887;
|
||||
$tan: #d2b48c;
|
||||
$rosybrown: #bc8f8f;
|
||||
$sandybrown: #f4a460;
|
||||
$goldenrod: #daa520;
|
||||
$darkgoldenrod: #b8860b;
|
||||
$peru: #cd853f;
|
||||
$chocolate: #d2691e;
|
||||
$saddlebrown: #8b4513;
|
||||
$sienna: #a0522d;
|
||||
$brown: #a52a2a;
|
||||
$maroon: #800000;
|
||||
$darkolivegreen: #556b2f;
|
||||
$olive: #808000;
|
||||
$olivedrab: #6b8e23;
|
||||
$yellowgreen: #9acd32;
|
||||
$limegreen: #32cd32;
|
||||
$lime: #00ff00;
|
||||
$lawngreen: #7cfc00;
|
||||
$chartreuse: #7fff00;
|
||||
$greenyellow: #adff2f;
|
||||
$springgreen: #00ff7f;
|
||||
$mediumspringgreen: #00fa9a;
|
||||
$lightgreen: #90ee90;
|
||||
$palegreen: #98fb98;
|
||||
$darkseagreen: #8fbc8f;
|
||||
$mediumseagreen: #3cb371;
|
||||
$seagreen: #2e8b57;
|
||||
$forestgreen: #228b22;
|
||||
$green: #008000;
|
||||
$darkgreen: #006400;
|
||||
$mediumaquamarine: #66cdaa;
|
||||
$aqua: #00ffff;
|
||||
$cyan: #00ffff;
|
||||
$lightcyan: #e0ffff;
|
||||
$paleturquoise: #afeeee;
|
||||
$aquamarine: #7fffd4;
|
||||
$turquoise: #40e0d0;
|
||||
$mediumturquoise: #48d1cc;
|
||||
$darkturquoise: #00ced1;
|
||||
$lightseagreen: #20b2aa;
|
||||
$cadetblue: #5f9ea0;
|
||||
$darkcyan: #008b8b;
|
||||
$teal: #008080;
|
||||
$lightsteelblue: #b0c4de;
|
||||
$powderblue: #b0e0e6;
|
||||
$lightblue: #add8e6;
|
||||
$skyblue: #87ceeb;
|
||||
$lightskyblue: #87cefa;
|
||||
$deepskyblue: #00bfff;
|
||||
$dodgerblue: #1e90ff;
|
||||
$cornflowerblue: #6495ed;
|
||||
$steelblue: #4682b4;
|
||||
$royalblue: #4169e1;
|
||||
$blue: #0000ff;
|
||||
$mediumblue: #0000cd;
|
||||
$darkblue: #00008b;
|
||||
$navy: #000080;
|
||||
$midnightblue: #191970;
|
||||
$lavender: #e6e6fa;
|
||||
$thistle: #d8bfd8;
|
||||
$plum: #dda0dd;
|
||||
$violet: #ee82ee;
|
||||
$orchid: #da70d6;
|
||||
$fuchsia: #ff00ff;
|
||||
$magenta: #ff00ff;
|
||||
$mediumorchid: #ba55d3;
|
||||
$mediumpurple: #9370db;
|
||||
$blueviolet: #8a2be2;
|
||||
$darkviolet: #9400d3;
|
||||
$darkorchid: #9932cc;
|
||||
$darkmagenta: #8b008b;
|
||||
$purple: #800080;
|
||||
$indigo: #4b0082;
|
||||
$darkslateblue: #483d8b;
|
||||
$slateblue: #6a5acd;
|
||||
$mediumslateblue: #7b68ee;
|
||||
$white: #ffffff;
|
||||
$snow: #fffafa;
|
||||
$honeydew: #f0fff0;
|
||||
$mintcream: #f5fffa;
|
||||
$azure: #f0ffff;
|
||||
$aliceblue: #f0f8ff;
|
||||
$ghostwhite: #f8f8ff;
|
||||
$whitesmoke: #f5f5f5;
|
||||
$seashell: #fff5ee;
|
||||
$beige: #f5f5dc;
|
||||
$oldlace: #fdf5e6;
|
||||
$floralwhite: #fffaf0;
|
||||
$ivory: #fffff0;
|
||||
$antiquewhite: #faebd7;
|
||||
$linen: #faf0e6;
|
||||
$lavenderblush: #fff0f5;
|
||||
$mistyrose: #ffe4e1;
|
||||
$gainsboro: #dcdcdc;
|
||||
$lightgray: #d3d3d3;
|
||||
$silver: #c0c0c0;
|
||||
$darkgray: #a9a9a9;
|
||||
$gray: #808080;
|
||||
$dimgray: #696969;
|
||||
$lightslategray: #778899;
|
||||
$slategray: #708090;
|
||||
$darkslategray: #2f4f4f;
|
||||
$black: #000000;
|
||||
|
||||
20
sass/_dimension_utilities.scss
Normal file
20
sass/_dimension_utilities.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
/* ==========================================================================
|
||||
DIMENSION UTILITIES
|
||||
========================================================================== */
|
||||
|
||||
.auto-wrap {
|
||||
display: block;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.auto-fill {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.dbf {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
97
sass/_display.scss
Normal file
97
sass/_display.scss
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
/* ==========================================================================
|
||||
|
||||
DISPLAY
|
||||
|
||||
- Mobile First
|
||||
- Breakpoint: not-small
|
||||
- Breakpoint: medium
|
||||
- Breakpoint: large
|
||||
|
||||
========================================================================== */
|
||||
|
||||
.dn { display: none; }
|
||||
.di { display: inline; }
|
||||
.db { display: block; }
|
||||
.dib { display: inline-block; }
|
||||
.dli { display: list-item; }
|
||||
.dit { display: inline-table; }
|
||||
.dt { display: table; }
|
||||
.dtc { display: table-cell; }
|
||||
.dtcol { display: table-column; }
|
||||
.dtcolg { display: table-column-group; }
|
||||
.dtfg { display: table-footer-group; }
|
||||
.dthg { display: table-header-group; }
|
||||
.dtr { display: table-row; }
|
||||
.dtrg { display: table-row-group; }
|
||||
.df { display: flex; }
|
||||
.dif { display: inline-flex; }
|
||||
.dg { display: grid; }
|
||||
.dig { display: inline-grid; }
|
||||
.dri { display: run-in; }
|
||||
|
||||
@include break(not-small) {
|
||||
.dn-ns { display: none; }
|
||||
.di-ns { display: inline; }
|
||||
.db-ns { display: block; }
|
||||
.dib-ns { display: inline-block; }
|
||||
.dli-ns { display: list-item; }
|
||||
.dit-ns { display: inline-table; }
|
||||
.dt-ns { display: table; }
|
||||
.dtc-ns { display: table-cell; }
|
||||
.dtcol-ns { display: table-column; }
|
||||
.dtcolg-ns { display: table-column-group; }
|
||||
.dtfg-ns { display: table-footer-group; }
|
||||
.dthg-ns { display: table-header-group; }
|
||||
.dtr-ns { display: table-row; }
|
||||
.dtrg-ns { display: table-row-group; }
|
||||
.df-ns { display: flex; }
|
||||
.dif-ns { display: inline-flex; }
|
||||
.dg-ns { display: grid; }
|
||||
.dig-ns { display: inline-grid; }
|
||||
.dri-ns { display: run-in; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.dn-m { display: none; }
|
||||
.di-m { display: inline; }
|
||||
.db-m { display: block; }
|
||||
.dib-m { display: inline-block; }
|
||||
.dli-m { display: list-item; }
|
||||
.dit-m { display: inline-table; }
|
||||
.dt-m { display: table; }
|
||||
.dtc-m { display: table-cell; }
|
||||
.dtcol-m { display: table-column; }
|
||||
.dtcolg-m { display: table-column-group; }
|
||||
.dtfg-m { display: table-footer-group; }
|
||||
.dthg-m { display: table-header-group; }
|
||||
.dtr-m { display: table-row; }
|
||||
.dtrg-m { display: table-row-group; }
|
||||
.df-m { display: flex; }
|
||||
.dif-m { display: inline-flex; }
|
||||
.dg-m { display: grid; }
|
||||
.dig-m { display: inline-grid; }
|
||||
.dri-m { display: run-in; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.dn-l { display: none; }
|
||||
.di-l { display: inline; }
|
||||
.db-l { display: block; }
|
||||
.dib-l { display: inline-block; }
|
||||
.dli-l { display: list-item; }
|
||||
.dit-l { display: inline-table; }
|
||||
.dt-l { display: table; }
|
||||
.dtc-l { display: table-cell; }
|
||||
.dtcol-l { display: table-column; }
|
||||
.dtcolg-l { display: table-column-group; }
|
||||
.dtfg-l { display: table-footer-group; }
|
||||
.dthg-l { display: table-header-group; }
|
||||
.dtr-l { display: table-row; }
|
||||
.dtrg-l { display: table-row-group; }
|
||||
.df-l { display: flex; }
|
||||
.dif-l { display: inline-flex; }
|
||||
.dg-l { display: grid; }
|
||||
.dig-l { display: inline-grid; }
|
||||
.dri-l { display: run-in; }
|
||||
}
|
||||
|
||||
27
sass/_floats.scss
Normal file
27
sass/_floats.scss
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/* ==========================================================================
|
||||
FLOATS
|
||||
========================================================================== */
|
||||
|
||||
|
||||
.fl { float: left; display: inline; }
|
||||
.fr { float: right; display: inline; }
|
||||
.fn { float: none; }
|
||||
|
||||
@include break(not-small) {
|
||||
.fl-ns { float: left; display: inline; }
|
||||
.fr-ns { float: right;display: inline; }
|
||||
.fn-ns { float: none; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.fl-m { float: left; display: inline; }
|
||||
.fr-m { float: right; display: inline; }
|
||||
.fn-m { float: none; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.fl-l { float: left; display: inline; }
|
||||
.fr-l { float: right; display: inline; }
|
||||
.fn-l { float: none; }
|
||||
}
|
||||
|
||||
32
sass/_font_family.scss
Normal file
32
sass/_font_family.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/* Font Family Groups */
|
||||
|
||||
.serif { font-family: georgia, serif; }
|
||||
.sans-serif { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; }
|
||||
.font-fantasy { font-family: fantasy; }
|
||||
.font-cursive { font-family: cursive; }
|
||||
.font-mono { font-family: monospace; }
|
||||
|
||||
@include break(not-small) {
|
||||
.serif-ns { font-family: georgia, serif; }
|
||||
.sans-serif-ns { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; }
|
||||
.font-fantasy-ns { font-family: fantasy; }
|
||||
.font-cursive-ns { font-family: cursive; }
|
||||
.font-mono-ns { font-family: monospace; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.serif-m { font-family: georgia, serif; }
|
||||
.sans-serif-m { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; }
|
||||
.font-fantasy-m { font-family: fantasy; }
|
||||
.font-cursive-m { font-family: cursive; }
|
||||
.font-mono-m { font-family: monospace; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.serif-l { font-family: georgia, serif; }
|
||||
.sans-serif-l { font-family: avenir, 'avenir next', helvetica, arial, sans-serif; }
|
||||
.font-fantasy-l { font-family: fantasy; }
|
||||
.font-cursive-l { font-family: cursive; }
|
||||
.font-mono-l { font-family: monospace; }
|
||||
}
|
||||
|
||||
20
sass/_font_style.scss
Normal file
20
sass/_font_style.scss
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
/* Font Style */
|
||||
|
||||
.fsn { font-style: normal; }
|
||||
.i { font-style: italic; }
|
||||
|
||||
@include break(not-small) {
|
||||
.fsn-ns { font-style: normal; }
|
||||
.i-ns { font-style: italic; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.fsn-m { font-style: normal; }
|
||||
.i-m { font-style: italic; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.fsn-l { font-style: normal; }
|
||||
.i-l { font-style: italic; }
|
||||
}
|
||||
|
||||
77
sass/_font_weight.scss
Normal file
77
sass/_font_weight.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
/* ==========================================================================
|
||||
FONT WEIGHT
|
||||
========================================================================== */
|
||||
|
||||
.fwn { font-weight: normal; }
|
||||
.b { font-weight: bold; }
|
||||
|
||||
.fw-light { font-weight: lighter; }
|
||||
.fw-bolder { font-weight: bolder; }
|
||||
|
||||
.fw1 { font-weight: 100; }
|
||||
.fw2 { font-weight: 200; }
|
||||
.fw3 { font-weight: 300; }
|
||||
.fw4 { font-weight: 400; }
|
||||
.fw5 { font-weight: 500; }
|
||||
.fw6 { font-weight: 600; }
|
||||
.fw7 { font-weight: 700; }
|
||||
.fw8 { font-weight: 800; }
|
||||
.fw9 { font-weight: 900; }
|
||||
|
||||
@include break(not-small) {
|
||||
.fwn { font-weight: normal; }
|
||||
.b { font-weight: bold; }
|
||||
|
||||
.fw-light { font-weight: lighter; }
|
||||
.fw-bolder { font-weight: bolder; }
|
||||
|
||||
.fw1 { font-weight: 100; }
|
||||
.fw2 { font-weight: 200; }
|
||||
.fw3 { font-weight: 300; }
|
||||
.fw4 { font-weight: 400; }
|
||||
.fw5 { font-weight: 500; }
|
||||
.fw6 { font-weight: 600; }
|
||||
.fw7 { font-weight: 700; }
|
||||
.fw8 { font-weight: 800; }
|
||||
.fw9 { font-weight: 900; }
|
||||
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.fwn { font-weight: normal; }
|
||||
.b { font-weight: bold; }
|
||||
|
||||
.fw-light { font-weight: lighter; }
|
||||
.fw-bolder { font-weight: bolder; }
|
||||
|
||||
.fw1 { font-weight: 100; }
|
||||
.fw2 { font-weight: 200; }
|
||||
.fw3 { font-weight: 300; }
|
||||
.fw4 { font-weight: 400; }
|
||||
.fw5 { font-weight: 500; }
|
||||
.fw6 { font-weight: 600; }
|
||||
.fw7 { font-weight: 700; }
|
||||
.fw8 { font-weight: 800; }
|
||||
.fw9 { font-weight: 900; }
|
||||
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.fwn { font-weight: normal; }
|
||||
.b { font-weight: bold; }
|
||||
|
||||
.fw-light { font-weight: lighter; }
|
||||
.fw-bolder { font-weight: bolder; }
|
||||
|
||||
.fw1 { font-weight: 100; }
|
||||
.fw2 { font-weight: 200; }
|
||||
.fw3 { font-weight: 300; }
|
||||
.fw4 { font-weight: 400; }
|
||||
.fw5 { font-weight: 500; }
|
||||
.fw6 { font-weight: 600; }
|
||||
.fw7 { font-weight: 700; }
|
||||
.fw8 { font-weight: 800; }
|
||||
.fw9 { font-weight: 900; }
|
||||
|
||||
}
|
||||
|
||||
4
sass/_forms.scss
Normal file
4
sass/_forms.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
/* ==========================================================================
|
||||
FORMS
|
||||
========================================================================== */
|
||||
|
||||
11
sass/_grid.scss
Normal file
11
sass/_grid.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@include break(not-small) {
|
||||
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
|
||||
}
|
||||
79
sass/_heights.scss
Normal file
79
sass/_heights.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/* ==========================================================================
|
||||
HEIGHTS
|
||||
========================================================================== */
|
||||
|
||||
.hi-10, .tenth { height: 10%; }
|
||||
.hi-25, .quarter { height: 25%; }
|
||||
.hi-50, .half { height: 50%; }
|
||||
.hi-75, .three-quarters { height: 75%; }
|
||||
.hi-100, .full { height: 100%; }
|
||||
|
||||
.ht1 { height: 1rem; }
|
||||
.ht2 { height: 2rem; }
|
||||
.ht3 { height: 4rem; }
|
||||
.ht4 { height: 8rem; }
|
||||
.ht5 { height: 16rem; }
|
||||
.ht6 { height: 32rem; }
|
||||
.ht7 { height: 48rem; }
|
||||
.ht8 { height: 64rem; }
|
||||
.ht9 { height: 96rem; }
|
||||
.ht10 { height: 128rem; }
|
||||
|
||||
.ht-auto { height: auto; }
|
||||
|
||||
@include break(not-small) {
|
||||
.hi-10-ns, .tenth-ns { height: 10%; }
|
||||
.hi-25-ns, .quarter-ns { height: 25%; }
|
||||
.hi-50-ns, .half-ns { height: 50%; }
|
||||
.hi-75-ns, .three-quarters-ns { height: 75%; }
|
||||
.hi-100-ns, .full-ns { height: 100%; }
|
||||
.ht1-ns { height: 1rem; }
|
||||
.ht2-ns { height: 2rem; }
|
||||
.ht3-ns { height: 4rem; }
|
||||
.ht4-ns { height: 8rem; }
|
||||
.ht5-ns { height: 16rem; }
|
||||
.ht6-ns { height: 32rem; }
|
||||
.ht7-ns { height: 48rem; }
|
||||
.ht8-ns { height: 64rem; }
|
||||
.ht9-ns { height: 96rem; }
|
||||
.ht10-ns { height: 128rem; }
|
||||
.ht-auto-ns { height: auto; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.hi-10-m, .tenth-m { height: 10%; }
|
||||
.hi-25-m, .quarter-m { height: 25%; }
|
||||
.hi-50-m, .half-m { height: 50%; }
|
||||
.hi-75-m, .three-quarters-m { height: 75%; }
|
||||
.hi-100-m, .full-m { height: 100%; }
|
||||
.ht1-m { height: 1rem; }
|
||||
.ht2-m { height: 2rem; }
|
||||
.ht3-m { height: 4rem; }
|
||||
.ht4-m { height: 8rem; }
|
||||
.ht5-m { height: 16rem; }
|
||||
.ht6-m { height: 32rem; }
|
||||
.ht7-m { height: 48rem; }
|
||||
.ht8-m { height: 64rem; }
|
||||
.ht9-m { height: 96rem; }
|
||||
.ht10-m { height: 128rem; }
|
||||
.ht-auto-m { height: auto; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.hi-10-l, .tenth-l { height: 10%; }
|
||||
.hi-25-l, .quarter-l { height: 25%; }
|
||||
.hi-50-l, .half-l { height: 50%; }
|
||||
.hi-75-l, .three-quarters-l { height: 75%; }
|
||||
.hi-100-l, .full-l { height: 100%; }
|
||||
.ht1-l { height: 1rem; }
|
||||
.ht2-l { height: 2rem; }
|
||||
.ht3-l { height: 4rem; }
|
||||
.ht4-l { height: 8rem; }
|
||||
.ht5-l { height: 16rem; }
|
||||
.ht6-l { height: 32rem; }
|
||||
.ht7-l { height: 48rem; }
|
||||
.ht8-l { height: 64rem; }
|
||||
.ht9-l { height: 96rem; }
|
||||
.ht10-l { height: 128rem; }
|
||||
.ht-auto-l { height: auto; }
|
||||
}
|
||||
8
sass/_images.scss
Normal file
8
sass/_images.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
/* ==========================================================================
|
||||
IMAGES
|
||||
========================================================================== */
|
||||
|
||||
/* Responsive images! */
|
||||
|
||||
img { max-width: 100%; }
|
||||
|
||||
26
sass/_letter_spacing.scss
Normal file
26
sass/_letter_spacing.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/* ==========================================================================
|
||||
LETTER SPACING
|
||||
========================================================================== */
|
||||
|
||||
.tracked { letter-spacing: .1em; }
|
||||
.tracked-tight { letter-spacing: -.1em; }
|
||||
.mega-tracked { letter-spacing: .2em; }
|
||||
|
||||
@include break(not-small) {
|
||||
.tracked-ns { letter-spacing: .1em; }
|
||||
.tracked-tight-ns { letter-spacing: -.1em; }
|
||||
.mega-tracked-ns { letter-spacing: .2em; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.tracked-m { letter-spacing: .1em; }
|
||||
.tracked-tight-m { letter-spacing: -.1em; }
|
||||
.mega-tracked-m { letter-spacing: .2em; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.tracked-l { letter-spacing: .1em; }
|
||||
.tracked-tight-l { letter-spacing: -.1em; }
|
||||
.mega-tracked-l { letter-spacing: .2em; }
|
||||
}
|
||||
|
||||
26
sass/_line_height.scss
Normal file
26
sass/_line_height.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/* ==========================================================================
|
||||
LINE HEIGHT
|
||||
========================================================================== */
|
||||
|
||||
.lh { line-height: 1; }
|
||||
.lh-title { line-height: 1.3; }
|
||||
.lh-copy { line-height: 1.6; }
|
||||
|
||||
@include break(not-small) {
|
||||
.lh-ns { line-height: 1; }
|
||||
.lh-title-ns { line-height: 1.3; }
|
||||
.lh-copy-ns { line-height: 1.6; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.lh-m { line-height: 1; }
|
||||
.lh-title-m { line-height: 1.3; }
|
||||
.lh-copy-m { line-height: 1.6; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.lh-l { line-height: 1; }
|
||||
.lh-title-l { line-height: 1.3; }
|
||||
.lh-copy-l { line-height: 1.6; }
|
||||
}
|
||||
|
||||
18
sass/_links.scss
Normal file
18
sass/_links.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
/* ==========================================================================
|
||||
LINKS
|
||||
========================================================================== */
|
||||
|
||||
.link { text-decoration: none; }
|
||||
|
||||
@include break(not-small) {
|
||||
.link-ns { text-decoration: none; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.link-m { text-decoration: none; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.link-l { text-decoration: none; }
|
||||
}
|
||||
|
||||
92
sass/_lists.scss
Normal file
92
sass/_lists.scss
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
/* ==========================================================================
|
||||
LISTS
|
||||
========================================================================== */
|
||||
|
||||
/* List Style Types */
|
||||
|
||||
.disc { list-style-type: disc; }
|
||||
.circle { list-style-type: circle; }
|
||||
.square { list-style-type: square; }
|
||||
.decimal { list-style-type: decimal; }
|
||||
.leading-zero { list-style-type: decimal-leading-zero; }
|
||||
.lower-roman { list-style-type: lower-roman; }
|
||||
.upper-roman { list-style-type: upper-roman; }
|
||||
.lower-greek { list-style-type: lower-greek; }
|
||||
.lower-latin { list-style-type: lower-latin; }
|
||||
.upper-latin { list-style-type: upper-latin; }
|
||||
.lower-alpha { list-style-type: lower-alpha; }
|
||||
.upper-alpha { list-style-type: upper-alpha; }
|
||||
.list { list-style-type: none; }
|
||||
|
||||
|
||||
/* Horizontal list: can be used on ol or ul */
|
||||
|
||||
.list { list-style: none; }
|
||||
|
||||
.list--h {
|
||||
list-style-type: none;
|
||||
> li { display: inline-block; }
|
||||
}
|
||||
|
||||
@include break(not-small) {
|
||||
.disc-ns { list-style-type: disc; }
|
||||
.circle-ns { list-style-type: circle; }
|
||||
.square-ns { list-style-type: square; }
|
||||
.decimal-ns { list-style-type: decimal; }
|
||||
.leading-zero-ns { list-style-type: decimal-leading-zero; }
|
||||
.lower-roman-ns { list-style-type: lower-roman; }
|
||||
.upper-roman-ns { list-style-type: upper-roman; }
|
||||
.lower-greek-ns { list-style-type: lower-greek; }
|
||||
.lower-latin-ns { list-style-type: lower-latin; }
|
||||
.upper-latin-ns { list-style-type: upper-latin; }
|
||||
.lower-alpha-ns { list-style-type: lower-alpha; }
|
||||
.upper-alpha-ns { list-style-type: upper-alpha; }
|
||||
.list-ns { list-style-type: none; }
|
||||
.list--h-ns {
|
||||
list-style-type: none;
|
||||
> li { display: inline-block; }
|
||||
}
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.disc-m { list-style-type: disc; }
|
||||
.circle-m { list-style-type: circle; }
|
||||
.square-m { list-style-type: square; }
|
||||
.decimal-m { list-style-type: decimal; }
|
||||
.leading-zero-m { list-style-type: decimal-leading-zero; }
|
||||
.lower-roman-m { list-style-type: lower-roman; }
|
||||
.upper-roman-m { list-style-type: upper-roman; }
|
||||
.lower-greek-m { list-style-type: lower-greek; }
|
||||
.lower-latin-m { list-style-type: lower-latin; }
|
||||
.upper-latin-m { list-style-type: upper-latin; }
|
||||
.lower-alpha-m { list-style-type: lower-alpha; }
|
||||
.upper-alpha-m { list-style-type: upper-alpha; }
|
||||
.list-m { list-style-type: none; }
|
||||
.list-m { list-style: none; }
|
||||
.list--h-m {
|
||||
list-style-type: none;
|
||||
> li { display: inline-block; }
|
||||
}
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.disc-l { list-style-type: disc; }
|
||||
.circle-l { list-style-type: circle; }
|
||||
.square-l { list-style-type: square; }
|
||||
.decimal-l { list-style-type: decimal; }
|
||||
.leading-zero-l { list-style-type: decimal-leading-zero; }
|
||||
.lower-roman-l { list-style-type: lower-roman; }
|
||||
.upper-roman-l { list-style-type: upper-roman; }
|
||||
.lower-greek-l { list-style-type: lower-greek; }
|
||||
.lower-latin-l { list-style-type: lower-latin; }
|
||||
.upper-latin-l { list-style-type: upper-latin; }
|
||||
.lower-alpha-l { list-style-type: lower-alpha; }
|
||||
.upper-alpha-l { list-style-type: upper-alpha; }
|
||||
.list-l { list-style-type: none; }
|
||||
.list-l { list-style: none; }
|
||||
.list--h-l {
|
||||
list-style-type: none;
|
||||
> li { display: inline-block; }
|
||||
}
|
||||
}
|
||||
|
||||
79
sass/_max_heights.scss
Normal file
79
sass/_max_heights.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
/* ==========================================================================
|
||||
MAX HEIGHT
|
||||
========================================================================== */
|
||||
|
||||
.mxhi1 { max-height: 1rem; }
|
||||
.mxhi2 { max-height: 2rem; }
|
||||
.mxhi3 { max-height: 4rem; }
|
||||
.mxhi4 { max-height: 8rem; }
|
||||
.mxhi5 { max-height: 16rem; }
|
||||
.mxhi6 { max-height: 32rem; }
|
||||
.mxhi7 { max-height: 48rem; }
|
||||
.mxhi8 { max-height: 64rem; }
|
||||
.mxhi9 { max-height: 96rem; }
|
||||
.mxhi10 { max-height: 128rem; }
|
||||
|
||||
.mxhi-none { max-height: none; }
|
||||
.mxhi-max { max-height: max-content; }
|
||||
.mxhi-min { max-height: min-content; }
|
||||
.mxhi-fit { max-height: fit-content; }
|
||||
.mxhi-fill { max-height: fill-available; }
|
||||
|
||||
@include break(not-small) {
|
||||
|
||||
.mxhi1-ns { max-height: 1rem; }
|
||||
.mxhi2-ns { max-height: 2rem; }
|
||||
.mxhi3-ns { max-height: 4rem; }
|
||||
.mxhi4-ns { max-height: 8rem; }
|
||||
.mxhi5-ns { max-height: 16rem; }
|
||||
.mxhi6-ns { max-height: 32rem; }
|
||||
.mxhi7-ns { max-height: 48rem; }
|
||||
.mxhi8-ns { max-height: 64rem; }
|
||||
.mxhi9-ns { max-height: 96rem; }
|
||||
.mxhi10-ns { max-height: 128rem; }
|
||||
|
||||
.mxhi-none-ns { max-height: none; }
|
||||
.mxhi-max-ns { max-height: max-content; }
|
||||
.mxhi-min-ns { max-height: min-content; }
|
||||
.mxhi-fit-ns { max-height: fit-content; }
|
||||
.mxhi-fill-ns { max-height: fill-available; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.mxhi1-m { max-height: 1rem; }
|
||||
.mxhi2-m { max-height: 2rem; }
|
||||
.mxhi3-m { max-height: 4rem; }
|
||||
.mxhi4-m { max-height: 8rem; }
|
||||
.mxhi5-m { max-height: 16rem; }
|
||||
.mxhi6-m { max-height: 32rem; }
|
||||
.mxhi7-m { max-height: 48rem; }
|
||||
.mxhi8-m { max-height: 64rem; }
|
||||
.mxhi9-m { max-height: 96rem; }
|
||||
.mxhi10-m { max-height: 128rem; }
|
||||
|
||||
.mxhi-none-m { max-height: none; }
|
||||
.mxhi-max-m { max-height: max-content; }
|
||||
.mxhi-min-m { max-height: min-content; }
|
||||
.mxhi-fit-m { max-height: fit-content; }
|
||||
.mxhi-fill-m { max-height: fill-available; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.mxhi1-l { max-height: 1rem; }
|
||||
.mxhi2-l { max-height: 2rem; }
|
||||
.mxhi3-l { max-height: 4rem; }
|
||||
.mxhi4-l { max-height: 8rem; }
|
||||
.mxhi5-l { max-height: 16rem; }
|
||||
.mxhi6-l { max-height: 32rem; }
|
||||
.mxhi7-l { max-height: 48rem; }
|
||||
.mxhi8-l { max-height: 64rem; }
|
||||
.mxhi9-l { max-height: 96rem; }
|
||||
.mxhi10-l { max-height: 128rem; }
|
||||
|
||||
.mxhi-none-l { max-height: none; }
|
||||
.mxhi-max-l { max-height: max-content; }
|
||||
.mxhi-min-l { max-height: min-content; }
|
||||
.mxhi-fit-l { max-height: fit-content; }
|
||||
.mxhi-fill-l { max-height: fill-available; }
|
||||
}
|
||||
|
||||
98
sass/_max_widths.scss
Normal file
98
sass/_max_widths.scss
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
/* ==========================================================================
|
||||
MAX WIDTHS
|
||||
========================================================================== */
|
||||
|
||||
.mx-wi-100 { max-width: 100%; }
|
||||
.mx-wi-75 { max-width: 75%; }
|
||||
.mx-wi-50 { max-width: 50%; }
|
||||
.mx-wi-25 { max-width: 25%; }
|
||||
|
||||
.mx-wi1 { max-width: 1rem; }
|
||||
.mx-wi2 { max-width: 2rem; }
|
||||
.mx-wi3 { max-width: 4rem; }
|
||||
.mx-wi4 { max-width: 8rem; }
|
||||
.mx-wi5 { max-width: 16rem; }
|
||||
.mx-wi6 { max-width: 32rem; }
|
||||
.mx-wi7 { max-width: 48rem; }
|
||||
.mx-wi8 { max-width: 64rem; }
|
||||
.mx-wi9 { max-width: 96rem; }
|
||||
.mx-wi10 { max-width: 128rem; }
|
||||
|
||||
.mx-wi-none { max-width: none; }
|
||||
.mx-wi-max { max-width: max-content; }
|
||||
.mx-wi-min { max-width: min-content; }
|
||||
.mx-wi-fit { max-width: fit-content; }
|
||||
.mx-wi-fill { max-width: fill-available; }
|
||||
|
||||
@include break(not-small) {
|
||||
.mx-wi-100-ns { max-width: 100%; }
|
||||
.mx-wi-75-ns { max-width: 75%; }
|
||||
.mx-wi-50-ns { max-width: 50%; }
|
||||
.mx-wi-25-ns { max-width: 25%; }
|
||||
|
||||
.mx-wi1-ns { max-width: 1rem; }
|
||||
.mx-wi2-ns { max-width: 2rem; }
|
||||
.mx-wi3-ns { max-width: 4rem; }
|
||||
.mx-wi4-ns { max-width: 8rem; }
|
||||
.mx-wi5-ns { max-width: 16rem; }
|
||||
.mx-wi6-ns { max-width: 32rem; }
|
||||
.mx-wi7-ns { max-width: 48rem; }
|
||||
.mx-wi8-ns { max-width: 64rem; }
|
||||
.mx-wi9-ns { max-width: 96rem; }
|
||||
.mx-wi10-ns { max-width: 128rem; }
|
||||
|
||||
.mx-wi-none-ns { max-width: none; }
|
||||
.mx-wi-max-ns { max-width: max-content; }
|
||||
.mx-wi-min-ns { max-width: min-content; }
|
||||
.mx-wi-fit-ns { max-width: fit-content; }
|
||||
.mx-wi-fill-ns { max-width: fill-available; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.mx-wi-100-m { max-width: 100%; }
|
||||
.mx-wi-75-m { max-width: 75%; }
|
||||
.mx-wi-50-m { max-width: 50%; }
|
||||
.mx-wi-25-m { max-width: 25%; }
|
||||
|
||||
.mx-wi1-m { max-width: 1rem; }
|
||||
.mx-wi2-m { max-width: 2rem; }
|
||||
.mx-wi3-m { max-width: 4rem; }
|
||||
.mx-wi4-m { max-width: 8rem; }
|
||||
.mx-wi5-m { max-width: 16rem; }
|
||||
.mx-wi6-m { max-width: 32rem; }
|
||||
.mx-wi7-m { max-width: 48rem; }
|
||||
.mx-wi8-m { max-width: 64rem; }
|
||||
.mx-wi9-m { max-width: 96rem; }
|
||||
.mx-wi10-m { max-width: 128rem; }
|
||||
|
||||
.mx-wi-none-m { max-width: none; }
|
||||
.mx-wi-max-m { max-width: max-content; }
|
||||
.mx-wi-min-m { max-width: min-content; }
|
||||
.mx-wi-fit-m { max-width: fit-content; }
|
||||
.mx-wi-fill-m { max-width: fill-available; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.mx-wi-100-l { max-width: 100%; }
|
||||
.mx-wi-75-l { max-width: 75%; }
|
||||
.mx-wi-50-l { max-width: 50%; }
|
||||
.mx-wi-25-l { max-width: 25%; }
|
||||
|
||||
.mx-wi1-l { max-width: 1rem; }
|
||||
.mx-wi2-l { max-width: 2rem; }
|
||||
.mx-wi3-l { max-width: 4rem; }
|
||||
.mx-wi4-l { max-width: 8rem; }
|
||||
.mx-wi5-l { max-width: 16rem; }
|
||||
.mx-wi6-l { max-width: 32rem; }
|
||||
.mx-wi7-l { max-width: 48rem; }
|
||||
.mx-wi8-l { max-width: 64rem; }
|
||||
.mx-wi9-l { max-width: 96rem; }
|
||||
.mx-wi10-l { max-width: 128rem; }
|
||||
|
||||
.mx-wi-none-l { max-width: none; }
|
||||
.mx-wi-max-l { max-width: max-content; }
|
||||
.mx-wi-min-l { max-width: min-content; }
|
||||
.mx-wi-fit-l { max-width: fit-content; }
|
||||
.mx-wi-fill-l { max-width: fill-available; }
|
||||
}
|
||||
|
||||
94
sass/_min_heights.scss
Normal file
94
sass/_min_heights.scss
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
/* ==========================================================================
|
||||
MIN HEIGHTS
|
||||
========================================================================== */
|
||||
|
||||
.mn-hi-100 { min-height: 100%; }
|
||||
.mn-hi-75 { min-height: 75%; }
|
||||
.mn-hi-50 { min-height: 50%; }
|
||||
.mn-hi-25 { min-height: 25%; }
|
||||
|
||||
.mn-hi1 { min-height: 1rem; }
|
||||
.mn-hi2 { min-height: 2rem; }
|
||||
.mn-hi3 { min-height: 4rem; }
|
||||
.mn-hi4 { min-height: 8rem; }
|
||||
.mn-hi5 { min-height: 16rem; }
|
||||
.mn-hi6 { min-height: 32rem; }
|
||||
.mn-hi7 { min-height: 48rem; }
|
||||
.mn-hi8 { min-height: 64rem; }
|
||||
.mn-hi9 { min-height: 96rem; }
|
||||
.mn-hi10 { min-height: 128rem; }
|
||||
|
||||
.mn-hi-max { min-height: max-content; }
|
||||
.mn-hi-min { min-height: min-content; }
|
||||
.mn-hi-fit { min-height: fit-content; }
|
||||
.mn-hi-fill { min-height: fill-available; }
|
||||
|
||||
@include break(not-small) {
|
||||
.mn-hi-100-ns { min-height: 100%; }
|
||||
.mn-hi-75-ns { min-height: 75%; }
|
||||
.mn-hi-50-ns { min-height: 50%; }
|
||||
.mn-hi-25-ns { min-height: 25%; }
|
||||
|
||||
.mn-hi1-ns { min-height: 1rem; }
|
||||
.mn-hi2-ns { min-height: 2rem; }
|
||||
.mn-hi3-ns { min-height: 4rem; }
|
||||
.mn-hi4-ns { min-height: 8rem; }
|
||||
.mn-hi5-ns { min-height: 16rem; }
|
||||
.mn-hi6-ns { min-height: 32rem; }
|
||||
.mn-hi7-ns { min-height: 48rem; }
|
||||
.mn-hi8-ns { min-height: 64rem; }
|
||||
.mn-hi9-ns { min-height: 96rem; }
|
||||
.mn-hi10-ns { min-height: 128rem; }
|
||||
|
||||
.mn-hi-max-ns { min-height: max-content; }
|
||||
.mn-hi-min-ns { min-height: min-content; }
|
||||
.mn-hi-fit-ns { min-height: fit-content; }
|
||||
.mn-hi-fill-ns { min-height: fill-available; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.mn-hi-100-m { min-height: 100%; }
|
||||
.mn-hi-75-m { min-height: 75%; }
|
||||
.mn-hi-50-m { min-height: 50%; }
|
||||
.mn-hi-25-m { min-height: 25%; }
|
||||
|
||||
.mn-hi1-m { min-height: 1rem; }
|
||||
.mn-hi2-m { min-height: 2rem; }
|
||||
.mn-hi3-m { min-height: 4rem; }
|
||||
.mn-hi4-m { min-height: 8rem; }
|
||||
.mn-hi5-m { min-height: 16rem; }
|
||||
.mn-hi6-m { min-height: 32rem; }
|
||||
.mn-hi7-m { min-height: 48rem; }
|
||||
.mn-hi8-m { min-height: 64rem; }
|
||||
.mn-hi9-m { min-height: 96rem; }
|
||||
.mn-hi10-m { min-height: 128rem; }
|
||||
|
||||
.mn-hi-max-m { min-height: max-content; }
|
||||
.mn-hi-min-m { min-height: min-content; }
|
||||
.mn-hi-fit-m { min-height: fit-content; }
|
||||
.mn-hi-fill-m { min-height: fill-available; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.mn-hi-100-l { min-height: 100%; }
|
||||
.mn-hi-75-l { min-height: 75%; }
|
||||
.mn-hi-50-l { min-height: 50%; }
|
||||
.mn-hi-25-l { min-height: 25%; }
|
||||
|
||||
.mn-hi1-l { min-height: 1rem; }
|
||||
.mn-hi2-l { min-height: 2rem; }
|
||||
.mn-hi3-l { min-height: 4rem; }
|
||||
.mn-hi4-l { min-height: 8rem; }
|
||||
.mn-hi5-l { min-height: 16rem; }
|
||||
.mn-hi6-l { min-height: 32rem; }
|
||||
.mn-hi7-l { min-height: 48rem; }
|
||||
.mn-hi8-l { min-height: 64rem; }
|
||||
.mn-hi9-l { min-height: 96rem; }
|
||||
.mn-hi10-l { min-height: 128rem; }
|
||||
|
||||
.mn-hi-max-l { min-height: max-content; }
|
||||
.mn-hi-min-l { min-height: min-content; }
|
||||
.mn-hi-fit-l { min-height: fit-content; }
|
||||
.mn-hi-fill-l { min-height: fill-available; }
|
||||
}
|
||||
|
||||
478
sass/_min_widths.scss
Normal file
478
sass/_min_widths.scss
Normal file
|
|
@ -0,0 +1,478 @@
|
|||
/* ==========================================================================
|
||||
MIN WIDTHS
|
||||
========================================================================== */
|
||||
|
||||
.mn-wi-1 { min-width: 1%; }
|
||||
.mn-wi-2 { min-width: 2%; }
|
||||
.mn-wi-3 { min-width: 3%; }
|
||||
.mn-wi-4 { min-width: 4%; }
|
||||
.mn-wi-5 { min-width: 5%; }
|
||||
.mn-wi-6 { min-width: 6%; }
|
||||
.mn-wi-7 { min-width: 7%; }
|
||||
.mn-wi-8 { min-width: 8%; }
|
||||
.mn-wi-9 { min-width: 9%; }
|
||||
.mn-wi-10 { min-width: 10%; }
|
||||
.mn-wi-11 { min-width: 11%; }
|
||||
.mn-wi-12 { min-width: 12%; }
|
||||
.mn-wi-13 { min-width: 13%; }
|
||||
.mn-wi-14 { min-width: 14%; }
|
||||
.mn-wi-15 { min-width: 15%; }
|
||||
.mn-wi-16 { min-width: 16%; }
|
||||
.mn-wi-17 { min-width: 17%; }
|
||||
.mn-wi-18 { min-width: 18%; }
|
||||
.mn-wi-19 { min-width: 19%; }
|
||||
.mn-wi-20 { min-width: 20%; }
|
||||
.mn-wi-21 { min-width: 21%; }
|
||||
.mn-wi-22 { min-width: 22%; }
|
||||
.mn-wi-23 { min-width: 23%; }
|
||||
.mn-wi-24 { min-width: 24%; }
|
||||
.mn-wi-25 { min-width: 25%; }
|
||||
.mn-wi-26 { min-width: 26%; }
|
||||
.mn-wi-27 { min-width: 27%; }
|
||||
.mn-wi-28 { min-width: 28%; }
|
||||
.mn-wi-29 { min-width: 29%; }
|
||||
.mn-wi-30 { min-width: 30%; }
|
||||
.mn-wi-31 { min-width: 31%; }
|
||||
.mn-wi-32 { min-width: 32%; }
|
||||
.mn-wi-33 { min-width: 33%; }
|
||||
.mn-wi-34 { min-width: 34%; }
|
||||
.mn-wi-35 { min-width: 35%; }
|
||||
.mn-wi-36 { min-width: 36%; }
|
||||
.mn-wi-37 { min-width: 37%; }
|
||||
.mn-wi-38 { min-width: 38%; }
|
||||
.mn-wi-39 { min-width: 39%; }
|
||||
.mn-wi-40 { min-width: 40%; }
|
||||
.mn-wi-41 { min-width: 41%; }
|
||||
.mn-wi-42 { min-width: 42%; }
|
||||
.mn-wi-43 { min-width: 43%; }
|
||||
.mn-wi-44 { min-width: 44%; }
|
||||
.mn-wi-45 { min-width: 45%; }
|
||||
.mn-wi-46 { min-width: 46%; }
|
||||
.mn-wi-47 { min-width: 47%; }
|
||||
.mn-wi-48 { min-width: 48%; }
|
||||
.mn-wi-49 { min-width: 49%; }
|
||||
.mn-wi-50 { min-width: 50%; }
|
||||
.mn-wi-51 { min-width: 51%; }
|
||||
.mn-wi-52 { min-width: 52%; }
|
||||
.mn-wi-53 { min-width: 53%; }
|
||||
.mn-wi-54 { min-width: 54%; }
|
||||
.mn-wi-55 { min-width: 55%; }
|
||||
.mn-wi-56 { min-width: 56%; }
|
||||
.mn-wi-57 { min-width: 57%; }
|
||||
.mn-wi-58 { min-width: 58%; }
|
||||
.mn-wi-59 { min-width: 59%; }
|
||||
.mn-wi-60 { min-width: 60%; }
|
||||
.mn-wi-61 { min-width: 61%; }
|
||||
.mn-wi-62 { min-width: 62%; }
|
||||
.mn-wi-63 { min-width: 63%; }
|
||||
.mn-wi-64 { min-width: 64%; }
|
||||
.mn-wi-65 { min-width: 65%; }
|
||||
.mn-wi-66 { min-width: 66%; }
|
||||
.mn-wi-67 { min-width: 67%; }
|
||||
.mn-wi-68 { min-width: 68%; }
|
||||
.mn-wi-69 { min-width: 69%; }
|
||||
.mn-wi-70 { min-width: 70%; }
|
||||
.mn-wi-71 { min-width: 71%; }
|
||||
.mn-wi-72 { min-width: 72%; }
|
||||
.mn-wi-73 { min-width: 73%; }
|
||||
.mn-wi-74 { min-width: 74%; }
|
||||
.mn-wi-75 { min-width: 75%; }
|
||||
.mn-wi-76 { min-width: 76%; }
|
||||
.mn-wi-77 { min-width: 77%; }
|
||||
.mn-wi-78 { min-width: 78%; }
|
||||
.mn-wi-79 { min-width: 79%; }
|
||||
.mn-wi-80 { min-width: 80%; }
|
||||
.mn-wi-81 { min-width: 81%; }
|
||||
.mn-wi-82 { min-width: 82%; }
|
||||
.mn-wi-83 { min-width: 83%; }
|
||||
.mn-wi-84 { min-width: 84%; }
|
||||
.mn-wi-85 { min-width: 85%; }
|
||||
.mn-wi-86 { min-width: 86%; }
|
||||
.mn-wi-87 { min-width: 87%; }
|
||||
.mn-wi-88 { min-width: 88%; }
|
||||
.mn-wi-89 { min-width: 89%; }
|
||||
.mn-wi-90 { min-width: 90%; }
|
||||
.mn-wi-91 { min-width: 91%; }
|
||||
.mn-wi-92 { min-width: 92%; }
|
||||
.mn-wi-93 { min-width: 93%; }
|
||||
.mn-wi-94 { min-width: 94%; }
|
||||
.mn-wi-95 { min-width: 95%; }
|
||||
.mn-wi-96 { min-width: 96%; }
|
||||
.mn-wi-97 { min-width: 97%; }
|
||||
.mn-wi-98 { min-width: 98%; }
|
||||
.mn-wi-99 { min-width: 99%; }
|
||||
.mn-wi-100 { min-width: 100%; }
|
||||
|
||||
.mn-wi1 { min-width: 1rem; }
|
||||
.mn-wi2 { min-width: 2rem; }
|
||||
.mn-wi3 { min-width: 4rem; }
|
||||
.mn-wi4 { min-width: 8rem; }
|
||||
.mn-wi5 { min-width: 16rem; }
|
||||
.mn-wi6 { min-width: 32rem; }
|
||||
.mn-wi7 { min-width: 48rem; }
|
||||
.mn-wi8 { min-width: 64rem; }
|
||||
.mn-wi9 { min-width: 96rem; }
|
||||
.mn-wi10 { min-width: 128rem; }
|
||||
|
||||
.mn-wi-max { min-width: max-content; }
|
||||
.mn-wi-min { min-width: min-content; }
|
||||
.mn-wi-fit { min-width: fit-content; }
|
||||
.mn-wi-fill { min-width: fill-available; }
|
||||
|
||||
@include break(not-small) {
|
||||
.mn-wi-1-ns { min-width: 1%; }
|
||||
.mn-wi-2-ns { min-width: 2%; }
|
||||
.mn-wi-3-ns { min-width: 3%; }
|
||||
.mn-wi-4-ns { min-width: 4%; }
|
||||
.mn-wi-5-ns { min-width: 5%; }
|
||||
.mn-wi-6-ns { min-width: 6%; }
|
||||
.mn-wi-7-ns { min-width: 7%; }
|
||||
.mn-wi-8-ns { min-width: 8%; }
|
||||
.mn-wi-9-ns { min-width: 9%; }
|
||||
.mn-wi-10-ns { min-width: 10%; }
|
||||
.mn-wi-11-ns { min-width: 11%; }
|
||||
.mn-wi-12-ns { min-width: 12%; }
|
||||
.mn-wi-13-ns { min-width: 13%; }
|
||||
.mn-wi-14-ns { min-width: 14%; }
|
||||
.mn-wi-15-ns { min-width: 15%; }
|
||||
.mn-wi-16-ns { min-width: 16%; }
|
||||
.mn-wi-17-ns { min-width: 17%; }
|
||||
.mn-wi-18-ns { min-width: 18%; }
|
||||
.mn-wi-19-ns { min-width: 19%; }
|
||||
.mn-wi-20-ns { min-width: 20%; }
|
||||
.mn-wi-21-ns { min-width: 21%; }
|
||||
.mn-wi-22-ns { min-width: 22%; }
|
||||
.mn-wi-23-ns { min-width: 23%; }
|
||||
.mn-wi-24-ns { min-width: 24%; }
|
||||
.mn-wi-25-ns { min-width: 25%; }
|
||||
.mn-wi-26-ns { min-width: 26%; }
|
||||
.mn-wi-27-ns { min-width: 27%; }
|
||||
.mn-wi-28-ns { min-width: 28%; }
|
||||
.mn-wi-29-ns { min-width: 29%; }
|
||||
.mn-wi-30-ns { min-width: 30%; }
|
||||
.mn-wi-31-ns { min-width: 31%; }
|
||||
.mn-wi-32-ns { min-width: 32%; }
|
||||
.mn-wi-33-ns { min-width: 33%; }
|
||||
.mn-wi-34-ns { min-width: 34%; }
|
||||
.mn-wi-35-ns { min-width: 35%; }
|
||||
.mn-wi-36-ns { min-width: 36%; }
|
||||
.mn-wi-37-ns { min-width: 37%; }
|
||||
.mn-wi-38-ns { min-width: 38%; }
|
||||
.mn-wi-39-ns { min-width: 39%; }
|
||||
.mn-wi-40-ns { min-width: 40%; }
|
||||
.mn-wi-41-ns { min-width: 41%; }
|
||||
.mn-wi-42-ns { min-width: 42%; }
|
||||
.mn-wi-43-ns { min-width: 43%; }
|
||||
.mn-wi-44-ns { min-width: 44%; }
|
||||
.mn-wi-45-ns { min-width: 45%; }
|
||||
.mn-wi-46-ns { min-width: 46%; }
|
||||
.mn-wi-47-ns { min-width: 47%; }
|
||||
.mn-wi-48-ns { min-width: 48%; }
|
||||
.mn-wi-49-ns { min-width: 49%; }
|
||||
.mn-wi-50-ns { min-width: 50%; }
|
||||
.mn-wi-51-ns { min-width: 51%; }
|
||||
.mn-wi-52-ns { min-width: 52%; }
|
||||
.mn-wi-53-ns { min-width: 53%; }
|
||||
.mn-wi-54-ns { min-width: 54%; }
|
||||
.mn-wi-55-ns { min-width: 55%; }
|
||||
.mn-wi-56-ns { min-width: 56%; }
|
||||
.mn-wi-57-ns { min-width: 57%; }
|
||||
.mn-wi-58-ns { min-width: 58%; }
|
||||
.mn-wi-59-ns { min-width: 59%; }
|
||||
.mn-wi-60-ns { min-width: 60%; }
|
||||
.mn-wi-61-ns { min-width: 61%; }
|
||||
.mn-wi-62-ns { min-width: 62%; }
|
||||
.mn-wi-63-ns { min-width: 63%; }
|
||||
.mn-wi-64-ns { min-width: 64%; }
|
||||
.mn-wi-65-ns { min-width: 65%; }
|
||||
.mn-wi-66-ns { min-width: 66%; }
|
||||
.mn-wi-67-ns { min-width: 67%; }
|
||||
.mn-wi-68-ns { min-width: 68%; }
|
||||
.mn-wi-69-ns { min-width: 69%; }
|
||||
.mn-wi-70-ns { min-width: 70%; }
|
||||
.mn-wi-71-ns { min-width: 71%; }
|
||||
.mn-wi-72-ns { min-width: 72%; }
|
||||
.mn-wi-73-ns { min-width: 73%; }
|
||||
.mn-wi-74-ns { min-width: 74%; }
|
||||
.mn-wi-75-ns { min-width: 75%; }
|
||||
.mn-wi-76-ns { min-width: 76%; }
|
||||
.mn-wi-77-ns { min-width: 77%; }
|
||||
.mn-wi-78-ns { min-width: 78%; }
|
||||
.mn-wi-79-ns { min-width: 79%; }
|
||||
.mn-wi-80-ns { min-width: 80%; }
|
||||
.mn-wi-81-ns { min-width: 81%; }
|
||||
.mn-wi-82-ns { min-width: 82%; }
|
||||
.mn-wi-83-ns { min-width: 83%; }
|
||||
.mn-wi-84-ns { min-width: 84%; }
|
||||
.mn-wi-85-ns { min-width: 85%; }
|
||||
.mn-wi-86-ns { min-width: 86%; }
|
||||
.mn-wi-87-ns { min-width: 87%; }
|
||||
.mn-wi-88-ns { min-width: 88%; }
|
||||
.mn-wi-89-ns { min-width: 89%; }
|
||||
.mn-wi-90-ns { min-width: 90%; }
|
||||
.mn-wi-91-ns { min-width: 91%; }
|
||||
.mn-wi-92-ns { min-width: 92%; }
|
||||
.mn-wi-93-ns { min-width: 93%; }
|
||||
.mn-wi-94-ns { min-width: 94%; }
|
||||
.mn-wi-95-ns { min-width: 95%; }
|
||||
.mn-wi-96-ns { min-width: 96%; }
|
||||
.mn-wi-97-ns { min-width: 97%; }
|
||||
.mn-wi-98-ns { min-width: 98%; }
|
||||
.mn-wi-99-ns { min-width: 99%; }
|
||||
.mn-wi-100-ns { min-width: 100%; }
|
||||
|
||||
.mn-wi1-ns { min-width: 1rem; }
|
||||
.mn-wi2-ns { min-width: 2rem; }
|
||||
.mn-wi3-ns { min-width: 4rem; }
|
||||
.mn-wi4-ns { min-width: 8rem; }
|
||||
.mn-wi5-ns { min-width: 16rem; }
|
||||
.mn-wi6-ns { min-width: 32rem; }
|
||||
.mn-wi7-ns { min-width: 48rem; }
|
||||
.mn-wi8-ns { min-width: 64rem; }
|
||||
.mn-wi9-ns { min-width: 96rem; }
|
||||
.mn-wi10-ns { min-width: 128rem; }
|
||||
|
||||
.mn-wi-max-ns { min-width: max-content; }
|
||||
.mn-wi-min-ns { min-width: min-content; }
|
||||
.mn-wi-fit-ns { min-width: fit-content; }
|
||||
.mn-wi-fill-ns { min-width: fill-available; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
|
||||
.mn-wi-1-m { min-width: 1%; }
|
||||
.mn-wi-2-m { min-width: 2%; }
|
||||
.mn-wi-3-m { min-width: 3%; }
|
||||
.mn-wi-4-m { min-width: 4%; }
|
||||
.mn-wi-5-m { min-width: 5%; }
|
||||
.mn-wi-6-m { min-width: 6%; }
|
||||
.mn-wi-7-m { min-width: 7%; }
|
||||
.mn-wi-8-m { min-width: 8%; }
|
||||
.mn-wi-9-m { min-width: 9%; }
|
||||
.mn-wi-10-m { min-width: 10%; }
|
||||
.mn-wi-11-m { min-width: 11%; }
|
||||
.mn-wi-12-m { min-width: 12%; }
|
||||
.mn-wi-13-m { min-width: 13%; }
|
||||
.mn-wi-14-m { min-width: 14%; }
|
||||
.mn-wi-15-m { min-width: 15%; }
|
||||
.mn-wi-16-m { min-width: 16%; }
|
||||
.mn-wi-17-m { min-width: 17%; }
|
||||
.mn-wi-18-m { min-width: 18%; }
|
||||
.mn-wi-19-m { min-width: 19%; }
|
||||
.mn-wi-20-m { min-width: 20%; }
|
||||
.mn-wi-21-m { min-width: 21%; }
|
||||
.mn-wi-22-m { min-width: 22%; }
|
||||
.mn-wi-23-m { min-width: 23%; }
|
||||
.mn-wi-24-m { min-width: 24%; }
|
||||
.mn-wi-25-m { min-width: 25%; }
|
||||
.mn-wi-26-m { min-width: 26%; }
|
||||
.mn-wi-27-m { min-width: 27%; }
|
||||
.mn-wi-28-m { min-width: 28%; }
|
||||
.mn-wi-29-m { min-width: 29%; }
|
||||
.mn-wi-30-m { min-width: 30%; }
|
||||
.mn-wi-31-m { min-width: 31%; }
|
||||
.mn-wi-32-m { min-width: 32%; }
|
||||
.mn-wi-33-m { min-width: 33%; }
|
||||
.mn-wi-34-m { min-width: 34%; }
|
||||
.mn-wi-35-m { min-width: 35%; }
|
||||
.mn-wi-36-m { min-width: 36%; }
|
||||
.mn-wi-37-m { min-width: 37%; }
|
||||
.mn-wi-38-m { min-width: 38%; }
|
||||
.mn-wi-39-m { min-width: 39%; }
|
||||
.mn-wi-40-m { min-width: 40%; }
|
||||
.mn-wi-41-m { min-width: 41%; }
|
||||
.mn-wi-42-m { min-width: 42%; }
|
||||
.mn-wi-43-m { min-width: 43%; }
|
||||
.mn-wi-44-m { min-width: 44%; }
|
||||
.mn-wi-45-m { min-width: 45%; }
|
||||
.mn-wi-46-m { min-width: 46%; }
|
||||
.mn-wi-47-m { min-width: 47%; }
|
||||
.mn-wi-48-m { min-width: 48%; }
|
||||
.mn-wi-49-m { min-width: 49%; }
|
||||
.mn-wi-50-m { min-width: 50%; }
|
||||
.mn-wi-51-m { min-width: 51%; }
|
||||
.mn-wi-52-m { min-width: 52%; }
|
||||
.mn-wi-53-m { min-width: 53%; }
|
||||
.mn-wi-54-m { min-width: 54%; }
|
||||
.mn-wi-55-m { min-width: 55%; }
|
||||
.mn-wi-56-m { min-width: 56%; }
|
||||
.mn-wi-57-m { min-width: 57%; }
|
||||
.mn-wi-58-m { min-width: 58%; }
|
||||
.mn-wi-59-m { min-width: 59%; }
|
||||
.mn-wi-60-m { min-width: 60%; }
|
||||
.mn-wi-61-m { min-width: 61%; }
|
||||
.mn-wi-62-m { min-width: 62%; }
|
||||
.mn-wi-63-m { min-width: 63%; }
|
||||
.mn-wi-64-m { min-width: 64%; }
|
||||
.mn-wi-65-m { min-width: 65%; }
|
||||
.mn-wi-66-m { min-width: 66%; }
|
||||
.mn-wi-67-m { min-width: 67%; }
|
||||
.mn-wi-68-m { min-width: 68%; }
|
||||
.mn-wi-69-m { min-width: 69%; }
|
||||
.mn-wi-70-m { min-width: 70%; }
|
||||
.mn-wi-71-m { min-width: 71%; }
|
||||
.mn-wi-72-m { min-width: 72%; }
|
||||
.mn-wi-73-m { min-width: 73%; }
|
||||
.mn-wi-74-m { min-width: 74%; }
|
||||
.mn-wi-75-m { min-width: 75%; }
|
||||
.mn-wi-76-m { min-width: 76%; }
|
||||
.mn-wi-77-m { min-width: 77%; }
|
||||
.mn-wi-78-m { min-width: 78%; }
|
||||
.mn-wi-79-m { min-width: 79%; }
|
||||
.mn-wi-80-m { min-width: 80%; }
|
||||
.mn-wi-81-m { min-width: 81%; }
|
||||
.mn-wi-82-m { min-width: 82%; }
|
||||
.mn-wi-83-m { min-width: 83%; }
|
||||
.mn-wi-84-m { min-width: 84%; }
|
||||
.mn-wi-85-m { min-width: 85%; }
|
||||
.mn-wi-86-m { min-width: 86%; }
|
||||
.mn-wi-87-m { min-width: 87%; }
|
||||
.mn-wi-88-m { min-width: 88%; }
|
||||
.mn-wi-89-m { min-width: 89%; }
|
||||
.mn-wi-90-m { min-width: 90%; }
|
||||
.mn-wi-91-m { min-width: 91%; }
|
||||
.mn-wi-92-m { min-width: 92%; }
|
||||
.mn-wi-93-m { min-width: 93%; }
|
||||
.mn-wi-94-m { min-width: 94%; }
|
||||
.mn-wi-95-m { min-width: 95%; }
|
||||
.mn-wi-96-m { min-width: 96%; }
|
||||
.mn-wi-97-m { min-width: 97%; }
|
||||
.mn-wi-98-m { min-width: 98%; }
|
||||
.mn-wi-99-m { min-width: 99%; }
|
||||
.mn-wi-100-m { min-width: 100%; }
|
||||
.mn-wi1-m { min-width: 1rem; }
|
||||
.mn-wi2-m { min-width: 2rem; }
|
||||
.mn-wi3-m { min-width: 4rem; }
|
||||
.mn-wi4-m { min-width: 8rem; }
|
||||
.mn-wi5-m { min-width: 16rem; }
|
||||
.mn-wi6-m { min-width: 32rem; }
|
||||
.mn-wi7-m { min-width: 48rem; }
|
||||
.mn-wi8-m { min-width: 64rem; }
|
||||
.mn-wi9-m { min-width: 96rem; }
|
||||
.mn-wi10-m { min-width: 128rem; }
|
||||
|
||||
.mn-wi-max-m { min-width: max-content; }
|
||||
.mn-wi-min-m { min-width: min-content; }
|
||||
.mn-wi-fit-m { min-width: fit-content; }
|
||||
.mn-wi-fill-m { min-width: fill-available; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.mn-wi-1-l { min-width: 1%; }
|
||||
.mn-wi-2-l { min-width: 2%; }
|
||||
.mn-wi-3-l { min-width: 3%; }
|
||||
.mn-wi-4-l { min-width: 4%; }
|
||||
.mn-wi-5-l { min-width: 5%; }
|
||||
.mn-wi-6-l { min-width: 6%; }
|
||||
.mn-wi-7-l { min-width: 7%; }
|
||||
.mn-wi-8-l { min-width: 8%; }
|
||||
.mn-wi-9-l { min-width: 9%; }
|
||||
.mn-wi-10-l { min-width: 10%; }
|
||||
.mn-wi-11-l { min-width: 11%; }
|
||||
.mn-wi-12-l { min-width: 12%; }
|
||||
.mn-wi-13-l { min-width: 13%; }
|
||||
.mn-wi-14-l { min-width: 14%; }
|
||||
.mn-wi-15-l { min-width: 15%; }
|
||||
.mn-wi-16-l { min-width: 16%; }
|
||||
.mn-wi-17-l { min-width: 17%; }
|
||||
.mn-wi-18-l { min-width: 18%; }
|
||||
.mn-wi-19-l { min-width: 19%; }
|
||||
.mn-wi-20-l { min-width: 20%; }
|
||||
.mn-wi-21-l { min-width: 21%; }
|
||||
.mn-wi-22-l { min-width: 22%; }
|
||||
.mn-wi-23-l { min-width: 23%; }
|
||||
.mn-wi-24-l { min-width: 24%; }
|
||||
.mn-wi-25-l { min-width: 25%; }
|
||||
.mn-wi-26-l { min-width: 26%; }
|
||||
.mn-wi-27-l { min-width: 27%; }
|
||||
.mn-wi-28-l { min-width: 28%; }
|
||||
.mn-wi-29-l { min-width: 29%; }
|
||||
.mn-wi-30-l { min-width: 30%; }
|
||||
.mn-wi-31-l { min-width: 31%; }
|
||||
.mn-wi-32-l { min-width: 32%; }
|
||||
.mn-wi-33-l { min-width: 33%; }
|
||||
.mn-wi-34-l { min-width: 34%; }
|
||||
.mn-wi-35-l { min-width: 35%; }
|
||||
.mn-wi-36-l { min-width: 36%; }
|
||||
.mn-wi-37-l { min-width: 37%; }
|
||||
.mn-wi-38-l { min-width: 38%; }
|
||||
.mn-wi-39-l { min-width: 39%; }
|
||||
.mn-wi-40-l { min-width: 40%; }
|
||||
.mn-wi-41-l { min-width: 41%; }
|
||||
.mn-wi-42-l { min-width: 42%; }
|
||||
.mn-wi-43-l { min-width: 43%; }
|
||||
.mn-wi-44-l { min-width: 44%; }
|
||||
.mn-wi-45-l { min-width: 45%; }
|
||||
.mn-wi-46-l { min-width: 46%; }
|
||||
.mn-wi-47-l { min-width: 47%; }
|
||||
.mn-wi-48-l { min-width: 48%; }
|
||||
.mn-wi-49-l { min-width: 49%; }
|
||||
.mn-wi-50-l { min-width: 50%; }
|
||||
.mn-wi-51-l { min-width: 51%; }
|
||||
.mn-wi-52-l { min-width: 52%; }
|
||||
.mn-wi-53-l { min-width: 53%; }
|
||||
.mn-wi-54-l { min-width: 54%; }
|
||||
.mn-wi-55-l { min-width: 55%; }
|
||||
.mn-wi-56-l { min-width: 56%; }
|
||||
.mn-wi-57-l { min-width: 57%; }
|
||||
.mn-wi-58-l { min-width: 58%; }
|
||||
.mn-wi-59-l { min-width: 59%; }
|
||||
.mn-wi-60-l { min-width: 60%; }
|
||||
.mn-wi-61-l { min-width: 61%; }
|
||||
.mn-wi-62-l { min-width: 62%; }
|
||||
.mn-wi-63-l { min-width: 63%; }
|
||||
.mn-wi-64-l { min-width: 64%; }
|
||||
.mn-wi-65-l { min-width: 65%; }
|
||||
.mn-wi-66-l { min-width: 66%; }
|
||||
.mn-wi-67-l { min-width: 67%; }
|
||||
.mn-wi-68-l { min-width: 68%; }
|
||||
.mn-wi-69-l { min-width: 69%; }
|
||||
.mn-wi-70-l { min-width: 70%; }
|
||||
.mn-wi-71-l { min-width: 71%; }
|
||||
.mn-wi-72-l { min-width: 72%; }
|
||||
.mn-wi-73-l { min-width: 73%; }
|
||||
.mn-wi-74-l { min-width: 74%; }
|
||||
.mn-wi-75-l { min-width: 75%; }
|
||||
.mn-wi-76-l { min-width: 76%; }
|
||||
.mn-wi-77-l { min-width: 77%; }
|
||||
.mn-wi-78-l { min-width: 78%; }
|
||||
.mn-wi-79-l { min-width: 79%; }
|
||||
.mn-wi-80-l { min-width: 80%; }
|
||||
.mn-wi-81-l { min-width: 81%; }
|
||||
.mn-wi-82-l { min-width: 82%; }
|
||||
.mn-wi-83-l { min-width: 83%; }
|
||||
.mn-wi-84-l { min-width: 84%; }
|
||||
.mn-wi-85-l { min-width: 85%; }
|
||||
.mn-wi-86-l { min-width: 86%; }
|
||||
.mn-wi-87-l { min-width: 87%; }
|
||||
.mn-wi-88-l { min-width: 88%; }
|
||||
.mn-wi-89-l { min-width: 89%; }
|
||||
.mn-wi-90-l { min-width: 90%; }
|
||||
.mn-wi-91-l { min-width: 91%; }
|
||||
.mn-wi-92-l { min-width: 92%; }
|
||||
.mn-wi-93-l { min-width: 93%; }
|
||||
.mn-wi-94-l { min-width: 94%; }
|
||||
.mn-wi-95-l { min-width: 95%; }
|
||||
.mn-wi-96-l { min-width: 96%; }
|
||||
.mn-wi-97-l { min-width: 97%; }
|
||||
.mn-wi-98-l { min-width: 98%; }
|
||||
.mn-wi-99-l { min-width: 99%; }
|
||||
.mn-wi-100-l { min-width: 100%; }
|
||||
|
||||
.mn-wi1-l { min-width: 1rem; }
|
||||
.mn-wi2-l { min-width: 2rem; }
|
||||
.mn-wi3-l { min-width: 4rem; }
|
||||
.mn-wi4-l { min-width: 8rem; }
|
||||
.mn-wi5-l { min-width: 16rem; }
|
||||
.mn-wi6-l { min-width: 32rem; }
|
||||
.mn-wi7-l { min-width: 48rem; }
|
||||
.mn-wi8-l { min-width: 64rem; }
|
||||
.mn-wi9-l { min-width: 96rem; }
|
||||
.mn-wi10-l { min-width: 128rem; }
|
||||
|
||||
.mn-wi-max-l { min-width: max-content; }
|
||||
.mn-wi-min-l { min-width: min-content; }
|
||||
.mn-wi-fit-l { min-width: fit-content; }
|
||||
.mn-wi-fill-l { min-width: fill-available; }
|
||||
}
|
||||
|
||||
405
sass/_normalize.scss
Normal file
405
sass/_normalize.scss
Normal file
|
|
@ -0,0 +1,405 @@
|
|||
/*! normalize.css v2.1.2 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9.
|
||||
* Hide the `template` element in IE, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font family not being inherited in all browsers.
|
||||
* 2. Correct font size not being inherited in all browsers.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
56
sass/_opacity.scss
Normal file
56
sass/_opacity.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
/* ==========================================================================
|
||||
OPACITY
|
||||
========================================================================== */
|
||||
|
||||
/* Opacity */
|
||||
|
||||
.o-10 { opacity: .1; }
|
||||
.o-20 { opacity: .2; }
|
||||
.o-30 { opacity: .3; }
|
||||
.o-40 { opacity: .4; }
|
||||
.o-50 { opacity: .5; }
|
||||
.o-60 { opacity: .6; }
|
||||
.o-70 { opacity: .7; }
|
||||
.o-80 { opacity: .8; }
|
||||
.o-90 { opacity: .9; }
|
||||
.o-full { opacity: 1; }
|
||||
|
||||
@include break(not-small) {
|
||||
.o-10-ns { opacity: .1; }
|
||||
.o-20-ns { opacity: .2; }
|
||||
.o-30-ns { opacity: .3; }
|
||||
.o-40-ns { opacity: .4; }
|
||||
.o-50-ns { opacity: .5; }
|
||||
.o-60-ns { opacity: .6; }
|
||||
.o-70-ns { opacity: .7; }
|
||||
.o-80-ns { opacity: .8; }
|
||||
.o-90-ns { opacity: .9; }
|
||||
.o-full-ns { opacity: 1; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.o-10-m { opacity: .1; }
|
||||
.o-20-m { opacity: .2; }
|
||||
.o-30-m { opacity: .3; }
|
||||
.o-40-m { opacity: .4; }
|
||||
.o-50-m { opacity: .5; }
|
||||
.o-60-m { opacity: .6; }
|
||||
.o-70-m { opacity: .7; }
|
||||
.o-80-m { opacity: .8; }
|
||||
.o-90-m { opacity: .9; }
|
||||
.o-full-m { opacity: 1; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.o-10-l { opacity: .1; }
|
||||
.o-20-l { opacity: .2; }
|
||||
.o-30-l { opacity: .3; }
|
||||
.o-40-l { opacity: .4; }
|
||||
.o-50-l { opacity: .5; }
|
||||
.o-60-l { opacity: .6; }
|
||||
.o-70-l { opacity: .7; }
|
||||
.o-80-l { opacity: .8; }
|
||||
.o-90-l { opacity: .9; }
|
||||
.o-full-l { opacity: 1; }
|
||||
}
|
||||
|
||||
30
sass/_overflow.scss
Normal file
30
sass/_overflow.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
/* ==========================================================================
|
||||
OVERFLOWS
|
||||
========================================================================== */
|
||||
|
||||
.of-vis { overflow: visible; }
|
||||
.of-hid { overflow: hidden; }
|
||||
.of-scr { overflow: scroll; }
|
||||
.of-aut { overflow: auto; }
|
||||
|
||||
@include break(not-small) {
|
||||
.of-vis-ns { overflow: visible; }
|
||||
.of-hid-ns { overflow: hidden; }
|
||||
.of-scr-ns { overflow: scroll; }
|
||||
.of-aut-ns { overflow: auto; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.of-vis-m { overflow: visible; }
|
||||
.of-hid-m { overflow: hidden; }
|
||||
.of-scr-m { overflow: scroll; }
|
||||
.of-aut-m { overflow: auto; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.of-vis-l { overflow: visible; }
|
||||
.of-hid-l { overflow: hidden; }
|
||||
.of-scr-l { overflow: scroll; }
|
||||
.of-aut-l { overflow: auto; }
|
||||
}
|
||||
|
||||
157
sass/_position.scss
Normal file
157
sass/_position.scss
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
/* ==========================================================================
|
||||
POSITIONING
|
||||
========================================================================== */
|
||||
|
||||
.pos-stat { position: static; }
|
||||
.pos-rel { position: relative; }
|
||||
.pos-abs { position: absolute; }
|
||||
.pos-fix { position: fixed; }
|
||||
|
||||
/* Values */
|
||||
|
||||
.top-0 { top: 0; }
|
||||
.left-0 { left: 0; }
|
||||
.right-0 { right: 0; }
|
||||
.bottom-0 { bottom: 0; }
|
||||
|
||||
.top-1 { top: 1rem; }
|
||||
.left-1 { left: 1rem; }
|
||||
.right-1 { right: 1rem; }
|
||||
.bottom-1 { bottom: 1rem; }
|
||||
|
||||
.top-2 { top: 2rem; }
|
||||
.left-2 { left: 2rem; }
|
||||
.right-2 { right: 2rem; }
|
||||
.bottom-2 { bottom: 2rem; }
|
||||
|
||||
.top-4 { top: 4rem; }
|
||||
.left-4 { left: 4rem; }
|
||||
.right-4 { right: 4rem; }
|
||||
.bottom-4 { bottom: 4rem; }
|
||||
|
||||
/* Top Percentage based scale */
|
||||
|
||||
.top-10 { top: 10%; }
|
||||
.top-20 { top: 20%; }
|
||||
.top-30 { top: 30%; }
|
||||
.top-40 { top: 40%; }
|
||||
.top-50 { top: 50%; }
|
||||
.top-60 { top: 60%; }
|
||||
.top-70 { top: 70%; }
|
||||
.top-80 { top: 80%; }
|
||||
.top-90 { top: 90%; }
|
||||
.top-100 { top: 100%; }
|
||||
|
||||
.top-auto { top: auto; }
|
||||
.top-i { top: inherit; ;}
|
||||
|
||||
.center { margin: 0 auto; }
|
||||
|
||||
@include break(not-small) {
|
||||
.pos-stat-ns { position: static; }
|
||||
.pos-rel-ns { position: relative; }
|
||||
.pos-abs-ns { position: absolute; }
|
||||
.pos-fix-ns { position: fixed; }
|
||||
.top-0-ns { top: 0; }
|
||||
.left-0-ns { left: 0; }
|
||||
.right-0-ns { right: 0; }
|
||||
.bottom-0-ns { bottom: 0; }
|
||||
.top-1-ns { top: 1rem; }
|
||||
.left-1-ns { left: 1rem; }
|
||||
.right-1-ns { right: 1rem; }
|
||||
.bottom-1-ns { bottom: 1rem; }
|
||||
.top-2-ns { top: 2rem; }
|
||||
.left-2-ns { left: 2rem; }
|
||||
.right-2-ns { right: 2rem; }
|
||||
.bottom-2-ns { bottom: 2rem; }
|
||||
.top-4-ns { top: 4rem; }
|
||||
.left-4-ns { left: 4rem; }
|
||||
.right-4-ns { right: 4rem; }
|
||||
.bottom-4-ns { bottom: 4rem; }
|
||||
.top-10-ns { top: 10%; }
|
||||
.top-20-ns { top: 20%; }
|
||||
.top-30-ns { top: 30%; }
|
||||
.top-40-ns { top: 40%; }
|
||||
.top-50-ns { top: 50%; }
|
||||
.top-60-ns { top: 60%; }
|
||||
.top-70-ns { top: 70%; }
|
||||
.top-80-ns { top: 80%; }
|
||||
.top-90-ns { top: 90%; }
|
||||
.top-100-ns { top: 100%; }
|
||||
.top-auto-ns { top: auto; }
|
||||
.top-i-ns { top: inherit; ;}
|
||||
.center-ns { margin: 0 auto; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.pos-stat-m { position: static; }
|
||||
.pos-rel-m { position: relative; }
|
||||
.pos-abs-m { position: absolute; }
|
||||
.pos-fix-m { position: fixed; }
|
||||
.top-0-m { top: 0; }
|
||||
.left-0-m { left: 0; }
|
||||
.right-0-m { right: 0; }
|
||||
.bottom-0-m { bottom: 0; }
|
||||
.top-1-m { top: 1rem; }
|
||||
.left-1-m { left: 1rem; }
|
||||
.right-1-m { right: 1rem; }
|
||||
.bottom-1-m { bottom: 1rem; }
|
||||
.top-2-m { top: 2rem; }
|
||||
.left-2-m { left: 2rem; }
|
||||
.right-2-m { right: 2rem; }
|
||||
.bottom-2-m { bottom: 2rem; }
|
||||
.top-4-m { top: 4rem; }
|
||||
.left-4-m { left: 4rem; }
|
||||
.right-4-m { right: 4rem; }
|
||||
.bottom-4-m { bottom: 4rem; }
|
||||
.top-10-m { top: 10%; }
|
||||
.top-20-m { top: 20%; }
|
||||
.top-30-m { top: 30%; }
|
||||
.top-40-m { top: 40%; }
|
||||
.top-50-m { top: 50%; }
|
||||
.top-60-m { top: 60%; }
|
||||
.top-70-m { top: 70%; }
|
||||
.top-80-m { top: 80%; }
|
||||
.top-90-m { top: 90%; }
|
||||
.top-100-m { top: 100%; }
|
||||
.top-auto-m { top: auto; }
|
||||
.top-i-m { top: inherit; ;}
|
||||
.center-m { margin: 0 auto; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.pos-stat-l { position: static; }
|
||||
.pos-rel-l { position: relative; }
|
||||
.pos-abs-l { position: absolute; }
|
||||
.pos-fix-l { position: fixed; }
|
||||
.top-0-l { top: 0; }
|
||||
.left-0-l { left: 0; }
|
||||
.right-0-l { right: 0; }
|
||||
.bottom-0-l { bottom: 0; }
|
||||
.top-1-l { top: 1rem; }
|
||||
.left-1-l { left: 1rem; }
|
||||
.right-1-l { right: 1rem; }
|
||||
.bottom-1-l { bottom: 1rem; }
|
||||
.top-2-l { top: 2rem; }
|
||||
.left-2-l { left: 2rem; }
|
||||
.right-2-l { right: 2rem; }
|
||||
.bottom-2-l { bottom: 2rem; }
|
||||
.top-4-l { top: 4rem; }
|
||||
.left-4-l { left: 4rem; }
|
||||
.right-4-l { right: 4rem; }
|
||||
.bottom-4-l { bottom: 4rem; }
|
||||
.top-10-l { top: 10%; }
|
||||
.top-20-l { top: 20%; }
|
||||
.top-30-l { top: 30%; }
|
||||
.top-40-l { top: 40%; }
|
||||
.top-50-l { top: 50%; }
|
||||
.top-60-l { top: 60%; }
|
||||
.top-70-l { top: 70%; }
|
||||
.top-80-l { top: 80%; }
|
||||
.top-90-l { top: 90%; }
|
||||
.top-100-l { top: 100%; }
|
||||
.top-auto-l { top: auto; }
|
||||
.top-i-l { top: inherit; ;}
|
||||
.center-l { margin: 0 auto; }
|
||||
}
|
||||
|
||||
31
sass/_queries.scss
Normal file
31
sass/_queries.scss
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
/* ==========================================================================
|
||||
QUERIES
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Mixing for mobile first queries.
|
||||
* Two breakpoints.
|
||||
* Use like @include break(medium) {
|
||||
* ***Styles***
|
||||
* }
|
||||
*
|
||||
*/
|
||||
|
||||
@mixin break($point) {
|
||||
@if $point == not-small {
|
||||
@media screen and (min-width: 48em) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else if $point == medium {
|
||||
@media screen and (min-width: 48em) and (max-width: 64em) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@else if $point == large {
|
||||
@media screen and (min-width: 64em) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
305
sass/_skins.scss
Normal file
305
sass/_skins.scss
Normal file
|
|
@ -0,0 +1,305 @@
|
|||
/* ==========================================================================
|
||||
SKINS
|
||||
========================================================================== */
|
||||
|
||||
|
||||
/* Grays */
|
||||
|
||||
.blk { color: $near-black; }
|
||||
.dk-gry { color: $dark-gray; }
|
||||
.md-gry { color: $mid-gray; }
|
||||
.gray { color: $gray; }
|
||||
.silver { color: $silver; }
|
||||
.lt-slvr { color: $light-silver; }
|
||||
.lt-gry { color: $light-gray; }
|
||||
.near-wht { color: $near-white; }
|
||||
.wht { color: $white; }
|
||||
|
||||
|
||||
/* Text colors */
|
||||
|
||||
.pink {color: $pink;}
|
||||
.lightpink { color: $lightpink; }
|
||||
.hotpink { color: $hotpink; }
|
||||
.deeppink { color: $deeppink; }
|
||||
.palevioletred { color: $palevioletred; }
|
||||
.mediumvioletred { color: $mediumvioletred; }
|
||||
.lightsalmon { color: $lightsalmon; }
|
||||
.salmon { color: $salmon; }
|
||||
.darksalmon { color: $darksalmon; }
|
||||
.lightcoral { color: $lightcoral; }
|
||||
.indianred { color: $indianred; }
|
||||
.crimson { color: $crimson; }
|
||||
.firebrick { color: $firebrick; }
|
||||
.darkred { color: $darkred; }
|
||||
.red { color: $red; }
|
||||
.orangered { color: $orangered; }
|
||||
.tomato { color: $tomato; }
|
||||
.coral { color: $coral; }
|
||||
.darkorange { color: $darkorange; }
|
||||
.orange { color: $orange; }
|
||||
.gold { color: $gold; }
|
||||
.yellow { color: $yellow; }
|
||||
.lightyellow { color: $lightyellow; }
|
||||
.lemonchiffon { color: $lemonchiffon; }
|
||||
.lightgoldenrodyellow { color: $lightgoldenrodyellow; }
|
||||
.papayawhip { color: $papayawhip; }
|
||||
.moccasin { color: $moccasin; }
|
||||
.peachpuff { color: $peachpuff; }
|
||||
.palegoldenrod { color: $palegoldenrod; }
|
||||
.khaki { color: $khaki; }
|
||||
.darkkhaki { color: $darkkhaki; }
|
||||
.cornsilk { color: $cornsilk; }
|
||||
.blanchedalmond { color: $blanchedalmond; }
|
||||
.bisque { color: $bisque; }
|
||||
.navajowhite { color: $navajowhite; }
|
||||
.wheat { color: $wheat; }
|
||||
.burlywood { color: $burlywood; }
|
||||
.tan { color: $tan; }
|
||||
.rosybrown { color: $rosybrown; }
|
||||
.sandybrown { color: $sandybrown; }
|
||||
.goldenrod { color: $goldenrod; }
|
||||
.darkgoldenrod { color: $darkgoldenrod; }
|
||||
.peru { color: $peru; }
|
||||
.chocolate { color: $chocolate; }
|
||||
.saddlebrown { color: $saddlebrown; }
|
||||
.sienna { color: $sienna; }
|
||||
.brown { color: $brown; }
|
||||
.maroon { color: $maroon; }
|
||||
.darkolivegreen { color: $darkolivegreen; }
|
||||
.olive { color: $olive; }
|
||||
.olivedrab { color: $olivedrab; }
|
||||
.yellowgreen { color: $yellowgreen; }
|
||||
.limegreen { color: $limegreen; }
|
||||
.lime { color: $lime; }
|
||||
.lawngreen { color: $lawngreen; }
|
||||
.chartreuse { color: $chartreuse; }
|
||||
.greenyellow { color: $greenyellow; }
|
||||
.springgreen { color: $springgreen; }
|
||||
.mediumspringgreen { color: $mediumspringgreen; }
|
||||
.lightgreen { color: $lightgreen; }
|
||||
.palegreen { color: $palegreen; }
|
||||
.darkseagreen { color: $darkseagreen; }
|
||||
.mediumseagreen { color: $mediumseagreen; }
|
||||
.seagreen { color: $seagreen; }
|
||||
.forestgreen { color: $forestgreen; }
|
||||
.green { color: $green; }
|
||||
.darkgreen { color: $darkgreen; }
|
||||
.mediumaquamarine { color: $mediumaquamarine; }
|
||||
.aqua { color: $aqua; }
|
||||
.cyan { color: $cyan; }
|
||||
.lightcyan { color: $lightcyan; }
|
||||
.paleturquoise { color: $paleturquoise; }
|
||||
.aquamarine { color: $aquamarine; }
|
||||
.turquoise { color: $turquoise; }
|
||||
.mediumturquoise { color: $mediumturquoise; }
|
||||
.darkturquoise { color: $darkturquoise; }
|
||||
.lightseagreen { color: $lightseagreen; }
|
||||
.cadetblue { color: $cadetblue; }
|
||||
.darkcyan { color: $darkcyan; }
|
||||
.teal { color: $teal; }
|
||||
.lightsteelblue { color: $lightsteelblue; }
|
||||
.powderblue { color: $powderblue; }
|
||||
.lightblue { color: $lightblue; }
|
||||
.skyblue { color: $skyblue; }
|
||||
.lightskyblue { color: $lightskyblue; }
|
||||
.deepskyblue { color: $deepskyblue; }
|
||||
.dodgerblue { color: $dodgerblue; }
|
||||
.cornflowerblue { color: $cornflowerblue; }
|
||||
.steelblue { color: $steelblue; }
|
||||
.royalblue { color: $royalblue; }
|
||||
.blue { color: $blue; }
|
||||
.mediumblue { color: $mediumblue; }
|
||||
.darkblue { color: $darkblue; }
|
||||
.navy { color: $navy; }
|
||||
.midnightblue { color: $midnightblue; }
|
||||
.lavender { color: $lavender; }
|
||||
.thistle { color: $thistle; }
|
||||
.plum { color: $plum; }
|
||||
.violet { color: $violet; }
|
||||
.orchid { color: $orchid; }
|
||||
.fuchsia { color: $fuchsia; }
|
||||
.magenta { color: $magenta; }
|
||||
.mediumorchid { color: $mediumorchid; }
|
||||
.mediumpurple { color: $mediumpurple; }
|
||||
.blueviolet { color: $blueviolet; }
|
||||
.darkviolet { color: $darkviolet; }
|
||||
.darkorchid { color: $darkorchid; }
|
||||
.darkmagenta { color: $darkmagenta; }
|
||||
.purple { color: $purple; }
|
||||
.indigo { color: $indigo; }
|
||||
.darkslateblue { color: $darkslateblue; }
|
||||
.slateblue { color: $slateblue; }
|
||||
.mediumslateblue { color: $mediumslateblue; }
|
||||
.white { color: $white; }
|
||||
.snow { color: $snow; }
|
||||
.honeydew { color: $honeydew; }
|
||||
.mintcream { color: $mintcream; }
|
||||
.azure { color: $azure; }
|
||||
.aliceblue { color: $aliceblue; }
|
||||
.ghostwhite { color: $ghostwhite; }
|
||||
.whitesmoke { color: $whitesmoke; }
|
||||
.seashell { color: $seashell; }
|
||||
.beige { color: $beige; }
|
||||
.oldlace { color: $oldlace; }
|
||||
.floralwhite { color: $floralwhite; }
|
||||
.ivory { color: $ivory; }
|
||||
.antiquewhite { color: $antiquewhite; }
|
||||
.linen { color: $linen; }
|
||||
.lavenderblush { color: $lavenderblush; }
|
||||
.mistyrose { color: $mistyrose; }
|
||||
.gainsboro { color: $gainsboro; }
|
||||
.lightgray { color: $lightgray; }
|
||||
.silver { color: $silver; }
|
||||
.darkgray { color: $darkgray; }
|
||||
.gray { color: $gray; }
|
||||
.dimgray { color: $dimgray; }
|
||||
.lightslategray { color: $lightslategray; }
|
||||
.slategray { color: $slategray; }
|
||||
.darkslategray { color: $darkslategray; }
|
||||
.black { color: $black; }
|
||||
|
||||
|
||||
/* Background Skins */
|
||||
|
||||
.bg-pink {background-color: $pink;}
|
||||
.bg-lightpink { background-color: $lightpink; }
|
||||
.bg-hotpink { background-color: $hotpink; }
|
||||
.bg-deeppink { background-color: $deeppink; }
|
||||
.bg-palevioletred { background-color: $palevioletred; }
|
||||
.bg-mediumvioletred { background-color: $mediumvioletred; }
|
||||
.bg-lightsalmon { background-color: $lightsalmon; }
|
||||
.bg-salmon { background-color: $salmon; }
|
||||
.bg-darksalmon { background-color: $darksalmon; }
|
||||
.bg-lightcoral { background-color: $lightcoral; }
|
||||
.bg-indianred { background-color: $indianred; }
|
||||
.bg-crimson { background-color: $crimson; }
|
||||
.bg-firebrick { background-color: $firebrick; }
|
||||
.bg-darkred { background-color: $darkred; }
|
||||
.bg-red { background-color: $red; }
|
||||
.bg-orangered { background-color: $orangered; }
|
||||
.bg-tomato { background-color: $tomato; }
|
||||
.bg-coral { background-color: $coral; }
|
||||
.bg-darkorange { background-color: $darkorange; }
|
||||
.bg-orange { background-color: $orange; }
|
||||
.bg-gold { background-color: $gold; }
|
||||
.bg-yellow { background-color: $yellow; }
|
||||
.bg-lightyellow { background-color: $lightyellow; }
|
||||
.bg-lemonchiffon { background-color: $lemonchiffon; }
|
||||
.bg-lightgoldenrodyellow { background-color: $lightgoldenrodyellow; }
|
||||
.bg-papayawhip { background-color: $papayawhip; }
|
||||
.bg-moccasin { background-color: $moccasin; }
|
||||
.bg-peachpuff { background-color: $peachpuff; }
|
||||
.bg-palegoldenrod { background-color: $palegoldenrod; }
|
||||
.bg-khaki { background-color: $khaki; }
|
||||
.bg-darkkhaki { background-color: $darkkhaki; }
|
||||
.bg-cornsilk { background-color: $cornsilk; }
|
||||
.bg-blanchedalmond { background-color: $blanchedalmond; }
|
||||
.bg-bisque { background-color: $bisque; }
|
||||
.bg-navajowhite { background-color: $navajowhite; }
|
||||
.bg-wheat { background-color: $wheat; }
|
||||
.bg-burlywood { background-color: $burlywood; }
|
||||
.bg-tan { background-color: $tan; }
|
||||
.bg-rosybrown { background-color: $rosybrown; }
|
||||
.bg-sandybrown { background-color: $sandybrown; }
|
||||
.bg-goldenrod { background-color: $goldenrod; }
|
||||
.bg-darkgoldenrod { background-color: $darkgoldenrod; }
|
||||
.bg-peru { background-color: $peru; }
|
||||
.bg-chocolate { background-color: $chocolate; }
|
||||
.bg-saddlebrown { background-color: $saddlebrown; }
|
||||
.bg-sienna { background-color: $sienna; }
|
||||
.bg-brown { background-color: $brown; }
|
||||
.bg-maroon { background-color: $maroon; }
|
||||
.bg-darkolivegreen { background-color: $darkolivegreen; }
|
||||
.bg-olive { background-color: $olive; }
|
||||
.bg-olivedrab { background-color: $olivedrab; }
|
||||
.bg-yellowgreen { background-color: $yellowgreen; }
|
||||
.bg-limegreen { background-color: $limegreen; }
|
||||
.bg-lime { background-color: $lime; }
|
||||
.bg-lawngreen { background-color: $lawngreen; }
|
||||
.bg-chartreuse { background-color: $chartreuse; }
|
||||
.bg-greenyellow { background-color: $greenyellow; }
|
||||
.bg-springgreen { background-color: $springgreen; }
|
||||
.bg-mediumspringgreen { background-color: $mediumspringgreen; }
|
||||
.bg-lightgreen { background-color: $lightgreen; }
|
||||
.bg-palegreen { background-color: $palegreen; }
|
||||
.bg-darkseagreen { background-color: $darkseagreen; }
|
||||
.bg-mediumseagreen { background-color: $mediumseagreen; }
|
||||
.bg-seagreen { background-color: $seagreen; }
|
||||
.bg-forestgreen { background-color: $forestgreen; }
|
||||
.bg-green { background-color: $green; }
|
||||
.bg-darkgreen { background-color: $darkgreen; }
|
||||
.bg-mediumaquamarine { background-color: $mediumaquamarine; }
|
||||
.bg-aqua { background-color: $aqua; }
|
||||
.bg-cyan { background-color: $cyan; }
|
||||
.bg-lightcyan { background-color: $lightcyan; }
|
||||
.bg-paleturquoise { background-color: $paleturquoise; }
|
||||
.bg-aquamarine { background-color: $aquamarine; }
|
||||
.bg-turquoise { background-color: $turquoise; }
|
||||
.bg-mediumturquoise { background-color: $mediumturquoise; }
|
||||
.bg-darkturquoise { background-color: $darkturquoise; }
|
||||
.bg-lightseagreen { background-color: $lightseagreen; }
|
||||
.bg-cadetblue { background-color: $cadetblue; }
|
||||
.bg-darkcyan { background-color: $darkcyan; }
|
||||
.bg-teal { background-color: $teal; }
|
||||
.bg-lightsteelblue { background-color: $lightsteelblue; }
|
||||
.bg-powderblue { background-color: $powderblue; }
|
||||
.bg-lightblue { background-color: $lightblue; }
|
||||
.bg-skyblue { background-color: $skyblue; }
|
||||
.bg-lightskyblue { background-color: $lightskyblue; }
|
||||
.bg-deepskyblue { background-color: $deepskyblue; }
|
||||
.bg-dodgerblue { background-color: $dodgerblue; }
|
||||
.bg-cornflowerblue { background-color: $cornflowerblue; }
|
||||
.bg-steelblue { background-color: $steelblue; }
|
||||
.bg-royalblue { background-color: $royalblue; }
|
||||
.bg-blue { background-color: $blue; }
|
||||
.bg-mediumblue { background-color: $mediumblue; }
|
||||
.bg-darkblue { background-color: $darkblue; }
|
||||
.bg-navy { background-color: $navy; }
|
||||
.bg-midnightblue { background-color: $midnightblue; }
|
||||
.bg-lavender { background-color: $lavender; }
|
||||
.bg-thistle { background-color: $thistle; }
|
||||
.bg-plum { background-color: $plum; }
|
||||
.bg-violet { background-color: $violet; }
|
||||
.bg-orchid { background-color: $orchid; }
|
||||
.bg-fuchsia { background-color: $fuchsia; }
|
||||
.bg-magenta { background-color: $magenta; }
|
||||
.bg-mediumorchid { background-color: $mediumorchid; }
|
||||
.bg-mediumpurple { background-color: $mediumpurple; }
|
||||
.bg-blueviolet { background-color: $blueviolet; }
|
||||
.bg-darkviolet { background-color: $darkviolet; }
|
||||
.bg-darkorchid { background-color: $darkorchid; }
|
||||
.bg-darkmagenta { background-color: $darkmagenta; }
|
||||
.bg-purple { background-color: $purple; }
|
||||
.bg-indigo { background-color: $indigo; }
|
||||
.bg-darkslateblue { background-color: $darkslateblue; }
|
||||
.bg-slateblue { background-color: $slateblue; }
|
||||
.bg-mediumslateblue { background-color: $mediumslateblue; }
|
||||
.bg-white { background-color: $white; }
|
||||
.bg-snow { background-color: $snow; }
|
||||
.bg-honeydew { background-color: $honeydew; }
|
||||
.bg-mintcream { background-color: $mintcream; }
|
||||
.bg-azure { background-color: $azure; }
|
||||
.bg-aliceblue { background-color: $aliceblue; }
|
||||
.bg-ghostwhite { background-color: $ghostwhite; }
|
||||
.bg-whitesmoke { background-color: $whitesmoke; }
|
||||
.bg-seashell { background-color: $seashell; }
|
||||
.bg-beige { background-color: $beige; }
|
||||
.bg-oldlace { background-color: $oldlace; }
|
||||
.bg-floralwhite { background-color: $floralwhite; }
|
||||
.bg-ivory { background-color: $ivory; }
|
||||
.bg-antiquewhite { background-color: $antiquewhite; }
|
||||
.bg-linen { background-color: $linen; }
|
||||
.bg-lavenderblush { background-color: $lavenderblush; }
|
||||
.bg-mistyrose { background-color: $mistyrose; }
|
||||
.bg-gainsboro { background-color: $gainsboro; }
|
||||
.bg-lightgray { background-color: $lightgray; }
|
||||
.bg-silver { background-color: $silver; }
|
||||
.bg-darkgray { background-color: $darkgray; }
|
||||
.bg-gray { background-color: $gray; }
|
||||
.bg-dimgray { background-color: $dimgray; }
|
||||
.bg-lightslategray { background-color: $lightslategray; }
|
||||
.bg-slategray { background-color: $slategray; }
|
||||
.bg-darkslategray { background-color: $darkslategray; }
|
||||
.bg-black { background-color: $black; }
|
||||
|
||||
539
sass/_spacing.scss
Normal file
539
sass/_spacing.scss
Normal file
|
|
@ -0,0 +1,539 @@
|
|||
/* ==========================================================================
|
||||
SPACING
|
||||
|
||||
An eight step powers of two scale ranging from 0 to 16rem.
|
||||
|
||||
Legend:
|
||||
|
||||
p = padding
|
||||
m = margin
|
||||
|
||||
a = all
|
||||
h = horizontal
|
||||
v = vertical
|
||||
t = top
|
||||
r = right
|
||||
b = bottom
|
||||
l = left
|
||||
|
||||
n = none
|
||||
xs = extra small
|
||||
s = small
|
||||
m = medium
|
||||
l = large
|
||||
x = extra
|
||||
xl = extra large
|
||||
xxl = extra extra large
|
||||
|
||||
========================================================================== */
|
||||
|
||||
.pan { padding: 0; }
|
||||
.paxs { padding: .25rem; }
|
||||
.pas { padding: .5rem; }
|
||||
.pam { padding: 1rem; }
|
||||
.pal { padding: 2rem; }
|
||||
.pax { padding: 4rem; }
|
||||
.paxl { padding: 8rem; }
|
||||
.paxxl { padding: 16rem; }
|
||||
|
||||
.pln { padding-left: 0; }
|
||||
.plxs { padding-left: .25rem; }
|
||||
.pls { padding-left: .5rem; }
|
||||
.plm { padding-left: 1rem; }
|
||||
.pll { padding-left: 2rem; }
|
||||
.plx { padding-left: 4rem; }
|
||||
.plxl { padding-left: 8rem; }
|
||||
.plxxl { padding-left: 16rem; }
|
||||
|
||||
.prn { padding-right: 0; }
|
||||
.prxs { padding-right: .25rem; }
|
||||
.prs { padding-right: .5rem; }
|
||||
.prm { padding-right: 1rem; }
|
||||
.prl { padding-right: 2rem; }
|
||||
.prx { padding-right: 4rem; }
|
||||
.prxl { padding-right: 8rem; }
|
||||
.prxxl { padding-right: 16rem; }
|
||||
|
||||
.pbn { padding-bottom: 0; }
|
||||
.pbxs { padding-bottom: .25rem; }
|
||||
.pbs { padding-bottom: .5rem; }
|
||||
.pbm { padding-bottom: 1rem; }
|
||||
.pbl { padding-bottom: 2rem; }
|
||||
.pbx { padding-bottom: 4rem; }
|
||||
.pbxl { padding-bottom: 8rem; }
|
||||
.pbxxl { padding-bottom: 16rem; }
|
||||
|
||||
.ptn { padding-top: 0; }
|
||||
.ptxs { padding-top: .25rem; }
|
||||
.pts { padding-top: .5rem; }
|
||||
.ptm { padding-top: 1rem; }
|
||||
.ptl { padding-top: 2rem; }
|
||||
.ptx { padding-top: 4rem; }
|
||||
.ptxl { padding-top: 8rem; }
|
||||
.ptxxl { padding-top: 16rem; }
|
||||
|
||||
.pvn { padding-top: 0; padding-bottom: 0; }
|
||||
.pvxs { padding-top: .25rem; padding-bottom: .25rem; }
|
||||
.pvs { padding-top: .5rem; padding-bottom: .5rem; }
|
||||
.pvm { padding-top: 1rem; padding-bottom: 1rem; }
|
||||
.pvl { padding-top: 2rem; padding-bottom: 2rem; }
|
||||
.pvx { padding-top: 4rem; padding-bottom: 4rem; }
|
||||
.pvxl { padding-top: 8rem; padding-bottom: 8rem; }
|
||||
.pvxxl { padding-top: 16rem; padding-bottom: 16rem; }
|
||||
|
||||
.phn { padding-left: 0; padding-right: 0; }
|
||||
.pvxs { padding-left: .25rem; padding-right: .25rem; }
|
||||
.phs { padding-left: .5rem; padding-right: .5rem; }
|
||||
.phm { padding-left: 1rem; padding-right: 1rem; }
|
||||
.phl { padding-left: 2rem; padding-right: 2rem; }
|
||||
.phx { padding-left: 4rem; padding-right: 4rem; }
|
||||
.phxl { padding-left: 8rem; padding-right: 8rem; }
|
||||
.phxxl { padding-left: 16rem; padding-right: 16rem; }
|
||||
|
||||
.man { margin: 0; }
|
||||
.maxs { margin: .25rem; }
|
||||
.mas { margin: .5rem; }
|
||||
.mam { margin: 1rem; }
|
||||
.mal { margin: 2rem; }
|
||||
.max { margin: 4rem; }
|
||||
.maxl { margin: 8rem; }
|
||||
.maxxl { margin: 16rem; }
|
||||
|
||||
.mln { margin-left: 0; }
|
||||
.mlxs { margin-left: .25rem; }
|
||||
.mls { margin-left: .5rem; }
|
||||
.mlm { margin-left: 1rem; }
|
||||
.mll { margin-left: 2rem; }
|
||||
.mlx { margin-left: 4rem; }
|
||||
.mlxl { margin-left: 8rem; }
|
||||
.mlxxl { margin-left: 16rem; }
|
||||
|
||||
.mrn { margin-right: 0; }
|
||||
.mrxs { margin-right: .25rem; }
|
||||
.mrs { margin-right: .5rem; }
|
||||
.mrm { margin-right: 1rem; }
|
||||
.mrl { margin-right: 2rem; }
|
||||
.mrx { margin-right: 4rem; }
|
||||
.mrxl { margin-right: 8rem; }
|
||||
.mrxxl { margin-right: 16rem; }
|
||||
|
||||
.mbn { margin-bottom: 0; }
|
||||
.mbxs { margin-bottom: .25rem; }
|
||||
.mbs { margin-bottom: .5rem; }
|
||||
.mbm { margin-bottom: 1rem; }
|
||||
.mbl { margin-bottom: 2rem; }
|
||||
.mbx { margin-bottom: 4rem; }
|
||||
.mbxl { margin-bottom: 8rem; }
|
||||
.mbxxl { margin-bottom: 16rem; }
|
||||
|
||||
.mtn { margin-top: 0; }
|
||||
.mtxs { margin-top: .25rem; }
|
||||
.mts { margin-top: .5rem; }
|
||||
.mtm { margin-top: 1rem; }
|
||||
.mtl { margin-top: 2rem; }
|
||||
.mtx { margin-top: 4rem; }
|
||||
.mtxl { margin-top: 8rem; }
|
||||
.mtxxl { margin-top: 16rem; }
|
||||
|
||||
.mvn { margin-top: 0; margin-bottom: 0rem; }
|
||||
.mvxs { margin-top: .25rem; margin-bottom: .25rem; }
|
||||
.mvs { margin-top: .5rem; margin-bottom: .5rem; }
|
||||
.mvm { margin-top: 1rem; margin-bottom: 1rem; }
|
||||
.mvl { margin-top: 2rem; margin-bottom: 2rem; }
|
||||
.mvx { margin-top: 4rem; margin-bottom: 4rem; }
|
||||
.mvxl { margin-top: 8rem; margin-bottom: 8rem; }
|
||||
.mvxl { margin-top: 16rem; margin-bottom: 16rem; }
|
||||
|
||||
.mhn { margin-left: 0; margin-right: 0; }
|
||||
.mhs { margin-left: .5rem; margin-right: .5rem; }
|
||||
.mhm { margin-left: 1rem; margin-right: 1rem; }
|
||||
.mhl { margin-left: 2rem; margin-right: 2rem; }
|
||||
.mhx { margin-left: 4rem; margin-right: 4rem; }
|
||||
.mhxl { margin-left: 8rem; margin-right: 8rem; }
|
||||
.mhxxl { margin-left: 16rem; margin-right: 16rem; }
|
||||
|
||||
@include break(not-small) {
|
||||
.pan-ns { padding: 0; }
|
||||
.paxs-ns { padding: .25rem; }
|
||||
.pas-ns { padding: .5rem; }
|
||||
.pam-ns { padding: 1rem; }
|
||||
.pal-ns { padding: 2rem; }
|
||||
.pax-ns { padding: 4rem; }
|
||||
.paxl-ns { padding: 8rem; }
|
||||
.paxxl-ns { padding: 16rem; }
|
||||
|
||||
.pln-ns { padding-left: 0; }
|
||||
.plxs-ns { padding-left: .25rem; }
|
||||
.pls-ns { padding-left: .5rem; }
|
||||
.plm-ns { padding-left: 1rem; }
|
||||
.pll-ns { padding-left: 2rem; }
|
||||
.plx-ns { padding-left: 4rem; }
|
||||
.plxl-ns { padding-left: 8rem; }
|
||||
.plxxl-ns { padding-left: 16rem; }
|
||||
|
||||
.prn-ns { padding-right: 0; }
|
||||
.prxs-ns { padding-right: .25rem; }
|
||||
.prs-ns { padding-right: .5rem; }
|
||||
.prm-ns { padding-right: 1rem; }
|
||||
.prl-ns { padding-right: 2rem; }
|
||||
.prx-ns { padding-right: 4rem; }
|
||||
.prxl-ns { padding-right: 8rem; }
|
||||
.prxxl-ns { padding-right: 16rem; }
|
||||
|
||||
.pbn-ns { padding-bottom: 0; }
|
||||
.pbxs-ns { padding-bottom: .25rem; }
|
||||
.pbs-ns { padding-bottom: .5rem; }
|
||||
.pbm-ns { padding-bottom: 1rem; }
|
||||
.pbl-ns { padding-bottom: 2rem; }
|
||||
.pbx-ns { padding-bottom: 4rem; }
|
||||
.pbxl-ns { padding-bottom: 8rem; }
|
||||
.pbxxl-ns { padding-bottom: 16rem; }
|
||||
|
||||
.ptn-ns { padding-top: 0; }
|
||||
.ptxs-ns { padding-top: .25rem; }
|
||||
.pts-ns { padding-top: .5rem; }
|
||||
.ptm-ns { padding-top: 1rem; }
|
||||
.ptl-ns { padding-top: 2rem; }
|
||||
.ptx-ns { padding-top: 4rem; }
|
||||
.ptxl-ns { padding-top: 8rem; }
|
||||
.ptxxl-ns { padding-top: 16rem; }
|
||||
|
||||
.pvn-ns { padding-top: 0; padding-bottom: 0; }
|
||||
.pvxs-ns { padding-top: .25rem; padding-bottom: .25rem; }
|
||||
.pvs-ns { padding-top: .5rem; padding-bottom: .5rem; }
|
||||
.pvm-ns { padding-top: 1rem; padding-bottom: 1rem; }
|
||||
.pvl-ns { padding-top: 2rem; padding-bottom: 2rem; }
|
||||
.pvx-ns { padding-top: 4rem; padding-bottom: 4rem; }
|
||||
.pvxl-ns { padding-top: 8rem; padding-bottom: 8rem; }
|
||||
.pvxxl-ns { padding-top: 16rem; padding-bottom: 16rem; }
|
||||
|
||||
.phn-ns { padding-left: 0; padding-right: 0; }
|
||||
.pvxs-ns { padding-left: .25rem; padding-right: .25rem; }
|
||||
.phs-ns { padding-left: .5rem; padding-right: .5rem; }
|
||||
.phm-ns { padding-left: 1rem; padding-right: 1rem; }
|
||||
.phl-ns { padding-left: 2rem; padding-right: 2rem; }
|
||||
.phx-ns { padding-left: 4rem; padding-right: 4rem; }
|
||||
.phxl-ns { padding-left: 8rem; padding-right: 8rem; }
|
||||
.phxxl-ns { padding-left: 16rem; padding-right: 16rem; }
|
||||
|
||||
.man-ns { margin: 0; }
|
||||
.maxs-ns { margin: .25rem; }
|
||||
.mas-ns { margin: .5rem; }
|
||||
.mam-ns { margin: 1rem; }
|
||||
.mal-ns { margin: 2rem; }
|
||||
.max-ns { margin: 4rem; }
|
||||
.maxl-ns { margin: 8rem; }
|
||||
.maxxl-ns { margin: 16rem; }
|
||||
|
||||
.mln-ns { margin-left: 0; }
|
||||
.mlxs-ns { margin-left: .25rem; }
|
||||
.mls-ns { margin-left: .5rem; }
|
||||
.mlm-ns { margin-left: 1rem; }
|
||||
.mll-ns { margin-left: 2rem; }
|
||||
.mlx-ns { margin-left: 4rem; }
|
||||
.mlxl-ns { margin-left: 8rem; }
|
||||
.mlxxl-ns { margin-left: 16rem; }
|
||||
|
||||
.mrn-ns { margin-right: 0; }
|
||||
.mrxs-ns { margin-right: .25rem; }
|
||||
.mrs-ns { margin-right: .5rem; }
|
||||
.mrm-ns { margin-right: 1rem; }
|
||||
.mrl-ns { margin-right: 2rem; }
|
||||
.mrx-ns { margin-right: 4rem; }
|
||||
.mrxl-ns { margin-right: 8rem; }
|
||||
.mrxxl-ns { margin-right: 16rem; }
|
||||
|
||||
.mbn-ns { margin-bottom: 0; }
|
||||
.mbxs-ns { margin-bottom: .25rem; }
|
||||
.mbs-ns { margin-bottom: .5rem; }
|
||||
.mbm-ns { margin-bottom: 1rem; }
|
||||
.mbl-ns { margin-bottom: 2rem; }
|
||||
.mbx-ns { margin-bottom: 4rem; }
|
||||
.mbxl-ns { margin-bottom: 8rem; }
|
||||
.mbxxl-ns { margin-bottom: 16rem; }
|
||||
|
||||
.mtn-ns { margin-top: 0; }
|
||||
.mtxs-ns { margin-top: .25rem; }
|
||||
.mts-ns { margin-top: .5rem; }
|
||||
.mtm-ns { margin-top: 1rem; }
|
||||
.mtl-ns { margin-top: 2rem; }
|
||||
.mtx-ns { margin-top: 4rem; }
|
||||
.mtxl-ns { margin-top: 8rem; }
|
||||
.mtxxl-ns { margin-top: 16rem; }
|
||||
|
||||
.mvn-ns { margin-top: 0; margin-bottom: 0rem; }
|
||||
.mvxs-ns { margin-top: .25rem; margin-bottom: .25rem; }
|
||||
.mvs-ns { margin-top: .5rem; margin-bottom: .5rem; }
|
||||
.mvm-ns { margin-top: 1rem; margin-bottom: 1rem; }
|
||||
.mvl-ns { margin-top: 2rem; margin-bottom: 2rem; }
|
||||
.mvx-ns { margin-top: 4rem; margin-bottom: 4rem; }
|
||||
.mvxl-ns { margin-top: 8rem; margin-bottom: 8rem; }
|
||||
.mvxxl-ns { margin-top: 16rem; margin-bottom: 16rem; }
|
||||
|
||||
.mhn-ns { margin-left: 0; margin-right: 0; }
|
||||
.mhs-ns { margin-left: .5rem; margin-right: .5rem; }
|
||||
.mhm-ns { margin-left: 1rem; margin-right: 1rem; }
|
||||
.mhl-ns { margin-left: 2rem; margin-right: 2rem; }
|
||||
.mhx-ns { margin-left: 4rem; margin-right: 4rem; }
|
||||
.mhxl-ns { margin-left: 8rem; margin-right: 8rem; }
|
||||
.mhxxl-ns { margin-left: 16rem; margin-right: 16rem; }
|
||||
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.pan-m { padding: 0; }
|
||||
.paxs-m { padding: .25rem; }
|
||||
.pas-m { padding: .5rem; }
|
||||
.pam-m { padding: 1rem; }
|
||||
.pal-m { padding: 2rem; }
|
||||
.pax-m { padding: 4rem; }
|
||||
.paxl-m { padding: 8rem; }
|
||||
.paxxl-m { padding: 16rem; }
|
||||
|
||||
.pln-m { padding-left: 0; }
|
||||
.plxs-m { padding-left: .25rem; }
|
||||
.pls-m { padding-left: .5rem; }
|
||||
.plm-m { padding-left: 1rem; }
|
||||
.pll-m { padding-left: 2rem; }
|
||||
.plx-m { padding-left: 4rem; }
|
||||
.plxl-m { padding-left: 8rem; }
|
||||
.plxxl-m { padding-left: 16rem; }
|
||||
|
||||
.prn-m { padding-right: 0; }
|
||||
.prxs-m { padding-right: .25rem; }
|
||||
.prs-m { padding-right: .5rem; }
|
||||
.prm-m { padding-right: 1rem; }
|
||||
.prl-m { padding-right: 2rem; }
|
||||
.prx-m { padding-right: 4rem; }
|
||||
.prxl-m { padding-right: 8rem; }
|
||||
.prxxl-m { padding-right: 16rem; }
|
||||
|
||||
.pbn-m { padding-bottom: 0; }
|
||||
.pbxs-m { padding-bottom: .25rem; }
|
||||
.pbs-m { padding-bottom: .5rem; }
|
||||
.pbm-m { padding-bottom: 1rem; }
|
||||
.pbl-m { padding-bottom: 2rem; }
|
||||
.pbx-m { padding-bottom: 4rem; }
|
||||
.pbxl-m { padding-bottom: 8rem; }
|
||||
.pbxxl-m { padding-bottom: 16rem; }
|
||||
|
||||
.ptn-m { padding-top: 0; }
|
||||
.ptxs-m { padding-top: .25rem; }
|
||||
.pts-m { padding-top: .5rem; }
|
||||
.ptm-m { padding-top: 1rem; }
|
||||
.ptl-m { padding-top: 2rem; }
|
||||
.ptx-m { padding-top: 4rem; }
|
||||
.ptxl-m { padding-top: 8rem; }
|
||||
.ptxxl-m { padding-top: 16rem; }
|
||||
|
||||
.pvn-m { padding-top: 0; padding-bottom: 0; }
|
||||
.pvxs-m { padding-top: .25rem; padding-bottom: .25rem; }
|
||||
.pvs-m { padding-top: .5rem; padding-bottom: .5rem; }
|
||||
.pvm-m { padding-top: 1rem; padding-bottom: 1rem; }
|
||||
.pvl-m { padding-top: 2rem; padding-bottom: 2rem; }
|
||||
.pvx-m { padding-top: 4rem; padding-bottom: 4rem; }
|
||||
.pvxl-m { padding-top: 8rem; padding-bottom: 8rem; }
|
||||
.pvxxl-m { padding-top: 16rem; padding-bottom: 16rem; }
|
||||
|
||||
.phn-m { padding-left: 0; padding-right: 0; }
|
||||
.pvxs-m { padding-left: .25rem; padding-right: .25rem; }
|
||||
.phs-m { padding-left: .5rem; padding-right: .5rem; }
|
||||
.phm-m { padding-left: 1rem; padding-right: 1rem; }
|
||||
.phl-m { padding-left: 2rem; padding-right: 2rem; }
|
||||
.phx-m { padding-left: 4rem; padding-right: 4rem; }
|
||||
.phxl-m { padding-left: 8rem; padding-right: 8rem; }
|
||||
.phxxl-m { padding-left: 16rem; padding-right: 16rem; }
|
||||
|
||||
.man-m { margin: 0; }
|
||||
.maxs-m { margin: .25rem; }
|
||||
.mas-m { margin: .5rem; }
|
||||
.mam-m { margin: 1rem; }
|
||||
.mal-m { margin: 2rem; }
|
||||
.max-m { margin: 4rem; }
|
||||
.maxl-m { margin: 8rem; }
|
||||
.maxxl-m { margin: 16rem; }
|
||||
|
||||
.mln-m { margin-left: 0; }
|
||||
.mlxs-m { margin-left: .25rem; }
|
||||
.mls-m { margin-left: .5rem; }
|
||||
.mlm-m { margin-left: 1rem; }
|
||||
.mll-m { margin-left: 2rem; }
|
||||
.mlx-m { margin-left: 4rem; }
|
||||
.mlxl-m { margin-left: 8rem; }
|
||||
.mlxxl-m { margin-left: 16rem; }
|
||||
|
||||
.mrn-m { margin-right: 0; }
|
||||
.mrxs-m { margin-right: .25rem; }
|
||||
.mrs-m { margin-right: .5rem; }
|
||||
.mrm-m { margin-right: 1rem; }
|
||||
.mrl-m { margin-right: 2rem; }
|
||||
.mrx-m { margin-right: 4rem; }
|
||||
.mrxl-m { margin-right: 8rem; }
|
||||
.mrxxl-m { margin-right: 16rem; }
|
||||
|
||||
.mbn-m { margin-bottom: 0; }
|
||||
.mbxs-m { margin-bottom: .25rem; }
|
||||
.mbs-m { margin-bottom: .5rem; }
|
||||
.mbm-m { margin-bottom: 1rem; }
|
||||
.mbl-m { margin-bottom: 2rem; }
|
||||
.mbx-m { margin-bottom: 4rem; }
|
||||
.mbxl-m { margin-bottom: 8rem; }
|
||||
.mbxxl-m { margin-bottom: 16rem; }
|
||||
|
||||
.mtn-m { margin-top: 0; }
|
||||
.mtxs-m { margin-top: .25rem; }
|
||||
.mts-m { margin-top: .5rem; }
|
||||
.mtm-m { margin-top: 1rem; }
|
||||
.mtl-m { margin-top: 2rem; }
|
||||
.mtx-m { margin-top: 4rem; }
|
||||
.mtxl-m { margin-top: 8rem; }
|
||||
.mtxxl-m { margin-top: 16rem; }
|
||||
|
||||
.mvn-m { margin-top: 0; margin-bottom: 0rem; }
|
||||
.mvxs-m { margin-top: .25rem; margin-bottom: .25rem; }
|
||||
.mvs-m { margin-top: .5rem; margin-bottom: .5rem; }
|
||||
.mvm-m { margin-top: 1rem; margin-bottom: 1rem; }
|
||||
.mvl-m { margin-top: 2rem; margin-bottom: 2rem; }
|
||||
.mvx-m { margin-top: 4rem; margin-bottom: 4rem; }
|
||||
.mvxl-m { margin-top: 8rem; margin-bottom: 8rem; }
|
||||
.mvxxl-m { margin-top: 16rem; margin-bottom: 16rem; }
|
||||
|
||||
.mhn-m { margin-left: 0; margin-right: 0; }
|
||||
.mhxs-m { margin-left: .25rem; margin-right: .25rem; }
|
||||
.mhs-m { margin-left: .5rem; margin-right: .5rem; }
|
||||
.mhm-m { margin-left: 1rem; margin-right: 1rem; }
|
||||
.mhl-m { margin-left: 2rem; margin-right: 2rem; }
|
||||
.mhx-m { margin-left: 4rem; margin-right: 4rem; }
|
||||
.mhxl { margin-left: 8rem; margin-right: 8rem; }
|
||||
.mhxxl { margin-left: 16rem; margin-right: 16rem; }
|
||||
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.pan-l { padding: 0; }
|
||||
.paxs-l { padding: .25rem; }
|
||||
.pas-l { padding: .5rem; }
|
||||
.pam-l { padding: 1rem; }
|
||||
.pal-l { padding: 2rem; }
|
||||
.pax-l { padding: 4rem; }
|
||||
.paxl-l { padding: 8rem; }
|
||||
.paxxl-l { padding: 16rem; }
|
||||
|
||||
.pln-l { padding-left: 0; }
|
||||
.plxs-l { padding-left: .25rem; }
|
||||
.pls-l { padding-left: .5rem; }
|
||||
.plm-l { padding-left: 1rem; }
|
||||
.pll-l { padding-left: 2rem; }
|
||||
.plx-l { padding-left: 4rem; }
|
||||
.plxl-l { padding-left: 8rem; }
|
||||
.plxxl-l { padding-left: 16rem; }
|
||||
|
||||
.prn-l { padding-right: 0; }
|
||||
.prxs-l { padding-right: .25rem; }
|
||||
.prs-l { padding-right: .5rem; }
|
||||
.prm-l { padding-right: 1rem; }
|
||||
.prl-l { padding-right: 2rem; }
|
||||
.prx-l { padding-right: 4rem; }
|
||||
.prxl-l { padding-right: 8rem; }
|
||||
.prxxl-l { padding-right: 16rem; }
|
||||
|
||||
.pbn-l { padding-bottom: 0; }
|
||||
.pbxs-l { padding-bottom: .25rem; }
|
||||
.pbs-l { padding-bottom: .5rem; }
|
||||
.pbm-l { padding-bottom: 1rem; }
|
||||
.pbl-l { padding-bottom: 2rem; }
|
||||
.pbx-l { padding-bottom: 4rem; }
|
||||
.pbxl-l { padding-bottom: 8rem; }
|
||||
.pbxxl-l { padding-bottom: 16rem; }
|
||||
|
||||
.ptn-l { padding-top: 0; }
|
||||
.ptxs-l { padding-top: .25rem; }
|
||||
.pts-l { padding-top: .5rem; }
|
||||
.ptm-l { padding-top: 1rem; }
|
||||
.ptl-l { padding-top: 2rem; }
|
||||
.ptx-l { padding-top: 4rem; }
|
||||
.ptxl-l { padding-top: 8rem; }
|
||||
.ptxxl-l { padding-top: 16rem; }
|
||||
|
||||
.pvn-l { padding-top: 0; padding-bottom: 0; }
|
||||
.pvxs-l { padding-top: .25rem; padding-bottom: .25rem; }
|
||||
.pvs-l { padding-top: .5rem; padding-bottom: .5rem; }
|
||||
.pvm-l { padding-top: 1rem; padding-bottom: 1rem; }
|
||||
.pvl-l { padding-top: 2rem; padding-bottom: 2rem; }
|
||||
.pvx-l { padding-top: 4rem; padding-bottom: 4rem; }
|
||||
.pvxl-l { padding-top: 8rem; padding-bottom: 8rem; }
|
||||
.pvxxl-l { padding-top: 16rem; padding-bottom: 16rem; }
|
||||
|
||||
.phn-l { padding-left: 0; padding-right: 0; }
|
||||
.pvxs-l { padding-left: .25rem; padding-right: .25rem; }
|
||||
.phs-l { padding-left: .5rem; padding-right: .5rem; }
|
||||
.phm-l { padding-left: 1rem; padding-right: 1rem; }
|
||||
.phl-l { padding-left: 2rem; padding-right: 2rem; }
|
||||
.phx-l { padding-left: 4rem; padding-right: 4rem; }
|
||||
.phxl-l { padding-left: 8rem; padding-right: 8rem; }
|
||||
.phxxl-l { padding-left: 16rem; padding-right: 16rem; }
|
||||
|
||||
.man-l { margin: 0; }
|
||||
.maxs-l { margin: .25rem; }
|
||||
.mas-l { margin: .5rem; }
|
||||
.mam-l { margin: 1rem; }
|
||||
.mal-l { margin: 2rem; }
|
||||
.max-l { margin: 4rem; }
|
||||
.maxl-l { margin: 8rem; }
|
||||
.maxxl-l { margin: 16rem; }
|
||||
|
||||
.mln-l { margin-left: 0; }
|
||||
.mlxs-l { margin-left: .25rem; }
|
||||
.mls-l { margin-left: .5rem; }
|
||||
.mlm-l { margin-left: 1rem; }
|
||||
.mll-l { margin-left: 2rem; }
|
||||
.mlx-l { margin-left: 4rem; }
|
||||
.mlxl-l { margin-left: 8rem; }
|
||||
.mlxxl-l { margin-left: 16rem; }
|
||||
|
||||
.mrn-l { margin-right: 0; }
|
||||
.mrxs-l { margin-right: .25rem; }
|
||||
.mrs-l { margin-right: .5rem; }
|
||||
.mrm-l { margin-right: 1rem; }
|
||||
.mrl-l { margin-right: 2rem; }
|
||||
.mrx-l { margin-right: 4rem; }
|
||||
.mrxl-l { margin-right: 8rem; }
|
||||
.mrxxl-l { margin-right: 16rem; }
|
||||
|
||||
.mbn-l { margin-bottom: 0; }
|
||||
.mbxs-l { margin-bottom: .25rem; }
|
||||
.mbs-l { margin-bottom: .5rem; }
|
||||
.mbm-l { margin-bottom: 1rem; }
|
||||
.mbl-l { margin-bottom: 2rem; }
|
||||
.mbx-l { margin-bottom: 4rem; }
|
||||
.mbxl-l { margin-bottom: 8rem; }
|
||||
.mbxxl-l { margin-bottom: 16rem; }
|
||||
|
||||
.mtn-l { margin-top: 0; }
|
||||
.mtxs-l { margin-top: .25rem; }
|
||||
.mts-l { margin-top: .5rem; }
|
||||
.mtm-l { margin-top: 1rem; }
|
||||
.mtl-l { margin-top: 2rem; }
|
||||
.mtx-l { margin-top: 4rem; }
|
||||
.mtxl-l { margin-top: 8rem; }
|
||||
.mtxxl-l { margin-top: 16rem; }
|
||||
|
||||
.mvn-l { margin-top: 0; margin-bottom: 0rem; }
|
||||
.mvxs-l { margin-top: .25rem; margin-bottom: .25rem; }
|
||||
.mvs-l { margin-top: .5rem; margin-bottom: .5rem; }
|
||||
.mvm-l { margin-top: 1rem; margin-bottom: 1rem; }
|
||||
.mvl-l { margin-top: 2rem; margin-bottom: 2rem; }
|
||||
.mvx-l { margin-top: 4rem; margin-bottom: 4rem; }
|
||||
.mvxl-l { margin-top: 8rem; margin-bottom: 8rem; }
|
||||
.mvxxl-l { margin-top: 16rem; margin-bottom: 16rem; }
|
||||
|
||||
.mhn-l { margin-left: 0; margin-right: 0; }
|
||||
.mhxs-l { margin-left: .25rem; margin-right: .25rem; }
|
||||
.mhs-l { margin-left: .5rem; margin-right: .5rem; }
|
||||
.mhm-l { margin-left: 1rem; margin-right: 1rem; }
|
||||
.mhl-l { margin-left: 2rem; margin-right: 2rem; }
|
||||
.mhx-l { margin-left: 4rem; margin-right: 4rem; }
|
||||
.mhxl-l { margin-left: 8rem; margin-right: 8rem; }
|
||||
.mhxxl-l { margin-left: 16rem; margin-right: 16rem; }
|
||||
}
|
||||
|
||||
50
sass/_squares.scss
Normal file
50
sass/_squares.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/* ==========================================================================
|
||||
SQUARES
|
||||
========================================================================== */
|
||||
|
||||
.sq1 { width: 1rem; height: 1rem; }
|
||||
.sq2 { width: 2rem; height: 2rem; }
|
||||
.sq3 { width: 4rem; height: 4rem; }
|
||||
.sq4 { width: 8rem; height: 8rem; }
|
||||
.sq5 { width: 16rem; height: 16rem; }
|
||||
.sq6 { width: 32rem; height: 32rem; }
|
||||
.sq7 { width: 48rem; height: 48rem; }
|
||||
.sq8 { width: 64rem; height: 64rem; }
|
||||
.sq9 { width: 96rem; height: 96rem; }
|
||||
|
||||
@include break(not-small) {
|
||||
.sq1-ns { width: 1rem; height: 1rem; }
|
||||
.sq2-ns { width: 2rem; height: 2rem; }
|
||||
.sq3-ns { width: 4rem; height: 4rem; }
|
||||
.sq4-ns { width: 8rem; height: 8rem; }
|
||||
.sq5-ns { width: 16rem; height: 16rem; }
|
||||
.sq6-ns { width: 32rem; height: 32rem; }
|
||||
.sq7-ns { width: 48rem; height: 48rem; }
|
||||
.sq8-ns { width: 64rem; height: 64rem; }
|
||||
.sq9-ns { width: 96rem; height: 96rem; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.sq1-m { width: 1rem; height: 1rem; }
|
||||
.sq2-m { width: 2rem; height: 2rem; }
|
||||
.sq3-m { width: 4rem; height: 4rem; }
|
||||
.sq4-m { width: 8rem; height: 8rem; }
|
||||
.sq5-m { width: 16rem; height: 16rem; }
|
||||
.sq6-m { width: 32rem; height: 32rem; }
|
||||
.sq7-m { width: 48rem; height: 48rem; }
|
||||
.sq8-m { width: 64rem; height: 64rem; }
|
||||
.sq9-m { width: 96rem; height: 96rem; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.sq1-l { width: 1rem; height: 1rem; }
|
||||
.sq2-l { width: 2rem; height: 2rem; }
|
||||
.sq3-l { width: 4rem; height: 4rem; }
|
||||
.sq4-l { width: 8rem; height: 8rem; }
|
||||
.sq5-l { width: 16rem; height: 16rem; }
|
||||
.sq6-l { width: 32rem; height: 32rem; }
|
||||
.sq7-l { width: 48rem; height: 48rem; }
|
||||
.sq8-l { width: 64rem; height: 64rem; }
|
||||
.sq9-l { width: 96rem; height: 96rem; }
|
||||
}
|
||||
|
||||
56
sass/_text_align.scss
Normal file
56
sass/_text_align.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
/* Text Align */
|
||||
|
||||
.tl { text-align: left; }
|
||||
.tr { text-align: right; }
|
||||
.tc { text-align: center; }
|
||||
.tj { text-align: justify; }
|
||||
.ts { text-align: start; }
|
||||
.te { text-align: end; }
|
||||
.tmp { text-align: match-parent; }
|
||||
.tse { text-align: start end; }
|
||||
.tp { text-align: "."; }
|
||||
.tsp { text-align: start "."; }
|
||||
.tpe { text-align: "." end; }
|
||||
|
||||
@include break(not-small) {
|
||||
.tl-ns { text-align: left; }
|
||||
.tr-ns { text-align: right; }
|
||||
.tc-ns { text-align: center; }
|
||||
.tj-ns { text-align: justify; }
|
||||
.ts-ns { text-align: start; }
|
||||
.te-ns { text-align: end; }
|
||||
.tmp-ns { text-align: match-parent; }
|
||||
.tse-ns { text-align: start end; }
|
||||
.tp-ns { text-align: "."; }
|
||||
.tsp-ns { text-align: start "."; }
|
||||
.tpe-ns { text-align: "." end; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.tl-m { text-align: left; }
|
||||
.tr-m { text-align: right; }
|
||||
.tc-m { text-align: center; }
|
||||
.tj-m { text-align: justify; }
|
||||
.ts-m { text-align: start; }
|
||||
.te-m { text-align: end; }
|
||||
.tmp-m { text-align: match-parent; }
|
||||
.tse-m { text-align: start end; }
|
||||
.tp-m { text-align: "."; }
|
||||
.tsp-m { text-align: start "."; }
|
||||
.tpe-m { text-align: "." end; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.tl-l { text-align: left; }
|
||||
.tr-l { text-align: right; }
|
||||
.tc-l { text-align: center; }
|
||||
.tj-l { text-align: justify; }
|
||||
.ts-l { text-align: start; }
|
||||
.te-l { text-align: end; }
|
||||
.tmp-l { text-align: match-parent; }
|
||||
.tse-l { text-align: start end; }
|
||||
.tp-l { text-align: "."; }
|
||||
.tsp-l { text-align: start "."; }
|
||||
.tpe-l { text-align: "." end; }
|
||||
}
|
||||
|
||||
35
sass/_text_decoration.scss
Normal file
35
sass/_text_decoration.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/* ==========================================================================
|
||||
TEXT DECORAION
|
||||
========================================================================== */
|
||||
|
||||
.under { text-decoration: underline; }
|
||||
.over { text-decoration: overline; }
|
||||
.strike { text-decoration: line-through; }
|
||||
.blink { text-decoration: blink; }
|
||||
.none { text-decoration: none; }
|
||||
|
||||
|
||||
@include break(not-small) {
|
||||
.under-ns { text-decoration: underline; }
|
||||
.over-ns { text-decoration: overline; }
|
||||
.strike-ns { text-decoration: line-through; }
|
||||
.blink-ns { text-decoration: blink; }
|
||||
.none-ns { text-decoration: none; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.under-m { text-decoration: underline; }
|
||||
.over-m { text-decoration: overline; }
|
||||
.strike-m { text-decoration: line-through; }
|
||||
.blink-m { text-decoration: blink; }
|
||||
.none-m { text-decoration: none; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.under-l { text-decoration: underline; }
|
||||
.over-l { text-decoration: overline; }
|
||||
.strike-l { text-decoration: line-through; }
|
||||
.blink-l { text-decoration: blink; }
|
||||
.none-l { text-decoration: none; }
|
||||
}
|
||||
|
||||
42
sass/_text_overflow.scss
Normal file
42
sass/_text_overflow.scss
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/* ==========================================================================
|
||||
TEXT OVERFLOW
|
||||
========================================================================== */
|
||||
|
||||
.t-clip { text-overflow: clip; }
|
||||
.t-ellipsis { text-overflow: ellipsis; }
|
||||
.t-dots { text-overflow: "…"; }
|
||||
|
||||
/* Two-value syntax: the first value describes the overflow at the left end of the line,
|
||||
the second at the right end. Directionality has no influence */
|
||||
|
||||
.t-clip-ellipsis { text-overflow: clip ellipsis; }
|
||||
.t-double { text-overflow: "…" "…"; }
|
||||
.t-i { text-overflow: inherit; }
|
||||
|
||||
@include break(not-small) {
|
||||
.t-clip-ns { text-overflow: clip; }
|
||||
.t-ellipsis-ns { text-overflow: ellipsis; }
|
||||
.t-dots-ns { text-overflow: "…"; }
|
||||
.t-clip-ellipsis-ns { text-overflow: clip ellipsis; }
|
||||
.t-double-ns { text-overflow: "…" "…"; }
|
||||
.t-i-ns { text-overflow: inherit; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.t-clip-m { text-overflow: clip; }
|
||||
.t-ellipsis-m { text-overflow: ellipsis; }
|
||||
.t-dots-m { text-overflow: "…"; }
|
||||
.t-clip-ellipsis-m { text-overflow: clip ellipsis; }
|
||||
.t-double-m { text-overflow: "…" "…"; }
|
||||
.t-i-m { text-overflow: inherit; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.t-clip-l { text-overflow: clip; }
|
||||
.t-ellipsis-l { text-overflow: ellipsis; }
|
||||
.t-dots-l { text-overflow: "…"; }
|
||||
.t-clip-ellipsis-l { text-overflow: clip ellipsis; }
|
||||
.t-double-l { text-overflow: "…" "…"; }
|
||||
.t-i-l { text-overflow: inherit; }
|
||||
}
|
||||
|
||||
30
sass/_text_transform.scss
Normal file
30
sass/_text_transform.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
/* ==========================================================================
|
||||
TEXT TRANSFORM
|
||||
========================================================================== */
|
||||
|
||||
.ttc { text-transform: capitalize; }
|
||||
.ttu { text-transform: uppercase; }
|
||||
.ttl { text-transform: lowercase; }
|
||||
.ttn { text-transform: none; }
|
||||
|
||||
@include break(not-small) {
|
||||
.ttc-ns { text-transform: capitalize; }
|
||||
.ttu-ns { text-transform: uppercase; }
|
||||
.ttl-ns { text-transform: lowercase; }
|
||||
.ttn-ns { text-transform: none; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.ttc-m { text-transform: capitalize; }
|
||||
.ttu-m { text-transform: uppercase; }
|
||||
.ttl-m { text-transform: lowercase; }
|
||||
.ttn-m { text-transform: none; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.ttc-l { text-transform: capitalize; }
|
||||
.ttu-l { text-transform: uppercase; }
|
||||
.ttl-l { text-transform: lowercase; }
|
||||
.ttn-l { text-transform: none; }
|
||||
}
|
||||
|
||||
43
sass/_type_scale.scss
Normal file
43
sass/_type_scale.scss
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
/* ==========================================================================
|
||||
TYPE SCALE
|
||||
========================================================================== */
|
||||
|
||||
.f1 { font-size: 2rem; }
|
||||
.f2 { font-size: 1.5rem; }
|
||||
.f3 { font-size: 1.2rem; }
|
||||
.f4 { font-size: 1.2rem; }
|
||||
.f5 { font-size: 1rem; }
|
||||
.f6,
|
||||
.small { font-size: .85rem; }
|
||||
|
||||
|
||||
@include break(not-small){
|
||||
.mega-ns { font-size: 3rem; }
|
||||
.f1-ns { font-size: 2rem; }
|
||||
.f2-ns { font-size: 1.5rem; }
|
||||
.f3-ns { font-size: 1.2rem; }
|
||||
.f4-ns { font-size: 1.2rem; }
|
||||
.f5-ns { font-size: 1rem; }
|
||||
.f6-ns { font-size: .85rem; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.mega-m { font-size: 3rem; }
|
||||
.f1-m { font-size: 2rem; }
|
||||
.f2-m { font-size: 1.5rem; }
|
||||
.f3-m { font-size: 1.2rem; }
|
||||
.f4-m { font-size: 1.2rem; }
|
||||
.f5-m { font-size: 1rem; }
|
||||
.f6-m { font-size: .85rem; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.mega-l { font-size: 4rem; }
|
||||
.f1-l { font-size: 3rem; }
|
||||
.f2-l { font-size: 2rem; }
|
||||
.f3-l { font-size: 1.5rem; }
|
||||
.f4-l { font-size: 1.2rem; }
|
||||
.f5-l { font-size: 1rem; }
|
||||
.f6-l { font-size: 1rem; }
|
||||
}
|
||||
|
||||
82
sass/_utilities.scss
Normal file
82
sass/_utilities.scss
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
/* ==========================================================================
|
||||
UTILITIES
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* The Media Object
|
||||
* Built by @stubornella
|
||||
* http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
|
||||
*
|
||||
* <div class="media attribution">
|
||||
*
|
||||
* <a href="http://twitter.com/stubbornella" class="img">
|
||||
* <img src="http://stubbornella.com/profile_image.jpg" alt="me" />
|
||||
* </a>
|
||||
*
|
||||
* <div class="bd">
|
||||
* @Stubbornella 14 minutes ago
|
||||
* </div>
|
||||
*
|
||||
* </div>
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* The Flag Object
|
||||
* Built by @csswizzrdry
|
||||
* http://csswizardry.com/2013/05/the-flag-object/
|
||||
*
|
||||
*
|
||||
* Use to vertically center text against an image.
|
||||
*
|
||||
* <div class="flag">
|
||||
* <div class="flag__image">
|
||||
* <img src="" alt="">
|
||||
* </div>
|
||||
* <div class="flag__body">
|
||||
* <p></p>
|
||||
* </div>
|
||||
* </div>
|
||||
*
|
||||
*/
|
||||
|
||||
.flag {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.flag__image,
|
||||
.flag__body {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
||||
.flag--top & {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.flag--bottom & {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.flag__image {
|
||||
padding-right: 10px;
|
||||
|
||||
> img {
|
||||
display: block;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.flag--rev & {
|
||||
padding-right: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.flag__body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
46
sass/_vertical_align.scss
Normal file
46
sass/_vertical_align.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/* ==========================================================================
|
||||
VERTICAL ALIGN
|
||||
========================================================================== */
|
||||
|
||||
.v-base { vertical-align: baseline; }
|
||||
.v-sub { vertical-align: sub; }
|
||||
.v-sup { vertical-align: super; }
|
||||
.v-txt-top { vertical-align: text-top; }
|
||||
.v-txt-btm { vertical-align: text-bottom; }
|
||||
.v-mid { vertical-align: middle; }
|
||||
.v-top { vertical-align: top; }
|
||||
.v-btm { vertical-align: bottom; }
|
||||
|
||||
@include break(not-small) {
|
||||
.v-base-ns { vertical-align: baseline; }
|
||||
.v-sub-ns { vertical-align: sub; }
|
||||
.v-sup-ns { vertical-align: super; }
|
||||
.v-txt-top-ns { vertical-align: text-top; }
|
||||
.v-txt-btm-ns { vertical-align: text-bottom; }
|
||||
.v-mid-ns { vertical-align: middle; }
|
||||
.v-top-ns { vertical-align: top; }
|
||||
.v-btm-ns { vertical-align: bottom; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.v-base-m { vertical-align: baseline; }
|
||||
.v-sub-m { vertical-align: sub; }
|
||||
.v-sup-m { vertical-align: super; }
|
||||
.v-txt-top-m { vertical-align: text-top; }
|
||||
.v-txt-btm-m { vertical-align: text-bottom; }
|
||||
.v-mid-m { vertical-align: middle; }
|
||||
.v-top-m { vertical-align: top; }
|
||||
.v-btm-m { vertical-align: bottom; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.v-base-l { vertical-align: baseline; }
|
||||
.v-sub-l { vertical-align: sub; }
|
||||
.v-sup-l { vertical-align: super; }
|
||||
.v-txt-top-l { vertical-align: text-top; }
|
||||
.v-txt-btm-l { vertical-align: text-bottom; }
|
||||
.v-mid-l { vertical-align: middle; }
|
||||
.v-top-l { vertical-align: top; }
|
||||
.v-btm-l { vertical-align: bottom; }
|
||||
}
|
||||
|
||||
66
sass/_visibility.scss
Normal file
66
sass/_visibility.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
/* ==========================================================================
|
||||
VISIBILITY
|
||||
========================================================================== */
|
||||
|
||||
|
||||
.vis { visibility: visible; }
|
||||
.vis-hidden { visibility: hidden; }
|
||||
.vis-collapse { visibility: collapse; }
|
||||
|
||||
.vis-bf-vis { backface-visibility: visible; }
|
||||
.vis-bf-hid { backface-visibility: hidden; }
|
||||
|
||||
/*
|
||||
Text that is hidden but accessible
|
||||
Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
*/
|
||||
|
||||
.clip {
|
||||
position: fixed !important;
|
||||
_position: absolute !important;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
|
||||
@include break(not-small) {
|
||||
.vis-ns { visibility: visible; }
|
||||
.vis-hidden-ns { visibility: hidden; }
|
||||
.vis-collapse-ns { visibility: collapse; }
|
||||
.vis-bf-vis-ns { backface-visibility: visible; }
|
||||
.vis-bf-hid-ns { backface-visibility: hidden; }
|
||||
.clip-ns {
|
||||
position: fixed !important;
|
||||
_position: absolute !important;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.vis-m { visibility: visible; }
|
||||
.vis-hidden-m { visibility: hidden; }
|
||||
.vis-collapse-m { visibility: collapse; }
|
||||
.vis-bf-vis-m { backface-visibility: visible; }
|
||||
.vis-bf-hid-m { backface-visibility: hidden; }
|
||||
.clip-m {
|
||||
position: fixed !important;
|
||||
_position: absolute !important;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.vis-l { visibility: visible; }
|
||||
.vis-hidden-l { visibility: hidden; }
|
||||
.vis-collapse-l { visibility: collapse; }
|
||||
.vis-bf-vis-l { backface-visibility: visible; }
|
||||
.vis-bf-hid-l { backface-visibility: hidden; }
|
||||
.clip-l {
|
||||
position: fixed !important;
|
||||
_position: absolute !important;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
}
|
||||
|
||||
35
sass/_white_space.scss
Normal file
35
sass/_white_space.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/* ==========================================================================
|
||||
WHITE SPACE
|
||||
========================================================================== */
|
||||
|
||||
|
||||
.ws-norm { white-space: normal; }
|
||||
.ws-nowrap { white-space: nowrap; }
|
||||
.ws-pre { white-space: pre; }
|
||||
.ws-prewrap { white-space: pre-wrap; }
|
||||
.ws-preline { white-space: pre-line; }
|
||||
|
||||
@include break(not-small) {
|
||||
.ws-norm-ns { white-space: normal; }
|
||||
.ws-nowrap-ns { white-space: nowrap; }
|
||||
.ws-pre-ns { white-space: pre; }
|
||||
.ws-prewrap-ns { white-space: pre-wrap; }
|
||||
.ws-preline-ns { white-space: pre-line; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.ws-norm-m { white-space: normal; }
|
||||
.ws-nowrap-m { white-space: nowrap; }
|
||||
.ws-pre-m { white-space: pre; }
|
||||
.ws-prewrap-m { white-space: pre-wrap; }
|
||||
.ws-preline-m { white-space: pre-line; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.ws-norm-l { white-space: normal; }
|
||||
.ws-nowrap-l { white-space: nowrap; }
|
||||
.ws-pre-l { white-space: pre; }
|
||||
.ws-prewrap-l { white-space: pre-wrap; }
|
||||
.ws-preline-l { white-space: pre-line; }
|
||||
}
|
||||
|
||||
91
sass/_widths.scss
Normal file
91
sass/_widths.scss
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
/* ==========================================================================
|
||||
WIDTHS
|
||||
========================================================================== */
|
||||
|
||||
/* Width Scale */
|
||||
|
||||
.wi1 { width: 1rem; }
|
||||
.wi2 { width: 2rem; }
|
||||
.wi3 { width: 4rem; }
|
||||
.wi4 { width: 8rem; }
|
||||
.wi5 { width: 16rem; }
|
||||
.wi6 { width: 32rem; }
|
||||
.wi7 { width: 48rem; }
|
||||
.wi8 { width: 64rem; }
|
||||
.wi9 { width: 96rem; }
|
||||
.wi10 { width: 128rem; }
|
||||
|
||||
/* Width String Properties */
|
||||
|
||||
.wi-bb { width: border-box; }
|
||||
.wi-cb { width: content-box; }
|
||||
.wi-mx { width: max-content; }
|
||||
.wi-mn { width: min-content; }
|
||||
.wi-av { width: available; }
|
||||
.wi-fc { width: fit-content; }
|
||||
.wi-at { width: auto; }
|
||||
.wi-i { width: inherit; }
|
||||
|
||||
@include break(not-small) {
|
||||
.wi1-ns { width: 1rem; }
|
||||
.wi2-ns { width: 2rem; }
|
||||
.wi3-ns { width: 4rem; }
|
||||
.wi4-ns { width: 8rem; }
|
||||
.wi5-ns { width: 16rem; }
|
||||
.wi6-ns { width: 32rem; }
|
||||
.wi7-ns { width: 48rem; }
|
||||
.wi8-ns { width: 64rem; }
|
||||
.wi9-ns { width: 96rem; }
|
||||
.wi10-ns { width: 128rem; }
|
||||
.wi-bb-ns { width: border-box; }
|
||||
.wi-cb-ns { width: content-box; }
|
||||
.wi-mx-ns { width: max-content; }
|
||||
.wi-mn-ns { width: min-content; }
|
||||
.wi-av-ns { width: available; }
|
||||
.wi-fc-ns { width: fit-content; }
|
||||
.wi-at-ns { width: auto; }
|
||||
.wi-i-ns { width: inherit; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.wi1-m { width: 1rem; }
|
||||
.wi2-m { width: 2rem; }
|
||||
.wi3-m { width: 4rem; }
|
||||
.wi4-m { width: 8rem; }
|
||||
.wi5-m { width: 16rem; }
|
||||
.wi6-m { width: 32rem; }
|
||||
.wi7-m { width: 48rem; }
|
||||
.wi8-m { width: 64rem; }
|
||||
.wi9-m { width: 96rem; }
|
||||
.wi10-m { width: 128rem; }
|
||||
.wi-bb-m { width: border-box; }
|
||||
.wi-cb-m { width: content-box; }
|
||||
.wi-mx-m { width: max-content; }
|
||||
.wi-mn-m { width: min-content; }
|
||||
.wi-av-m { width: available; }
|
||||
.wi-fc-m { width: fit-content; }
|
||||
.wi-at-m { width: auto; }
|
||||
.wi-i-m { width: inherit; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.wi1-l { width: 1rem; }
|
||||
.wi2-l { width: 2rem; }
|
||||
.wi3-l { width: 4rem; }
|
||||
.wi4-l { width: 8rem; }
|
||||
.wi5-l { width: 16rem; }
|
||||
.wi6-l { width: 32rem; }
|
||||
.wi7-l { width: 48rem; }
|
||||
.wi8-l { width: 64rem; }
|
||||
.wi9-l { width: 96rem; }
|
||||
.wi10-l { width: 128rem; }
|
||||
.wi-bb-l { width: border-box; }
|
||||
.wi-cb-l { width: content-box; }
|
||||
.wi-mx-l { width: max-content; }
|
||||
.wi-mn-l { width: min-content; }
|
||||
.wi-av-l { width: available; }
|
||||
.wi-fc-l { width: fit-content; }
|
||||
.wi-at-l { width: auto; }
|
||||
.wi-i-l { width: inherit; }
|
||||
}
|
||||
|
||||
26
sass/_word_spacing.scss
Normal file
26
sass/_word_spacing.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/* ==========================================================================
|
||||
WORD SPACING
|
||||
========================================================================== */
|
||||
|
||||
.wsn { word-spacing: normal; }
|
||||
.ws1 { word-spacing: 0.3em; }
|
||||
.ws2 { word-spacing: -0.43em; } /* For eliminating space between inline-block elements */
|
||||
|
||||
@include break(not-small) {
|
||||
.wsn-ns { word-spacing: normal; }
|
||||
.ws1-ns { word-spacing: 0.3em; }
|
||||
.ws2-ns { word-spacing: -0.43em; }
|
||||
}
|
||||
|
||||
@include break(medium) {
|
||||
.wsn-m { word-spacing: normal; }
|
||||
.ws1-m { word-spacing: 0.3em; }
|
||||
.ws2-m { word-spacing: -0.43em; }
|
||||
}
|
||||
|
||||
@include break(large) {
|
||||
.wsn-l { word-spacing: normal; }
|
||||
.ws1-l { word-spacing: 0.3em; }
|
||||
.ws2-l { word-spacing: -0.43em; }
|
||||
}
|
||||
|
||||
47
sass/i.scss
Normal file
47
sass/i.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
@import "queries";
|
||||
@import "colors";
|
||||
|
||||
@import "background_repeat";
|
||||
@import "background_size";
|
||||
@import "border_colors";
|
||||
@import "border_radius";
|
||||
@import "border_style";
|
||||
@import "border_widths";
|
||||
@import "borders";
|
||||
@import "clears";
|
||||
@import "dimension_utilities";
|
||||
@import "display";
|
||||
@import "floats";
|
||||
@import "font_family";
|
||||
@import "font_style";
|
||||
@import "font_weight";
|
||||
@import "forms";
|
||||
@import "grid";
|
||||
@import "heights";
|
||||
@import "images";
|
||||
@import "letter_spacing";
|
||||
@import "line_height";
|
||||
@import "links";
|
||||
@import "lists";
|
||||
@import "max_heights";
|
||||
@import "max_widths";
|
||||
@import "min_heights";
|
||||
@import "min_widths";
|
||||
@import "normalize";
|
||||
@import "opacity";
|
||||
@import "overflow";
|
||||
@import "position";
|
||||
@import "skins";
|
||||
@import "spacing";
|
||||
@import "squares";
|
||||
@import "text_decoration";
|
||||
@import "text_align";
|
||||
@import "text_overflow";
|
||||
@import "text_transform";
|
||||
@import "type_scale";
|
||||
@import "utilities";
|
||||
@import "vertical_align";
|
||||
@import "visibility";
|
||||
@import "white_space";
|
||||
@import "widths";
|
||||
@import "word_spacing";
|
||||
Loading…
Reference in a new issue