mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-09-03 10:53:23 +02:00
Updated all flavors for modal
All flavors are now compatible with the new modal component. Some of them exclude it.
This commit is contained in:
Angelos Chalaris
104
dist/mini-dark.css
vendored
104
dist/mini-dark.css
vendored
@@ -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 > label:not(:first-of-type) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.tabs.stacked > [type="checkbox"] + label + div + [type="checkbox"] + label {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
|
||||
.tabs > :checked + label {
|
||||
background: #263238;
|
||||
}
|
||||
|
||||
|
||||
.tabs > :checked + label:hover, .tabs > :checked + label:focus {
|
||||
background: rgba(38, 50, 56, 0.8);
|
||||
}
|
||||
|
||||
|
||||
.tabs > :checked + label + div {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
@@ -1667,19 +1655,19 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
|
||||
|
||||
.tabs.stacked > label + div {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
-webkit-transform-origin: top;
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
|
||||
.tabs.stacked > label:not(:first-of-type) {
|
||||
border: 1px solid #757575;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
|
||||
.tabs.stacked > :checked + label + div {
|
||||
height: auto;
|
||||
}
|
||||
@@ -1693,11 +1681,11 @@ table.striped tr:nth-of-type(2n) > td {
|
||||
.tabs > label {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
}
|
||||
.tabs > label + div {
|
||||
-webkit-order: initial;
|
||||
order: initial;
|
||||
}
|
||||
}
|
||||
.tabs > label:not(:first-of-type) {
|
||||
border: 1px solid #757575;
|
||||
border-top: 0;
|
||||
@@ -1744,9 +1732,6 @@ mark.inline-block {
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
transition: all 0.3s;
|
||||
z-index: 1010;
|
||||
}
|
||||
|
||||
z-index: 1010;
|
||||
left: 50%;
|
||||
}
|
||||
@@ -1800,6 +1785,43 @@ mark.inline-block {
|
||||
.tooltip.bottom:after {
|
||||
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.
|
||||
|
||||
Reference in New Issue
Block a user