mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-01-17 12:58:13 +01:00
Code Issues Releases Wiki Activity

Updated all flavors for modal

Browse Source 
All flavors are now compatible with the new modal component. Some of them exclude it.
This commit is contained in:
Angelos Chalaris 2017-06-05 23:59:42 +03:00
parent a3453e8df3
commit 57e608bf79
15 changed files with 195 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
dist/mini-dark.css vendored
View File

@ -3,7 +3,7 @@
Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.2.0
mini.css version: v2.3.0
*/
/*
Browsers resets and base typography.
@ -779,11 +779,6 @@ input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input
box-shadow: none;
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):disabled, input:not([type="button"]):not([type="submit"]):not([type="reset"])[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled] {
cursor: not-allowed;
opacity: 0.75;
}
input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid {
border-color: #d32f2f;
box-shadow: none;
@ -852,11 +847,7 @@ a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus,
opacity: 1;
}
button:disabled, button[disabled], [type="button"]:disabled, [type="button"][disabled], [type="submit"]:disabled, [type="submit"][disabled], [type="reset"]:disabled, [type="reset"][disabled],
a.button:disabled,
a.button[disabled], label.button:disabled, label.button[disabled], .button:disabled, .button[disabled],
a[role="button"]:disabled,
a[role="button"][disabled], label[role="button"]:disabled, label[role="button"][disabled], [role="button"]:disabled, [role="button"][disabled] {
input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] {
cursor: not-allowed;
opacity: 0.75;
}
@ -883,8 +874,8 @@ input[type="file"] {
margin: 0.5rem;
}
.button-group button, .button-group [type="button"], .button-group [type="submit"], .button-group [type="reset"],
.button-group .button, .button-group [role="button"] {
.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"],
.button-group > .button, .button-group > [role="button"] {
margin: 0;
-webkit-box-flex: 1;
max-width: 100%;
@ -895,8 +886,7 @@ input[type="file"] {
border-radius: 0;
}
.button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
.button-group * + .button, .button-group * + [role="button"] {
.button-group > :not(:first-child) {
border-left: 1px solid #263238;
}
@ -906,8 +896,7 @@ input[type="file"] {
-webkit-flex-direction: column;
flex-direction: column;
}
.button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
.button-group * + .button, .button-group * + [role="button"] {
.button-group > :not(:first-child) {
border: 0;
border-top: 1px solid #263238;
}
@ -956,11 +945,14 @@ input[type="file"] {
border-radius: 50%;
}
.input-group [type="checkbox"][disabled] + label, .input-group [type="radio"][disabled] + label {
.input-group [type="checkbox"][disabled] + label, .input-group [type="radio"][disabled] + label,
.input-group [type="checkbox"]:disabled + label, .input-group [type="radio"]:disabled + label {
cursor: not-allowed;
}
.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after {
.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after,
.input-group [type="checkbox"]:disabled + label:before,
.input-group [type="checkbox"]:disabled + label:after, .input-group [type="radio"]:disabled + label:before, .input-group [type="radio"]:disabled + label:after {
opacity: 0.75;
}
@ -1217,11 +1209,11 @@ footer.sticky {
}
}
[type="checkbox"]:checked + .drawer:not(.right) {
:checked + .drawer:not(.right) {
left: 0;
}
[type="checkbox"]:checked + .drawer.right {
:checked + .drawer.right {
right: 0;
}
@ -1362,7 +1354,7 @@ table th:first-child, table td:first-child {
width: 100%;
border: 1px solid #1c2529;
}
table.horizontal th + th, table.horizontal th + td, table.horizontal td + th, table.horizontal td + td {
table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) {
border-top: 0;
}
table.horizontal th {
@ -1432,7 +1424,7 @@ table th:first-child, table td:first-child {
width: 100%;
border: 1px solid #1c2529;
}
table.horizontal.preset th + th, table.horizontal.preset th + td, table.horizontal.preset td + th, table.horizontal.preset td + td {
table.horizontal.preset th:not(:first-child), table.horizontal.preset td:not(:first-child) {
border-top: 0;
}
table.horizontal.preset th {
@ -1598,12 +1590,12 @@ table.striped tr:nth-of-type(2n) > td {
background: rgba(29, 38, 42, 0.8);
}
.tabs > [type="radio"], .tabs.stacked > [type="checkbox"] {
.tabs > [type="radio"], .tabs > [type="checkbox"] {
display: none;
visibility: hidden;
}
.tabs > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div {
.tabs > label + div {
-webkit-flex-basis: auto;
flex-basis: auto;
-webkit-order: 2;
@ -1623,23 +1615,19 @@ table.striped tr:nth-of-type(2n) > td {
transition: -webkit-transform 0.3s, transform 0.3s;
}
.tabs > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label {
.tabs > label:not(:first-of-type) {
border-left: 0;
}
.tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
border-left: 0;
}
.tabs > [type="radio"]:checked + label, .tabs.stacked > [type="checkbox"]:checked + label {
.tabs > :checked + label {
background: #263238;
}
.tabs > [type="radio"]:checked + label:hover, .tabs > [type="radio"]:checked + label:focus, .tabs.stacked > [type="checkbox"]:checked + label:hover, .tabs.stacked > [type="checkbox"]:checked + label:focus {
.tabs > :checked + label:hover, .tabs > :checked + label:focus {
background: rgba(38, 50, 56, 0.8);
}
.tabs > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
.tabs > :checked + label + div {
box-sizing: border-box;
position: relative;
height: 400px;
@ -1667,19 +1655,19 @@ table.striped tr:nth-of-type(2n) > td {
order: initial;
}
.tabs.stacked > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div {
.tabs.stacked > label + div {
-webkit-order: initial;
order: initial;
-webkit-transform-origin: top;
transform-origin: top;
}
.tabs.stacked > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="radio"] + label + div + [type="checkbox"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
.tabs.stacked > label:not(:first-of-type) {
border: 1px solid #757575;
border-top: 0;
}
.tabs.stacked > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
.tabs.stacked > :checked + label + div {
height: auto;
}
@ -1693,11 +1681,11 @@ table.striped tr:nth-of-type(2n) > td {
-webkit-order: initial;
order: initial;
}
.tabs > [type="radio"] + label + div {
.tabs > label + div {
-webkit-order: initial;
order: initial;
}
.tabs > [type="radio"] + label + div + [type="radio"] + label {
.tabs > label:not(:first-of-type) {
border: 1px solid #757575;
border-top: 0;
}
@ -1744,9 +1732,6 @@ mark.inline-block {
clip-path: inset(100%);
transition: all 0.3s;
z-index: 1010;
}
.tooltip:before, .tooltip:after {
left: 50%;
}
@ -1800,6 +1785,43 @@ mark.inline-block {
margin-top: 1rem;
}
.modal {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.45);
}
.modal .card {
margin: 0 auto;
max-height: 50vh;
overflow: auto;
}
.modal .card .close {
position: absolute;
top: 0.75rem;
right: 0.25rem;
padding: 0;
}
:checked + .modal {
display: -webkit-box;
-webkit-box-flex: 0;
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
z-index: 1200;
}
:checked + .modal .card .close {
z-index: 1211;
}
/*
Custom contextual background elements and alerts.
*/

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

File diff suppressed because one or more lines are too long

2
dist/mini-default.css vendored
View File

@ -3,7 +3,7 @@
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.2.0
mini.css version: v2.3.0
*/
/*
Browsers resets and base typography.

9
dist/mini-lite.css vendored
View File

@ -3,7 +3,7 @@
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.2.0
mini.css version: v2.3.0
*/
/*
Browsers resets and base typography.
@ -875,11 +875,14 @@ input[type="file"] {
border-radius: 50%;
}
.input-group [type="checkbox"][disabled] + label, .input-group [type="radio"][disabled] + label {
.input-group [type="checkbox"][disabled] + label, .input-group [type="radio"][disabled] + label,
.input-group [type="checkbox"]:disabled + label, .input-group [type="radio"]:disabled + label {
cursor: not-allowed;
}
.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after {
.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after,
.input-group [type="checkbox"]:disabled + label:before,
.input-group [type="checkbox"]:disabled + label:after, .input-group [type="radio"]:disabled + label:before, .input-group [type="radio"]:disabled + label:after {
opacity: 0.75;
}

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

File diff suppressed because one or more lines are too long

93
dist/mini-nord.css vendored
View File

@ -3,7 +3,7 @@
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v2.2.0
mini.css version: v2.3.0
*/
/*
Browsers resets and base typography.
@ -888,8 +888,8 @@ input[type="file"] {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
}
.button-group button, .button-group [type="button"], .button-group [type="submit"], .button-group [type="reset"],
.button-group .button, .button-group [role="button"] {
.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"],
.button-group > .button, .button-group > [role="button"] {
margin: 0;
-webkit-box-flex: 1;
max-width: 100%;
@ -901,8 +901,7 @@ input[type="file"] {
box-shadow: none;
}
.button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
.button-group * + .button, .button-group * + [role="button"] {
.button-group > :not(:first-child) {
border-left: 1px solid #9e9e9e;
}
@ -912,8 +911,7 @@ input[type="file"] {
-webkit-flex-direction: column;
flex-direction: column;
}
.button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
.button-group * + .button, .button-group * + [role="button"] {
.button-group > :not(:first-child) {
border: 0;
border-top: 1px solid #9e9e9e;
}
@ -962,11 +960,14 @@ input[type="file"] {
border-radius: 50%;
}
.input-group [type="checkbox"][disabled] + label, .input-group [type="radio"][disabled] + label {
.input-group [type="checkbox"][disabled] + label, .input-group [type="radio"][disabled] + label,
.input-group [type="checkbox"]:disabled + label, .input-group [type="radio"]:disabled + label {
cursor: not-allowed;
}
.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after {
.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after,
.input-group [type="checkbox"]:disabled + label:before,
.input-group [type="checkbox"]:disabled + label:after, .input-group [type="radio"]:disabled + label:before, .input-group [type="radio"]:disabled + label:after {
opacity: 0.75;
}
@ -1228,11 +1229,11 @@ footer.sticky {
}
}
[type="checkbox"]:checked + .drawer:not(.right) {
:checked + .drawer:not(.right) {
left: 0;
}
[type="checkbox"]:checked + .drawer.right {
:checked + .drawer.right {
right: 0;
}
@ -1376,7 +1377,7 @@ table th:first-child, table td:first-child {
width: 100%;
border: 1px solid #D8DEE9;
}
table.horizontal th + th, table.horizontal th + td, table.horizontal td + th, table.horizontal td + td {
table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) {
border-top: 0;
}
table.horizontal th {
@ -1446,7 +1447,7 @@ table th:first-child, table td:first-child {
width: 100%;
border: 1px solid #D8DEE9;
}
table.horizontal.preset th + th, table.horizontal.preset th + td, table.horizontal.preset td + th, table.horizontal.preset td + td {
table.horizontal.preset th:not(:first-child), table.horizontal.preset td:not(:first-child) {
border-top: 0;
}
table.horizontal.preset th {
@ -1609,12 +1610,12 @@ table.striped tr:nth-of-type(2n) > td {
background: rgba(216, 222, 233, 0.8);
}
.tabs > [type="radio"], .tabs.stacked > [type="checkbox"] {
.tabs > [type="radio"], .tabs > [type="checkbox"] {
display: none;
visibility: hidden;
}
.tabs > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div {
.tabs > label + div {
-webkit-flex-basis: auto;
flex-basis: auto;
-webkit-order: 2;
@ -1634,24 +1635,20 @@ table.striped tr:nth-of-type(2n) > td {
transition: -webkit-transform 0.3s, transform 0.3s;
}
.tabs > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label {
.tabs > label:not(:first-of-type) {
border-left: 0;
}
.tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
border-left: 0;
}
.tabs > [type="radio"]:checked + label, .tabs.stacked > [type="checkbox"]:checked + label {
.tabs > :checked + label {
background: #4C566A;
color: #ECEFF4;
}
.tabs > [type="radio"]:checked + label:hover, .tabs > [type="radio"]:checked + label:focus, .tabs.stacked > [type="checkbox"]:checked + label:hover, .tabs.stacked > [type="checkbox"]:checked + label:focus {
.tabs > :checked + label:hover, .tabs > :checked + label:focus {
background: rgba(76, 86, 106, 0.8);
}
.tabs > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
.tabs > :checked + label + div {
box-sizing: border-box;
position: relative;
height: 400px;
@ -1679,19 +1676,19 @@ table.striped tr:nth-of-type(2n) > td {
order: initial;
}
.tabs.stacked > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div {
.tabs.stacked > label + div {
-webkit-order: initial;
order: initial;
-webkit-transform-origin: top;
transform-origin: top;
}
.tabs.stacked > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="radio"] + label + div + [type="checkbox"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
.tabs.stacked > label:not(:first-of-type) {
border: 1px solid #9e9e9e;
border-top: 0;
}
.tabs.stacked > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
.tabs.stacked > :checked + label + div {
height: auto;
}
@ -1705,11 +1702,11 @@ table.striped tr:nth-of-type(2n) > td {
-webkit-order: initial;
order: initial;
}
.tabs > [type="radio"] + label + div {
.tabs > label + div {
-webkit-order: initial;
order: initial;
}
.tabs > [type="radio"] + label + div + [type="radio"] + label {
.tabs > label:not(:first-of-type) {
border: 1px solid #9e9e9e;
border-top: 0;
}
@ -1757,9 +1754,6 @@ mark.inline-block {
clip-path: inset(100%);
transition: all 0.3s;
z-index: 1010;
}
.tooltip:before, .tooltip:after {
left: 50%;
}
@ -1814,6 +1808,43 @@ mark.inline-block {
margin-top: 12px;
}
.modal {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.45);
}
.modal .card {
margin: 0 auto;
max-height: 50vh;
overflow: auto;
}
.modal .card .close {
position: absolute;
top: 12px;
right: 4px;
padding: 0;
}
:checked + .modal {
display: -webkit-box;
-webkit-box-flex: 0;
display: -webkit-flex;
display: flex;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
z-index: 1200;
}
:checked + .modal .card .close {
z-index: 1211;
}
/*
Custom contextual background elements and alerts.
*/

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

File diff suppressed because one or more lines are too long

60
dist/mini-sucroa.css vendored
View File

@ -3,7 +3,7 @@
Flavor name: Sucroa (mini-sucroa)
Author: Angeliki Daskalakis
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.2.0
mini.css version: v2.3.0
*/
@import url("https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext");
/*
@ -892,8 +892,8 @@ input[type="file"] {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
}
.button-group button, .button-group [type="button"], .button-group [type="submit"], .button-group [type="reset"],
.button-group .button, .button-group [role="button"] {
.button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"],
.button-group > .button, .button-group > [role="button"] {
margin: 0;
-webkit-box-flex: 1;
max-width: 100%;
@ -905,8 +905,7 @@ input[type="file"] {
box-shadow: none;
}
.button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
.button-group * + .button, .button-group * + [role="button"] {
.button-group > :not(:first-child) {
border-left: 1px solid #a9a2ba;
}
@ -916,8 +915,7 @@ input[type="file"] {
-webkit-flex-direction: column;
flex-direction: column;
}
.button-group * + button, .button-group * + [type="button"], .button-group * + [type="submit"], .button-group * + [type="reset"],
.button-group * + .button, .button-group * + [role="button"] {
.button-group > :not(:first-child) {
border: 0;
border-top: 1px solid #a9a2ba;
}
@ -966,11 +964,14 @@ input[type="file"] {
border-radius: 50%;
}
.input-group [type="checkbox"][disabled] + label, .input-group [type="radio"][disabled] + label {
.input-group [type="checkbox"][disabled] + label, .input-group [type="radio"][disabled] + label,
.input-group [type="checkbox"]:disabled + label, .input-group [type="radio"]:disabled + label {
cursor: not-allowed;
}
.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after {
.input-group [type="checkbox"][disabled] + label:before, .input-group [type="checkbox"][disabled] + label:after, .input-group [type="radio"][disabled] + label:before, .input-group [type="radio"][disabled] + label:after,
.input-group [type="checkbox"]:disabled + label:before,
.input-group [type="checkbox"]:disabled + label:after, .input-group [type="radio"]:disabled + label:before, .input-group [type="radio"]:disabled + label:after {
opacity: 0.8;
}
@ -1218,11 +1219,11 @@ footer.sticky {
}
}
[type="checkbox"]:checked + .drawer:not(.right) {
:checked + .drawer:not(.right) {
left: 0;
}
[type="checkbox"]:checked + .drawer.right {
:checked + .drawer.right {
right: 0;
}
@ -1478,12 +1479,12 @@ table.striped tr:nth-of-type(2n) > td {
background: rgba(211, 202, 232, 0.8);
}
.tabs > [type="radio"], .tabs.stacked > [type="checkbox"] {
.tabs > [type="radio"], .tabs > [type="checkbox"] {
display: none;
visibility: hidden;
}
.tabs > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div {
.tabs > label + div {
-webkit-flex-basis: auto;
flex-basis: auto;
-webkit-order: 2;
@ -1505,23 +1506,19 @@ table.striped tr:nth-of-type(2n) > td {
border-bottom-right-radius: 2px;
}
.tabs > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label {
.tabs > label:not(:first-of-type) {
border-left: 0;
}
.tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
border-left: 0;
}
.tabs > [type="radio"]:checked + label, .tabs.stacked > [type="checkbox"]:checked + label {
.tabs > :checked + label {
background: #e8deff;
}
.tabs > [type="radio"]:checked + label:hover, .tabs > [type="radio"]:checked + label:focus, .tabs.stacked > [type="checkbox"]:checked + label:hover, .tabs.stacked > [type="checkbox"]:checked + label:focus {
.tabs > :checked + label:hover, .tabs > :checked + label:focus {
background: rgba(232, 222, 255, 0.8);
}
.tabs > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
.tabs > :checked + label + div {
box-sizing: border-box;
position: relative;
height: 400px;
@ -1560,12 +1557,12 @@ table.striped tr:nth-of-type(2n) > td {
border-top-right-radius: 2px;
}
.tabs.stacked > [type="radio"]:checked + label, .tabs.stacked > [type="checkbox"]:checked + label {
.tabs.stacked > :checked + label {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.tabs.stacked > [type="radio"] + label + div, .tabs.stacked > [type="checkbox"] + label + div {
.tabs.stacked > label + div {
-webkit-order: initial;
order: initial;
-webkit-transform-origin: top;
@ -1573,16 +1570,16 @@ table.striped tr:nth-of-type(2n) > td {
border-radius: 0;
}
.tabs.stacked > [type="radio"] + label + div + [type="radio"] + label, .tabs.stacked > [type="radio"] + label + div + [type="checkbox"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="radio"] + label, .tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
.tabs.stacked > label:not(:first-of-type) {
border: 1px solid #a9a2ba;
border-top: 0;
}
.tabs.stacked > [type="radio"]:checked + label + div, .tabs.stacked > [type="checkbox"]:checked + label + div {
.tabs.stacked > :checked + label + div {
height: auto;
}
.tabs.stacked > [type="radio"] + label + div:last-of-type, .tabs.stacked > [type="checkbox"] + label + div:last-of-type {
.tabs.stacked > label + div:last-of-type {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
@ -1605,20 +1602,20 @@ table.striped tr:nth-of-type(2n) > td {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
.tabs > [type="radio"]:checked + label {
.tabs > :checked + label {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.tabs > [type="radio"] + label + div {
.tabs > label + div {
-webkit-order: initial;
order: initial;
border-radius: 0;
}
.tabs > [type="radio"] + label + div + [type="radio"] + label {
.tabs > label:not(:first-of-type) {
border: 1px solid #a9a2ba;
border-top: 0;
}
.tabs > [type="radio"] + label + div:last-of-type {
.tabs > label + div:last-of-type {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
@ -1666,9 +1663,6 @@ mark.inline-block {
clip-path: inset(100%);
transition: all 0.3s;
z-index: 1010;
}
.tooltip:before, .tooltip:after {
left: 50%;
}

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

File diff suppressed because one or more lines are too long

1
docs/v2/DEVLOG.md
View File

@ -1219,3 +1219,4 @@
- Changed `table` selectors to use `:not(:first-child)`, similarly to other modules.
- All changes have been tested and no errors were found (as far as I can tell).
- Created the `.modal` component, added to the `default` flavor, documenting and adding to other flavors pending.
- Updated all flavors for the new `.modal` component to be included (or not) as needed.

11
src/flavors/mini-dark.scss
View File

@ -5,7 +5,7 @@
Flavor name: Dark (mini-dark)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.2.0
mini.css version: v2.3.0
*/
// Basic rules for body and typography
$fore-color: #d0d0d0; // Text and general foreground color
@ -448,10 +448,19 @@ $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
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
$include-modal: true; // Should modals be included? (`true`/`false`) [2]
$modal-name: 'modal'; // Class name for the modals
$modal-back-color: #000; // Background color of the modal overlay
$modal-back-opacity: 0.45; // Background opacity of the modal overlay
$modal-close-name: 'close'; // Class name of the close element od the modal component.
$modal-close-top: 0.75rem; // Top position of the modal component's close icon
$modal-close-right: 0.25rem; // Right position of the modal component's close icon
// Notes:
// [1] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
// included.
// [2] - If the value of $include-modal is `true`, a modal component will be created based on the values of the variables
// for the modal, as explained in their descriptions.
// Variables for progress elements and spinners
$progress-back-color: #39444a; // Background color for <progress>
$progress-fore-color: #0277bd; // Progress bar color for <progress>

4
src/flavors/mini-default.scss
View File

@ -5,7 +5,7 @@
Flavor name: Default (mini-default)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.2.0
mini.css version: v2.3.0
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color
@ -459,6 +459,8 @@ $modal-close-right: 0.25rem; // Right position of the modal component
// [1] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
// included.
// [2] - If the value of $include-modal is `true`, a modal component will be created based on the values of the variables
// for the modal, as explained in their descriptions.
// Variables for progress elements and spinners
$progress-back-color: #e0e0e0; // Background color for <progress>
$progress-fore-color: #0277bd; // Progress bar color for <progress>

7
src/flavors/mini-lite.scss
View File

@ -7,7 +7,7 @@
Flavor name: Lite (mini-lite)
Author: Angelos Chalaris (chalarangelo@gmail.com)
Maintainers: Angelos Chalaris
mini.css version: v2.2.0
mini.css version: v2.3.0
*/
// Basic rules for body and typography
$fore-color: #212121; // Text and general foreground color
@ -340,9 +340,10 @@ $mark-style2-font-size: 1em; // Font size for <mark> style 2
$mark-style2-line-height: 1.375em; // Line height for <mark> style 2
$include-toast: false; // [Hidden flag override] Should toasts be included? (`true`/`false``) [1]
$include-tooltip: false; // Should tooltips be included? (`true`/`false`) [1]
$include-modal: false; // Should modals be included? (`true`/`false`) [1]
// Notes:
// [1] - Due to the values of $include-toast and $include-tooltip being set to `false`,
// no styling is provided for these elements. If you want to enable them, please
// [1] - Due to the values of $include-toast, $include-tooltip and $include-modal being set
// to `false`, no styling is provided for these elements. If you want to enable them, please
// refer to a full flavor file for variable definitions.
// Variables for progress elements and spinners
$progress-back-color: #e0e0e0; // Background color for <progress>

11
src/flavors/mini-nord.scss
View File

@ -5,7 +5,7 @@
Flavor name: Nord (mini-nord)
Author: tphecca (https://github.com/tphecca)
Maintainers: tphecca
mini.css version: v2.2.0
mini.css version: v2.3.0
*/
// This flavor is based on the Nord color palette: https://github.com/arcticicestudio/nord
// Basic rules for body and typography
@ -464,12 +464,21 @@ $tooltip-padding: 6px; // Padding for tooltips
$tooltip-box-shadow: // Box shadow for tooltip-box-shadow
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
$include-modal: true; // Should modals be included? (`true`/`false`) [3]
$modal-name: 'modal'; // Class name for the modals
$modal-back-color: #000; // Background color of the modal overlay
$modal-back-opacity: 0.45; // Background opacity of the modal overlay
$modal-close-name: 'close'; // Class name of the close element od the modal component.
$modal-close-top: 12px; // Top position of the modal component's close icon
$modal-close-right: 4px; // Right position of the modal component's close icon
// Notes:
// [1] - If the value of $alert-include-animated is `true`, an animation will be created and the value of $alert-animated-class
// will be used to determine the class that will be used for animated alerts.
// [2] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
// included.
// [3] - If the value of $include-modal is `true`, a modal component will be created based on the values of the variables
// for the modal, as explained in their descriptions.
// Variables for progress elements and spinners
$progress-back-color: #D8DEE9; // Background color for <progress>
$progress-fore-color: #5E81AC; // Progress bar color for <progress>

5
src/flavors/mini-sucroa.scss
View File

@ -5,7 +5,7 @@
Flavor name: Sucroa (mini-sucroa)
Author: Angeliki Daskalakis
Maintainers: Angeliki Daskalakis, Angelos Chalaris (chalarangelo@gmail.com)
mini.css version: v2.2.0
mini.css version: v2.3.0
*/
// Google Fonts imports and usage
@import url('https://fonts.googleapis.com/css?family=Cousine:400,400i,700|Libre+Baskerville:400,400i,700&subset=latin-ext');
@ -457,10 +457,13 @@ $tooltip-padding: 10px; // Padding for tooltips
$tooltip-box-shadow: // Box shadow for tooltip-box-shadow
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
$tooltip-bottom-name: 'bottom'; // Class name for bottom tooltip
$include-modal: false; // Should modals be included? (`true`/`false`) [2]
// Notes:
// [1] - If the value of $include-tooltip is `true`, a tooltip component will be creatd based on the values of the variables
// for the tooltip, as explained in their descriptions. Tooltip mixins will only work properly if the tooltip component is
// included.
// [2] - If the value of $include-modal is `true`, a modal component will be created based on the values of the variables
// for the modal, as explained in their descriptions.
// Variables for progress elements and spinners
$progress-back-color: #e8deff; // Background color for <progress>
$progress-fore-color: #6979c6; // Progress bar color for <progress>