mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-02 20:07:40 +02:00
Code Issues Releases Wiki Activity

Housekeeping for progress module

Browse Source 
Split file, added hidden variables and preprocessor error messages.
This commit is contained in:
Angelos Chalaris
2017-03-30 17:27:41 +03:00
parent afe2a54c02
commit cb1ceb37a5
6 changed files with 244 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/v2/DEVLOG.md
View File

@@ -906,3 +906,5 @@
- Updated `tab` module, adding an extra **hidden flag** `$include-stacked-tabs` for toggling `.stacked` tabs on and off, cleanup of flavor files. - Updated `tab` module, adding an extra **hidden flag** `$include-stacked-tabs` for toggling `.stacked` tabs on and off, cleanup of flavor files.
- Updated `contextual` module, splitting file and adding **hidden flag** `$include-alerts` for toggling `.alert`s on and off. Added `@error` messages in mixins in case the mixins are called without the corresponding components enabled. Should be a welcome change during compilation. - Updated `contextual` module, splitting file and adding **hidden flag** `$include-alerts` for toggling `.alert`s on and off. Added `@error` messages in mixins in case the mixins are called without the corresponding components enabled. Should be a welcome change during compilation.
- Flavor cleanup for `contextual` module. - Flavor cleanup for `contextual` module.
- Updated `progress`, splitting file and adding **hidden flag** `$include-spinner-donut` for toggling spinning donuts on and off. Added `@error` messages accordingly.
- Flavor cleanup for `progress` module's updates.

21
src/flavors/mini-default.scss
View File

@@ -465,10 +465,8 @@ $progress-variant2-name: 'tertiary'; // Class name for <progress> vari
$progress-variant2-fore-color:#689f38; // Progress bar color 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-name: 'nano'; // Class name for <progress> style 1
$progress-style1-height: 2px; // Height for <progress> style 1 $progress-style1-height: 2px; // Height for <progress> style 1
$progress-style1-top-bottom-margin: // Top and bottom margin for <progress> style 1 $progress-style1-top-bottom-margin: 0; // Top and bottom margin for <progress> style 1
0; $progress-style1-left-right-margin: 0; // Left and right margin for <progress> style 1
$progress-style1-left-right-margin: // Left and right margin for <progress> style 1
0;
$progress-style1-border-style: 0; // Border style 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 $progress-style1-border-radius: 0; // Border radius for <progress> style 1
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner $spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
@@ -477,19 +475,14 @@ $spinner-donut-back-color: #e3f2fd; // Background color for donut spin
$spinner-donut-fore-color: #1565c0; // Foreground color for donut spinner $spinner-donut-fore-color: #1565c0; // Foreground color for donut spinner
$spinner-donut-size: 20px; // Size for donut spinner $spinner-donut-size: 20px; // Size for donut spinner
$spinner-donut-variant1-name: 'secondary'; // Class name for donut spinner variant 1 $spinner-donut-variant1-name: 'secondary'; // Class name for donut spinner variant 1
$spinner-donut-variant1-back-color: // Background color for donut spinner variant 1 $spinner-donut-variant1-back-color: #ffebee; // Background color for donut spinner variant 1
#ffebee; $spinner-donut-variant1-fore-color: #c62828; // Foreground color for donut spinner variant 1
$spinner-donut-variant1-fore-color: // Foreground color for donut spinner variant 1
#c62828;
$spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2 $spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2
$spinner-donut-variant2-back-color: // Background color for donut spinner variant 2 $spinner-donut-variant2-back-color: #e8f5e9; // Background color for donut spinner variant 2
#e8f5e9; $spinner-donut-variant2-fore-color: #2e7d32; // Foreground color for donut spinner variant 2
$spinner-donut-variant2-fore-color: // Foreground color for donut spinner variant 2
#2e7d32;
$spinner-donut-style1-name: 'large'; // Class name for donut spinner style 1 $spinner-donut-style1-name: 'large'; // Class name for donut spinner style 1
$spinner-donut-style1-size: 32px; // Size for donut spinner style 1 $spinner-donut-style1-size: 32px; // Size for donut spinner style 1
$spinner-donut-style1-border-thickness: // Border thickness for donut spinner style 1 $spinner-donut-style1-border-thickness: 6px; // Border thickness for donut spinner style 1
6px;
// Variables for utilities and helper classes // Variables for utilities and helper classes
$hidden-name: 'hidden'; // Class name for hidden elements $hidden-name: 'hidden'; // Class name for hidden elements
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements $visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements

21
src/flavors/mini-sucroa.scss
View File

@@ -460,10 +460,8 @@ $progress-variant2-name: 'tertiary'; // Class name for <progress> vari
$progress-variant2-fore-color: #2b866d; // Progress bar color for <progress> variant 2 $progress-variant2-fore-color: #2b866d; // Progress bar color for <progress> variant 2
$progress-style1-name: 'nano'; // Class name for <progress> style 1 $progress-style1-name: 'nano'; // Class name for <progress> style 1
$progress-style1-height: 2px; // Height for <progress> style 1 $progress-style1-height: 2px; // Height for <progress> style 1
$progress-style1-top-bottom-margin: // Top and bottom margin for <progress> style 1 $progress-style1-top-bottom-margin: 0; // Top and bottom margin for <progress> style 1
0; $progress-style1-left-right-margin: 0; // Left and right margin for <progress> style 1
$progress-style1-left-right-margin: // Left and right margin for <progress> style 1
0;
$progress-style1-border-style: 0; // Border style 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 $progress-style1-border-radius: 0; // Border radius for <progress> style 1
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner $spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
@@ -472,19 +470,14 @@ $spinner-donut-back-color: #d6daef; // Background color for donut spin
$spinner-donut-fore-color: #6979c6; // Foreground color for donut spinner $spinner-donut-fore-color: #6979c6; // Foreground color for donut spinner
$spinner-donut-size: 20px; // Size for donut spinner $spinner-donut-size: 20px; // Size for donut spinner
$spinner-donut-variant1-name: 'secondary'; // Class name for donut spinner variant 1 $spinner-donut-variant1-name: 'secondary'; // Class name for donut spinner variant 1
$spinner-donut-variant1-back-color: // Background color for donut spinner variant 1 $spinner-donut-variant1-back-color: #f2cad3; // Background color for donut spinner variant 1
#f2cad3; $spinner-donut-variant1-fore-color: #d2405f; // Foreground color for donut spinner variant 1
$spinner-donut-variant1-fore-color: // Foreground color for donut spinner variant 1
#d2405f;
$spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2 $spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2
$spinner-donut-variant2-back-color: // Background color for donut spinner variant 2 $spinner-donut-variant2-back-color: #c5ded7; // Background color for donut spinner variant 2
#c5ded7; $spinner-donut-variant2-fore-color: #2b866d; // Foreground color for donut spinner variant 2
$spinner-donut-variant2-fore-color: // Foreground color for donut spinner variant 2
#2b866d;
$spinner-donut-style1-name: 'large'; // Class name for donut spinner style 1 $spinner-donut-style1-name: 'large'; // Class name for donut spinner style 1
$spinner-donut-style1-size: 32px; // Size for donut spinner style 1 $spinner-donut-style1-size: 32px; // Size for donut spinner style 1
$spinner-donut-style1-border-thickness: // Border thickness for donut spinner style 1 $spinner-donut-style1-border-thickness: 6px; // Border thickness for donut spinner style 1
6px;
// Variables for utilities and helper classes // Variables for utilities and helper classes
$hidden-name: 'hidden'; // Class name for hidden elements $hidden-name: 'hidden'; // Class name for hidden elements
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements $visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements

4
src/mini/_contextual.scss
View File

@@ -46,6 +46,7 @@ mark {
} }
} }
// Animation definition for animated alerts (included if wanted) // Animation definition for animated alerts (included if wanted)
@if $include-alerts { // Turn off if you want to disable the alert component.
@if $alert-include-animated { @if $alert-include-animated {
@-webkit-keyframes alert-anim { @-webkit-keyframes alert-anim {
0% { -webkit-transform: scale(1); } 0% { -webkit-transform: scale(1); }
@@ -62,7 +63,8 @@ mark {
100% { transform: scale(1); } 100% { transform: scale(1); }
} }
} }
@if $include-alerts { }
@if $include-alerts { // Turn off if you want to disable the alert component.
// Default styling for alerts. Use mixins for alternate styles // Default styling for alerts. Use mixins for alternate styles
.#{$alert-name} { .#{$alert-name} {
display: block; display: block;

141
src/mini/_progress.scss
View File

@@ -1,9 +1,12 @@
/* /*
Definitions for progress elements and spinners. Definitions for progress elements and spinners.
*/ */
// Check the `_progress_mixins.scss` file to find this module's mixins.
@import 'progress_mixins';
// Progress elements use the progress element as their base. // Progress elements use the progress element as their base.
$progress-max-value: 100 !default; // Arithmetic max value of <progress> - use integer values.
$include-spinner-donut: true !default; // [Hidden flag] Should spinner donuts be enabled? (`true`/`false`)
// Default styling for progress. Use mixins for alternate styles. // Default styling for progress. Use mixins for alternate styles.
$progress-max-value: 100 !default; // Arithmetic max value of <progress>
progress { progress {
display: block; display: block;
vertical-align: baseline; // Correct vertical alignment in certain browsers. vertical-align: baseline; // Correct vertical alignment in certain browsers.
@@ -65,104 +68,18 @@ progress {
} }
} }
} }
// Mixin for inline progress. @if $include-spinner-donut { // Turn off to disable spinner donuts.
// Variables:
// - $progress-inline-name : The name of the class used for the inline progress.
// - $progress-inline-width : The width of the inline progress.
@mixin make-progress-inline ($progress-inline-name, $progress-inline-width) {
progress.#{$progress-inline-name} {
display: inline-block;
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
@if $progress-inline-width != 100% {
width: $progress-inline-width;
}
}
}
// Mixin for alternate progress (progress color variants).
// Variables:
// - $progress-alt-name : The name of the class used for the alternate progress.
// - $progress-alt-fore-color : The progress bar color of the alternate progress.
// - $progress-alt-back-color : (Optional) The background color of the alternate progress. Defaults to the background color of the progress.
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color, $progress-alt-back-color: $progress-back-color) {
progress.#{$progress-alt-name} {
@if $progress-alt-back-color != $progress-back-color {
background: $progress-alt-back-color; // Background color of the element (IE 10+ and Firefox).
&::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-alt-back-color;
}
}
@if $progress-alt-fore-color != $progress-fore-color {
color: $progress-alt-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-alt-fore-color;
}
&::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-alt-fore-color;
}
}
}
}
// Mixin for alternate progress styles.
// Variables:
// - $progress-alt-name : The name of the class used for the alternate progress style.
// - $progress-alt-height : The height of the alternate progress style.
// - $progress-alt-top-bottom-margin : (Optional) The top and bottom margin of the alternate progress style. Defaults to the margin of the progress.
// - $progress-alt-left-right-margin : (Optional) The left and right margin of the alternate progress style. Defaults to the margin of the progress.
// - $progress-alt-border-style : (Optional) The border style of the alternate progress style. Defaults to the border style of the progress.
// - $progress-alt-border-radius : (Optional) The border radius of the alternate progress style. Defaults to the border radius of the progress.
// - $progress-alt-box-shadow : (Optional) The box shadow of the alternate progress style. Defaults to the box shadow of the progress.
@mixin make-progress-alt-style ($progress-alt-name, $progress-alt-height,
$progress-alt-top-bottom-margin : $progress-top-bottom-margin, $progress-alt-left-right-margin : $progress-left-right-margin,
$progress-alt-border-style : $progress-border-style, $progress-alt-border-radius : $progress-border-radius,
$progress-alt-box-shadow : $progress-box-shadow) {
progress.#{$progress-alt-name} {
@if $progress-alt-height != $progress-height {
height: $progress-alt-height;
}
width: 100%;
@if $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
margin: $progress-alt-top-bottom-margin auto;
}
@if $progress-alt-border-style != $progress-border-style {
border: $progress-alt-border-style;
}
@if progress-alt-border-radius != $progress-border-radius {
border-radius: $progress-alt-border-radius;
&::-webkit-progress-value {
border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius;
}
&::-moz-progress-bar {
border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius;
}
&[value="#{$progress-max-value}"] {
&::-webkit-progress-value {
border-radius: $progress-alt-border-radius;
}
&::-moz-progress-bar {
border-radius: $progress-alt-border-radius;
}
}
}
@if $progress-alt-box-shadow != $progress-box-shadow {
box-shadow: $progress-alt-box-shadow;
}
}
// Feature query that checks if the left and right margins can be applied properly.
@if $progress-alt-left-right-margin != $progress-left-right-margin and $progress-alt-left-right-margin != auto and $progress-alt-left-right-margin != 0 {
@supports (width: calc(100% - 2*#{$progress-alt-left-right-margin})) or (width: -webkit-calc(100% - 2*#{$progress-alt-left-right-margin})) {
progress.#{$progress-alt-name} {
width: -webkit-calc(100% - 2*#{$progress-alt-left-right-margin});
width: calc(100% - 2*#{$progress-alt-left-right-margin});
margin: $progress-alt-top-bottom-margin $progress-alt-left-right-margin;
}
}
}
}
// Animation definition for donut spinner // Animation definition for donut spinner
@-webkit-keyframes spinner-donut-anim { 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);} } @-webkit-keyframes spinner-donut-anim {
@keyframes spinner-donut-anim { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} } 0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg);}
}
@keyframes spinner-donut-anim {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
}
@if $include-spinner-donut { // Turn off to disable spinner donuts.
// Style for donut spinner // Style for donut spinner
.#{$spinner-donut-name} { .#{$spinner-donut-name} {
display: inline-block; display: inline-block;
@@ -174,32 +91,4 @@ progress {
-webkit-animation: spinner-donut-anim 1.2s linear infinite; -webkit-animation: spinner-donut-anim 1.2s linear infinite;
animation: spinner-donut-anim 1.2s linear infinite; animation: spinner-donut-anim 1.2s linear infinite;
} }
// Mixin for alternate donut spinner colors (spinner donut color variants).
// Variables:
// - $spinner-donut-alt-name : The name of the class used for the alternate donut spinner.
// - $spinner-donut-alt-back-color : The background color of the alternate donut spinner.
// - $spinner-donut-alt-fore-color : The foreground color of the alternate donut spinner.
@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-back-color, $spinner-donut-alt-fore-color) {
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
border: $spinner-donut-border-thickness solid $spinner-donut-alt-back-color;
border-left: $spinner-donut-border-thickness solid $spinner-donut-alt-fore-color;
}
}
// Mixin for alternate donut spinner styles (spinner donut styles variants).
// Variables:
// - $spinner-donut-alt-name : The name of the class used for the alternate donut spinner style.
// - $spinner-donut-alt-size : The size of the alternate donut spinner style.
// - $spinner-donut-alt-border-thickness : (Optional) The border thickness of the alternate donut spinner style.
// Defaults to the value of $spinner-donut-alt-border-thickness.
@mixin make-spinner-donut-alt-style ($spinner-donut-alt-name, $spinner-donut-alt-size,
$spinner-donut-alt-border-thickness : $spinner-donut-border-thickness) {
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
@if $spinner-donut-alt-border-thickness != $spinner-donut-border-thickness {
border-width: $spinner-donut-alt-border-thickness;
}
@if $spinner-donut-alt-size != $spinner-donut-size {
width: $spinner-donut-alt-size;
height: $spinner-donut-alt-size;
}
}
} }

132
src/mini/_progress_mixins.scss Normal file
View File

@@ -0,0 +1,132 @@
// Progress module's mixin definitions are here. For the module itself
// check `_progress.scss`.
// Mixin for inline progress.
// Variables:
// - $progress-inline-name : The name of the class used for the inline progress.
// - $progress-inline-width : The width of the inline progress.
@mixin make-progress-inline ($progress-inline-name, $progress-inline-width) {
progress.#{$progress-inline-name} {
display: inline-block;
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
@if $progress-inline-width != 100% {
width: $progress-inline-width;
}
}
}
// Mixin for alternate progress (progress color variants).
// Variables:
// - $progress-alt-name : The name of the class used for the alternate progress.
// - $progress-alt-fore-color : The progress bar color of the alternate progress.
// - $progress-alt-back-color : (Optional) The background color of the alternate progress. Defaults to the background color of the progress.
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color, $progress-alt-back-color: $progress-back-color) {
progress.#{$progress-alt-name} {
@if $progress-alt-back-color != $progress-back-color {
background: $progress-alt-back-color; // Background color of the element (IE 10+ and Firefox).
&::-webkit-progress-bar { // Background of the element (webkit browsers).
background: $progress-alt-back-color;
}
}
@if $progress-alt-fore-color != $progress-fore-color {
color: $progress-alt-fore-color; // Foreground of the element (IE 10+).
&::-webkit-progress-value { // Foreground of the element (webkit browsers).
background: $progress-alt-fore-color;
}
&::-moz-progress-bar { // Foreground of the element (Firefox).
background: $progress-alt-fore-color;
}
}
}
}
// Mixin for alternate progress styles.
// Variables:
// - $progress-alt-name : The name of the class used for the alternate progress style.
// - $progress-alt-height : The height of the alternate progress style.
// - $progress-alt-top-bottom-margin : (Optional) The top and bottom margin of the alternate progress style. Defaults to the margin of the progress.
// - $progress-alt-left-right-margin : (Optional) The left and right margin of the alternate progress style. Defaults to the margin of the progress.
// - $progress-alt-border-style : (Optional) The border style of the alternate progress style. Defaults to the border style of the progress.
// - $progress-alt-border-radius : (Optional) The border radius of the alternate progress style. Defaults to the border radius of the progress.
// - $progress-alt-box-shadow : (Optional) The box shadow of the alternate progress style. Defaults to the box shadow of the progress.
@mixin make-progress-alt-style ($progress-alt-name, $progress-alt-height,
$progress-alt-top-bottom-margin : $progress-top-bottom-margin, $progress-alt-left-right-margin : $progress-left-right-margin,
$progress-alt-border-style : $progress-border-style, $progress-alt-border-radius : $progress-border-radius,
$progress-alt-box-shadow : $progress-box-shadow) {
progress.#{$progress-alt-name} {
@if $progress-alt-height != $progress-height {
height: $progress-alt-height;
}
width: 100%;
@if $progress-alt-top-bottom-margin != $progress-top-bottom-margin {
margin: $progress-alt-top-bottom-margin auto;
}
@if $progress-alt-border-style != $progress-border-style {
border: $progress-alt-border-style;
}
@if progress-alt-border-radius != $progress-border-radius {
border-radius: $progress-alt-border-radius;
&::-webkit-progress-value {
border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius;
}
&::-moz-progress-bar {
border-top-left-radius: $progress-alt-border-radius;
border-bottom-left-radius: $progress-alt-border-radius;
}
&[value="#{$progress-max-value}"] {
&::-webkit-progress-value {
border-radius: $progress-alt-border-radius;
}
&::-moz-progress-bar {
border-radius: $progress-alt-border-radius;
}
}
}
@if $progress-alt-box-shadow != $progress-box-shadow {
box-shadow: $progress-alt-box-shadow;
}
}
// Feature query that checks if the left and right margins can be applied properly.
@if $progress-alt-left-right-margin != $progress-left-right-margin and $progress-alt-left-right-margin != auto and $progress-alt-left-right-margin != 0 {
@supports (width: calc(100% - 2*#{$progress-alt-left-right-margin})) or (width: -webkit-calc(100% - 2*#{$progress-alt-left-right-margin})) {
progress.#{$progress-alt-name} {
width: -webkit-calc(100% - 2*#{$progress-alt-left-right-margin});
width: calc(100% - 2*#{$progress-alt-left-right-margin});
margin: $progress-alt-top-bottom-margin $progress-alt-left-right-margin;
}
}
}
}
// Mixin for alternate donut spinner colors (spinner donut color variants).
// Variables:
// - $spinner-donut-alt-name : The name of the class used for the alternate donut spinner.
// - $spinner-donut-alt-back-color : The background color of the alternate donut spinner.
// - $spinner-donut-alt-fore-color : The foreground color of the alternate donut spinner.
@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-back-color, $spinner-donut-alt-fore-color) {
@if not ($include-spinner-donut) {
@error "Progress module's spinner donut mixins are only available if spinner donuts are enabled. Set '$include-spinner-donut' to 'true' and try again!";
}
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
border: $spinner-donut-border-thickness solid $spinner-donut-alt-back-color;
border-left: $spinner-donut-border-thickness solid $spinner-donut-alt-fore-color;
}
}
// Mixin for alternate donut spinner styles (spinner donut styles variants).
// Variables:
// - $spinner-donut-alt-name : The name of the class used for the alternate donut spinner style.
// - $spinner-donut-alt-size : The size of the alternate donut spinner style.
// - $spinner-donut-alt-border-thickness : (Optional) The border thickness of the alternate donut spinner style.
// Defaults to the value of $spinner-donut-alt-border-thickness.
@mixin make-spinner-donut-alt-style ($spinner-donut-alt-name, $spinner-donut-alt-size,
$spinner-donut-alt-border-thickness : $spinner-donut-border-thickness) {
@if not ($include-spinner-donut) {
@error "Progress module's spinner donut mixins are only available if spinner donuts are enabled. Set '$include-spinner-donut' to 'true' and try again!";
}
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
@if $spinner-donut-alt-border-thickness != $spinner-donut-border-thickness {
border-width: $spinner-donut-alt-border-thickness;
}
@if $spinner-donut-alt-size != $spinner-donut-size {
width: $spinner-donut-alt-size;
height: $spinner-donut-alt-size;
}
}
}