src/sass/partials/components/_forms.scss
.form {
margin-top: 0;
@include breakpoint(setting-get('responsive form')) {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
&--alert {
background-color: color('red', 10);
border-radius: 5px;
color: color('red', 60);
font-size: ms(-1);
margin-bottom: .5em;
padding: .5em .8em;
position: relative;
&::after {
@include triangle(color('red', 10), 1em, 2em, 180);
bottom: -10px;
content: '';
position: absolute;
right: 1em;
}
}
&--description {
color: color('grey', 60);
font-size: ms(-1);
font-style: italic;
margin-top: setting-get('rhythm') / 2;
}
&--field {
margin-top: setting-get('rhythm') / .5;
}
&--fieldset {
border: setting-get('input border width') solid setting-get('primary accent color');
margin-top: setting-get('rhythm') / .5;
padding: 0 setting-get('rhythm') / .75 setting-get('rhythm') / .75 setting-get('rhythm') / .75;
@include breakpoint(setting-get('responsive form')) {
padding: 0 setting-get('rhythm') / .5 setting-get('rhythm') / .5 setting-get('rhythm') / .5;
}
+:first-child {
margin-top: setting-get('rhythm') / 2;
}
}
&--field-container {
background-color: color('white');
margin-top: setting-get('rhythm') / .5;
padding: setting-get('rhythm') / .75;
@include breakpoint(setting-get('responsive form')) {
padding: setting-get('rhythm') / .5;
width: 48%;
}
:first-child {
margin-top: 0;
}
}
&--publish-container {
background-color: color('white');
margin-top: setting-get('rhythm') / .5;
order: 0;
padding: setting-get('rhythm') / .75;
@include breakpoint(setting-get('responsive form')) {
background-color: transparent;
padding: 0;
width: 48%;
}
}
&--publish-fields {
@include breakpoint(setting-get('responsive form')) {
background-color: color('white');
order: 1;
padding: setting-get('rhythm') / .5;
}
:first-child {
margin-top: 0;
}
}
&--legend {
background-color: color('white');
border: setting-get('input border width') solid color('white');
border-radius: setting-get('input border radius');
color: color('black', 100);
font-weight: setting-get('bold font weight');
padding: 0 setting-get('rhythm');
transform: translateX(setting-get('rhythm') / -1);
}
&--actions {
margin-top: setting-get('rhythm') / .5;
width: 100%;
@include breakpoint(setting-get('responsive form')) {
flex-grow: 1;
order: 2;
}
}
[type='date'],
[type='datetime'],
[type='datetime-local'],
[type='email'],
[type='month'],
[type='number'],
[type='password'],
[type='search'],
[type='tel'],
[type='text'],
[type='time'],
[type='url'],
[type='week'] {
@include input;
}
[type='checkbox'] {
@include checkbox;
}
[type='color'] {
@include input;
min-height: 2em;
padding: 0;
width: 5em;
}
label {
font-weight: setting-get('bold font weight');
}
option {
margin-top: 0;
}
select {
@include input;
border-radius: 0;
}
[type='radio'] {
@include radio;
}
[type='range'] {
@include range;
@include range--thumb('webkit', 'slider');
@include range--thumb('moz', 'range');
}
textarea {
@include input;
}
&--button,
&--submit {
@include button(setting-get('primary accent color'), setting-get('primary accent color'), setting-get('primary color'), setting-get('primary accent color'), setting-get('primary color'), setting-get('primary color'), setting-get('primary color'));
margin-top: 0;
}
&--cancel {
@include link(setting-get('primary color'), setting-get('primary color'), setting-get('secondary link color'), setting-get('secondary link color'));
margin: setting-get('rhythm') / 2 0 0 setting-get('rhythm');
}
&--reset {
@include button(setting-get('primary color'), setting-get('primary color'), setting-get('primary accent color'), setting-get('primary color'), setting-get('primary accent color'), setting-get('primary accent color'), setting-get('primary color'));
}
}
.required {
&--save {
background-color: setting-get('primary support color');
font-weight: setting-get('normal font weight');
}
&--publish {
background-color: setting-get('secondary support color');
font-weight: setting-get('normal font weight');
}
}