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 {
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 {
* </div>
*
*/
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%);
}
@ -2688,6 +2689,7 @@ input[type=checkbox].field-choice:checked ~ .field-switch:after {
* table
*
*
*
*/
.table {
width: 100%;

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

@ -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;
}

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

@ -3,6 +3,7 @@
* table
*
*
*
*/
$table__padding-breakpoints: (
@ -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 {

Write Preview
Loading…
Cancel
Save