tiny-components
/
plain-ui
1
0
Fork 0
Code Issues 13 Pull Requests Projects Releases 5 Wiki Activity

adding #46

Browse Source
release/0.5
HerrHase 3 years ago
parent b446fa59cf
commit e32839de4d
3 changed files with 36 additions and 34 deletions
Show Stats Download Patch File Download Diff File

38
public/plain-ui.css
Unescape View File

@ -2302,6 +2302,7 @@ h6, .h6 {
/** /**
* *
* fields
* *
* *
* *
@ -2309,13 +2310,13 @@ h6, .h6 {
.field-group { .field-group {
margin: 0 0 1rem; 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); border-color: var(--success);
} }
.field-group--valid .icon { .field-group--valid .icon {
fill: var(--success); fill: var(--success);
} }
.field-group--error input.field-text, .field-group--error textarea.field-text { .field-group--error .field-text {
border-color: var(--danger); border-color: var(--danger);
} }
.field-group--error .icon { .field-group--error .icon {
@ -2333,7 +2334,7 @@ h6, .h6 {
cursor: pointer; cursor: pointer;
} }
input.field-text, textarea.field-text, select.field-choice { .field-text, .field-choice {
font-family: var(--font-family); font-family: var(--font-family);
font-size: 0.95rem; font-size: 0.95rem;
width: 100%; width: 100%;
@ -2341,12 +2342,12 @@ input.field-text, textarea.field-text, select.field-choice {
border-radius: 2px; border-radius: 2px;
margin: 0.7rem 0 0; 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; outline: 0;
border-color: var(--border); border-color: var(--border);
} }
input.field-text, textarea.field-text { .field-text {
padding: 0.8em 1.1em; padding: 0.8em 1.1em;
} }
@ -2359,7 +2360,7 @@ textarea.field-text {
* *
* *
*/ */
select.field-choice { .field-choice {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
@ -2369,7 +2370,7 @@ select.field-choice {
background-size: 1.5rem 100%; background-size: 1.5rem 100%;
background-repeat: no-repeat; 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); background-image: linear-gradient(to right, #3e3e3e, #3e3e3e);
} }
@ -2390,21 +2391,21 @@ select.field-choice:active, select.field-choice:focus {
* </div> * </div>
* *
*/ */
input[type=checkbox].field-choice, [type=checkbox].field-choice,
input[type=radio].field-choice { [type=radio].field-choice {
position: relative; position: relative;
display: none; display: none;
} }
input[type=checkbox].field-choice ~ .field-choice__checked, [type=checkbox].field-choice ~ .field-choice__checked,
input[type=radio].field-choice ~ .field-choice__checked { [type=radio].field-choice ~ .field-choice__checked {
display: none; display: none;
} }
input[type=checkbox].field-choice:checked ~ .field-choice__checked, [type=checkbox].field-choice:checked ~ .field-choice__checked,
input[type=radio].field-choice:checked ~ .field-choice__checked { [type=radio].field-choice:checked ~ .field-choice__checked {
display: inline-block; display: inline-block;
} }
input[type=checkbox].field-choice:checked ~ .field-choice__unchecked, [type=checkbox].field-choice:checked ~ .field-choice__unchecked,
input[type=radio].field-choice:checked ~ .field-choice__unchecked { [type=radio].field-choice:checked ~ .field-choice__unchecked {
display: none; display: none;
} }
@ -2449,13 +2450,13 @@ svg.field-choice__checked {
transition: transform 0.25s; transition: transform 0.25s;
} }
input[type=checkbox].field-choice ~ .field-switch:after { [type=checkbox].field-choice ~ .field-switch:after {
left: 0; left: 0;
} }
input[type=checkbox].field-choice:checked ~ .field-switch { [type=checkbox].field-choice:checked ~ .field-switch {
border-color: var(--success); 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); background-color: var(--success);
transform: translateX(100%); transform: translateX(100%);
} }
@ -2688,6 +2689,7 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after {
* table * table
* *
* *
*
*/ */
.table { .table {
width: 100%; width: 100%;

29
src/scss/components/_field.scss
Unescape View File

@ -1,5 +1,6 @@
/** /**
* *
* fields
* *
* *
* *
@ -9,7 +10,7 @@
margin: $margin; margin: $margin;
&--valid { &--valid {
input.field-text, textarea.field-text { .field-text {
border-color: var(--success); border-color: var(--success);
} }
@ -19,7 +20,7 @@
} }
&--error { &--error {
input.field-text, textarea.field-text { .field-text {
border-color: var(--danger); 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-family: var(--font-family);
font-size: 0.95rem; 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; padding: 0.8em 1.1em;
} }
@ -74,21 +75,17 @@ textarea.field-text {
* *
*/ */
select.field-choice { .field-choice {
appearance: none; appearance: none;
padding: 0.8em; padding: 0.8em;
background-image: background-image: linear-gradient(to right, $color__active, $color__active);
linear-gradient(to right, $color__active, $color__active); background-position: 100%;
background-position: background-size: 1.5rem 100%;
100%;
background-size:
1.5rem 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
&:active, &:focus { &:active, &:focus {
background-image: background-image: linear-gradient(to right, $color__border, $color__border);
linear-gradient(to right, $color__border, $color__border);
} }
} }
@ -110,8 +107,8 @@ select.field-choice {
* *
*/ */
input[type=checkbox].field-choice, [type=checkbox].field-choice,
input[type=radio].field-choice { [type=radio].field-choice {
position: relative; position: relative;
display: none; display: none;
@ -175,7 +172,7 @@ svg.field-choice__checked {
} }
} }
input[type=checkbox].field-choice { [type=checkbox].field-choice {
~ .field-switch:after { ~ .field-switch:after {
left: 0; left: 0;
} }

3
src/scss/components/_table.scss
Unescape View File

@ -3,6 +3,7 @@
* table * table
* *
* *
*
*/ */
$table__padding-breakpoints: ( $table__padding-breakpoints: (
@ -39,6 +40,7 @@ $table__hover-background-color: lighten($color__primary, 10%) !default;
background-color: var(--background); background-color: var(--background);
} }
// other background-color for even td inside tr
&--striped { &--striped {
.table__tr { .table__tr {
&:nth-child(even) { &: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 { &--hover {
.table__tr:hover { .table__tr:hover {
.table__td { .table__td {

Write Preview
Loading…
Cancel
Save