|
|
|
@ -93,31 +93,65 @@
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@mixin bouton($couleur, $texte:#FFF) { |
|
|
|
|
display: inline-block; |
|
|
|
|
height: em(30px); |
|
|
|
|
line-height: em(30px); |
|
|
|
|
padding: 0 1.5em; |
|
|
|
|
background-color: $couleur; |
|
|
|
|
border: none; |
|
|
|
|
border-radius: em(15px); |
|
|
|
|
box-shadow: none; |
|
|
|
|
text-align: center; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
color: $texte; |
|
|
|
|
transition: background 0.3s; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:hover, |
|
|
|
|
&:focus { |
|
|
|
|
background-color: $couleur-boutons-hover; |
|
|
|
|
text-decoration: none; |
|
|
|
|
} |
|
|
|
|
&[disabled=disabled] { |
|
|
|
|
background: desaturate($couleur, 45%); |
|
|
|
|
color: darken($texte, 10%) !important; |
|
|
|
|
} |
|
|
|
|
@mixin clearfix() { |
|
|
|
|
&:after, &:before { |
|
|
|
|
display:block; |
|
|
|
|
content:''; |
|
|
|
|
clear:both; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@mixin bouton($couleur:$grayLightL5, $texte:#FFF) { |
|
|
|
|
|
|
|
|
|
$couleurSaturate : saturate($couleur, 45%); |
|
|
|
|
$couleurSaturateLight : lighten($couleurSaturate, 10%); |
|
|
|
|
|
|
|
|
|
display: inline-block; |
|
|
|
|
/* height: $spacer*2; */ |
|
|
|
|
line-height: 1.2; |
|
|
|
|
padding: ($spacer/3) $spacer ($spacer/2); |
|
|
|
|
background-color: $couleur; |
|
|
|
|
border: none; |
|
|
|
|
border-radius: $spacer; |
|
|
|
|
box-shadow: none; |
|
|
|
|
text-align: center; |
|
|
|
|
/* white-space: nowrap; */ |
|
|
|
|
color: $texte; |
|
|
|
|
transition: background 0.3s; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&:hover { |
|
|
|
|
background-color: darken($couleur,15%); |
|
|
|
|
text-decoration: none; |
|
|
|
|
color: $texte; |
|
|
|
|
} |
|
|
|
|
&:focus { |
|
|
|
|
background-color: $couleurSaturateLight !important; |
|
|
|
|
text-decoration: none; |
|
|
|
|
color: $texte; |
|
|
|
|
} |
|
|
|
|
&[disabled=disabled] { |
|
|
|
|
background: desaturate($couleur, 45%); |
|
|
|
|
color: darken($texte, 10%) !important; |
|
|
|
|
} |
|
|
|
|
.fas { |
|
|
|
|
padding-left:em(6px); |
|
|
|
|
&:before { |
|
|
|
|
font-size:em(20px); |
|
|
|
|
line-height:$spacer; |
|
|
|
|
font-weight:700; |
|
|
|
|
color: $texte; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&:hover .fas:before { |
|
|
|
|
color: $texte; |
|
|
|
|
} |
|
|
|
|
&:focus .fas:before { |
|
|
|
|
color: $texte; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@mixin list-reset() { |
|
|
|
|
list-style: none; |
|
|
|
|
margin: 0; |
|
|
|
|