mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-04-14 01:11:51 +02:00
Utility cleanup
This commit is contained in:
Angelos Chalaris
parent
3d2fac7582
commit
a3774f3c03
82
dist/mini-default.css
vendored
82
dist/mini-default.css
vendored
@ -1087,6 +1087,47 @@ progress.nano {
|
||||
progress.nano[value="100"]::-moz-progress-bar {
|
||||
border-radius: 0; }
|
||||
|
||||
.spinner-donut.tertiary {
|
||||
border: 4px solid #e8f5e9;
|
||||
border-left: 4px solid #2e7d32; }
|
||||
|
||||
.card.large {
|
||||
max-width: 480px; }
|
||||
|
||||
.card.small {
|
||||
max-width: 160px; }
|
||||
|
||||
.card.fluid {
|
||||
max-width: 100%; }
|
||||
|
||||
.card.primary {
|
||||
background: #e1f5fe;
|
||||
color: #263238;
|
||||
border: 1px solid #01579b; }
|
||||
|
||||
.card > .section.dark {
|
||||
background: #bdbdbd; }
|
||||
|
||||
.card > .section.primary {
|
||||
background: #0277bd; }
|
||||
|
||||
.card > .section.double-padded {
|
||||
padding: 12px 16px 12px; }
|
||||
|
||||
.row.cards {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around; }
|
||||
|
||||
.spinner-donut.secondary {
|
||||
border: 4px solid #ffebee;
|
||||
border-left: 4px solid #c62828; }
|
||||
|
||||
.row.cards {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around; }
|
||||
|
||||
.bordered {
|
||||
border: 1px solid rgba(0, 0, 0, 0.25) !important; }
|
||||
|
||||
@ -1134,44 +1175,3 @@ ul.breadcrumbs {
|
||||
ul.breadcrumbs > li + li:before {
|
||||
content: '\27e9';
|
||||
padding: 0.125em; }
|
||||
|
||||
.card.large {
|
||||
max-width: 480px; }
|
||||
|
||||
.card.small {
|
||||
max-width: 160px; }
|
||||
|
||||
.card.fluid {
|
||||
max-width: 100%; }
|
||||
|
||||
.card.primary {
|
||||
background: #e1f5fe;
|
||||
color: #263238;
|
||||
border: 1px solid #01579b; }
|
||||
|
||||
.card > .section.dark {
|
||||
background: #bdbdbd; }
|
||||
|
||||
.card > .section.primary {
|
||||
background: #0277bd; }
|
||||
|
||||
.card > .section.double-padded {
|
||||
padding: 12px 16px 12px; }
|
||||
|
||||
.row.cards {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around; }
|
||||
|
||||
.spinner-donut.secondary {
|
||||
border: 4px solid #ffebee;
|
||||
border-left: 4px solid #c62828; }
|
||||
|
||||
.row.cards {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around; }
|
||||
|
||||
.spinner-donut.tertiary {
|
||||
border: 4px solid #e8f5e9;
|
||||
border-left: 4px solid #2e7d32; }
|
||||
|
||||
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
@ -390,4 +390,5 @@
|
||||
- Code cleanup in `progress`. Merged `spinner` into `progress`. Removed `spinner-dot` from the `spinner` module as it was not a great component.
|
||||
- Code cleanup for `contextual`. Minor `mark` optimizations. Added `alert` mixin `make-alert-alt-style` for alternative `alert` styles.
|
||||
- Removed `spinner` file.
|
||||
- Cleanup for `navigation`.
|
||||
- Cleanup for `navigation`.
|
||||
- Cleanup for `utility`.
|
||||
@ -287,7 +287,7 @@ $alert-border-style: 1px solid #bdbdbd; // Border style for alerts
|
||||
$alert-border-radius: 2px; // Border radius for alerts
|
||||
$alert-padding: 12px 16px; // Padding for alerts
|
||||
$alert-margin: 1px 10px; // Margin for alerts
|
||||
// Variables for progress elements
|
||||
// Variables for progress elements and spinners
|
||||
$progress-back-color: #f5f5f5; // Background color for <progress>
|
||||
$progress-fore-color: #01579b; // Progress bar color for <progress>
|
||||
$progress-height: 10px; // Height of <progress>
|
||||
@ -305,18 +305,21 @@ $progress-style1-height: 2px; // Height for <progress> style 1
|
||||
$progress-style1-margin: 0 auto 1px; // 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
|
||||
// Variables for core utilities and helper classes
|
||||
$border-generic-name: 'bordered'; // Class name for generic border style
|
||||
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
||||
$border-radial-style1-radius: 2px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$float-prefix: 'float'; // Prefix for float classes
|
||||
$clearfix-name: 'clearfix'; // Class name for clearfix
|
||||
$center-block-name: 'center-block'; // Class name for center block
|
||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
$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;
|
||||
// Variables for cards [1]
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #f5f5f5; // Background color for cards
|
||||
@ -367,24 +370,20 @@ $tab-panel-padding: 6px; // Padding for tabs' panels
|
||||
$tab-panel-height: 400px; // Height for tabs' panels
|
||||
$tab-stacked-breakpoint: $grid-medium-breakpoint; // Breakpoint for tabs layout (stacked/horizontal)
|
||||
$tab-stacked-name: 'stacked'; // Class name for stacked tabs
|
||||
// Variables for utilities and helper classes
|
||||
$border-generic-name: 'bordered'; // Class name for generic border style
|
||||
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
||||
$border-radial-style1-radius: 2px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||
$hidden-name: 'hidden'; // Class name for hidden elements
|
||||
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
|
||||
$float-prefix: 'float'; // Prefix for float classes
|
||||
$clearfix-name: 'clearfix'; // Class name for clearfix
|
||||
$center-block-name: 'center-block'; // Class name for center block
|
||||
$breadcrumbs-name: 'breadcrumbs'; // Class name for breadcrumbs
|
||||
// Notes:
|
||||
// [1] - The tabs module is somewhat dependent on the grid system module.
|
||||
// Variables for spinners
|
||||
$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;
|
||||
// Enable mini.css
|
||||
@import '../mini/core';
|
||||
// Use mixins for button elements
|
||||
@ -414,16 +413,8 @@ $spinner-donut-variant2-fore-color: // Foreground color for donut spi
|
||||
@include make-progress-alt-color ($progress-variant2-name, $progress-variant2-fore-color);
|
||||
@include make-progress-alt-style ($progress-style1-name, $progress-style1-height,
|
||||
$progress-style1-margin, $progress-style1-border-style, $progress-style1-border-radius);
|
||||
// Use mixins for core utilities and helper classes
|
||||
@include make-border-generic ($border-generic-name);
|
||||
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
|
||||
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
|
||||
@include make-hidden ($hidden-name);
|
||||
@include make-visually-hidden ($visually-hidden-name);
|
||||
@include make-floats ($float-prefix);
|
||||
@include make-clearfix ($clearfix-name);
|
||||
@include make-center-block ($center-block-name);
|
||||
@include make-breadcrumbs ($breadcrumbs-name);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
|
||||
$spinner-donut-variant2-fore-color);
|
||||
// Use mixins for cards
|
||||
@include make-card-alt-size ($card-size1-name, $card-size1-width);
|
||||
@include make-card-alt-size ($card-size2-name, $card-size2-width);
|
||||
@ -439,5 +430,13 @@ $spinner-donut-variant2-fore-color: // Foreground color for donut spi
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
|
||||
$spinner-donut-variant1-fore-color);
|
||||
@include add-grid-row-cards-alignment;
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
|
||||
$spinner-donut-variant2-fore-color);
|
||||
// Use mixins for utilities and helper classes
|
||||
@include make-border-generic ($border-generic-name);
|
||||
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);
|
||||
@include make-border-radial-style ($border-radial-style2-name, $border-radial-style2-radius);
|
||||
@include make-hidden ($hidden-name);
|
||||
@include make-visually-hidden ($visually-hidden-name);
|
||||
@include make-floats ($float-prefix);
|
||||
@include make-clearfix ($clearfix-name);
|
||||
@include make-center-block ($center-block-name);
|
||||
@include make-breadcrumbs ($breadcrumbs-name);
|
||||
@ -354,6 +354,6 @@ a{
|
||||
@import 'navigation';
|
||||
@import 'contextual';
|
||||
@import 'progress';
|
||||
@import 'utility';
|
||||
@import 'card';
|
||||
@import 'tab';
|
||||
@import 'tab';
|
||||
@import 'utility';
|
||||
@ -4,76 +4,76 @@
|
||||
// Variables:
|
||||
// - $border-generic-name : The name of the class used for the generic border.
|
||||
@mixin make-border-generic ($border-generic-name) {
|
||||
.#{$border-generic-name} {
|
||||
border: 1px solid rgba(0,0,0, 0.25) !important;
|
||||
}
|
||||
.#{$border-generic-name} {
|
||||
border: 1px solid rgba(0,0,0, 0.25) !important;
|
||||
}
|
||||
}
|
||||
// Generic radial border mixin. ATTENTION: Uses !important.
|
||||
// Variables:
|
||||
// - $border-radial-name : The name of the class used for the radial border.
|
||||
// - $border-radial-radius : The border radius used for the radial border.
|
||||
@mixin make-border-radial-style ($border-radial-name, $border-radial-radius) {
|
||||
.#{$border-radial-name} {
|
||||
border-radius: $border-radial-radius !important;
|
||||
}
|
||||
.#{$border-radial-name} {
|
||||
border-radius: $border-radial-radius !important;
|
||||
}
|
||||
}
|
||||
// Hidden mixin. ATTENTION: Uses !important.
|
||||
// Variables:
|
||||
// - $hidden-name : The name of the class used for the hidden elements.
|
||||
@mixin make-hidden ($hidden-name) {
|
||||
.#{$hidden-name}{
|
||||
display: none !important;
|
||||
}
|
||||
.#{$hidden-name}{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
// Visually hidden mixin. ATTENTION: Uses !important.
|
||||
// Makes element invisible, but still accessible to screen readers.
|
||||
// Variables:
|
||||
// - $visually-hidden-name : The name of the class used for the visually hidden elements.
|
||||
@mixin make-visually-hidden ($visually-hidden-name) {
|
||||
.#{$visually-hidden-name} {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip-path: inset(100%);
|
||||
clip: rect(0 0 0 0);
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.#{$visually-hidden-name} {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
margin: -1px !important;
|
||||
border: 0 !important;
|
||||
padding: 0 !important;
|
||||
clip-path: inset(100%);
|
||||
clip: rect(0 0 0 0);
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
// Floats mixin. ATTENTION: Uses !important.
|
||||
// Variables:
|
||||
// - $float-prefix : Prefix for the class names of floats.
|
||||
@mixin make-floats ($float-prefix) {
|
||||
.#{$float-prefix}-left {
|
||||
float: left !important;
|
||||
}
|
||||
.#{$float-prefix}-right {
|
||||
float: right !important;
|
||||
}
|
||||
.#{$float-prefix}-left {
|
||||
float: left !important;
|
||||
}
|
||||
.#{$float-prefix}-right {
|
||||
float: right !important;
|
||||
}
|
||||
}
|
||||
// Clearfix mixin.
|
||||
// Variables:
|
||||
// - $clearfix-name : The name of the class used for the clearfix.
|
||||
@mixin make-clearfix ($clearfix-name) {
|
||||
.#{$clearfix-name} {
|
||||
&:before, &:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
.#{$clearfix-name} {
|
||||
&:before, &:after {
|
||||
content: ' ';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Center block mixin.
|
||||
// Variables:
|
||||
// - $center-block-name : The name of the class used for the center block.
|
||||
@mixin make-center-block ($center-block-name) {
|
||||
.#{$center-block-name} {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.#{$center-block-name} {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
// Breadcrumb mixin.
|
||||
// Variables:
|
||||
@ -81,22 +81,22 @@
|
||||
// - $use-right-angle-symbol : (Optional) Should the right angle symbol be used as a separator (`true`/`false`).
|
||||
// Value is `true` by default. If `false` a forward slash will be used.
|
||||
@mixin make-breadcrumbs ($breadcrumbs-name, $use-right-angle-symbol : true) {
|
||||
ul.#{$breadcrumbs-name} {
|
||||
list-style: none;
|
||||
& > li{
|
||||
display: inline-block;
|
||||
// Some padding is needed for the breacrumbs to appear properly. 2px should be enough.
|
||||
padding-right: 0.125em;
|
||||
& + li:before{
|
||||
@if $use-right-angle-symbol {
|
||||
content: '\27e9';
|
||||
}
|
||||
@else {
|
||||
content: '\002f';
|
||||
}
|
||||
// Some padding is needed for the breacrumbs to appear properly. 2px should be enough.
|
||||
padding: 0.125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul.#{$breadcrumbs-name} {
|
||||
list-style: none;
|
||||
& > li{
|
||||
display: inline-block;
|
||||
// Some padding is needed for the breacrumbs to appear properly. 2px should be enough.
|
||||
padding-right: 0.125em;
|
||||
& + li:before{
|
||||
@if $use-right-angle-symbol {
|
||||
content: '\27e9';
|
||||
}
|
||||
@else {
|
||||
content: '\002f';
|
||||
}
|
||||
// Some padding is needed for the breacrumbs to appear properly. 2px should be enough.
|
||||
padding: 0.125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user