55 lines
1.3 KiB
SCSS
55 lines
1.3 KiB
SCSS
/* pour extends */
|
|
|
|
.btn, .btn:visited, button { padding:0.6em 1em 0.5em; margin:0.2rem; display:inline-block;
|
|
background-color:$grayLighter; color:$grayDarker;
|
|
border:0; @include border-radius(0);
|
|
&:hover { color:$white; background-color:$couleurLien; }
|
|
}
|
|
|
|
|
|
.inline { margin:0; padding:0;
|
|
li { display:inline;
|
|
&:after { content:' - '; }
|
|
&:last-child:after { content:''; }
|
|
}
|
|
}
|
|
|
|
|
|
/* .flex { padding:0; display: flex; align-items: flex-start; justify-content:space-between; flex-flow:row wrap; align-items:stretch; } */
|
|
/* la liste flexbox */
|
|
.flex { @include flex;
|
|
flex-grow: 1;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 4em;
|
|
> * { overflow:hidden; }
|
|
&.flex1 > * { flex:1; } // pour tout mettre sur une seule ligne tout le temps
|
|
}
|
|
.spacebetween { -webkit-justify-content: space-between; /* Safari */ justify-content: space-between; }
|
|
.flex2 > * { flex-basis:100%/2; }
|
|
.flex3 > * { flex-basis:100%/3; }
|
|
.flex4 > * { flex-basis:100%/4; }
|
|
.flex5 > * { flex-basis:100%/5; }
|
|
.flex6 > * { flex-basis:100%/6; }
|
|
|
|
@include media($bp-medium) {
|
|
|
|
.flex2 > * { flex-basis:100%/2; }
|
|
.flex4 > * { flex-basis:100%/2; }
|
|
.flex6 > * { flex-basis:100%/2; }
|
|
|
|
}
|
|
@include media($bp-small) {
|
|
|
|
.flex3 > *,
|
|
.flex5 > * { flex-basis:100%; }
|
|
|
|
}
|
|
@include media($bp-xxsmall) {
|
|
|
|
.flex2 > *,
|
|
.flex4 > *,
|
|
.flex6 > * { flex-basis:100%; }
|
|
|
|
}
|