regexper-static/src/components/Message/style.module.css

93 lines
1.5 KiB
CSS

@import url('../../globals.module.css');
.message {
background: var(--color-tan);
color: var(--color-black);
margin: var(--spacing-margin) 0;
box-shadow: 0 0 1rem color(var(--color-black) alpha(0.7));
max-height: 100%;
display: flex;
flex-direction: column;
}
.header {
& h2 {
display: inline-block;
padding: var(--spacing-margin);
line-height: 2.8rem;
margin: 0;
}
& svg {
padding: var(--spacing-margin);
height: 2.8rem;
width: 2.8rem;
vertical-align: bottom;
}
& button {
padding: 0;
margin: 0;
border: 0 none;
background: transparent;
color: var(--color-tan);
cursor: pointer;
float: right;
font-size: 0;
&:hover,
&:active {
color: var(--color-white);
}
}
}
.content {
padding: var(--spacing-margin);
overflow: auto;
& p {
margin-top: 0;
margin-bottom: var(--spacing-margin);
}
& p:last-child {
margin-bottom: 0;
}
}
.error {
& .header {
background: var(--color-red);
color: var(--color-white);
& svg {
background: var(--color-white);
color: var(--color-red);
}
}
}
.warning {
& .header {
background: var(--color-orange);
& > svg {
background: var(--color-black);
color: var(--color-orange);
}
}
}
.info {
& .header {
background: var(--color-blue);
color: var(--color-white);
& > svg {
background: var(--color-white);
color: var(--color-blue);
}
}
}