From: Tim Hartwick Date: Tue, 25 Aug 2015 01:24:03 +0000 (-0700) Subject: linted type.scss X-Git-Tag: v2.0.0-rc.1~105 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=8fbdd9e58fd6d9f6d7cdc8735b32338675cd7653;p=thirdparty%2Ffoundation%2Ffoundation-emails.git linted type.scss --- diff --git a/scss/ink/components/_type.scss b/scss/ink/components/_type.scss index 2d26c410..018efb29 100755 --- a/scss/ink/components/_type.scss +++ b/scss/ink/components/_type.scss @@ -2,15 +2,14 @@ // zurb.com/ink/ // Licensed under MIT Open Source -@import "global"; +@import 'global'; -// -// @variables -// -$include-html-type-classes: $include-html-classes !default; +//// +/// @group typography +//// -// We use these to control font styles -$base-font-color: #222222 !default; + +$base-font-color: $black !default; $base-font-family: Helvetica, Arial, sans-serif !default; $base-font-weight: normal !default; $base-line-height: 1.3 !default; @@ -18,7 +17,6 @@ $base-line-height: 1.3 !default; $body-font-size: 14px !default; $body-line-height: 19px !default; -// We use these to control header font sizes $h1-font-size: 40px !default; $h2-font-size: 36px !default; $h3-font-size: 32px !default; @@ -26,105 +24,128 @@ $h4-font-size: 28px !default; $h5-font-size: 24px !default; $h6-font-size: 20px !default; -// A general styling $small-font-size: 10px !default; -// We use these to style lead paragraphs $paragraph-lead-font-size: 18px !default; $paragraph-lead-line-height: 21px !default; // We use these to style anchors $anchor-text-decoration: none !default; -$anchor-font-color: #2ba6cb !default; +$anchor-font-color: $primary-color !default; $anchor-font-color-visited: $anchor-font-color !default; -$anchor-font-color-hover: #2795b6 !default; +$anchor-font-color-hover: darken($primary-color, 10%) !default; $anchor-font-color-active: $anchor-font-color-hover !default; -$header-anchor-font-color: $anchor-font-color !default; -$header-anchor-font-color-visited: $header-anchor-font-color !default; -$header-anchor-font-color-active: $header-anchor-font-color !default; - -@include exports("type") { - @if $include-html-type-classes { - /* Typography */ - - body, table.body, h1, h2, h3, h4, h5, h6, p, td { - color: $base-font-color; - font-family: $base-font-family; - font-weight: $base-font-weight; - padding:0; - margin: 0; - text-align: left; - line-height: $base-line-height; - } - - h1, h2, h3, h4, h5, h6 { - word-break: normal; - } - - h1 {font-size: $h1-font-size;} - h2 {font-size: $h2-font-size;} - h3 {font-size: $h3-font-size;} - h4 {font-size: $h4-font-size;} - h5 {font-size: $h5-font-size;} - h6 {font-size: $h6-font-size;} - body, table.body, p, td {font-size: $body-font-size;line-height:$body-line-height;} - - p.lead, p.lede, p.leed { - font-size: $paragraph-lead-font-size; - line-height:$paragraph-lead-line-height; - } - - p { - margin-bottom: $paragraph-margin-bottom; - } - - small { - font-size: $small-font-size; - } - - a { - color: $anchor-font-color; - text-decoration: $anchor-text-decoration; - } - - a:hover { - color: $anchor-font-color-hover !important; - } - - a:active { - color: $anchor-font-color-active !important; - } - - a:visited { - color: c$anchor-font-color-visited !important; - } - - h1 a, - h2 a, - h3 a, - h4 a, - h5 a, - h6 a { - color: $header-anchor-font-color; - } - - h1 a:active, - h2 a:active, - h3 a:active, - h4 a:active, - h5 a:active, - h6 a:active { - color: $header-anchor-font-color-active !important; - } - - h1 a:visited, - h2 a:visited, - h3 a:visited, - h4 a:visited, - h5 a:visited, - h6 a:visited { - color: $header-anchor-font-color-visited !important; - } +body, +table.body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +td { + color: $base-font-color; + font-family: $base-font-family; + font-weight: $base-font-weight; + padding: 0; + margin: 0; + text-align: left; + line-height: $base-line-height; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + word-break: normal; +} + +h1 { + font-size: $h1-font-size; +} + +h2 { + font-size: $h2-font-size; +} + +h3 { + font-size: $h3-font-size; +} + +h4 { + font-size: $h4-font-size; +} + +h5 { + font-size: $h5-font-size; +} + +h6 { + font-size: $h6-font-size; +} + +body, +table.body, +p, +td { + font-size: $body-font-size; + line-height: $body-line-height; +} + +p { + margin-bottom: $paragraph-margin-bottom; + + &.lead { + font-size: $paragraph-lead-font-size; + line-height: $paragraph-lead-line-height; + } +} + +small { + font-size: $small-font-size; +} + +a { + color: $anchor-font-color; + text-decoration: $anchor-text-decoration; + + &:hover { + color: $anchor-font-color-hover !important; + } + + &:active { + color: $anchor-font-color-active !important; + } + + &:visited { + color: $anchor-font-color-visited !important; } -} \ No newline at end of file +} + +h1 a, +h1 a:visited, +h2 a, +h2 a:visited, +h3 a, +h3 a:visited, +h4 a, +h4 a:visited, +h5 a, +h5 a:visited, +h6, +h6 a:visited { + color: $anchor-font-color; +} + +h1 a:active, +h2 a:active, +h3 a:active, +h4 a:active, +h5 a:active, +h6 a:active { + color: $header-anchor-font-color-active !important; +}