@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) $spacer; &: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); } /// 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; } }