html { font-size:12px; } body { height:100vh; min-width:1200px; &.iframe { min-width:0; } } $header-height : 0px; $nav-height : 44px; #nav { .nav-menu { flex:1; @include display-flex; align-items: center; .logo { width:50px; height:44px; border-color:transparent !important; background-color:#354d91 !important; color:#fff; padding:13px; text-align:center; &:after { content:''; } i { margin-right:0; } } &, ul { list-style:none; padding:0; margin:0; background-color:#282828; a, span { font-size:12px; padding:13px; user-select: none; color:#b4b4b4; display:block; } li { display:block; white-space: nowrap; &.open, &:hover { > a, > span { text-decoration: none; cursor:pointer; } } &.divider { height:1px; border:0 none; background-color:#ddd; margin:3px 0; } } } > li { display:block; position:relative; > a, > span{ white-space: nowrap; word-wrap:normal; padding-right:30px; position:relative; i { margin-right:5px; } &:hover { color:#fff; } &:after { content:'\f107'; font-family: "Font Awesome 5 Pro" !important; position:absolute; right:10px; top:50%; transform: translateY(-50%); } } &.active { > span { color:#fff; } } > ul { display:none; position:absolute; top:44px; left:-1px; width:auto; border:1px solid #a0a0a0; border-top:0 none; min-width:calc(100% + 2px); padding:2px; box-shadow: 0 6px 12px rgba(0,0,0,.175); a, span { padding:6px 10px; color:#282828; position:relative; .badge { position:absolute; top:50%; transform:translateY(-50%); right:5px; background-color: #c7163a; color: #fff; padding: 2px 5px; } &:hover { background-color:#354D91; color:#fff; } } > li { position:relative; > ul { display:none; position:absolute; top:0; left:calc(100% + 1px); border:1px solid #a0a0a0; min-width:100%; background-color:#fff; box-shadow: 0 6px 12px rgba(0,0,0,.175); } >span { padding-right:15px; &:after { content:'\f105'; font-family: "Font Awesome 5 Pro" !important; position:absolute; right:5px; top:50%; transform: translateY(-50%); } } &:hover { > a, span { background-color:#354D91; color:#fff; } > ul { display:block; } } } } &.open { > a, span { color:#282828; background-color:#fff;; z-index:3; } > ul { display:block; background-color:#fff; } } } } } #contents { padding:30px; height: calc(100vh - #{$header-height} - #{$nav-height}); overflow-y:auto; } .page-header { margin-bottom:10px; border-bottom: 1px solid #ddd; .iframe & { margin-top:0; } .page-title { font-size:18px; font-weight:500; color:#282828; line-height:1em; small { color:#767676; font-size:12px; margin-left:15px; } } } .box { position:relative; padding:30px; background:#fff; border-radius:4px; border:1px solid #e6e6e6; .box-header { border-bottom:1px solid #e6e6e6; margin-bottom:15px; margin-top:-30px; position:relative; height:57px; @include clear-fix-after(); .box-title { float:left; color:$brand-primary; font-size:15px; font-weight:500; padding:18px 0; small { color:#767676; font-weight:400; font-size:13px; } } .box-action { float:right; @include display-flex(); height:57px; align-items: center; } } } .frame-content { padding:15px; }