mail/src/sass/blocks/basics/_form.scss

290 lines
5.3 KiB
SCSS

// Form layout
.form {
margin: 20px auto 40px;
// same as max page with
// form should never be wider because it just doesn't look good
max-width: 400px;
&__error-message {
margin-bottom: 10px;
color: $color-error;
}
&__password-strong-message {
margin-bottom: 10px;
color: green;
}
&__row {
margin-bottom: 10px;
&--multi {
margin-bottom: 0;
@include respond-to(sm) {
display: flex;
}
}
}
&__col {
margin-bottom: 10px;
@include respond-to(sm) {
flex-grow: 1;
flex-basis: 0;
& + .form__col {
margin-left: 10px;
}
&--2 {
flex-grow: 2;
}
}
}
.btn {
width: 100%;
}
}
.form-fieldset {
margin: 0 0 20px;
border: 1px solid $color-border-light;
legend {
color: $color-blue;
padding: 0 0.5em;
}
& > :first-child {
margin-top: 0;
}
& > :last-child {
margin-bottom: 0;
}
&--standalone {
margin: 30px 0 40px;
}
&--error {
border-color: $color-error;
legend {
color: $color-error;
}
}
}
.form-input-with-button {
display: flex;
flex-direction: row;
& > .input-text {
flex-grow: 1;
margin-right: 10px;
height: 40px;
}
& > .btn {
flex-shrink: 0;
height: 40px;
@include respond-to(md) {
min-width: 8em;
}
}
}
// Form elements
.input-text {
width: 100%;
background-color: $color-bg;
border: 1px solid $color-border-light;
color: $color-text;
font-size: $font-size-base;
padding: 0.5em 0.7em;
outline: none;
box-shadow: none;
// ios
border-radius: 0;
-webkit-appearance: none;
&::placeholder {
color: $color-text-light;
}
&.ng-touched.ng-invalid,
&--error {
border-color: $color-error;
}
&--big {
font-size: $font-size-bigger;
}
}
.textarea {
width: 100%;
height: 100px;
border: 1px solid $color-border-light;
resize: none;
outline: none;
}
// Attention: Webkit support only!
.input-select {
position: relative;
&:after {
position: absolute;
right: 0.5em;
top: 0;
content: '<>';
color: $color-text;
transform: rotate(90deg);
pointer-events: none;
}
select {
@extend .input-text;
padding-right: 2em;
}
}
// Attention: Webkit support only!
.input-file {
width: 100%;
background-color: $color-bg;
border: 1px solid $color-border-light;
color: $color-text;
font-size: 1em;
padding: 4px 4px;
outline: none;
&::-webkit-file-upload-button {
background-color: $color-grey-input;
border: 0;
color: $color-bg;
padding: 4px 10px;
font-family: inherit;
font-size: inherit;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
outline: none;
cursor: pointer;
}
}
// TODO: remove, has been replace by general form class
.input-error-message {
margin: 5px 0;
padding: 0;
color: $color-error;
font-size: $font-size-base;
}
.search {
position: relative;
width: 100%;
.input-text {
padding-left: 1.8em;
}
& > svg {
position: absolute;
left: 0.7em;
fill: $color-text-light;
top: 0.7em;
height: 1em;
width: 0.8em;
}
// Small lightweight search field to align with btn--light
&--light {
.input-text {
height: 2em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
& > svg {
top: 0.5em;
}
}
}
.input-checkbox {
display: block;
padding-left: 2em;
.checkbox {
float: left;
margin-top: 0.1em;
margin-left: -2em;
}
a {
color: $color-main;
text-decoration: underline;
}
}
.checkbox {
input[type="checkbox"] {
display: none;
&:checked + span svg {
opacity: 1;
transform: scale(1, 1);
}
}
span {
display: inline-block;
width: 1em;
height: 1em;
line-height: 1em;
border: 1px solid $color-text-light;
text-align: center;
svg {
display: inline-block;
fill: $color-main;
height: 90%;
width: 90%;
opacity: 0;
transform: scale(0.5, 0.5);
transform-origin: center center;
transition: opacity 0.2s, transform 0.2s;
}
}
&:hover,
&:focus {
span {
border-color: $color-text;
}
}
}
.input-email-fixed-domain {
display: flex;
& > input {
flex-grow: 1;
margin-right: 10px;
}
& > span {
font-size: $font-size-big;
flex-shrink: 0;
line-height: 38px; // magic number: depends on .input-text height
@include respond-to(md) {
font-size: $font-size-bigger;
}
}
}
/* TODO: refactore this block, simply doesn't work on mobile */
.input-code {
& > input {
display: inline-block;
width: 4em;
}
}