--- /dev/null
+/*\r
+ TYPOGRAPHY\r
+ ----------\r
+\r
+ Includes typographic resets for many common elements, and a few helper classes.\r
+ - Headers\r
+ - Subheaders\r
+ - Lead paragraphs\r
+ - Ordered/unordered lists\r
+ - Code samples\r
+ - Anchors\r
+ - Dividers\r
+ - Blockquotes\r
+ - Acronyms\r
+*/\r
+\r
+/// @Foundation.settings\r
+// Typography\r
+// We use these to control header font styles\r
+$header-font-family: $body-font-family !default;\r
+$header-font-weight: $font-weight-normal !default;\r
+$header-font-style: $font-weight-normal !default;\r
+$header-font-color: #222 !default;\r
+$header-line-height: 1.4 !default;\r
+$header-top-margin: .2rem !default;\r
+$header-bottom-margin: .5rem !default;\r
+$header-text-rendering: optimizeLegibility !default;\r
+\r
+// We use these to control header font sizes\r
+$h1-font-size: rem-calc(44) !default;\r
+$h2-font-size: rem-calc(37) !default;\r
+$h3-font-size: rem-calc(27) !default;\r
+$h4-font-size: rem-calc(23) !default;\r
+$h5-font-size: rem-calc(18) !default;\r
+$h6-font-size: 1rem !default;\r
+\r
+// We use these to control header size reduction on small screens\r
+$h1-font-reduction: rem-calc(10) !default;\r
+$h2-font-reduction: rem-calc(10) !default;\r
+$h3-font-reduction: rem-calc(5) !default;\r
+$h4-font-reduction: rem-calc(5) !default;\r
+$h5-font-reduction: 0 !default;\r
+$h6-font-reduction: 0 !default;\r
+\r
+// These control how subheaders are styled.\r
+$subheader-line-height: 1.4 !default;\r
+$subheader-font-color: scale-color($header-font-color, $lightness: 35%) !default;\r
+$subheader-font-weight: $font-weight-normal !default;\r
+$subheader-top-margin: .2rem !default;\r
+$subheader-bottom-margin: .5rem !default;\r
+\r
+// A general <small> styling\r
+$small-font-size: 60% !default;\r
+$small-font-color: scale-color($header-font-color, $lightness: 35%) !default;\r
+\r
+// We use these to style paragraphs\r
+$paragraph-font-family: inherit !default;\r
+$paragraph-font-weight: $font-weight-normal !default;\r
+$paragraph-font-size: 1rem !default;\r
+$paragraph-line-height: 1.6 !default;\r
+$paragraph-margin-bottom: rem-calc(20) !default;\r
+$paragraph-aside-font-size: rem-calc(14) !default;\r
+$paragraph-aside-line-height: 1.35 !default;\r
+$paragraph-aside-font-style: italic !default;\r
+$paragraph-text-rendering: optimizeLegibility !default;\r
+\r
+// We use these to style <code> tags\r
+$code-color: grayscale($primary-color) !default;\r
+$code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;\r
+$code-font-weight: $font-weight-normal !default;\r
+$code-background-color: scale-color($secondary-color, $lightness: 70%) !default;\r
+$code-border-size: 1px !default;\r
+$code-border-style: solid !default;\r
+$code-border-color: scale-color($code-background-color, $lightness: -10%) !default;\r
+$code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;\r
+\r
+// We use these to style anchors\r
+$anchor-text-decoration: none !default;\r
+$anchor-text-decoration-hover: none !default;\r
+$anchor-font-color: $primary-color !default;\r
+$anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%) !default;\r
+\r
+// We use these to style the <hr> element\r
+$hr-border-width: 1px !default;\r
+$hr-border-style: solid !default;\r
+$hr-border-color: #ddd !default;\r
+$hr-margin: rem-calc(20) !default;\r
+\r
+// We use these to style lists\r
+$list-font-family: $paragraph-font-family !default;\r
+$list-font-size: $paragraph-font-size !default;\r
+$list-line-height: $paragraph-line-height !default;\r
+$list-margin-bottom: $paragraph-margin-bottom !default;\r
+$list-style-position: outside !default;\r
+$list-side-margin: 1.1rem !default;\r
+$list-ordered-side-margin: 1.4rem !default;\r
+$list-side-margin-no-bullet: 0 !default;\r
+$list-nested-margin: rem-calc(20) !default;\r
+$definition-list-header-weight: $font-weight-bold !default;\r
+$definition-list-header-margin-bottom: .3rem !default;\r
+$definition-list-margin-bottom: rem-calc(12) !default;\r
+\r
+// We use these to style blockquotes\r
+$blockquote-font-color: scale-color($header-font-color, $lightness: 35%) !default;\r
+$blockquote-padding: rem-calc(9 20 0 19) !default;\r
+$blockquote-border: 1px solid #ddd !default;\r
+$blockquote-cite-font-size: rem-calc(13) !default;\r
+$blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%) !default;\r
+$blockquote-cite-link-color: $blockquote-cite-font-color !default;\r
+\r
+// Acronym styles\r
+$acronym-underline: 1px dotted #ddd !default;\r
+///\r
+\r
+@mixin lead {\r
+ font-size: $paragraph-font-size + rem-calc(3.5);\r
+ line-height: 1.6;\r
+}\r
+\r
+@mixin subheader {\r
+ line-height: $subheader-line-height;\r
+ color: $subheader-font-color;\r
+ font-weight: $subheader-font-weight;\r
+ margin-top: $subheader-top-margin;\r
+ margin-bottom: $subheader-bottom-margin;\r
+}\r
+\r
+@include exports(typography) {\r
+ /* Typography resets */\r
+ div,\r
+ dl,\r
+ dt,\r
+ dd,\r
+ ul,\r
+ ol,\r
+ li,\r
+ h1,\r
+ h2,\r
+ h3,\r
+ h4,\r
+ h5,\r
+ h6,\r
+ pre,\r
+ form,\r
+ p,\r
+ blockquote,\r
+ th,\r
+ td {\r
+ margin:0;\r
+ padding:0;\r
+ }\r
+\r
+ /* Default Link Styles */\r
+ a {\r
+ color: $anchor-font-color;\r
+ text-decoration: $anchor-text-decoration;\r
+ line-height: inherit;\r
+\r
+ &[ui-sref] {\r
+ cursor: pointer;\r
+ }\r
+\r
+ &:hover,\r
+ &:focus {\r
+ color: $anchor-font-color-hover;\r
+ @if $anchor-text-decoration-hover != $anchor-text-decoration {\r
+ text-decoration: $anchor-text-decoration-hover;\r
+ }\r
+ }\r
+\r
+ img { border:none; }\r
+ }\r
+\r
+ /* Default paragraph styles */\r
+ p {\r
+ font-family: $paragraph-font-family;\r
+ font-weight: $paragraph-font-weight;\r
+ font-size: $paragraph-font-size;\r
+ line-height: $paragraph-line-height;\r
+ margin-bottom: $paragraph-margin-bottom;\r
+ text-rendering: $paragraph-text-rendering;\r
+\r
+ &.lead { @include lead; }\r
+\r
+ & aside {\r
+ font-size: $paragraph-aside-font-size;\r
+ line-height: $paragraph-aside-line-height;\r
+ font-style: $paragraph-aside-font-style;\r
+ }\r
+ }\r
+\r
+ /* Default header styles */\r
+ h1, h2, h3, h4, h5, h6 {\r
+ font-family: $header-font-family;\r
+ font-weight: $header-font-weight;\r
+ font-style: $header-font-style;\r
+ color: $header-font-color;\r
+ text-rendering: $header-text-rendering;\r
+ margin-top: $header-top-margin;\r
+ margin-bottom: $header-bottom-margin;\r
+ line-height: $header-line-height;\r
+\r
+ small {\r
+ font-size: $small-font-size;\r
+ color: $small-font-color;\r
+ line-height: 0;\r
+ }\r
+ }\r
+\r
+ h1 { font-size: $h1-font-size - $h1-font-reduction; }\r
+ h2 { font-size: $h2-font-size - $h2-font-reduction; }\r
+ h3 { font-size: $h3-font-size - $h3-font-reduction; }\r
+ h4 { font-size: $h4-font-size - $h4-font-reduction; }\r
+ h5 { font-size: $h5-font-size - $h5-font-reduction; }\r
+ h6 { font-size: $h6-font-size - $h6-font-reduction; }\r
+\r
+ .subheader { @include subheader; }\r
+\r
+ hr {\r
+ border: $hr-border-style $hr-border-color;\r
+ border-width: $hr-border-width 0 0;\r
+ clear: both;\r
+ margin: $hr-margin 0 ($hr-margin - rem-calc($hr-border-width));\r
+ height: 0;\r
+ }\r
+\r
+ /* Helpful Typography Defaults */\r
+ em,\r
+ i {\r
+ font-style: italic;\r
+ line-height: inherit;\r
+ }\r
+\r
+ strong,\r
+ b {\r
+ font-weight: $font-weight-bold;\r
+ line-height: inherit;\r
+ }\r
+\r
+ small {\r
+ font-size: $small-font-size;\r
+ color: $small-font-color;\r
+ line-height: inherit;\r
+ }\r
+\r
+ code {\r
+ font-family: $code-font-family;\r
+ font-weight: $code-font-weight;\r
+ color: $code-color;\r
+ background-color: $code-background-color;\r
+ border-width: $code-border-size;\r
+ border-style: $code-border-style;\r
+ border-color: $code-border-color;\r
+ padding: $code-padding;\r
+ }\r
+\r
+ /* Lists */\r
+ ul,\r
+ ol,\r
+ dl {\r
+ font-size: $list-font-size;\r
+ line-height: $list-line-height;\r
+ margin-bottom: $list-margin-bottom;\r
+ list-style-position: $list-style-position;\r
+ font-family: $list-font-family;\r
+ }\r
+\r
+ /* Lists */\r
+ ul, ol {\r
+ margin-left: $list-side-margin;\r
+ li {\r
+ ul,\r
+ ol {\r
+ margin-left: $list-nested-margin;\r
+ margin-bottom: 0;\r
+ }\r
+ }\r
+ }\r
+\r
+ /* Lists without bullets */\r
+ ul.no-bullet {\r
+ &, li ul, li ol {\r
+ list-style-type: none;\r
+ }\r
+ margin-left: $list-side-margin-no-bullet;\r
+ }\r
+\r
+ /* Definition Lists */\r
+ dl {\r
+ dt {\r
+ margin-bottom: $definition-list-header-margin-bottom;\r
+ font-weight: $definition-list-header-weight;\r
+ }\r
+ dd { margin-bottom: $definition-list-margin-bottom; }\r
+ }\r
+\r
+ /* Abbreviations */\r
+ abbr,\r
+ acronym {\r
+ text-transform: uppercase;\r
+ font-size: 90%;\r
+ color: $body-font-color;\r
+ border-bottom: $acronym-underline;\r
+ cursor: help;\r
+ }\r
+ abbr {\r
+ text-transform: none;\r
+ }\r
+\r
+ /* Blockquotes */\r
+ blockquote {\r
+ margin: 0 0 $paragraph-margin-bottom;\r
+ padding: $blockquote-padding;\r
+ border-left: $blockquote-border;\r
+\r
+ cite {\r
+ display: block;\r
+ font-size: $blockquote-cite-font-size;\r
+ color: $blockquote-cite-font-color;\r
+ &:before {\r
+ content: "\2014 \0020";\r
+ }\r
+\r
+ a,\r
+ a:visited {\r
+ color: $blockquote-cite-link-color;\r
+ }\r
+ }\r
+ }\r
+ blockquote,\r
+ blockquote p {\r
+ line-height: $paragraph-line-height;\r
+ color: $blockquote-font-color;\r
+ }\r
+\r
+ @include breakpoint(medium) {\r
+ h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }\r
+ h1 { font-size: $h1-font-size; }\r
+ h2 { font-size: $h2-font-size; }\r
+ h3 { font-size: $h3-font-size; }\r
+ h4 { font-size: $h4-font-size; }\r
+ h5 { font-size: $h5-font-size; }\r
+ h6 { font-size: $h6-font-size; }\r
+ }\r
+}\r
Code Review / src / app-framework-demo.git / blobdiff