mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 12:58:13 +01:00
Extra component: progress bars
This commit is contained in:
Angelos Chalaris
parent
110f62a210
commit
ae5fcc6a07
11
README.md
11
README.md
@ -19,18 +19,17 @@ A minimal Sass-y responsive mobile-first style-agnostic CSS framework.
|
||||
- **modal**: modal dialog prompts `GZIPPED SIZE`: 298 bytes
|
||||
- **dropdown**: dropdown menu for the navigation bar `GZIPPED SIZE`: 136 bytes
|
||||
- **collapse**: collapse and accordion components `GZIPPED SIZE`: 286 bytes
|
||||
- **progress**: progress bar styles `GZIPPED SIZE`: 193 bytes
|
||||
|
||||
TODO:
|
||||
- Components
|
||||
- Progress bar styles (maybe also spinners)
|
||||
- Button groups (maybe)
|
||||
- Button states (checkbox based)
|
||||
- Alerts (maybe, can use checkbox to dismiss)
|
||||
- Carousel
|
||||
- Carousel (if possible)
|
||||
- Utilities
|
||||
- Breadcrumbs
|
||||
- Panels
|
||||
- Panels, Wells & Alerts (alerts will support closing via checkbox)
|
||||
- Responsive embed and utils for Media objects
|
||||
- Hover-able styling (maybe)
|
||||
- Button states and groups (mostly for style if impemented, not much more than that)
|
||||
- Later down the line
|
||||
- A *material-design* module and/or flavor could be added
|
||||
- An alternative grid system using `flexbox` or `grid`
|
||||
|
||||
@ -154,7 +154,6 @@
|
||||
<h2 id="extra-modules">Extra modules</h2><hr>
|
||||
<p>Coming soon! <small>In the meantime, why don't you check out the framework's <a href="https://github.com/Chalarangelo/mini.css">Github page</a>?</small></p>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1359,3 +1359,54 @@ input[type="radio"]:checked.acrd + label {
|
||||
margin-bottom: 0; }
|
||||
input[type="radio"]:checked.acrd + label + div {
|
||||
display: block; }
|
||||
|
||||
/*
|
||||
Mixin for the progress element.
|
||||
Parameters:
|
||||
- $progress-name : The class name of the progress wrapper.
|
||||
- $progress-height : The height of the progress wrapper.
|
||||
- $progress-border-radius : The border radius of the progress wrapper.
|
||||
- $progress-bg-color : The background color of the progress wrapper. [1]
|
||||
- $progress-font-size : The font size of the progress bar's text (if any).
|
||||
- $progress-bar-color : The progress bar's text color.
|
||||
- $progress-bar-bg-color : The progress bar's background color.
|
||||
Notes:
|
||||
- [1] : The background color of the progress wrapper should be a different color than the
|
||||
page's background to make sure that it is visible.
|
||||
- [2] : This only creates a basic progress style. For more progress bar styles use `make-progress-bar-variant`.
|
||||
*/
|
||||
/*
|
||||
Mixin for progress bar styles.
|
||||
Parameters:
|
||||
- $progress-name : The class name of the progress wrapper. [1]
|
||||
- $progress-bar-variant-name : The class name of the progress bar variant.
|
||||
- $progress-bar-variant-color : The progress bar variant's text color.
|
||||
- $progress-bar-variant-bg-coor : The progress bar variant's background color.
|
||||
Notes:
|
||||
- [1] : The name of $progress-name should match the one specified in `make-progress` for the
|
||||
progress bar variant to work correctly.
|
||||
- [2] : This mixin should be used in combination with `make-progress` and is suggested that you
|
||||
use it after `make-progress`.
|
||||
*/
|
||||
.prg {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
background-color: #d7d7d7;
|
||||
border-radius: 4px; }
|
||||
.prg > span {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: #3f84b3;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
color: #eeeeee; }
|
||||
|
||||
.prg > span.green {
|
||||
background-color: #2db747;
|
||||
color: #eeeeee; }
|
||||
|
||||
.prg > span.red {
|
||||
background-color: #ea4848;
|
||||
color: #eeeeee; }
|
||||
|
||||
2
flavors/mini-default.min.css
vendored
2
flavors/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@ -331,4 +331,27 @@ $accordion-label-bg-color: $collapse-bg-color; // Background color for t
|
||||
// Use collapse and accordion mixins to create components wit the given specs.
|
||||
// For more information refer to the _collapse.scss file to check the definitions.
|
||||
@include make-collapse($collapse-class-name, $collapse-border, 4px, 10px, 5px, $collapse-color, $collapse-bg-color);
|
||||
@include make-accordion($accordion-class-name, $accordion-border, 4px, 10px, 5px, $accordion-color, $accordion-bg-color, $accordion-label-color, $accordion-label-bg-color, 8px, 'darken', 7.5%);
|
||||
@include make-accordion($accordion-class-name, $accordion-border, 4px, 10px, 5px, $accordion-color, $accordion-bg-color, $accordion-label-color, $accordion-label-bg-color, 8px, 'darken', 7.5%);
|
||||
//====================================================================
|
||||
// Variable definitions for the Progress module (_progress.scss)
|
||||
//====================================================================
|
||||
// Progress and progress variants class names.
|
||||
$progress-class-name: prg; // Name for the progress class
|
||||
$progress-bar-style1-name: 'green'; // Name for the progress bar style 1 class
|
||||
$progress-bar-style2-name: 'red'; // Name for the progress bar style 2 class
|
||||
// Progress and p progress variants colors (you can remove things you
|
||||
// don't need or define more colors if you need them).
|
||||
$progress-bg-color: #d7d7d7; // Background color for the progress bar container
|
||||
$progress-bar-color: $btn-alt-color; // Color for the text of the progress bar
|
||||
$progress-bar-style1-color: $btn-alt-color; // Color for the text of the style 1 progress bar
|
||||
$progress-bar-style2-color: $btn-alt-color; // Color for the text of the style 2 progress bar
|
||||
$progress-bar-bg-color: $btn-b-bg-color; // Background color for the progress bar
|
||||
$progress-bar-style1-bg-color: $btn-g-bg-color; // Background color for the style 1 progress bar
|
||||
$progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for the style 2 progress bar
|
||||
// Enable progress (_progress.scss). (Use individual mixins below to use.)
|
||||
@import '../scss/mini-extra/progress';
|
||||
// Use progress mixins to create progress bars with given specs. For more
|
||||
// information refer to the _progress.scss file to check the definitions.
|
||||
@include make-progress($progress-class-name, 20px, 4px, $progress-bg-color, 0.8em, $progress-bar-color, $progress-bar-bg-color);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
||||
@ -331,4 +331,27 @@ $accordion-label-bg-color: $collapse-bg-color; // Background color for t
|
||||
// Use collapse and accordion mixins to create components wit the given specs.
|
||||
// For more information refer to the _collapse.scss file to check the definitions.
|
||||
@include make-collapse($collapse-class-name, $collapse-border, 4px, 10px, 5px, $collapse-color, $collapse-bg-color);
|
||||
@include make-accordion($accordion-class-name, $accordion-border, 4px, 10px, 5px, $accordion-color, $accordion-bg-color, $accordion-label-color, $accordion-label-bg-color, 8px, 'darken', 7.5%);
|
||||
@include make-accordion($accordion-class-name, $accordion-border, 4px, 10px, 5px, $accordion-color, $accordion-bg-color, $accordion-label-color, $accordion-label-bg-color, 8px, 'darken', 7.5%);
|
||||
//====================================================================
|
||||
// Variable definitions for the Progress module (_progress.scss)
|
||||
//====================================================================
|
||||
// Progress and progress variants class names.
|
||||
$progress-class-name: prg; // Name for the progress class
|
||||
$progress-bar-style1-name: 'green'; // Name for the progress bar style 1 class
|
||||
$progress-bar-style2-name: 'red'; // Name for the progress bar style 2 class
|
||||
// Progress and p progress variants colors (you can remove things you
|
||||
// don't need or define more colors if you need them).
|
||||
$progress-bg-color: #d7d7d7; // Background color for the progress bar container
|
||||
$progress-bar-color: $btn-alt-color; // Color for the text of the progress bar
|
||||
$progress-bar-style1-color: $btn-alt-color; // Color for the text of the style 1 progress bar
|
||||
$progress-bar-style2-color: $btn-alt-color; // Color for the text of the style 2 progress bar
|
||||
$progress-bar-bg-color: $btn-b-bg-color; // Background color for the progress bar
|
||||
$progress-bar-style1-bg-color: $btn-g-bg-color; // Background color for the style 1 progress bar
|
||||
$progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for the style 2 progress bar
|
||||
// Enable progress (_progress.scss). (Use individual mixins below to use.)
|
||||
@import 'mini-extra/progress';
|
||||
// Use progress mixins to create progress bars with given specs. For more
|
||||
// information refer to the _progress.scss file to check the definitions.
|
||||
@include make-progress($progress-class-name, 20px, 4px, $progress-bg-color, 0.8em, $progress-bar-color, $progress-bar-bg-color);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
||||
53
scss/mini-extra/_progress.scss
Normal file
53
scss/mini-extra/_progress.scss
Normal file
@ -0,0 +1,53 @@
|
||||
/*
|
||||
Mixin for the progress element.
|
||||
Parameters:
|
||||
- $progress-name : The class name of the progress wrapper.
|
||||
- $progress-height : The height of the progress wrapper.
|
||||
- $progress-border-radius : The border radius of the progress wrapper.
|
||||
- $progress-bg-color : The background color of the progress wrapper. [1]
|
||||
- $progress-font-size : The font size of the progress bar's text (if any).
|
||||
- $progress-bar-color : The progress bar's text color.
|
||||
- $progress-bar-bg-color : The progress bar's background color.
|
||||
Notes:
|
||||
- [1] : The background color of the progress wrapper should be a different color than the
|
||||
page's background to make sure that it is visible.
|
||||
- [2] : This only creates a basic progress style. For more progress bar styles use `make-progress-bar-variant`.
|
||||
*/
|
||||
@mixin make-progress( $progress-name, $progress-height, $progress-border-radius, $progress-bg-color,
|
||||
$progress-font-size, $progress-bar-color, $progress-bar-bg-color ){
|
||||
.#{$progress-name}{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: $progress-height;
|
||||
background-color: $progress-bg-color;
|
||||
border-radius: $progress-border-radius;
|
||||
& > span{
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: $progress-bar-bg-color;
|
||||
text-align: center;
|
||||
font-size: $progress-font-size;
|
||||
color: $progress-bar-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
Mixin for progress bar styles.
|
||||
Parameters:
|
||||
- $progress-name : The class name of the progress wrapper. [1]
|
||||
- $progress-bar-variant-name : The class name of the progress bar variant.
|
||||
- $progress-bar-variant-color : The progress bar variant's text color.
|
||||
- $progress-bar-variant-bg-coor : The progress bar variant's background color.
|
||||
Notes:
|
||||
- [1] : The name of $progress-name should match the one specified in `make-progress` for the
|
||||
progress bar variant to work correctly.
|
||||
- [2] : This mixin should be used in combination with `make-progress` and is suggested that you
|
||||
use it after `make-progress`.
|
||||
*/
|
||||
@mixin make-progress-bar-variant($progress-name, $progress-bar-variant-name, $progress-bar-variant-color, $progress-bar-variant-bg-color){
|
||||
.#{$progress-name} > span.#{$progress-bar-variant-name}{
|
||||
background-color: $progress-bar-variant-bg-color;
|
||||
color: $progress-bar-variant-color;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user