mjs/nebula
mjs/nebula
1
0
Fork 0
mirror of https://github.com/onsonr/nebula.git synced 2025-03-10 17:29:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improved the alert component styles by adjusting the layout, colors, and typography.

Browse Source
This commit is contained in:
Prad Nukala 2024-07-17 23:09:48 -04:00 committed by Prad Nukala (aider)
parent 7b52e5c5b2
commit d2015df50b
1 changed files with 62 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,85 +3,38 @@ import { css } from 'lit';
export default css` export default css`
:host { :host {
display: contents; display: contents;
/* For better DX, we'll reset the margin here so the base part can inherit it */
margin: 0; margin: 0;
} }
.alert { .alert {
position: relative; position: relative;
width: 100%;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
background-color: var(--sl-panel-background-color); background-color: var(--sl-color-neutral-0);
border: solid var(--sl-panel-border-width) var(--sl-panel-border-color); border: solid var(--sl-panel-border-width) var(--sl-color-neutral-200);
border-top-width: calc(var(--sl-panel-border-width) * 3);
border-radius: var(--sl-border-radius-medium); border-radius: var(--sl-border-radius-medium);
font-family: var(--sl-font-sans); font-family: var(--sl-font-sans);
font-size: var(--sl-font-size-small); font-size: var(--sl-font-size-sm);
font-weight: var(--sl-font-weight-normal);
line-height: 1.6; line-height: 1.6;
color: var(--sl-color-neutral-700); color: var(--sl-color-neutral-900);
margin: inherit; margin: inherit;
} padding: var(--sl-spacing-medium) var(--sl-spacing-large);
.alert:not(.alert--has-icon) .alert__icon,
.alert:not(.alert--closable) .alert__close-button {
display: none;
} }
.alert__icon { .alert__icon {
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: var(--sl-font-size-large); font-size: var(--sl-font-size-lg);
padding-inline-start: var(--sl-spacing-large); padding-inline-end: var(--sl-spacing-medium);
}
.alert--primary {
border-top-color: var(--sl-color-primary-600);
}
.alert--primary .alert__icon {
color: var(--sl-color-primary-600);
}
.alert--success {
border-top-color: var(--sl-color-success-600);
}
.alert--success .alert__icon {
color: var(--sl-color-success-600);
}
.alert--neutral {
border-top-color: var(--sl-color-neutral-600);
}
.alert--neutral .alert__icon {
color: var(--sl-color-neutral-600);
}
.alert--warning {
border-top-color: var(--sl-color-warning-600);
}
.alert--warning .alert__icon {
color: var(--sl-color-warning-600);
}
.alert--danger {
border-top-color: var(--sl-color-danger-600);
}
.alert--danger .alert__icon {
color: var(--sl-color-danger-600);
} }
.alert__message { .alert__message {
flex: 1 1 auto; flex: 1 1 auto;
display: block; display: block;
padding: var(--sl-spacing-large);
overflow: hidden; overflow: hidden;
padding-inline-start: var(--sl-spacing-small);
} }
.alert__close-button { .alert__close-button {
@ -89,6 +42,58 @@ export default css`
display: flex; display: flex;
align-items: center; align-items: center;
font-size: var(--sl-font-size-medium); font-size: var(--sl-font-size-medium);
padding-inline-end: var(--sl-spacing-medium); padding-inline-start: var(--sl-spacing-medium);
}
/* Variants */
.alert--default {
background-color: var(--sl-color-neutral-0);
border-color: var(--sl-color-neutral-200);
color: var(--sl-color-neutral-900);
}
.alert--danger {
border-color: var(--sl-color-danger-300);
color: var(--sl-color-danger-600);
}
.alert--danger .alert__icon {
color: var(--sl-color-danger-600);
}
/* Title styles */
::slotted([slot='title']) {
margin-bottom: var(--sl-spacing-3x-small);
font-size: var(--sl-font-size-sm);
font-weight: var(--sl-font-weight-semibold);
line-height: 1;
letter-spacing: var(--sl-letter-spacing-tight);
}
/* Description styles */
::slotted(:not([slot='title'])) {
font-size: var(--sl-font-size-sm);
line-height: 1.6;
}
/* Icon positioning */
.alert--has-icon {
padding-inline-start: var(--sl-spacing-large);
}
.alert--has-icon .alert__icon {
position: absolute;
left: var(--sl-spacing-large);
top: var(--sl-spacing-large);
}
.alert--has-icon .alert__message {
padding-inline-start: var(--sl-spacing-2x-large);
}
/* Remove icon and close button when not needed */
.alert:not(.alert--has-icon) .alert__icon,
.alert:not(.alert--closable) .alert__close-button {
display: none;
} }
`; `;