1
0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-10-28 11:35:13 +01:00
Files
mini-css/dist/mini-default.css
Angelos Chalaris a45ae848f8 Mixins for buttons
Added mixins for buttons, allowing for button variants to be added.
2017-11-07 17:34:56 +02:00

772 lines
14 KiB
CSS

@charset "UTF-8";
/*
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v3.0.0-alpha.1
*/
/*
Browsers resets and base typography.
*/
/* Core module CSS variable definitions */
:root {
--fore-color: #111;
--secondary-fore-color: #444;
--back-color: #f8f8f8;
--secondary-back-color: #f0f0f0;
--blockquote-color: #f57c00;
--pre-color: #1565c0;
--border-color: #aaa;
--secondary-border-color: #ddd;
--heading-ratio: 1.19;
--universal-margin: 0.5rem;
--universal-padding: 0.5rem;
--universal-border-radius: 0.125rem;
--a-link-color: #0277bd;
--a-visited-color: #01579b;
}
html {
font-size: 16px;
}
a, b, del, em, i, ins, q, span, strong, u {
font-size: 1em;
}
html, * {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
}
* {
font-size: 1rem;
}
body {
margin: 0;
color: var(--fore-color);
background: var(--back-color);
}
details {
display: block;
}
summary {
display: list-item;
}
abbr[title] {
border-bottom: none;
text-decoration: underline dotted;
}
input {
overflow: visible;
}
img {
max-width: 100%;
height: auto;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
margin: calc(1.5 * var(--universal-margin)) var(--universal-margin);
font-weight: 500;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
color: var(--secondary-fore-color);
display: block;
margin-top: -0.25rem;
}
h1 {
font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
}
h2 {
font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
}
h3 {
font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
}
h4 {
font-size: calc(1rem * var(--heading-ratio));
}
h5 {
font-size: 1rem;
}
h6 {
font-size: calc(1rem / var(--heading-ratio));
}
p {
margin: var(--universal-margin);
}
ol, ul {
margin: var(--universal-margin);
padding-left: calc(2 * var(--universal-margin));
}
b, strong {
font-weight: 700;
}
hr {
box-sizing: content-box;
border: 0;
line-height: 1.25em;
margin: var(--universal-margin);
height: 0.0625rem;
background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
}
blockquote {
display: block;
position: relative;
font-style: italic;
color: var(--secondary-fore-color);
margin: var(--universal-margin);
padding: calc(3 * var(--universal-padding));
border: 0.0625rem solid var(--secondary-border-color);
border-left: 0.375rem solid var(--blockquote-color);
border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
}
blockquote:before {
position: absolute;
top: calc(0rem - var(--universal-padding));
left: 0;
font-family: sans-serif;
font-size: 3rem;
font-weight: 700;
content: "\201c";
color: var(--blockquote-color);
}
blockquote[cite]:after {
font-style: normal;
font-size: 0.75em;
font-weight: 700;
content: "\a— " attr(cite);
white-space: pre;
}
code, kbd, pre, samp {
font-family: Menlo, Consolas, monospace;
font-size: 0.85em;
}
code {
background: var(--secondary-back-color);
border-radius: var(--universal-border-radius);
padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
}
kbd {
background: var(--fore-color);
color: var(--back-color);
border-radius: var(--universal-border-radius);
padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
}
pre {
overflow: auto;
background: var(--secondary-back-color);
padding: calc(1.5 * var(--universal-padding));
margin: var(--universal-margin);
border: 0.0625rem solid var(--secondary-border-color);
border-left: 0.25rem solid var(--pre-color);
border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
}
sup, sub, code, kbd {
line-height: 0;
position: relative;
vertical-align: baseline;
}
small, sup, sub, figcaption {
font-size: 0.75em;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
figcaption {
color: var(--secondary-fore-color);
}
a {
text-decoration: none;
}
a:link {
color: var(--a-link-color);
}
a:visited {
color: var(--a-visited-color);
}
a:hover, a:focus {
text-decoration: underline;
}
/*
Definitions for the grid system.
*/
.container {
margin: 0 auto;
padding: 0 calc(1.5 * var(--universal-padding));
}
.row {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-flow: row wrap;
}
.col-sm,
[class^='col-sm-'],
[class^='col-sm-offset-'],
.row[class*='cols-sm-'] > * {
box-sizing: border-box;
flex: 0 0 auto;
padding: 0 calc(var(--universal-padding) / 2);
}
.col-sm,
.row.cols-sm > * {
flex-grow: 1;
flex-basis: 0;
}
.col-sm-1,
.row.cols-sm-1 > * {
flex-basis: 8.33333%;
}
.col-sm-offset-0 {
margin-left: 0;
}
.col-sm-2,
.row.cols-sm-2 > * {
flex-basis: 16.66667%;
}
.col-sm-offset-1 {
margin-left: 8.33333%;
}
.col-sm-3,
.row.cols-sm-3 > * {
flex-basis: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66667%;
}
.col-sm-4,
.row.cols-sm-4 > * {
flex-basis: 33.33333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-5,
.row.cols-sm-5 > * {
flex-basis: 41.66667%;
}
.col-sm-offset-4 {
margin-left: 33.33333%;
}
.col-sm-6,
.row.cols-sm-6 > * {
flex-basis: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66667%;
}
.col-sm-7,
.row.cols-sm-7 > * {
flex-basis: 58.33333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-8,
.row.cols-sm-8 > * {
flex-basis: 66.66667%;
}
.col-sm-offset-7 {
margin-left: 58.33333%;
}
.col-sm-9,
.row.cols-sm-9 > * {
flex-basis: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66667%;
}
.col-sm-10,
.row.cols-sm-10 > * {
flex-basis: 83.33333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-11,
.row.cols-sm-11 > * {
flex-basis: 91.66667%;
}
.col-sm-offset-10 {
margin-left: 83.33333%;
}
.col-sm-12,
.row.cols-sm-12 > * {
flex-basis: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66667%;
}
.col-sm-normal {
order: initial;
}
.col-sm-first {
order: -999;
}
.col-sm-last {
order: 999;
}
@media screen and (min-width: 768px) {
.col-md,
[class^='col-md-'],
[class^='col-md-offset-'],
.row[class*='cols-md-'] > * {
box-sizing: border-box;
flex: 0 0 auto;
padding: 0 calc(var(--universal-padding) / 2);
}
.col-md,
.row.cols-md > * {
flex-grow: 1;
flex-basis: 0;
}
.col-md-1,
.row.cols-md-1 > * {
flex-basis: 8.33333%;
}
.col-md-offset-0 {
margin-left: 0;
}
.col-md-2,
.row.cols-md-2 > * {
flex-basis: 16.66667%;
}
.col-md-offset-1 {
margin-left: 8.33333%;
}
.col-md-3,
.row.cols-md-3 > * {
flex-basis: 25%;
}
.col-md-offset-2 {
margin-left: 16.66667%;
}
.col-md-4,
.row.cols-md-4 > * {
flex-basis: 33.33333%;
}
.col-md-offset-3 {
margin-left: 25%;
}
.col-md-5,
.row.cols-md-5 > * {
flex-basis: 41.66667%;
}
.col-md-offset-4 {
margin-left: 33.33333%;
}
.col-md-6,
.row.cols-md-6 > * {
flex-basis: 50%;
}
.col-md-offset-5 {
margin-left: 41.66667%;
}
.col-md-7,
.row.cols-md-7 > * {
flex-basis: 58.33333%;
}
.col-md-offset-6 {
margin-left: 50%;
}
.col-md-8,
.row.cols-md-8 > * {
flex-basis: 66.66667%;
}
.col-md-offset-7 {
margin-left: 58.33333%;
}
.col-md-9,
.row.cols-md-9 > * {
flex-basis: 75%;
}
.col-md-offset-8 {
margin-left: 66.66667%;
}
.col-md-10,
.row.cols-md-10 > * {
flex-basis: 83.33333%;
}
.col-md-offset-9 {
margin-left: 75%;
}
.col-md-11,
.row.cols-md-11 > * {
flex-basis: 91.66667%;
}
.col-md-offset-10 {
margin-left: 83.33333%;
}
.col-md-12,
.row.cols-md-12 > * {
flex-basis: 100%;
}
.col-md-offset-11 {
margin-left: 91.66667%;
}
.col-md-normal {
order: initial;
}
.col-md-first {
order: -999;
}
.col-md-last {
order: 999;
}
}
@media screen and (min-width: 1280px) {
.col-lg,
[class^='col-lg-'],
[class^='col-lg-offset-'],
.row[class*='cols-lg-'] > * {
box-sizing: border-box;
flex: 0 0 auto;
padding: 0 calc(var(--universal-padding) / 2);
}
.col-lg,
.row.cols-lg > * {
flex-grow: 1;
flex-basis: 0;
}
.col-lg-1,
.row.cols-lg-1 > * {
flex-basis: 8.33333%;
}
.col-lg-offset-0 {
margin-left: 0;
}
.col-lg-2,
.row.cols-lg-2 > * {
flex-basis: 16.66667%;
}
.col-lg-offset-1 {
margin-left: 8.33333%;
}
.col-lg-3,
.row.cols-lg-3 > * {
flex-basis: 25%;
}
.col-lg-offset-2 {
margin-left: 16.66667%;
}
.col-lg-4,
.row.cols-lg-4 > * {
flex-basis: 33.33333%;
}
.col-lg-offset-3 {
margin-left: 25%;
}
.col-lg-5,
.row.cols-lg-5 > * {
flex-basis: 41.66667%;
}
.col-lg-offset-4 {
margin-left: 33.33333%;
}
.col-lg-6,
.row.cols-lg-6 > * {
flex-basis: 50%;
}
.col-lg-offset-5 {
margin-left: 41.66667%;
}
.col-lg-7,
.row.cols-lg-7 > * {
flex-basis: 58.33333%;
}
.col-lg-offset-6 {
margin-left: 50%;
}
.col-lg-8,
.row.cols-lg-8 > * {
flex-basis: 66.66667%;
}
.col-lg-offset-7 {
margin-left: 58.33333%;
}
.col-lg-9,
.row.cols-lg-9 > * {
flex-basis: 75%;
}
.col-lg-offset-8 {
margin-left: 66.66667%;
}
.col-lg-10,
.row.cols-lg-10 > * {
flex-basis: 83.33333%;
}
.col-lg-offset-9 {
margin-left: 75%;
}
.col-lg-11,
.row.cols-lg-11 > * {
flex-basis: 91.66667%;
}
.col-lg-offset-10 {
margin-left: 83.33333%;
}
.col-lg-12,
.row.cols-lg-12 > * {
flex-basis: 100%;
}
.col-lg-offset-11 {
margin-left: 91.66667%;
}
.col-lg-normal {
order: initial;
}
.col-lg-first {
order: -999;
}
.col-lg-last {
order: 999;
}
}
/*
Definitions for forms and input elements.
*/
/* Input_control module CSS variable definitions */
:root {
--input-focus-color: #0288d1;
--input-invalid-color: #d32f2f;
--button-back-color: #e2e2e2;
--button-hover-back-color: #dcdcdc;
--button-fore-color: #212121;
--button-border-color: transparent;
--button-hover-border-color: transparent;
}
form {
background: var(--secondary-back-color);
border: 0.0625rem solid var(--secondary-border-color);
border-radius: var(--universal-border-radius);
margin: var(--universal-margin);
padding: calc(2 * var(--universal-padding)) var(--universal-padding);
}
fieldset {
border: 0.0625rem solid var(--secondary-border-color);
border-radius: var(--universal-border-radius);
margin: calc(var(--universal-margin) / 4);
padding: var(--universal-padding);
}
legend {
box-sizing: border-box;
display: table;
max-width: 100%;
white-space: normal;
font-weight: 700;
padding: calc(var(--universal-padding) / 2);
}
label {
padding: calc(var(--universal-padding) / 2) var(--universal-padding);
}
.input-group {
display: inline-block;
}
.input-group.fluid {
display: flex;
align-items: center;
justify-content: center;
}
.input-group.fluid > input {
flex-grow: 1;
flex-basis: 0px;
}
@media screen and (max-width: 767px) {
.input-group.fluid {
align-items: stretch;
flex-direction: column;
}
}
.input-group.vertical {
display: flex;
align-items: stretch;
flex-direction: column;
}
.input-group.vertical > input {
flex-grow: 1;
flex-basis: 0px;
}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
[type="password"], [type="url"], [type="tel"], textarea, select {
box-sizing: border-box;
background: var(--back-color);
color: var(--fore-color);
border: 0.0625rem solid var(--secondary-border-color);
border-radius: var(--universal-border-radius);
margin: calc(var(--universal-margin) / 2);
padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus {
border-color: var(--input-focus-color);
box-shadow: none;
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid {
border-color: var(--input-invalid-color);
box-shadow: none;
}
input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] {
background: var(--secondary-back-color);
}
select {
max-width: 100%;
}
option {
overflow: hidden;
text-overflow: ellipsis;
}
:placeholder-shown {
color: var(--fore-color);
}
::-ms-placeholder {
color: var(--fore-color);
opacity: 0.54;
}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button, html [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
button {
overflow: visible;
text-transform: none;
}
button, [type="button"], [type="submit"], [type="reset"],
a.button, label.button, .button,
a[role="button"], label[role="button"], [role="button"] {
display: inline-block;
background: var(--button-back-color);
color: var(--button-fore-color);
border: 0.0625rem solid var(--button-border-color);
border-radius: var(--universal-border-radius);
padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
margin: var(--universal-margin);
text-decoration: none;
cursor: pointer;
transition: background 0.3s;
}
button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus,
a.button:hover,
a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
a[role="button"]:hover,
a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
background: var(--button-hover-back-color);
border-color: var(--button-hover-border-color);
}
input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] {
cursor: not-allowed;
opacity: 0.75;
}