@dialpad/dialtone-css
Version:
Dialpad's design system
78 lines (70 loc) • 2.36 kB
text/less
//
// DIALTONE
// COMPONENTS: BANNERS
//
// These are the styles for banners, which are a type of notice used
// to alert users about important information relevant to them.
// For further documentation of these styles, please visit:
// https://dialtone.dialpad.com/components/banners
//
// ============================================================================
// $ BASE WRAPPER
// ----------------------------------------------------------------------------
.d-banner {
// Component CSS Vars
// ------------------------------------------------------------------------
--banner-color-border: var(--dt-color-border-default);
--banner-line-height: var(--dt-font-line-height-200);
--banner-dialog-padding-y: var(--dt-space-400);
--banner-dialog-padding-x: var(--dt-space-500);
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: var(--zi-navigation-fixed);
max-width: 100%;
min-height: var(--dt-size-650); // 48
padding: 0;
line-height: var(--banner-line-height);
border-bottom: 1px solid var(--banner-color-border);
border-radius: 0;
box-shadow: none;
&[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
}
&[aria-hidden='false'] {
visibility: visible;
opacity: 1;
}
&--pinned {
z-index: calc(~'var(--zi-navigation-fixed) + 1');
transform: translate3d(0, 0, 0);
}
}
// ============================================================================
// $ CONTENT CONTAINER
// ----------------------------------------------------------------------------
.d-banner__dialog {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 128rem;
min-height: 100%;
margin: 0 auto;
padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
.d-notice__content {
flex-direction: row;
gap: var(--dt-space-300);
align-items: baseline;
}
}
// ============================================================================
// $ STYLES
// ============================================================================
// $$ DEFAULT IMPORTANT
// ----------------------------------------------------------------------------
.d-banner.d-banner--important {
--banner-color-border: transparent;
}