date-poll-api/public/assets/scss/atoms/_forms.scss

166 lines
2.4 KiB
SCSS

@charset "UTF-8";
.input-lg {
display: block;
width: 100%;
}
select {
margin-right: 1ch;
}
input {
margin-right: 1ch;
&[type="date"]::after {
content: "au format JJ/MM/AAAA";
display: inline-block;
position: relative;
}
}
input,
select,
textarea {
padding: 1rem;
border: 1px solid $secondary_color;
border-bottom: 3px solid $primary_color;
}
input,
select {
display: inline-block;
margin-bottom: 10px;
margin-left: 5px;
}
textarea {
width: 100%;
border-left: 3px solid $primary_color;
}
select,
option {
// delete default display
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
background-color: transparent;
background-image: url("./assets/img/fleche_bas.svg");
padding-right: 2.5rem;
background-repeat: no-repeat;
background-size: 9px 8px;
background-position: right 1rem center;
background-clip: border-box;
// TODO -> check what angular can do
}
label {
&[for] {
cursor: pointer;
}
&:not([for]) {
color: $dusty-orange;
&:before {
content: "ce label n'a pas d'attribut for, c'est mal.";
color: $violet;
}
}
}
input {
&:not([id]) {
color: $dusty-orange;
&:before {
content: "cet input n'a pas d'attribut id, c'est mal.";
color: $violet;
display: block;
padding: 1em;
background: yellow;
position: relative;
top: -1em;
z-index: 2;
margin-right: 0.5em;
right: 0;
border: solid red 2px;
box-shadow: 0 0 10px orange;
}
}
}
.comment {
border-left: 6px solid $ugly-purple;
margin-top: 25px;
margin-bottom: 25px;
flex-wrap: wrap;
padding-left: 17px;
}
.cname {
font-weight: bold;
}
.btn {
max-width: 300px;
}
.next {
max-width: 200px;
}
input[type=text], textarea {
max-width: 350px;
}
li {
list-style-type: none;
}
h2 {
}
.next {
align-self: flex-end;
margin-bottom: 50px;
}
textarea {
height: 213px;
margin-bottom: 20px;
}
.nobold {
font-weight: normal;
}
select, input, textarea {
@extend .clickable;
&:active,
&:focus,
&:hover {
color: $primary_color;
}
}
.btn-block {
display: block;
width: 100%;
}
.btn, a {
cursor: pointer;
}