Gara qabiyyee ijootti darbi Gara docs navigationitti darbi
Check
in English

Qabduu cufi

Qabduu cufiinsa waliigalaa qabiyyee akka moodaalotaa fi akeekkachiisa kuffisuuf.

Fakkeenya

Qaama tokko waliin hojii irraa ari'uuf ykn cufuuf filannoo kenni .btn-close. Akkaataan durtii daangeffamaadha, garuu baay'ee dhuunfamuu danda'a. Jijjiiramoota Sass durtii bakka buusuuf fooyyessi background-image. Barreeffama dubbistoota iskiriiniif ta'u hammachuu kee mirkaneessi , akkuma aria-label.

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

Haala hanqifame

Qabduu cufi hanqifame jijjiiru isaanii opacity. Akkasumas hover fi active states akka hin kakaafne ittisuuf pointer-events: nonefi hojiirra oolchineerra.user-select: none

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

Garaagarummaa adii

Durtii gita .btn-closewaliin adii ta'uuf jijjiiri . .btn-close-whiteGitni kun filterqabeentaa fayyadamuun garagalchuuf 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 jedhama

Jijjiiramoota

$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%);