267 lines
8 KiB
SCSS
267 lines
8 KiB
SCSS
.butn-wrap {
|
|
display: inline-flex;
|
|
width: fit-content;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
%butn {
|
|
display: inline-block;
|
|
padding: 1rem 2rem;
|
|
margin: 0.5rem;
|
|
color: $butn-spe-color;
|
|
line-height: 1;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease-in-out;
|
|
|
|
&:visited,
|
|
&:active { text-decoration: none; }
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: $butn-prim-bgcolor;
|
|
box-shadow: inset 0 -8rem 0 0 $butn-snd-hover;
|
|
color: $butn-spe-color;
|
|
}
|
|
|
|
&.lg-width { width: 100%; }
|
|
}
|
|
|
|
.btn-bd-primary {
|
|
--bs-btn-font-weight: 600;
|
|
--bs-btn-color: var(--bs-white);
|
|
--bs-btn-bg: #0090d7;
|
|
--bs-btn-border-color: #0090d7;
|
|
--bs-btn-border-radius: 0;
|
|
--bs-btn-hover-color: var(--bs-white);
|
|
--bs-btn-hover-bg: #{shade-color(#0090d7, 10%)};
|
|
--bs-btn-hover-border-color: #{shade-color(#0090d7, 10%)};
|
|
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
|
--bs-btn-active-color: var(--bs-btn-hover-color);
|
|
--bs-btn-active-bg: #{shade-color(#0090d7, 20%)};
|
|
--bs-btn-active-border-color: #{shade-color(#0090d7, 20%)};
|
|
|
|
&.btn {
|
|
--bs-btn-font-family: "Poppins-SemiBold", sans-serif;
|
|
--bs-btn-font-size: 16px;
|
|
--bs-btn-padding-y: 1rem;
|
|
--bs-btn-padding-x: 2rem;
|
|
}
|
|
}
|
|
|
|
.butn-simple {
|
|
@extend %butn;
|
|
|
|
padding: 0.5rem 1rem;
|
|
background: $butn-snd-bgcolor;
|
|
border-radius: 0.5rem;
|
|
|
|
&:hover {
|
|
background: $butn-spe-bgcolor;
|
|
box-shadow: none;
|
|
color: $butn-snd-color;
|
|
}
|
|
}
|
|
|
|
// BOUTON AVEC BORDURES INOX
|
|
.butn-prim {
|
|
@extend %butn;
|
|
|
|
border: 0.16rem solid;
|
|
border-width: 0.25rem;
|
|
background: $butn-prim-bgcolor;
|
|
border-image-slice: 1;
|
|
border-image-source: linear-gradient(0.25turn, #333, #fff, #333);
|
|
font: 16px Poppins-SemiBold, sans-serif;
|
|
|
|
&.header { font-size: 12px; }
|
|
}
|
|
|
|
.butn-sec {
|
|
@extend %butn;
|
|
|
|
padding: 0.5rem 2.5rem;
|
|
border: 0.16rem solid #fff;
|
|
font: 1rem Poppins-Regular, sans-serif;
|
|
}
|
|
|
|
// BOUTON BLANC DE LA BANNIERE
|
|
.butn-ter {
|
|
@extend %butn;
|
|
|
|
padding: 0.75rem 2rem;
|
|
border: 2px solid #fff;
|
|
background: $blanc;
|
|
// border-radius: 0;
|
|
color: $color-bg-banner;
|
|
font: 16px Poppins-SemiBold, sans-serif;
|
|
|
|
&:visited,
|
|
&:active { color: $color-bg-banner; }
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: $color-bg-banner;
|
|
box-shadow: none;
|
|
color: $blanc;
|
|
}
|
|
}
|
|
|
|
.butn-quad {
|
|
@extend %butn;
|
|
|
|
padding: 0.75rem 2rem;
|
|
background: $color-bg-dropmenu;
|
|
font: 16px Poppins-Regular, sans-serif;
|
|
|
|
&:hover {
|
|
background-color: var(--range-color);
|
|
box-shadow: none;
|
|
color: $butn-spe-color;
|
|
}
|
|
}
|
|
|
|
.butn-cinq {
|
|
display: inline-block;
|
|
padding: 1rem;
|
|
margin: 0.5rem;
|
|
background-color: $color-bg-noir;
|
|
color: $text-color;
|
|
line-height: 1;
|
|
text-align: center;
|
|
|
|
&:hover {
|
|
background-color: $gris2;
|
|
}
|
|
&.blue.checked { background-color: #0090d7; }
|
|
&.red.checked { background-color: #e30613; }
|
|
&.orange.checked { background-color: #ef7900; }
|
|
&.green.checked { background-color: #9ed023; }
|
|
&.deep-green.checked { background-color: #00723a; }
|
|
}
|
|
|
|
.add-calendar-btn {
|
|
@extend %butn;
|
|
|
|
margin: 0;
|
|
background-color: $color-bg-banner;
|
|
font: 12px Poppins-SemiBold, sans-serif;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: $blanc;
|
|
box-shadow: none;
|
|
color: $color-bg-banner;
|
|
}
|
|
|
|
.calendar-svg {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 1rem;
|
|
display: block;
|
|
width: 1.5rem;
|
|
stroke: $butn-spe-color;
|
|
transition: all 0.3s ease-in-out;
|
|
translate: 0 -50%;
|
|
}
|
|
|
|
&:hover .calendar-svg { stroke: $color-bg-banner; }
|
|
&:focus .calendar-svg { stroke: $color-bg-banner; }
|
|
}
|
|
|
|
// SSSSSSSSSSSSSSS MMMMMMMM MMMMMMMM
|
|
// SS:::::::::::::::SM:::::::M M:::::::M
|
|
// S:::::SSSSSS::::::SM::::::::M M::::::::M
|
|
// S:::::S SSSSSSSM:::::::::M M:::::::::M
|
|
// S:::::S M::::::::::M M::::::::::M
|
|
// S:::::S M:::::::::::M M:::::::::::M
|
|
// S::::SSSS M:::::::M::::M M::::M:::::::M
|
|
// SS::::::SSSSS M::::::M M::::M M::::M M::::::M
|
|
// SSS::::::::SS M::::::M M::::M::::M M::::::M
|
|
// SSSSSS::::S M::::::M M:::::::M M::::::M
|
|
// S:::::SM::::::M M:::::M M::::::M
|
|
// S:::::SM::::::M MMMMM M::::::M
|
|
// SSSSSSS S:::::SM::::::M M::::::M
|
|
// S::::::SSSSSS:::::SM::::::M M::::::M
|
|
// S:::::::::::::::SS M::::::M M::::::M
|
|
// SSSSSSSSSSSSSSS MMMMMMMM MMMMMMMM
|
|
@include media-breakpoint-up(sm) { // >= 576px
|
|
}
|
|
|
|
// MMMMMMMM MMMMMMMMDDDDDDDDDDDDD
|
|
// M:::::::M M:::::::MD::::::::::::DDD
|
|
// M::::::::M M::::::::MD:::::::::::::::DD
|
|
// M:::::::::M M:::::::::MDDD:::::DDDDD:::::D
|
|
// M::::::::::M M::::::::::M D:::::D D:::::D
|
|
// M:::::::::::M M:::::::::::M D:::::D D:::::D
|
|
// M:::::::M::::M M::::M:::::::M D:::::D D:::::D
|
|
// M::::::M M::::M M::::M M::::::M D:::::D D:::::D
|
|
// M::::::M M::::M::::M M::::::M D:::::D D:::::D
|
|
// M::::::M M:::::::M M::::::M D:::::D D:::::D
|
|
// M::::::M M:::::M M::::::M D:::::D D:::::D
|
|
// M::::::M MMMMM M::::::M D:::::D D:::::D
|
|
// M::::::M M::::::MDDD:::::DDDDD:::::D
|
|
// M::::::M M::::::MD:::::::::::::::DD
|
|
// M::::::M M::::::MD::::::::::::DDD
|
|
// MMMMMMMM MMMMMMMMDDDDDDDDDDDDD
|
|
@include media-breakpoint-up(md) { // >= 768px
|
|
.butn-sec { padding: 0.8rem 3rem; }
|
|
}
|
|
|
|
// LLLLLLLLLLL GGGGGGGGGGGGG
|
|
// L:::::::::L GGG::::::::::::G
|
|
// L:::::::::L GG:::::::::::::::G
|
|
// LL:::::::LL G:::::GGGGGGGG::::G
|
|
// L:::::L G:::::G GGGGGG
|
|
// L:::::L G:::::G
|
|
// L:::::L G:::::G
|
|
// L:::::L G:::::G GGGGGGGGGG
|
|
// L:::::L G:::::G G::::::::G
|
|
// L:::::L G:::::G GGGGG::::G
|
|
// L:::::L G:::::G G::::G
|
|
// L:::::L LLLLLL G:::::G G::::G
|
|
// LL:::::::LLLLLLLLL:::::L G:::::GGGGGGGG::::G
|
|
// L::::::::::::::::::::::L GG:::::::::::::::G
|
|
// L::::::::::::::::::::::L GGG::::::GGG:::G
|
|
// LLLLLLLLLLLLLLLLLLLLLLLL GGGGGG GGGG
|
|
@include media-breakpoint-up(lg) { // >= 992px
|
|
}
|
|
|
|
// XXXXXXX XXXXXXXLLLLLLLLLLL
|
|
// X:::::X X:::::XL:::::::::L
|
|
// X:::::X X:::::XL:::::::::L
|
|
// X::::::X X::::::XLL:::::::LL
|
|
// XXX:::::X X:::::XXX L:::::L
|
|
// X:::::X X:::::X L:::::L
|
|
// X:::::X:::::X L:::::L
|
|
// X:::::::::X L:::::L
|
|
// X:::::::::X L:::::L
|
|
// X:::::X:::::X L:::::L
|
|
// X:::::X X:::::X L:::::L
|
|
// XXX:::::X X:::::XXX L:::::L LLLLLL
|
|
// X::::::X X::::::XLL:::::::LLLLLLLLL:::::L
|
|
// X:::::X X:::::XL::::::::::::::::::::::L
|
|
// X:::::X X:::::XL::::::::::::::::::::::L
|
|
// XXXXXXX XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
|
|
@include media-breakpoint-up(xl) { // >= 1200px
|
|
}
|
|
|
|
// XXXXXXX XXXXXXXXXXXXXX XXXXXXXLLLLLLLLLLL
|
|
// X:::::X X:::::XX:::::X X:::::XL:::::::::L
|
|
// X:::::X X:::::XX:::::X X:::::XL:::::::::L
|
|
// X::::::X X::::::XX::::::X X::::::XLL:::::::LL
|
|
// XXX:::::X X:::::XXXXXX:::::X X:::::XXX L:::::L
|
|
// X:::::X X:::::X X:::::X X:::::X L:::::L
|
|
// X:::::X:::::X X:::::X:::::X L:::::L
|
|
// X:::::::::X X:::::::::X L:::::L
|
|
// X:::::::::X X:::::::::X L:::::L
|
|
// X:::::X:::::X X:::::X:::::X L:::::L
|
|
// X:::::X X:::::X X:::::X X:::::X L:::::L
|
|
// XXX:::::X X:::::XXXXXX:::::X X:::::XXX L:::::L LLLLLL
|
|
// X::::::X X::::::XX::::::X X::::::XLL:::::::LLLLLLLLL:::::L
|
|
// X:::::X X:::::XX:::::X X:::::XL::::::::::::::::::::::L
|
|
// X:::::X X:::::XX:::::X X:::::XL::::::::::::::::::::::L
|
|
// XXXXXXX XXXXXXXXXXXXXX XXXXXXXLLLLLLLLLLLLLLLLLLLLLLLL
|
|
@include media-breakpoint-up(xxl) { // >= 1400px
|
|
}
|