Update _core.scss
Import the new _typography.scss file.
This commit is contained in:
Rory Primrose
GitHub
parent
f73acde499
commit
1325c967b5
|
|
@ -1,413 +1,5 @@
|
|||
/*
|
||||
Browsers resets and base typography.
|
||||
*/
|
||||
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true` or `false`).
|
||||
$base-root-font-size: 16px !default; // Root font sizing for all elements - In `px` only!
|
||||
html {
|
||||
font-size: $base-root-font-size; // Set root's font sizing.
|
||||
}
|
||||
@if $apply-defaults-to-all {
|
||||
html, * {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
* {
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
html {
|
||||
font-family: #{$base-font-family};
|
||||
line-height: $base-line-height;
|
||||
// Prevent adjustments of font size after orientation changes in mobile.
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
margin: $body-margin;
|
||||
color: $fore-color;
|
||||
background: $back-color;
|
||||
}
|
||||
|
||||
// Correct display for older versions of IE. Fix display of some elements in other browsers as well.
|
||||
article, aside, section, figcaption, figure, main, details, menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Correct display in all browsers.
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; // Remove bottom border in Firefox 39-.
|
||||
text-decoration: underline; // Opinionated style-fix for all browsers.
|
||||
}
|
||||
|
||||
// Correct display for older versions of IE.
|
||||
audio, video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Hide overflow in IE.
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Show overflow in IE.
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// Make images responsive by default.
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Fix display in older versions of Android.
|
||||
$include-dfn-fix: true !default;
|
||||
@if $include-dfn-fix {
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: $heading-line-height;
|
||||
margin: $heading-margin;
|
||||
font-weight: $heading-font-weight;
|
||||
small {
|
||||
color: $heading-smalltext-fore-color;
|
||||
$make-heading-smalltext-block: false !default;
|
||||
@if $make-heading-smalltext-block {
|
||||
display: block;
|
||||
@if $heading-smalltext-b-top-margin != 0 {
|
||||
margin-top: $heading-smalltext-b-top-margin;
|
||||
}
|
||||
@if $heading-smalltext-b-font-size != $small-font-size {
|
||||
font-size: $heading-smalltext-b-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: $paragraph-margin;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
margin: $list-margin;
|
||||
padding-left: $list-left-padding;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: $bold-font-weight;
|
||||
}
|
||||
|
||||
hr {
|
||||
// Fixes and defaults for styling
|
||||
box-sizing: content-box;
|
||||
border: 0;
|
||||
overflow: visible;
|
||||
// Actual styling using variables
|
||||
line-height: $horizontal-rule-line-height;
|
||||
margin: $horizontal-rule-margin;
|
||||
$horizontal-rule-fancy-style: false !default;
|
||||
@if $horizontal-rule-fancy-style {
|
||||
height: 1px;
|
||||
background: -webkit-linear-gradient(#{$horizontal-rule-fancy-gradient});
|
||||
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
|
||||
}
|
||||
@else {
|
||||
height: 0;
|
||||
border-top: $horizontal-rule-border-style;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-style: italic;
|
||||
@if $blockquote-back-color != $back-color {
|
||||
background: $blockquote-back-color;
|
||||
}
|
||||
@if $blockquote-fore-color != $fore-color {
|
||||
color: $blockquote-fore-color;
|
||||
}
|
||||
// Overwrite defaults
|
||||
margin: $blockquote-margin;
|
||||
padding: $blockquote-padding;
|
||||
@if $blockquote-sidebar-style != 0 {
|
||||
border-left: $blockquote-sidebar-style;
|
||||
}
|
||||
@if $blockquote-border-style != 0 {
|
||||
border: $blockquote-border-style;
|
||||
}
|
||||
@if $blockquote-border-radius != 0 {
|
||||
border-radius: $blockquote-border-radius;
|
||||
}
|
||||
@if $blockquote-box-shadow != none {
|
||||
box-shadow: $blockquote-box-shadow;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
font-style: normal;
|
||||
font-size: $blockquote-cite-font-size;
|
||||
@if $blockquote-cite-fore-color != $blockquote-fore-color {
|
||||
color: $blockquote-cite-fore-color;
|
||||
}
|
||||
left: $blockquote-cite-left-position;
|
||||
bottom: $blockquote-cite-bottom-position;
|
||||
content: '\2014 \2009'attr(cite);
|
||||
}
|
||||
}
|
||||
|
||||
$use-default-code-fonts: true !default;
|
||||
@if $use-default-code-fonts {
|
||||
code, kbd, pre, samp{
|
||||
font-family: monospace, monospace; // Applies display fix for all code elements
|
||||
}
|
||||
}
|
||||
@else {
|
||||
code, kbd, pre, samp{
|
||||
font-family: $code-font-family; // Display fix should be applied manually!
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
@if $code-element-border-style != 0{
|
||||
border: $code-element-border-style;
|
||||
}
|
||||
@if $code-element-border-radius != 0 {
|
||||
border-radius: $code-element-border-radius;
|
||||
}
|
||||
@if $code-element-back-color != $back-color {
|
||||
background: $code-element-back-color;
|
||||
}
|
||||
@if $code-element-fore-color != $fore-color {
|
||||
color: $code-element-fore-color;
|
||||
}
|
||||
@if $code-element-padding != 0 {
|
||||
padding: $code-element-padding;
|
||||
}
|
||||
@if $code-element-box-shadow != none {
|
||||
box-shadow: $code-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto; // Responsiveness
|
||||
@if $pre-element-border-style != 0 {
|
||||
border: $pre-element-border-style;
|
||||
}
|
||||
@if $pre-element-border-radius != 0 {
|
||||
border-radius: $pre-element-border-radius;
|
||||
}
|
||||
@if $pre-element-back-color != $back-color {
|
||||
background: $pre-element-back-color;
|
||||
}
|
||||
@if $pre-element-fore-color != $fore-color {
|
||||
color: $pre-element-fore-color;
|
||||
}
|
||||
@if $pre-element-padding != 0 {
|
||||
padding: $pre-element-padding;
|
||||
}
|
||||
@if pre-element-margin != 0 {
|
||||
margin: $pre-element-margin;
|
||||
}
|
||||
$add-pre-element-sidebar: false !default;
|
||||
@if $add-pre-element-sidebar {
|
||||
border-left: $pre-element-sidebar-style;
|
||||
}
|
||||
@if $pre-element-box-shadow != none {
|
||||
box-shadow: $pre-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
@if $kbd-element-border-style != 0 {
|
||||
border: $kbd-element-border-style;
|
||||
}
|
||||
@if $kbd-element-border-radius != 0 {
|
||||
border-radius: $kbd-element-border-radius;
|
||||
}
|
||||
@if $kbd-element-back-color != $back-color {
|
||||
background: $kbd-element-back-color;
|
||||
}
|
||||
@if $kbd-element-fore-color != $fore-color {
|
||||
color: $kbd-element-fore-color;
|
||||
}
|
||||
@if $kbd-element-padding != 0 {
|
||||
padding: $kbd-element-padding;
|
||||
}
|
||||
@if $kbd-element-box-shadow != none {
|
||||
box-shadow: $kbd-element-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
$style-samp-element: false !default;
|
||||
@if $style-samp-element {
|
||||
samp{
|
||||
@if $samp-element-border-style != 0 {
|
||||
border: $samp-element-border-style;
|
||||
}
|
||||
@if $samp-element-border-radius != 0 {
|
||||
border-radius: $samp-element-border-radius;
|
||||
}
|
||||
@if $samp-element-back-color != $back-color {
|
||||
background: $samp-element-back-color;
|
||||
}
|
||||
@if $samp-element-fore-color != $fore-color {
|
||||
color: $samp-element-fore-color;
|
||||
}
|
||||
@if $samp-element-padding != 0 {
|
||||
padding: $samp-element-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size {
|
||||
small, sup, sub {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub{
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@else if $small-font-size == $sub-font-size {
|
||||
small, sub {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
font-size: $sup-font-size;
|
||||
top: $sup-top;
|
||||
}
|
||||
sub {
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@else if $small-font-size == $sup-font-size {
|
||||
small, sup {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub {
|
||||
font-size: $sub-font-size;
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
@else if $sup-font-size == $sub-font-size {
|
||||
small {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup, sub {
|
||||
font-size: $sup-font-size;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub{
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
small {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
sup {
|
||||
font-size: $sup-font-size;
|
||||
top: $sup-top;
|
||||
}
|
||||
sub{
|
||||
font-size: $sub-font-size;
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
$apply-link-underline: true !default;
|
||||
$apply-link-hover-fade: true !default;
|
||||
a{
|
||||
color: $link-fore-color;
|
||||
@if $apply-link-underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@else {
|
||||
text-decoration: none;
|
||||
}
|
||||
@if $link-font-weight != 500 {
|
||||
font-weight: $link-font-weight;
|
||||
}
|
||||
@if $apply-link-hover-fade {
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.3 ease 0s;
|
||||
transition: all 0.3s ease 0s;
|
||||
}
|
||||
&:visited {
|
||||
color: $link-visited-fore-color;
|
||||
}
|
||||
@if $apply-link-hover-fade {
|
||||
&:hover, &:focus, &:active {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
&:hover, &:focus, &:active {
|
||||
color: $link-hover-fore-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// External file loading. You can comment out modules you do not want to use.
|
||||
@import 'typography';
|
||||
@import 'grid';
|
||||
@import 'navigation';
|
||||
@import 'input_control';
|
||||
|
|
@ -416,4 +8,4 @@ a{
|
|||
@import 'tab';
|
||||
@import 'contextual';
|
||||
@import 'progress';
|
||||
@import 'utility';
|
||||
@import 'utility';
|
||||
|
|
|
|||
Loading…
Reference in a new issue