ptut-vhost/webpack/scss/global.scss

233 lines
4.4 KiB
SCSS

@import 'constants';
/* (1) Champs de texte */
input[type=text], .neutral > input[type=text],
input[type=mail], .neutral > input[type=mail],
input[type=password], .neutral > input[type=password],
select, .neutral > select,
input[type=text].neutral,
input[type=mail].neutral,
input[type=password].neutral,
select.neutral{
display: inline-block;
margin: 1em;
padding: .5em 1em;
border-radius: 3px;
border: 1px solid $form-neutral-color;
background-color: #fff;
color: lighten($primary-color, 15%);
transition: border .2s ease-in-out,
color .2s ease-in-out;
&:focus, &:hover{
border-color: darken($form-neutral-color, 10%);
color: $primary-color;
}
}
select{
width: 100%;
display: block;
background: #fff;
option{
padding: .5em;
}
}
// Champs valides
.valid > input[type=text],
.valid > input[type=mail],
.valid > input[type=password],
.valid > select,
input.valid[type=text],
input.valid[type=mail],
input.valid[type=password],
select.valid{
border-color: darken($form-valid-color, 0%);
&:focus, &:hover{
border-color: darken($form-valid-color, 10%);
}
}
// Champs neutres
.invalid > input[type=text],
.invalid > input[type=mail],
.invalid > input[type=password],
.invalid > select,
input.invalid[type=text],
input.invalid[type=mail],
input.invalid[type=password],
select.invalid{
border-color: darken($form-invalid-color, 0%);
&:focus, &:hover{
border-color: darken($form-invalid-color, 10%);
}
}
// Champs neutres
.search > input[type=text],
.search > input[type=mail],
.search > input[type=password],
.search > select,
input.search[type=text],
input.search[type=mail],
input.search[type=password]{
border-color: darken($form-search-color, 0%);
&:focus, &:hover{
border-color: darken($form-search-color, 10%);
}
}
/* (2) Boutons */
button, .neutral > button,
input[type=button], .neutral > input[type=button],
input[type=submit], .neutral > input[type=submit],
button.neutral,
input[type=button].neutral,
input[type=submit].neutral{
display: inline-block;
position: relative;
padding: .5em 1em;
border-radius: 3px;
border: 1px solid $form-neutral-color;
background: $bg-color center center no-repeat;
text-transform: uppercase;
font-weight: normal;
color: darken($form-neutral-color, 15%);
cursor: pointer;
transition: color .2s ease-in-out,
border-color .1s ease-in-out,
background .2s ease-in-out;
&:hover, &:focus{
color: darken($form-neutral-color, 35%);
border-color: $primary-color;
background-color: #fff;
}
}
// Boutons grisés
button:disabled,
button.grey, .grey > button,
input[type=button].grey, .grey > input[type=button],
input[type=submit].grey, .grey > input[type=submit]{
border-color: $form-grey-color;
cursor: default;
}
// Boutons valides
button.valid, .valid > button,
input[type=button].valid, .valid > input[type=button],
input[type=submit].valid, .valid > input[type=submit]{
border-color: $form-valid-color;
}
// Boutons invalides
button.invalid, .invalid > button,
input[type=button].invalid, .invalid > input[type=button],
input[type=submit].invalid, .invalid > input[type=submit]{
border-color: $form-invalid-color;
}
// Boutons recherche
button.search, .search > button,
input[type=button].search, .search > input[type=button],
input[type=submit].search, .search > input[type=submit]{
border-color: $form-search-color;
}
// Boutons quand action validee
.invalid > button.active,
button.invalid.active,
button.active{
background-color: #fff;
background-image: url('/src/static/container/active@#{$rd-form-invalid-color}.svg') !important;
background-size: 1em auto;
color: transparent !important;
}
button.valid.active,
.valid > button.active{
background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg') !important;
}
button.neutral.active,
.neutral > button.active{
background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important;
}
button.search.active,
.search > button.active{
background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg') !important;
}
// Liens
a{
color: inherit;
text-decoration: none;
cursor: pointer;
&:after{
content: '';
display: block;
width: 0%;
height: .1em;
background-color: currentColor;
transition: width .1s ease-in-out;
}
&:hover:after{
width: 100%;
}
}
// Textes
.grey{
color: $secondary-color;
}