Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 21:27:06 +04:00
Code Issues Projects Releases Wiki Activity

Implement border-radius mixin across various SCSS files (#2612)

Browse Source
This commit is contained in:
Paweł Kuna authored and GitHub committed 2026-02-15 22:56:49 +01:00
1 parent 666ccd659a
commit 943283568a
50 files changed
+141 -116
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.changeset/grumpy-foxes-shake.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Implement `border-radius` mixin across various SCSS files
core/package.json
+5 -5
View File
@@ -82,19 +82,19 @@
"files": [ "files": [
{ {
"path": "./dist/css/tabler.css", "path": "./dist/css/tabler.css",
"maxSize": "76 kB" "maxSize": "77 kB"
}, },
{ {
"path": "./dist/css/tabler.min.css", "path": "./dist/css/tabler.min.css",
"maxSize": "71 kB" "maxSize": "72 kB"
}, },
{ {
"path": "./dist/css/tabler.rtl.css", "path": "./dist/css/tabler.rtl.css",
"maxSize": "76 kB" "maxSize": "77 kB"
}, },
{ {
"path": "./dist/css/tabler.rtl.min.css", "path": "./dist/css/tabler.rtl.min.css",
"maxSize": "71 kB" "maxSize": "73 kB"
}, },
{ {
"path": "./dist/css/tabler-flags.css", "path": "./dist/css/tabler-flags.css",
@@ -106,7 +106,7 @@
}, },
{ {
"path": "./dist/css/tabler-payments.css", "path": "./dist/css/tabler-payments.css",
"maxSize": "2.2 kB" "maxSize": "2.3 kB"
}, },
{ {
"path": "./dist/css/tabler-payments.min.css", "path": "./dist/css/tabler-payments.min.css",
core/scss/_bootstrap-override.scss
+17
View File
@@ -59,3 +59,20 @@
@function opaque($background, $foreground) { @function opaque($background, $foreground) {
@return color.mix(rgba($foreground, 1), $background, color.alpha($foreground) * 100%); @return color.mix(rgba($foreground, 1), $background, color.alpha($foreground) * 100%);
} }
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
@if $enable-rounded {
border-radius: valid-radius($radius);
@if $radius != 0 {
@supports (corner-shape: squircle) {
corner-shape: squircle;
border-radius: calc(#{$radius} * 2.5) !important;
}
}
}
@else if $fallback-border-radius !=false {
border-radius: $fallback-border-radius;
}
}
core/scss/layout/_core.scss
+1 -1
View File
@@ -60,7 +60,7 @@ body {
.page { .page {
margin: 0 auto; margin: 0 auto;
max-width: var(--#{$prefix}theme-boxed-width); max-width: var(--#{$prefix}theme-boxed-width);
border-radius: var(--#{$prefix}theme-boxed-border-radius); @include border-radius(var(--#{$prefix}theme-boxed-border-radius));
color: var(--#{$prefix}body-color); color: var(--#{$prefix}body-color);
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
core/scss/layout/_navbar.scss
+2 -2
View File
@@ -113,7 +113,7 @@ Navbar
min-width: 2.5rem; min-width: 2.5rem;
min-height: 2.5rem; min-height: 2.5rem;
justify-content: center; justify-content: center;
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
.badge { .badge {
position: absolute; position: absolute;
@@ -222,7 +222,7 @@ Navbar toggler
height: 2px; height: 2px;
width: 1.25em; width: 1.25em;
background: currentColor; background: currentColor;
border-radius: 10px; @include border-radius(var(--#{$prefix}border-radius-pill));
position: relative; position: relative;
@include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time); @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
core/scss/marketing/_browser.scss
+4 -4
View File
@@ -2,7 +2,7 @@
// Browser // Browser
// //
.browser { .browser {
border-radius: var(--#{$prefix}border-radius-lg); @include border-radius(var(--#{$prefix}border-radius-lg));
box-shadow: 0 0 0 1px var(--#{$prefix}border-color); box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
background: var(--#{$prefix}bg-surface-secondary); background: var(--#{$prefix}bg-surface-secondary);
overflow: hidden; overflow: hidden;
@@ -12,7 +12,7 @@
padding: 0.25rem 1rem; padding: 0.25rem 1rem;
background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03)); background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
border-bottom: 1px solid var(--#{$prefix}border-color); border-bottom: 1px solid var(--#{$prefix}border-color);
border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0; @include border-radius(calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0);
} }
.browser-dots { .browser-dots {
@@ -42,7 +42,7 @@
min-width: 0.75rem; min-width: 0.75rem;
height: 0.75rem; height: 0.75rem;
background: var(--#{$prefix}border-color); background: var(--#{$prefix}border-color);
border-radius: 50%; @include border-radius(var(--#{$prefix}border-radius-circle));
border: 1px solid var(--#{$prefix}border-color-dark); border: 1px solid var(--#{$prefix}border-color-dark);
} }
@@ -55,7 +55,7 @@
padding: 0.25rem; padding: 0.25rem;
color: var(--#{$prefix}secondary); color: var(--#{$prefix}secondary);
font-size: var(--#{$prefix}font-size-h5); font-size: var(--#{$prefix}font-size-h5);
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
box-shadow: box-shadow:
core/scss/marketing/_hero.scss
+1 -1
View File
@@ -44,7 +44,7 @@
.hero-img { .hero-img {
margin: 4rem auto; margin: 4rem auto;
max-width: 65rem; max-width: 65rem;
border-radius: $border-radius-lg; @include border-radius($border-radius-lg);
position: relative; position: relative;
z-index: 1; z-index: 1;
//box-shadow: 0 10px 15px -3px rgba($color-text, 0.1), //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
core/scss/marketing/_pricing.scss
+4 -4
View File
@@ -22,18 +22,18 @@ $pricing-card-width: 22rem;
position: relative; position: relative;
box-shadow: $box-shadow-card; box-shadow: $box-shadow-card;
text-align: center; text-align: center;
border-radius: $border-radius-lg; @include border-radius($border-radius-lg);
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
margin: 1rem -1px; margin: 1rem -1px;
max-width: $pricing-card-width; max-width: $pricing-card-width;
&:first-child { &:first-child {
border-radius: $border-radius-lg 0 0 $border-radius-lg; @include border-radius($border-radius-lg 0 0 $border-radius-lg);
} }
&:last-child { &:last-child {
border-radius: 0 $border-radius-lg $border-radius-lg 0; @include border-radius(0 $border-radius-lg $border-radius-lg 0);
} }
} }
@@ -47,7 +47,7 @@ $pricing-card-width: 22rem;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
box-shadow: $box-shadow-card; box-shadow: $box-shadow-card;
border-radius: $border-radius-lg; @include border-radius($border-radius-lg);
} }
} }
} }
core/scss/marketing/_shape.scss
+2 -1
View File
@@ -3,9 +3,10 @@
.shape { .shape {
--#{$prefix}shape-size: #{$avatar-size}; --#{$prefix}shape-size: #{$avatar-size};
--#{$prefix}shape-icon-size: #{$avatar-icon-size}; --#{$prefix}shape-icon-size: #{$avatar-icon-size};
--#{$prefix}shape-border-radius: 35%;
background-color: var(--#{$prefix}primary-lt); background-color: var(--#{$prefix}primary-lt);
color: var(--#{$prefix}primary); color: var(--#{$prefix}primary);
border-radius: 35%; @include border-radius(var(--#{$prefix}shape-border-radius));
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
core/scss/mixins/_mixins.scss
+1 -1
View File
@@ -25,7 +25,7 @@
} }
#{if(&, "&", "*")}::-webkit-scrollbar-thumb { #{if(&, "&", "*")}::-webkit-scrollbar-thumb {
border-radius: 1rem; @include border-radius(1rem);
border: 5px solid transparent; border: 5px solid transparent;
box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.2); box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.2);
} }
core/scss/ui/_accordion.scss
+1 -1
View File
@@ -165,7 +165,7 @@
> .accordion-item { > .accordion-item {
border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color); border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
border-radius: var(--#{$prefix}accordion-border-radius); @include border-radius(var(--#{$prefix}accordion-border-radius));
} }
} }
core/scss/ui/_alerts.scss
+1 -1
View File
@@ -16,7 +16,7 @@
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x); padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
margin-bottom: var(--#{$prefix}alert-margin-bottom); margin-bottom: var(--#{$prefix}alert-margin-bottom);
background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface)); background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
border-radius: var(--#{$prefix}alert-border-radius); @include border-radius(var(--#{$prefix}alert-border-radius));
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color); border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
box-shadow: var(--#{$prefix}box-shadow); box-shadow: var(--#{$prefix}box-shadow);
color: var(--#{$prefix}alert-color); color: var(--#{$prefix}alert-color);
core/scss/ui/_avatars.scss
+6 -6
View File
@@ -25,7 +25,7 @@
vertical-align: bottom; vertical-align: bottom;
user-select: none; user-select: none;
background: var(--#{$prefix}avatar-bg) no-repeat center/cover; background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
border-radius: var(--#{$prefix}avatar-border-radius); @include border-radius(var(--#{$prefix}avatar-border-radius));
box-shadow: var(--#{$prefix}avatar-box-shadow); box-shadow: var(--#{$prefix}avatar-box-shadow);
transition: transition:
color $transition-time, color $transition-time,
@@ -41,7 +41,7 @@
position: absolute; position: absolute;
inset-inline-end: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg; box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
} }
@@ -56,11 +56,11 @@
} }
.avatar-rounded { .avatar-rounded {
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
} }
.avatar-square { .avatar-square {
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
} }
@each $avatar-size, $size in $avatar-sizes { @each $avatar-size, $size in $avatar-sizes {
@@ -77,7 +77,7 @@
} }
&.avatar-square { &.avatar-square {
--#{$prefix}avatar-border-radius: #{map.get($size, border-radius)}; @include border-radius(map.get($size, border-radius));
} }
} }
} }
@@ -159,6 +159,6 @@
bottom: -2px; bottom: -2px;
z-index: 1000; z-index: 1000;
background: var(--#{$prefix}bg-surface); background: var(--#{$prefix}bg-surface);
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
border: 1px solid var(--#{$prefix}border-color); border: 1px solid var(--#{$prefix}border-color);
} }
core/scss/ui/_badges.scss
+3 -3
View File
@@ -21,7 +21,7 @@
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent; border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
border-radius: var(--#{$prefix}badge-border-radius); @include border-radius(var(--#{$prefix}badge-border-radius));
min-width: calc(1em + var(--#{$prefix}badge-padding-y) * 2 + 2px); min-width: calc(1em + var(--#{$prefix}badge-padding-y) * 2 + 2px);
letter-spacing: 0.04em; letter-spacing: 0.04em;
vertical-align: bottom; vertical-align: bottom;
@@ -47,7 +47,7 @@
min-width: 0; min-width: 0;
min-height: auto; min-height: auto;
padding: 0; padding: 0;
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
vertical-align: baseline; vertical-align: baseline;
} }
@@ -63,7 +63,7 @@
// Pill badge // Pill badge
// //
.badge-pill { .badge-pill {
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
} }
// //
core/scss/ui/_buttons.scss
+5 -3
View File
@@ -25,6 +25,8 @@
min-width: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2)); min-width: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
min-height: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2)); min-height: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
@include border-radius(var(--#{$prefix}btn-border-radius));
.icon { .icon {
width: var(--#{$prefix}btn-icon-size); width: var(--#{$prefix}btn-icon-size);
height: var(--#{$prefix}btn-icon-size); height: var(--#{$prefix}btn-icon-size);
@@ -173,7 +175,7 @@
.btn-pill { .btn-pill {
padding-inline-end: 1.5em; padding-inline-end: 1.5em;
padding-inline-start: 1.5em; padding-inline-start: 1.5em;
border-radius: 10rem; @include border-radius(var(--#{$prefix}border-radius-pill));
&[class*='btn-icon'] { &[class*='btn-icon'] {
padding: 0.375rem 15px; padding: 0.375rem 15px;
@@ -245,7 +247,7 @@
vertical-align: text-bottom; vertical-align: text-bottom;
border: $spinner-border-width var(--#{$prefix}border-style) currentColor; border: $spinner-border-width var(--#{$prefix}border-style) currentColor;
border-inline-end-color: transparent; border-inline-end-color: transparent;
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
color: var(--#{$prefix}btn-color); color: var(--#{$prefix}btn-color);
position: absolute; position: absolute;
width: var(--#{$prefix}btn-icon-size); width: var(--#{$prefix}btn-icon-size);
@@ -262,7 +264,7 @@
.btn-action { .btn-action {
--#{$prefix}border-color: transparent; --#{$prefix}border-color: transparent;
color: var(--#{$prefix}secondary); color: var(--#{$prefix}secondary);
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
background: transparent; background: transparent;
box-shadow: none; box-shadow: none;
core/scss/ui/_calendars.scss
+2 -2
View File
@@ -2,7 +2,7 @@
display: block; display: block;
font-size: $font-size-sm; font-size: $font-size-sm;
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: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
} }
.calendar-nav { .calendar-nav {
@@ -53,7 +53,7 @@
cursor: pointer; cursor: pointer;
background: 0 0; background: 0 0;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent; border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
outline: 0; outline: 0;
@include transition(background $transition-time, border $transition-time, box-shadow 0.32s, color $transition-time); @include transition(background $transition-time, border $transition-time, box-shadow 0.32s, color $transition-time);
core/scss/ui/_cards.scss
+12 -12
View File
@@ -84,7 +84,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
width: calc(var(--#{$prefix}stamp-size) * 1); width: calc(var(--#{$prefix}stamp-size) * 1);
height: calc(var(--#{$prefix}stamp-size) * 1); height: calc(var(--#{$prefix}stamp-size) * 1);
position: relative; position: relative;
@@ -173,7 +173,7 @@ Stacked card
content: ''; content: '';
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)); background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}card-border-color); border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}card-border-color);
border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0; @include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
} }
} }
@@ -194,7 +194,7 @@ Stacked card
&:first-child, &:first-child,
&:first-child:before { &:first-child:before {
border-radius: $border-radius $border-radius 0 0; @include border-radius($border-radius $border-radius 0 0);
} }
} }
@@ -221,7 +221,7 @@ Stacked card
background: transparent; background: transparent;
&:first-child { &:first-child {
border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0; @include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
} }
} }
@@ -235,7 +235,7 @@ Stacked card
flex: 1; flex: 1;
margin: calc(var(--#{$prefix}card-cap-padding-y) * -1) calc(var(--#{$prefix}card-cap-padding-x) * -1) calc(var(--#{$prefix}card-cap-padding-y) * -1); margin: calc(var(--#{$prefix}card-cap-padding-y) * -1) calc(var(--#{$prefix}card-cap-padding-x) * -1) calc(var(--#{$prefix}card-cap-padding-y) * -1);
padding: calc(var(--#{$prefix}card-cap-padding-y) * 0.5) calc(var(--#{$prefix}card-cap-padding-x) * 0.5) 0; padding: calc(var(--#{$prefix}card-cap-padding-y) * 0.5) calc(var(--#{$prefix}card-cap-padding-x) * 0.5) 0;
border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0; @include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
} }
.card-header-pills { .card-header-pills {
@@ -281,7 +281,7 @@ Stacked card
margin-top: auto; margin-top: auto;
&:last-child { &:last-child {
border-radius: 0 0 var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius); @include border-radius(0 0 var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius));
} }
} }
@@ -300,11 +300,11 @@ Stacked card
height: 0.25rem; height: 0.25rem;
&:last-child { &:last-child {
border-radius: 0 0 2px 2px; @include border-radius(0 0 2px 2px);
} }
&:first-child { &:first-child {
border-radius: 2px 2px 0 0; @include border-radius(2px 2px 0 0);
} }
} }
@@ -410,7 +410,7 @@ Card status
inset-inline-end: 0; inset-inline-end: 0;
inset-inline-start: 0; inset-inline-start: 0;
height: $card-status-size; height: $card-status-size;
border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0; @include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
} }
.card-status-start { .card-status-start {
@@ -419,7 +419,7 @@ Card status
bottom: 0; bottom: 0;
width: $card-status-size; width: $card-status-size;
height: 100%; height: 100%;
border-radius: var(--#{$prefix}card-border-radius) 0 0 var(--#{$prefix}card-border-radius); @include border-radius(var(--#{$prefix}card-border-radius) 0 0 var(--#{$prefix}card-border-radius));
} }
.card-status-bottom { .card-status-bottom {
@@ -428,7 +428,7 @@ Card status
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: $card-status-size; height: $card-status-size;
border-radius: 0 0 var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius); @include border-radius(0 0 var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius));
} }
/** /**
@@ -633,7 +633,7 @@ Card list group
.nav-link { .nav-link {
border-bottom: $card-border-width var(--#{$prefix}border-style) $card-border-color; border-bottom: $card-border-width var(--#{$prefix}border-style) $card-border-color;
border-radius: 0 0 $card-border-radius $card-border-radius; @include border-radius(0 0 $card-border-radius $card-border-radius);
} }
&:not(:first-child) .nav-link { &:not(:first-child) .nav-link {
core/scss/ui/_carousel.scss
+2 -2
View File
@@ -21,7 +21,7 @@
[data-bs-target] { [data-bs-target] {
width: $carousel-indicator-dot-width; width: $carousel-indicator-dot-width;
height: $carousel-indicator-dot-width; height: $carousel-indicator-dot-width;
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
border: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent; border: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
margin: 0; margin: 0;
} }
@@ -33,7 +33,7 @@
height: auto; height: auto;
background: no-repeat center/cover; background: no-repeat center/cover;
border: 0; border: 0;
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
box-shadow: $box-shadow; box-shadow: $box-shadow;
margin: 0 $carousel-indicator-spacer; margin: 0 $carousel-indicator-spacer;
opacity: $carousel-indicator-thumb-opacity; opacity: $carousel-indicator-thumb-opacity;
core/scss/ui/_chat.scss
+1 -1
View File
@@ -9,7 +9,7 @@
.chat-bubble { .chat-bubble {
background: var(--#{$prefix}bg-surface-secondary); background: var(--#{$prefix}bg-surface-secondary);
border-radius: var(--#{$prefix}border-radius-lg); @include border-radius(var(--#{$prefix}border-radius-lg));
padding: 1rem; padding: 1rem;
position: relative; position: relative;
} }
core/scss/ui/_close.scss
+1 -1
View File
@@ -15,7 +15,7 @@
mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * 0.75); mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * 0.75);
background-color: var(--#{$prefix}btn-close-color); background-color: var(--#{$prefix}btn-close-color);
border: 0; border: 0;
border-radius: var(--tblr-border-radius); @include border-radius(var(--tblr-border-radius));
opacity: var(--#{$prefix}btn-close-opacity); opacity: var(--#{$prefix}btn-close-opacity);
cursor: pointer; cursor: pointer;
display: block; display: block;
core/scss/ui/_empty.scss
+1 -1
View File
@@ -55,5 +55,5 @@
.empty-bordered { .empty-bordered {
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: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
} }
core/scss/ui/_flags.scss
+3 -2
View File
@@ -1,6 +1,7 @@
@use 'sass:map'; @use 'sass:map';
@use '../config'; @use '../config';
.flag { .flag {
position: relative; position: relative;
display: inline-block; display: inline-block;
@@ -8,7 +9,7 @@
aspect-ratio: 1.33333; aspect-ratio: 1.33333;
background: no-repeat center/cover; background: no-repeat center/cover;
box-shadow: config.$flag-box-shadow; box-shadow: config.$flag-box-shadow;
border-radius: config.$flag-border-radius; @include config.border-radius(config.$flag-border-radius);
vertical-align: bottom; vertical-align: bottom;
&.flag-country-np { &.flag-country-np {
@@ -28,7 +29,7 @@
width: map.get($size, size); width: map.get($size, size);
@if map.has-key($size, border-radius) { @if map.has-key($size, border-radius) {
border-radius: map.get($size, border-radius); @include config.border-radius(map.get($size, border-radius));
} }
} }
} }
core/scss/ui/_forms.scss
+5 -5
View File
@@ -106,7 +106,7 @@ Form control
} }
.form-control-rounded { .form-control-rounded {
border-radius: 10rem; @include border-radius(var(--#{$prefix}border-radius-pill));
} }
.form-control-flush { .form-control-flush {
@@ -127,7 +127,7 @@ Form control
margin-bottom: 1rem; margin-bottom: 1rem;
background: var(--#{$prefix}bg-surface-secondary); background: var(--#{$prefix}bg-surface-secondary);
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: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
} }
fieldset:empty { fieldset:empty {
@@ -151,7 +151,7 @@ Form help
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
background: var(--#{$prefix}gray-100); background: var(--#{$prefix}gray-100);
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
@include transition(background-color $transition-time, color $transition-time); @include transition(background-color $transition-time, color $transition-time);
&:hover, &:hover,
@@ -166,7 +166,7 @@ Input group
*/ */
.input-group { .input-group {
box-shadow: $input-box-shadow; box-shadow: $input-box-shadow;
border-radius: $input-border-radius; @include border-radius($input-border-radius);
.form-control, .form-control,
.btn { .btn {
@@ -181,7 +181,7 @@ Input group
.input-group-flat { .input-group-flat {
&:focus-within { &:focus-within {
box-shadow: $input-focus-box-shadow; box-shadow: $input-focus-box-shadow;
border-radius: $input-border-radius; @include border-radius($input-border-radius);
.form-control, .form-control,
.input-group-text { .input-group-text {
core/scss/ui/_legend.scss
+1 -1
View File
@@ -7,6 +7,6 @@ Legend
background: $legend-bg; background: $legend-bg;
width: var(--#{$prefix}legend-size); width: var(--#{$prefix}legend-size);
height: var(--#{$prefix}legend-size); height: var(--#{$prefix}legend-size);
border-radius: $legend-border-radius; @include border-radius($legend-border-radius);
border: 1px solid var(--#{$prefix}border-color-translucent); border: 1px solid var(--#{$prefix}border-color-translucent);
} }
core/scss/ui/_loaders.scss
+1 -1
View File
@@ -18,7 +18,7 @@
border-top-color: currentColor; border-top-color: currentColor;
border-inline-start-color: currentColor; border-inline-start-color: currentColor;
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
animation: rotate-360 0.6s linear; animation: rotate-360 0.6s linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
core/scss/ui/_markdown.scss
+1 -1
View File
@@ -57,7 +57,7 @@ Prose (formerly markdown)
> img, > img,
> p > img { > p > img {
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
border: 1px solid var(--#{$prefix}border-color); border: 1px solid var(--#{$prefix}border-color);
} }
core/scss/ui/_modals.scss
+1 -1
View File
@@ -31,7 +31,7 @@
inset-inline-end: 0; inset-inline-end: 0;
height: $modal-status-size; height: $modal-status-size;
background: var(--#{$prefix}secondary); background: var(--#{$prefix}secondary);
border-radius: $modal-content-border-radius $modal-content-border-radius 0 0; @include border-radius($modal-content-border-radius $modal-content-border-radius 0 0);
} }
.modal-header { .modal-header {
core/scss/ui/_pagination.scss
+1 -1
View File
@@ -12,7 +12,7 @@
.page-link { .page-link {
min-width: 2rem; min-width: 2rem;
border-radius: var(--#{$prefix}pagination-border-radius); @include border-radius(var(--#{$prefix}pagination-border-radius));
} }
.page-item:not(.active) .page-link:hover { .page-item:not(.active) .page-link:hover {
core/scss/ui/_payments.scss
+1 -1
View File
@@ -9,7 +9,7 @@
vertical-align: bottom; vertical-align: bottom;
font-style: normal; font-style: normal;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
border-radius: var(--#{config.$prefix}border-radius); @include config.border-radius(var(--#{config.$prefix}border-radius));
} }
@each $payment in config.$payment-providers { @each $payment in config.$payment-providers {
core/scss/ui/_placeholder.scss
+1 -1
View File
@@ -4,6 +4,6 @@
} }
&:not(.avatar):not([class*='card-img-']) { &:not(.avatar):not([class*='card-img-']) {
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
} }
} }
core/scss/ui/_progress.scss
+1 -1
View File
@@ -137,7 +137,7 @@ Progress steps
text-align: center; text-align: center;
cursor: default; cursor: default;
background-color: var(--tblr-border-color); background-color: var(--tblr-border-color);
border-radius: var(--#{$prefix}border-radius-pill); @include border-radius(var(--#{$prefix}border-radius-pill));
@at-root a#{&} { @at-root a#{&} {
cursor: pointer; cursor: pointer;
core/scss/ui/_ribbons.scss
+5 -5
View File
@@ -16,7 +16,7 @@
text-transform: uppercase; text-transform: uppercase;
background: var(--#{$prefix}primary); background: var(--#{$prefix}primary);
border-color: var(--#{$prefix}primary); border-color: var(--#{$prefix}primary);
border-radius: var(--#{$prefix}ribbon-border-radius) 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius); @include border-radius(var(--#{$prefix}ribbon-border-radius) 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -61,7 +61,7 @@
inset-inline-end: 0.75rem; inset-inline-end: 0.75rem;
width: 2rem; width: 2rem;
padding: 0.5rem 0; padding: 0.5rem 0;
border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius); @include border-radius(0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
&:before { &:before {
top: 0; top: 0;
@@ -87,7 +87,7 @@
.ribbon-start { .ribbon-start {
inset-inline-end: auto; inset-inline-end: auto;
inset-inline-start: calc(-1 * var(--#{$prefix}ribbon-margin)); inset-inline-start: calc(-1 * var(--#{$prefix}ribbon-margin));
border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius); @include border-radius(0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
&:before { &:before {
top: auto; top: auto;
@@ -106,7 +106,7 @@
.ribbon-bookmark { .ribbon-bookmark {
padding-inline-start: 0.25rem; padding-inline-start: 0.25rem;
border-radius: 0 0 var(--#{$prefix}ribbon-border-radius) 0; @include border-radius(0 0 var(--#{$prefix}ribbon-border-radius) 0);
&:after { &:after {
position: absolute; position: absolute;
@@ -140,7 +140,7 @@
padding-inline-end: 0; padding-inline-end: 0;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
padding-inline-start: 0; padding-inline-start: 0;
border-radius: 0 var(--#{$prefix}ribbon-border-radius) 0 0; @include border-radius(0 var(--#{$prefix}ribbon-border-radius) 0 0);
&:after { &:after {
top: 100%; top: 100%;
core/scss/ui/_segmented.scss
+2 -2
View File
@@ -17,7 +17,7 @@
padding: var(--#{$prefix}nav-padding); padding: var(--#{$prefix}nav-padding);
list-style: none; list-style: none;
background: var(--#{$prefix}nav-bg); background: var(--#{$prefix}nav-bg);
border-radius: calc(var(--#{$prefix}nav-radius) + var(--#{$prefix}nav-padding)); @include border-radius(calc(var(--#{$prefix}nav-radius) + var(--#{$prefix}nav-padding)));
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
.nav-link { .nav-link {
@@ -39,7 +39,7 @@
transition: transition:
background-color $transition-time, background-color $transition-time,
color $transition-time; color $transition-time;
border-radius: var(--#{$prefix}nav-radius); @include border-radius(var(--#{$prefix}nav-radius));
flex-grow: 1; flex-grow: 1;
justify-content: center; justify-content: center;
core/scss/ui/_signature.scss
+2 -2
View File
@@ -3,12 +3,12 @@
--#{$prefix}signature-border-radius: var(--#{$prefix}border-radius); --#{$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}signature-padding); padding: var(--#{$prefix}signature-padding);
border-radius: var(--#{$prefix}border-radius); @include 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: calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding)); @include border-radius(calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding)));
display: block; display: block;
cursor: crosshair; cursor: crosshair;
width: 100%; width: 100%;
core/scss/ui/_status.scss
+3 -3
View File
@@ -56,7 +56,7 @@
font-size: $font-size-base; font-size: $font-size-base;
text-transform: none; text-transform: none;
letter-spacing: normal; letter-spacing: normal;
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
font-weight: var(--#{$prefix}font-weight-medium); font-weight: var(--#{$prefix}font-weight-medium);
line-height: 1; line-height: 1;
margin: 0; margin: 0;
@@ -94,7 +94,7 @@
width: var(--#{$prefix}status-size); width: var(--#{$prefix}status-size);
height: var(--#{$prefix}status-size); height: var(--#{$prefix}status-size);
background: var(--#{$prefix}status-dot-color); background: var(--#{$prefix}status-dot-color);
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
} }
.status-dot-animated { .status-dot-animated {
@@ -130,7 +130,7 @@
margin: calc(var(--#{$prefix}status-circle-size) / -2) 0 0 calc(var(--#{$prefix}status-circle-size) / -2); margin: calc(var(--#{$prefix}status-circle-size) / -2) 0 0 calc(var(--#{$prefix}status-circle-size) / -2);
width: var(--#{$prefix}status-circle-size); width: var(--#{$prefix}status-circle-size);
height: var(--#{$prefix}status-circle-size); height: var(--#{$prefix}status-circle-size);
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
background: var(--#{$prefix}status-color); background: var(--#{$prefix}status-color);
&:nth-child(1) { &:nth-child(1) {
core/scss/ui/_steps.scss
+1 -1
View File
@@ -73,7 +73,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: $border-radius-pill; @include border-radius(var(--#{$prefix}border-radius-pill));
transform: translateX(-50%); transform: translateX(-50%);
color: var(--#{$prefix}white); color: var(--#{$prefix}white);
width: var(--#{$prefix}steps-dot-size); width: var(--#{$prefix}steps-dot-size);
core/scss/ui/_tags.scss
+1 -1
View File
@@ -4,7 +4,7 @@
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
height: var(--#{$prefix}tag-height); height: var(--#{$prefix}tag-height);
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
padding: 0 0.5rem; padding: 0 0.5rem;
background: var(--#{$prefix}bg-surface); background: var(--#{$prefix}bg-surface);
box-shadow: var(--#{$prefix}shadow-input); box-shadow: var(--#{$prefix}shadow-input);
core/scss/ui/_timeline.scss
+2 -2
View File
@@ -25,7 +25,7 @@
bottom: calc(-1 * var(--#{$prefix}page-padding)); bottom: calc(-1 * var(--#{$prefix}page-padding));
width: var(--#{$prefix}border-width); width: var(--#{$prefix}border-width);
background-color: var(--#{$prefix}border-color); background-color: var(--#{$prefix}border-color);
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
} }
} }
} }
@@ -39,7 +39,7 @@
height: var(--#{$prefix}timeline-icon-size, $avatar-size); height: var(--#{$prefix}timeline-icon-size, $avatar-size);
background: var(--#{$prefix}bg-surface-secondary); background: var(--#{$prefix}bg-surface-secondary);
color: var(--#{$prefix}secondary); color: var(--#{$prefix}secondary);
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
z-index: 5; z-index: 5;
} }
core/scss/ui/_tracking.scss
+1 -1
View File
@@ -22,7 +22,7 @@
.tracking-block { .tracking-block {
flex: 1; flex: 1;
border-radius: var(--#{$prefix}tracking-block-border-radius); @include border-radius(var(--#{$prefix}tracking-block-border-radius));
height: var(--#{$prefix}tracking-height); height: var(--#{$prefix}tracking-height);
min-width: 0.25rem; min-width: 0.25rem;
background: var(--#{$prefix}border-color); background: var(--#{$prefix}border-color);
core/scss/ui/_type.scss
+8 -8
View File
@@ -121,7 +121,7 @@ pre {
padding: $pre-padding; padding: $pre-padding;
background: $pre-bg; background: $pre-bg;
color: $pre-color; color: $pre-color;
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
line-height: $line-height-base; line-height: $line-height-base;
@include scrollbar; @include scrollbar;
@@ -135,7 +135,7 @@ pre {
code { code {
background: var(--#{$prefix}code-bg); background: var(--#{$prefix}code-bg);
padding: 2px 4px; padding: 2px 4px;
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
} }
abbr { abbr {
@@ -154,7 +154,7 @@ kbd,
font-weight: $kbd-font-weight; font-weight: $kbd-font-weight;
line-height: 1; line-height: 1;
vertical-align: baseline; vertical-align: baseline;
border-radius: $kbd-border-radius; @include border-radius($kbd-border-radius);
} }
img { img {
@@ -194,7 +194,7 @@ a:hover:has(.icon) {
} }
.link-hoverable { .link-hoverable {
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
transition: background-color 0.15s ease-in-out; transition: background-color 0.15s ease-in-out;
&:hover { &:hover {
@@ -217,7 +217,7 @@ Mentions
.mention { .mention {
display: inline-block; display: inline-block;
box-shadow: var(--#{$prefix}shadow-border); box-shadow: var(--#{$prefix}shadow-border);
border-radius: var(--#{$prefix}border-radius-pill); @include border-radius(var(--#{$prefix}border-radius-pill));
line-height: calc(16em / 12); line-height: calc(16em / 12);
font-size: calc(12em / 14); font-size: calc(12em / 14);
color: var(--#{$prefix}body-color); color: var(--#{$prefix}body-color);
@@ -241,7 +241,7 @@ Mentions
.mention-color { .mention-color {
width: calc(14em / 12); width: calc(14em / 12);
height: calc(14em / 12); height: calc(14em / 12);
border-radius: var(--#{$prefix}border-radius-pill); @include border-radius(var(--#{$prefix}border-radius-pill));
margin: calc(-2em / 12) calc(4em / 12) 0 calc(-4em / 12); margin: calc(-2em / 12) calc(4em / 12) 0 calc(-4em / 12);
display: inline-flex; display: inline-flex;
background: no-repeat center center/cover; background: no-repeat center center/cover;
@@ -304,7 +304,7 @@ $text-variants: (
color: var(--#{$prefix}body-color); color: var(--#{$prefix}body-color);
border: 1px solid var(--#{$prefix}border-color); border: 1px solid var(--#{$prefix}border-color);
background: var(--#{$prefix}bg-surface); background: var(--#{$prefix}bg-surface);
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
line-height: calc(var(--#{$prefix}steps-item-size) - 2px); line-height: calc(var(--#{$prefix}steps-item-size) - 2px);
font-size: var(--#{$prefix}font-size-h4); font-size: var(--#{$prefix}font-size-h4);
font-weight: var(--#{$prefix}font-weight-semibold); font-weight: var(--#{$prefix}font-weight-semibold);
@@ -319,7 +319,7 @@ $text-variants: (
.callout { .callout {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
border: 1px solid var(--#{$prefix}primary-200); border: 1px solid var(--#{$prefix}primary-200);
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background: var(--#{$prefix}primary-lt); background: var(--#{$prefix}primary-lt);
core/scss/ui/forms/_form-colorinput.scss
+1 -1
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: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
&:before { &:before {
core/scss/ui/forms/_form-imagecheck.scss
+3 -3
View File
@@ -20,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: var(--#{$prefix}form-imagecheck-radius); @include 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);
@@ -45,7 +45,7 @@ Image check
user-select: none; user-select: none;
background: $form-check-input-bg; background: $form-check-input-bg;
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: $form-check-input-border-radius; @include border-radius($form-check-input-border-radius);
@include transition(opacity $transition-time); @include transition(opacity $transition-time);
.form-imagecheck-input:checked ~ & { .form-imagecheck-input:checked ~ & {
@@ -58,7 +58,7 @@ Image check
} }
.form-imagecheck-input[type='radio'] ~ & { .form-imagecheck-input[type='radio'] ~ & {
border-radius: $form-check-radio-border-radius; @include border-radius($form-check-radio-border-radius);
} }
.form-imagecheck-input[type='radio']:checked ~ & { .form-imagecheck-input[type='radio']:checked ~ & {
core/scss/ui/forms/_form-selectgroup.scss
+4 -4
View File
@@ -43,7 +43,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: var(--#{$prefix}border-radius); @include 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);
@@ -65,11 +65,11 @@ Select group
box-shadow: $form-check-input-box-shadow; box-shadow: $form-check-input-box-shadow;
.form-selectgroup-input[type='checkbox'] + .form-selectgroup-label & { .form-selectgroup-input[type='checkbox'] + .form-selectgroup-label & {
border-radius: $form-check-input-border-radius; @include border-radius($form-check-input-border-radius);
} }
.form-selectgroup-input[type='radio'] + .form-selectgroup-label & { .form-selectgroup-input[type='radio'] + .form-selectgroup-label & {
border-radius: $form-check-radio-border-radius; @include border-radius($form-check-radio-border-radius);
} }
.form-selectgroup-input:checked + .form-selectgroup-label & { .form-selectgroup-input:checked + .form-selectgroup-label & {
@@ -149,6 +149,6 @@ Select group
} }
.form-selectgroup-label { .form-selectgroup-label {
border-radius: 50px; @include border-radius(var(--#{$prefix}border-radius-pill));
} }
} }
core/scss/vendor/_coloris.scss
Vendored
+7 -7
View File
@@ -1,15 +1,15 @@
.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); @include border-radius(var(--#{$prefix}border-radius));
} }
.clr-gradient { .clr-gradient {
border-radius: var(--#{$prefix}border-radius) var(--#{$prefix}border-radius) 0 0; @include border-radius(var(--#{$prefix}border-radius) var(--#{$prefix}border-radius) 0 0);
} }
input.clr-color { input.clr-color {
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
color: var(--#{$prefix}body-color); color: var(--#{$prefix}body-color);
border-color: var(--#{$prefix}border-color); border-color: var(--#{$prefix}border-color);
background: transparent; background: transparent;
@@ -21,7 +21,7 @@ input.clr-color {
.clr-swatches { .clr-swatches {
button { button {
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
padding: 0 2px 4px 2px; padding: 0 2px 4px 2px;
&:focus { &:focus {
@@ -31,13 +31,13 @@ input.clr-color {
} }
.clr-preview { .clr-preview {
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
overflow: visible; overflow: visible;
button, button,
&:before, &:before,
&:after { &:after {
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
} }
button { button {
@@ -55,7 +55,7 @@ input.clr-color {
height: 1.5rem; height: 1.5rem;
inset-inline-start: 6px; inset-inline-start: 6px;
inset-inline-end: auto; inset-inline-end: auto;
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
&:after { &:after {
box-shadow: inset 0 0 0 1px var(--#{$prefix}border-color-translucent); box-shadow: inset 0 0 0 1px var(--#{$prefix}border-color-translucent);
core/scss/vendor/_dropzone.scss
Vendored
+1 -1
View File
@@ -17,7 +17,7 @@
margin: 0.5rem; margin: 0.5rem;
.dz-image { .dz-image {
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
} }
.dz-success-mark { .dz-success-mark {
core/scss/vendor/_litepicker.scss
Vendored
+2 -2
View File
@@ -25,7 +25,7 @@
.container__main { .container__main {
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: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
box-shadow: none; box-shadow: none;
} }
@@ -62,7 +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); @include border-radius(calc(var(--#{$prefix}border-radius) - 1px));
} }
} }
} }
core/scss/vendor/_nouislider.scss
Vendored
+3 -3
View File
@@ -2,7 +2,7 @@
border: 0; border: 0;
box-shadow: none; box-shadow: none;
background: none; background: none;
border-radius: 0; @include border-radius(0);
color: $form-range-thumb-bg; color: $form-range-thumb-bg;
} }
@@ -13,7 +13,7 @@
.noUi-base { .noUi-base {
background: $form-range-track-bg; background: $form-range-track-bg;
border-radius: $form-range-track-border-radius; @include border-radius($form-range-track-border-radius);
} }
.noUi-handle { .noUi-handle {
@@ -21,7 +21,7 @@
height: $form-range-thumb-height; height: $form-range-thumb-height;
border: $form-range-thumb-border; border: $form-range-thumb-border;
box-shadow: $form-range-thumb-box-shadow; box-shadow: $form-range-thumb-box-shadow;
border-radius: $form-range-thumb-border-radius; @include border-radius($form-range-thumb-border-radius);
background: currentColor; background: currentColor;
outline: 0; outline: 0;
core/scss/vendor/_tom-select.scss
Vendored
+1 -1
View File
@@ -12,7 +12,7 @@ $input-border-width: 1px;
} }
.focus .ts-control { .focus .ts-control {
border-radius: var(--#{$prefix}border-radius); @include border-radius(var(--#{$prefix}border-radius));
} }
.ts-control { .ts-control {
core/scss/vendor/_wysiwyg.scss
Vendored
+1 -1
View File
@@ -1,6 +1,6 @@
.tox-hugerte { .tox-hugerte {
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important; border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
border-radius: $border-radius !important; @include border-radius($border-radius);
font-family: var(--#{$prefix}font-sans-serif) !important; font-family: var(--#{$prefix}font-sans-serif) !important;
} }
preview/scss/_highlight.scss
-1
View File
@@ -10,7 +10,6 @@ pre.highlight,
max-height: 30rem; max-height: 30rem;
margin: 1.5rem 0; margin: 1.5rem 0;
overflow: auto; overflow: auto;
border-radius: var(--#{$prefix}border-radius);
} }
.highlight { .highlight {