Optimization for sticky headers and footers, buttons, button groups and extensive testing
This commit is contained in:
Angelos Chalaris
parent
a8fea00c58
commit
03a9a8175b
7 changed files with 156 additions and 192 deletions
166
dist/mini-default.css
vendored
166
dist/mini-default.css
vendored
|
|
@ -621,7 +621,7 @@ a {
|
|||
-webkit-order: 999;
|
||||
order: 999; } }
|
||||
/*
|
||||
Definitions for navigation elements.
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
header {
|
||||
display: block;
|
||||
|
|
@ -650,12 +650,6 @@ header {
|
|||
header .logo, header a.button {
|
||||
text-decoration: none; }
|
||||
|
||||
header.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1101; }
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
background: #eceff1;
|
||||
|
|
@ -681,12 +675,17 @@ footer {
|
|||
footer a, footer a:visited {
|
||||
color: #039be5; }
|
||||
|
||||
footer.sticky {
|
||||
header.sticky, footer.sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 1101; }
|
||||
|
||||
header.sticky {
|
||||
top: 0; }
|
||||
|
||||
footer.sticky {
|
||||
bottom: 0; }
|
||||
|
||||
/*
|
||||
Definitions for forms and input elements.
|
||||
*/
|
||||
|
|
@ -782,7 +781,7 @@ button {
|
|||
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
a.button, label.button, .button,
|
||||
a[aria-role="button"], label[aria-role="button"], [aria-role="button"] {
|
||||
a[role="button"], label[role="button"], [role="button"] {
|
||||
display: inline-block;
|
||||
background: rgba(189, 189, 189, 0.65);
|
||||
color: #212121;
|
||||
|
|
@ -799,16 +798,16 @@ a[aria-role="button"], label[aria-role="button"], [aria-role="button"] {
|
|||
a.button:hover,
|
||||
a.button:active,
|
||||
a.button:focus, label.button:hover, label.button:active, label.button:focus, .button:hover, .button:active, .button:focus,
|
||||
a[aria-role="button"]:hover,
|
||||
a[aria-role="button"]:active,
|
||||
a[aria-role="button"]:focus, label[aria-role="button"]:hover, label[aria-role="button"]:active, label[aria-role="button"]:focus, [aria-role="button"]:hover, [aria-role="button"]:active, [aria-role="button"]:focus {
|
||||
a[role="button"]:hover,
|
||||
a[role="button"]:active,
|
||||
a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:active, label[role="button"]:focus, [role="button"]:hover, [role="button"]:active, [role="button"]:focus {
|
||||
background: rgba(189, 189, 189, 0.8);
|
||||
opacity: 1; }
|
||||
button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled],
|
||||
a.button:disabled,
|
||||
a.button[disabled], label.button:disabled, label.button[disabled], .button:disabled, .button[disabled],
|
||||
a[aria-role="button"]:disabled,
|
||||
a[aria-role="button"][disabled], label[aria-role="button"]:disabled, label[aria-role="button"][disabled], [aria-role="button"]:disabled, [aria-role="button"][disabled] {
|
||||
a[role="button"]:disabled,
|
||||
a[role="button"][disabled], label[role="button"]:disabled, label[role="button"][disabled], [role="button"]:disabled, [role="button"][disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65; }
|
||||
|
||||
|
|
@ -833,8 +832,7 @@ input[type="file"] {
|
|||
margin: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15); }
|
||||
.button-group button, .button-group [type="button"], .button-group [type="submit"], .button-group [type="reset"],
|
||||
.button-group a.button, .button-group label.button, .button-group .button,
|
||||
.button-group a[aria-role="button"], .button-group label[aria-role="button"], .button-group [aria-role="button"] {
|
||||
.button-group .button, .button-group [role="button"] {
|
||||
margin: 0;
|
||||
-webkit-box-flex: 1;
|
||||
max-width: 100%;
|
||||
|
|
@ -847,42 +845,17 @@ input[type="file"] {
|
|||
border-radius: 0;
|
||||
box-shadow: none; }
|
||||
.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"],
|
||||
.button-group button + a.button, .button-group button + label.button, .button-group button + .button,
|
||||
.button-group button + a[aria-role="button"], .button-group button + label[aria-role="button"], .button-group button + [aria-role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
|
||||
.button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button,
|
||||
.button-group [type="button"] + a[aria-role="button"], .button-group [type="button"] + label[aria-role="button"], .button-group [type="button"] + [aria-role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
|
||||
.button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button,
|
||||
.button-group [type="submit"] + a[aria-role="button"], .button-group [type="submit"] + label[aria-role="button"], .button-group [type="submit"] + [aria-role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
|
||||
.button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button,
|
||||
.button-group [type="reset"] + a[aria-role="button"], .button-group [type="reset"] + label[aria-role="button"], .button-group [type="reset"] + [aria-role="button"],
|
||||
.button-group a.button + button,
|
||||
.button-group a.button + [type="button"],
|
||||
.button-group a.button + [type="submit"],
|
||||
.button-group a.button + [type="reset"],
|
||||
.button-group a.button + a.button,
|
||||
.button-group a.button + label.button,
|
||||
.button-group a.button + .button,
|
||||
.button-group a.button + a[aria-role="button"],
|
||||
.button-group a.button + label[aria-role="button"],
|
||||
.button-group a.button + [aria-role="button"], .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"],
|
||||
.button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button,
|
||||
.button-group label.button + a[aria-role="button"], .button-group label.button + label[aria-role="button"], .button-group label.button + [aria-role="button"], .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"],
|
||||
.button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button,
|
||||
.button-group .button + a[aria-role="button"], .button-group .button + label[aria-role="button"], .button-group .button + [aria-role="button"],
|
||||
.button-group a[aria-role="button"] + button,
|
||||
.button-group a[aria-role="button"] + [type="button"],
|
||||
.button-group a[aria-role="button"] + [type="submit"],
|
||||
.button-group a[aria-role="button"] + [type="reset"],
|
||||
.button-group a[aria-role="button"] + a.button,
|
||||
.button-group a[aria-role="button"] + label.button,
|
||||
.button-group a[aria-role="button"] + .button,
|
||||
.button-group a[aria-role="button"] + a[aria-role="button"],
|
||||
.button-group a[aria-role="button"] + label[aria-role="button"],
|
||||
.button-group a[aria-role="button"] + [aria-role="button"], .button-group label[aria-role="button"] + button, .button-group label[aria-role="button"] + [type="button"], .button-group label[aria-role="button"] + [type="submit"], .button-group label[aria-role="button"] + [type="reset"],
|
||||
.button-group label[aria-role="button"] + a.button, .button-group label[aria-role="button"] + label.button, .button-group label[aria-role="button"] + .button,
|
||||
.button-group label[aria-role="button"] + a[aria-role="button"], .button-group label[aria-role="button"] + label[aria-role="button"], .button-group label[aria-role="button"] + [aria-role="button"], .button-group [aria-role="button"] + button, .button-group [aria-role="button"] + [type="button"], .button-group [aria-role="button"] + [type="submit"], .button-group [aria-role="button"] + [type="reset"],
|
||||
.button-group [aria-role="button"] + a.button, .button-group [aria-role="button"] + label.button, .button-group [aria-role="button"] + .button,
|
||||
.button-group [aria-role="button"] + a[aria-role="button"], .button-group [aria-role="button"] + label[aria-role="button"], .button-group [aria-role="button"] + [aria-role="button"] {
|
||||
.button-group button + .button, .button-group button + [role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
|
||||
.button-group [type="button"] + .button, .button-group [type="button"] + [role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
|
||||
.button-group [type="submit"] + .button, .button-group [type="submit"] + [role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
|
||||
.button-group [type="reset"] + .button, .button-group [type="reset"] + [role="button"],
|
||||
.button-group .button + button,
|
||||
.button-group .button + [type="button"],
|
||||
.button-group .button + [type="submit"],
|
||||
.button-group .button + [type="reset"],
|
||||
.button-group .button + .button,
|
||||
.button-group .button + [role="button"], .button-group [role="button"] + button, .button-group [role="button"] + [type="button"], .button-group [role="button"] + [type="submit"], .button-group [role="button"] + [type="reset"],
|
||||
.button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
|
||||
border-left: 1px solid #9e9e9e; }
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
|
@ -891,42 +864,17 @@ input[type="file"] {
|
|||
-webkit-flex-direction: column;
|
||||
flex-direction: column; }
|
||||
.button-group button + button, .button-group button + [type="button"], .button-group button + [type="submit"], .button-group button + [type="reset"],
|
||||
.button-group button + a.button, .button-group button + label.button, .button-group button + .button,
|
||||
.button-group button + a[aria-role="button"], .button-group button + label[aria-role="button"], .button-group button + [aria-role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
|
||||
.button-group [type="button"] + a.button, .button-group [type="button"] + label.button, .button-group [type="button"] + .button,
|
||||
.button-group [type="button"] + a[aria-role="button"], .button-group [type="button"] + label[aria-role="button"], .button-group [type="button"] + [aria-role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
|
||||
.button-group [type="submit"] + a.button, .button-group [type="submit"] + label.button, .button-group [type="submit"] + .button,
|
||||
.button-group [type="submit"] + a[aria-role="button"], .button-group [type="submit"] + label[aria-role="button"], .button-group [type="submit"] + [aria-role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
|
||||
.button-group [type="reset"] + a.button, .button-group [type="reset"] + label.button, .button-group [type="reset"] + .button,
|
||||
.button-group [type="reset"] + a[aria-role="button"], .button-group [type="reset"] + label[aria-role="button"], .button-group [type="reset"] + [aria-role="button"],
|
||||
.button-group a.button + button,
|
||||
.button-group a.button + [type="button"],
|
||||
.button-group a.button + [type="submit"],
|
||||
.button-group a.button + [type="reset"],
|
||||
.button-group a.button + a.button,
|
||||
.button-group a.button + label.button,
|
||||
.button-group a.button + .button,
|
||||
.button-group a.button + a[aria-role="button"],
|
||||
.button-group a.button + label[aria-role="button"],
|
||||
.button-group a.button + [aria-role="button"], .button-group label.button + button, .button-group label.button + [type="button"], .button-group label.button + [type="submit"], .button-group label.button + [type="reset"],
|
||||
.button-group label.button + a.button, .button-group label.button + label.button, .button-group label.button + .button,
|
||||
.button-group label.button + a[aria-role="button"], .button-group label.button + label[aria-role="button"], .button-group label.button + [aria-role="button"], .button-group .button + button, .button-group .button + [type="button"], .button-group .button + [type="submit"], .button-group .button + [type="reset"],
|
||||
.button-group .button + a.button, .button-group .button + label.button, .button-group .button + .button,
|
||||
.button-group .button + a[aria-role="button"], .button-group .button + label[aria-role="button"], .button-group .button + [aria-role="button"],
|
||||
.button-group a[aria-role="button"] + button,
|
||||
.button-group a[aria-role="button"] + [type="button"],
|
||||
.button-group a[aria-role="button"] + [type="submit"],
|
||||
.button-group a[aria-role="button"] + [type="reset"],
|
||||
.button-group a[aria-role="button"] + a.button,
|
||||
.button-group a[aria-role="button"] + label.button,
|
||||
.button-group a[aria-role="button"] + .button,
|
||||
.button-group a[aria-role="button"] + a[aria-role="button"],
|
||||
.button-group a[aria-role="button"] + label[aria-role="button"],
|
||||
.button-group a[aria-role="button"] + [aria-role="button"], .button-group label[aria-role="button"] + button, .button-group label[aria-role="button"] + [type="button"], .button-group label[aria-role="button"] + [type="submit"], .button-group label[aria-role="button"] + [type="reset"],
|
||||
.button-group label[aria-role="button"] + a.button, .button-group label[aria-role="button"] + label.button, .button-group label[aria-role="button"] + .button,
|
||||
.button-group label[aria-role="button"] + a[aria-role="button"], .button-group label[aria-role="button"] + label[aria-role="button"], .button-group label[aria-role="button"] + [aria-role="button"], .button-group [aria-role="button"] + button, .button-group [aria-role="button"] + [type="button"], .button-group [aria-role="button"] + [type="submit"], .button-group [aria-role="button"] + [type="reset"],
|
||||
.button-group [aria-role="button"] + a.button, .button-group [aria-role="button"] + label.button, .button-group [aria-role="button"] + .button,
|
||||
.button-group [aria-role="button"] + a[aria-role="button"], .button-group [aria-role="button"] + label[aria-role="button"], .button-group [aria-role="button"] + [aria-role="button"] {
|
||||
.button-group button + .button, .button-group button + [role="button"], .button-group [type="button"] + button, .button-group [type="button"] + [type="button"], .button-group [type="button"] + [type="submit"], .button-group [type="button"] + [type="reset"],
|
||||
.button-group [type="button"] + .button, .button-group [type="button"] + [role="button"], .button-group [type="submit"] + button, .button-group [type="submit"] + [type="button"], .button-group [type="submit"] + [type="submit"], .button-group [type="submit"] + [type="reset"],
|
||||
.button-group [type="submit"] + .button, .button-group [type="submit"] + [role="button"], .button-group [type="reset"] + button, .button-group [type="reset"] + [type="button"], .button-group [type="reset"] + [type="submit"], .button-group [type="reset"] + [type="reset"],
|
||||
.button-group [type="reset"] + .button, .button-group [type="reset"] + [role="button"],
|
||||
.button-group .button + button,
|
||||
.button-group .button + [type="button"],
|
||||
.button-group .button + [type="submit"],
|
||||
.button-group .button + [type="reset"],
|
||||
.button-group .button + .button,
|
||||
.button-group .button + [role="button"], .button-group [role="button"] + button, .button-group [role="button"] + [type="button"], .button-group [role="button"] + [type="submit"], .button-group [role="button"] + [type="reset"],
|
||||
.button-group [role="button"] + .button, .button-group [role="button"] + [role="button"] {
|
||||
border: 0;
|
||||
border-top: 1px solid #9e9e9e; } }
|
||||
[type="checkbox"], [type="radio"] {
|
||||
|
|
@ -975,57 +923,57 @@ input[type="file"] {
|
|||
background: #212121;
|
||||
content: ''; }
|
||||
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
button.primary, [type="button"].primary, [type="submit"].primary,
|
||||
[type="reset"].primary, .button.primary, [aria-role="button"].primary {
|
||||
[type="reset"].primary, .button.primary, [role="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, [aria-role="button"].primary:hover, [aria-role="button"].primary:active, [aria-role="button"].primary:focus {
|
||||
[type="reset"].primary:focus, .button.primary:hover, .button.primary:active, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:active, [role="button"].primary:focus {
|
||||
background: #0277bd; }
|
||||
|
||||
button.secondary, [type="button"].secondary, [type="submit"].secondary,
|
||||
[type="reset"].secondary, .button.secondary, [aria-role="button"].secondary {
|
||||
[type="reset"].secondary, .button.secondary, [role="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, [aria-role="button"].secondary:hover, [aria-role="button"].secondary:active, [aria-role="button"].secondary:focus {
|
||||
[type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:active, .button.secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:active, [role="button"].secondary:focus {
|
||||
background: #c62828; }
|
||||
|
||||
button.tertiary, [type="button"].tertiary, [type="submit"].tertiary,
|
||||
[type="reset"].tertiary, .button.tertiary, [aria-role="button"].tertiary {
|
||||
[type="reset"].tertiary, .button.tertiary, [role="button"].tertiary {
|
||||
background: rgba(104, 159, 56, 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, [aria-role="button"].tertiary:hover, [aria-role="button"].tertiary:active, [aria-role="button"].tertiary:focus {
|
||||
[type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:active, .button.tertiary:focus, [role="button"].tertiary:hover, [role="button"].tertiary:active, [role="button"].tertiary:focus {
|
||||
background: #689f38; }
|
||||
|
||||
button.inverse, [type="button"].inverse, [type="submit"].inverse,
|
||||
[type="reset"].inverse, .button.inverse, [aria-role="button"].inverse {
|
||||
[type="reset"].inverse, .button.inverse, [role="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, [aria-role="button"].inverse:hover, [aria-role="button"].inverse:active, [aria-role="button"].inverse:focus {
|
||||
[type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:active, .button.inverse:focus, [role="button"].inverse:hover, [role="button"].inverse:active, [role="button"].inverse:focus {
|
||||
background: rgba(33, 33, 33, 0.9); }
|
||||
|
||||
button.small, [type="button"].small, [type="submit"].small,
|
||||
[type="reset"].small, .button.small, [aria-role="button"].small {
|
||||
[type="reset"].small, .button.small, [role="button"].small {
|
||||
border-radius: 1px;
|
||||
padding: 4px 6px;
|
||||
margin: 6px 8px; }
|
||||
|
||||
button.large, [type="button"].large, [type="submit"].large,
|
||||
[type="reset"].large, .button.large, [aria-role="button"].large {
|
||||
[type="reset"].large, .button.large, [role="button"].large {
|
||||
border-radius: 4px;
|
||||
padding: 12px 18px;
|
||||
margin: 10px 8px; }
|
||||
|
|
@ -1251,8 +1199,8 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
@media (min-width: 320px) {
|
||||
.card {
|
||||
max-width: 320px; } }
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@media (min-width: 480px) {
|
||||
.card.large {
|
||||
|
|
@ -1443,8 +1391,8 @@ mark {
|
|||
-webkit-animation: alert-anim 6s linear infinite;
|
||||
animation: alert-anim 6s linear infinite; }
|
||||
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
mark.secondary {
|
||||
background: #e53935; }
|
||||
|
|
@ -1531,8 +1479,8 @@ 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.
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
*/
|
||||
progress.inline {
|
||||
display: inline-block;
|
||||
|
|
@ -1690,8 +1638,8 @@ ul.breadcrumbs {
|
|||
margin-left: auto !important;
|
||||
margin-right: auto !important; }
|
||||
|
||||
/*
|
||||
Custom elements for utilities and helper classes.
|
||||
/*
|
||||
Custom elements for utilities and helper classes.
|
||||
*/
|
||||
.bordered {
|
||||
border: 1px solid rgba(0, 0, 0, 0.25) !important; }
|
||||
|
|
|
|||
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
|
|
@ -762,4 +762,6 @@
|
|||
|
||||
## 20170113
|
||||
|
||||
- Added support for `aria-role="button"` in the `input_control` module by default. Filesize has bloated to a horrifying 6.92KB.
|
||||
- Added support for ARIA `role="button"` in the `input_control` module by default. Filesize has bloated to a horrifying 6.92KB.
|
||||
- Highly optimized `input_control` module's buttons and button groups, by removing redundant selectors, based on specificity, bringing down the filesize to a managable 6.59KB again.
|
||||
- Optimized `sticky` `footer`s and `header`s a little bit. Should have no effect on filesize.
|
||||
|
|
|
|||
|
|
@ -136,7 +136,12 @@
|
|||
</div>
|
||||
<div class="row col-sm-12">
|
||||
<div>
|
||||
<a aria-role="button" class="tertiary" href="#">Test span button</a>
|
||||
<a role="button" class="tertiary" href="#">Test span button</a>
|
||||
<div class="button-group">
|
||||
<button>Button</button>
|
||||
<a role="button">Button</a>
|
||||
<label class="button">Button</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></main>
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@ $fore-color: #212121; // Text and general foreground color
|
|||
$back-color: #f5f5f5; // Body background color
|
||||
$base-font-family: // Default font stack for all elements:
|
||||
'-apple-system, BlinkMacSystemFont,\"Segoe UI\",\"Roboto\", \"Droid Sans\",\"Helvetica Neue\", Helvetica, Arial, sans-serif';
|
||||
// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
|
||||
// OS X and iOS system fonts (San Francisco) -> Windows system fonts -> Android system fonts (newer and older) -> Fallback fonts
|
||||
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
||||
$base-font-size: 1em; // Default font sizing for all elements [2]
|
||||
$base-line-height: 1.5; // Default line height for all elements.
|
||||
$body-margin: 0; // Margin for the body
|
||||
$apply-defaults-to-all: true; // Should default values be applied to all
|
||||
$apply-defaults-to-all: true; // Should default values be applied to all
|
||||
// elements? (`true` or `false`) [3]
|
||||
$h1-font-size: 2em; // Font size of h1
|
||||
$h2-font-size: 1.5em; // Font size for h2
|
||||
|
|
@ -27,7 +27,7 @@ $h6-font-size: 0.85em; // Font size for h6
|
|||
$heading-line-height: 1.2em; // Line height for all headings
|
||||
$heading-margin: 12px 8px; // Margin for all headings
|
||||
$heading-font-weight: 500; // Font weight for all headings
|
||||
$heading-smalltext-fore-color: #424242; // <small> color in headings
|
||||
$heading-smalltext-fore-color: #424242; // <small> color in headings
|
||||
$make-heading-smalltext-block: true; // Should <small> elements in headings
|
||||
// be displayed as blocks (`true`/`false`) [4]
|
||||
$heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings
|
||||
|
|
@ -38,7 +38,7 @@ $list-left-padding: 28px; // Left padding for <ol> and <ul> element
|
|||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||
$horizontal-rule-margin: 8px; // <hr> margin
|
||||
$horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used
|
||||
$horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used
|
||||
// in the <hr> element's border-top)
|
||||
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the
|
||||
// <hr> element (`true`/`false`) [5]
|
||||
|
|
@ -56,7 +56,7 @@ $blockquote-cite-bottom-position: // Bottom padding for citation of <
|
|||
$blockquote-border-style: 0; // Border style for <blockquote>
|
||||
$blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote>
|
||||
$blockquote-box-shadow: // Box shadow for <blockquote>
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$use-default-code-fonts: true; // Should default font choice (monospace) be
|
||||
// used for code elements? (`true`/`false`) [6]
|
||||
//$code-font-family: monospace, monospace; // Fonts for code elements if not default
|
||||
|
|
@ -74,7 +74,7 @@ $pre-element-border-style: 0; // Border style for <pre>
|
|||
$pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre>
|
||||
$pre-element-margin: 8px 10px; // Margin for <pre>
|
||||
$pre-element-box-shadow: // Box shadow for <pre>
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the
|
||||
// left side of <pre> (`true`/`false`) [7]
|
||||
$pre-element-sidebar-style: 3px solid #1565c0; // Style of the sidebar of <pre>
|
||||
|
|
@ -85,7 +85,7 @@ $kbd-element-border-style: 0; // Border style for <kbd>
|
|||
$kbd-element-border-radius: 2px; // Border radius for <kbd>
|
||||
$kbd-element-box-shadow: // Box shadow for <kbd>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$style-samp-element: false; // Should styles for <samp> be included?
|
||||
$style-samp-element: false; // Should styles for <samp> be included?
|
||||
// (`true`/`false`) [8]
|
||||
//$samp-element-padding: 2px 4px; // Padding for <samp>
|
||||
//$samp-element-fore-color: $fore-color; // Text color for <samp>
|
||||
|
|
@ -112,9 +112,9 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state
|
|||
// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root
|
||||
// element's font sizing.
|
||||
// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]).
|
||||
// This is due to the fact that applying the value of it on the root element again will overwrite the value of
|
||||
// This is due to the fact that applying the value of it on the root element again will overwrite the value of
|
||||
// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
|
||||
// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||
// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling
|
||||
// to elements manually.
|
||||
// [4] - If the value of $make-heading-smalltext-block is `true` the <small> elements in headings will be displayed below
|
||||
// the main heading and the 2 values specified below will apply.
|
||||
|
|
@ -123,7 +123,7 @@ $apply-link-hover-fade: true; // Should the :hover and :focus state
|
|||
// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true`
|
||||
// will apply the proper fix to use monospace font without any problems on all browsers.
|
||||
// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will
|
||||
// be applied as a left border for the <pre> elements.
|
||||
// be applied as a left border for the <pre> elements.
|
||||
// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for
|
||||
// `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied.
|
||||
// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the <dfn> elements are
|
||||
|
|
@ -168,7 +168,7 @@ $header-border-style: 0; // Border style for <header>
|
|||
$header-margin: 0; // Margin for <header>
|
||||
$header-padding: 2px 8px; // Padding for <header>
|
||||
$header-box-shadow: // Box shadow for <header>
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$header-logo-name: 'logo'; // Class name for <header>'s logo
|
||||
$header-logo-font-size: 1.75em; // Font size for <header>'s logo
|
||||
$header-logo-line-height: 1.2; // Line height for <header>'s logo
|
||||
|
|
@ -186,7 +186,7 @@ $nav-border-radius: 0; // Border radius for <nav>
|
|||
$nav-padding: 8px 8px 16px 20px; // Padding for <nav>
|
||||
$nav-margin: 2px; // Margin for <nav>
|
||||
$nav-box-shadow: // Box shadow for <nav>
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$nav-link-fore-color: #1565c0; // Text color for links in <nav>
|
||||
$nav-sublink-prefix: 'sublink'; // Prefix for the subcategory links in <nav>
|
||||
$nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
|
|
@ -198,7 +198,7 @@ $footer-font-size: 85%; // Font size for <footer>
|
|||
$footer-margin: 18px 0 0; // Margin for <footer>
|
||||
$footer-padding: 22px 10px 12px; // Padding for <footer>
|
||||
$footer-link-fore-color: #039be5; // Text color for links in <footer>
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be
|
||||
$include-footer-sticky: true; // Should sticky <footer> elements be
|
||||
// included (`true`/`false`) [2]
|
||||
$footer-sticky-name: 'sticky'; // Class name for sticky <footer> elements
|
||||
// Notes:
|
||||
|
|
@ -214,7 +214,7 @@ $form-border-radius: 0; // Border radius for forms
|
|||
$form-margin: 8px; // Margin for forms
|
||||
$form-padding: 12px 10px 18px; // Padding for forms
|
||||
$form-box-shadow: // Box shadow for forms
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: 1px solid #bdbdbd; // Border style for fieldset
|
||||
$fieldset-border-radius: 2px; // Border radius for fieldset
|
||||
|
|
@ -254,7 +254,7 @@ $button-group-name: 'button-group'; // Class for button groups
|
|||
$button-group-border-style: 1px solid #9e9e9e; // Border style for button groups
|
||||
$button-group-margin: $button-margin; // Margin for button groups
|
||||
$button-group-box-shadow: // Box shadow for button groups
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
||||
$hide-file-inputs: true; // Should a style be added that makes all
|
||||
// <input>s of type `file` hidden?
|
||||
|
|
@ -313,7 +313,7 @@ $table-border-style: 1px solid #bdbdbd; // Border style for <table> and
|
|||
$table-border-radius: 0; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: // Box shadow for <table>
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$table-caption-font-size: 1.5em; // Font size for <caption>
|
||||
$table-caption-margin: 6px 8px 12px; // Margin for <caption>
|
||||
$table-row-padding: 8px; // Padding for <tr> - both views
|
||||
|
|
@ -335,7 +335,7 @@ $table-striped-alt-body-back-color: // Alternate background color for
|
|||
#eeeeee; // striped <table>
|
||||
// Notes:
|
||||
// [1] - The attribute specified in $table-mobile-card-label must be added manually to each and every element in the table
|
||||
// in order for their mobile headers to display properly.
|
||||
// in order for their mobile headers to display properly.
|
||||
// Variables for cards [1]
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #fafafa; // Background color for cards
|
||||
|
|
@ -344,7 +344,7 @@ $card-border-style: 1px solid #9e9e9e; // Border style for cards
|
|||
$card-border-radius: 0; // Border radius for cards
|
||||
$card-margin: 2px 10px 20px; // Margin for cards
|
||||
$card-box-shadow: // Box shadow for cards
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: 1px solid #bdbdbd; // Border style for card sections
|
||||
$card-section-padding: 6px 8px 6px; // Padding for card sections
|
||||
|
|
@ -377,7 +377,7 @@ $card-section-padding1-padding: 10px 12px 10px; // Padding for card sect
|
|||
// Variables for tabs
|
||||
$tab-container-name: 'tabs'; // Class name for the tabs' container
|
||||
$tab-container-box-shadow: // Box shadow for the tabs' container
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26);
|
||||
$tab-label-back-color: #e0e0e0; // Background color for tabs' labels
|
||||
$tab-label-fore-color: $fore-color; // Text color for tabs' labels
|
||||
$tab-label-selected-back-color: #eeeeee; // Background color for open tab's label
|
||||
|
|
@ -401,7 +401,7 @@ $mark-line-height: 1; // Line height for <mark>
|
|||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2px; // Border radius for <mark>
|
||||
$mark-padding: 2px 4px; // Padding for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: // Box shadow for <mark>
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$mark-inline-block-name: 'inline-block'; // Class name for <mark> inline block styling
|
||||
|
|
@ -412,7 +412,7 @@ $mark-variant2-back-color: #689f38; // Background color for <mark> var
|
|||
$mark-style1-name: 'tag'; // Class name for <mark> style 1
|
||||
$mark-style1-border-style: 0; // Border style for <mark> style 1
|
||||
$mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||
$mark-style1-padding: 4px 8px; // Padding for <mark> style 1
|
||||
$mark-style1-padding: 4px 8px; // Padding for <mark> style 1
|
||||
$mark-style2-name: 'inline-block'; // Class name for <mark> style 2
|
||||
$mark-style2-border-style: 0; // Border style for <mark> style 2
|
||||
$mark-style2-border-radius: 2px; // Border radius for <mark> style 2
|
||||
|
|
@ -427,7 +427,7 @@ $alert-border-radius: 0; // Border radius for alerts
|
|||
$alert-padding: 12px 16px; // Padding for alerts
|
||||
$alert-margin: 1px 10px; // Margin for alerts
|
||||
$alert-box-shadow: // Box shadow for alerts
|
||||
0 1px 3px rgba(0,0,0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
|
||||
0 1px 3px rgba(0,0,0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.26);
|
||||
$alert-include-animated: true; // Should animated alerts be included?
|
||||
// (`true`/`false`) [1]
|
||||
$alert-animated-class: 'animated'; // Class name for animated alerts
|
||||
|
|
@ -467,7 +467,7 @@ $progress-style1-height: 2px; // Height for <progress> style 1
|
|||
$progress-style1-top-bottom-margin: // Top and bottom margin for <progress> style 1
|
||||
0;
|
||||
$progress-style1-left-right-margin: // Left and right margin for <progress> style 1
|
||||
0;
|
||||
0;
|
||||
$progress-style1-border-style: 0; // Border style for <progress> style 1
|
||||
$progress-style1-border-radius: 0; // Border radius for <progress> style 1
|
||||
$spinner-donut-name: 'spinner-donut'; // Class name for donut spinner
|
||||
|
|
@ -479,12 +479,12 @@ $spinner-donut-variant1-name: 'secondary'; // Class name for donut spinn
|
|||
$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;
|
||||
#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;
|
||||
#2e7d32;
|
||||
$spinner-donut-style1-name: 'large'; // Class name for donut spinner style 1
|
||||
$spinner-donut-style1-size: 32px; // Size for donut spinner style 1
|
||||
$spinner-donut-style1-border-thickness: // Border thickness for donut spinner style 1
|
||||
|
|
@ -517,10 +517,10 @@ $box-shadow-style2-value: // Box shadow value for generic box-shado
|
|||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3
|
||||
$box-shadow-style3-value: // Box shadow value for generic box-shadow style 3
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4
|
||||
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
$responsive-margin-medium-breakpoint: // Medium screen breakpoint for responsive margin
|
||||
$grid-medium-breakpoint;
|
||||
|
|
@ -547,16 +547,16 @@ $center-block-name: 'center-block'; // Class name for center block
|
|||
@import '../mini/grid';
|
||||
@import '../mini/navigation';
|
||||
@import '../mini/input_control';
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
/*
|
||||
Custom elements for forms and input elements.
|
||||
*/
|
||||
@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
|
||||
@include make-button-alt-color ($button-variant1-name, $button-variant1-back-color,
|
||||
$button-variant1-back-opacity, $button-variant1-hover-back-opacity, $button-variant1-fore-color);
|
||||
@include make-button-alt-color ($button-variant2-name, $button-variant2-back-color,
|
||||
@include make-button-alt-color ($button-variant2-name, $button-variant2-back-color,
|
||||
$button-variant2-back-opacity, $button-variant2-hover-back-opacity, $button-variant2-fore-color);
|
||||
@include make-button-alt-color ($button-variant3-name, $button-variant3-back-color,
|
||||
@include make-button-alt-color ($button-variant3-name, $button-variant3-back-color,
|
||||
$button-variant3-back-opacity, $button-variant3-hover-back-opacity, $button-variant3-fore-color);
|
||||
@include make-button-alt-color ($button-variant4-name, $button-variant4-back-color,
|
||||
@include make-button-alt-color ($button-variant4-name, $button-variant4-back-color,
|
||||
$button-variant4-back-opacity, $button-variant4-hover-back-opacity, $button-variant4-fore-color);
|
||||
@include make-button-alt-style ($button-style1-name, $button-style1-border-style,
|
||||
$button-style1-border-radius, $button-style1-padding, $button-style1-margin);
|
||||
|
|
@ -564,65 +564,65 @@ $center-block-name: 'center-block'; // Class name for center block
|
|||
$button-style2-border-radius, $button-style2-padding, $button-style2-margin);
|
||||
@import '../mini/table';
|
||||
@import '../mini/card';
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
/*
|
||||
Custom elements for cards and containers.
|
||||
*/
|
||||
@include make-card-alt-size ($card-size1-name, $card-size1-width);
|
||||
@include make-card-alt-size ($card-size2-name, $card-size2-width);
|
||||
@include make-card-alt-size ($card-size3-name, $card-size3-width);
|
||||
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
|
||||
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
|
||||
$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
|
||||
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
|
||||
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
|
||||
$card-section-style1-fore-color);
|
||||
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
|
||||
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
|
||||
$card-section-style2-fore-color);
|
||||
@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
|
||||
@import '../mini/tab';
|
||||
@import '../mini/contextual';
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
/*
|
||||
Custom contextual background elements and alerts.
|
||||
*/
|
||||
@include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color);
|
||||
@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color);
|
||||
@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-style,
|
||||
@include make-mark-alt-style ($mark-style1-name, $mark-style1-border-style,
|
||||
$mark-style1-border-radius, $mark-style1-padding);
|
||||
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
|
||||
@include make-mark-alt-style ($mark-style2-name, $mark-style2-border-style,
|
||||
$mark-style2-border-radius, $mark-style2-padding, $mark-style2-font-size, $mark-style2-line-height);
|
||||
@include make-alert-alt-color ($alert-variant1-name, $alert-variant1-back-color);
|
||||
@include make-alert-alt-color ($alert-variant2-name, $alert-variant2-back-color, $alert-variant2-fore-color);
|
||||
@include make-alert-alt-style ($alert-style1-name, $alert-style1-border-style, $alert-style1-border-radius);
|
||||
@include make-alert-alt-style ($alert-style2-name, $alert-style2-border-style, $alert-style2-border-radius);
|
||||
@import '../mini/progress';
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
/*
|
||||
Custom elements for progress elements and spinners.
|
||||
*/
|
||||
@include make-progress-inline ($progress-inline-name, $progress-inline-width);
|
||||
@include make-progress-alt-color ($progress-variant1-name, $progress-variant1-fore-color);
|
||||
@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-top-bottom-margin, $progress-style1-left-right-margin,
|
||||
@include make-progress-alt-style ($progress-style1-name, $progress-style1-height,
|
||||
$progress-style1-top-bottom-margin, $progress-style1-left-right-margin,
|
||||
$progress-style1-border-style, $progress-style1-border-radius);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
|
||||
$spinner-donut-variant1-fore-color);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
|
||||
$spinner-donut-variant2-fore-color);
|
||||
@include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size,
|
||||
@include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size,
|
||||
$spinner-donut-style1-border-thickness);
|
||||
@import '../mini/utility';
|
||||
/*
|
||||
Custom elements for utilities and helper classes.
|
||||
/*
|
||||
Custom elements 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-margin-responsive ($responsive-margin-name, $responsive-margin-medium-breakpoint,
|
||||
@include make-margin-responsive ($responsive-margin-name, $responsive-margin-medium-breakpoint,
|
||||
$responsive-margin-large-breakpoint, $responsive-margin-small-value, $responsive-margin-medium-value,
|
||||
$responsive-margin-large-value);
|
||||
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-medium-breakpoint,
|
||||
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-medium-breakpoint,
|
||||
$responsive-padding-large-breakpoint, $responsive-padding-small-value, $responsive-padding-medium-value,
|
||||
$responsive-padding-large-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style4-name, $box-shadow-style4-value);
|
||||
@include make-floats ($float-prefix);
|
||||
@include make-floats ($float-prefix);
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ button {
|
|||
// Default styling
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
|
||||
a[aria-role="button"], label[aria-role="button"], [aria-role="button"] {
|
||||
a[role="button"], label[role="button"], [role="button"] {
|
||||
display: inline-block;
|
||||
background: rgba($button-back-color, $button-back-opacity);
|
||||
color: $button-fore-color;
|
||||
|
|
@ -216,8 +216,7 @@ $hide-file-inputs: true !default;
|
|||
box-shadow: $button-group-box-shadow;
|
||||
}
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
|
||||
a[aria-role="button"], label[aria-role="button"], [aria-role="button"] {
|
||||
.#{$button-class-name}, [role="button"] {
|
||||
margin: 0;
|
||||
// Old syntax
|
||||
-webkit-box-flex: 1;
|
||||
|
|
@ -234,8 +233,7 @@ $hide-file-inputs: true !default;
|
|||
}
|
||||
@if $button-group-border-style != 0 {
|
||||
+ button, + [type="button"], + [type="submit"], + [type="reset"],
|
||||
+ a.#{$button-class-name}, + label.#{$button-class-name}, + .#{$button-class-name},
|
||||
+ a[aria-role="button"], + label[aria-role="button"], + [aria-role="button"] {
|
||||
+ .#{$button-class-name}, + [role="button"] {
|
||||
border-left: $button-group-border-style;
|
||||
}
|
||||
}
|
||||
|
|
@ -254,11 +252,9 @@ $hide-file-inputs: true !default;
|
|||
flex-direction: column;
|
||||
@if $button-group-border-style !=0 {
|
||||
button, [type="button"], [type="submit"], [type="reset"],
|
||||
a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
|
||||
a[aria-role="button"], label[aria-role="button"], [aria-role="button"] {
|
||||
.#{$button-class-name}, [role="button"] {
|
||||
+ button, + [type="button"], + [type="submit"], + [type="reset"],
|
||||
+ a.#{$button-class-name}, + label.#{$button-class-name}, + .#{$button-class-name},
|
||||
+ a[aria-role="button"], + label[aria-role="button"], + [aria-role="button"] {
|
||||
+ .#{$button-class-name}, + [role="button"] {
|
||||
border: 0;
|
||||
border-top: $button-group-border-style;
|
||||
}
|
||||
|
|
@ -280,7 +276,7 @@ $hide-file-inputs: true !default;
|
|||
@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color, $button-alt-back-opacity,
|
||||
$button-alt-hover-back-opacity, $button-alt-fore-color: $button-fore-color) {
|
||||
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
|
||||
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [aria-role="button"].#{$button-alt-name} {
|
||||
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
|
||||
background: rgba($button-alt-back-color, $button-alt-back-opacity);
|
||||
@if $button-alt-fore-color != $button-fore-color {
|
||||
color: $button-alt-fore-color;
|
||||
|
|
@ -304,7 +300,7 @@ $hide-file-inputs: true !default;
|
|||
@mixin make-button-alt-style ($button-alt-name, $button-alt-border-style, $button-alt-border-radius,
|
||||
$button-alt-padding, $button-alt-margin) {
|
||||
button.#{$button-alt-name}, [type="button"].#{$button-alt-name}, [type="submit"].#{$button-alt-name},
|
||||
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [aria-role="button"].#{$button-alt-name} {
|
||||
[type="reset"].#{$button-alt-name}, .#{$button-class-name}.#{$button-alt-name}, [role="button"].#{$button-alt-name} {
|
||||
@if $button-alt-border-style != $button-border-style {
|
||||
border: $button-alt-border-style;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
/*
|
||||
Definitions for navigation elements.
|
||||
Definitions for navigation elements.
|
||||
*/
|
||||
// Different elements are styled based on the same set of rules.
|
||||
// Header styling.
|
||||
$button-class-name: 'button' !default; // Class name for the button-like elements
|
||||
$header-logo-name: 'logo' !default; // Class name for <header>'s logo
|
||||
$include-header-sticky: false !default; // Should the sticky class for <header> elements be included
|
||||
$include-footer-sticky: false !default; // Should the sticky class for <footer> elements be included
|
||||
header {
|
||||
display: block; // Correct display for older versions of IE.
|
||||
height: $header-height;
|
||||
|
|
@ -71,14 +72,6 @@ header {
|
|||
}
|
||||
}
|
||||
}
|
||||
@if $include-header-sticky {
|
||||
header.#{$header-sticky-name} {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
}
|
||||
}
|
||||
// Navigation sidebar styling.
|
||||
nav {
|
||||
display: block; // Correct display for older versions of IE.
|
||||
|
|
@ -117,9 +110,6 @@ nav {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
$include-footer-sticky: false !default; // Should the class that aligns <footer> elements to the
|
||||
// bottom of the page be included
|
||||
// Footer styling.
|
||||
footer {
|
||||
display: block; // Correct display for older versions of IE.
|
||||
|
|
@ -143,11 +133,34 @@ footer {
|
|||
color: $footer-link-fore-color;
|
||||
}
|
||||
}
|
||||
@if $include-footer-sticky {
|
||||
footer.#{$footer-sticky-name}{
|
||||
|
||||
|
||||
@if $include-header-sticky and $include-footer-sticky {
|
||||
header.#{$header-sticky-name}, footer.#{$footer-sticky-name} {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
}
|
||||
header.#{$header-sticky-name} {
|
||||
top: 0;
|
||||
}
|
||||
footer.#{$footer-sticky-name} {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
@else if $include-header-sticky {
|
||||
header.#{$header-sticky-name} {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
}
|
||||
}
|
||||
@else if $include-footer-sticky {
|
||||
footer.#{$footer-sticky-name} {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 1101; // Deals with certain problems when combined with cards and tables.
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue