Housekeeping for progress module
Split file, added hidden variables and preprocessor error messages.
This commit is contained in:
Angelos Chalaris
parent
afe2a54c02
commit
cb1ceb37a5
6 changed files with 244 additions and 233 deletions
|
|
@ -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 `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.
|
||||
- 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.
|
||||
|
|
|
|||
|
|
@ -447,49 +447,42 @@ $tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
|
|||
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
|
||||
// included.
|
||||
// Variables for progress elements and spinners
|
||||
$progress-back-color: #eeeeee; // Background color for <progress>
|
||||
$progress-fore-color: #01579b; // Progress bar color for <progress>
|
||||
$progress-height: 14px; // Height of <progress>
|
||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 1px; // Border radius for the <progress> container
|
||||
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin: 8px; // Left and right margin for <progress>
|
||||
$progress-box-shadow: // Box shadow for <progress>
|
||||
$progress-back-color: #eeeeee; // Background color for <progress>
|
||||
$progress-fore-color: #01579b; // Progress bar color for <progress>
|
||||
$progress-height: 14px; // Height of <progress>
|
||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 1px; // Border radius for the <progress> container
|
||||
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin: 8px; // Left and right margin for <progress>
|
||||
$progress-box-shadow: // Box shadow for <progress>
|
||||
0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
|
||||
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
||||
$progress-inline-width: 60%; // 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-top-bottom-margin: // Top and bottom margin for <progress> style 1
|
||||
0;
|
||||
$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-radius: 0; // Border radius for <progress> style 1
|
||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||
$spinner-donut-border-thickness:4px; // Border thickness for donut spinner
|
||||
$spinner-donut-back-color: #e3f2fd; // Background color for donut spinner
|
||||
$spinner-donut-fore-color: #1565c0; // Foreground color 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-back-color: // Background color for donut spinner variant 1
|
||||
#ffebee;
|
||||
$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-back-color: // Background color for donut spinner variant 2
|
||||
#e8f5e9;
|
||||
$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-size: 32px; // Size for donut spinner style 1
|
||||
$spinner-donut-style1-border-thickness: // Border thickness for donut spinner style 1
|
||||
6px;
|
||||
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
||||
$progress-inline-width: 60%; // 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-top-bottom-margin: 0; // Top and bottom margin for <progress> style 1
|
||||
$progress-style1-left-right-margin: 0; // Left and right 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
|
||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||
$spinner-donut-border-thickness: 4px; // Border thickness for donut spinner
|
||||
$spinner-donut-back-color: #e3f2fd; // Background color for donut spinner
|
||||
$spinner-donut-fore-color: #1565c0; // Foreground color 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-back-color: #ffebee; // Background color for donut spinner variant 1
|
||||
$spinner-donut-variant1-fore-color: #c62828; // Foreground color for donut spinner variant 1
|
||||
$spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2
|
||||
$spinner-donut-variant2-back-color: #e8f5e9; // Background color for donut spinner variant 2
|
||||
$spinner-donut-variant2-fore-color: #2e7d32; // Foreground color for donut spinner variant 2
|
||||
$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-border-thickness: 6px; // Border thickness for donut spinner style 1
|
||||
// Variables for utilities and helper classes
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
|
|
|
|||
|
|
@ -442,49 +442,42 @@ $tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
|
|||
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
|
||||
// included.
|
||||
// Variables for progress elements and spinners
|
||||
$progress-back-color: #e8deff; // Background color for <progress>
|
||||
$progress-fore-color: #6979c6; // Progress bar color for <progress>
|
||||
$progress-height: 16px; // Height of <progress>
|
||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 2px; // Border radius for the <progress> container
|
||||
$progress-top-bottom-margin: 2px; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin: 10px; // Left and right margin for <progress>
|
||||
$progress-box-shadow: // Box shadow for <progress>
|
||||
$progress-back-color: #e8deff; // Background color for <progress>
|
||||
$progress-fore-color: #6979c6; // Progress bar color for <progress>
|
||||
$progress-height: 16px; // Height of <progress>
|
||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 2px; // Border radius for the <progress> container
|
||||
$progress-top-bottom-margin:2px; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin:10px; // Left and right margin for <progress>
|
||||
$progress-box-shadow: // Box shadow for <progress>
|
||||
0 0.5px 1px rgba(0,0,0, 0.1), 0 0.5px 0.5px rgba(0, 0, 0, 0.15);
|
||||
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
||||
$progress-inline-width: 60%; // Width for inline <progress>
|
||||
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
|
||||
$progress-variant1-fore-color: #d2405f; // Progress bar color for <progress> variant 1
|
||||
$progress-variant2-name: 'tertiary'; // Class name 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-height: 2px; // Height for <progress> style 1
|
||||
$progress-style1-top-bottom-margin: // Top and bottom margin for <progress> style 1
|
||||
0;
|
||||
$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-radius: 0; // Border radius for <progress> style 1
|
||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||
$spinner-donut-border-thickness:4px; // Border thickness for donut spinner
|
||||
$spinner-donut-back-color: #d6daef; // Background color for donut spinner
|
||||
$spinner-donut-fore-color: #6979c6; // Foreground color 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-back-color: // Background color for donut spinner variant 1
|
||||
#f2cad3;
|
||||
$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-back-color: // Background color for donut spinner variant 2
|
||||
#c5ded7;
|
||||
$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-size: 32px; // Size for donut spinner style 1
|
||||
$spinner-donut-style1-border-thickness: // Border thickness for donut spinner style 1
|
||||
6px;
|
||||
$progress-inline-name: 'inline'; // Class name for inline <progress>
|
||||
$progress-inline-width: 60%; // Width for inline <progress>
|
||||
$progress-variant1-name: 'secondary'; // Class name for <progress> variant 1
|
||||
$progress-variant1-fore-color: #d2405f; // Progress bar color for <progress> variant 1
|
||||
$progress-variant2-name: 'tertiary'; // Class name 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-height: 2px; // Height for <progress> style 1
|
||||
$progress-style1-top-bottom-margin: 0; // Top and bottom margin for <progress> style 1
|
||||
$progress-style1-left-right-margin: 0; // Left and right 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
|
||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||
$spinner-donut-border-thickness: 4px; // Border thickness for donut spinner
|
||||
$spinner-donut-back-color: #d6daef; // Background color for donut spinner
|
||||
$spinner-donut-fore-color: #6979c6; // Foreground color 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-back-color: #f2cad3; // Background color for donut spinner variant 1
|
||||
$spinner-donut-variant1-fore-color: #d2405f; // Foreground color for donut spinner variant 1
|
||||
$spinner-donut-variant2-name: 'tertiary'; // Class name for donut spinner variant 2
|
||||
$spinner-donut-variant2-back-color: #c5ded7; // Background color for donut spinner variant 2
|
||||
$spinner-donut-variant2-fore-color: #2b866d; // Foreground color for donut spinner variant 2
|
||||
$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-border-thickness: 6px; // Border thickness for donut spinner style 1
|
||||
// Variables for utilities and helper classes
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
|
|
|
|||
|
|
@ -46,23 +46,25 @@ mark {
|
|||
}
|
||||
}
|
||||
// Animation definition for animated alerts (included if wanted)
|
||||
@if $alert-include-animated {
|
||||
@-webkit-keyframes alert-anim {
|
||||
0% { -webkit-transform: scale(1); }
|
||||
45% { -webkit-transform: scale(1); }
|
||||
50% { -webkit-transform: scale(1.005);}
|
||||
55% { -webkit-transform: scale(1); }
|
||||
100% { -webkit-transform: scale(1); }
|
||||
}
|
||||
@keyframes alert-anim {
|
||||
0% { transform: scale(1); }
|
||||
45% { transform: scale(1); }
|
||||
50% { transform: scale(1.005);}
|
||||
55% { transform: scale(1); }
|
||||
100% { transform: scale(1); }
|
||||
@if $include-alerts { // Turn off if you want to disable the alert component.
|
||||
@if $alert-include-animated {
|
||||
@-webkit-keyframes alert-anim {
|
||||
0% { -webkit-transform: scale(1); }
|
||||
45% { -webkit-transform: scale(1); }
|
||||
50% { -webkit-transform: scale(1.005);}
|
||||
55% { -webkit-transform: scale(1); }
|
||||
100% { -webkit-transform: scale(1); }
|
||||
}
|
||||
@keyframes alert-anim {
|
||||
0% { transform: scale(1); }
|
||||
45% { transform: scale(1); }
|
||||
50% { transform: scale(1.005);}
|
||||
55% { 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
|
||||
.#{$alert-name} {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
/*
|
||||
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-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.
|
||||
$progress-max-value: 100 !default; // Arithmetic max value of <progress>
|
||||
progress {
|
||||
display: block;
|
||||
vertical-align: baseline; // Correct vertical alignment in certain browsers.
|
||||
|
|
@ -65,141 +68,27 @@ progress {
|
|||
}
|
||||
}
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $include-spinner-donut { // Turn off to disable spinner donuts.
|
||||
// Animation definition for donut spinner
|
||||
@-webkit-keyframes spinner-donut-anim { 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);} }
|
||||
@keyframes spinner-donut-anim { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }
|
||||
// Style for donut spinner
|
||||
.#{$spinner-donut-name} {
|
||||
display: inline-block;
|
||||
border: $spinner-donut-border-thickness solid $spinner-donut-back-color;
|
||||
border-left: $spinner-donut-border-thickness solid $spinner-donut-fore-color;
|
||||
border-radius: 50%;
|
||||
width: $spinner-donut-size;
|
||||
height: $spinner-donut-size;
|
||||
-webkit-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;
|
||||
@-webkit-keyframes spinner-donut-anim {
|
||||
0% { -webkit-transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg);}
|
||||
}
|
||||
@keyframes spinner-donut-anim {
|
||||
0% { transform: rotate(0deg);}
|
||||
100% { transform: rotate(360deg);}
|
||||
}
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
@if $include-spinner-donut { // Turn off to disable spinner donuts.
|
||||
// Style for donut spinner
|
||||
.#{$spinner-donut-name} {
|
||||
display: inline-block;
|
||||
border: $spinner-donut-border-thickness solid $spinner-donut-back-color;
|
||||
border-left: $spinner-donut-border-thickness solid $spinner-donut-fore-color;
|
||||
border-radius: 50%;
|
||||
width: $spinner-donut-size;
|
||||
height: $spinner-donut-size;
|
||||
-webkit-animation: spinner-donut-anim 1.2s linear infinite;
|
||||
animation: spinner-donut-anim 1.2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
132
src/mini/_progress_mixins.scss
Normal file
132
src/mini/_progress_mixins.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue