mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-04-13 00:41:51 +02:00
Progress module
This commit is contained in:
Angelos Chalaris
parent
e0b880f419
commit
154a69d1cf
106
dist/mini-default.css
vendored
106
dist/mini-default.css
vendored
@ -1574,3 +1574,109 @@ mark.tag {
|
||||
padding: calc(var(--universal-padding)/2) var(--universal-padding);
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
Definitions for progress elements and spinners.
|
||||
*/
|
||||
/* Progess module CSS variable definitions */
|
||||
:root {
|
||||
--progress-back-color: #ddd;
|
||||
--progress-fore-color: #555;
|
||||
}
|
||||
|
||||
progress {
|
||||
display: block;
|
||||
vertical-align: baseline;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: 0.75rem;
|
||||
width: calc(100% - 2 * var(--universal-margin));
|
||||
margin: var(--universal-margin);
|
||||
border: 0;
|
||||
border-radius: calc(2 * var(--universal-border-radius));
|
||||
background: var(--progress-back-color);
|
||||
color: var(--progress-fore-color);
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background: var(--progress-fore-color);
|
||||
border-top-left-radius: calc(2 * var(--universal-border-radius));
|
||||
border-bottom-left-radius: calc(2 * var(--universal-border-radius));
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
background: var(#ddd);
|
||||
}
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
background: var(--progress-fore-color);
|
||||
border-top-left-radius: calc(2 * var(--universal-border-radius));
|
||||
border-bottom-left-radius: calc(2 * var(--universal-border-radius));
|
||||
}
|
||||
|
||||
progress[value="1000"]::-webkit-progress-value {
|
||||
border-radius: calc(2 * var(--universal-border-radius));
|
||||
}
|
||||
|
||||
progress[value="1000"]::-moz-progress-bar {
|
||||
border-radius: calc(2 * var(--universal-border-radius));
|
||||
}
|
||||
|
||||
progress.inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
:root {
|
||||
--spinner-back-color: #ddd;
|
||||
--spinner-fore-color: #555;
|
||||
}
|
||||
|
||||
@keyframes spinner-donut-anim {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
margin: var(--universal-margin);
|
||||
border: 0.25rem solid var(--spinner-back-color);
|
||||
border-left: 0.25rem solid var(--spinner-fore-color);
|
||||
border-radius: 50%;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
animation: spinner-donut-anim 1.2s linear infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
Custom elements for progress bars and spinners.
|
||||
*/
|
||||
progress.primary {
|
||||
--progress-fore-color: #1976d2;
|
||||
}
|
||||
|
||||
progress.secondary {
|
||||
--progress-fore-color: #d32f2f;
|
||||
}
|
||||
|
||||
progress.tertiary {
|
||||
--progress-fore-color: #308732;
|
||||
}
|
||||
|
||||
.spinner.primary {
|
||||
--spinner-fore-color: #1976d2;
|
||||
}
|
||||
|
||||
.spinner.secondary {
|
||||
--spinner-fore-color: #d32f2f;
|
||||
}
|
||||
|
||||
.spinner.tertiary {
|
||||
--spinner-fore-color: #308732;
|
||||
}
|
||||
|
||||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@ -239,3 +239,12 @@
|
||||
|
||||
- Documented `.modal`.
|
||||
- Documented `.collapse`.
|
||||
|
||||
## 20171229
|
||||
|
||||
- Coded `progress` module. Everything is pretty much the same as before.
|
||||
- Renamed `.spinner-donut` to `.spinner`.
|
||||
- Added a default variant to `progress` and `.spinner`, so that we can have `.primary`, `.secondary` and `.tertiary`.
|
||||
- Added alternative color mixins for `progress` and `.spinner`.
|
||||
- Removed size variants and the inline variant mixin from `progress` and `.spinner`.
|
||||
- Updated flavor file with the `progress` module and mixed-in variants.
|
||||
|
||||
@ -103,3 +103,32 @@ $mark-tag-name: 'tag'; // Class name, padding and border r
|
||||
$mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
|
||||
$mark-tag-border-radius: 1em;
|
||||
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
|
||||
|
||||
@import '../mini/progress';
|
||||
|
||||
/*
|
||||
Custom elements for progress bars and spinners.
|
||||
*/
|
||||
$progress-primary-name: 'primary'; // Class name for primary <progress> color variant.
|
||||
$progress-primary-fore-color: #1976d2; // Foreground color for primary <progress> color variant.
|
||||
@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
|
||||
|
||||
$progress-secondary-name: 'secondary'; // Class name for secondary <progress> color variant.
|
||||
$progress-secondary-fore-color: #d32f2f; // Foreground color for secondary <progress> color variant.
|
||||
@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
|
||||
|
||||
$progress-tertiary-name: 'tertiary'; // Class name for tertiary <progress> color variant.
|
||||
$progress-tertiary-fore-color: #308732; // Foreground color for tertiary <progress> color variant.
|
||||
@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
|
||||
|
||||
$spinner-donut-primary-name: 'primary'; // Class name for primary spinner donutcolor variant.
|
||||
$spinner-donut-primary-fore-color: #1976d2; // Foreground color for primary spinner donut color variant.
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
|
||||
|
||||
$spinner-donut-secondary-name: 'secondary'; // Class name for secondary spinner donut color variant.
|
||||
$spinner-donut-secondary-fore-color: #d32f2f; // Foreground color for secondary spinner donut color variant.
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
|
||||
|
||||
$spinner-donut-tertiary-name: 'tertiary'; // Class name for tertiary spinner donut color variant.
|
||||
$spinner-donut-tertiary-fore-color: #308732; // Foreground color for tertiary spinner donut color variant.
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
|
||||
|
||||
@ -97,6 +97,36 @@ $mark-tag-padding: calc(var(#{$universal-padding-var})/2) var(#{$universal-
|
||||
$mark-tag-border-radius: 1em;
|
||||
@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
|
||||
|
||||
@import '../mini/progress';
|
||||
|
||||
/*
|
||||
Custom elements for progress bars and spinners.
|
||||
*/
|
||||
$progress-primary-name: 'primary'; // Class name for primary <progress> color variant.
|
||||
$progress-primary-fore-color: #1976d2; // Foreground color for primary <progress> color variant.
|
||||
@include make-progress-alt-color ($progress-primary-name, $progress-primary-fore-color);
|
||||
|
||||
$progress-secondary-name: 'secondary'; // Class name for secondary <progress> color variant.
|
||||
$progress-secondary-fore-color: #d32f2f; // Foreground color for secondary <progress> color variant.
|
||||
@include make-progress-alt-color ($progress-secondary-name, $progress-secondary-fore-color);
|
||||
|
||||
$progress-tertiary-name: 'tertiary'; // Class name for tertiary <progress> color variant.
|
||||
$progress-tertiary-fore-color: #308732; // Foreground color for tertiary <progress> color variant.
|
||||
@include make-progress-alt-color ($progress-tertiary-name, $progress-tertiary-fore-color);
|
||||
|
||||
$spinner-donut-primary-name: 'primary'; // Class name for primary spinner donutcolor variant.
|
||||
$spinner-donut-primary-fore-color: #1976d2; // Foreground color for primary spinner donut color variant.
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-primary-name, $spinner-donut-primary-fore-color);
|
||||
|
||||
$spinner-donut-secondary-name: 'secondary'; // Class name for secondary spinner donut color variant.
|
||||
$spinner-donut-secondary-fore-color: #d32f2f; // Foreground color for secondary spinner donut color variant.
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-secondary-name, $spinner-donut-secondary-fore-color);
|
||||
|
||||
$spinner-donut-tertiary-name: 'tertiary'; // Class name for tertiary spinner donut color variant.
|
||||
$spinner-donut-tertiary-fore-color: #308732; // Foreground color for tertiary spinner donut color variant.
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-tertiary-name, $spinner-donut-tertiary-fore-color);
|
||||
|
||||
|
||||
// Custom elements for his flavor.
|
||||
|
||||
:not(.doc) {
|
||||
|
||||
113
src/mini/_progress.scss
Normal file
113
src/mini/_progress.scss
Normal file
@ -0,0 +1,113 @@
|
||||
/*
|
||||
Definitions for progress elements and spinners.
|
||||
*/
|
||||
$progress-back-color: #ddd !default; // Background color of <progress>.
|
||||
$progress-fore-color: #555 !default; // Foreground color of <progress>.
|
||||
$progress-height: 0.75rem !default; // Height of <progress>.
|
||||
$progress-max-value: 1000 !default; // Arithmetic max value of <progress> - use integer values.
|
||||
$progress-inline-name: 'inline' !default; // Class name for inline <progress> elements.
|
||||
$progress-inline-width: 60% !default; // Width of inline <progress> elements.
|
||||
$_include-spinner-donut: true !default; // [Hidden] Should spinner donuts be included? (boolean)
|
||||
$spinner-donut-name: 'spinner' !default; // Class name for spinner donuts
|
||||
$spinner-donut-size: 1.25rem !default; // Size of the spinner donuts
|
||||
$spinner-donut-border-thickness: 0.25rem !default; // Border thickness for spinner donuts
|
||||
$spinner-donut-back-color: #ddd !default; // Background color for spinner donuts
|
||||
$spinner-donut-fore-color: #555 !default; // Foreground color for spinner donuts
|
||||
// CSS variable name definitions [exercise caution if modifying these]
|
||||
$progress-back-color-var: '--progress-back-color' !default;
|
||||
$progress-fore-color-var: '--progress-fore-color' !default;
|
||||
$spinner-donut-back-color-var: '--spinner-back-color' !default;
|
||||
$spinner-donut-fore-color-var: '--spinner-fore-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-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-border-radius-var: '--universal-border-radius' !default;
|
||||
// $universal-box-shadow-var: '--universal-box-shadow' !default;
|
||||
// :root {
|
||||
// #{$universal-margin-var}: $universal-margin;
|
||||
// #{$universal-border-radius-var}: $universal-border-radius;
|
||||
// @if $universal-box-shadow != none {
|
||||
// #{$universal-box-shadow-var}: $universal-box-shadow;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// ============================================================
|
||||
// Check the `_progress_mixins.scss` file to find this module's mixins.
|
||||
@import '_progress_mixins';
|
||||
/* Progess module CSS variable definitions */
|
||||
:root {
|
||||
#{$progress-back-color-var}: $progress-back-color;
|
||||
#{$progress-fore-color-var}: $progress-fore-color;
|
||||
}
|
||||
// Default styling for progress. Use mixins for alternate styles
|
||||
progress {
|
||||
display: block;
|
||||
vertical-align: baseline; // Correct vertical alignment in some browsers.
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
height: $progress-height;
|
||||
width: calc(100% - 2 * var(#{$universal-margin-var}));
|
||||
margin: var(#{$universal-margin-var});
|
||||
border: 0; // Removes default border
|
||||
border-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
@if $universal-box-shadow != none {
|
||||
box-shadow: var(#{$universal-box-shadow-var});
|
||||
}
|
||||
background: var(#{$progress-back-color-var});
|
||||
color: var(#{$progress-fore-color-var});
|
||||
// Foreground color on webkit browsers
|
||||
&::-webkit-progress-value {
|
||||
background: var(#{$progress-fore-color-var});
|
||||
border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
}
|
||||
// Background color on webkit browser
|
||||
&::-webkit-progress-bar {
|
||||
background: var(#{$progress-back-color});
|
||||
}
|
||||
// Foreground color on Firefox
|
||||
&::-moz-progress-bar {
|
||||
background: var(#{$progress-fore-color-var});
|
||||
border-top-left-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
border-bottom-left-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
}
|
||||
&[value="#{$progress-max-value}"] {
|
||||
&::-webkit-progress-value {
|
||||
border-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
}
|
||||
&::-moz-progress-bar {
|
||||
border-radius: calc(2 * var(#{$universal-border-radius-var}));
|
||||
}
|
||||
}
|
||||
&.#{$progress-inline-name} {
|
||||
display: inline-block;
|
||||
vertical-align: middle; // Align progress bar vertically to look better with text next to it.
|
||||
width: $progress-inline-width;
|
||||
}
|
||||
}
|
||||
// Style for donut spinner
|
||||
@if $_include-spinner-donut {
|
||||
:root {
|
||||
#{$spinner-donut-back-color-var}: $spinner-donut-back-color;
|
||||
#{$spinner-donut-fore-color-var}: $spinner-donut-fore-color;
|
||||
}
|
||||
// Donut spinner animation
|
||||
@keyframes spinner-donut-anim {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg);}
|
||||
}
|
||||
.#{$spinner-donut-name} {
|
||||
display: inline-block;
|
||||
margin: var(#{$universal-margin-var});
|
||||
border: $spinner-donut-border-thickness solid var(#{$spinner-donut-back-color-var});
|
||||
border-left: $spinner-donut-border-thickness solid var(#{$spinner-donut-fore-color-var});
|
||||
border-radius: 50%;
|
||||
width: $spinner-donut-size;
|
||||
height: $spinner-donut-size;
|
||||
animation: spinner-donut-anim 1.2s linear infinite;
|
||||
}
|
||||
}
|
||||
32
src/mini/_progress_mixins.scss
Normal file
32
src/mini/_progress_mixins.scss
Normal file
@ -0,0 +1,32 @@
|
||||
// Progress module's mixin definitions are here. For the module itself
|
||||
// check `progress.scss`.
|
||||
// Progress color variant mixin:
|
||||
// $progress-alt-name: The name of the class used for the <progress> variant.
|
||||
// $progress-alt-fore-color: Foregound color for <progress> variant.
|
||||
// $progress-alt-back-color: Background color for <progress> variant.
|
||||
@mixin make-progress-alt-color ($progress-alt-name, $progress-alt-fore-color : $progress-fore-color,
|
||||
$progress-alt-back-color : $progress-back-color) {
|
||||
progress.#{$progress-alt-name} {
|
||||
@if $progress-alt-fore-color != $progress-fore-color{
|
||||
#{$progress-fore-color-var}: $progress-alt-fore-color;
|
||||
}
|
||||
@if $progress-alt-back-color != $progress-back-color {
|
||||
#{$progress-back-color-var}: $progress-alt-back-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Spinner donut color variant mixin:
|
||||
// $spinner-donut-alt-name: The name of the class used for the spinner donut variant.
|
||||
// $spinner-donut-alt-fore-color: Text color for spinner donut variant.
|
||||
// $spinner-donut-alt-back-color: Background color for spinner donut variant.
|
||||
@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-fore-color : $spinner-donut-fore-color,
|
||||
$spinner-donut-alt-back-color : $spinner-donut-back-color) {
|
||||
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
|
||||
@if $spinner-donut-alt-fore-color != $spinner-donut-fore-color{
|
||||
#{$spinner-donut-fore-color-var}: $spinner-donut-alt-fore-color;
|
||||
}
|
||||
@if $spinner-donut-alt-back-color != $spinner-donut-back-color {
|
||||
#{$spinner-donut-back-color-var}: $spinner-donut-alt-back-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user