Progress module

dist/mini-default.css

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

docs/v3/DEVLOG.md

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

src/flavors/mini-default.scss

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

src/flavors/mini-doc.scss

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

src/mini/_progress.scss

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

src/mini/_progress_mixins.scss

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