123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- //
- // Core: Brand
- //
- @include brand-variant($sidebar-dark-bg, $sidebar-dark-color);
- .main-brand {
- grid-area: main-brand;
- display: grid;
- grid-template-areas: "brand-link sidebar-mini-icon";
- grid-auto-flow: column;
- justify-content: space-between;
- font-size: $navbar-brand-font-size;
- padding: $brand-link-padding-y $sidebar-padding-x;
- white-space: nowrap;
- border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%);
- min-width: $sidebar-width;
- max-width: $sidebar-width;
- height: min-content;
- @include transition($sidebar-transition);
- z-index: $zindex-main-brand;
- .brand-link {
- grid-area: brand-link;
- }
- .brand-image {
- grid-area: brand-img;
- float: left;
- line-height: .8;
- margin-left: .8rem;
- margin-right: .5rem;
- margin-top: -3px;
- max-height: 33px;
- width: auto;
- }
- .brand-text {
- grid-area: brand-text;
- color: $sidebar-dark-color;
- &:hover {
- color: $white;
- text-decoration: none;
- }
- }
- .brand-icons {
- display: inline-flex;
- > * {
- color: $gray-400;
- }
- }
- .sidebar-full-icon,
- .header-full-icon {
- display: none;
- }
- .sidebar-mini-icon {
- grid-area: sidebar-mini-icon;
- }
- }
- .sidebar-collapse:not(.sidebar-hover) {
- .main-brand {
- grid-template-areas: "sidebar-mini-icon brand-link";
- justify-content: center;
- min-width: $sidebar-mini-width;
- max-width: $sidebar-mini-width;
- .brand-link {
- display: none;
- }
- }
- }
- @include media-breakpoint-down(md) {
- .main-brand {
- min-width: unset;
- max-width: unset;
- .sidebar-mini-icon {
- display: none;
- }
- }
- }
|