Knop slute

In generyske slute knop foar it ôfwizen fan ynhâld lykas modalen en warskôgings.

Op dizze side

Foarbyld

Biede in opsje om in komponint te ferwiderjen of te sluten mei .btn-close. Standert styling is beheind, mar tige oanpasber. Feroarje de Sass-fariabelen om de standert te ferfangen background-image. Wês wis dat jo tekst opnimme foar skermlêzers , lykas wy hawwe dien mei aria-label.

html

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

Utskeakele steat

Utskeakele slute knoppen feroarje harren opacity. Wy hawwe ek tapast pointer-events: noneen user-select: noneom te foarkommen dat hover en aktive steaten trigger.

html

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

Wite fariant

Feroarje de standert .btn-closeom wyt te wêzen mei de .btn-close-whiteklasse. Dizze klasse brûkt it filterpân om de background-image.

html

<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

Fariabelen

$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 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-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%);