mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-07-31 02:50:26 +02:00
Code Issues Releases Wiki Activity

Added switch component

Browse Source 
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
2017-06-08 16:30:36 +03:00
parent 6437ee56da
commit f95c23f271
20 changed files with 662 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
dist/mini-dark.css vendored
View File

@@ -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 {
overflow: auto;
margin: 0;
-webkit-transform: scaleY(1);
transform: scaleY(1);
transform: scaleY(1);
border: 0.0625rem solid #757575;
border-top: 0;
padding: 0.5rem;
@@ -1663,7 +1700,7 @@ table.striped tr:nth-of-type(2n) > td {
transform-origin: top;
}
.tabs.stacked > label:not(:first-of-type) {
.tabs.stacked > label:not(:first-of-type) {
border: 0.0625rem solid #757575;
border-top: 0;
}
@@ -1686,7 +1723,7 @@ table.striped tr:nth-of-type(2n) > td {
-webkit-order: initial;
order: initial;
}
.tabs > label:not(:first-of-type) {
.tabs > label:not(:first-of-type) {
border: 0.0625rem solid #757575;
border-top: 0;
}
@@ -1699,7 +1736,7 @@ mark {
background: #0277bd;
color: #fafafa;
font-size: 0.9375em;
line-height: 1em;
line-height: 1em;
border-radius: 0.125rem;
padding: 0.125em 0.25em;
}
@@ -1769,7 +1806,7 @@ mark.inline-block {
.tooltip:after {
content: attr(aria-label);
background: #d0d0d0;
background: #d0d0d0;
border-radius: 0.125rem;
color: #0c0c0c;
padding: 0.5rem;
@@ -1868,15 +1905,15 @@ progress {
width: 90%;
width: calc(100% - 1rem);
margin: 0.5rem 0.5rem;
border: 0;
border: 0;
border-radius: 0.125rem;
background: #39444a;
color: #0277bd;
}
progress::-webkit-progress-value {
background: #0277bd;
border-top-left-radius: 2px;
background: #0277bd;
border-top-left-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
}
@@ -1885,16 +1922,16 @@ progress::-webkit-progress-bar {
}
progress::-moz-progress-bar {
background: #0277bd;
border-top-left-radius: 2px;
background: #0277bd;
border-top-left-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
}
progress[value="1000"]::-webkit-progress-value {
progress[value="1000"]::-webkit-progress-value {
border-radius: 0.125rem;
}
progress[value="1000"]::-moz-progress-bar {
progress[value="1000"]::-moz-progress-bar {
border-radius: 0.125rem;
}
@@ -2084,7 +2121,7 @@ ul.breadcrumbs li:last-child:after {
border: 1px solid rgba(0, 0, 0, 0.25) !important;
}
.rounded {
.rounded {
border-radius: 0.125rem !important;
}
@@ -2124,7 +2161,7 @@ ul.breadcrumbs li:last-child:after {
}
}
.shadowed {
.shadowed {
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;
}

2
dist/mini-dark.min.css vendored
View File

File diff suppressed because one or more lines are too long

165
dist/mini-default.css vendored
View File

@@ -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 {
margin: 0;
-webkit-transform: scaleY(1);
transform: scaleY(1);
background: #fafafa;
background: #fafafa;
border: 0.0625rem solid #bdbdbd;
border-top: 0;
padding: 0.5rem;
@@ -1664,7 +1701,7 @@ table.striped tr:nth-of-type(2n) > td {
transform-origin: top;
}
.tabs.stacked > label:not(:first-of-type) {
.tabs.stacked > label:not(:first-of-type) {
border: 0.0625rem solid #bdbdbd;
border-top: 0;
}
@@ -1687,7 +1724,7 @@ table.striped tr:nth-of-type(2n) > td {
-webkit-order: initial;
order: initial;
}
.tabs > label:not(:first-of-type) {
.tabs > label:not(:first-of-type) {
border: 0.0625rem solid #bdbdbd;
border-top: 0;
}
@@ -1700,7 +1737,7 @@ mark {
background: #0277bd;
color: #fafafa;
font-size: 0.9375em;
line-height: 1em;
line-height: 1em;
border-radius: 0.125rem;
padding: 0.125em 0.25em;
}
@@ -1770,7 +1807,7 @@ mark.inline-block {
.tooltip:after {
content: attr(aria-label);
background: #212121;
background: #212121;
border-radius: 0.125rem;
color: #fafafa;
padding: 0.5rem;
@@ -1869,15 +1906,15 @@ progress {
width: 90%;
width: calc(100% - 1rem);
margin: 0.5rem 0.5rem;
border: 0;
border: 0;
border-radius: 0.125rem;
background: #e0e0e0;
color: #0277bd;
}
progress::-webkit-progress-value {
background: #0277bd;
border-top-left-radius: 2px;
background: #0277bd;
border-top-left-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
}
@@ -1886,16 +1923,16 @@ progress::-webkit-progress-bar {
}
progress::-moz-progress-bar {
background: #0277bd;
border-top-left-radius: 2px;
background: #0277bd;
border-top-left-radius: 0.125rem;
border-bottom-left-radius: 0.125rem;
}
progress[value="1000"]::-webkit-progress-value {
progress[value="1000"]::-webkit-progress-value {
border-radius: 0.125rem;
}
progress[value="1000"]::-moz-progress-bar {
progress[value="1000"]::-moz-progress-bar {
border-radius: 0.125rem;
}
@@ -2085,7 +2122,7 @@ ul.breadcrumbs li:last-child:after {
border: 1px solid rgba(0, 0, 0, 0.25) !important;
}
.rounded {
.rounded {
border-radius: 0.125rem !important;
}
@@ -2125,7 +2162,7 @@ ul.breadcrumbs li:last-child:after {
}
}
.shadowed {
.shadowed {
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;
}

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

80
dist/mini-lite.css vendored
View File

@@ -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
View File

File diff suppressed because one or more lines are too long

37
dist/mini-nord.css vendored
View File

@@ -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
View File

File diff suppressed because one or more lines are too long

6
dist/mini-sucroa.css vendored
View File

@@ -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
View File

File diff suppressed because one or more lines are too long