@betha-plataforma/estrutura-componentes
Version:
Coleção de Web Components para compor a estrutura de uma aplicação front-end da Betha Sistemas.
97 lines (92 loc) • 2.02 kB
CSS
*,
*:after,
*:before {
padding: 0;
margin: 0;
box-sizing: border-box;
line-height: 1.5;
}
* {
font-family: var(--bth-app-font-family-primary);
}
a:focus {
outline: 1px dotted var(--bth-app-gray-dark-30);
}
::-webkit-scrollbar {
-webkit-appearance: none;
height: 6px;
width: 6px;
}
::-webkit-scrollbar-track {
background: var(--bth-app-gray-light-30);
}
::-webkit-scrollbar-corner {
background: var(--bth-app-gray-light-40);
}
::-webkit-scrollbar-thumb {
background-color: var(--bth-app-gray);
border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(255, 255, 255, 0.3);
}
.desktop {
display: inline-block;
flex-direction: row;
position: relative;
}
.desktop bth-icone {
font-size: 18px;
}
.desktop .badge {
line-height: 1;
vertical-align: middle;
white-space: nowrap;
display: inline-block;
position: absolute;
min-width: 10px;
text-align: center;
border-radius: 50px;
font-size: 11px;
font-weight: var(--bth-app-font-weight-semi-bold);
padding: 2px 5px;
background-color: var(--bth-app-red);
color: var(--bth-app-gray-light-40);
right: -5px;
}
.desktop .status {
padding: 4px 4px;
right: -4px;
top: 1px;
color: var(--bth-app-gray-light-40);
border: 2px solid var(--bth-app-menu-item-hover-color, var(--bth-app-menu-bg-color));
transition: background-color 0.3s ease-in-out;
}
.desktop .status--success {
background-color: var(--bth-app-brand-lime);
}
.desktop .status--danger {
background-color: var(--bth-app-gray-light-10);
}
.mobile {
display: inline-block;
flex-direction: row;
align-items: center;
}
.mobile .badge {
white-space: nowrap;
display: inline-block;
min-width: 10px;
border-radius: 50px;
font-size: 11px;
font-weight: var(--bth-app-font-weight-semi-bold);
position: absolute;
margin: -2px -12px;
padding: 1px 5px;
background-color: var(--bth-app-red);
color: var(--bth-app-gray-light-40);
}
.mobile bth-icone {
color: var(--bth-app-gray-dark-20);
font-size: 20px;
}