components/sass/form.scss

264 lines
4.9 KiB
SCSS
Raw Normal View History

2019-11-22 22:04:03 +01:00
@import "init/mixins";
input,
textarea,
select {
height: var(--height-input);
border-radius: var(--border-radius);
border: 1px solid;
color: var(--color-input);
border-color: var(--color-input-border);
background-color: var(--color-input-bg);
padding-right: var(--spacing-s);
padding-left: var(--spacing-s);
&:focus {
@include focus;
}
&::placeholder {
color: var(--color-input-placeholder);
opacity: 0.4;
}
2020-02-21 20:22:49 +01:00
&:disabled {
opacity: 0.4;
& + label {
opacity: 0.4;
}
}
2020-03-25 15:47:56 +01:00
&[type="range"] {
height: auto;
height: 0.5rem;
background-color: var(--color-secondary);
}
2019-11-22 22:04:03 +01:00
}
checkbox-element,
radio-element,
select {
cursor: pointer;
}
select {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A");
background-position: 99% center;
background-repeat: no-repeat;
background-size: 1rem;
padding-right: var(--spacing-l);
padding-left: var(--spacing-s);
}
fieldset-group {
display: flex;
flex-direction: row;
justify-content: space-between;
&.fieldset-group--smushed {
fieldset-section + fieldset-section {
margin-top: 0;
}
}
}
fieldset-section,
form,
2019-11-22 22:04:03 +01:00
.checkbox,
.radio {
+ fieldset-section,
+ form,
2019-11-22 22:04:03 +01:00
+ .checkbox,
+ .radio {
margin-top: var(--spacing-s);
}
&:last-child {
margin-bottom: 0;
}
input,
select {
width: 100%;
}
}
fieldset-section,
.checkbox,
.radio {
display: flex;
flex-direction: column;
}
2019-11-22 22:04:03 +01:00
label {
font-size: var(--font-small);
color: var(--color-input-label);
display: inline-block;
margin-bottom: var(--spacing-xxs);
}
input-submit {
display: flex;
& > *:first-child,
& > *:nth-child(2) {
margin: 0;
}
& > *:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
& > *:nth-child(2) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border: 1px solid var(--color-border);
}
}
.checkbox,
.radio {
position: relative;
input[type="checkbox"],
input[type="radio"] {
height: var(--height-checkbox);
width: var(--height-checkbox);
position: absolute;
border: none;
left: 0;
padding: 0;
background-color: transparent;
2020-02-24 20:22:40 +01:00
&:disabled + label {
cursor: default;
pointer-events: none;
}
2019-11-22 22:04:03 +01:00
}
label {
position: relative;
display: inline-block;
margin: 0;
font-size: var(--font-base);
padding-left: calc(var(--height-checkbox) + var(--spacing-s));
min-height: var(--height-checkbox);
2020-02-21 22:51:39 +01:00
&::before {
background-color: var(--color-input-toggle-bg);
}
2019-11-22 22:04:03 +01:00
&:hover {
&::before {
background-color: var(--color-input-toggle-bg-hover);
2019-11-22 22:04:03 +01:00
}
}
}
label::before,
label::after {
position: absolute;
content: "";
}
// Hide the checkmark by default
2019-11-23 01:33:24 +01:00
input[type="checkbox"] + label::after,
input[type="radio"] + label::after {
2019-11-22 22:04:03 +01:00
content: none;
}
// Unhide on the checked state
input[type="checkbox"]:checked + label::after,
input[type="radio"]:checked + label::after {
content: "";
}
input[type="checkbox"]:focus + label::before,
input[type="radio"]:focus + label::before {
@include focus;
}
}
.checkbox {
// Outer box of the fake checkbox
label::before {
height: var(--height-checkbox);
width: var(--height-checkbox);
border: 1px solid var(--color-input-border);
border-radius: var(--border-radius);
left: 0px;
top: -1px;
}
// Checkmark of the fake checkbox
label::after {
height: 6px;
width: 12px;
border-left: 2px solid;
border-bottom: 2px solid;
border-color: var(--color-input-toggle);
2019-11-22 22:04:03 +01:00
transform: rotate(-45deg);
left: 6px;
top: 6px;
}
}
.radio {
input[type="radio"] {
border-radius: 50%;
}
// Outer box of the fake radio
label::before {
height: var(--height-radio);
width: var(--height-radio);
border: 1px solid var(--color-input-border);
border-radius: calc(var(--height-radio) * 0.5);
left: 0px;
top: -1px;
}
// Checkmark of the fake radio
label::after {
height: 12px;
width: 12px;
border-radius: 50%;
background-color: var(--color-secondary);
left: 6px;
2019-11-23 01:33:24 +01:00
top: 5px;
2019-11-22 22:04:03 +01:00
}
}
2020-03-25 15:47:56 +01:00
.range__label {
display: flex;
justify-content: space-between;
width: 100%;
> * {
width: 33%;
text-align: center;
&:first-of-type {
text-align: left;
}
&:last-of-type {
text-align: right;
}
}
}
2019-11-22 22:04:03 +01:00
.fieldset-group {
@extend fieldset-group;
}
.fieldset-section {
@extend fieldset-section;
}
.input-submit {
@extend input-submit;
}