@schukai/monster
Version:
Monster is a simple library for creating fast, robust and lightweight websites.
149 lines (148 loc) • 3.36 kB
CSS
/** generated from badge.pcss **/
.monster-badge-primary {
padding: .25em .4em;
}
.monster-badge-primary,
.monster-badge-primary-pill {
background-color: var(--monster-bg-color-primary-4);
border-radius: .25rem;
color: var(--monster-color-primary-4);
display: inline-block;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
text-decoration: none;
vertical-align: baseline;
white-space: nowrap;
}
.monster-badge-primary-pill {
border-radius: 10rem;
padding: .25em .6em;
}
.monster-badge-secondary {
padding: .25em .4em;
}
.monster-badge-secondary,
.monster-badge-secondary-pill {
background-color: var(--monster-bg-color-secondary-3);
border-radius: .25rem;
color: var(--monster-color-secondary-3);
display: inline-block;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
text-decoration: none;
vertical-align: baseline;
white-space: nowrap;
}
.monster-badge-secondary-pill {
border-radius: 10rem;
padding: .25em .6em;
}
.monster-badge-tertiary {
padding: .25em .4em;
}
.monster-badge-tertiary,
.monster-badge-tertiary-pill {
background-color: var(--monster-bg-color-tertiary-3);
border-radius: .25rem;
color: var(--monster-color-tertiary-3);
display: inline-block;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
text-decoration: none;
vertical-align: baseline;
white-space: nowrap;
}
.monster-badge-tertiary-pill {
border-radius: 10rem;
padding: .25em .6em;
}
.monster-badge-destructive {
padding: .25em .4em;
}
.monster-badge-destructive,
.monster-badge-destructive-pill {
background-color: var(--monster-bg-color-destructive-1);
border-radius: .25rem;
color: var(--monster-color-destructive-1);
display: inline-block;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
text-decoration: none;
vertical-align: baseline;
white-space: nowrap;
}
.monster-badge-destructive-pill {
border-radius: 10rem;
padding: .25em .6em;
}
.monster-badge-success {
padding: .25em .4em;
}
.monster-badge-success,
.monster-badge-success-pill {
background-color: var(--monster-bg-color-success-1);
border-radius: .25rem;
color: var(--monster-color-success-1);
display: inline-block;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
text-decoration: none;
vertical-align: baseline;
white-space: nowrap;
}
.monster-badge-success-pill {
border-radius: 10rem;
padding: .25em .6em;
}
.monster-badge-warning {
padding: .25em .4em;
}
.monster-badge-warning,
.monster-badge-warning-pill {
background-color: var(--monster-bg-color-warning-1);
border-radius: .25rem;
color: var(--monster-color-warning-1);
display: inline-block;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
text-decoration: none;
vertical-align: baseline;
white-space: nowrap;
}
.monster-badge-warning-pill {
border-radius: 10rem;
padding: .25em .6em;
}
.monster-badge-error {
padding: .25em .4em;
}
.monster-badge-error,
.monster-badge-error-pill {
background-color: var(--monster-bg-color-error-1);
border-radius: .25rem;
color: var(--monster-color-error-1);
display: inline-block;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
text-decoration: none;
vertical-align: baseline;
white-space: nowrap;
}
.monster-badge-error-pill {
border-radius: 10rem;
padding: .25em .6em;
}