pinterest linkedin behance copy

Bouton Fermer

Un bouton de fermeture générique pour ignorer le contenu comme les modaux et les alertes.

Exemple

Fournir une option pour ignorer ou fermer un composant avec .btn-close. Le style par défaut est limité, mais hautement personnalisable. Modifiez les variables Sass pour remplacer la valeur par défaut background-image. Assurez-vous d'inclure du texte pour les lecteurs d'écran , comme nous l'avons fait avec aria-label.

<button type="button" class="btn-close" aria-label="Close"></button>

Etat désactivé

Les boutons de fermeture désactivés changent leur opacity. Nous avons également appliqué pointer-events: none et user-select: none pour empêcher le survol et les états actifs de se déclencher.

<button type="button" class="btn-close" disabled aria-label="Close"></button>

Variante blanche

Modifiez la valeur par défaut .btn-close pour qu'elle soit blanche avec la .btn-close-white classe. Cette classe utilise la filter propriété pour inverser le background-image.

<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button>

Sass

Variables

$btn-close-width:            1em;
$btn-close-height:           $btn-close-width;
$btn-close-padding-x:        .25em;
$btn-close-padding-y:        $btn-close-padding-x;
$btn-close-color:            $black;
$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
$btn-close-focus-shadow:     $input-btn-focus-box-shadow;
$btn-close-opacity:          .5;
$btn-close-hover-opacity:    .75;
$btn-close-focus-opacity:    1;
$btn-close-disabled-opacity: .25;
$btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%);

© 2010-2024 QZYcodes by Quazerty.