baz_april/squelettes/scss/utils/_mixins.scss
2022-01-19 15:37:40 +01:00

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;
}
}