mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-09-03 10:53:23 +02:00
Core restructure to move imports to the flavor files, mixin usage changed inside flavor files, updated doc pages and live version files
This commit is contained in:
Angelos Chalaris
348
dist/mini-default.css
vendored
348
dist/mini-default.css
vendored
@@ -2,7 +2,7 @@
|
||||
/*
|
||||
Flavor name: Default (mini-default)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
mini.css version: v2.0.0 (Fermion)
|
||||
mini.css version: v2.0.1 (Fermion)
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
@@ -817,6 +817,61 @@ input[type="file"] {
|
||||
background: #212121;
|
||||
content: ''; }
|
||||
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
button.primary, [type="button"].primary, [type="submit"].primary,
|
||||
[type="reset"].primary, .button.primary {
|
||||
background: rgba(2, 119, 189, 0.9);
|
||||
color: #fafafa; }
|
||||
button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
|
||||
[type="reset"].primary:hover,
|
||||
[type="reset"].primary:active,
|
||||
[type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus {
|
||||
background: #0277bd; }
|
||||
|
||||
button.secondary, [type="button"].secondary, [type="submit"].secondary,
|
||||
[type="reset"].secondary, .button.secondary {
|
||||
background: rgba(198, 40, 40, 0.85);
|
||||
color: #fafafa; }
|
||||
button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus,
|
||||
[type="reset"].secondary:hover,
|
||||
[type="reset"].secondary:active,
|
||||
[type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus {
|
||||
background: #c62828; }
|
||||
|
||||
button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
|
||||
[type="reset"].tertiary, .button.tertiary {
|
||||
background: rgba(85, 139, 47, 0.85);
|
||||
color: #fafafa; }
|
||||
button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:active, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:active, [type="submit"].tertiary:focus,
|
||||
[type="reset"].tertiary:hover,
|
||||
[type="reset"].tertiary:active,
|
||||
[type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus {
|
||||
background: #558b2f; }
|
||||
|
||||
button.inverse, [type="button"].inverse, [type="submit"].inverse,
|
||||
[type="reset"].inverse, .button.inverse {
|
||||
background: #212121;
|
||||
color: #fafafa; }
|
||||
button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus,
|
||||
[type="reset"].inverse:hover,
|
||||
[type="reset"].inverse:active,
|
||||
[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus {
|
||||
background: rgba(33, 33, 33, 0.9); }
|
||||
|
||||
button.small, [type="button"].small, [type="submit"].small,
|
||||
[type="reset"].small, .button.small {
|
||||
border-radius: 1px;
|
||||
padding: 4px 6px;
|
||||
margin: 6px 8px; }
|
||||
|
||||
button.large, [type="button"].large, [type="submit"].large,
|
||||
[type="reset"].large, .button.large {
|
||||
border-radius: 4px;
|
||||
padding: 12px 18px;
|
||||
margin: 10px 8px; }
|
||||
|
||||
/*
|
||||
Definitions for the responsive table component.
|
||||
*/
|
||||
@@ -1038,6 +1093,37 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
@media (min-width: 320px) {
|
||||
.card {
|
||||
max-width: 320px; } }
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@media (min-width: 480px) {
|
||||
.card.large {
|
||||
max-width: 480px; } }
|
||||
@media (min-width: 240px) {
|
||||
.card.small {
|
||||
max-width: 240px; } }
|
||||
.card.fluid {
|
||||
max-width: 100%;
|
||||
width: auto; }
|
||||
|
||||
.card.inverse {
|
||||
background: #212121;
|
||||
color: #fafafa;
|
||||
border: 1px solid #424242; }
|
||||
.card.inverse > .section {
|
||||
border-bottom: 1px solid #616161; }
|
||||
.card.inverse > .section:last-child {
|
||||
border-bottom: 0; }
|
||||
|
||||
.card > .section.dark {
|
||||
background: #e0e0e0; }
|
||||
|
||||
.card > .section.darker {
|
||||
background: #bdbdbd; }
|
||||
|
||||
.card > .section.double-padded {
|
||||
padding: 10px 12px 10px; }
|
||||
|
||||
/*
|
||||
Definitions for tabs/horizontal accordions.
|
||||
*/
|
||||
@@ -1199,6 +1285,37 @@ mark {
|
||||
-webkit-animation: alert-anim 6s linear infinite;
|
||||
animation: alert-anim 6s linear infinite; }
|
||||
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
mark.secondary {
|
||||
background: #f44336; }
|
||||
|
||||
mark.tertiary {
|
||||
background: #558b2f; }
|
||||
|
||||
mark.tag {
|
||||
border-radius: 200px;
|
||||
padding: 4px 8px; }
|
||||
|
||||
mark.inline-block {
|
||||
font-size: 100%;
|
||||
line-height: 1.35;
|
||||
padding: 5px; }
|
||||
|
||||
.alert.urgent {
|
||||
background: #ffca28; }
|
||||
|
||||
.alert.critical {
|
||||
background: #b71c1c;
|
||||
color: #fafafa; }
|
||||
|
||||
.alert.urgent {
|
||||
border: 1px solid #ff8f00; }
|
||||
|
||||
.alert.critical {
|
||||
border: 1px solid #d50000; }
|
||||
|
||||
/*
|
||||
Definitions for progress elements and spinners.
|
||||
*/
|
||||
@@ -1256,6 +1373,62 @@ progress {
|
||||
-webkit-animation: spinner-donut-anim 1.2s linear infinite;
|
||||
animation: spinner-donut-anim 1.2s linear infinite; }
|
||||
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
*/
|
||||
progress.inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 60%; }
|
||||
|
||||
progress.secondary {
|
||||
color: #e53935; }
|
||||
progress.secondary::-webkit-progress-value {
|
||||
background: #e53935; }
|
||||
progress.secondary::-moz-progress-bar {
|
||||
background: #e53935; }
|
||||
|
||||
progress.tertiary {
|
||||
color: #689f38; }
|
||||
progress.tertiary::-webkit-progress-value {
|
||||
background: #689f38; }
|
||||
progress.tertiary::-moz-progress-bar {
|
||||
background: #689f38; }
|
||||
|
||||
progress.nano {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
border-radius: 0; }
|
||||
progress.nano::-webkit-progress-value {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0; }
|
||||
progress.nano::-moz-progress-bar {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0; }
|
||||
progress.nano[value="1000"]::-webkit-progress-value {
|
||||
border-radius: 0; }
|
||||
progress.nano[value="1000"]::-moz-progress-bar {
|
||||
border-radius: 0; }
|
||||
|
||||
@supports (width: calc(100% - 2*0)) or (width: -webkit-calc(100% - 2*0)) {
|
||||
progress.nano {
|
||||
width: -webkit-calc(100% - 2*0);
|
||||
width: calc(100% - 2*0);
|
||||
margin: 0 0; } }
|
||||
.spinner-donut.secondary {
|
||||
border: 4px solid #ffebee;
|
||||
border-left: 4px solid #c62828; }
|
||||
|
||||
.spinner-donut.tertiary {
|
||||
border: 4px solid #e8f5e9;
|
||||
border-left: 4px solid #2e7d32; }
|
||||
|
||||
.spinner-donut.large {
|
||||
border-width: 6px;
|
||||
width: 32px;
|
||||
height: 32px; }
|
||||
|
||||
/*
|
||||
Definitions for utilities and helper classes.
|
||||
*/
|
||||
@@ -1359,179 +1532,6 @@ ul.breadcrumbs {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important; }
|
||||
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
button.primary, [type="button"].primary, [type="submit"].primary,
|
||||
[type="reset"].primary, .button.primary {
|
||||
background: rgba(2, 119, 189, 0.9);
|
||||
color: #fafafa; }
|
||||
button.primary:hover, button.primary:active, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:active, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:active, [type="submit"].primary:focus,
|
||||
[type="reset"].primary:hover,
|
||||
[type="reset"].primary:active,
|
||||
[type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus {
|
||||
background: #0277bd; }
|
||||
|
||||
button.secondary, [type="button"].secondary, [type="submit"].secondary,
|
||||
[type="reset"].secondary, .button.secondary {
|
||||
background: rgba(198, 40, 40, 0.85);
|
||||
color: #fafafa; }
|
||||
button.secondary:hover, button.secondary:active, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:active, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:active, [type="submit"].secondary:focus,
|
||||
[type="reset"].secondary:hover,
|
||||
[type="reset"].secondary:active,
|
||||
[type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus {
|
||||
background: #c62828; }
|
||||
|
||||
button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
|
||||
[type="reset"].tertiary, .button.tertiary {
|
||||
background: rgba(85, 139, 47, 0.85);
|
||||
color: #fafafa; }
|
||||
button.tertiary:hover, button.tertiary:active, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:active, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:active, [type="submit"].tertiary:focus,
|
||||
[type="reset"].tertiary:hover,
|
||||
[type="reset"].tertiary:active,
|
||||
[type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus {
|
||||
background: #558b2f; }
|
||||
|
||||
button.inverse, [type="button"].inverse, [type="submit"].inverse,
|
||||
[type="reset"].inverse, .button.inverse {
|
||||
background: #212121;
|
||||
color: #fafafa; }
|
||||
button.inverse:hover, button.inverse:active, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:active, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:active, [type="submit"].inverse:focus,
|
||||
[type="reset"].inverse:hover,
|
||||
[type="reset"].inverse:active,
|
||||
[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus {
|
||||
background: rgba(33, 33, 33, 0.9); }
|
||||
|
||||
button.small, [type="button"].small, [type="submit"].small,
|
||||
[type="reset"].small, .button.small {
|
||||
border-radius: 1px;
|
||||
padding: 4px 6px;
|
||||
margin: 6px 8px; }
|
||||
|
||||
button.large, [type="button"].large, [type="submit"].large,
|
||||
[type="reset"].large, .button.large {
|
||||
border-radius: 4px;
|
||||
padding: 12px 18px;
|
||||
margin: 10px 8px; }
|
||||
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@media (min-width: 480px) {
|
||||
.card.large {
|
||||
max-width: 480px; } }
|
||||
@media (min-width: 240px) {
|
||||
.card.small {
|
||||
max-width: 240px; } }
|
||||
.card.fluid {
|
||||
max-width: 100%;
|
||||
width: auto; }
|
||||
|
||||
.card.inverse {
|
||||
background: #212121;
|
||||
color: #fafafa;
|
||||
border: 1px solid #424242; }
|
||||
.card.inverse > .section {
|
||||
border-bottom: 1px solid #616161; }
|
||||
.card.inverse > .section:last-child {
|
||||
border-bottom: 0; }
|
||||
|
||||
.card > .section.dark {
|
||||
background: #e0e0e0; }
|
||||
|
||||
.card > .section.darker {
|
||||
background: #bdbdbd; }
|
||||
|
||||
.card > .section.double-padded {
|
||||
padding: 10px 12px 10px; }
|
||||
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
mark.secondary {
|
||||
background: #f44336; }
|
||||
|
||||
mark.tertiary {
|
||||
background: #558b2f; }
|
||||
|
||||
mark.tag {
|
||||
border-radius: 200px;
|
||||
padding: 4px 8px; }
|
||||
|
||||
mark.inline-block {
|
||||
font-size: 100%;
|
||||
line-height: 1.35;
|
||||
padding: 5px; }
|
||||
|
||||
.alert.urgent {
|
||||
background: #ffca28; }
|
||||
|
||||
.alert.critical {
|
||||
background: #b71c1c;
|
||||
color: #fafafa; }
|
||||
|
||||
.alert.urgent {
|
||||
border: 1px solid #ff8f00; }
|
||||
|
||||
.alert.critical {
|
||||
border: 1px solid #d50000; }
|
||||
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
*/
|
||||
progress.inline {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 60%; }
|
||||
|
||||
progress.secondary {
|
||||
color: #e53935; }
|
||||
progress.secondary::-webkit-progress-value {
|
||||
background: #e53935; }
|
||||
progress.secondary::-moz-progress-bar {
|
||||
background: #e53935; }
|
||||
|
||||
progress.tertiary {
|
||||
color: #689f38; }
|
||||
progress.tertiary::-webkit-progress-value {
|
||||
background: #689f38; }
|
||||
progress.tertiary::-moz-progress-bar {
|
||||
background: #689f38; }
|
||||
|
||||
progress.nano {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
border-radius: 0; }
|
||||
progress.nano::-webkit-progress-value {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0; }
|
||||
progress.nano::-moz-progress-bar {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0; }
|
||||
progress.nano[value="1000"]::-webkit-progress-value {
|
||||
border-radius: 0; }
|
||||
progress.nano[value="1000"]::-moz-progress-bar {
|
||||
border-radius: 0; }
|
||||
|
||||
@supports (width: calc(100% - 2*0)) or (width: -webkit-calc(100% - 2*0)) {
|
||||
progress.nano {
|
||||
width: -webkit-calc(100% - 2*0);
|
||||
width: calc(100% - 2*0);
|
||||
margin: 0 0; } }
|
||||
.spinner-donut.secondary {
|
||||
border: 4px solid #ffebee;
|
||||
border-left: 4px solid #c62828; }
|
||||
|
||||
.spinner-donut.tertiary {
|
||||
border: 4px solid #e8f5e9;
|
||||
border-left: 4px solid #2e7d32; }
|
||||
|
||||
.spinner-donut.large {
|
||||
border-width: 6px;
|
||||
width: 32px;
|
||||
height: 32px; }
|
||||
|
||||
/*
|
||||
Custom elements for utilities and helper classes.
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user