Untitled
unknown
plain_text
2 years ago
7.7 kB
4
Indexable
@import 'variables'; $time-hover: 250ms; $color-nav-item: #bdf1fa; .app__container { display: flex; height: 100vh; width: 100vw; position: relative; .app__menu-open-btn { position: absolute; top: 10px; left: 10px; z-index: 500; background: $primary-color; color: #fff; @media screen and (min-width: 1024px) { display: none; } } .app_menu-open { width: 250px !important; } .app__menu { width: 0px; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 1000; background: white; min-height: 100vh; transition: width 0.5s ease-in-out; @media screen and (min-width: 1024px) { width: 250px; position: relative; } .app__menu-close-btn { margin-right: 10px; margin-top: 10px; display: flex; justify-content: flex-end; @media screen and (min-width: 1024px) { display: none; } } .logo__container { height: 80px; padding: 0.5rem; margin-bottom: 20px; .logo { background: url('../assets/images/LOGO_A.png') transparent center no-repeat; background-size: contain; height: 100%; margin-bottom: 30px; border-radius: 10px; display: block; transition: all 300ms ease-in-out; cursor: pointer; //background-position: ; } } .sidenav-content { width: 100%; padding-inline: 10px; .nav { width: 100%; .nav__content { width: 100%; list-style: none; margin: 0; padding-left: 0; padding-bottom: 10px; p { font-size: 0.8rem; color: map-get($font-colors, ligth-dark); letter-spacing: 1px; margin-bottom: 5px; } .nav__list-content { list-style: none; margin: 0; padding-left: 0; li { padding-block: 5px; padding-left: 10px; margin-bottom: 5px; transition: all 0.3s ease-in-out; position: relative; cursor: pointer; overflow: hidden; &::after { content: ''; position: absolute; background: $primary-color; width: 100%; height: 100%; left: -100%; top: 0; transition: all 0.3s ease-in-out; z-index: -1; } &:hover { color: white; &::after { left: 0; } } } } } } } } .app__content { width: calc(100% - 250px); background: #f2f2f2; &.not-logged { width: 100%; } } } .app-sidenav { background-color: $primary-color-sec; width: map-get($sidenav-properties, w-sidenav); height: 100vh; position: absolute; display: block; padding: 1rem 0.5rem; z-index: 9; transition: width ease-in-out #{$time-hover}; @function heightValue($value1, $value2) { $result: #{$value1} + #{$value2}; @warn $result; @return $result; } // Elementos del menu mat-list { height: calc( 100vh - ( #{map-get($layout-properties, p-sidenav)} + #{map-get( $layout-properties, h-logo )} + #{map-get($layout-properties, h-user-menu)} ) ); overflow-y: hidden; overflow-x: hidden; mat-list-item { border-radius: 100px; cursor: pointer; margin-bottom: 0.3rem; .mat-list-item-content { padding: 0; color: #fff; font-size: 0.9rem; mat-icon { margin-right: 0.6rem; font-size: 1.15rem; width: auto; height: auto; } span { opacity: 0; display: none; } } &.selected-item, &:hover { background-color: $secondary-color; .mat-list-item-content { color: #fff; } } &:focus { outline: 0 !important; } } &:hover { overflow-y: auto; } } .menu-user { height: map-get($layout-properties, h-user-menu); width: 230px; cursor: pointer; .user-info { display: flex; align-items: center; .user { background-color: #fff; color: $primary-color-sec; font-weight: bold; width: 44px; height: 44px; border-radius: 100px; justify-content: center; align-items: center; display: flex; font-size: 1.2rem; } .info { display: none; margin-left: 1rem; color: #fff; width: 72%; } } } mat-accordion { mat-expansion-panel { box-shadow: none !important; background-color: transparent !important; margin-bottom: 0.3rem !important; mat-expansion-panel-header { padding: 0 15px !important; mat-panel-title { color: #fff !important; font-size: 0.9rem; } mat-icon { margin-right: 0.6rem; font-size: 1.15rem !important; width: auto !important; height: auto !important; } .mat-expansion-indicator::after { color: #fff; display: none; } &:hover { mat-panel-title { color: $color-nav-item !important; } } } .mat-expansion-panel-content { .mat-expansion-panel-body { padding-left: 0; padding-right: 0; transition: padding ease-in-out #{$time-hover}; mat-list-item { margin-bottom: 0 !important; margin-top: 0.4rem !important; } } } &.mat-expanded { background-color: rgba(0, 0, 0, 0.15) !important; border-radius: 25px !important; } &:hover { background-color: rgba(0, 0, 0, 0.15) !important; border-radius: 25px !important; } } } &:hover { width: 290px; transition: width ease-in-out #{$time-hover}; .logo { background-position: center; padding-left: 55px; transition: padding-left 300ms ease-in-out; height: 80px; margin-bottom: 0; } mat-list { mat-list-item { span { opacity: 1; display: block; } } } .menu-user { .info { display: block; } } mat-accordion { mat-expansion-panel { mat-expansion-panel-header { .mat-expansion-indicator::after { display: block; } } .mat-expansion-panel-content { .mat-expansion-panel-body { padding-right: 10px !important; padding-left: 18px !important; transition: padding ease-in-out #{$time-hover}; } } } } } } .mat-menu-user { .mat-menu-item { &:first-child { cursor: auto; height: auto; padding-top: 0.8rem; padding-bottom: 0.8rem; background-color: map-get($background-colors, primary); } } span { display: block; line-height: 34px; } }
Editor is loading...