Files
zitadel/console/src/app/modules/nav-toggle/nav-toggle.component.scss
T
b099a26a16 feat(console): MDC components (#6482)
mdc components

---------

Co-authored-by: Elio Bischof <[email protected]>
2023-10-26 08:29:06 +00:00

87 lines
1.9 KiB
SCSS

@mixin nav-toggle-theme($theme) {
$primary: map-get($theme, primary);
$warn: map-get($theme, warn);
$background: map-get($theme, background);
$accent: map-get($theme, accent);
$primary-color: map-get($primary, 500);
$warn-color: map-get($warn, 500);
$accent-color: map-get($accent, 500);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
$back: map-get($background, background);
.nav-toggle {
display: flex;
align-items: center;
font-size: 14px;
line-height: 14px;
padding: 0.4rem 12px;
color: map-get($foreground, text);
transition: all 0.2s ease;
text-decoration: none;
border-radius: 50vw;
border: none;
font-weight: 400;
margin: 0.25rem 2px;
white-space: nowrap;
position: relative;
background: none;
cursor: pointer;
font-family:
'Lato',
-apple-system,
BlinkMacSystemFont,
sans-serif;
box-sizing: border-box;
height: 27px;
.c_label {
display: flex;
align-items: center;
text-align: center;
.count {
display: flex;
align-items: center;
justify-content: center;
height: 17px;
width: 17px;
border-radius: 50%;
padding: 2px;
margin: -2px -9px -2px 8px;
margin-left: 6px;
background-color: if($is-dark-theme, #ffffff20, #00000020);
line-height: 18px;
font-size: 11px;
transition: background 0.2s ease;
}
}
&.external-link {
padding-right: 2rem;
i {
position: absolute;
right: 8px;
font-size: 1.2rem;
}
}
&:hover {
background: if($is-dark-theme, #ffffff40, #00000010);
}
&.active {
background-color: $primary-color;
color: map-get($primary, default-contrast);
.c_label {
.count {
background-color: if($is-dark-theme, #00000020, #ffffff20);
}
}
}
}
}