beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added external variables to modules

Browse source
This commit is contained in:
Angelos Chalaris 2017-11-13 13:00:17 +02:00
parent 1164fd672d
commit 37d17ff326
4 changed files with 57 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/v3/DEVLOG.md
View file

@ -142,3 +142,4 @@
- Properly applied variable styling to `checkbox` and `radio` elements. They now use the `base-font-size` Sass variable to get their size, which makes sense.
- Added `.button-group`s, they seem to behave properly, `border-color` could use some tweaking maybe.
- Added external Sass variables to all modules (hopefully I didn't miss any), so that they can be used on their own now (not recommended, but doable).

21
src/mini/_input_control.scss
View file

@ -41,6 +41,27 @@ $button-hover-fore-color-var: '--button-hover-fore-color' !default;
$button-border-color-var: '--button-border-color' !default;
$button-hover-border-color-var: '--button-hover-border-color' !default;
$button-group-border-color-var: '--button-group-border-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $base-font-size: 1rem !default; // Font sizing for all elements
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
// Check the `_input_control_mixins.scss` file to find this module's mixins.
@import 'input_control_mixins';
/* Input_control module CSS variable definitions */

21
src/mini/_layout.scss
View file

@ -31,10 +31,21 @@ $card-back-color-var: '--card-back-color' !default;
$card-border-color-var: '--card-border-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-padding: 0.5rem !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-padding-var}: $universal-padding;
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
@ -66,7 +77,6 @@ $card-border-color-var: '--card-border-color' !default;
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$size-prefix},
.#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > * {
// max-width: 100%; -- TODO: Are we certain we don't need this?
flex-grow: 1;
flex-basis: 0;
}
@ -81,7 +91,6 @@ $card-border-color-var: '--card-border-color' !default;
}
// Grid column specific definition for flexible column.
.#{$grid-column-prefix}-#{$size-prefix} {
// max-width: 100%; -- TODO: Are we certain we don't need this?
flex-grow: 1;
flex-basis: 0;
}
@ -122,7 +131,7 @@ $card-border-color-var: '--card-border-color' !default;
}
// Definitions for smaller screens.
@include generate-grid-size($grid-small-prefix);
// Definitions for mediium screens.
// Definitions for medium screens.
@media screen and (min-width: #{$grid-medium-breakpoint}){
@include generate-grid-size($grid-medium-prefix);
}

20
src/mini/_navigation.scss
View file

@ -57,6 +57,26 @@ $drawer-back-color-var: '--drawer-back-color' !default;
$drawer-border-color-var: '--drawer-border-color' !default;
$drawer-hover-back-color-var: '--drawer-hover-back-color' !default;
$drawer-close-color-var: '--drawer-close-color' !default;
// == Uncomment below code if this module is used on its own ==
//
// $universal-margin: 0.5rem !default; // Universal margin for the most elements
// $universal-padding: 0.5rem !default; // Universal padding for the most elements
// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
// $universal-box-shadow: none !default; // Universal box-shadow for most elements
// $universal-margin-var: '--universal-margin' !default;
// $universal-padding-var: '--universal-padding' !default;
// $universal-border-radius-var: '--universal-border-radius' !default;
// $universal-box-shadow-var: '--universal-box-shadow' !default;
// :root {
// #{$universal-margin-var}: $universal-margin;
// #{$universal-padding-var}: $universal-padding;
// #{$universal-border-radius-var}: $universal-border-radius;
// @if $universal-box-shadow != none {
// #{$universal-box-shadow-var}: $universal-box-shadow;
// }
// }
//
// ============================================================
/* Navigation module CSS variable definitions */
:root {
#{$header-back-color-var}: $header-back-color;