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

alerts

Browse Source
This commit is contained in:
Cory LaViska
2023-09-05 14:45:33 -04:00
parent ebed8daee6
commit 201b32f3fb
5 changed files with 49 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/_utilities/markdown.cjs
View File

@@ -23,12 +23,20 @@ markdown.use(markdownItReplaceIt);
// Callouts
['tip', 'warning', 'danger'].forEach(type => {
const variant = type === 'tip' ? 'brand' : type;
let icon = 'info-circle';
if (type === 'warning') icon = 'exclamation-circle';
if (type === 'danger') icon = 'exclamation-triangle';
markdown.use(markdownItContainer, type, {
render: function (tokens, idx) {
if (tokens[idx].nesting === 1) {
return `<div role="alert" class="callout callout--${type}">`;
return `
<sl-alert class="callout" variant="${variant}" open>
<sl-icon slot="icon" name="${icon}"></sl-icon>
`;
}
return '</div>\n';
return '</sl-alert>\n';
}
});
});

73
docs/assets/styles/docs.css
View File

@@ -512,12 +512,6 @@ pre:hover .copy-code-button,
/* Callouts */
.callout {
position: relative;
background-color: var(--wa-color-neutral-container-fill-muted);
border-left: solid 4px var(--wa-color-neutral-container-outline-muted);
border-radius: var(--wa-corners-1x);
color: var(--wa-color-neutral-text-on-muted);
padding: var(--wa-space-xl) var(--wa-space-xl) var(--wa-space-xl) var(--wa-space-2xl);
margin-bottom: var(--docs-content-vertical-spacing);
}
@@ -529,66 +523,14 @@ pre:hover .copy-code-button,
margin-bottom: 0;
}
.callout--tip {
background-color: var(--wa-color-brand-container-fill-muted);
border-left-color: var(--wa-color-brand-element-outline-muted);
color: var(--wa-color-brand-text-on-muted);
}
.callout::before {
content: '';
position: absolute;
top: calc(50% - 0.8rem);
left: calc(-0.8rem - 2px);
width: 1.6rem;
height: 1.6rem;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--wa-font-family-longform);
font-weight: var(--wa-font-weight-heavy);
clip-path: circle(50% at 50% 50%);
}
.callout--tip::before {
content: 'i';
font-style: italic;
background-color: var(--wa-color-brand-element-outline-muted);
color: var(--wa-color-brand-text-on-muted);
}
.callout--warning {
background-color: var(--wa-color-warning-container-fill-muted);
border-left-color: var(--wa-color-warning-element-outline-muted);
color: var(--wa-color-warning-text-on-muted);
}
.callout--warning::before {
content: '!';
background-color: var(--wa-color-warning-element-outline-muted);
color: var(--wa-color-warning-text-on-muted);
}
.callout--danger {
background-color: var(--wa-color-danger-container-fill-muted);
border-left-color: var(--wa-color-danger-element-outline-muted);
color: var(--wa-color-danger-text-on-muted);
}
.callout--danger::before {
content: '‼';
background-color: var(--wa-color-danger-element-outline-muted);
color: var(--wa-color-danger-text-on-muted);
}
.callout + .callout {
margin-top: calc(-0.5 * var(--docs-content-vertical-spacing));
}
.callout a {
color: inherit;
}
.callout p {
margin-top: 0;
}
/* Aside */
.content aside {
float: right;
@@ -995,8 +937,7 @@ html.sidebar-open #menu-toggle {
}
details,
pre,
.callout {
pre {
border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
}
@@ -1013,10 +954,6 @@ html.sidebar-open #menu-toggle {
display: none;
}
.callout::before {
border: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
}
.component-page__navigation,
.copy-code-button,
.code-preview__buttons,

2
docs/pages/components/alert.md
View File

@@ -24,7 +24,7 @@ const App = () => (
);
```
:::tip
:::warning
Alerts will not be visible if the `open` attribute is not present.
:::

69
src/components/alert/alert.styles.ts
View File

@@ -15,15 +15,11 @@ export default css`
position: relative;
display: flex;
align-items: stretch;
background-color: var(--sl-panel-background-color);
border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
border-top-width: calc(var(--sl-panel-border-width) * 3);
border-radius: var(--sl-border-radius-medium);
font-family: var(--sl-font-sans);
font-size: var(--sl-font-size-small);
font-weight: var(--sl-font-weight-normal);
line-height: 1.6;
color: var(--sl-color-neutral-700);
border-radius: var(--wa-corners-1x);
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-size-normal);
line-height: var(--wa-font-line-height-regular);
margin: inherit;
}
@@ -36,54 +32,44 @@ export default css`
flex: 0 0 auto;
display: flex;
align-items: center;
font-size: var(--sl-font-size-large);
padding-inline-start: var(--sl-spacing-large);
font-size: var(--wa-font-size-l);
padding-inline-start: var(--wa-space-l);
}
.alert--brand {
border-top-color: var(--sl-color-primary-600);
}
.alert--brand .alert__icon {
color: var(--sl-color-primary-600);
background-color: var(--wa-color-brand-container-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-brand-container-outline-muted);
color: var(--wa-color-brand-text-on-muted);
}
.alert--success {
border-top-color: var(--sl-color-success-600);
}
.alert--success .alert__icon {
color: var(--sl-color-success-600);
background-color: var(--wa-color-success-container-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-success-container-outline-muted);
color: var(--wa-color-success-text-on-muted);
}
.alert--neutral {
border-top-color: var(--sl-color-neutral-600);
}
.alert--neutral .alert__icon {
color: var(--sl-color-neutral-600);
background-color: var(--wa-color-neutral-container-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-neutral-container-outline-muted);
color: var(--wa-color-neutral-text-on-muted);
}
.alert--warning {
border-top-color: var(--sl-color-warning-600);
}
.alert--warning .alert__icon {
color: var(--sl-color-warning-600);
background-color: var(--wa-color-warning-container-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-warning-container-outline-muted);
color: var(--wa-color-warning-text-on-muted);
}
.alert--danger {
border-top-color: var(--sl-color-danger-600);
}
.alert--danger .alert__icon {
color: var(--sl-color-danger-600);
background-color: var(--wa-color-danger-container-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-danger-container-outline-muted);
color: var(--wa-color-danger-text-on-muted);
}
.alert__message {
flex: 1 1 auto;
display: block;
padding: var(--sl-spacing-large);
padding: var(--wa-space-m);
overflow: hidden;
}
@@ -91,7 +77,12 @@ export default css`
flex: 0 0 auto;
display: flex;
align-items: center;
font-size: var(--sl-font-size-medium);
padding-inline-end: var(--sl-spacing-medium);
color: currentColor;
font-size: var(--wa-font-size-m);
padding-inline-end: var(--wa-space-m);
}
.alert__close-button:active {
color: color-mix(in oklch, currentColor, black 6%);
}
`;

6
src/themes/_utility.css
View File

@@ -13,7 +13,7 @@
position: fixed;
top: 0;
inset-inline-end: 0;
z-index: var(--sl-z-index-toast);
z-index: var(--wa-z-index-toast);
width: 28rem;
max-width: 100%;
max-height: 100%;
@@ -21,9 +21,9 @@
}
.sl-toast-stack sl-alert {
margin: var(--sl-spacing-medium);
margin: var(--wa-space-m);
}
.sl-toast-stack sl-alert::part(base) {
box-shadow: var(--sl-shadow-large);
box-shadow: var(--wa-shadow-level-3);
}