mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-01-17 12:58:13 +01:00
Added switch component
Created and added switch component, added compatibility for rem sizing to input_control's checkboxes and updated definitions to use rem pixels instead of normal ones.
This commit is contained in:
Angelos Chalaris
parent
6437ee56da
commit
f95c23f271
165
dist/mini-dark.css
vendored
165
dist/mini-dark.css
vendored
@ -127,8 +127,8 @@ blockquote {
|
||||
font-style: italic;
|
||||
margin: 0.5rem;
|
||||
padding: 0.5rem 0.5rem 1.5rem;
|
||||
border-left: 4px solid #192024;
|
||||
border-radius: 0 2px 2px 0;
|
||||
border-left: 0.25rem solid #192024;
|
||||
border-radius: 0 0.125rem 0.125rem 0;
|
||||
}
|
||||
|
||||
blockquote:after {
|
||||
@ -146,22 +146,22 @@ code, kbd, pre, samp {
|
||||
}
|
||||
|
||||
code {
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
background: #20292e;
|
||||
padding: 0.125rem 0.25rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
border-radius: 0 2px 2px 0;
|
||||
border-radius: 0 0.125rem 0.125rem 0;
|
||||
background: #20292e;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem;
|
||||
border-left: 4px solid #01579b;
|
||||
border-left: 0.25rem solid #01579b;
|
||||
}
|
||||
|
||||
kbd {
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
background: #fafafa;
|
||||
color: #0c0c0c;
|
||||
padding: 0.125rem 0.25rem;
|
||||
@ -684,14 +684,14 @@ figcaption {
|
||||
form {
|
||||
background: #1c2529;
|
||||
color: #9e9e9e;
|
||||
border: 1px solid #20292e;
|
||||
border: 0.0625rem solid #20292e;
|
||||
margin: 0.5rem;
|
||||
padding: 0.75rem 0.5rem 1.125rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #263238;
|
||||
border-radius: 2px;
|
||||
border: 0.0625rem solid #263238;
|
||||
border-radius: 0.125rem;
|
||||
margin: 0.125rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
@ -768,8 +768,8 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
|
||||
box-sizing: border-box;
|
||||
background: #39444a;
|
||||
color: #d0d0d0;
|
||||
border: 1px solid #263238;
|
||||
border-radius: 2px;
|
||||
border: 0.0625rem solid #263238;
|
||||
border-radius: 0.125rem;
|
||||
margin: 0.25rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
@ -830,7 +830,7 @@ a[role="button"], label[role="button"], [role="button"] {
|
||||
background: rgba(57, 68, 74, 0.75);
|
||||
color: #d0d0d0;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin: 0.5rem;
|
||||
text-decoration: none;
|
||||
@ -869,8 +869,8 @@ input[type="file"] {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
border: 1px solid #263238;
|
||||
border-radius: 2px;
|
||||
border: 0.0625rem solid #263238;
|
||||
border-radius: 0.125rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
@ -887,7 +887,7 @@ input[type="file"] {
|
||||
}
|
||||
|
||||
.button-group > :not(:first-child) {
|
||||
border-left: 1px solid #263238;
|
||||
border-left: 0.0625rem solid #263238;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
@ -898,7 +898,7 @@ input[type="file"] {
|
||||
}
|
||||
.button-group > :not(:first-child) {
|
||||
border: 0;
|
||||
border-top: 1px solid #263238;
|
||||
border-top: 0.0625rem solid #263238;
|
||||
}
|
||||
}
|
||||
|
||||
@ -915,22 +915,22 @@ input[type="file"] {
|
||||
|
||||
.input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
bottom: 0.375rem;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
content: '';
|
||||
border: 1px solid #1c2529;
|
||||
border-radius: 2px;
|
||||
border: 0.0625rem solid #1c2529;
|
||||
border-radius: 0.125rem;
|
||||
background: #39444a;
|
||||
color: #d0d0d0;
|
||||
margin-left: -20px;
|
||||
margin-left: -1.25rem;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"] + label:hover:before, .input-group [type="checkbox"] + label:focus:before, .input-group [type="radio"] + label:hover:before, .input-group [type="radio"] + label:focus:before {
|
||||
@ -957,14 +957,51 @@ input[type="file"] {
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"]:checked + label:after, .input-group [type="radio"]:checked + label:after {
|
||||
margin-left: -20px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #d0d0d0;
|
||||
content: '';
|
||||
margin-left: -1.25rem;
|
||||
bottom: 0.625rem;
|
||||
left: 0.25rem;
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"] + label.switch:before, .input-group [type="radio"] + label.switch:before {
|
||||
bottom: 0.5rem;
|
||||
width: 1.75rem;
|
||||
height: 0.875rem;
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
background: #324148;
|
||||
margin-left: -2.375rem;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"] + label.switch:after, .input-group [type="radio"] + label.switch:after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background: #39444a;
|
||||
border-radius: 100%;
|
||||
bottom: 0.3125rem;
|
||||
margin-left: -3rem;
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"]:checked + label.switch:before, .input-group [type="radio"]:checked + label.switch:before {
|
||||
background: #39444a;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"]:checked + label.switch:after, .input-group [type="radio"]:checked + label.switch:after {
|
||||
left: 1.75rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
bottom: 0.3125rem;
|
||||
margin-left: -3rem;
|
||||
background: #0277bd;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -1020,13 +1057,13 @@ button.inverse:hover, button.inverse:focus, [type="button"].inverse:hover, [type
|
||||
|
||||
button.small, [type="button"].small, [type="submit"].small,
|
||||
[type="reset"].small, .button.small, [role="button"].small {
|
||||
border-radius: 1px;
|
||||
border-radius: 0.0625rem;
|
||||
padding: 0.25rem 0.375rem;
|
||||
}
|
||||
|
||||
button.large, [type="button"].large, [type="submit"].large,
|
||||
[type="reset"].large, .button.large, [role="button"].large {
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.75rem 1.125rem;
|
||||
}
|
||||
|
||||
@ -1080,7 +1117,7 @@ header.row {
|
||||
nav {
|
||||
display: block;
|
||||
background: #37474f;
|
||||
border: 1px solid #324148;
|
||||
border: 0.0625rem solid #324148;
|
||||
margin: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
@ -1099,10 +1136,10 @@ nav .sublink-1 {
|
||||
nav .sublink-1:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -1px;
|
||||
top: -0.0625rem;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #616161;
|
||||
border: 0.0625rem solid #616161;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
@ -1114,10 +1151,10 @@ nav .sublink-2 {
|
||||
nav .sublink-2:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -1px;
|
||||
top: -0.0625rem;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #616161;
|
||||
border: 0.0625rem solid #616161;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
@ -1166,7 +1203,7 @@ footer.sticky {
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
background: #37474f;
|
||||
border: 1px solid #324148;
|
||||
border: 0.0625rem solid #324148;
|
||||
margin: 0;
|
||||
z-index: 1110;
|
||||
}
|
||||
@ -1223,7 +1260,7 @@ footer.sticky {
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: 1px solid #1c2529;
|
||||
border: 0.0625rem solid #1c2529;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -1238,8 +1275,8 @@ table tr {
|
||||
|
||||
table th, table td {
|
||||
padding: 0.625rem;
|
||||
border-left: 1px solid #1c2529;
|
||||
border-top: 1px solid #1c2529;
|
||||
border-left: 0.0625rem solid #1c2529;
|
||||
border-top: 0.0625rem solid #1c2529;
|
||||
}
|
||||
|
||||
table td {
|
||||
@ -1278,13 +1315,13 @@ table th:first-child, table td:first-child {
|
||||
}
|
||||
table:not(.preset) tr {
|
||||
display: block;
|
||||
border: 1px solid #1c2529;
|
||||
border: 0.0625rem solid #1c2529;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
table:not(.preset) td {
|
||||
display: block;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #1c2529;
|
||||
border-bottom: 0.0625rem solid #1c2529;
|
||||
text-align: right;
|
||||
}
|
||||
table:not(.preset) td:before {
|
||||
@ -1352,7 +1389,7 @@ table th:first-child, table td:first-child {
|
||||
}
|
||||
table.horizontal th, table.horizontal td {
|
||||
width: 100%;
|
||||
border: 1px solid #1c2529;
|
||||
border: 0.0625rem solid #1c2529;
|
||||
}
|
||||
table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) {
|
||||
border-top: 0;
|
||||
@ -1422,7 +1459,7 @@ table th:first-child, table td:first-child {
|
||||
}
|
||||
table.horizontal.preset th, table.horizontal.preset td {
|
||||
width: 100%;
|
||||
border: 1px solid #1c2529;
|
||||
border: 0.0625rem solid #1c2529;
|
||||
}
|
||||
table.horizontal.preset th:not(:first-child), table.horizontal.preset td:not(:first-child) {
|
||||
border-top: 0;
|
||||
@ -1463,7 +1500,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
align-self: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border: 1px solid #616161;
|
||||
border: 0.0625rem solid #616161;
|
||||
margin: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -1473,7 +1510,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid #757575;
|
||||
border-bottom: 0.0625rem solid #757575;
|
||||
padding: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
@ -1518,11 +1555,11 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
.card.warning {
|
||||
background: #fff176;
|
||||
color: #232e33;
|
||||
border: 1px solid #d1c661;
|
||||
border: 0.0625rem solid #d1c661;
|
||||
}
|
||||
|
||||
.card.warning > .section {
|
||||
border-bottom: 1px solid #d1c661;
|
||||
border-bottom: 0.0625rem solid #d1c661;
|
||||
}
|
||||
|
||||
.card.warning > .section:last-child {
|
||||
@ -1532,11 +1569,11 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
.card.error {
|
||||
background: #b71c1c;
|
||||
color: #fafafa;
|
||||
border: 1px solid #a71a1a;
|
||||
border: 0.0625rem solid #a71a1a;
|
||||
}
|
||||
|
||||
.card.error > .section {
|
||||
border-bottom: 1px solid #a71a1a;
|
||||
border-bottom: 0.0625rem solid #a71a1a;
|
||||
}
|
||||
|
||||
.card.error > .section:last-child {
|
||||
@ -1582,7 +1619,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
background: #1d262a;
|
||||
border: 1px solid #757575;
|
||||
border: 0.0625rem solid #757575;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
@ -1636,7 +1673,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
margin: 0;
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
border: 1px solid #757575;
|
||||
border: 0.0625rem solid #757575;
|
||||
border-top: 0;
|
||||
padding: 0.5rem;
|
||||
clip: auto;
|
||||
@ -1663,7 +1700,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
}
|
||||
|
||||
.tabs.stacked > label:not(:first-of-type) {
|
||||
border: 1px solid #757575;
|
||||
border: 0.0625rem solid #757575;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
@ -1686,7 +1723,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
order: initial;
|
||||
}
|
||||
.tabs > label:not(:first-of-type) {
|
||||
border: 1px solid #757575;
|
||||
border: 0.0625rem solid #757575;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
@ -1699,7 +1736,7 @@ mark {
|
||||
color: #fafafa;
|
||||
font-size: 0.9375em;
|
||||
line-height: 1em;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
padding: 0.125em 0.25em;
|
||||
}
|
||||
|
||||
@ -1769,7 +1806,7 @@ mark.inline-block {
|
||||
.tooltip:after {
|
||||
content: attr(aria-label);
|
||||
background: #d0d0d0;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
color: #0c0c0c;
|
||||
padding: 0.5rem;
|
||||
white-space: nowrap;
|
||||
@ -1868,15 +1905,15 @@ progress {
|
||||
width: calc(100% - 1rem);
|
||||
margin: 0.5rem 0.5rem;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
background: #39444a;
|
||||
color: #0277bd;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background: #0277bd;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-top-left-radius: 0.125rem;
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
@ -1885,16 +1922,16 @@ progress::-webkit-progress-bar {
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
background: #0277bd;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-top-left-radius: 0.125rem;
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
}
|
||||
|
||||
progress[value="1000"]::-webkit-progress-value {
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
progress[value="1000"]::-moz-progress-bar {
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spinner-donut-anim {
|
||||
@ -2084,7 +2121,7 @@ ul.breadcrumbs li:last-child:after {
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 2px !important;
|
||||
border-radius: 0.125rem !important;
|
||||
}
|
||||
|
||||
.circular {
|
||||
@ -2124,7 +2161,7 @@ ul.breadcrumbs li:last-child:after {
|
||||
}
|
||||
|
||||
.shadowed {
|
||||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.125), 0 2px 2px -1px rgba(0, 0, 0, 0.25) !important;
|
||||
box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
|
||||
2
dist/mini-dark.min.css
vendored
2
dist/mini-dark.min.css
vendored
File diff suppressed because one or more lines are too long
165
dist/mini-default.css
vendored
165
dist/mini-default.css
vendored
@ -128,8 +128,8 @@ blockquote {
|
||||
background: #eeeeee;
|
||||
margin: 0.5rem;
|
||||
padding: 0.5rem 0.5rem 1.5rem;
|
||||
border-left: 4px solid #505050;
|
||||
border-radius: 0 2px 2px 0;
|
||||
border-left: 0.25rem solid #505050;
|
||||
border-radius: 0 0.125rem 0.125rem 0;
|
||||
}
|
||||
|
||||
blockquote:after {
|
||||
@ -147,22 +147,22 @@ code, kbd, pre, samp {
|
||||
}
|
||||
|
||||
code {
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
background: #e6e6e6;
|
||||
padding: 0.125rem 0.25rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
border-radius: 0 2px 2px 0;
|
||||
border-radius: 0 0.125rem 0.125rem 0;
|
||||
background: #e6e6e6;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem;
|
||||
border-left: 4px solid #1565c0;
|
||||
border-left: 0.25rem solid #1565c0;
|
||||
}
|
||||
|
||||
kbd {
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
background: #0c0c0c;
|
||||
color: #fafafa;
|
||||
padding: 0.125rem 0.25rem;
|
||||
@ -684,14 +684,14 @@ figcaption {
|
||||
*/
|
||||
form {
|
||||
background: #eeeeee;
|
||||
border: 1px solid #c9c9c9;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
margin: 0.5rem;
|
||||
padding: 0.75rem 0.5rem 1.125rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #d0d0d0;
|
||||
border-radius: 2px;
|
||||
border: 0.0625rem solid #d0d0d0;
|
||||
border-radius: 0.125rem;
|
||||
margin: 0.125rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
@ -767,8 +767,8 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
|
||||
box-sizing: border-box;
|
||||
background: #fafafa;
|
||||
color: #212121;
|
||||
border: 1px solid #c9c9c9;
|
||||
border-radius: 2px;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
border-radius: 0.125rem;
|
||||
margin: 0.25rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
@ -829,7 +829,7 @@ a[role="button"], label[role="button"], [role="button"] {
|
||||
background: rgba(220, 220, 220, 0.75);
|
||||
color: #212121;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin: 0.5rem;
|
||||
text-decoration: none;
|
||||
@ -868,8 +868,8 @@ input[type="file"] {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 2px;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
border-radius: 0.125rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
@ -886,7 +886,7 @@ input[type="file"] {
|
||||
}
|
||||
|
||||
.button-group > :not(:first-child) {
|
||||
border-left: 1px solid #bdbdbd;
|
||||
border-left: 0.0625rem solid #bdbdbd;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
@ -897,7 +897,7 @@ input[type="file"] {
|
||||
}
|
||||
.button-group > :not(:first-child) {
|
||||
border: 0;
|
||||
border-top: 1px solid #bdbdbd;
|
||||
border-top: 0.0625rem solid #bdbdbd;
|
||||
}
|
||||
}
|
||||
|
||||
@ -914,22 +914,22 @@ input[type="file"] {
|
||||
|
||||
.input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
bottom: 0.375rem;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
content: '';
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 2px;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
border-radius: 0.125rem;
|
||||
background: #fafafa;
|
||||
color: #212121;
|
||||
margin-left: -20px;
|
||||
margin-left: -1.25rem;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"] + label:hover:before, .input-group [type="checkbox"] + label:focus:before, .input-group [type="radio"] + label:hover:before, .input-group [type="radio"] + label:focus:before {
|
||||
@ -956,14 +956,51 @@ input[type="file"] {
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"]:checked + label:after, .input-group [type="radio"]:checked + label:after {
|
||||
margin-left: -20px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #212121;
|
||||
content: '';
|
||||
margin-left: -1.25rem;
|
||||
bottom: 0.625rem;
|
||||
left: 0.25rem;
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"] + label.switch:before, .input-group [type="radio"] + label.switch:before {
|
||||
bottom: 0.5rem;
|
||||
width: 1.75rem;
|
||||
height: 0.875rem;
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
background: #c9c9c9;
|
||||
margin-left: -2.375rem;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"] + label.switch:after, .input-group [type="radio"] + label.switch:after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background: #e0e0e0;
|
||||
border-radius: 100%;
|
||||
bottom: 0.3125rem;
|
||||
margin-left: -3rem;
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"]:checked + label.switch:before, .input-group [type="radio"]:checked + label.switch:before {
|
||||
background: #dcdcdc;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"]:checked + label.switch:after, .input-group [type="radio"]:checked + label.switch:after {
|
||||
left: 1.75rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
bottom: 0.3125rem;
|
||||
margin-left: -3rem;
|
||||
background: #0277bd;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -1019,13 +1056,13 @@ button.inverse:hover, button.inverse:focus, [type="button"].inverse:hover, [type
|
||||
|
||||
button.small, [type="button"].small, [type="submit"].small,
|
||||
[type="reset"].small, .button.small, [role="button"].small {
|
||||
border-radius: 1px;
|
||||
border-radius: 0.0625rem;
|
||||
padding: 0.25rem 0.375rem;
|
||||
}
|
||||
|
||||
button.large, [type="button"].large, [type="submit"].large,
|
||||
[type="reset"].large, .button.large, [role="button"].large {
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.75rem 1.125rem;
|
||||
}
|
||||
|
||||
@ -1079,7 +1116,7 @@ header.row {
|
||||
nav {
|
||||
display: block;
|
||||
background: #eceff1;
|
||||
border: 1px solid #c9c9c9;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
margin: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
@ -1098,10 +1135,10 @@ nav .sublink-1 {
|
||||
nav .sublink-1:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -1px;
|
||||
top: -0.0625rem;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #bdbdbd;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
@ -1113,10 +1150,10 @@ nav .sublink-2 {
|
||||
nav .sublink-2:before {
|
||||
position: absolute;
|
||||
left: 0.1875rem;
|
||||
top: -1px;
|
||||
top: -0.0625rem;
|
||||
content: '';
|
||||
height: 100%;
|
||||
border: 1px solid #bdbdbd;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
@ -1165,7 +1202,7 @@ footer.sticky {
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
background: #eceff1;
|
||||
border: 1px solid #c9c9c9;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
margin: 0;
|
||||
z-index: 1110;
|
||||
}
|
||||
@ -1222,7 +1259,7 @@ footer.sticky {
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: 1px solid #c9c9c9;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -1237,8 +1274,8 @@ table tr {
|
||||
|
||||
table th, table td {
|
||||
padding: 0.625rem;
|
||||
border-left: 1px solid #c9c9c9;
|
||||
border-top: 1px solid #c9c9c9;
|
||||
border-left: 0.0625rem solid #c9c9c9;
|
||||
border-top: 0.0625rem solid #c9c9c9;
|
||||
}
|
||||
|
||||
table td {
|
||||
@ -1277,14 +1314,14 @@ table th:first-child, table td:first-child {
|
||||
}
|
||||
table:not(.preset) tr {
|
||||
display: block;
|
||||
border: 1px solid #c9c9c9;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
background: #fafafa;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
table:not(.preset) td {
|
||||
display: block;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #c9c9c9;
|
||||
border-bottom: 0.0625rem solid #c9c9c9;
|
||||
text-align: right;
|
||||
}
|
||||
table:not(.preset) td:before {
|
||||
@ -1352,7 +1389,7 @@ table th:first-child, table td:first-child {
|
||||
}
|
||||
table.horizontal th, table.horizontal td {
|
||||
width: 100%;
|
||||
border: 1px solid #c9c9c9;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
}
|
||||
table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) {
|
||||
border-top: 0;
|
||||
@ -1422,7 +1459,7 @@ table th:first-child, table td:first-child {
|
||||
}
|
||||
table.horizontal.preset th, table.horizontal.preset td {
|
||||
width: 100%;
|
||||
border: 1px solid #c9c9c9;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
}
|
||||
table.horizontal.preset th:not(:first-child), table.horizontal.preset td:not(:first-child) {
|
||||
border-top: 0;
|
||||
@ -1464,7 +1501,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #fafafa;
|
||||
border: 1px solid #acacac;
|
||||
border: 0.0625rem solid #acacac;
|
||||
margin: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -1474,7 +1511,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid #c9c9c9;
|
||||
border-bottom: 0.0625rem solid #c9c9c9;
|
||||
padding: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
@ -1518,11 +1555,11 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
|
||||
.card.warning {
|
||||
background: #ffca28;
|
||||
border: 1px solid #e8b825;
|
||||
border: 0.0625rem solid #e8b825;
|
||||
}
|
||||
|
||||
.card.warning > .section {
|
||||
border-bottom: 1px solid #e8b825;
|
||||
border-bottom: 0.0625rem solid #e8b825;
|
||||
}
|
||||
|
||||
.card.warning > .section:last-child {
|
||||
@ -1532,11 +1569,11 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
.card.error {
|
||||
background: #b71c1c;
|
||||
color: #fafafa;
|
||||
border: 1px solid #a71a1a;
|
||||
border: 0.0625rem solid #a71a1a;
|
||||
}
|
||||
|
||||
.card.error > .section {
|
||||
border-bottom: 1px solid #a71a1a;
|
||||
border-bottom: 0.0625rem solid #a71a1a;
|
||||
}
|
||||
|
||||
.card.error > .section:last-child {
|
||||
@ -1582,7 +1619,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
cursor: pointer;
|
||||
transition: background 0.3s;
|
||||
background: #e6e6e6;
|
||||
border: 1px solid #bdbdbd;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
@ -1637,7 +1674,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
background: #fafafa;
|
||||
border: 1px solid #bdbdbd;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
border-top: 0;
|
||||
padding: 0.5rem;
|
||||
clip: auto;
|
||||
@ -1664,7 +1701,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
}
|
||||
|
||||
.tabs.stacked > label:not(:first-of-type) {
|
||||
border: 1px solid #bdbdbd;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
@ -1687,7 +1724,7 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
order: initial;
|
||||
}
|
||||
.tabs > label:not(:first-of-type) {
|
||||
border: 1px solid #bdbdbd;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
@ -1700,7 +1737,7 @@ mark {
|
||||
color: #fafafa;
|
||||
font-size: 0.9375em;
|
||||
line-height: 1em;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
padding: 0.125em 0.25em;
|
||||
}
|
||||
|
||||
@ -1770,7 +1807,7 @@ mark.inline-block {
|
||||
.tooltip:after {
|
||||
content: attr(aria-label);
|
||||
background: #212121;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
color: #fafafa;
|
||||
padding: 0.5rem;
|
||||
white-space: nowrap;
|
||||
@ -1869,15 +1906,15 @@ progress {
|
||||
width: calc(100% - 1rem);
|
||||
margin: 0.5rem 0.5rem;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
background: #e0e0e0;
|
||||
color: #0277bd;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background: #0277bd;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-top-left-radius: 0.125rem;
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
@ -1886,16 +1923,16 @@ progress::-webkit-progress-bar {
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
background: #0277bd;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-top-left-radius: 0.125rem;
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
}
|
||||
|
||||
progress[value="1000"]::-webkit-progress-value {
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
progress[value="1000"]::-moz-progress-bar {
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spinner-donut-anim {
|
||||
@ -2085,7 +2122,7 @@ ul.breadcrumbs li:last-child:after {
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 2px !important;
|
||||
border-radius: 0.125rem !important;
|
||||
}
|
||||
|
||||
.circular {
|
||||
@ -2125,7 +2162,7 @@ ul.breadcrumbs li:last-child:after {
|
||||
}
|
||||
|
||||
.shadowed {
|
||||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.125), 0 2px 2px -1px rgba(0, 0, 0, 0.25) !important;
|
||||
box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
|
||||
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
80
dist/mini-lite.css
vendored
80
dist/mini-lite.css
vendored
@ -118,7 +118,7 @@ hr {
|
||||
line-height: 1.25em;
|
||||
margin: 0.5rem;
|
||||
height: 0;
|
||||
border-top: 1px solid #8c8c8c;
|
||||
border-top: 0.0625rem solid #8c8c8c;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@ -146,21 +146,21 @@ code, kbd, pre, samp {
|
||||
}
|
||||
|
||||
code {
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
background: #e6e6e6;
|
||||
padding: 0.125rem 0.25rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
border-radius: 0 2px 2px 0;
|
||||
border-radius: 0 0.125rem 0.125rem 0;
|
||||
background: #e6e6e6;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
kbd {
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
background: #0c0c0c;
|
||||
color: #fafafa;
|
||||
padding: 0.125rem 0.25rem;
|
||||
@ -682,14 +682,14 @@ figcaption {
|
||||
*/
|
||||
form {
|
||||
background: #eeeeee;
|
||||
border: 1px solid #c9c9c9;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
margin: 0.5rem;
|
||||
padding: 0.75rem 0.5rem 1.125rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #d0d0d0;
|
||||
border-radius: 2px;
|
||||
border: 0.0625rem solid #d0d0d0;
|
||||
border-radius: 0.125rem;
|
||||
margin: 0.125rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
@ -735,8 +735,8 @@ input:not([type]), [type="text"], [type="email"], [type="number"], [type="search
|
||||
box-sizing: border-box;
|
||||
background: #fafafa;
|
||||
color: #212121;
|
||||
border: 1px solid #c9c9c9;
|
||||
border-radius: 2px;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
border-radius: 0.125rem;
|
||||
margin: 0.25rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
@ -797,7 +797,7 @@ a[role="button"], label[role="button"], [role="button"] {
|
||||
background: rgba(220, 220, 220, 0.75);
|
||||
color: #212121;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin: 0.5rem;
|
||||
text-decoration: none;
|
||||
@ -845,22 +845,22 @@ input[type="file"] {
|
||||
|
||||
.input-group [type="checkbox"] + label, .input-group [type="radio"] + label {
|
||||
position: relative;
|
||||
margin-left: 20px;
|
||||
margin-left: 1.25rem;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"] + label:before, .input-group [type="radio"] + label:before {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
bottom: 0.375rem;
|
||||
left: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
content: '';
|
||||
border: 1px solid #bdbdbd;
|
||||
border-radius: 2px;
|
||||
border: 0.0625rem solid #bdbdbd;
|
||||
border-radius: 0.125rem;
|
||||
background: #fafafa;
|
||||
color: #212121;
|
||||
margin-left: -20px;
|
||||
margin-left: -1.25rem;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"] + label:hover:before, .input-group [type="checkbox"] + label:focus:before, .input-group [type="radio"] + label:hover:before, .input-group [type="radio"] + label:focus:before {
|
||||
@ -887,14 +887,14 @@ input[type="file"] {
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"]:checked + label:after, .input-group [type="radio"]:checked + label:after {
|
||||
margin-left: -20px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #212121;
|
||||
content: '';
|
||||
margin-left: -1.25rem;
|
||||
bottom: 0.625rem;
|
||||
left: 0.25rem;
|
||||
width: 0.625rem;
|
||||
height: 0.625rem;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -938,13 +938,13 @@ button.tertiary:hover, button.tertiary:focus, [type="button"].tertiary:hover, [t
|
||||
|
||||
button.small, [type="button"].small, [type="submit"].small,
|
||||
[type="reset"].small, .button.small, [role="button"].small {
|
||||
border-radius: 1px;
|
||||
border-radius: 0.0625rem;
|
||||
padding: 0.25rem 0.375rem;
|
||||
}
|
||||
|
||||
button.large, [type="button"].large, [type="submit"].large,
|
||||
[type="reset"].large, .button.large, [role="button"].large {
|
||||
border-radius: 4px;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.75rem 1.125rem;
|
||||
}
|
||||
|
||||
@ -1028,7 +1028,7 @@ footer.sticky {
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: 1px solid #c9c9c9;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -1043,8 +1043,8 @@ table tr {
|
||||
|
||||
table th, table td {
|
||||
padding: 0.625rem;
|
||||
border-left: 1px solid #c9c9c9;
|
||||
border-top: 1px solid #c9c9c9;
|
||||
border-left: 0.0625rem solid #c9c9c9;
|
||||
border-top: 0.0625rem solid #c9c9c9;
|
||||
}
|
||||
|
||||
table td {
|
||||
@ -1083,14 +1083,14 @@ table th:first-child, table td:first-child {
|
||||
}
|
||||
table:not(.preset) tr {
|
||||
display: block;
|
||||
border: 1px solid #c9c9c9;
|
||||
border: 0.0625rem solid #c9c9c9;
|
||||
background: #fafafa;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
table:not(.preset) td {
|
||||
display: block;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #c9c9c9;
|
||||
border-bottom: 0.0625rem solid #c9c9c9;
|
||||
text-align: right;
|
||||
}
|
||||
table:not(.preset) td:before {
|
||||
@ -1122,7 +1122,7 @@ table th:first-child, table td:first-child {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: #fafafa;
|
||||
border: 1px solid #acacac;
|
||||
border: 0.0625rem solid #acacac;
|
||||
margin: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -1132,7 +1132,7 @@ table th:first-child, table td:first-child {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid #c9c9c9;
|
||||
border-bottom: 0.0625rem solid #c9c9c9;
|
||||
padding: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
@ -1178,7 +1178,7 @@ mark {
|
||||
color: #fafafa;
|
||||
font-size: 0.9375em;
|
||||
line-height: 1em;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
padding: 0.125em 0.25em;
|
||||
}
|
||||
|
||||
@ -1222,15 +1222,15 @@ progress {
|
||||
width: calc(100% - 1rem);
|
||||
margin: 0.5rem 0.5rem;
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
background: #e0e0e0;
|
||||
color: #0277bd;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background: #0277bd;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-top-left-radius: 0.125rem;
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
@ -1239,16 +1239,16 @@ progress::-webkit-progress-bar {
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
background: #0277bd;
|
||||
border-top-left-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-top-left-radius: 0.125rem;
|
||||
border-bottom-left-radius: 0.125rem;
|
||||
}
|
||||
|
||||
progress[value="1000"]::-webkit-progress-value {
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
progress[value="1000"]::-moz-progress-bar {
|
||||
border-radius: 2px;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -1312,7 +1312,7 @@ progress.tertiary::-moz-progress-bar {
|
||||
}
|
||||
|
||||
.rounded {
|
||||
border-radius: 2px !important;
|
||||
border-radius: 0.125rem !important;
|
||||
}
|
||||
|
||||
.circular {
|
||||
|
||||
2
dist/mini-lite.min.css
vendored
2
dist/mini-lite.min.css
vendored
File diff suppressed because one or more lines are too long
37
dist/mini-nord.css
vendored
37
dist/mini-nord.css
vendored
@ -972,14 +972,47 @@ input[type="file"] {
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"]:checked + label:after, .input-group [type="radio"]:checked + label:after {
|
||||
margin-left: -20px;
|
||||
position: absolute;
|
||||
background: #2E3440;
|
||||
content: '';
|
||||
margin-left: -20px;
|
||||
bottom: 10px;
|
||||
left: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #2E3440;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"] + label.switch:before, .input-group [type="radio"] + label.switch:before {
|
||||
bottom: 8px;
|
||||
width: 28px;
|
||||
height: 14px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: #D8DEE9;
|
||||
margin-left: -38px;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"] + label.switch:after, .input-group [type="radio"] + label.switch:after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #ECEFF4;
|
||||
border-radius: 100%;
|
||||
bottom: 5px;
|
||||
margin-left: -48px;
|
||||
transition: left 0.3s;
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"]:checked + label.switch:after, .input-group [type="radio"]:checked + label.switch:after {
|
||||
left: 28px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
bottom: 5px;
|
||||
margin-left: -48px;
|
||||
background: #5E81AC;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
2
dist/mini-nord.min.css
vendored
2
dist/mini-nord.min.css
vendored
File diff suppressed because one or more lines are too long
6
dist/mini-sucroa.css
vendored
6
dist/mini-sucroa.css
vendored
@ -976,14 +976,14 @@ input[type="file"] {
|
||||
}
|
||||
|
||||
.input-group [type="checkbox"]:checked + label:after, .input-group [type="radio"]:checked + label:after {
|
||||
margin-left: -20px;
|
||||
position: absolute;
|
||||
background: #211423;
|
||||
content: '';
|
||||
margin-left: -20px;
|
||||
bottom: 7px;
|
||||
left: 4px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #211423;
|
||||
content: '';
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
2
dist/mini-sucroa.min.css
vendored
2
dist/mini-sucroa.min.css
vendored
File diff suppressed because one or more lines are too long
100
docs/demo.html
Normal file
100
docs/demo.html
Normal file
@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="../dist/mini-default.min.css">
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</title>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
|
||||
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
||||
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
||||
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
||||
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.png">
|
||||
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
||||
<style>
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
||||
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
||||
#logo-body { position: relative; background: -webkit-linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); background: linear-gradient(#07020d 25%, #150627 45%, #220a40 75%, #300d5a); height: -webkit-calc(100vh - 48px); height: calc(100vh - 48px); overflow: hidden; text-align: center; }
|
||||
#description { color: #f5f5f5; font-family: 'Noto Sans', sans-serif; position: absolute; top: 49vh; width: 100%; margin: 0; }
|
||||
#top-heading { color: #f5f5f5; font-size: 2.8em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); position: absolute; margin: 0; top: 35vh; width: 100%; height: 20vh; min-height: 42px; font-family: 'Noto Sans', sans-serif; }
|
||||
#top-vtag-cont { width: 100%; text-align: center; }
|
||||
#top-version-tag { padding: 8px 8px; font-size: 1.2em; font-weight: 700; font-family: 'Noto Sans', sans-serif; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); position: absolute; top: 55vh; width: 40px; background: #4527a0; border-radius: 6px; margin: 0; margin-left: -30px; }
|
||||
@media screen and (max-height:480px), screen and (max-width: 480px) { #top-version-tag { display: none; } #description { top: 60vh;}}
|
||||
#mt1 { position: absolute; bottom: 0; left: -7vw; width: 0; height: 0; border-left: 12vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #07020d; }
|
||||
#mt1:after { content: ""; position: absolute; left: -1.4vw; border-left: 1.4vw solid transparent; border-right: 11vw solid transparent; border-bottom: 8.5vw solid #150627; z-index: 2; }
|
||||
#mt2 { position: absolute; bottom: -0.4vw; left: 10vw; width: 0; height: 0; border-left: 7vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #120520; z-index: 3; }
|
||||
#mt2:after { content: ""; position: absolute; left: -1.3vw; border-left: 1.3vw solid transparent; border-right: 10vw solid transparent; border-bottom: 7vw solid #1b0833; z-index: 4; }
|
||||
#mt3 { position: absolute; bottom: 0; right: 17.75vw; width: 0; height: 0; border-left: 8vw solid transparent; border-right: 7vw solid transparent; border-bottom: 6vw solid #1b0833; z-index: 5; }
|
||||
#mt3:after { content: ""; position: absolute; left: -8vw; border-left: 8vw solid transparent; border-right: 1.4vw solid transparent; border-bottom: 6vw solid #220a40; z-index: 6; }
|
||||
#mt4 { position: absolute; bottom: -0.25vw; right: 8vw; width: 0; height: 0; border-left: 7.5vw solid transparent; border-right: 7.25vw solid transparent; border-bottom: 6.5vw solid #150627; z-index: 3;}
|
||||
#mt4:after { content: ""; position: absolute; left: -7.5vw; border-left: 7.5vw solid transparent; border-right: 1.7vw solid transparent; border-bottom: 6.5vw solid #1f0a3b; z-index: 2;}
|
||||
#mt5 { position: absolute; bottom: 0; right: -6.5vw; width: 0; height: 0; border-left: 9vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 8vw solid #0e041a; }
|
||||
#mt5:after { content: ""; position: absolute; left: -9vw; border-left: 9vw solid transparent; border-right: 2vw solid transparent; border-bottom: 8vw solid #1b0833; z-index: 2; }
|
||||
@media screen and (max-width: 767px) {
|
||||
#mt1 { left: -10.5vw; border-left: 18vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #07020d; }
|
||||
#mt1:after { left: -2.1vw; border-left: 2.1vw solid transparent; border-right: 16.5vw solid transparent; border-bottom: 12.75vw solid #150627; }
|
||||
#mt2 { bottom: -0.6vw; left: 15vw; border-left: 10.5vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #120520; }
|
||||
#mt2:after { left: -1.95vw; border-left: 1.95vw solid transparent; border-right: 15vw solid transparent; border-bottom: 10.5vw solid #1b0833; }
|
||||
#mt3 { right: 26.625vw; border-left: 12vw solid transparent; border-right: 10.5vw solid transparent; border-bottom: 9vw solid #1b0833; }
|
||||
#mt3:after { left: -12vw; border-left: 12vw solid transparent; border-right: 2.1vw solid transparent; border-bottom: 9vw solid #220a40; }
|
||||
#mt4 { bottom: -0.375vw; right: 12vw; border-left: 11.25vw solid transparent; border-right: 10.875vw solid transparent; border-bottom: 9.75vw solid #150627; }
|
||||
#mt4:after { left: -11.25vw; border-left: 11.25vw solid transparent; border-right: 2.55vw solid transparent; border-bottom: 9.75vw solid #1f0a3b; }
|
||||
#mt5 { right: -9.75vw; border-left: 13.5vw solid transparent; border-right: 15.75vw solid transparent; border-bottom: 12vw solid #0e041a; }
|
||||
#mt5:after { left: -13.5vw; border-left: 13.5vw solid transparent; border-right: 3vw solid transparent; border-bottom: 12vw solid #1b0833;}
|
||||
}
|
||||
#codename { position: absolute; bottom: 2px; right: 3px; color: #616161; z-index: 5; font-size: 0.55em; font-family: 'Noto Sans', sans-serif; }
|
||||
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
||||
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
||||
.box-colored.red { background: #e53935; } .box-centered { text-align: center; }
|
||||
.box-centered > .card.fluid { -webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start;
|
||||
justify-content: flex-start; -webkit-align-self: auto; align-self: auto;}
|
||||
[class^='col-'] .card.fluid { margin: 2px 0 20px; } [class^='fore-'] { font-family: monospace, monospace;}
|
||||
.fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;} li a { text-decoration: none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="logo-body">
|
||||
<p id="description">minimal, responsive, style-agnostic CSS framework</p>
|
||||
<h1 id="top-heading"><span style="font-size: 1.45em; font-family: 'Noto Sans', sans-serif;">m</span>ini<span style="font-size:0.65em; color: #4527a0; font-family: 'Noto Sans', sans-serif;">.css</span></h1>
|
||||
<p id="top-vtag-cont"><mark id="top-version-tag">v2.2</mark></p>
|
||||
<div id="mt1"></div><div id="mt2"></div><div id="mt3"></div><div id="mt4"></div><div id="mt5"></div>
|
||||
<small id="codename">Fermion</small>
|
||||
</div>
|
||||
<header class="sticky">
|
||||
<a href="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">Quick Reference</a>
|
||||
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</header>
|
||||
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<!-- Insert your page content here-->
|
||||
<main>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-sm-11">
|
||||
<label for="check1" style="width: 280px;">Switch label </label>
|
||||
</div>
|
||||
<div class="col-sm-1 input-group">
|
||||
<input type="checkbox" id="check1" tabindex="0">
|
||||
<label for="check1" class="switch"></label>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="input-group">
|
||||
<input type="checkbox" id="check2" tabindex="0">
|
||||
<label for="check2">asd</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- End of page content-->
|
||||
<footer style="text-align: justify;"><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.<br/>
|
||||
<small>Icons made by <a href="http://www.freepik.com" title="Freepik"><small>Freepik</small></a> from <a href="http://www.flaticon.com" title="Flaticon"><small>www.flaticon.com</small></a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank"><small>CC 3.0 BY</small></a></small></footer>
|
||||
</body>
|
||||
</html>
|
||||
2
docs/mini-default.min.css
vendored
2
docs/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1227,3 +1227,11 @@
|
||||
- Added navigation for `modal` component.
|
||||
- Documented customization of `modal` component.
|
||||
- Added accessibility guidelines for `modal` component.
|
||||
|
||||
## 20170608
|
||||
|
||||
- Added a calculated `$_1px` variable to fully transition to `rem` units.
|
||||
- Altered everything that was `px`-based to `rem`-based values in `mini-default`, `mini-dark` and `mini-lite`.
|
||||
- Altered `input_control`'s `checkbox` components to properly work with the latest changes to the unit system.
|
||||
- Completed `.switch` component, total size (gzipped) is `0.10KB`.
|
||||
- Updated `mini-default` with `.switch`, other flavors, too, following their logical addition pattern.
|
||||
|
||||
@ -14,6 +14,7 @@ $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
|
||||
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
||||
$_1px: (1px/$base-root-font-size) * 1rem; // Calculated rem value of 1px [1]
|
||||
$base-font-size: 1rem; // Default font sizing for all elements [2]
|
||||
$base-line-height: 1.5; // Default line height for all elements.
|
||||
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
|
||||
@ -38,20 +39,20 @@ $list-left-padding: 1rem; // Left padding for <ol> and <ul> elements
|
||||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||
$horizontal-rule-margin: 0.5rem; // <hr> margin
|
||||
$horizontal-rule-border-style: 1px solid #9e9e9e;// Border style for horizontal rules (used in the <hr> element's border-top)
|
||||
$horizontal-rule-border-style: $_1px solid #9e9e9e;// 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]
|
||||
$horizontal-rule-fancy-gradient:"to right, #616161, #9e9e9e, #616161"; // Gradient style for fancy horizontal rule
|
||||
$blockquote-back-color: #232e33; // Background color for <blockquote>
|
||||
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
|
||||
$blockquote-margin: 0.5rem; // Margin for <blockquote>
|
||||
$blockquote-padding: 0.5rem 0.5rem 1.5rem; // Padding for <blockquote>
|
||||
$blockquote-sidebar-style: 4px solid #192024; // Style for the sidebar of <blockquote>
|
||||
$blockquote-sidebar-style: 4*$_1px solid #192024;// Style for the sidebar of <blockquote>
|
||||
$blockquote-cite-font-size: 0.875rem; // Font size for citation of <blockquote>
|
||||
$blockquote-cite-fore-color: #acacac; // Text color for citation of <blockquote>
|
||||
$blockquote-cite-left-position: 0.625rem; // Left padding for citation of <blockquote>
|
||||
$blockquote-cite-bottom-position: 0; // Bottom padding for citation of <blockquote>
|
||||
$blockquote-border-style: 0; // Border style for <blockquote>
|
||||
$blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote>
|
||||
$blockquote-border-radius: 0 2*$_1px 2*$_1px 0; // Border radius for <blockquote>
|
||||
$blockquote-box-shadow: none; // Box shadow for <blockquote>
|
||||
$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
|
||||
@ -59,17 +60,17 @@ $code-element-padding: 0.125rem 0.25rem; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
$code-element-back-color: #20292e; // Background color for <code>
|
||||
$code-element-border-style: 0; // Border style for <code>
|
||||
$code-element-border-radius: 2px; // Border radius for <code>
|
||||
$code-element-border-radius: 2*$_1px; // Border radius for <code>
|
||||
$code-element-box-shadow: none; // Box shadow for <code>
|
||||
$pre-element-padding: 0.75rem; // Padding for <pre>
|
||||
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||
$pre-element-border-style: 0; // Border style for <pre>
|
||||
$pre-element-border-radius: 0 2px 2px 0;; // Border radius for <pre>
|
||||
$pre-element-border-radius: 0 2*$_1px 2*$_1px 0; // Border radius for <pre>
|
||||
$pre-element-margin: 0.5rem; // Margin for <pre>
|
||||
$pre-element-box-shadow: none; // Box shadow for <pre>
|
||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
||||
$pre-element-sidebar-style: 4px solid #01579b; // Style of the sidebar of <pre>
|
||||
$pre-element-sidebar-style: 4*$_1px solid #01579b;// Style of the sidebar of <pre>
|
||||
$kbd-element-padding: $code-element-padding; // Padding for <kbd>
|
||||
$kbd-element-fore-color: #0c0c0c; // Text color for <kbd>
|
||||
$kbd-element-back-color: #fafafa; // Background color for <kbd>
|
||||
@ -100,7 +101,8 @@ $figcaption-font-size: 0.8125rem; // Font size of <figcaption> elements
|
||||
$figcaption-fore-color: #acacac; // Text color for <figcaption> elements
|
||||
// Notes:
|
||||
// [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.
|
||||
// element's font sizing. The value of $_1px is calculated based on the value of $base-root-font-size, please do not alter
|
||||
// the way that it's calculated.
|
||||
// [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
|
||||
// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
|
||||
@ -149,14 +151,14 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #1c2529; // Background color for forms
|
||||
$form-fore-color: #9e9e9e; // Text color for forms
|
||||
$form-border-style: 1px solid #20292e; // Border style for forms
|
||||
$form-border-style: $_1px solid #20292e; // Border style for forms
|
||||
$form-border-radius: 0; // Border radius for forms
|
||||
$form-margin: 0.5rem; // Margin for forms
|
||||
$form-padding: 0.75rem 0.5rem 1.125rem; // Padding for forms
|
||||
$form-box-shadow: none; // Box shadow for forms
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: 1px solid #263238; // Border style for fieldset
|
||||
$fieldset-border-radius:2px; // Border radius for fieldset
|
||||
$fieldset-border-style: $_1px solid #263238; // Border style for fieldset
|
||||
$fieldset-border-radius:2*$_1px; // Border radius for fieldset
|
||||
$fieldset-margin: 0.125rem; // Margin for fieldset
|
||||
$fieldset-padding: 0.5rem; // Padding for fieldset
|
||||
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||
@ -170,8 +172,8 @@ $input-group-fluid-name:'fluid'; // Class name for fluid input groups
|
||||
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
|
||||
$input-back-color: #39444a; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: 1px solid #263238; // Border style for input
|
||||
$input-border-radius: 2px; // Border radius for input
|
||||
$input-border-style: $_1px solid #263238; // Border style for input
|
||||
$input-border-radius: 2*$_1px; // Border radius for input
|
||||
$input-margin: 0.25rem; // Margin for input
|
||||
$input-padding: 0.5rem 0.75rem; // Padding for input
|
||||
$input-focus-border-color: #0288d1; // Border color for focused input
|
||||
@ -185,14 +187,14 @@ $button-back-opacity: 0.75; // Background opacity for button element
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 0; // Border style for button elements
|
||||
$button-border-radius: 2px; // Border radius for button elements
|
||||
$button-border-radius: 2*$_1px; // Border radius for button elements
|
||||
$button-padding: 0.5rem 0.75rem; // Padding for button elements
|
||||
$button-margin: 0.5rem; // Margin for button elements
|
||||
$button-box-shadow: none; // Box shadow for buttons
|
||||
$button-disabled-opacity: 0.75; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$button-group-name: 'button-group'; // Class for button groups
|
||||
$button-group-border-style: 1px solid #263238; // Border style for button groups
|
||||
$button-group-border-style: $_1px solid #263238; // Border style for button groups
|
||||
$button-group-margin: $button-margin; // Margin for button groups
|
||||
$button-group-box-shadow: none; // Box shadow for button groups
|
||||
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
||||
@ -219,23 +221,38 @@ $button-variant4-hover-back-opacity: 1; // Background opacity for button va
|
||||
$button-variant4-fore-color: #0c0c0c; // Text color for button variant 4
|
||||
$button-style1-name: 'small'; // Class name for button style 1
|
||||
$button-style1-border-style: 0; // Border style for button style 1
|
||||
$button-style1-border-radius: 1px; // Border radius for button style 1
|
||||
$button-style1-border-radius: $_1px; // Border radius for button style 1
|
||||
$button-style1-padding: 0.25rem 0.375rem; // Padding for button style 1
|
||||
$button-style1-margin: 0.5rem; // Margin for button style 1
|
||||
$button-style2-name: 'large'; // Class name for button style 2
|
||||
$button-style2-border-style: 0; // Border style for button style 2
|
||||
$button-style2-border-radius: 4px; // Border radius for button style 2
|
||||
$button-style2-border-radius: 4*$_1px; // Border radius for button style 2
|
||||
$button-style2-padding: 0.75rem 1.125rem; // Padding for button style 2
|
||||
$button-style2-margin: 0.5rem; // Margin for button style 2
|
||||
$checkbox-size: $base-root-font-size; // Size for checkbox/radio [3]
|
||||
$checkbox-size: 1rem; // Size for checkbox/radio [3]
|
||||
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
|
||||
$checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
|
||||
$checkbox-border-thickness: $_1px; // Border thickness for checkbox/radio
|
||||
$checkbox-border-color: #1c2529; // Border color for checkbox/radio
|
||||
$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
|
||||
$checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
|
||||
$checkbox-bottom-spacing: 6px; // Bottom spacing for checkbox/radio
|
||||
$checkbox-bottom-spacing: 0.375rem; // Bottom spacing for checkbox/radio
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled checkbox/radio
|
||||
$include-switch: true; // Should switch components be included? (`true`/`false`)
|
||||
$switch-name: 'switch'; // Class name for switch components
|
||||
$switch-bar-back-color: #324148; // Back color for the switch's bar
|
||||
$switch-on-bar-back-color: #39444a; // Back color for the switch's bar when the switch is turned on
|
||||
$switch-bar-width: 1.75rem; // Width for the switch's bar
|
||||
$switch-bar-height: 0.875rem; // Height for the switch's bar
|
||||
$switch-bar-border-style: 0; // Border style for the switch's bar
|
||||
$switch-bar-border-radius: 0.5rem; // Borer radius for the switch's bar
|
||||
$switch-bottom-spacing: 0.5rem; // Bottom spacing for the switch's bar
|
||||
$switch-knob-back-color: #39444a; // Back color for the switch's knob
|
||||
$switch-on-knob-back-color: #0277bd; // Back color for the switch's knob when the switch is turned on
|
||||
$switch-knob-width: 1.25rem; // Width for the switch's knob
|
||||
$switch-knob-height: 1.25rem; // Height for the switch's knob
|
||||
$switch-knob-border-style: 0; // Border style for the switch's knob
|
||||
$switch-knob-border-radius: 100%; // Borer radius for the switch's knob
|
||||
// Notes:
|
||||
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
||||
// specified in the corresponding variables.
|
||||
@ -263,7 +280,7 @@ $include-header-sticky: true; // Should sticky <header> elements be i
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #37474f; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: 1px solid #324148; // Border style for <nav>
|
||||
$nav-border-style: $_1px solid #324148; // Border style for <nav>
|
||||
$nav-border-radius: 0; // Border radius for <nav>
|
||||
$nav-padding: 0.75rem 1rem; // Padding for <nav>
|
||||
$nav-margin: 0.5rem; // Margin for <nav>
|
||||
@ -274,7 +291,7 @@ $nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left: 1rem; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-width: $_1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #616161; // Subcategory bar color
|
||||
$drawer-name: 'drawer'; // Class name for the drawer component
|
||||
$drawer-back-color: $nav-back-color; // Background color of the drawer component
|
||||
@ -311,7 +328,7 @@ $footer-sticky-name: 'sticky'; // Class name for sticky <footer> eleme
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: 1px solid #1c2529; // Border style for <table> and children
|
||||
$table-border-style: $_1px solid #1c2529; // Border style for <table> and children
|
||||
$table-border-radius: 0; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: none; // Box shadow for <table>
|
||||
@ -342,12 +359,12 @@ $table-striped-alt-body-back-color: #263238; // Alternate background color fo
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #232e33; // Background color for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: 1px solid #616161; // Border style for cards
|
||||
$card-border-style: $_1px solid #616161; // Border style for cards
|
||||
$card-border-radius: 0; // Border radius for cards
|
||||
$card-margin: 0.5rem; // Margin for cards
|
||||
$card-box-shadow: none; // Box shadow for cards
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: 1px solid #757575; // Border style for card sections
|
||||
$card-section-border-style: $_1px solid #757575; // Border style for card sections
|
||||
$card-section-padding: 0.5rem; // Padding for card sections
|
||||
$card-section-media-name: 'media'; // Class name for card media sections
|
||||
$card-section-media-height: 200px; // Height for card media setions
|
||||
@ -361,15 +378,15 @@ $card-size3-width: 100%; // Width for fluid cards
|
||||
$card-style1-name: 'warning'; // Class name for card style 1
|
||||
$card-style1-back-color: #fff176; // Background color for card style 1
|
||||
$card-style1-fore-color: $back-color; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #d1c661; // Border style for card style 1
|
||||
$card-style1-border-style: $_1px solid #d1c661; // Border style for card style 1
|
||||
$card-style1-border-radius: 0; // Border radius for card style 1
|
||||
$card-style1-section-border-style:1px solid #d1c661;// Border style for card style 1 sections
|
||||
$card-style1-section-border-style:$_1px solid #d1c661;// Border style for card style 1 sections
|
||||
$card-style2-name: 'error'; // Class name for card style 2
|
||||
$card-style2-back-color: #b71c1c; // Background color for card style 2
|
||||
$card-style2-fore-color: #fafafa; // Text color for card style 2
|
||||
$card-style2-border-style: 1px solid #a71a1a; // Border style for card style 2
|
||||
$card-style2-border-style: $_1px solid #a71a1a; // Border style for card style 2
|
||||
$card-style2-border-radius: 0; // Border radius for card style 2
|
||||
$card-style2-section-border-style:1px solid #a71a1a;// Border style for card style 2 sections
|
||||
$card-style2-section-border-style:$_1px solid #a71a1a;// Border style for card style 2 sections
|
||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||
$card-section-style1-back-color: #1d262a; // Background color for card section style 1
|
||||
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1
|
||||
@ -390,7 +407,7 @@ $tab-label-selected-fore-color: $fore-color; // Text color for open tab's lab
|
||||
$tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover
|
||||
$tab-label-padding: 0.75rem; // Padding for tabs' labels
|
||||
$tab-label-height: 1.5rem; // Height for tabs' labels
|
||||
$tab-border-style: 1px solid #757575; // Border style for tabs
|
||||
$tab-border-style: $_1px solid #757575;// Border style for tabs
|
||||
$tab-border-radius: 0; // Border radius for tabs
|
||||
$tab-panel-back-color: #232e33; // Background color for tabs' panels
|
||||
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
|
||||
@ -404,7 +421,7 @@ $mark-fore-color: #fafafa; // Text color for <mark>
|
||||
$mark-font-size: 0.9375em; // Font size for <mark>
|
||||
$mark-line-height: 1em; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2px; // Border radius for <mark>
|
||||
$mark-border-radius: 2*$_1px; // Border radius for <mark>
|
||||
$mark-padding: 0.125em 0.25em; // Padding for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: none; // Box shadow for <mark>
|
||||
@ -419,7 +436,7 @@ $mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||
$mark-style1-padding: 0.25em 0.5em; // 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
|
||||
$mark-style2-border-radius: 2*$_1px; // Border radius for <mark> style 2
|
||||
$mark-style2-padding: 0.375em; // Padding for <mark> style 2
|
||||
$mark-style2-font-size: 1em; // Font size for <mark> style 2
|
||||
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
|
||||
@ -443,7 +460,7 @@ $include-tooltip: true; // Should tooltips be included? (`true`/`f
|
||||
$tooltip-name: 'tooltip'; // Class name for the tooltip component
|
||||
$tooltip-back-color: $fore-color; // Background color for tooltips
|
||||
$tooltip-fore-color: #0c0c0c; // Text color for tooltips
|
||||
$tooltip-border-radius: 2px; // Border radius for tooltips
|
||||
$tooltip-border-radius: 2*$_1px; // Border radius for tooltips
|
||||
$tooltip-tail-size: 0.5rem; // The size of the tooltip's tail
|
||||
$tooltip-padding: 0.5rem; // Padding for tooltips
|
||||
$tooltip-box-shadow: none; // Box shadow for tooltip-box-shadow
|
||||
@ -467,7 +484,7 @@ $progress-fore-color: #0277bd; // Progress bar color for <progress>
|
||||
$progress-height: 1rem; // Height of <progress>
|
||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 2px; // Border radius for the <progress> container
|
||||
$progress-border-radius: 2*$_1px; // Border radius for the <progress> container
|
||||
$progress-top-bottom-margin: 0.5rem; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin: 0.5rem; // Left and right margin for <progress>
|
||||
$progress-box-shadow: none; // Box shadow for <progress>
|
||||
@ -503,17 +520,17 @@ $breadcrumbs-border-style: 0; // Border style for breadcrumbs
|
||||
$breadcrumbs-border-radius: 0; // Border radius for breadcrumbs
|
||||
$breadcrumbs-box-shadow: none; // Box shadow for breadcrumbs
|
||||
$close-icon-name: 'close'; // Class name for close icon
|
||||
$close-icon-size: 1.5rem; // Size of the close icon
|
||||
$close-icon-size: 1.5rem; // Size of the close icon
|
||||
$close-icon-back-color: #39444a; // Background color for the close icon
|
||||
$close-icon-fore-color: #fafafa; // Foreground color for the close icon
|
||||
$border-generic-name: 'bordered'; // Class name for generic border style
|
||||
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
||||
$border-radial-style1-radius: 2px; // Border radius for radial border style 1
|
||||
$border-radial-style1-radius: 2*$_1px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||
$box-shadow-style1-name: 'shadowed'; // Class name for generic box-shadow style 1
|
||||
$box-shadow-style1-name: 'shadowed'; // Class name for generic box-shadow style 1
|
||||
$box-shadow-style1-value: // Box shadow value for generic box-shadow style 1
|
||||
0 4px 4px 0 rgba(0, 0, 0, 0.125), 0 2px 2px -1px rgba(0, 0, 0, 0.25);
|
||||
0 4*$_1px 4*$_1px 0 rgba(0, 0, 0, 0.125), 0 2*$_1px 2*$_1px -2*$_1px rgba(0, 0, 0, 0.25);
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
$responsive-margin-small-value: 0.25rem; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value: 0.375rem; // Margin value for responsive margin on medium screens
|
||||
|
||||
@ -14,6 +14,7 @@ $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
|
||||
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
||||
$_1px: (1px/$base-root-font-size) * 1rem; // Calculated rem value of 1px [1]
|
||||
$base-font-size: 1rem; // Default font sizing for all elements [2]
|
||||
$base-line-height: 1.5; // Default line height for all elements.
|
||||
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
|
||||
@ -38,20 +39,20 @@ $list-left-padding: 1rem; // Left padding for <ol> and <ul> elements
|
||||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||
$horizontal-rule-margin: 0.5rem; // <hr> margin
|
||||
$horizontal-rule-border-style: 1px solid #8c8c8c;// Border style for horizontal rules (used in the <hr> element's border-top)
|
||||
$horizontal-rule-border-style: $_1px solid #8c8c8c;// 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]
|
||||
$horizontal-rule-fancy-gradient:"to right, #bdbdbd, #8c8c8c, #bdbdbd"; // Gradient style for fancy horizontal rule
|
||||
$blockquote-back-color: #eeeeee; // Background color for <blockquote>
|
||||
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
|
||||
$blockquote-margin: 0.5rem; // Margin for <blockquote>
|
||||
$blockquote-padding: 0.5rem 0.5rem 1.5rem; // Padding for <blockquote>
|
||||
$blockquote-sidebar-style: 4px solid #505050; // Style for the sidebar of <blockquote>
|
||||
$blockquote-cite-font-size: 0.875rem; // Font size for citation of <blockquote>
|
||||
$blockquote-sidebar-style: 4*$_1px solid #505050;// Style for the sidebar of <blockquote>
|
||||
$blockquote-cite-font-size: 0.875rem; // Font size for citation of <blockquote>
|
||||
$blockquote-cite-fore-color: #505050; // Text color for citation of <blockquote>
|
||||
$blockquote-cite-left-position: 0.625rem; // Left padding for citation of <blockquote>
|
||||
$blockquote-cite-bottom-position: 0; // Bottom padding for citation of <blockquote>
|
||||
$blockquote-border-style: 0; // Border style for <blockquote>
|
||||
$blockquote-border-radius: 0 2px 2px 0; // Border radius for <blockquote>
|
||||
$blockquote-border-radius: 0 2*$_1px 2*$_1px 0; // Border radius for <blockquote>
|
||||
$blockquote-box-shadow: none; // Box shadow for <blockquote>
|
||||
$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
|
||||
@ -59,17 +60,17 @@ $code-element-padding: 0.125rem 0.25rem; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
$code-element-back-color: #e6e6e6; // Background color for <code>
|
||||
$code-element-border-style: 0; // Border style for <code>
|
||||
$code-element-border-radius: 2px; // Border radius for <code>
|
||||
$code-element-border-radius: 2*$_1px; // Border radius for <code>
|
||||
$code-element-box-shadow: none; // Box shadow for <code>
|
||||
$pre-element-padding: 0.75rem; // Padding for <pre>
|
||||
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||
$pre-element-border-style: 0; // Border style for <pre>
|
||||
$pre-element-border-radius: 0 2px 2px 0;; // Border radius for <pre>
|
||||
$pre-element-border-radius: 0 2*$_1px 2*$_1px 0;; // Border radius for <pre>
|
||||
$pre-element-margin: 0.5rem; // Margin for <pre>
|
||||
$pre-element-box-shadow: none; // Box shadow for <pre>
|
||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
||||
$pre-element-sidebar-style: 4px solid #1565c0; // Style of the sidebar of <pre>
|
||||
$pre-element-sidebar-style: 4*$_1px solid #1565c0;// Style of the sidebar of <pre>
|
||||
$kbd-element-padding: $code-element-padding; // Padding for <kbd>
|
||||
$kbd-element-fore-color: #fafafa; // Text color for <kbd>
|
||||
$kbd-element-back-color: #0c0c0c; // Background color for <kbd>
|
||||
@ -100,7 +101,8 @@ $figcaption-font-size: 0.8125rem; // Font size of <figcaption> elements
|
||||
$figcaption-fore-color: #424242; // Text color for <figcaption> elements
|
||||
// Notes:
|
||||
// [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.
|
||||
// element's font sizing. The value of $_1px is calculated based on the value of $base-root-font-size, please do not alter
|
||||
// the way that it's calculated.
|
||||
// [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
|
||||
// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
|
||||
@ -149,14 +151,14 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #eeeeee; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
$form-border-style: 1px solid #c9c9c9; // Border style for forms
|
||||
$form-border-style: $_1px solid #c9c9c9; // Border style for forms
|
||||
$form-border-radius: 0; // Border radius for forms
|
||||
$form-margin: 0.5rem; // Margin for forms
|
||||
$form-padding: 0.75rem 0.5rem 1.125rem; // Padding for forms
|
||||
$form-box-shadow: none; // Box shadow for forms
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: 1px solid #d0d0d0; // Border style for fieldset
|
||||
$fieldset-border-radius:2px; // Border radius for fieldset
|
||||
$fieldset-border-style: $_1px solid #d0d0d0; // Border style for fieldset
|
||||
$fieldset-border-radius:2*$_1px; // Border radius for fieldset
|
||||
$fieldset-margin: 0.125rem; // Margin for fieldset
|
||||
$fieldset-padding: 0.5rem; // Padding for fieldset
|
||||
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||
@ -170,8 +172,8 @@ $input-group-fluid-name:'fluid'; // Class name for fluid input groups
|
||||
$input-group-mobile-breakpoint: 767px; // Breakpoint for fluid input group mobile view
|
||||
$input-back-color: #fafafa; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: 1px solid #c9c9c9; // Border style for input
|
||||
$input-border-radius: 2px; // Border radius for input
|
||||
$input-border-style: $_1px solid #c9c9c9; // Border style for input
|
||||
$input-border-radius: 2*$_1px; // Border radius for input
|
||||
$input-margin: 0.25rem; // Margin for input
|
||||
$input-padding: 0.5rem 0.75rem; // Padding for input
|
||||
$input-focus-border-color: #0288d1; // Border color for focused input
|
||||
@ -185,14 +187,14 @@ $button-back-opacity: 0.75; // Background opacity for button element
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 0; // Border style for button elements
|
||||
$button-border-radius: 2px; // Border radius for button elements
|
||||
$button-border-radius: 2*$_1px; // Border radius for button elements
|
||||
$button-padding: 0.5rem 0.75rem; // Padding for button elements
|
||||
$button-margin: 0.5rem; // Margin for button elements
|
||||
$button-box-shadow: none; // Box shadow for buttons
|
||||
$button-disabled-opacity: 0.75; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$button-group-name: 'button-group'; // Class for button groups
|
||||
$button-group-border-style: 1px solid #bdbdbd; // Border style for button groups
|
||||
$button-group-border-style: $_1px solid #bdbdbd; // Border style for button groups
|
||||
$button-group-margin: $button-margin; // Margin for button groups
|
||||
$button-group-box-shadow: none; // Box shadow for button groups
|
||||
$button-group-mobile-breakpoint:767px; // Breakpoint for button group mobile view
|
||||
@ -219,23 +221,38 @@ $button-variant4-hover-back-opacity: 1; // Background opacity for button va
|
||||
$button-variant4-fore-color: #fafafa; // Text color for button variant 4
|
||||
$button-style1-name: 'small'; // Class name for button style 1
|
||||
$button-style1-border-style: 0; // Border style for button style 1
|
||||
$button-style1-border-radius: 1px; // Border radius for button style 1
|
||||
$button-style1-border-radius: $_1px; // Border radius for button style 1
|
||||
$button-style1-padding: 0.25rem 0.375rem; // Padding for button style 1
|
||||
$button-style1-margin: 0.5rem; // Margin for button style 1
|
||||
$button-style2-name: 'large'; // Class name for button style 2
|
||||
$button-style2-border-style: 0; // Border style for button style 2
|
||||
$button-style2-border-radius: 4px; // Border radius for button style 2
|
||||
$button-style2-border-radius: 4*$_1px; // Border radius for button style 2
|
||||
$button-style2-padding: 0.75rem 1.125rem; // Padding for button style 2
|
||||
$button-style2-margin: 0.5rem; // Margin for button style 2
|
||||
$checkbox-size: $base-root-font-size; // Size for checkbox/radio [3]
|
||||
$checkbox-size: 1rem; // Size for checkbox/radio [3]
|
||||
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
|
||||
$checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
|
||||
$checkbox-border-thickness: $_1px; // Border thickness for checkbox/radio
|
||||
$checkbox-border-color: #bdbdbd; // Border color for checkbox/radio
|
||||
$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
|
||||
$checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
|
||||
$checkbox-bottom-spacing: 6px; // Bottom spacing for checkbox/radio
|
||||
$checkbox-bottom-spacing: 0.375rem; // Bottom spacing for checkbox/radio
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled checkbox/radio
|
||||
$include-switch: true; // Should switch components be included? (`true`/`false`)
|
||||
$switch-name: 'switch'; // Class name for switch components
|
||||
$switch-bar-back-color: #c9c9c9; // Back color for the switch's bar
|
||||
$switch-on-bar-back-color: #dcdcdc; // Back color for the switch's bar when the switch is turned on
|
||||
$switch-bar-width: 1.75rem; // Width for the switch's bar
|
||||
$switch-bar-height: 0.875rem; // Height for the switch's bar
|
||||
$switch-bar-border-style: 0; // Border style for the switch's bar
|
||||
$switch-bar-border-radius: 0.5rem; // Borer radius for the switch's bar
|
||||
$switch-bottom-spacing: 0.5rem; // Bottom spacing for the switch's bar
|
||||
$switch-knob-back-color: #e0e0e0; // Back color for the switch's knob
|
||||
$switch-on-knob-back-color: #0277bd; // Back color for the switch's knob when the switch is turned on
|
||||
$switch-knob-width: 1.25rem; // Width for the switch's knob
|
||||
$switch-knob-height: 1.25rem; // Height for the switch's knob
|
||||
$switch-knob-border-style: 0; // Border style for the switch's knob
|
||||
$switch-knob-border-radius: 100%; // Borer radius for the switch's knob
|
||||
// Notes:
|
||||
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
||||
// specified in the corresponding variables.
|
||||
@ -263,7 +280,7 @@ $include-header-sticky: true; // Should sticky <header> elements be i
|
||||
$header-sticky-name: 'sticky'; // Class name for sticky <header>
|
||||
$nav-back-color: #eceff1; // Background for <nav>
|
||||
$nav-fore-color: $fore-color; // Text color for <nav>
|
||||
$nav-border-style: 1px solid #c9c9c9; // Border style for <nav>
|
||||
$nav-border-style: $_1px solid #c9c9c9; // Border style for <nav>
|
||||
$nav-border-radius: 0; // Border radius for <nav>
|
||||
$nav-padding: 0.75rem 1rem; // Padding for <nav>
|
||||
$nav-margin: 0.5rem; // Margin for <nav>
|
||||
@ -274,7 +291,7 @@ $nav-sublink-depth: 2; // Amount of subcategory classes to add
|
||||
$nav-sublink-padding-left: 1rem; // Left padding to add to subcategories
|
||||
$nav-include-sublink-bar: true; // Should a left border bar be added to subcategories (`true`/`false`) [2]
|
||||
$nav-sublink-bar-left-position: 0.1875rem; // Left position of subcategory bar
|
||||
$nav-sublink-bar-width: 1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-width: $_1px; // Width of the subcategory bar
|
||||
$nav-sublink-bar-color: #bdbdbd; // Subcategory bar color
|
||||
$drawer-name: 'drawer'; // Class name for the drawer component
|
||||
$drawer-back-color: $nav-back-color; // Background color of the drawer component
|
||||
@ -311,7 +328,7 @@ $footer-sticky-name: 'sticky'; // Class name for sticky <footer> eleme
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: 1px solid #c9c9c9; // Border style for <table> and children
|
||||
$table-border-style: $_1px solid #c9c9c9; // Border style for <table> and children
|
||||
$table-border-radius: 0; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: none; // Box shadow for <table>
|
||||
@ -342,12 +359,12 @@ $table-striped-alt-body-back-color: #e5e5e5; // Alternate background color fo
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #fafafa; // Background color for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: 1px solid #acacac; // Border style for cards
|
||||
$card-border-style: $_1px solid #acacac; // Border style for cards
|
||||
$card-border-radius: 0; // Border radius for cards
|
||||
$card-margin: 0.5rem; // Margin for cards
|
||||
$card-box-shadow: none; // Box shadow for cards
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: 1px solid #c9c9c9; // Border style for card sections
|
||||
$card-section-border-style: $_1px solid #c9c9c9; // Border style for card sections
|
||||
$card-section-padding: 0.5rem; // Padding for card sections
|
||||
$card-section-media-name: 'media'; // Class name for card media sections
|
||||
$card-section-media-height: 200px; // Height for card media setions
|
||||
@ -361,15 +378,15 @@ $card-size3-width: 100%; // Width for fluid cards
|
||||
$card-style1-name: 'warning'; // Class name for card style 1
|
||||
$card-style1-back-color: #ffca28; // Background color for card style 1
|
||||
$card-style1-fore-color: $fore-color; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #e8b825; // Border style for card style 1
|
||||
$card-style1-border-style: $_1px solid #e8b825; // Border style for card style 1
|
||||
$card-style1-border-radius: 0; // Border radius for card style 1
|
||||
$card-style1-section-border-style:1px solid #e8b825;// Border style for card style 1 sections
|
||||
$card-style1-section-border-style:$_1px solid #e8b825;// Border style for card style 1 sections
|
||||
$card-style2-name: 'error'; // Class name for card style 2
|
||||
$card-style2-back-color: #b71c1c; // Background color for card style 2
|
||||
$card-style2-fore-color: #fafafa; // Text color for card style 2
|
||||
$card-style2-border-style: 1px solid #a71a1a; // Border style for card style 2
|
||||
$card-style2-border-style: $_1px solid #a71a1a; // Border style for card style 2
|
||||
$card-style2-border-radius: 0; // Border radius for card style 2
|
||||
$card-style2-section-border-style:1px solid #a71a1a;// Border style for card style 2 sections
|
||||
$card-style2-section-border-style:$_1px solid #a71a1a;// Border style for card style 2 sections
|
||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||
$card-section-style1-back-color: #e0e0e0; // Background color for card section style 1
|
||||
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1
|
||||
@ -390,7 +407,7 @@ $tab-label-selected-fore-color: $fore-color; // Text color for open tab's lab
|
||||
$tab-label-hover-opacity: 0.8; // Opacity of the tab's label on hover
|
||||
$tab-label-padding: 0.75rem; // Padding for tabs' labels
|
||||
$tab-label-height: 1.5rem; // Height for tabs' labels
|
||||
$tab-border-style: 1px solid #bdbdbd; // Border style for tabs
|
||||
$tab-border-style: $_1px solid #bdbdbd; // Border style for tabs
|
||||
$tab-border-radius: 0; // Border radius for tabs
|
||||
$tab-panel-back-color: #fafafa; // Background color for tabs' panels
|
||||
$tab-panel-fore-color: $fore-color; // Text color for tabs' panels
|
||||
@ -404,7 +421,7 @@ $mark-fore-color: #fafafa; // Text color for <mark>
|
||||
$mark-font-size: 0.9375em; // Font size for <mark>
|
||||
$mark-line-height: 1em; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2px; // Border radius for <mark>
|
||||
$mark-border-radius: 2*$_1px; // Border radius for <mark>
|
||||
$mark-padding: 0.125em 0.25em; // Padding for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: none; // Box shadow for <mark>
|
||||
@ -419,7 +436,7 @@ $mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||
$mark-style1-padding: 0.25em 0.5em; // 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
|
||||
$mark-style2-border-radius: 2*$_1px; // Border radius for <mark> style 2
|
||||
$mark-style2-padding: 0.375em; // Padding for <mark> style 2
|
||||
$mark-style2-font-size: 1em; // Font size for <mark> style 2
|
||||
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
|
||||
@ -443,7 +460,7 @@ $include-tooltip: true; // Should tooltips be included? (`true`/`f
|
||||
$tooltip-name: 'tooltip'; // Class name for the tooltip component
|
||||
$tooltip-back-color: $fore-color; // Background color for tooltips
|
||||
$tooltip-fore-color: #fafafa; // Text color for tooltips
|
||||
$tooltip-border-radius: 2px; // Border radius for tooltips
|
||||
$tooltip-border-radius: 2*$_1px; // Border radius for tooltips
|
||||
$tooltip-tail-size: 0.5rem; // The size of the tooltip's tail
|
||||
$tooltip-padding: 0.5rem; // Padding for tooltips
|
||||
$tooltip-box-shadow: none; // Box shadow for tooltip-box-shadow
|
||||
@ -467,7 +484,7 @@ $progress-fore-color: #0277bd; // Progress bar color for <progress>
|
||||
$progress-height: 0.625rem; // Height of <progress>
|
||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 2px; // Border radius for the <progress> container
|
||||
$progress-border-radius: 2*$_1px; // Border radius for the <progress> container
|
||||
$progress-top-bottom-margin: 0.5rem; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin: 0.5rem; // Left and right margin for <progress>
|
||||
$progress-box-shadow: none; // Box shadow for <progress>
|
||||
@ -508,12 +525,12 @@ $close-icon-back-color: #e6e6e6; // Background color for the close icon
|
||||
$close-icon-fore-color: #212121; // Foreground color for the close icon
|
||||
$border-generic-name: 'bordered'; // Class name for generic border style
|
||||
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
||||
$border-radial-style1-radius: 2px; // Border radius for radial border style 1
|
||||
$border-radial-style1-radius: 2*$_1px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||
$box-shadow-style1-name: 'shadowed'; // Class name for generic box-shadow style 1
|
||||
$box-shadow-style1-value: // Box shadow value for generic box-shadow style 1
|
||||
0 4px 4px 0 rgba(0, 0, 0, 0.125), 0 2px 2px -1px rgba(0, 0, 0, 0.25);
|
||||
0 4*$_1px 4*$_1px 0 rgba(0, 0, 0, 0.125), 0 2*$_1px 2*$_1px -2*$_1px rgba(0, 0, 0, 0.25);
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
$responsive-margin-small-value: 0.25rem; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value: 0.375rem; // Margin value for responsive margin on medium screens
|
||||
|
||||
@ -16,6 +16,7 @@ $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
|
||||
$base-root-font-size: 16px; // Root font sizing for all elements [1]
|
||||
$_1px: (1px/$base-root-font-size) * 1rem; // Calculated rem value of 1px [1]
|
||||
$base-font-size: 1rem; // Default font sizing for all elements [2]
|
||||
$base-line-height: 1.5; // Default line height for all elements.
|
||||
$use-fluid-typography: false; // Should fluid typography be used at the root element? (`true`/`false`)
|
||||
@ -40,7 +41,7 @@ $list-left-padding: 1rem; // Left padding for <ol> and <ul> elements
|
||||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||
$horizontal-rule-margin: 0.5rem; // <hr> margin
|
||||
$horizontal-rule-border-style: 1px solid #8c8c8c;// Border style for horizontal rules (used in the <hr> element's border-top)
|
||||
$horizontal-rule-border-style: $_1px solid #8c8c8c;// Border style for horizontal rules (used in the <hr> element's border-top)
|
||||
$horizontal-rule-fancy-style: false; // Should a fancy styling be applied for the <hr> element (`true`/`false`) [5]
|
||||
$blockquote-back-color: #eeeeee; // Background color for <blockquote>
|
||||
$blockquote-fore-color: $fore-color; // Text color for <blockquote>
|
||||
@ -59,13 +60,13 @@ $code-element-padding: 0.125rem 0.25rem; // Padding for <code>
|
||||
$code-element-fore-color: $fore-color; // Text color for <code>
|
||||
$code-element-back-color: #e6e6e6; // Background color for <code>
|
||||
$code-element-border-style: 0; // Border style for <code>
|
||||
$code-element-border-radius: 2px; // Border radius for <code>
|
||||
$code-element-border-radius: 2*$_1px; // Border radius for <code>
|
||||
$code-element-box-shadow: none; // Box shadow for <code>
|
||||
$pre-element-padding: 0.75rem; // Padding for <pre>
|
||||
$pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||
$pre-element-border-style: 0; // Border style for <pre>
|
||||
$pre-element-border-radius: 0 2px 2px 0;; // Border radius for <pre>
|
||||
$pre-element-border-radius: 0 2*$_1px 2*$_1px 0; // Border radius for <pre>
|
||||
$pre-element-margin: 0.5rem; // Margin for <pre>
|
||||
$pre-element-box-shadow: none; // Box shadow for <pre>
|
||||
$add-pre-element-sidebar: false; // Should a fancy sidebar be added to the left side of <pre> (`true`/`false`) [7]
|
||||
@ -91,7 +92,8 @@ $figcaption-font-size: 0.8125rem; // Font size of <figcaption> elements
|
||||
$figcaption-fore-color: #424242; // Text color for <figcaption> elements
|
||||
// Notes:
|
||||
// [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.
|
||||
// element's font sizing. The value of $_1px is calculated based on the value of $base-root-font-size, please do not alter
|
||||
// the way that it's calculated.
|
||||
// [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
|
||||
// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`.
|
||||
@ -140,14 +142,14 @@ $grid-large-prefix: 'lg'; // Large screen class prefix for grid
|
||||
// Variables for forms and inputs
|
||||
$form-back-color: #eeeeee; // Background color for forms
|
||||
$form-fore-color: $fore-color; // Text color for forms
|
||||
$form-border-style: 1px solid #c9c9c9; // Border style for forms
|
||||
$form-border-style: $_1px solid #c9c9c9; // Border style for forms
|
||||
$form-border-radius: 0; // Border radius for forms
|
||||
$form-margin: 0.5rem; // Margin for forms
|
||||
$form-padding: 0.75rem 0.5rem 1.125rem; // Padding for forms
|
||||
$form-box-shadow: none; // Box shadow for forms
|
||||
$fieldset-back-color: $form-back-color; // Background color for fieldset
|
||||
$fieldset-border-style: 1px solid #d0d0d0; // Border style for fieldset
|
||||
$fieldset-border-radius:2px; // Border radius for fieldset
|
||||
$fieldset-border-style: $_1px solid #d0d0d0; // Border style for fieldset
|
||||
$fieldset-border-radius:2*$_1px; // Border radius for fieldset
|
||||
$fieldset-margin: 0.125rem; // Margin for fieldset
|
||||
$fieldset-padding: 0.5rem; // Padding for fieldset
|
||||
$legend-font-weight: $bold-font-weight; // Font weight for legend
|
||||
@ -159,8 +161,8 @@ $input-group-name: 'input-group'; // Class for input groups
|
||||
$include-fluid-input-group: false; // Should fluid input grooups be included? (`true`/`false`) [1]
|
||||
$input-back-color: #fafafa; // Background for input
|
||||
$input-fore-color: $fore-color; // Text color for input
|
||||
$input-border-style: 1px solid #c9c9c9; // Border style for input
|
||||
$input-border-radius: 2px; // Border radius for input
|
||||
$input-border-style: $_1px solid #c9c9c9; // Border style for input
|
||||
$input-border-radius: 2*$_1px; // Border radius for input
|
||||
$input-margin: 0.25rem; // Margin for input
|
||||
$input-padding: 0.5rem 0.75rem; // Padding for input
|
||||
$input-focus-border-color: #0288d1; // Border color for focused input
|
||||
@ -174,14 +176,14 @@ $button-back-opacity: 0.75; // Background opacity for button element
|
||||
$button-hover-back-opacity: 1; // Background opacity for button elements on hover or focus
|
||||
$button-fore-color: $fore-color; // Text color for button elements
|
||||
$button-border-style: 0; // Border style for button elements
|
||||
$button-border-radius: 2px; // Border radius for button elements
|
||||
$button-border-radius: 2*$_1px; // Border radius for button elements
|
||||
$button-padding: 0.5rem 0.75rem; // Padding for button elements
|
||||
$button-margin: 0.5rem; // Margin for button elements
|
||||
$button-box-shadow: none; // Box shadow for buttons
|
||||
$button-disabled-opacity: 0.75; // Disabled button elements opacity
|
||||
$button-class-name: 'button'; // Class for custom button elements
|
||||
$include-button-group: false; // [Hidden flag override] Should button groups be enabled? (`true`/`false`) [2]
|
||||
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [2]
|
||||
$hide-file-inputs: true; // Should a style be added that makes all <input>s of type `file` hidden? (`true`/`false`) [3]
|
||||
$button-variant1-name: 'primary'; // Class name for button variant 1
|
||||
$button-variant1-back-color: #0277bd; // Background color for button variant 1
|
||||
$button-variant1-back-opacity: 0.9; // Background opacity for button variant 1
|
||||
@ -199,23 +201,24 @@ $button-variant3-hover-back-opacity: 1; // Background opacity for button va
|
||||
$button-variant3-fore-color: #fafafa; // Text color for button variant 3
|
||||
$button-style1-name: 'small'; // Class name for button style 1
|
||||
$button-style1-border-style: 0; // Border style for button style 1
|
||||
$button-style1-border-radius: 1px; // Border radius for button style 1
|
||||
$button-style1-border-radius: $_1px; // Border radius for button style 1
|
||||
$button-style1-padding: 0.25rem 0.375rem; // Padding for button style 1
|
||||
$button-style1-margin: 0.5rem; // Margin for button style 1
|
||||
$button-style2-name: 'large'; // Class name for button style 2
|
||||
$button-style2-border-style: 0; // Border style for button style 2
|
||||
$button-style2-border-radius: 4px; // Border radius for button style 2
|
||||
$button-style2-border-radius: 4*$_1px; // Border radius for button style 2
|
||||
$button-style2-padding: 0.75rem 1.125rem; // Padding for button style 2
|
||||
$button-style2-margin: 0.5rem; // Margin for button style 2
|
||||
$checkbox-size: $base-root-font-size; // Size for checkbox/radio [3]
|
||||
$checkbox-size: 1rem; // Size for checkbox/radio [4]
|
||||
$checkbox-back-color: $input-back-color; // Background clor for checkbox/radio
|
||||
$checkbox-fore-color: $input-fore-color; // Text/mark color for checkbox/radio
|
||||
$checkbox-border-thickness: 1px; // Border thickness for checkbox/radio
|
||||
$checkbox-border-thickness: $_1px; // Border thickness for checkbox/radio
|
||||
$checkbox-border-color: #bdbdbd; // Border color for checkbox/radio
|
||||
$checkbox-border-radius: $input-border-radius; // Border radius for checkbox/radio
|
||||
$checkbox-focus-border-color: $input-focus-border-color;// Border color for checkbox/radio on focus
|
||||
$checkbox-bottom-spacing: 6px; // Bottom spacing for checkbox/radio
|
||||
$checkbox-bottom-spacing: 0.375rem; // Bottom spacing for checkbox/radio
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled checkbox/radio
|
||||
$include-switch: false; // Should switch components be included? (`true`/`false`) [5]
|
||||
// Notes:
|
||||
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
||||
// specified in the corresponding variables.
|
||||
@ -227,6 +230,8 @@ $checkbox-disabled-opacity: $input-disabled-opacity;// Opacity for disabled chec
|
||||
// If the value is `false`, some fixes will be applied to the <input type="file"> element.
|
||||
// [4] - The value of $checkbox-size will determine a few variables like some `margin` values, `height`, `width` etc.
|
||||
// Variables for navigational elements
|
||||
// [5] - Due to the fact that the value of $include-switch is set to `false`, no switch styles will be created.
|
||||
// If you wish to enable them, please refer to a full flavor for the required variables.
|
||||
$header-height: 2.75rem; // Height for <header>
|
||||
$header-back-color: #12171a; // Background color for <header>
|
||||
$header-fore-color: #f5f5f5; // Text color for <header>
|
||||
@ -263,7 +268,7 @@ $footer-sticky-name: 'sticky'; // Class name for sticky <footer> eleme
|
||||
// [3] - If the value of $include-footer-bottom is `true`, a class will be created that will allow for sticky positioning
|
||||
// of <footer> elements, using the value of $footer-sticky-name for the name of the class.
|
||||
// Variables for responsive tables
|
||||
$table-border-style: 1px solid #c9c9c9; // Border style for <table> and children
|
||||
$table-border-style: $_1px solid #c9c9c9; // Border style for <table> and children
|
||||
$table-border-radius: 0; // Border radius for <table> and children
|
||||
$table-margin: 0 auto; // Margin for <table>
|
||||
$table-box-shadow: none; // Box shadow for <table>
|
||||
@ -290,12 +295,12 @@ $include-striped-table: false; // [Hidden flag override] Should stripe
|
||||
$card-name: 'card'; // Class name for cards
|
||||
$card-back-color: #fafafa; // Background color for cards
|
||||
$card-fore-color: $fore-color; // Text color for cards
|
||||
$card-border-style: 1px solid #acacac; // Border style for cards
|
||||
$card-border-style: $_1px solid #acacac; // Border style for cards
|
||||
$card-border-radius: 0; // Border radius for cards
|
||||
$card-margin: 0.5rem; // Margin for cards
|
||||
$card-box-shadow: none; // Box shadow for cards
|
||||
$card-section-name: 'section'; // Class name for card sections
|
||||
$card-section-border-style: 1px solid #c9c9c9; // Border style for card sections
|
||||
$card-section-border-style: $_1px solid #c9c9c9; // Border style for card sections
|
||||
$card-section-padding: 0.5rem; // Padding for card sections
|
||||
$card-section-media-name: 'media'; // Class name for card media sections
|
||||
$card-section-media-height: 200px; // Height for card media setions
|
||||
@ -319,7 +324,7 @@ $mark-fore-color: #fafafa; // Text color for <mark>
|
||||
$mark-font-size: 0.9375em; // Font size for <mark>
|
||||
$mark-line-height: 1em; // Line height for <mark>
|
||||
$mark-border-style: 0; // Border style for <mark>
|
||||
$mark-border-radius: 2px; // Border radius for <mark>
|
||||
$mark-border-radius: 2*$_1px; // Border radius for <mark>
|
||||
$mark-padding: 0.125em 0.25em; // Padding for <mark>
|
||||
$mark-margin: 0; // Margin for <mark>
|
||||
$mark-box-shadow: none; // Box shadow for <mark>
|
||||
@ -334,7 +339,7 @@ $mark-style1-border-radius: 200px; // Border radius for <mark> style 1
|
||||
$mark-style1-padding: 0.25em 0.5em; // 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
|
||||
$mark-style2-border-radius: 2*$_1px; // Border radius for <mark> style 2
|
||||
$mark-style2-padding: 0.375em; // Padding for <mark> style 2
|
||||
$mark-style2-font-size: 1em; // Font size for <mark> style 2
|
||||
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
|
||||
@ -351,7 +356,7 @@ $progress-fore-color: #0277bd; // Progress bar color for <progress>
|
||||
$progress-height: 0.625rem; // Height of <progress>
|
||||
$progress-max-value: 1000; // Arithmetic max value of <progress>
|
||||
$progress-border-style: 0; // Border style for <progress>
|
||||
$progress-border-radius: 2px; // Border radius for the <progress> container
|
||||
$progress-border-radius: 2*$_1px; // Border radius for the <progress> container
|
||||
$progress-top-bottom-margin: 0.5rem; // Top and bottom margin for <progress>
|
||||
$progress-left-right-margin: 0.5rem; // Left and right margin for <progress>
|
||||
$progress-box-shadow: none; // Box shadow for <progress>
|
||||
@ -372,7 +377,7 @@ $include-breadcrumbs: false; // [Hidden flag override] Should breadcr
|
||||
$include-close-icon: false; // [Hidden flag override] Should the close icon be included? (`true`/`false`) [1]
|
||||
$border-generic-name: 'bordered'; // Class name for generic border style
|
||||
$border-radial-style1-name: 'rounded'; // Class name for radial border style 1
|
||||
$border-radial-style1-radius: 2px; // Border radius for radial border style 1
|
||||
$border-radial-style1-radius: 2*$_1px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
|
||||
@ -244,6 +244,21 @@ $checkbox-border-radius: $input-border-radius; // Border radius for checkbox/
|
||||
$checkbox-focus-border-color: $input-focus-border-color; // Border color for checkbox/radio on focus
|
||||
$checkbox-bottom-spacing: 6px; // Bottom spacing for checkbox/radio
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
|
||||
$include-switch: true; // Should switch components be included? (`true`/`false`)
|
||||
$switch-name: 'switch'; // Class name for switch components
|
||||
$switch-bar-back-color: #D8DEE9; // Back color for the switch's bar
|
||||
$switch-on-bar-back-color: #D8DEE9; // Back color for the switch's bar when the switch is turned on
|
||||
$switch-bar-width: 28px; // Width for the switch's bar
|
||||
$switch-bar-height: 14px; // Height for the switch's bar
|
||||
$switch-bar-border-style: 0; // Border style for the switch's bar
|
||||
$switch-bar-border-radius: 8px; // Borer radius for the switch's bar
|
||||
$switch-bottom-spacing: 8px; // Bottom spacing for the switch's bar
|
||||
$switch-knob-back-color: #ECEFF4; // Back color for the switch's knob
|
||||
$switch-on-knob-back-color: #5E81AC; // Back color for the switch's knob when the switch is turned on
|
||||
$switch-knob-width: 20px; // Width for the switch's knob
|
||||
$switch-knob-height: 20px; // Height for the switch's knob
|
||||
$switch-knob-border-style: 0; // Border style for the switch's knob
|
||||
$switch-knob-border-radius: 100%; // Borer radius for the switch's knob
|
||||
// Notes:
|
||||
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
||||
// specified in the corresponding variables.
|
||||
|
||||
@ -243,6 +243,7 @@ $checkbox-border-radius: $input-border-radius; // Border radius for checkbox/r
|
||||
$checkbox-focus-border-color: $input-focus-border-color; // Border color for checkbox/radio on focus
|
||||
$checkbox-bottom-spacing: 3px; // Bottom spacing for checkbox/radio
|
||||
$checkbox-disabled-opacity: $input-disabled-opacity; // Opacity for disabled checkbox/radio
|
||||
$include-switch: false; // Should switch components be included? (`true`/`false`)
|
||||
// Notes:
|
||||
// [1] - If the value of $include-fluid-input-group is `true`, fluid input groups will be included, using the values
|
||||
// specified in the corresponding variables.
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
*/
|
||||
$apply-defaults-to-all: true !default; // Should default values be applied to all elements? (`true`/`false`).
|
||||
$base-root-font-size: 16px !default; // Root font sizing for all elements - Should only be specified in `px` units!
|
||||
$_1px: (1px/$base-root-font-size) * 1rem !default; // Calculated rem value of 1px.
|
||||
$use-fluid-typography: false !default; // Should fluid typography be used at the root element? (`true`/`false`)
|
||||
$fluid-type-start-breakpoint: 320px !default; // Breakpoint where fluid typography scaling starts.
|
||||
$fluid-type-end-breakpoint: 1600px !default; // Breakpoint where fluid typography scaling ends.
|
||||
|
||||
@ -18,6 +18,8 @@ $input-high-specificity-selectors: false !default; // [Hidden flag] Use legacy s
|
||||
$button-group-high-specificity-selectors: false !default; // [Hidden flag] Use legacy selectors for button-like elements inside button groups (`false`/ `true`).
|
||||
$hide-file-inputs: true !default; // Should `file` <input> elements be hidden? (`true`/`false`)
|
||||
$hide-check-and-radio: true !default; // [Hidden flag] Should checkboxes and radios be hidden? (`true`/`false`)
|
||||
$include-switch: true !default; // Should switch components be included? (`true`/`false`)
|
||||
$switch-name: 'switch' !default; // Class name for switch components
|
||||
// External variables' defaults are used only if you import this module on its own, without the rest of the framework.
|
||||
$back-color: white !default; // [External variable - core] Background color for everything.
|
||||
$fore-color: black !default; // [External variable - core] Foreground color for everything.
|
||||
@ -416,10 +418,15 @@ a[role="button"], label[role="button"], [role="button"] {
|
||||
// Label styling based on the specifics of the checkbox/radio variables.
|
||||
[type="checkbox"] + label, [type="radio"] + label {
|
||||
position: relative;
|
||||
margin-left: floor($checkbox-size + floor($checkbox-size * 0.25));
|
||||
$_unit: $checkbox-size*0 +1; // Used to check if the unit is `px` or `rem/em`
|
||||
@if $_unit == 1px {
|
||||
margin-left: floor($checkbox-size + floor($checkbox-size * 0.25));
|
||||
}
|
||||
@else {
|
||||
margin-left: $checkbox-size * 1.25;
|
||||
}
|
||||
// Styling for checkbox/radio box part.
|
||||
&:before {
|
||||
//box-sizing: border-box;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
bottom: $checkbox-bottom-spacing;
|
||||
@ -433,7 +440,13 @@ a[role="button"], label[role="button"], [role="button"] {
|
||||
}
|
||||
background: $checkbox-back-color;
|
||||
color: $checkbox-fore-color;
|
||||
margin-left: -($checkbox-size + ($checkbox-size * 0.25));
|
||||
$_unit: $checkbox-size*0 +1; // Used to check if the unit is `px` or `rem/em`
|
||||
@if $_unit == 1px {
|
||||
margin-left: - floor($checkbox-size + floor($checkbox-size * 0.25));
|
||||
}
|
||||
@else {
|
||||
margin-left: - $checkbox-size * 1.25;
|
||||
}
|
||||
}
|
||||
// Hover, focus styling.
|
||||
&:hover, &:focus {
|
||||
@ -462,14 +475,109 @@ a[role="button"], label[role="button"], [role="button"] {
|
||||
// Fill for checked checkbox/radio elements.
|
||||
[type="checkbox"]:checked + label, [type="radio"]:checked + label{
|
||||
&:after {
|
||||
margin-left: - floor($checkbox-size + floor($checkbox-size * 0.25));
|
||||
position: absolute;
|
||||
bottom: floor($checkbox-size * 0.25) + $checkbox-bottom-spacing;
|
||||
left: floor($checkbox-size * 0.25);
|
||||
width: floor($checkbox-size * 0.5) + floor($checkbox-border-thickness * 2);
|
||||
height: floor($checkbox-size * 0.5) + floor($checkbox-border-thickness * 2);
|
||||
background: $checkbox-fore-color;
|
||||
content: '';
|
||||
$_unit: $checkbox-size*0 +1; // Used to check if the unit is `px` or `rem/em`
|
||||
@if $_unit == 1px {
|
||||
margin-left: - floor($checkbox-size + floor($checkbox-size * 0.25));
|
||||
bottom: floor($checkbox-size * 0.25) + $checkbox-bottom-spacing;
|
||||
left: floor($checkbox-size * 0.25);
|
||||
width: floor($checkbox-size * 0.5) + floor($checkbox-border-thickness * 2);
|
||||
height: floor($checkbox-size * 0.5) + floor($checkbox-border-thickness * 2);
|
||||
}
|
||||
@else {
|
||||
margin-left: - ($checkbox-size * 1.25);
|
||||
bottom: $checkbox-size * 0.25 + $checkbox-bottom-spacing;
|
||||
left: $checkbox-size * 0.25;
|
||||
width: $checkbox-size * 0.5 + $checkbox-border-thickness * 2;
|
||||
height: $checkbox-size * 0.5 + $checkbox-border-thickness * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Definitions for switch components.
|
||||
@if $include-switch {
|
||||
.#{$input-group-name} {
|
||||
// Label styling based on the specifics of the switch variables.
|
||||
[type="checkbox"] + label.#{$switch-name}, [type="radio"] + label.#{$switch-name} {
|
||||
// Styling for the bar part of the switch
|
||||
&:before {
|
||||
@if $switch-bottom-spacing != $checkbox-bottom-spacing {
|
||||
bottom: $switch-bottom-spacing;
|
||||
}
|
||||
width: $switch-bar-width;
|
||||
height: $switch-bar-height;
|
||||
border: $switch-bar-border-style;
|
||||
@if $switch-bar-border-radius != 0 {
|
||||
border-radius: $switch-bar-border-radius;
|
||||
}
|
||||
background: $switch-bar-back-color;
|
||||
$_unit: $switch-bar-width*0 +1; // Used to check if the unit is `px` or `rem/em`
|
||||
@if $_unit == 1px {
|
||||
margin-left: - floor($switch-bar-width + floor($switch-knob-width/2));
|
||||
}
|
||||
@else {
|
||||
margin-left: - ($switch-bar-width + $switch-knob-width/2);
|
||||
}
|
||||
}
|
||||
// Styling for the knob part of the switch
|
||||
&:after {
|
||||
display: inline-block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: $switch-knob-width;
|
||||
height: $switch-knob-height;
|
||||
background: $switch-knob-back-color;
|
||||
@if $switch-knob-border-style != 0 {
|
||||
border: $switch-knob-border-style;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@if $switch-knob-border-radius != 0 {
|
||||
border-radius: $switch-knob-border-radius;
|
||||
}
|
||||
$_unit: $switch-bar-width*0 +1; // Used to check if the unit is `px` or `rem/em`
|
||||
@if $_unit == 1px {
|
||||
bottom: floor((2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2);
|
||||
margin-left: - floor($switch-bar-width + $switch-knob-width);
|
||||
}
|
||||
@else {
|
||||
bottom: (2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2;
|
||||
margin-left: - ($switch-bar-width + $switch-knob-width);
|
||||
}
|
||||
transition: left 0.3s;
|
||||
}
|
||||
// Hover and focus styles are absent for switches, as they are mainly intended for mobile, but you can add them in manually.
|
||||
}
|
||||
// [type="checkbox"]:focus + label:before, [type="radio"]:focus + label:before {
|
||||
// border-color: $checkbox-focus-border-color;
|
||||
// }
|
||||
// Fill for checked checkbox/radio elements.
|
||||
[type="checkbox"]:checked + label.#{$switch-name}, [type="radio"]:checked + label.#{$switch-name}{
|
||||
&:before {
|
||||
@if $switch-on-bar-back-color != $switch-bar-back-color {
|
||||
background: $switch-on-bar-back-color;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
left: $switch-bar-width;
|
||||
// Some values need to be re-applied to avoid overwriting by the default checkbox ones.
|
||||
width: $switch-knob-width;
|
||||
height: $switch-knob-height;
|
||||
$_unit: $switch-bar-width*0 +1; // Used to check if the unit is `px` or `rem/em`
|
||||
@if $_unit == 1px {
|
||||
bottom: floor((2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2);
|
||||
margin-left: - floor($switch-bar-width + $switch-knob-width);
|
||||
}
|
||||
@else {
|
||||
bottom: (2*$switch-bottom-spacing + $switch-bar-height - $switch-knob-height)/2;
|
||||
margin-left: - ($switch-bar-width + $switch-knob-width);
|
||||
}
|
||||
@if $switch-on-knob-back-color != $switch-knob-back-color {
|
||||
background: $switch-on-knob-back-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user