// Name: Base (No conflict) // Description: Sets default values for HTML elements // // Component: `uk-noconflict` // // ======================================================================== // Variables // ======================================================================== $base-body-background: #fff !default; $base-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default; $base-body-font-weight: normal !default; $base-body-font-size: 14px !default; $base-body-line-height: 20px !default; $base-body-color: #444 !default; $base-link-color: #07D !default; $base-link-text-decoration: none !default; $base-link-hover-color: #059 !default; $base-link-hover-text-decoration: underline !default; $base-code-color: #D05 !default; $base-code-font-size: 12px !default; $base-code-font-family: Consolas, monospace, serif !default; $base-em-color: #D05 !default; $base-ins-background: #ffa !default; $base-ins-color: #444 !default; $base-mark-background: #ffa !default; $base-mark-color: #444 !default; $base-quote-font-style: italic !default; $base-margin-vertical: 15px !default; $base-heading-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default; $base-heading-font-weight: normal !default; $base-heading-color: #444 !default; $base-heading-text-transform: none !default; $base-heading-margin-top: 25px !default; $base-h1-font-size: 36px !default; $base-h1-line-height: 42px !default; $base-h2-font-size: 24px !default; $base-h2-line-height: 30px !default; $base-h3-font-size: 18px !default; $base-h3-line-height: 24px !default; $base-h4-font-size: 16px !default; $base-h4-line-height: 22px !default; $base-h5-font-size: 14px !default; $base-h5-line-height: 20px !default; $base-h6-font-size: 12px !default; $base-h6-line-height: 18px !default; $base-list-padding-left: 30px !default; $base-hr-margin-vertical: $base-margin-vertical !default; $base-hr-border: #ddd !default; $base-hr-border-width: 1px !default; $base-blockquote-padding-left: 15px !default; $base-blockquote-border: #ddd !default; $base-blockquote-border-width: 5px !default; $base-blockquote-font-size: 16px !default; $base-blockquote-line-height: 22px !default; $base-blockquote-font-style: italic !default; $base-pre-padding: 10px !default; $base-pre-background: #f5f5f5 !default; $base-pre-color: #444 !default; $base-pre-font-size: 12px !default; $base-pre-line-height: 18px !default; $base-pre-font-family: $base-code-font-family !default; $base-selection-background: #39f !default; $base-selection-color: #fff !default; /* ======================================================================== Component: Base ========================================================================== */ html { font-size: $base-body-font-size; } .uk-noconflict { background: $base-body-background; font-family: $base-body-font-family; font-size: $base-body-font-size; line-height: $base-body-line-height; font-weight: $base-body-font-weight; color: $base-body-color; } /* Links ========================================================================== */ /* * Remove the gray background color from active links in IE 10. */ .uk-link { background: transparent; } /* * Improves readability when focused and also mouse hovered in all browsers. */ .uk-link:active, .uk-link:hover { outline: 0; } /* * Style */ .uk-link { color: $base-link-color; text-decoration: $base-link-text-decoration; cursor: pointer; @include hook-base-link(); } .uk-link:hover { color: $base-link-hover-color; text-decoration: $base-link-hover-text-decoration; @include hook-base-link-hover(); } /* Text-level semantics ========================================================================== */ /* * 1. Address odd `em`-unit font size rendering in all browsers. * 2. Consolas has a better baseline in running text compared to `Courier` */ .uk-noconflict :not(pre) > code, .uk-noconflict :not(pre) > kbd, .uk-noconflict :not(pre) > samp { /* 1 */ font-size: $base-code-font-size; /* 2 */ font-family: $base-code-font-family; /* 3 */ color: $base-code-color; white-space: nowrap; @include hook-base-code(); } /* Images ========================================================================== */ /* * 1. Responsiveness: Sets a maximum width relative to the parent and auto scales the height * 2. Corrects `max-width` behavior if padding and border are used * 3. Remove border when inside `a` element in IE 8/9/10. * 4. Remove the gap between images and the bottom of their containers */ .uk-noconflict img { /* 1 */ max-width: 100%; height: auto; /* 2 */ box-sizing: border-box; /* 3 */ border: 0; /* 4 */ vertical-align: middle; } /* * Preserve original image dimensions */ img.uk-img-preserve, .uk-img-preserve img { max-width: none; } /* * Correct overflow not hidden in IE 9/10/11. */ .uk-noconflict svg:not(:root) { overflow: hidden; } /* Block elements ========================================================================== */ /* * Reset margin */ .uk-noconflict blockquote, .uk-noconflict figure { margin: 0; } /* * Margins */ .uk-noconflict p, .uk-noconflict ul, .uk-noconflict ol, .uk-noconflict dl, .uk-noconflict blockquote, .uk-noconflict pre, .uk-noconflict address, .uk-noconflict fieldset, .uk-noconflict figure { margin: 0 0 $base-margin-vertical 0; } .uk-noconflict * + p, .uk-noconflict * + ul, .uk-noconflict * + ol, .uk-noconflict * + dl, .uk-noconflict * + blockquote, .uk-noconflict * + pre, .uk-noconflict * + address, .uk-noconflict * + fieldset, .uk-noconflict * + figure { margin-top: $base-margin-vertical; } /* Headings ========================================================================== */ .uk-noconflict h1, .uk-noconflict h2, .uk-noconflict h3, .uk-noconflict h4, .uk-noconflict h5, .uk-noconflict h6 { margin: 0 0 $base-margin-vertical 0; font-family: $base-heading-font-family; font-weight: $base-heading-font-weight; color: $base-heading-color; text-transform: $base-heading-text-transform; @include hook-base-h(); } /* * Margins */ .uk-noconflict * + h1, .uk-noconflict * + h2, .uk-noconflict * + h3, .uk-noconflict * + h4, .uk-noconflict * + h5, .uk-noconflict * + h6 { margin-top: $base-heading-margin-top; } /* * Sizes */ .uk-noconflict h1, .uk-h1 { font-size: $base-h1-font-size; line-height: $base-h1-line-height; @include hook-base-h1(); } .uk-noconflict h2, .uk-h2 { font-size: $base-h2-font-size; line-height: $base-h2-line-height; @include hook-base-h2(); } .uk-noconflict h3, .uk-h3 { font-size: $base-h3-font-size; line-height: $base-h3-line-height; @include hook-base-h3(); } .uk-noconflict h4, .uk-h4 { font-size: $base-h4-font-size; line-height: $base-h4-line-height; @include hook-base-h4(); } .uk-noconflict h5, .uk-h5 { font-size: $base-h5-font-size; line-height: $base-h5-line-height; @include hook-base-h5(); } .uk-noconflict h6, .uk-h6 { font-size: $base-h6-font-size; line-height: $base-h6-line-height; @include hook-base-h6(); } /* Lists ========================================================================== */ .uk-noconflict ul, .uk-noconflict ol { padding-left: $base-list-padding-left; } /* * Reset margin for nested lists */ .uk-noconflict ul > li > ul, .uk-noconflict ul > li > ol, .uk-noconflict ol > li > ol, .uk-noconflict ol > li > ul { margin: 0; } /* Horizontal rules ========================================================================== */ /* * 1. Address differences between Firefox and other browsers. * 2. Style */ .uk-noconflict hr { /* 1 */ box-sizing: content-box; height: 0; /* 2 */ margin: $base-hr-margin-vertical 0; border: 0; border-top: $base-hr-border-width solid $base-hr-border; @include hook-base-hr(); } /* Blockquotes ========================================================================== */ .uk-noconflict blockquote { padding-left: $base-blockquote-padding-left; border-left: $base-blockquote-border-width solid $base-blockquote-border; font-size: $base-blockquote-font-size; line-height: $base-blockquote-line-height; font-style: $base-blockquote-font-style; @include hook-base-blockquote(); } /* Preformatted text ========================================================================== */ /* * 1. Contain overflow in all browsers. */ .uk-noconflict pre { padding: $base-pre-padding; background: $base-pre-background; font: $base-pre-font-size unquote("/") $base-pre-line-height $base-pre-font-family; color: $base-pre-color; -moz-tab-size: 4; tab-size: 4; /* 1 */ overflow: auto; @include hook-base-pre(); } /* Iframe ========================================================================== */ .uk-noconflict iframe { border: 0; } /* WordPress Fix ========================================================================== */ .uk-list > li { margin: 0; } /* Fix displacements caused by higher specificity ========================================================================== */ .uk-noconflict .uk-nav, .uk-noconflict .uk-nav ul, .uk-noconflict .uk-navbar-nav, .uk-noconflict .uk-subnav, .uk-noconflict .uk-breadcrumb, .uk-noconflict .uk-pagination, .uk-noconflict .uk-tab, .uk-noconflict .uk-thumbnav, .uk-noconflict .uk-list { padding-left: 0; } // Hooks // ======================================================================== @include hook-base-misc(); // @mixin hook-base-body(){} // @mixin hook-base-link(){} // @mixin hook-base-link-hover(){} // @mixin hook-base-code(){} // @mixin hook-base-h(){} // @mixin hook-base-h1(){} // @mixin hook-base-h2(){} // @mixin hook-base-h3(){} // @mixin hook-base-h4(){} // @mixin hook-base-h5(){} // @mixin hook-base-h6(){} // @mixin hook-base-hr(){} // @mixin hook-base-blockquote(){} // @mixin hook-base-pre(){} // @mixin hook-base-misc(){}