Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

Refactor SCSS for alerts and close button styles (#2239)

Browse Source
This commit is contained in:
Paweł Kuna
2025-03-26 00:06:21 +01:00
committed by GitHub
parent c20d076b74
commit ddcd3a79e1
7 changed files with 89 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/scss/_bootstrap-components.scss
View File

@@ -14,12 +14,10 @@
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
// @import "bootstrap/scss/accordion";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/toasts";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";

2
core/scss/_variables.scss
View File

@@ -216,7 +216,7 @@ $secondary: $text-secondary !default;
$muted: $text-secondary !default;
$success: $green !default;
$info: $azure !default;
$warning: $orange !default;
$warning: $yellow !default;
$danger: $red !default;
$link-color: $primary !default;

23
core/scss/ui/_alerts.scss
View File

@@ -1,10 +1,10 @@
.alert {
--#{$prefix}alert-bg: transparent;
--#{$prefix}alert-color: var(--#{$prefix}body-color);
--#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), .1)};
--#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$prefix}alert-color: inherit;
--#{$prefix}alert-border-color: var(--#{$prefix}border-color);
--#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), .2)};
--#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
--#{$prefix}alert-link-color: inherit;
@@ -66,8 +66,8 @@
.btn-close {
position: absolute;
top: 0;
right: 0;
top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
right: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
z-index: 1;
padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
}
@@ -75,12 +75,21 @@
.alert-important {
border-color: var(--#{$prefix}alert-color);
color: var(--#{$prefix}alert-color);
background-color: var(--#{$prefix}alert-color);
color: var(--#{$prefix}white);
.btn-close,
.alert-description {
color: inherit;
}
.alert-icon {
color: inherit;
}
}
.alert-minor {
background: transparent;
border-color: var(--tblr-border-color);
}
@each $name, $color in $theme-colors {

57
core/scss/ui/_close.scss
View File

@@ -1,7 +1,60 @@
.btn-close {
--#{$prefix}btn-close-color: currentColor;
--#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
--#{$prefix}btn-close-opacity: #{$btn-close-opacity};
--#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
--#{$prefix}btn-close-size: #{$btn-close-width};
width: var(--#{$prefix}btn-close-size);
height: var(--#{$prefix}btn-close-size);
padding: $btn-close-padding-y $btn-close-padding-x;
color: var(--#{$prefix}btn-close-color);
mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * .75);
background-color: var(--#{$prefix}btn-close-color);
border: 0;
border-radius: var(--tblr-border-radius);
opacity: var(--#{$prefix}btn-close-opacity);
cursor: pointer;
display: block;
&:hover {
color: var(--#{$prefix}btn-close-color);
text-decoration: none;
opacity: var(--#{$prefix}btn-close-hover-opacity);
}
&:focus {
outline: none;
outline: 0;
box-shadow: var(--#{$prefix}btn-close-focus-shadow);
opacity: var(--#{$prefix}btn-close-focus-opacity);
}
}
&:disabled,
&.disabled {
pointer-events: none;
user-select: none;
opacity: var(--#{$prefix}btn-close-disabled-opacity);
}
}
// @mixin btn-close-white() {
// --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
// }
// .btn-close-white {
// @include btn-close-white();
// }
// :root,
// [data-bs-theme="light"] {
// --#{$prefix}btn-close-filter: #{$btn-close-filter};
// }
// @if $enable-dark-mode {
// @include color-mode(dark, true) {
// @include btn-close-white();
// }
// }