in English
Kawngkhar khar rawh
Modal leh alerts ang chi content paih chhuahna tur generic close button.
He page ah hian
Entirna
Component pakhat dismiss emaw close emaw theihna option pe rawh .btn-close
. Default styling a tlem a, mahse customizable sang tak a ni. Sass variable te chu default thlak turin siam danglam rawh background-image
. Screen reader tan text pawh dah tel ngei ang che , kan tih tawh ang khan aria-label
.
<button type="button" class="btn-close" aria-label="Close"></button>
Disabled state a ni
Disabled close button te chuan an opacity
. Kan apply bawk a pointer-events: none
, user-select: none
hover leh active state te trigger loh nan.
<button type="button" class="btn-close" disabled aria-label="Close"></button>
White variant a ni
Default chu class .btn-close
nen white turin thlak rawh. .btn-close-white
He class hian filter
property hmangin 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 a ni
Variables te pawh a awm
$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%);