diff --git a/public/plain-ui.css b/public/plain-ui.css index 89915a7..67dace8 100644 --- a/public/plain-ui.css +++ b/public/plain-ui.css @@ -2302,6 +2302,7 @@ h6, .h6 { /** * + * fields * * * @@ -2309,13 +2310,13 @@ h6, .h6 { .field-group { margin: 0 0 1rem; } -.field-group--valid input.field-text, .field-group--valid textarea.field-text { +.field-group--valid .field-text { border-color: var(--success); } .field-group--valid .icon { fill: var(--success); } -.field-group--error input.field-text, .field-group--error textarea.field-text { +.field-group--error .field-text { border-color: var(--danger); } .field-group--error .icon { @@ -2333,7 +2334,7 @@ h6, .h6 { cursor: pointer; } -input.field-text, textarea.field-text, select.field-choice { +.field-text, .field-choice { font-family: var(--font-family); font-size: 0.95rem; width: 100%; @@ -2341,12 +2342,12 @@ input.field-text, textarea.field-text, select.field-choice { border-radius: 2px; margin: 0.7rem 0 0; } -input.field-text:focus, input.field-text:active, textarea.field-text:focus, textarea.field-text:active, select.field-choice:focus, select.field-choice:active { +.field-text:focus, .field-text:active, .field-choice:focus, .field-choice:active { outline: 0; border-color: var(--border); } -input.field-text, textarea.field-text { +.field-text { padding: 0.8em 1.1em; } @@ -2359,7 +2360,7 @@ textarea.field-text { * * */ -select.field-choice { +.field-choice { -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -2369,7 +2370,7 @@ select.field-choice { background-size: 1.5rem 100%; background-repeat: no-repeat; } -select.field-choice:active, select.field-choice:focus { +.field-choice:active, .field-choice:focus { background-image: linear-gradient(to right, #3e3e3e, #3e3e3e); } @@ -2390,21 +2391,21 @@ select.field-choice:active, select.field-choice:focus { * * */ -input[type=checkbox].field-choice, -input[type=radio].field-choice { +[type=checkbox].field-choice, +[type=radio].field-choice { position: relative; display: none; } -input[type=checkbox].field-choice ~ .field-choice__checked, -input[type=radio].field-choice ~ .field-choice__checked { +[type=checkbox].field-choice ~ .field-choice__checked, +[type=radio].field-choice ~ .field-choice__checked { display: none; } -input[type=checkbox].field-choice:checked ~ .field-choice__checked, -input[type=radio].field-choice:checked ~ .field-choice__checked { +[type=checkbox].field-choice:checked ~ .field-choice__checked, +[type=radio].field-choice:checked ~ .field-choice__checked { display: inline-block; } -input[type=checkbox].field-choice:checked ~ .field-choice__unchecked, -input[type=radio].field-choice:checked ~ .field-choice__unchecked { +[type=checkbox].field-choice:checked ~ .field-choice__unchecked, +[type=radio].field-choice:checked ~ .field-choice__unchecked { display: none; } @@ -2449,13 +2450,13 @@ svg.field-choice__checked { transition: transform 0.25s; } -input[type=checkbox].field-choice ~ .field-switch:after { +[type=checkbox].field-choice ~ .field-switch:after { left: 0; } -input[type=checkbox].field-choice:checked ~ .field-switch { +[type=checkbox].field-choice:checked ~ .field-switch { border-color: var(--success); } -input[type=checkbox].field-choice:checked ~ .field-switch:after { +[type=checkbox].field-choice:checked ~ .field-switch:after { background-color: var(--success); transform: translateX(100%); } @@ -2686,6 +2687,7 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after { /** * * table + * * * */ diff --git a/src/scss/components/_field.scss b/src/scss/components/_field.scss index 81f6d7f..77c7da4 100644 --- a/src/scss/components/_field.scss +++ b/src/scss/components/_field.scss @@ -1,5 +1,6 @@ /** * + * fields * * * @@ -9,7 +10,7 @@ margin: $margin; &--valid { - input.field-text, textarea.field-text { + .field-text { border-color: var(--success); } @@ -19,7 +20,7 @@ } &--error { - input.field-text, textarea.field-text { + .field-text { border-color: var(--danger); } @@ -42,7 +43,7 @@ } } -input.field-text, textarea.field-text, select.field-choice { +.field-text, .field-choice { font-family: var(--font-family); font-size: 0.95rem; @@ -59,7 +60,7 @@ input.field-text, textarea.field-text, select.field-choice { } } -input.field-text, textarea.field-text { +.field-text { padding: 0.8em 1.1em; } @@ -74,21 +75,17 @@ textarea.field-text { * */ -select.field-choice { +.field-choice { appearance: none; padding: 0.8em; - background-image: - linear-gradient(to right, $color__active, $color__active); - background-position: - 100%; - background-size: - 1.5rem 100%; + background-image: linear-gradient(to right, $color__active, $color__active); + background-position: 100%; + background-size: 1.5rem 100%; background-repeat: no-repeat; &:active, &:focus { - background-image: - linear-gradient(to right, $color__border, $color__border); + background-image: linear-gradient(to right, $color__border, $color__border); } } @@ -110,8 +107,8 @@ select.field-choice { * */ -input[type=checkbox].field-choice, -input[type=radio].field-choice { +[type=checkbox].field-choice, +[type=radio].field-choice { position: relative; display: none; @@ -175,7 +172,7 @@ svg.field-choice__checked { } } -input[type=checkbox].field-choice { +[type=checkbox].field-choice { ~ .field-switch:after { left: 0; } diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss index 13efabb..a54f436 100644 --- a/src/scss/components/_table.scss +++ b/src/scss/components/_table.scss @@ -1,6 +1,7 @@ /** * * table + * * * */ @@ -39,6 +40,7 @@ $table__hover-background-color: lighten($color__primary, 10%) !default; background-color: var(--background); } + // other background-color for even td inside tr &--striped { .table__tr { &:nth-child(even) { @@ -49,6 +51,7 @@ $table__hover-background-color: lighten($color__primary, 10%) !default; } } + // if hover tr change background color for all tr inside &--hover { .table__tr:hover { .table__td {