funky-framadate-front/src/assets/scss/atoms/_forms.scss

166 lines
2.4 KiB
SCSS
Raw Normal View History

@charset "UTF-8";
2019-11-23 15:35:27 +01:00
.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;
}
2019-11-20 19:31:11 +01:00
}
2019-11-23 15:35:27 +01:00
2019-08-12 21:54:40 +02:00
input,
select,
textarea {
2019-11-23 15:35:27 +01:00
padding: 1rem;
border: 1px solid $secondary_color;
border-bottom: 3px solid $primary_color;
2019-09-06 10:41:48 +02:00
}
input,
2019-08-12 21:54:40 +02:00
select {
2019-11-23 15:35:27 +01:00
display: inline-block;
margin-bottom: 10px;
margin-left: 5px;
}
textarea {
2019-11-23 15:35:27 +01:00
width: 100%;
border-left: 3px solid $primary_color;
}
2019-08-11 17:06:07 +02:00
2019-08-12 21:54:40 +02:00
select,
option {
2019-11-23 15:35:27 +01:00
// delete default display
-webkit-appearance: none;
-moz-appearance: none;
2019-08-12 21:54:40 +02:00
2019-11-23 15:35:27 +01:00
border-radius: 0;
2019-08-12 21:54:40 +02:00
2019-11-23 15:35:27 +01:00
background-color: transparent;
background-image: url("./assets/img/fleche_bas.svg");
padding-right: 2.5rem;
2019-09-06 11:04:54 +02:00
2019-11-23 15:35:27 +01:00
background-repeat: no-repeat;
background-size: 9px 8px;
background-position: right 1rem center;
2019-09-06 11:04:54 +02:00
2019-11-23 15:35:27 +01:00
background-clip: border-box;
2019-08-15 20:44:42 +02:00
2019-11-23 15:35:27 +01:00
// TODO -> check what angular can do
2019-08-12 21:54:40 +02:00
}
2019-08-11 17:06:07 +02:00
label {
2019-11-23 15:35:27 +01:00
&[for] {
cursor: pointer;
}
2019-08-11 17:06:07 +02:00
2019-11-23 15:35:27 +01:00
&:not([for]) {
color: $dusty-orange;
2019-08-11 17:06:07 +02:00
2019-11-23 15:35:27 +01:00
&:before {
content: "ce label n'a pas d'attribut for, c'est mal.";
color: $violet;
}
2019-08-11 17:06:07 +02:00
}
}
2020-01-16 10:33:05 +01:00
input {
&:not([id]) {
color: $dusty-orange;
2020-01-16 10:33:05 +01:00
&: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;
}
}
2020-01-16 10:33:05 +01:00
}
2020-01-16 16:38:06 +01:00
.comment {
2020-01-16 10:33:05 +01:00
border-left: 6px solid $ugly-purple;
margin-top: 25px;
margin-bottom: 25px;
flex-wrap: wrap;
2020-01-16 16:38:06 +01:00
padding-left: 17px;
2020-01-16 10:33:05 +01:00
}
.cname {
2020-01-16 16:38:06 +01:00
2020-01-16 10:33:05 +01:00
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;
}
}
2020-01-16 15:35:11 +01:00
.btn-block {
display: block;
width: 100%;
}
2020-01-20 15:01:56 +01:00
.btn, a {
cursor: pointer;
}