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($couleur:$couleurPrincipale, $texte:#FFF, $couleurBgSurvol:$couleurSecondaire) {

	display:          inline-block;
/* 	height:           $spacer*2; */
	line-height:      1.2;
	padding:           ($spacer/2) $spacer;
	background-color: $couleur;
	border:           none;
	border-radius:   ($spacer/4);
	box-shadow:       none;
	text-align:       center;
/* 	white-space:      nowrap; */
	color:            $texte;
	transition:       background 0.3s;
	cursor:           pointer;
	&:hover {
		background-color: $couleurBgSurvol;
		text-decoration:  none;
		color:            $texte;
	}
	&:focus {
		background-color: lighten($couleurBgSurvol,10%);
		text-decoration:  none;
		color:            $texte;
		}
	&[disabled=disabled] {
		background: desaturate($couleur, 45%);
		color:      darken($texte, 10%);
	}
	.fas {
		padding-left:em(6px);
		&:before {
			font-size:em(20px);
			line-height:$spacer;
			font-weight:700;
			color:      $texte;
		}
	}
	&:hover .fas:before {
		color:      $texte;
	}
	&:focus .fas:before {
		color:      $texte;
	}
}


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


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