baz_april/squelettes/scss/utils/_mixins.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;
	}
}