diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 938fb9f..8bc74c3 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -9,27 +9,27 @@ - Initialized `mini-default` flavor. - Initialized `DEVLOG.md`. - **Started developing base from [Normalize.css](https://github.com/necolas/normalize.css) v5.0.0** - - Removed support for displaying `[hidden]` in IE 10-. - - Removed support for the display of `template` in IE. `template` is not supported yet in IE, thus this will not make any difference, as long as the element itself is not yet supported. - - Removed support for the display of `canvas` in IE 9-. - - Removed styling fixes for checkboxes and radio buttons in IE 10-. - - Kept the styling fix for `textarea` that only affects IE. It seems like it could be useful elsewhere as well. **Needs further work!** - - Removed the `progress` styling fix for IE 9- as the element is not supported in IE 9-. - - Kept the styling for `svg:not(:root)` although it only affects IE 9-. This is due to the fact that SVG rendering is very important. - - Removed the `img` style fix for IE 10-. - - Removed the fix for `audio:not([controls])` which only applies to iOS 4-7. - - Kept the styling fix of `audio` and `video` for IE 9-, as IE 9 supports both elements. - - *TODO* Change `mark` color to customized from flavor, override normalized default and fix. - - Kept styling fix of `dfn` for Android 4.3-, as element is properly supported. - - *TODO*,*UNCERTAIN* Change the `font-weight` of `b` and `strong` elements to a set number (e.g. 700) to avoid the normalize hack. - - Kept styling fix for `abbr` in Firefox 39-, as the element is well supported. - - Kept styling fixes for links (`a`), as they are a core element in all browsers and they should be supported well even in older browsers. - - Removed the styling fix for `figure` for IE 8. `figure` styling will probably be built from the ground up in the core anyways, so this should not be a problem. - - Kept styling fixes for `figure` and `figcaption` for IE 9-. These elements are supported by IE 9, but not the older versions of IE. - - Kept the styling fixes for `article`, `aside`, `footer`, `header`, `nav` and `section` for IE 9-. Elements are only supported in IE 9. + - Removed support for displaying `[hidden]` in IE 10-. + - Removed support for the display of `template` in IE. `template` is not supported yet in IE, thus this will not make any difference, as long as the element itself is not yet supported. + - Removed support for the display of `canvas` in IE 9-. + - Removed styling fixes for checkboxes and radio buttons in IE 10-. + - Kept the styling fix for `textarea` that only affects IE. It seems like it could be useful elsewhere as well. **Needs further work!** + - Removed the `progress` styling fix for IE 9- as the element is not supported in IE 9-. + - Kept the styling for `svg:not(:root)` although it only affects IE 9-. This is due to the fact that SVG rendering is very important. + - Removed the `img` style fix for IE 10-. + - Removed the fix for `audio:not([controls])` which only applies to iOS 4-7. + - Kept the styling fix of `audio` and `video` for IE 9-, as IE 9 supports both elements. + - *TODO* Change `mark` color to customized from flavor, override normalized default and fix. + - Kept styling fix of `dfn` for Android 4.3-, as element is properly supported. + - *TODO*,*UNCERTAIN* Change the `font-weight` of `b` and `strong` elements to a set number (e.g. 700) to avoid the normalize hack. + - Kept styling fix for `abbr` in Firefox 39-, as the element is well supported. + - Kept styling fixes for links (`a`), as they are a core element in all browsers and they should be supported well even in older browsers. + - Removed the styling fix for `figure` for IE 8. `figure` styling will probably be built from the ground up in the core anyways, so this should not be a problem. + - Kept styling fixes for `figure` and `figcaption` for IE 9-. These elements are supported by IE 9, but not the older versions of IE. + - Kept the styling fixes for `article`, `aside`, `footer`, `header`, `nav` and `section` for IE 9-. Elements are only supported in IE 9. - **Organized and cleaned the base** - - Merged styling fixes for `article`, `aside`, `footer`, `header`, `nav` and `section` with fixes for `figure`, `figcaption` and `main`. - - Merged styling for `kbd`, `code`, `pre` and `samp`. + - Merged styling fixes for `article`, `aside`, `footer`, `header`, `nav` and `section` with fixes for `figure`, `figcaption` and `main`. + - Merged styling for `kbd`, `code`, `pre` and `samp`. - Started documenting default flavor. ## 20161013 @@ -44,7 +44,7 @@ - Built styling for horizontal rules, fixes apply as before. - `hr` elements get a margin for left and right (`4px`). This is a design decision for the flavor. - `hr` top and bottom margins changed to `0.5em` from `0.7em`. -- Removed the `font-size: 1em` for the code elements (`code`, `pre`, `kbd`, `samp`) as they should normally be styled using the first style that applies to `html` and all elements. **Highly suggested to use `$apply-defaults-to-all: true;` always.** +- Removed the `font-size: 1em` for the code elements (`code`, `pre`, `kbd`, `samp`) as they should normally be styled using the first style that applies to `html` and all elements. **Highly suggested to use `$apply-defaults-to-all: true;` always.** - Added variables for `code`, `pre`, `kbd`, `samp` and a flag for `samp` (`$style-samp-element`) to make sure that no unnecessary styles are added if the `samp` element is not to be used by the developer. - Added conditions to make sure the least amount of code is used and no defaults are redefined when styling `code`. `kbd`, `samp` and `pre`. - Changed padding of `pre` elements to `6px` and later to `8px`. Changed color for `hr` to `#666` and later to `#888`. @@ -103,9 +103,9 @@ - Added flag for `a` using fancy `:hover` and other focused effects instead of `color` (`$apply-link-hover-fade`). - Opened issue for module restructure (#14). - Module restructure based on issue #14 (partial for whatever work was already done): - - Renamed `_base.scss` to `_core.scss` and created folder for submodules (`mini-core`). - - Created `_contextual.scss` for `mark` styling. - - Comments and sections for core. + - Renamed `_base.scss` to `_core.scss` and created folder for submodules (`mini-core`). + - Created `_contextual.scss` for `mark` styling. + - Comments and sections for core. - Changed import in flavor, imported contextual in core. - Corrected and finalized display of `abbr` elements with a `title` attribute: Border fix for older Firefox version was kept, dropped some styling for the underline, underline will now always be normal `text-decoration: underline` on all browsers (opinionated). - Kept display fix for `audio` and `video` for IE 9, as the elements are supported, moved to top of head. @@ -227,11 +227,11 @@ - Reorganized the loading order of modules in `core`. - Added `search` fixes to `form` module. - *DESIGN DECISION* To deal with accessibility concerns and the very "hacky" way navigation was implemented in the previous version, the following design decisions have been made. - 1. The top menu will be based around the `header` element and will not be able to do `display: fixed`. This will allow content over the fold to appear when important content exists in the menu. Space for a logo and some additional things will be added there. - 2. `nav` will be used as a vertical menu, not `fixed`, that will display any navigational content as required by the user. This is the traditional navigation menu. It will be embeddable in a grid column left or right based on user preference. - 3. Dropdown components will be removed, as the top bar does not need them to work properly and the side bar can be toggled with code. - 4. Sidebar collapsing will not be added as a checkbox hack anymore, but users will be able to use Javascript for that. - 5. An example of Javascript will be added for said collapse. + 1. The top menu will be based around the `header` element and will not be able to do `display: fixed`. This will allow content over the fold to appear when important content exists in the menu. Space for a logo and some additional things will be added there. + 2. `nav` will be used as a vertical menu, not `fixed`, that will display any navigational content as required by the user. This is the traditional navigation menu. It will be embeddable in a grid column left or right based on user preference. + 3. Dropdown components will be removed, as the top bar does not need them to work properly and the side bar can be toggled with code. + 4. Sidebar collapsing will not be added as a checkbox hack anymore, but users will be able to use Javascript for that. + 5. An example of Javascript will be added for said collapse. - All `checkbox` and `radio` elements will be `display: none` by default. Grouping one in an `input-group` with a `label` will give the desired style to the label. - Created module `mini-core/checkbox`. - Started styling `checkbox`es and `radio` buttons. Got most of the styling done, hardcoded. @@ -343,16 +343,16 @@ - Added responsiveness to `tab` module. - Tested `tab` module thoroughly on both Firefox and Chrome (PC), will test further on phone. - *DESIGN DECISION* The `accordion` and collapse module will be merged with the `tab` and carousel module. This is a very well-thought out decision, based on the fact that `accordion` components behave like `stacked` `tab` components. This means that users will be forced to use a heavier module for both components (which might not be beneficial if they only wish to use the `accordion` component), however this helps users mnemonically, by allowing more functionality in one technically identical structure. The specifics of this decision are laid out below: - 1. The `stacked` class will be used for a `tabs` container, so that an `accordion` component can be easily emulated. - 2. Some of the versatility of the `accordion` class will be sacrificed to allow `stacked` `tabs` to include the same functionality. Minor changes can still be made manually. - 3. The `tabs` module will use different transformation tricks for `stacked` and normal tabs. Specifically, the responsive stacked tabs on smaller screens will use preset `height`, while `stacked` tabs will use `height: auto;`. - 4. All controls for both types of `tab`s will be hidden from screen readers to make the content accessible as-is. - 5. The old `accordion` module will be retired and possibly stored in a legacy folder. People that only want that old-school `accordion` module can use it. - 6. `stacked` `tabs` will allow both `checkbox` and `radio` `input`s, normal ones will not allow `checkbox`. This is in line with the philosophy of the two components. - 7. Carousels can still be built using any of the two styles. - 8. `stacked` `tabs` will feature their own color scheme for some things to allow more customization within the module. - 9. Both components will use a generic `:hover` effect. - 10. The `transform`s applied before to `accordion` will still apply to `stacked` `tabs`. + 1. The `stacked` class will be used for a `tabs` container, so that an `accordion` component can be easily emulated. + 2. Some of the versatility of the `accordion` class will be sacrificed to allow `stacked` `tabs` to include the same functionality. Minor changes can still be made manually. + 3. The `tabs` module will use different transformation tricks for `stacked` and normal tabs. Specifically, the responsive stacked tabs on smaller screens will use preset `height`, while `stacked` tabs will use `height: auto;`. + 4. All controls for both types of `tab`s will be hidden from screen readers to make the content accessible as-is. + 5. The old `accordion` module will be retired and possibly stored in a legacy folder. People that only want that old-school `accordion` module can use it. + 6. `stacked` `tabs` will allow both `checkbox` and `radio` `input`s, normal ones will not allow `checkbox`. This is in line with the philosophy of the two components. + 7. Carousels can still be built using any of the two styles. + 8. `stacked` `tabs` will feature their own color scheme for some things to allow more customization within the module. + 9. Both components will use a generic `:hover` effect. + 10. The `transform`s applied before to `accordion` will still apply to `stacked` `tabs`. - Refactored code of `tabs` to work with the above decision, removed obsolete artifacts from the `accordion` module. - Made a few minor tweaks, decided not to add `accordion`-specific styling, as the current styling is just enough. - Edited the demo page to include most of the new functionality. @@ -365,14 +365,19 @@ - Minor `tabs` update for `:first-of-type` and `:last-of-type` selectors. This update should fix square top-right corners for single collapses. - Deployed live demo. - New module restructure: all modules will be moved to core, some merges might have to be applied (check issue #14). Restructure was applied as follows: - - Added the functionality of the new `alert` module to `contextual`. Includes mixin `make-alert-alt-color` for different `alert` color variants. - - Restructured folders. `mini-shell` removed, `mini-core` renamed to `mini`. `mini` is the core folder now. - - Created branch `v1-neutrino` both locally and on Github to support legacy versions in the future. `master` is now the branch for **Fermion** only. - - Aggressive deletion of older files. The following folder are now gone: `scss/mini`, `scss/mini-extra`, `flavors` except for the contents of the `v2` folder and the folder itself. - - Renamed `_mini.scss` to `_core.scss`, moved to the `scss/v2/mini` directory. - - Deleted `accordion` module file as it was obsolete. - - Renamed `scss` directory to `src`. Renamed `flavors` directory to `dist`. - - Moved flavors from their directory to the `src` directory. CSS files produced from flavor files will go to the `dist` folder, along with the minified versions. - - *TODO* Update the `package.json` and `bower.json` files according to the new framework version. - - Updated live demo page reference to use the new structure. - \ No newline at end of file + - Added the functionality of the new `alert` module to `contextual`. Includes mixin `make-alert-alt-color` for different `alert` color variants. + - Restructured folders. `mini-shell` removed, `mini-core` renamed to `mini`. `mini` is the core folder now. + - Created branch `v1-neutrino` both locally and on Github to support legacy versions in the future. `master` is now the branch for **Fermion** only. + - Aggressive deletion of older files. The following folder are now gone: `scss/mini`, `scss/mini-extra`, `flavors` except for the contents of the `v2` folder and the folder itself. + - Renamed `_mini.scss` to `_core.scss`, moved to the `scss/v2/mini` directory. + - Deleted `accordion` module file as it was obsolete. + - Renamed `scss` directory to `src`. Renamed `flavors` directory to `dist`. + - Moved flavors from their directory to the `src` directory. CSS files produced from flavor files will go to the `dist` folder, along with the minified versions. + - *TODO* Update the `package.json` and `bower.json` files according to the new framework version. + - Updated live demo page reference to use the new structure. + +## 20161110 + +- Continued module restructure and cleanup as follows: + - Code cleanup in `core`, indentation change to tabs for consistency, indentation fixes etc. + \ No newline at end of file diff --git a/src/mini/_core.scss b/src/mini/_core.scss index c3bea33..aaefbd3 100644 --- a/src/mini/_core.scss +++ b/src/mini/_core.scss @@ -1,360 +1,353 @@ -// SECTION: Browsers resets and base typography. -//=================================================== +// Browsers resets and base typography. $apply-defaults-to-all: true !default; @if $apply-defaults-to-all { -html, * { - font-family: #{$base-font-family}; - font-size: $base-font-size; - line-height: $base-line-height; - // Prevent adjustments of font size after orientation changes in mobile. - -webkit-text-size-adjust: 100%; -} + html, * { + font-family: #{$base-font-family}; + font-size: $base-font-size; + line-height: $base-line-height; + // Prevent adjustments of font size after orientation changes in mobile. + -webkit-text-size-adjust: 100%; + } } @else { -html { - font-family: #{$base-font-family}; - font-size: $base-font-size; - line-height: $base-line-height; - // Prevent adjustments of font size after orientation changes in mobile. - -webkit-text-size-adjust: 100%; -} + html { + font-family: #{$base-font-family}; + font-size: $base-font-size; + 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; + 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. +// 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; + display: block; } // Correct display in all browsers. summary { - display: list-item; + display: list-item; } abbr[title] { - border-bottom: none; // Remove bottom border in Firefox 39-. - text-decoration: underline; // Opinionated style-fix for all browsers. -// This is an artifact, please move along. -// &:hover:after { content: " ("attr(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; + display: inline-block; } // Hide overflow in IE. svg:not(:root) { - overflow: hidden; + overflow: hidden; } // Show overflow in IE. input { - overflow: visible; + overflow: visible; } // Make images responsive by default. img { - width: 100%; - height: auto; + width: 100%; + height: auto; } // Fix display in older versions of Android. $include-dfn-fix: true !default; @if $include-dfn-fix { -dfn { - font-style: italic; -} + dfn { + font-style: italic; + } } h1, h2, h3, h4, h5, h6 { - line-height: $header-line-height; - margin: $header-margin; - font-weight: $header-font-weight; - small { - color: $header-smalltext-fore-color; -$make-header-smalltext-block: false !default; -@if $make-header-smalltext-block { - display: block; -@if $header-smalltext-b-top-margin != 0 { - margin-top: $header-smalltext-b-top-margin; -} -@if $header-smalltext-b-font-size != $small-font-size { - font-size: $header-smalltext-b-font-size; -} -} - } + line-height: $header-line-height; + margin: $header-margin; + font-weight: $header-font-weight; + small { + color: $header-smalltext-fore-color; + $make-header-smalltext-block: false !default; + @if $make-header-smalltext-block { + display: block; + @if $header-smalltext-b-top-margin != 0 { + margin-top: $header-smalltext-b-top-margin; + } + @if $header-smalltext-b-font-size != $small-font-size { + font-size: $header-smalltext-b-font-size; + } + } + } } h1 { - font-size: $h1-font-size; + font-size: $h1-font-size; } h2 { - font-size: $h2-font-size; + font-size: $h2-font-size; } h3 { - font-size: $h3-font-size; + font-size: $h3-font-size; } h4 { - font-size: $h4-font-size; + font-size: $h4-font-size; } h5 { - font-size: $h5-font-size; + font-size: $h5-font-size; } h6 { - font-size: $h6-font-size; + font-size: $h6-font-size; } p { - margin: $paragraph-margin; + margin: $paragraph-margin; } b, strong { - font-weight: $bold-font-weight; + 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; -} + // 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; + } } $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 -} + 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, 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-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; + } } 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; -} + 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; + } } 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-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; + } } $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; -} -} + 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; -} + 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; -} + 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; -} + 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; -} + 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; -} + 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; + 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; + 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; + } + } } -@else { - text-decoration: none; -} -@if $link-font-weight != 500 { - font-weight: $link-font-weight; -} -@if $apply-link-hover-fade { - opacity: 1; - 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; -} -} -} -//=================================================== -// SECTION: External files - core -//=================================================== -// You can comment out modules you do not want to use. +// External file loading. You can comment out modules you do not want to use. @import 'grid'; @import 'table'; @import 'form'; @@ -366,5 +359,4 @@ a{ @import 'utility'; @import 'card'; @import 'tab'; -@import 'spinner'; -//=================================================== \ No newline at end of file +@import 'spinner'; \ No newline at end of file