mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-14 18:03:59 +02:00
Core cleanup
This commit is contained in:
Angelos Chalaris
@@ -9,27 +9,27 @@
|
|||||||
- Initialized `mini-default` flavor.
|
- Initialized `mini-default` flavor.
|
||||||
- Initialized `DEVLOG.md`.
|
- Initialized `DEVLOG.md`.
|
||||||
- **Started developing base from [Normalize.css](https://github.com/necolas/normalize.css) v5.0.0**
|
- **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 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 `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 support for the display of `canvas` in IE 9-.
|
||||||
- Removed styling fixes for checkboxes and radio buttons in IE 10-.
|
- 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!**
|
- 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-.
|
- 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.
|
- 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 `img` style fix for IE 10-.
|
||||||
- Removed the fix for `audio:not([controls])` which only applies to iOS 4-7.
|
- 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.
|
- 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.
|
- *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.
|
- 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.
|
- *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 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.
|
- 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.
|
- 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 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.
|
- 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**
|
- **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 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 for `kbd`, `code`, `pre` and `samp`.
|
||||||
- Started documenting default flavor.
|
- Started documenting default flavor.
|
||||||
|
|
||||||
## 20161013
|
## 20161013
|
||||||
@@ -44,7 +44,7 @@
|
|||||||
- Built styling for horizontal rules, fixes apply as before.
|
- 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` 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`.
|
- `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 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`.
|
- 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`.
|
- 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`).
|
- Added flag for `a` using fancy `:hover` and other focused effects instead of `color` (`$apply-link-hover-fade`).
|
||||||
- Opened issue for module restructure (#14).
|
- Opened issue for module restructure (#14).
|
||||||
- Module restructure based on issue #14 (partial for whatever work was already done):
|
- 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`).
|
- Renamed `_base.scss` to `_core.scss` and created folder for submodules (`mini-core`).
|
||||||
- Created `_contextual.scss` for `mark` styling.
|
- Created `_contextual.scss` for `mark` styling.
|
||||||
- Comments and sections for core.
|
- Comments and sections for core.
|
||||||
- Changed import in flavor, imported contextual in 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).
|
- 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.
|
- 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`.
|
- Reorganized the loading order of modules in `core`.
|
||||||
- Added `search` fixes to `form` module.
|
- 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.
|
- *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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
- 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`.
|
- Created module `mini-core/checkbox`.
|
||||||
- Started styling `checkbox`es and `radio` buttons. Got most of the styling done, hardcoded.
|
- Started styling `checkbox`es and `radio` buttons. Got most of the styling done, hardcoded.
|
||||||
@@ -343,16 +343,16 @@
|
|||||||
- Added responsiveness to `tab` module.
|
- Added responsiveness to `tab` module.
|
||||||
- Tested `tab` module thoroughly on both Firefox and Chrome (PC), will test further on phone.
|
- 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:
|
- *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.
|
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.
|
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;`.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
9. Both components will use a generic `:hover` effect.
|
||||||
10. The `transform`s applied before to `accordion` will still apply to `stacked` `tabs`.
|
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.
|
- 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.
|
- 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.
|
- 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.
|
- 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.
|
- 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:
|
- 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.
|
- 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.
|
- 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.
|
- 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.
|
- 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.
|
- Renamed `_mini.scss` to `_core.scss`, moved to the `scss/v2/mini` directory.
|
||||||
- Deleted `accordion` module file as it was obsolete.
|
- Deleted `accordion` module file as it was obsolete.
|
||||||
- Renamed `scss` directory to `src`. Renamed `flavors` directory to `dist`.
|
- 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.
|
- 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.
|
- *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.
|
- 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.
|
||||||
|
|
||||||
@@ -1,360 +1,353 @@
|
|||||||
// SECTION: Browsers resets and base typography.
|
// Browsers resets and base typography.
|
||||||
//===================================================
|
|
||||||
$apply-defaults-to-all: true !default;
|
$apply-defaults-to-all: true !default;
|
||||||
@if $apply-defaults-to-all {
|
@if $apply-defaults-to-all {
|
||||||
html, * {
|
html, * {
|
||||||
font-family: #{$base-font-family};
|
font-family: #{$base-font-family};
|
||||||
font-size: $base-font-size;
|
font-size: $base-font-size;
|
||||||
line-height: $base-line-height;
|
line-height: $base-line-height;
|
||||||
// Prevent adjustments of font size after orientation changes in mobile.
|
// Prevent adjustments of font size after orientation changes in mobile.
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
html {
|
html {
|
||||||
font-family: #{$base-font-family};
|
font-family: #{$base-font-family};
|
||||||
font-size: $base-font-size;
|
font-size: $base-font-size;
|
||||||
line-height: $base-line-height;
|
line-height: $base-line-height;
|
||||||
// Prevent adjustments of font size after orientation changes in mobile.
|
// Prevent adjustments of font size after orientation changes in mobile.
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: $body-margin;
|
margin: $body-margin;
|
||||||
color: $fore-color;
|
color: $fore-color;
|
||||||
background: $back-color;
|
background: $back-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Correct display for older versions of IE.
|
// Correct display for older versions of IE. Fix display of some elements in other browsers as well.
|
||||||
// Fix display of some elements in other browsers as well.
|
|
||||||
article, aside, section, figcaption, figure, main, details, menu {
|
article, aside, section, figcaption, figure, main, details, menu {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Correct display in all browsers.
|
// Correct display in all browsers.
|
||||||
summary {
|
summary {
|
||||||
display: list-item;
|
display: list-item;
|
||||||
}
|
}
|
||||||
|
|
||||||
abbr[title] {
|
abbr[title] {
|
||||||
border-bottom: none; // Remove bottom border in Firefox 39-.
|
border-bottom: none; // Remove bottom border in Firefox 39-.
|
||||||
text-decoration: underline; // Opinionated style-fix for all browsers.
|
text-decoration: underline; // Opinionated style-fix for all browsers.
|
||||||
// This is an artifact, please move along.
|
|
||||||
// &:hover:after { content: " ("attr(title) ")"; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Correct display for older versions of IE.
|
// Correct display for older versions of IE.
|
||||||
audio, video {
|
audio, video {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hide overflow in IE.
|
// Hide overflow in IE.
|
||||||
svg:not(:root) {
|
svg:not(:root) {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show overflow in IE.
|
// Show overflow in IE.
|
||||||
input {
|
input {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Make images responsive by default.
|
// Make images responsive by default.
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fix display in older versions of Android.
|
// Fix display in older versions of Android.
|
||||||
$include-dfn-fix: true !default;
|
$include-dfn-fix: true !default;
|
||||||
@if $include-dfn-fix {
|
@if $include-dfn-fix {
|
||||||
dfn {
|
dfn {
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
line-height: $header-line-height;
|
line-height: $header-line-height;
|
||||||
margin: $header-margin;
|
margin: $header-margin;
|
||||||
font-weight: $header-font-weight;
|
font-weight: $header-font-weight;
|
||||||
small {
|
small {
|
||||||
color: $header-smalltext-fore-color;
|
color: $header-smalltext-fore-color;
|
||||||
$make-header-smalltext-block: false !default;
|
$make-header-smalltext-block: false !default;
|
||||||
@if $make-header-smalltext-block {
|
@if $make-header-smalltext-block {
|
||||||
display: block;
|
display: block;
|
||||||
@if $header-smalltext-b-top-margin != 0 {
|
@if $header-smalltext-b-top-margin != 0 {
|
||||||
margin-top: $header-smalltext-b-top-margin;
|
margin-top: $header-smalltext-b-top-margin;
|
||||||
}
|
}
|
||||||
@if $header-smalltext-b-font-size != $small-font-size {
|
@if $header-smalltext-b-font-size != $small-font-size {
|
||||||
font-size: $header-smalltext-b-font-size;
|
font-size: $header-smalltext-b-font-size;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: $h1-font-size;
|
font-size: $h1-font-size;
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
font-size: $h2-font-size;
|
font-size: $h2-font-size;
|
||||||
}
|
}
|
||||||
h3 {
|
h3 {
|
||||||
font-size: $h3-font-size;
|
font-size: $h3-font-size;
|
||||||
}
|
}
|
||||||
h4 {
|
h4 {
|
||||||
font-size: $h4-font-size;
|
font-size: $h4-font-size;
|
||||||
}
|
}
|
||||||
h5 {
|
h5 {
|
||||||
font-size: $h5-font-size;
|
font-size: $h5-font-size;
|
||||||
}
|
}
|
||||||
h6 {
|
h6 {
|
||||||
font-size: $h6-font-size;
|
font-size: $h6-font-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: $paragraph-margin;
|
margin: $paragraph-margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
b, strong {
|
b, strong {
|
||||||
font-weight: $bold-font-weight;
|
font-weight: $bold-font-weight;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
// Fixes and defaults for styling
|
// Fixes and defaults for styling
|
||||||
box-sizing: content-box;
|
box-sizing: content-box;
|
||||||
border: 0;
|
border: 0;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
// Actual styling using variables
|
// Actual styling using variables
|
||||||
line-height: $horizontal-rule-line-height;
|
line-height: $horizontal-rule-line-height;
|
||||||
margin: $horizontal-rule-margin;
|
margin: $horizontal-rule-margin;
|
||||||
$horizontal-rule-fancy-style: false !default;
|
$horizontal-rule-fancy-style: false !default;
|
||||||
@if $horizontal-rule-fancy-style {
|
@if $horizontal-rule-fancy-style {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: -webkit-linear-gradient(#{$horizontal-rule-fancy-gradient});
|
background: -webkit-linear-gradient(#{$horizontal-rule-fancy-gradient});
|
||||||
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
|
background: linear-gradient(#{$horizontal-rule-fancy-gradient});
|
||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
height: 0;
|
height: 0;
|
||||||
border-top: $horizontal-rule-border-style;
|
border-top: $horizontal-rule-border-style;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$use-default-code-fonts: true !default;
|
$use-default-code-fonts: true !default;
|
||||||
@if $use-default-code-fonts {
|
@if $use-default-code-fonts {
|
||||||
code, kbd, pre, samp{
|
code, kbd, pre, samp{
|
||||||
font-family: monospace, monospace; // Applies display fix for all code elements
|
font-family: monospace, monospace; // Applies display fix for all code elements
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
code, kbd, pre, samp{
|
code, kbd, pre, samp{
|
||||||
font-family: $code-font-family; // Display fix should be applied manually!
|
font-family: $code-font-family; // Display fix should be applied manually!
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
@if $code-element-border-style != 0{
|
@if $code-element-border-style != 0{
|
||||||
border: $code-element-border-style;
|
border: $code-element-border-style;
|
||||||
}
|
}
|
||||||
@if $code-element-border-radius != 0 {
|
@if $code-element-border-radius != 0 {
|
||||||
border-radius: $code-element-border-radius;
|
border-radius: $code-element-border-radius;
|
||||||
}
|
}
|
||||||
@if $code-element-back-color != $back-color {
|
@if $code-element-back-color != $back-color {
|
||||||
background: $code-element-back-color;
|
background: $code-element-back-color;
|
||||||
}
|
}
|
||||||
@if $code-element-fore-color != $fore-color {
|
@if $code-element-fore-color != $fore-color {
|
||||||
color: $code-element-fore-color;
|
color: $code-element-fore-color;
|
||||||
}
|
}
|
||||||
@if $code-element-padding != 0 {
|
@if $code-element-padding != 0 {
|
||||||
padding: $code-element-padding;
|
padding: $code-element-padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
overflow: auto; // Responsiveness
|
overflow: auto; // Responsiveness
|
||||||
@if $pre-element-border-style != 0 {
|
@if $pre-element-border-style != 0 {
|
||||||
border: $pre-element-border-style;
|
border: $pre-element-border-style;
|
||||||
}
|
}
|
||||||
@if $pre-element-border-radius != 0 {
|
@if $pre-element-border-radius != 0 {
|
||||||
border-radius: $pre-element-border-radius;
|
border-radius: $pre-element-border-radius;
|
||||||
}
|
}
|
||||||
@if $pre-element-back-color != $back-color {
|
@if $pre-element-back-color != $back-color {
|
||||||
background: $pre-element-back-color;
|
background: $pre-element-back-color;
|
||||||
}
|
}
|
||||||
@if $pre-element-fore-color != $fore-color {
|
@if $pre-element-fore-color != $fore-color {
|
||||||
color: $pre-element-fore-color;
|
color: $pre-element-fore-color;
|
||||||
}
|
}
|
||||||
@if $pre-element-padding != 0 {
|
@if $pre-element-padding != 0 {
|
||||||
padding: $pre-element-padding;
|
padding: $pre-element-padding;
|
||||||
}
|
}
|
||||||
@if pre-element-margin != 0 {
|
@if pre-element-margin != 0 {
|
||||||
margin: $pre-element-margin;
|
margin: $pre-element-margin;
|
||||||
}
|
}
|
||||||
$add-pre-element-sidebar: false !default;
|
$add-pre-element-sidebar: false !default;
|
||||||
@if $add-pre-element-sidebar {
|
@if $add-pre-element-sidebar {
|
||||||
border-left: $pre-element-sidebar-style;
|
border-left: $pre-element-sidebar-style;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
kbd {
|
kbd {
|
||||||
@if $kbd-element-border-style != 0 {
|
@if $kbd-element-border-style != 0 {
|
||||||
border: $kbd-element-border-style;
|
border: $kbd-element-border-style;
|
||||||
}
|
}
|
||||||
@if $kbd-element-border-radius != 0 {
|
@if $kbd-element-border-radius != 0 {
|
||||||
border-radius: $kbd-element-border-radius;
|
border-radius: $kbd-element-border-radius;
|
||||||
}
|
}
|
||||||
@if $kbd-element-back-color != $back-color {
|
@if $kbd-element-back-color != $back-color {
|
||||||
background: $kbd-element-back-color;
|
background: $kbd-element-back-color;
|
||||||
}
|
}
|
||||||
@if $kbd-element-fore-color != $fore-color {
|
@if $kbd-element-fore-color != $fore-color {
|
||||||
color: $kbd-element-fore-color;
|
color: $kbd-element-fore-color;
|
||||||
}
|
}
|
||||||
@if $kbd-element-padding != 0 {
|
@if $kbd-element-padding != 0 {
|
||||||
padding: $kbd-element-padding;
|
padding: $kbd-element-padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$style-samp-element: false !default;
|
$style-samp-element: false !default;
|
||||||
@if $style-samp-element {
|
@if $style-samp-element {
|
||||||
samp{
|
samp{
|
||||||
@if $samp-element-border-style != 0 {
|
@if $samp-element-border-style != 0 {
|
||||||
border: $samp-element-border-style;
|
border: $samp-element-border-style;
|
||||||
}
|
}
|
||||||
@if $samp-element-border-radius != 0 {
|
@if $samp-element-border-radius != 0 {
|
||||||
border-radius: $samp-element-border-radius;
|
border-radius: $samp-element-border-radius;
|
||||||
}
|
}
|
||||||
@if $samp-element-back-color != $back-color {
|
@if $samp-element-back-color != $back-color {
|
||||||
background: $samp-element-back-color;
|
background: $samp-element-back-color;
|
||||||
}
|
}
|
||||||
@if $samp-element-fore-color != $fore-color {
|
@if $samp-element-fore-color != $fore-color {
|
||||||
color: $samp-element-fore-color;
|
color: $samp-element-fore-color;
|
||||||
}
|
}
|
||||||
@if $samp-element-padding != 0 {
|
@if $samp-element-padding != 0 {
|
||||||
padding: $samp-element-padding;
|
padding: $samp-element-padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size {
|
@if $small-font-size == $sub-font-size and $small-font-size == $sup-font-size {
|
||||||
small, sup, sub {
|
small, sup, sub {
|
||||||
font-size: $small-font-size;
|
font-size: $small-font-size;
|
||||||
}
|
}
|
||||||
sup {
|
sup {
|
||||||
top: $sup-top;
|
top: $sup-top;
|
||||||
}
|
}
|
||||||
sub{
|
sub{
|
||||||
bottom: $sub-bottom;
|
bottom: $sub-bottom;
|
||||||
}
|
}
|
||||||
sup, sub {
|
sup, sub {
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@else if $small-font-size == $sub-font-size {
|
@else if $small-font-size == $sub-font-size {
|
||||||
small, sub {
|
small, sub {
|
||||||
font-size: $small-font-size;
|
font-size: $small-font-size;
|
||||||
}
|
}
|
||||||
sup {
|
sup {
|
||||||
font-size: $sup-font-size;
|
font-size: $sup-font-size;
|
||||||
top: $sup-top;
|
top: $sup-top;
|
||||||
}
|
}
|
||||||
sub {
|
sub {
|
||||||
bottom: $sub-bottom;
|
bottom: $sub-bottom;
|
||||||
}
|
}
|
||||||
sup, sub {
|
sup, sub {
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@else if $small-font-size == $sup-font-size {
|
@else if $small-font-size == $sup-font-size {
|
||||||
small, sup {
|
small, sup {
|
||||||
font-size: $small-font-size;
|
font-size: $small-font-size;
|
||||||
}
|
}
|
||||||
sup {
|
sup {
|
||||||
top: $sup-top;
|
top: $sup-top;
|
||||||
}
|
}
|
||||||
sub {
|
sub {
|
||||||
font-size: $sub-font-size;
|
font-size: $sub-font-size;
|
||||||
bottom: $sub-bottom;
|
bottom: $sub-bottom;
|
||||||
}
|
}
|
||||||
sup, sub {
|
sup, sub {
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@else if $sup-font-size == $sub-font-size {
|
@else if $sup-font-size == $sub-font-size {
|
||||||
small {
|
small {
|
||||||
font-size: $small-font-size;
|
font-size: $small-font-size;
|
||||||
}
|
}
|
||||||
sup, sub {
|
sup, sub {
|
||||||
font-size: $sup-font-size;
|
font-size: $sup-font-size;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
sup {
|
sup {
|
||||||
top: $sup-top;
|
top: $sup-top;
|
||||||
}
|
}
|
||||||
sub{
|
sub{
|
||||||
bottom: $sub-bottom;
|
bottom: $sub-bottom;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@else {
|
@else {
|
||||||
small {
|
small {
|
||||||
font-size: $small-font-size;
|
font-size: $small-font-size;
|
||||||
}
|
}
|
||||||
sup {
|
sup {
|
||||||
font-size: $sup-font-size;
|
font-size: $sup-font-size;
|
||||||
top: $sup-top;
|
top: $sup-top;
|
||||||
}
|
}
|
||||||
sub{
|
sub{
|
||||||
font-size: $sub-font-size;
|
font-size: $sub-font-size;
|
||||||
bottom: $sub-bottom;
|
bottom: $sub-bottom;
|
||||||
}
|
}
|
||||||
sup, sub {
|
sup, sub {
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
vertical-align: baseline;
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
$apply-link-underline: true !default;
|
$apply-link-underline: true !default;
|
||||||
$apply-link-hover-fade: true !default;
|
$apply-link-hover-fade: true !default;
|
||||||
a{
|
a{
|
||||||
color: $link-fore-color;
|
color: $link-fore-color;
|
||||||
@if $apply-link-underline {
|
@if $apply-link-underline {
|
||||||
text-decoration: 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 {
|
// External file loading. You can comment out modules you do not want to use.
|
||||||
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.
|
|
||||||
@import 'grid';
|
@import 'grid';
|
||||||
@import 'table';
|
@import 'table';
|
||||||
@import 'form';
|
@import 'form';
|
||||||
@@ -366,5 +359,4 @@ a{
|
|||||||
@import 'utility';
|
@import 'utility';
|
||||||
@import 'card';
|
@import 'card';
|
||||||
@import 'tab';
|
@import 'tab';
|
||||||
@import 'spinner';
|
@import 'spinner';
|
||||||
//===================================================
|
|
||||||
Reference in New Issue
Block a user