@cbpds/web-components
Version:
Web components for the CBP Design System.
107 lines (104 loc) • 3.34 kB
CSS
/*
* Caution: "global styles" get injected into every component and can cause file size bloat.
* These should only include SASS variables and mixins that are not written out to CSS directly
*/
:root {
--cbp-dialog-color: var(--cbp-color-text-darkest);
--cbp-dialog-color-dark: var(--cbp-color-text-lightest);
--cbp-dialog-color-bg: var(--cbp-color-white);
--cbp-dialog-color-bg-dark: var(--cbp-color-gray-cool-60);
--cbp-dialog-padding: var(--cbp-space-5x);
--cbp-dialog-border-radius: var(--cbp-border-radius-softer);
--cbp-dialog-shadow: var(--cbp-shadow-level-5-center);
--cbp-dialog-width: 20rem;
--cbp-dialog-height: auto;
}
/*
* Dark Mode - display dark design based on mode or context
*/
[data-cbp-theme=light] cbp-dialog[context*=dark],
[data-cbp-theme=dark] cbp-dialog:not([context=dark-inverts]):not([context=light-always]) {
--cbp-dialog-color: var(--cbp-dialog-color-dark);
--cbp-dialog-color-bg: var(--cbp-dialog-color-bg-dark);
}
cbp-dialog {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: var(--cbp-z-index-level-top);
overflow: hidden;
background-color: rgba(0, 0, 0, 0.3);
}
cbp-dialog[open] {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
cbp-dialog[color=danger] {
--cbp-dialog-color-bg: var(--cbp-color-danger-lighter);
--cbp-dialog-color-bg-dark: var(--cbp-color-danger-darker);
}
cbp-dialog div[role=dialog] {
opacity: 1;
display: flex;
flex-direction: column;
position: fixed;
overflow-y: auto;
z-index: var(--cbp-z-index-level-top);
width: var(--cbp-dialog-width);
height: var(--cbp-dialog-height);
max-width: 100%;
max-height: 90vh;
box-shadow: var(--cbp-dialog-shadow);
border-radius: var(--cbp-dialog-border-radius);
}
cbp-dialog div[role=dialog] .cbp-dialog-body {
color: var(--cbp-dialog-color);
background-color: var(--cbp-dialog-color-bg);
padding: var(--cbp-dialog-padding);
border-radius: var(--cbp-dialog-border-radius) var(--cbp-dialog-border-radius) 0 0;
}
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] {
display: flex;
}
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button {
--cbp-button-border-radius: 0;
width: 100%;
}
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button:first-child {
--cbp-button-border-radius: 0 0 0 var(--cbp-border-radius-softer);
}
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button:last-child {
--cbp-button-border-radius: 0 0 var(--cbp-border-radius-softer) 0;
}
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button:first-child:last-child {
--cbp-button-border-radius: 0 0 var(--cbp-border-radius-softer) var(--cbp-border-radius-softer);
}
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button button,
cbp-dialog div[role=dialog] [slot=cbp-dialog-actions] cbp-button a {
padding-block: var(--cbp-space-3x);
width: 100%;
}
@media (max-width: 37.5em) {
cbp-dialog[open] {
align-items: end;
}
cbp-dialog div[role=dialog] {
margin-bottom: var(--cbp-space-5x);
}
}
@media print {
cbp-dialog[open] div[role=dialog] {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: var(--cbp-z-index-level-top);
background-color: var(--cbp-dialog-background-color);
}
}