in English
बटन बंद करो
मोडल ते अलर्ट जनेह् सामग्री गी खारिज करने आस्तै इक जेनेरिक बंद बटन।
इस पेज पर
मसाल
कन्नै इक घटक गी खारिज करने जां बंद करने दा विकल्प उपलब्ध करोआओ .btn-close
. डिफ़ॉल्ट स्टाइलिंग सीमित ऐ, पर बेह् तर अनुकूलन योग्य ऐ। डिफाल्ट गी बदलने लेई Sass चर गी संशोधित करो background-image
. स्क्रीन रीडरें लेई पाठ जरूर शामल करो , जि'यां असें aria-label
.
<button type="button" class="btn-close" aria-label="Close"></button>
अक्षम राज्य
अक्षम बंद बटन अपने opacity
. अस बी लागू कीता ऐ pointer-events: none
ते user-select: none
होवर ते सक्रिय राज्यें गी ट्रिगर होने थमां रोकने लेई।
<button type="button" class="btn-close" disabled aria-label="Close"></button>
सफेद वेरिएंट
क्लास .btn-close
कन्नै डिफाल्ट गी सफेद करने आस्तै बदलो . .btn-close-white
एह् वर्ग filter
उल्टा करने आस्तै गुण दा उपयोग करदा ऐ 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>
सस्स
चर करने वाले
$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%);