@limetech/lime-elements
Version:
70 lines (69 loc) • 1.62 kB
CSS
/*
* This file is imported into every component!
*
* Nothing in this file may output any CSS
* without being explicitly called by outside code.
*/
/**
* @prop --banner-icon-fill-color: Color of the banner icon.
* @prop --banner-icon-background-color: Background color of the banner icon.
*/
.lime-banner {
min-height: 3.25rem;
display: none;
background-color: rgba(var(--contrast-100), 0.7);
backdrop-filter: blur(0.3125rem);
box-shadow: var(--shadow-depth-16);
}
.lime-banner.lime-banner--open {
display: block;
}
.lime-banner.lime-banner--open .lime-banner__surface {
opacity: 1;
}
.lime-banner .lime-banner__surface {
display: flex;
justify-content: center;
box-sizing: border-box;
opacity: 0;
}
.lime-banner .lime-banner__content {
display: flex;
align-items: center;
align-content: stretch;
padding: 1rem;
flex-wrap: wrap;
}
.lime-banner .icon-message {
display: flex;
align-items: center;
}
.lime-banner div[class^=mdc-typography] {
color: rgb(var(--contrast-1200));
}
.lime-banner .lime-banner__icon {
margin: 0 0.625rem;
align-self: flex-start;
}
.lime-banner .lime-banner__actions {
margin-left: 3.125rem;
display: flex;
justify-content: flex-end;
}
.lime-banner limel-icon {
color: var(--banner-icon-fill-color, rgb(var(--contrast-100)));
background-color: var(--banner-icon-background-color, rgb(var(--contrast-800)));
}
@media screen and (max-width: 760px) {
.lime-banner__content {
flex-direction: column;
gap: 0.5rem;
}
.icon-message {
display: flex;
align-items: center;
}
.lime-banner__actions {
margin-left: 0;
}
}