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 border-radius in components to use CSS variables (#2240)

Browse Source
This commit is contained in:
Paweł Kuna
2025-03-26 00:06:08 +01:00
committed by GitHub
parent 042e50f979
commit c20d076b74
8 changed files with 24 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/mighty-clocks-wonder.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Refactor `border-radius` in components to use CSS variables

6
core/scss/ui/_signature.scss
View File

@@ -1,12 +1,14 @@
.signature { .signature {
--#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
--#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color); border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
padding: var(--#{$prefix}spacer-1); padding: var(--#{$prefix}signature-padding);
border-radius: var(--#{$prefix}border-radius); border-radius: var(--#{$prefix}border-radius);
} }
.signature-canvas { .signature-canvas {
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color); border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
border-radius: var(--#{$prefix}border-radius-sm); border-radius: calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding));
display: block; display: block;
cursor: crosshair; cursor: crosshair;
width: 100%; width: 100%;

2
core/scss/ui/forms/_form-colorinput.scss
View File

@@ -21,7 +21,7 @@ Color Input
height: 1.5rem; height: 1.5rem;
color: $white; color: $white;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent; border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent;
border-radius: 3px; border-radius: var(--#{$prefix}border-radius);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
&:before { &:before {

11
core/scss/ui/forms/_form-imagecheck.scss
View File

@@ -2,6 +2,7 @@
Image check Image check
*/ */
.form-imagecheck { .form-imagecheck {
--#{$prefix}form-imagecheck-radius: var(--#{$prefix}border-radius);
position: relative; position: relative;
margin: 0; margin: 0;
cursor: pointer; cursor: pointer;
@@ -19,7 +20,7 @@ Image check
margin: 0; margin: 0;
user-select: none; user-select: none;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
border-radius: 3px; border-radius: var(--#{$prefix}form-imagecheck-radius);
.form-imagecheck-input:focus ~ & { .form-imagecheck-input:focus ~ & {
border-color: var(--#{$prefix}primary); border-color: var(--#{$prefix}primary);
@@ -73,13 +74,13 @@ Image check
@include transition(opacity $transition-time); @include transition(opacity $transition-time);
&:first-child { &:first-child {
border-top-left-radius: 2px; border-top-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
border-top-right-radius: 2px; border-top-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
} }
&:last-child { &:last-child {
border-bottom-right-radius: 2px; border-bottom-right-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
border-bottom-left-radius: 2px; border-bottom-left-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
} }
.form-imagecheck:hover &, .form-imagecheck:hover &,

2
core/scss/ui/forms/_form-selectgroup.scss
View File

@@ -42,7 +42,7 @@ Select group
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color; border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color;
border-radius: 3px; border-radius: var(--#{$prefix}border-radius);
box-shadow: $input-box-shadow; box-shadow: $input-box-shadow;
@include transition(border-color $transition-time, background $transition-time, color $transition-time); @include transition(border-color $transition-time, background $transition-time, color $transition-time);

2
core/scss/utils/_colors.scss
View File

@@ -96,5 +96,5 @@
} }
.bg-surface-backdrop { .bg-surface-backdrop {
background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !important; background-color: color-transparent($modal-backdrop-bg, $modal-backdrop-opacity) !important;
} }

5
core/scss/vendor/_coloris.scss vendored
View File

@@ -1,6 +1,11 @@
.clr-picker { .clr-picker {
box-shadow: var(--#{$prefix}shadow-dropdown); box-shadow: var(--#{$prefix}shadow-dropdown);
background-color: var(--#{$prefix}bg-surface); background-color: var(--#{$prefix}bg-surface);
border-radius: var(--#{$prefix}border-radius);
}
.clr-gradient {
border-radius: var(--#{$prefix}border-radius) var(--#{$prefix}border-radius) 0 0;
} }
input.clr-color { input.clr-color {

1
core/scss/vendor/_litepicker.scss vendored
View File

@@ -62,6 +62,7 @@
.container__months { .container__months {
box-shadow: none; box-shadow: none;
background-color: var(--#{$prefix}bg-forms); background-color: var(--#{$prefix}bg-forms);
border-radius: calc(var(--#{$prefix}border-radius) - 1px);
} }
} }
} }