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.
 
 
 
 
 
 

463 lines
8.4 KiB

html {
font-size:12px;
}
body {
height:100vh;
min-width:1200px;
&.iframe {
min-width:0;
}
}
$header-height : 0px;
$nav-height : 44px;
/*
#header {
position:relative;
@include display-flex();
height:$header-height;
background:#282828;
padding:0 30px;
z-index:101;
align-items: center;
.logo {
display:block;
color:#fff;
font-size:19px;
}
.top-navs {
-ms-flex:1;
-webkit-flex:1;
flex:1;
}
.btn-top-action {
padding:14px;
cursor:pointer;
background:transparent;
position:relative;
color:#fff;
border:0 none;
outline:none !important;
font-size:13px;
i {
font-size:20px;
vertical-align: middle;
}
}
.btn-user {
display:inline-block;
.btn-top-action {
&:after {
content:"\f107";
font-family:'Font Awesome 5 Pro';
position:absolute;
right:0px;
top:50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
}
}
}
#nav {
position:relative;
z-index: 100;
width: 100%;
height: $nav-height;
background-color: #ffffff;
border-bottom: 1px solid #e6e6e6;
padding:0 30px;
.main-navigation {
@include display-flex();
height:$nav-height;
padding:0;
margin:0;
list-style:none;
flex-wrap:wrap;
> li {
display:block;
position:relative;
margin-right:30px;
> a {
@include display-flex();
height:$nav-height;
justify-content: center;
align-items: center;
color:#979797;
font-size:0;
font-weight:500;
padding-left:0;
padding-right:45px;
position:relative;
font-family: NanumSquare;
&:after {
content:"\f107";
font-family:'Font Awesome 5 Pro';
position:absolute;
font-size:15px;
right:15px;
top:50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
i, span {
font-size:14px;
}
i + span {
margin-left:6px;
}
}
&.active {
> a {
color:#282828;
}
}
> ul {
height:0;
visibility: hidden;
opacity:0;
z-index:101;
position:absolute;
top:100%;
left:0;
width:150px;
background:#fff;
list-style:none;
padding:0;
margin:0;
border:1px solid #767676;
li {
display:block;
a {
display:block;
padding:6px 15px;
font-size:12px;
color:#282828;
cursor:pointer;
position:relative;
&:hover {
background-color:#f4f8f9;
}
.badge {
position:absolute;
right:5px;
top:50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
font-size:10px;
background-color:#ff2222;
color:#fff;
padding:3px 5px;
line-height:10px;
}
}
&.divider {
height: 1px;
margin: 4px 0;
overflow: hidden;
background-color: #e5e5e5;
}
&.active {
a {
background-color:#f4f8f9;
color:$color-primary;
}
}
}
}
&:hover {
> a {
color:#282828;
}
> ul {
height:auto;
visibility: visible;
opacity:1;
-webkit-transition: visibility .3s, opacity .3s;
-moz-transition: visibility .3s, opacity .3s;
-ms-transition: visibility .3s, opacity .3s;
-o-transition: visibility .3s, opacity .3s;
transition: visibility .3s, opacity .3s;
}
}
}
}
}
*/
#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;
&: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;
}