js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add properties for border-radius overrides and use them to fix #348 in a better way, also closes #379 and improves #374

Browse Source
This commit is contained in:
Lea Verou
2024-12-20 12:26:47 -05:00
parent 43a1179513
commit 6e99787425
3 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/dropdown/dropdown.css
View File

@@ -2,7 +2,6 @@
--box-shadow: var(--wa-shadow-m);
display: inline-block;
border-radius: var(--wa-form-control-border-radius);
}
.dropdown::part(popup) {
@@ -27,12 +26,6 @@
#trigger {
display: block; /* for boundingClientRect */
&,
&::slotted(*) {
/* Otherwise button groups don't work well with dropdown, see #348 */
border-radius: inherit !important;
}
}
.panel {

21
src/styles/native/button.css
View File

@@ -14,7 +14,24 @@
--text-color-hover: var(--text-color);
--text-color-active: var(--text-color);
border-radius: var(--wa-form-control-border-radius);
/* These allow button groups to zero out border-radius on the first and last buttons */
border-start-start-radius: var(
/* top left */ --wa-border-block-start-radius,
var(--wa-border-inline-start-radius, var(--wa-form-control-border-radius))
);
border-start-end-radius: var(
/* top right */ --wa-border-block-start-radius,
var(--wa-border-inline-end-radius, var(--wa-form-control-border-radius))
);
border-end-start-radius: var(
/* bottom left */ --wa-border-block-end-radius,
var(--wa-border-inline-start-radius, var(--wa-form-control-border-radius))
);
border-end-end-radius: var(
/* bottom right */ --wa-border-block-end-radius,
var(--wa-border-inline-end-radius, var(--wa-form-control-border-radius))
);
border-style: var(--wa-border-style);
border-width: var(--border-width);
align-items: center;
@@ -96,5 +113,5 @@ input:is([type='button'], [type='reset'], [type='submit']),
.wa-pill,
:host([pill]) {
border-radius: var(--wa-border-radius-pill) !important;
border-radius: var(--wa-border-radius-pill);
}

7
src/styles/utilities/button-group.css
View File

@@ -1,6 +1,5 @@
.wa-button-group {
display: inline-flex;
align-items: center;
position: relative;
isolation: isolate;
@@ -26,6 +25,8 @@
&::slotted(:not(:first-child)) {
border-start-start-radius: 0 !important;
border-end-start-radius: 0 !important;
--wa-border-inline-start-radius: 0;
border-inline-start-color: var(--border-color, rgb(0 0 0 / 0.3));
margin-inline-start: calc(-1 * var(--border-width, 1px));
}
@@ -34,6 +35,7 @@
&::slotted(:not(:last-child)) {
border-start-end-radius: 0 !important;
border-end-end-radius: 0 !important;
--wa-border-inline-end-radius: 0;
}
}
@@ -45,6 +47,8 @@
&::slotted(:not(:first-child)) {
border-start-start-radius: 0 !important;
border-start-end-radius: 0 !important;
--wa-border-block-start-radius: 0;
border-block-start-color: var(--border-color, rgb(0 0 0 / 0.3));
margin-block-start: calc(-1 * var(--border-width, 1px));
}
@@ -53,5 +57,6 @@
&::slotted(:not(:last-child)) {
border-end-start-radius: 0 !important;
border-end-end-radius: 0 !important;
--wa-border-block-end-radius: 0;
}
}