mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-30 08:39:56 +02:00
Code Issues Releases Wiki Activity

Rename .close to .btn-close, replace times sign with background SVG, update focus state

Browse Source
This commit is contained in:
Mark Otto
2020-09-01 15:16:50 -07:00
committed by Mark Otto
parent fe77208a01
commit 99777662c6
7 changed files with 55 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
scss/_alert.scss
View File

@@ -27,15 +27,14 @@
// Expand the right padding and account for the close button's positioning.
.alert-dismissible {
padding-right: $close-font-size + $alert-padding-x * 2;
padding-right: $alert-padding-x * 3.5;
// Adjust close link position
.close {
.btn-close {
position: absolute;
top: 0;
right: 0;
padding: $alert-padding-y $alert-padding-x;
color: inherit;
padding: $alert-padding-y * 1.25 $alert-padding-x;
}
}

42
scss/_close.scss
View File

@@ -1,36 +1,36 @@
.close {
@include font-size($close-font-size);
font-weight: $close-font-weight;
line-height: 1;
color: $close-color;
text-shadow: $close-text-shadow;
// transparent background and border properties included for button version.
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
.btn-close {
box-sizing: content-box;
width: $btn-close-width;
height: $btn-close-height;
padding: $btn-close-padding-y $btn-close-padding-x;
color: $btn-close-color;
background: transparent escape-svg($btn-close-bg) no-repeat center center / $btn-close-width auto; // include transparent for button elements
background-clip: content-box;
border: 0; // for button elements
@include border-radius();
opacity: .5;
// Override <a>'s hover style
&:hover {
color: $close-color;
color: $btn-close-color;
text-decoration: none;
opacity: .75;
}
&:hover,
&:focus {
opacity: .75;
outline: none;
box-shadow: $btn-close-focus-shadow;
opacity: 1;
}
&:disabled,
&.disabled {
pointer-events: none;
user-select: none;
}
}
// Additional properties for button version
// iOS requires the button element instead of an anchor tag.
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
// stylelint-disable-next-line selector-no-qualifying-type
button.close {
padding: 0;
background-color: transparent;
border: 0;
}

2
scss/_modal.scss
View File

@@ -118,7 +118,7 @@
border-bottom: $modal-header-border-width solid $modal-header-border-color;
@include border-top-radius($modal-content-inner-border-radius);
.close {
.btn-close {
padding: $modal-header-padding;
// auto on the left force icon to the right even when there is no .modal-title
margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;

12
scss/_variables.scss
View File

@@ -1269,11 +1269,13 @@ $spinner-border-width-sm: .2em !default;
// Close
$close-font-size: $font-size-base * 1.5 !default;
$close-font-weight: $font-weight-bold !default;
$close-color: $black !default;
$close-text-shadow: 0 1px 0 $white !default;
$btn-close-width: 1em !default;
$btn-close-height: $btn-close-width !default;
$btn-close-padding-x: .25em !default;
$btn-close-padding-y: $btn-close-padding-x !default;
$btn-close-color: $black !default;
$btn-close-bg: url("data:image/svg+xml,<svg fill='#{$btn-close-color}' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><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>") !default;
$btn-close-focus-shadow: $input-btn-focus-box-shadow !default;
// Code