You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
200 lines
3.4 KiB
200 lines
3.4 KiB
/**
|
|
*
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
|
|
.field-group {
|
|
margin: $margin;
|
|
|
|
&--valid {
|
|
input.field-text, textarea.field-text {
|
|
border-color: var(--success);
|
|
}
|
|
|
|
.icon {
|
|
fill: var(--success);
|
|
}
|
|
}
|
|
|
|
&--error {
|
|
input.field-text, textarea.field-text {
|
|
border-color: var(--danger);
|
|
}
|
|
|
|
.icon {
|
|
fill: var(--danger);
|
|
}
|
|
}
|
|
}
|
|
|
|
.field-label {
|
|
font-size: 1rem;
|
|
font-family: var(--font-family);
|
|
|
|
.icon {
|
|
vertical-align: text-bottom;
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
input.field-text, textarea.field-text, select.field-choice {
|
|
font-family: var(--font-family);
|
|
font-size: 0.95rem;
|
|
|
|
width: 100%;
|
|
|
|
border: 1px solid lighten($color__primary, 40%);
|
|
border-radius: $border-radius;
|
|
|
|
margin: 0.7rem 0 0;
|
|
|
|
&:focus, &:active {
|
|
outline: 0;
|
|
border-color: var(--border);
|
|
}
|
|
}
|
|
|
|
input.field-text, textarea.field-text {
|
|
padding: 0.8em 1.1em;
|
|
}
|
|
|
|
textarea.field-text {
|
|
height: 180px;
|
|
}
|
|
|
|
|
|
/**
|
|
* field-choice
|
|
*
|
|
*
|
|
*/
|
|
|
|
select.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-repeat: no-repeat;
|
|
|
|
&:active, &:focus {
|
|
background-image:
|
|
linear-gradient(to right, $color__border, $color__border);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* radio & checkbox
|
|
*
|
|
* <div class="field">
|
|
* <label for="field__checkbox__1" class="field__label">
|
|
* <input class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
|
|
* <svg class="icon field__choice__unchecked" aria-hidden="true">
|
|
* <use xlink:href="symbol-defs.svg#icon-minus"></use>
|
|
* </svg>
|
|
* <svg class="icon field__choice__checked" aria-hidden="true">
|
|
* <use xlink:href="symbol-defs.svg#icon-checked"></use>
|
|
* </svg>
|
|
* checkbox 1
|
|
* </label>
|
|
* </div>
|
|
*
|
|
*/
|
|
|
|
input[type=checkbox].field-choice,
|
|
input[type=radio].field-choice {
|
|
position: relative;
|
|
display: none;
|
|
|
|
~ .field-choice__checked {
|
|
display: none;
|
|
}
|
|
|
|
&:checked ~ .field-choice__checked {
|
|
display: inline-block;
|
|
}
|
|
|
|
&:checked ~ .field-choice__unchecked {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
svg.field-choice__unchecked {
|
|
fill: var(--active);
|
|
}
|
|
|
|
svg.field-choice__checked {
|
|
fill: var(--success);
|
|
}
|
|
|
|
.field-help, .field-error {
|
|
display: inline-block;
|
|
width: 100%;
|
|
|
|
padding: 0.6em 0.5em;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/**
|
|
*
|
|
*
|
|
*/
|
|
|
|
.field-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 75px;
|
|
height: 35px;
|
|
|
|
border: $border;
|
|
border-radius: $border-radius;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 50%;
|
|
height: 100%;
|
|
content: '';
|
|
|
|
border: $border;
|
|
border-color: var(--border-contrast);
|
|
border-radius: $border-radius;
|
|
background-color: var(--active);
|
|
|
|
transition: transform 0.25s;
|
|
}
|
|
}
|
|
|
|
input[type=checkbox].field-choice {
|
|
~ .field-switch:after {
|
|
left: 0;
|
|
}
|
|
|
|
&:checked ~ .field-switch {
|
|
border-color: var(--success);
|
|
|
|
&:after {
|
|
background-color: var(--success);
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* display error for fields
|
|
*
|
|
*/
|
|
.field-error {
|
|
color: var(--danger);
|
|
}
|