335 lines
8.0 KiB
SCSS
335 lines
8.0 KiB
SCSS
@mixin flex-center($horizontal: true, $vertical: true) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
-webkit-flex-direction: column;
|
|
@if ($vertical==true) {
|
|
justify-content: center;
|
|
}
|
|
@if ($horizontal==true) {
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
@mixin flex() {
|
|
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
|
|
display: -ms-flexbox; /* TWEENER - IE 10 */
|
|
display: -webkit-flex; /* NEW - Chrome */
|
|
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
|
|
}
|
|
|
|
|
|
@mixin page-container() {
|
|
width: 100%;
|
|
padding-left: 1em;
|
|
padding-right: 1em;
|
|
@include media($bp-largeplus-up) {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: em($screen-largeplus);
|
|
}
|
|
}
|
|
|
|
@mixin full_width() {
|
|
//width: 100vw;
|
|
//position: relative;
|
|
//left: 50%;
|
|
//right: 50%;
|
|
//margin-left: -50vw;
|
|
//margin-right: -50vw;
|
|
|
|
width: 100%; /* fallback for browsers that don't understand vw or calc */
|
|
width: calc(100vw - 14px); /* -15 because vw is calculated without the scrollbar being considered & 15px is width of scrollbars */
|
|
position: relative; /* use this if the parent div isn't flush left */
|
|
right: calc((100vw - 14px - 100%) / 2);
|
|
}
|
|
|
|
// des liens dans la couleur du texte courant mais avec couleur au survol
|
|
@mixin link-color-text() {
|
|
a {
|
|
color: $couleur-texte;
|
|
&:hover, &:focus {
|
|
color: $couleur-lien-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Hide only visually, but have it available for screen readers:
|
|
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
|
*
|
|
* 1. For long content, line feeds are not interpreted as spaces and small width
|
|
* causes content to wrap 1 word per line:
|
|
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
|
|
*/
|
|
|
|
@mixin visuallyhidden() {
|
|
border: 0;
|
|
clip: rect(0 0 0 0);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
white-space: nowrap; /* 1 */
|
|
/*
|
|
* Extends the .visuallyhidden class to allow the element
|
|
* to be focusable when navigated to via the keyboard:
|
|
* https://www.drupal.org/node/897638
|
|
*/
|
|
& .focusable:active,
|
|
& .focusable:focus {
|
|
clip: auto;
|
|
clip-path: none;
|
|
height: auto;
|
|
margin: 0;
|
|
overflow: visible;
|
|
position: static;
|
|
width: auto;
|
|
white-space: inherit;
|
|
}
|
|
}
|
|
|
|
@mixin clearfix() {
|
|
&:after, &:before {
|
|
display:block;
|
|
content:'';
|
|
clear:both;
|
|
}
|
|
}
|
|
|
|
|
|
@mixin bouton($sombre:$couleurPrincipale, $clair:#fff, $survol:$couleurSecondaire) {
|
|
|
|
display: inline-block;
|
|
line-height: 1.2;
|
|
border: none;
|
|
box-shadow: none;
|
|
text-align: center;
|
|
transition: background 0.3s;
|
|
cursor: pointer;
|
|
font-family:$typo-texte;
|
|
border-radius:($spacer/4);
|
|
background:$sombre;
|
|
color:$clair !important;
|
|
font-weight:700;
|
|
padding: ($spacer/2.5) ($spacer/1.5);
|
|
|
|
&:hover {
|
|
background-color: $survol;
|
|
text-decoration: none;
|
|
color: $clair !important;
|
|
}
|
|
&:focus {
|
|
background-color: lighten($survol,10%);
|
|
text-decoration: none;
|
|
color: $clair !important;
|
|
}
|
|
&[disabled=disabled] {
|
|
background: desaturate($clair, 45%);
|
|
color: darken($sombre, 10%) !important;
|
|
}
|
|
.fas {
|
|
padding-left:em(12px);
|
|
float:right;
|
|
&:before {
|
|
font-size:em(22px);
|
|
line-height:1;
|
|
font-weight:700;
|
|
color:$clair;
|
|
}
|
|
}
|
|
&:hover .fas:before, &:focus .fas:before {
|
|
color: $clair;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@mixin list-reset() {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
& > * {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@mixin list-inline() {
|
|
// supprimer les espaces blancs qui apparaissent si on utilise display: inline-block
|
|
& > * {
|
|
float: left;
|
|
& > a {
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin list-separator($text: '|', $margin: 0.5em, $color:false) {
|
|
@include list-reset;
|
|
@include list-inline;
|
|
& > *:not(:last-child):after {
|
|
content: $text;
|
|
margin: 0 $margin;
|
|
@if $color {
|
|
color: $color;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin text-block() {
|
|
margin-top: 0;
|
|
margin-bottom: 1em;
|
|
@include zero-bottom-margin;
|
|
}
|
|
|
|
@mixin module-block() {
|
|
margin-bottom: 1.5em;
|
|
@include zero-bottom-margin;
|
|
}
|
|
|
|
@mixin vendor-prefix($name, $value) {
|
|
@each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
|
|
#{$vendor}#{$name}: #{$value};
|
|
}
|
|
}
|
|
|
|
// supprime le margin-bottom du dernier élément
|
|
@mixin zero-bottom-margin() {
|
|
& > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@mixin media($query) {
|
|
@media screen and ($query) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@function breakpoint($query, $dimension) {
|
|
@return $query+": "+$dimension;
|
|
}
|
|
|
|
@function em($px, $base: $body-font-size) {
|
|
@if (unitless($px)) {
|
|
$px: $px * 1px;
|
|
}
|
|
@return ($px / $base) * 1em;
|
|
}
|
|
|
|
@function pourcent($value, $total) {
|
|
@if ($value==0) {
|
|
@return 0;
|
|
}
|
|
@return ($value/$total * 100)*1%;
|
|
}
|
|
|
|
@function strip-unit($number) {
|
|
@if type-of($number) == 'number' and not unitless($number) {
|
|
@return $number / ($number * 0 + 1);
|
|
}
|
|
|
|
@return $number;
|
|
}
|
|
|
|
|
|
@mixin rotate ($deg) {
|
|
-webkit-transform: rotate($deg);
|
|
-moz-transform: rotate($deg);
|
|
-ms-transform: rotate($deg);
|
|
-o-transform: rotate($deg);
|
|
}
|
|
|
|
@mixin gradient-4 ($couleur1: #004050,$couleur2: $couleurConnex 7.5%,$couleur3: $couleurConnex 92.5%,$couleur4: #004050) {
|
|
background: -webkit-linear-gradient($couleur1,$couleur2,$couleur3,$couleur4);
|
|
background: -moz-linear-gradient($couleur1,$couleur2,$couleur3,$couleur4);
|
|
background: -ms-linear-gradient($couleur1,$couleur2,$couleur3,$couleur4);
|
|
background: -o-linear-gradient($couleur1,$couleur2,$couleur3,$couleur4);
|
|
}
|
|
|
|
// Triangle helper mixin
|
|
// @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
|
|
// @param {Color} $color [currentcolor] - Triangle color
|
|
// @param {Length} $size [1em] - Triangle size
|
|
// Example :
|
|
// .foo {
|
|
// position: relative;
|
|
// &:before {
|
|
// @include triangle(bottom, red, 0.25em);
|
|
// position: absolute;
|
|
// left: 100%;
|
|
// top: 50%;
|
|
// }
|
|
// }
|
|
@mixin triangle($direction, $color: currentcolor, $size: 1em, $coefficient: 1.5) {
|
|
@if not index(top right bottom left, $direction) {
|
|
@error "Direction must be either `top`, `right`, `bottom` or `left`.";
|
|
}
|
|
|
|
display:block;
|
|
width: 0;
|
|
height: 0;
|
|
content: '';
|
|
z-index: 2;
|
|
@if $direction == top {
|
|
border-bottom: ($size * $coefficient) solid $color;
|
|
}
|
|
@if $direction == bottom {
|
|
border-top: ($size * $coefficient) solid $color;
|
|
}
|
|
@if $direction == right {
|
|
border-left: ($size * $coefficient) solid $color;
|
|
}
|
|
@if $direction == left {
|
|
border-right: ($size * $coefficient) solid $color;
|
|
}
|
|
|
|
|
|
$perpendicular-borders: $size solid transparent;
|
|
|
|
@if $direction == top or $direction == bottom {
|
|
border-left: $perpendicular-borders;
|
|
border-right: $perpendicular-borders;
|
|
} @else if $direction == right or $direction == left {
|
|
border-bottom: $perpendicular-borders;
|
|
border-top: $perpendicular-borders;
|
|
}
|
|
}
|
|
|
|
// liste ul avec puce en triangle
|
|
@mixin liste-triangle($demihauteur: 0.3em, $coefficient: 1.8) {
|
|
list-style:none;
|
|
> li {
|
|
padding-left:1em;
|
|
position:relative;
|
|
&:before {
|
|
position:absolute;
|
|
left:0;
|
|
top:0.6em;
|
|
@include triangle(right, $couleurSecondaire, $demihauteur, $coefficient);
|
|
}
|
|
}
|
|
}
|
|
|
|
/// Font Face
|
|
/// https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6#file-_mixins-scss
|
|
/// simplification pour uniquement woff2 et woff
|
|
@mixin font-face($name, $path, $weight: null, $style: null, $exts: woff2 woff) {
|
|
$src: null;
|
|
@each $ext in $exts {
|
|
$src: append($src, url(quote("../webfonts/" + $path + "." + $ext)) format(quote($ext)), comma);
|
|
}
|
|
@font-face {
|
|
font-family: quote($name);
|
|
font-style: $style;
|
|
font-weight: $weight;
|
|
src: $src;
|
|
}
|
|
}
|