관리-도구
편집 파일: _header-top.scss
.layout-horizontal-bar { .header-topnav { margin: 0; padding: 0; background-color: #fff; position: relative; z-index: 10; position: fixed; width: 100%; /* height: 80px; */ top: 80px; box-shadow: 0 1px 15px rgba(0, 0, 0, .04), 0 1px 6px rgba(0, 0, 0, .04); .container { padding: 0; } .topbar-branding { float: left; height: 48px; padding: 8px; margin: 0 8px; img { height: 100%; width: auto; } } .ps { overflow: initial !important; overflow-anchor: none; -ms-overflow-style: none; touch-action: auto; -ms-touch-action: auto; } .topnav { // margin-left: -19px; display: flex; align-items: center; height: auto; } .header-topnav-right { float: right; height: 48px; display: flex; align-items: center; padding-right: .67rem; } .topnav { &:after { content: ""; display: table; clear: both; } a { color: #333 !important; text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects; } label.menu-toggle { height: 48px; width: 48px; box-sizing: border-box; padding: 12px; border-radius: 50%; .mat-icon { font-size: 24px; } } .toggle, [id^=drop] { display: none; } ul { padding: 0; margin: 0; list-style: none; position: relative; } ul:not(.menu) { box-shadow: 0 0 4px rgba(0, 0, 0, 0), 0 4px 8px rgba(0, 0, 0, .28); } ul.menu { float: left; height: 48px; padding-right: 45px; >li { float: left; >div { >a, >div { border-bottom: 2px solid; height: 48px; box-sizing: border-box; border-color: transparent; margin: 0 6px; } } } } ul li { margin: 0px; display: inline-block; } a, label { display: flex; flex-direction: row; align-items: center; padding: 13px 20px; height: 44px; font-size: .875rem; text-decoration: none; box-sizing: border-box; cursor: pointer; } ul li ul li:hover, ul li ul li.open { background: #eeeeee; } ul ul { opacity: 0; visibility: hidden; position: absolute; background: #ffffff; color: rgba(0, 0, 0, .87); /* has to be the same number as the "line-height" of "nav a" */ top: 48px; transform: translateY(-100px); transition: all 0.3s ease-in-out; z-index: -1; border-radius: 5px; } ul li:hover>div>div>ul, ul li:hover>div>ul { opacity: 1; visibility: visible; transform: translateY(0); } ul ul li { width: 170px; float: none; display: list-item; position: relative; } ul ul ul { top: 0; left: 170px; } ul ul ul li { position: relative; top: 0; } li>a:after { content: ' +'; } li>a:only-child:after { content: ''; } } } } @media (max-width: 959px) { .header-topnav-right { position: absolute; right: 6px; top: 0; } } [dir=rtl] { .header-topnav { .topnav { // flex-direction: row-reverse; } } } /* Media Queries --------------------------------------------- */ @media only screen and (max-width: 768px) { .layout-horizontal-bar { .header-topnav { margin: 0; padding: 0; background-color: #fff; position: relative; z-index: 10; position: fixed; width: 200px; top: 70px; height: 100%; padding-top: 20px; left: -200px; box-shadow: 0 1px 15px rgba(0, 0, 0, .04), 0 1px 6px rgba(0, 0, 0, .04); transition: all .5s ease-in-out; .ps { overflow: hidden !important; overflow-anchor: none; -ms-overflow-style: none; touch-action: auto; -ms-touch-action: auto; } } .topnav { margin: 0; max-height: calc(100vh - 80px) !important; .toggle+a { // display: none; } .menu { height: auto !important; padding-right: 0px !important; width: 100%; li { a { border: none !important; } } } ul.menu { float: left; padding-left: 0px; >li { float: left; >div { >a, >div { border-bottom: 2px solid; height: auto !important; box-sizing: border-box; border-color: transparent; margin: 0 6px; } } } } .toggle { display: flex; text-decoration: none; border: none; } .toggle:hover { // background-color: #eeeeee; } ul { // overflow: hidden; transform: translateY(0px) !important; transition: max-height 0.3s ease-in-out; } [id^=drop]:checked+ul { opacity: 1; visibility: visible; max-height: 2000px; } [id^=drop]:checked+ul.menu { max-height: 300px; overflow-y: scroll; } ul li { position: relative; opacity: 1; visibility: visible; width: 100%; z-index: 1; } ul ul .toggle, ul ul a { padding: 0 40px; } ul ul ul a { padding: 0 80px; } ul li ul li .toggle, ul ul a, ul ul ul a { padding: 14px 20px; } /* Hide menus on hover */ ul ul { opacity: 1 !important; visibility: hidden !important; max-height: 0px; position: relative !important; background: #ffffff; color: rgba(0, 0, 0, .87); /* has to be the same number as the "line-height" of "nav a" */ top: 0px !important; transform: translateY(-100px); transition: all 1s ease-in-out !important; z-index: 99 !important; border-radius: 5px; overflow: hidden; left: 0px; } ul li:hover>div>div>ul, ul li:hover>div>ul { opacity: 1 !important; visibility: visible !important; transform: translateY(0); transition: all 0.3s ease-in-out !important; max-height: 400px; // height: auto; } ul ul li { opacity: 1; visibility: visible; width: 100% !important; // display: inline; } ul:not(.menu) { box-shadow: none !important; margin-left: 5px; border-left: 1px dashed #eee; } ul ul ul { left: 0; } ul ul ul li { position: static; } } } } @media all and (max-width: 330px) { .topnav ul li { display: block; width: 94%; } } [dir=rtl] { .topnav { a, label { .mat-icon { margin-right: 0; margin-left: 2px; } } } }