diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 4dbb696..3e2be43 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -136,3 +136,12 @@ - Created mixin `make-progress-alt-style` for style variants of `progress`. - Created `nano` variant for `progress` (nanobar progress) using above mixin. - Documented mixins for `progress`, optimized etc. + + +## 20161021 + +- Created `mini-core/grid` for flexbox grid system. +- Opened relevant breaking changes issue (#16). +- Opened issue for `progress` element's transitions on value change. +- Started project for feature backlog on Github. +- Created basis for gird system container (fluid only). \ No newline at end of file diff --git a/flavors/v2/mini-default.scss b/flavors/v2/mini-default.scss index f922e75..5c47e98 100644 --- a/flavors/v2/mini-default.scss +++ b/flavors/v2/mini-default.scss @@ -85,52 +85,6 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state // elements use fade-out instead of a different // color (`true`/`false`) [9] //$link-hover-fore-color: #0288d1; // Text color for when hovered or focused -$mark-back-color: #0277bd; // Background color for -$mark-fore-color: $back-color; // Text color for -$mark-font-size: 95%; // Font size for -$mark-line-height: 1; // Line height for -$mark-padding: 1px; // Padding for -$mark-margin: 0; // Margin for -$mark-variant1-name: 'secondary'; // Class name for variant 1 -$mark-variant1-back-color: #f44336; // Background color for variant 1 -$mark-variant2-name: 'tertiary'; // Class name for variant 2 -$mark-variant2-back-color: #558b2f; // Background color for variant 2 -$mark-style1-name: 'tag'; // Class name for style 1 -$mark-style1-border-radius: 2px; // Border radius for style 1 -$mark-style1-padding: 2px; // Padding for style 1 -$mark-style2-name: 'bubble'; // Class name for style 2 -$mark-style2-border-radius: 200px; // Border radius for style 2 -$mark-style2-padding: 3px 5px; // Padding for style 2 -$progress-back-color: #f5f5f5; // Background color for -$progress-fore-color: #01579b; // Progress bar color for -$progress-height: 10px; // Height of -$progress-border-style: 0; // Border style for -$progress-border-radius: 1px; // Border radius for the container -$progress-margin: 1px auto; // Margin for -$progress-inline-name: 'inline'; // Class name for inline -$progress-inline-width: 20em; // Width for inline -$progress-variant1-name: 'secondary'; // Class name for variant 1 -$progress-variant1-fore-color: #e53935; // Progress bar color for variant 1 -$progress-variant2-name: 'tertiary'; // Class name for variant 2 -$progress-variant2-fore-color: #689f38; // Progress bar color for variant 2 -$progress-style1-name: 'nano'; // Class name for style 1 -$progress-style1-height: 2px; // Height for style 1 -$progress-style1-margin: 0 auto 1px; // Margin for style 1 -$progress-style1-border-style: 0; // Border style for style 1 -$progress-style1-border-radius: 0; // Border radius for style 1 -// Enable base -@import '../../scss/v2/core'; -// Use mixins for contextuals -@include make-mark-alt-color($mark-variant1-name, $mark-variant1-back-color); -@include make-mark-alt-color($mark-variant2-name, $mark-variant2-back-color); -@include make-mark-alt-style($mark-style1-name, $mark-style1-border-radius, $mark-style1-padding); -@include make-mark-alt-style($mark-style2-name, $mark-style2-border-radius, $mark-style2-padding); -// Use mixins for progress -@include make-progress-inline($progress-inline-name, $progress-inline-width); -@include make-progress-alt-color($progress-variant1-name, $progress-variant1-fore-color); -@include make-progress-alt-color($progress-variant2-name, $progress-variant2-fore-color); -@include make-progress-alt-style($progress-style1-name, $progress-style1-height, - $progress-style1-margin, $progress-style1-border-style, $progress-style1-border-radius) // Notes: // [1] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling // to elements manually. @@ -150,3 +104,54 @@ $progress-style1-border-radius: 0; // Border radius for st // color, as defined in $link-fore-color. // [9] - If `apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or // focused. Otherwise, the color specified in $link-hover-fore-color will be used. +// Variables for contextual background elements +$mark-back-color: #0277bd; // Background color for +$mark-fore-color: $back-color; // Text color for +$mark-font-size: 95%; // Font size for +$mark-line-height: 1; // Line height for +$mark-padding: 1px; // Padding for +$mark-margin: 0; // Margin for +$mark-variant1-name: 'secondary'; // Class name for variant 1 +$mark-variant1-back-color: #f44336; // Background color for variant 1 +$mark-variant2-name: 'tertiary'; // Class name for variant 2 +$mark-variant2-back-color: #558b2f; // Background color for variant 2 +$mark-style1-name: 'tag'; // Class name for style 1 +$mark-style1-border-radius: 2px; // Border radius for style 1 +$mark-style1-padding: 2px; // Padding for style 1 +$mark-style2-name: 'bubble'; // Class name for style 2 +$mark-style2-border-radius: 200px; // Border radius for style 2 +$mark-style2-padding: 3px 5px; // Padding for style 2 +// Variables for progress elements +$progress-back-color: #f5f5f5; // Background color for +$progress-fore-color: #01579b; // Progress bar color for +$progress-height: 10px; // Height of +$progress-border-style: 0; // Border style for +$progress-border-radius: 1px; // Border radius for the container +$progress-margin: 1px auto; // Margin for +$progress-inline-name: 'inline'; // Class name for inline +$progress-inline-width: 20em; // Width for inline +$progress-variant1-name: 'secondary'; // Class name for variant 1 +$progress-variant1-fore-color: #e53935; // Progress bar color for variant 1 +$progress-variant2-name: 'tertiary'; // Class name for variant 2 +$progress-variant2-fore-color: #689f38; // Progress bar color for variant 2 +$progress-style1-name: 'nano'; // Class name for style 1 +$progress-style1-height: 2px; // Height for style 1 +$progress-style1-margin: 0 auto 1px; // Margin for style 1 +$progress-style1-border-style: 0; // Border style for style 1 +$progress-style1-border-radius: 0; // Border radius for style 1 +// Variables for grid elements +$grid-container-name: 'container'; // Class name for the grid container +$grid-container-side-padding: 20px; // Padding for the grid container (left and right only) +// Enable base +@import '../../scss/v2/core'; +// Use mixins for contextual background elements +@include make-mark-alt-color($mark-variant1-name, $mark-variant1-back-color); +@include make-mark-alt-color($mark-variant2-name, $mark-variant2-back-color); +@include make-mark-alt-style($mark-style1-name, $mark-style1-border-radius, $mark-style1-padding); +@include make-mark-alt-style($mark-style2-name, $mark-style2-border-radius, $mark-style2-padding); +// Use mixins for progress elements +@include make-progress-inline($progress-inline-name, $progress-inline-width); +@include make-progress-alt-color($progress-variant1-name, $progress-variant1-fore-color); +@include make-progress-alt-color($progress-variant2-name, $progress-variant2-fore-color); +@include make-progress-alt-style($progress-style1-name, $progress-style1-height, + $progress-style1-margin, $progress-style1-border-style, $progress-style1-border-radius); \ No newline at end of file diff --git a/scss/v2/mini-core/_grid.scss b/scss/v2/mini-core/_grid.scss new file mode 100644 index 0000000..085c231 --- /dev/null +++ b/scss/v2/mini-core/_grid.scss @@ -0,0 +1,9 @@ +// Definitions for the grid system. +// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers. +$grid-container-name: 'container' !default; // Class name for the grid system container +$grid-side-padding: +// Fluid grid system container definition. +.#{$grid-container-name} { + margin: 0 auto; + padding: 0 $grid-side-padding; +} \ No newline at end of file