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

fixes #409

Browse Source
This commit is contained in:
Cory LaViska
2021-04-12 10:00:07 -04:00
parent 2bbea51830
commit 9f42a698c4
3 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/resources/changelog.md
View File

@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- 🚨 BREAKING: `sl-radio` components must be located inside an `sl-radio-group` for proper accessibility [#218](https://github.com/shoelace-style/shoelace/issues/218)
- Added `sl-radio-group` component [#218](https://github.com/shoelace-style/shoelace/issues/218)
- Added `--header-spacing`, `--body-spacing`, and `--footer-spacing` custom properties to `sl-drawer` and `sl-dialog` [#409](https://github.com/shoelace-style/shoelace/issues/409)
- Fixed a bug where `sl-menu-item` prefix and suffix slots wouldn't always receive the correct spacing
- Improved a11y in `sl-radio` with Windows high contrast mode [#215](https://github.com/shoelace-style/shoelace/issues/215)
- Improved a11y in `sl-select` by preventing the chevron icon from being announced

14
src/components/dialog/dialog.scss
View File

@@ -3,9 +3,15 @@
/**
* @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
* @prop --header-spacing: The amount of padding to use for the header.
* @prop --body-spacing: The amount of padding to use for the body.
* @prop --footer-spacing: The amount of padding to use for the footer.
*/
:host {
--width: 31rem;
--header-spacing: var(--sl-spacing-large);
--body-spacing: var(--sl-spacing-large);
--footer-spacing: var(--sl-spacing-large);
display: contents;
}
@@ -67,7 +73,7 @@
flex: 1 1 auto;
font-size: var(--sl-font-size-large);
line-height: var(--sl-line-height-dense);
padding: var(--sl-spacing-large);
padding: var(--header-spacing);
}
.dialog__close {
@@ -75,12 +81,12 @@
display: flex;
align-items: center;
font-size: var(--sl-font-size-x-large);
padding: 0 var(--sl-spacing-large);
padding: 0 var(--header-spacing);
}
.dialog__body {
flex: 1 1 auto;
padding: var(--sl-spacing-large);
padding: var(--body-spacing);
overflow: auto;
-webkit-overflow-scrolling: touch;
}
@@ -88,7 +94,7 @@
.dialog__footer {
flex: 0 0 auto;
text-align: right;
padding: var(--sl-spacing-large);
padding: var(--footer-spacing);
::slotted(sl-button:not(:first-of-type)) {
margin-left: var(--sl-spacing-x-small);

15
src/components/drawer/drawer.scss
View File

@@ -4,9 +4,16 @@
/**
* @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its
* `placement`. Note that the drawer will shrink to accommodate smaller screens.
* @prop --header-spacing: The amount of padding to use for the header.
* @prop --body-spacing: The amount of padding to use for the body.
* @prop --footer-spacing: The amount of padding to use for the footer.
*
*/
:host {
--size: 25rem;
--header-spacing: var(--sl-spacing-large);
--body-spacing: var(--sl-spacing-large);
--footer-spacing: var(--sl-spacing-large);
display: contents;
}
@@ -104,7 +111,7 @@
flex: 1 1 auto;
font-size: var(--sl-font-size-large);
line-height: var(--sl-line-height-dense);
padding: var(--sl-spacing-large);
padding: var(--header-spacing);
}
.drawer__close {
@@ -112,19 +119,19 @@
display: flex;
align-items: center;
font-size: var(--sl-font-size-x-large);
padding: 0 var(--sl-spacing-large);
padding: 0 var(--header-spacing);
}
.drawer__body {
flex: 1 1 auto;
padding: var(--sl-spacing-large);
padding: var(--body-spacing);
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.drawer__footer {
text-align: right;
padding: var(--sl-spacing-large);
padding: var(--footer-spacing);
::slotted(sl-button:not(:last-of-type)) {
margin-right: var(--sl-spacing-x-small);