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
144
dist/mini-default.css
vendored
144
dist/mini-default.css
vendored
|
|
@ -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"] {
|
||||
|
|
@ -979,53 +927,53 @@ input[type="file"] {
|
|||
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; }
|
||||
|
|
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
$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,8 +133,31 @@ 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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue