autonomic-cooperative
/
hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update: clean-up form css

This commit is contained in:
gaelle morin 2020-05-14 18:56:49 +02:00
parent e79ddc3f37
commit 80d3a22cf6
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
1 changed files with 79 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
src/styles/base/form.scss
View File

@ -1,84 +1,85 @@
form {
display: flex;
flex-direction: column;
margin-left: -3.4rem;
transition: all .3s ease;
}
.button-register>form>input[type=submit] {
@extend .button,
.text-bold,
.text-uppercase,
.reversed,
.button-secondary,
.bordered;
margin-left: auto;
margin-top: 3.2rem;
}
.fieldset {
border-bottom: 1px solid var(--color-fieldset-border);
color: var(--color-title);
display: flex;
flex: 1 0 100%;
font-size: 1.8rem;
font-weight: 600;
margin: 2.6rem 0 1.8rem;
padding-bottom: 0.8rem;
}
.form-label {
/*flex: 1 1 auto;*/
font-weight: 600;
&.is-light label {
color: var(--color-label-light);
margin-top: 1.8rem;
text-transform: uppercase;
&>*:nth-child(1) {
margin-bottom: 0.8rem;
}
}
}
.is-full-width {
box-sizing: border-box;
flex: 1 1 100%;
padding-left: 3.4rem;
}
.is-half-width {
box-sizing: border-box;
flex: 0 0 50%;
padding-left: 3.4rem;
}
input:not([type='file']):not([type='search']):not([type='submit']),
textarea {
-webkit-tap-highlight-color: var(--color-grey-7);
background-color: var(--color-input-background);
box-sizing: border-box;
border: 2px solid var(--color-input-background);
color: var(--color-input-text);
/*flex: 1 1 0; Problem on Firefox for input type date*/
line-height: 1;
min-width: 0;
padding: 1rem;
&:focus,
&:active {
border-bottom: 2px solid var(--color-input-active);
}
}
textarea {
height: 100px;
}
.content-box {
&.with-form {
form {
display: flex;
flex-direction: column;
margin-left: -3.4rem;
transition: all .3s ease;
}
.button-register>form>input[type=submit] {
@extend .button,
.text-bold,
.text-uppercase,
.reversed,
.button-secondary,
.bordered;
margin-left: auto;
margin-top: 3.2rem;
}
.fieldset {
border-bottom: 1px solid var(--color-fieldset-border);
color: var(--color-title);
display: flex;
flex: 1 0 100%;
font-size: 1.8rem;
font-weight: 600;
margin: 2.6rem 0 1.8rem;
padding-bottom: 0.8rem;
}
.form-label {
/*flex: 1 1 auto;*/
font-weight: 600;
&.is-light label {
color: var(--color-label-light);
margin-top: 1.8rem;
text-transform: uppercase;
&>*:nth-child(1) {
margin-bottom: 0.8rem;
}
}
}
.is-full-width {
box-sizing: border-box;
flex: 1 1 100%;
padding-left: 3.4rem;
}
.is-half-width {
box-sizing: border-box;
flex: 0 0 50%;
padding-left: 3.4rem;
}
input:not([type='file']):not([type='search']):not([type='submit']),
textarea {
-webkit-tap-highlight-color: var(--color-grey-7);
background-color: var(--color-input-background);
box-sizing: border-box;
border: 2px solid var(--color-input-background);
color: var(--color-input-text);
/*flex: 1 1 0; Problem on Firefox for input type date*/
line-height: 1;
min-width: 0;
padding: 1rem;
&:focus,
&:active {
border-bottom: 2px solid var(--color-input-active);
}
}
textarea {
height: 100px;
}
sib-set-default:not([name='user-thumb']) {
clear: both;