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
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;
|
|
}
|