You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
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; }
|