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

Grid system container

Browse source
This commit is contained in:
Angelos Chalaris 2016-10-21 11:51:18 +03:00
parent f6ee8d2cfe
commit cc56a1a3a6
3 changed files with 69 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
docs/v2/DEVLOG.md
View file

@ -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).

97
flavors/v2/mini-default.scss
View file

@ -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 <a> when hovered or focused
$mark-back-color: #0277bd; // Background color for <mark>
$mark-fore-color: $back-color; // Text color for <mark>
$mark-font-size: 95%; // Font size for <mark>
$mark-line-height: 1; // Line height for <mark>
$mark-padding: 1px; // Padding for <mark>
$mark-margin: 0; // Margin for <mark>
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
$mark-variant1-back-color: #f44336; // Background color for <mark> variant 1
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
$mark-variant2-back-color: #558b2f; // Background color for <mark> variant 2
$mark-style1-name: 'tag'; // Class name for <mark> style 1
$mark-style1-border-radius: 2px; // Border radius for <mark> style 1
$mark-style1-padding: 2px; // Padding for <mark> style 1
$mark-style2-name: 'bubble'; // Class name for <mark> style 2
$mark-style2-border-radius: 200px; // Border radius for <mark> style 2
$mark-style2-padding: 3px 5px; // Padding for <mark> style 2
$progress-back-color: #f5f5f5; // Background color for <progress>
$progress-fore-color: #01579b; // Progress bar color for <progress>
$progress-height: 10px; // Height of <progress>
$progress-border-style: 0; // Border style for <progress>
$progress-border-radius: 1px; // Border radius for the <progress> container
$progress-margin: 1px auto; // Margin for <progress>
$progress-inline-name: 'inline'; // Class name for inline <progress>
$progress-inline-width: 20em; // Width for inline <progress>
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
$progress-variant1-fore-color: #e53935; // Progress bar color for <progress> variant 1
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
$progress-variant2-fore-color: #689f38; // Progress bar color for <progress> variant 2
$progress-style1-name: 'nano'; // Class name for <progress> style 1
$progress-style1-height: 2px; // Height for <progress> style 1
$progress-style1-margin: 0 auto 1px; // Margin for <progress> style 1
$progress-style1-border-style: 0; // Border style for <progress> style 1
$progress-style1-border-radius: 0; // Border radius for <progress> 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 <progress> 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>
$mark-fore-color: $back-color; // Text color for <mark>
$mark-font-size: 95%; // Font size for <mark>
$mark-line-height: 1; // Line height for <mark>
$mark-padding: 1px; // Padding for <mark>
$mark-margin: 0; // Margin for <mark>
$mark-variant1-name: 'secondary'; // Class name for <mark> variant 1
$mark-variant1-back-color: #f44336; // Background color for <mark> variant 1
$mark-variant2-name: 'tertiary'; // Class name for <mark> variant 2
$mark-variant2-back-color: #558b2f; // Background color for <mark> variant 2
$mark-style1-name: 'tag'; // Class name for <mark> style 1
$mark-style1-border-radius: 2px; // Border radius for <mark> style 1
$mark-style1-padding: 2px; // Padding for <mark> style 1
$mark-style2-name: 'bubble'; // Class name for <mark> style 2
$mark-style2-border-radius: 200px; // Border radius for <mark> style 2
$mark-style2-padding: 3px 5px; // Padding for <mark> style 2
// Variables for progress elements
$progress-back-color: #f5f5f5; // Background color for <progress>
$progress-fore-color: #01579b; // Progress bar color for <progress>
$progress-height: 10px; // Height of <progress>
$progress-border-style: 0; // Border style for <progress>
$progress-border-radius: 1px; // Border radius for the <progress> container
$progress-margin: 1px auto; // Margin for <progress>
$progress-inline-name: 'inline'; // Class name for inline <progress>
$progress-inline-width: 20em; // Width for inline <progress>
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
$progress-variant1-fore-color: #e53935; // Progress bar color for <progress> variant 1
$progress-variant2-name: 'tertiary'; // Class name for <progress> variant 2
$progress-variant2-fore-color: #689f38; // Progress bar color for <progress> variant 2
$progress-style1-name: 'nano'; // Class name for <progress> style 1
$progress-style1-height: 2px; // Height for <progress> style 1
$progress-style1-margin: 0 auto 1px; // Margin for <progress> style 1
$progress-style1-border-style: 0; // Border style for <progress> style 1
$progress-style1-border-radius: 0; // Border radius for <progress> 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);

9
scss/v2/mini-core/_grid.scss Normal file
View file

@ -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;
}