1904 lines
37 KiB
CSS
1904 lines
37 KiB
CSS
/*!
|
|
* kimsQ Rb v2.0 administration Sidebar
|
|
* Version: 1.0
|
|
* Homepage: http://www.kimsq.co.kr
|
|
* Copyright 2014 redblock inc
|
|
* Licensed under MIT
|
|
* Based on Bootstrap v3.2.0
|
|
*/
|
|
|
|
/**
|
|
* 목차:
|
|
*
|
|
* 1 - Reset 초기화
|
|
* 2 - Structure 구조
|
|
* 3 - System Admin Sidebar 시스템 사이드바
|
|
* 4 - System Main 메인
|
|
* 5 - 3rdparty-settings Sidebar 참여자 사이드바
|
|
* 6 - Footer 풋터
|
|
* ----------------------------------------------------------------------------
|
|
*/
|
|
|
|
|
|
/**
|
|
* 1 - Reset 초기화
|
|
* ----------------------------------------------------------------------------
|
|
*/
|
|
|
|
body {
|
|
font-size: 14px;
|
|
font-family: 'NotoSans', dotum, sans-serif;
|
|
}
|
|
|
|
|
|
/**
|
|
* 2 - Structure 구조
|
|
* ----------------------------------------------------------------------------
|
|
*/
|
|
|
|
.rb-system-sidebar {
|
|
/*overflow-x: hidden;*/
|
|
/*overflow-y: auto;*/
|
|
bottom: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.rb-system-main {
|
|
margin-left: 220px;
|
|
min-height: 500px;
|
|
padding: 0 0 52px;
|
|
z-index: 990;
|
|
transition: all 0.2s ease-out;
|
|
-webkit-transition: all 0.2s ease-out;
|
|
}
|
|
|
|
.rb-system-admin {
|
|
-webkit-transform: translate(0px, 0) translateZ(0px);
|
|
-ms-transform: translate(0px, 0) translateZ(0px);
|
|
transform: translate(0px, 0) translateZ(0px);
|
|
|
|
-webkit-transition: 250ms cubic-bezier(0.1, .57, .1, 1);
|
|
transition: 250ms cubic-bezier(0.1, .57, .1, 1);
|
|
left: 0;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
width: 220px;
|
|
}
|
|
|
|
.rb-notification-active {
|
|
background: #999;
|
|
font-size: 11px;
|
|
font-weight: normal;
|
|
color: #f4f4f4;
|
|
border-radius: 100%;
|
|
min-width: 17px;
|
|
}
|
|
|
|
/**
|
|
|
|
* 3 - System Admin Sidebar 시스템 사이드바
|
|
* ----------------------------------------------------------------------------
|
|
*/
|
|
|
|
.rb-system-sidebar a {
|
|
outline: none;
|
|
}
|
|
|
|
/**
|
|
* 4 - System Main 메인
|
|
* ----------------------------------------------------------------------------
|
|
*/
|
|
|
|
.rb-system-main .page-header {
|
|
margin-top: 0;
|
|
}
|
|
|
|
@media (max-width: 992px) and (min-width: 768px) {
|
|
.rb-system-admin .rb-icon-minify {
|
|
border-radius: 0;
|
|
font-size: 23px;
|
|
height: 34px;
|
|
margin: 0;
|
|
position: relative;
|
|
right: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.rb-hidden-system-admin .rb-system-admin {
|
|
left: 0 !important;
|
|
overflow-y: auto;
|
|
padding-top: 51px;
|
|
}
|
|
|
|
.rb-hidden-system-admin .rb-system-main {
|
|
position: fixed;
|
|
}
|
|
|
|
.rb-hidden-system-admin .rb-system-site {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
.rb-system-admin {
|
|
left: -220px;
|
|
}
|
|
|
|
.rb-system-main {
|
|
margin-left: 0;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.rb-system-site {
|
|
right: -300px !important;
|
|
}
|
|
}
|
|
|
|
/* minified-sidebar */
|
|
|
|
.rb-system-admin .rb-icons {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 0;
|
|
z-index: 9998;
|
|
}
|
|
|
|
.rb-system-admin .rb-icon-minify {
|
|
color: #999;
|
|
cursor: pointer;
|
|
font-size: 17px;
|
|
height: 28px;
|
|
margin-top: 6px;
|
|
padding: 0;
|
|
right: -3px;
|
|
text-align: center;
|
|
width: 36px;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.rb-system-admin .rb-icon-minify .rb-icon:before {
|
|
content: "\f060";
|
|
}
|
|
|
|
.rb-system-admin .rb-icon-minify:hover .rb-icon:before {
|
|
color: #fff;
|
|
content: "\f0a8";
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin .rb-icon-minify {
|
|
border-radius: 0;
|
|
font-size: 23px;
|
|
height: 34px;
|
|
margin: 0;
|
|
position: relative;
|
|
right: -4px;
|
|
width: 100%;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin .rb-icon-minify .fa:before {
|
|
content: "\f061";
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin .rb-icon-minify:hover .fa:before {
|
|
content: "\f0a9";
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin {
|
|
overflow: visible;
|
|
width: 45px;
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.rb-minified-sidebar .rb-system-main {
|
|
margin-left: 45px;
|
|
}
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin .rb-buttons {
|
|
display: none !important;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li>a .menu-item-parent,
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li>a>b {
|
|
display: none;
|
|
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li>a>.menu-item-parent {
|
|
display: none;
|
|
height: 38px;
|
|
left: 40px;
|
|
line-height: 38px;
|
|
padding-left: 12px;
|
|
position: absolute;
|
|
top: -3px;
|
|
width: 186px;
|
|
z-index: 3;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin .menu-item-parent {
|
|
-moz-box-sizing: content-box;
|
|
-webkit-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin .rb-inbox-badge {
|
|
border-radius: 50%;
|
|
font-size: 9px;
|
|
min-width: 13px;
|
|
padding: 2px;
|
|
position: absolute;
|
|
right: 6px;
|
|
top: 6px;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin,
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li {
|
|
overflow: visible;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>ul {
|
|
max-height: 180px !important;
|
|
min-height: 100px !important;
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li,
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li a {
|
|
position: relative;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav ul>li>a {
|
|
display: block;
|
|
padding: 10px 11px !important;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li>a .fa.fa-fw {
|
|
display: block;
|
|
padding: 0;
|
|
text-align: center;
|
|
width: auto;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li>a>i {
|
|
display: block;
|
|
margin: 0;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li.active>a:before {
|
|
content: "";
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav ul ul li a {
|
|
padding-left: 14px;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav ul ul li li a {
|
|
padding-left: 25px;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul ul li::before,
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li>ul::before {
|
|
left: 12px;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li>a .menu-item-parent,
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li>a>b {
|
|
display: none;
|
|
}
|
|
|
|
.rb-system-admin .rb-minified-sidebar .rb-system-admin nav>ul>li>a>.menu-item-parent {
|
|
display: none;
|
|
height: 38px;
|
|
left: 40px;
|
|
line-height: 38px;
|
|
padding-left: 12px;
|
|
position: absolute;
|
|
top: -3px;
|
|
width: 186px;
|
|
z-index: 3;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li>ul {
|
|
display: none !important;
|
|
left: 40px;
|
|
margin-top: -3px;
|
|
min-height: 180px;
|
|
position: absolute;
|
|
width: 200px;
|
|
z-index: 5;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav ul>li>ul>li>ul {
|
|
border: none;
|
|
left: 13px;
|
|
margin-left: -12px;
|
|
position: relative;
|
|
width: 197px;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li:hover>a>.menu-item-parent,
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li:hover>ul {
|
|
display: block !important;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li>ul::before {
|
|
border-left: none !important;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul ul li::before {
|
|
border: none !important;
|
|
}
|
|
|
|
.rb-system-admin .slimScrollDiv,
|
|
.rb-system-admin .slimScrollDiv>:first-child {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin .slimScrollDiv,
|
|
.rb-minified-sidebar .rb-system-admin .slimScrollDiv>:first-child {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin .slimScrollBar,
|
|
.rb-minified-sidebar .rb-system-admin .slimScrollRail {
|
|
display: none;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li>ul>li>a,
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li>ul>li>ul>li>a {
|
|
padding-bottom: 7px;
|
|
padding-top: 7px;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav>ul>li>ul>li>ul>li a {
|
|
padding-bottom: 6px;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav ul ul ul ul li a {
|
|
padding-left: 45px;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav ul ul ul ul ul li a {
|
|
padding-left: 62px;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin nav ul ul ul ul ul ul li a {
|
|
padding-left: 82px;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin #rb-notification-name {
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 13px;
|
|
}
|
|
|
|
/* hide-sidebar > .rb-system-admin */
|
|
|
|
.rb-system-admin .rb-icon-hide {
|
|
color: #999;
|
|
cursor: pointer;
|
|
font-size: 19px;
|
|
height: 28px;
|
|
margin-top: 5px;
|
|
margin-right: 5px;
|
|
padding: 0;
|
|
right: 22px;
|
|
text-align: center;
|
|
width: 30px;
|
|
z-index: 9999;
|
|
-webkit-transition: all 0.1s linear 0s;
|
|
transition: all 0.1s linear 0s
|
|
}
|
|
|
|
.rb-system-admin .rb-icon-hide .rb-icon:before {
|
|
content: "\f00d";
|
|
}
|
|
|
|
.rb-system-admin .rb-icon-hide:hover .rb-icon:before {
|
|
content: "\f057";
|
|
}
|
|
|
|
.rb-hidden-system-admin .rb-system-admin .rb-icon-hide {
|
|
right: -3px;
|
|
}
|
|
|
|
.rb-hidden-system-admin .rb-system-admin .rb-icon-hide .rb-icon:before {
|
|
content: "\f08d";
|
|
}
|
|
|
|
.rb-hidden-system-admin .rb-system-admin .rb-icon-hide:hover .rb-icon:before {
|
|
color: #fff;
|
|
}
|
|
|
|
.rb-hidden-system-admin .rb-system-admin {
|
|
left: -215px;
|
|
z-index: 903;
|
|
}
|
|
|
|
.rb-hidden-system-admin .rb-system-main {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.rb-hidden-system-admin .rb-system-admin:hover {
|
|
left: 0;
|
|
z-index: 99999;
|
|
}
|
|
|
|
.rb-hidden-system-site .rb-system-site {
|
|
/*z-index:903;*/
|
|
right: -300px;
|
|
}
|
|
|
|
.rb-hidden-system-site .rb-system-main {
|
|
margin-right: 1px;
|
|
}
|
|
|
|
.rb-hidden-system-site .rb-system-site:hover {
|
|
right: 0;
|
|
z-index: 99999;
|
|
}
|
|
|
|
.rb-hidden-system-site .rb-system-site.open {
|
|
right: 0;
|
|
z-index: 99999;
|
|
}
|
|
|
|
.rb-hidden-system-site .rb-system-site.open .fa-caret-left:before {
|
|
content: "\f0da";
|
|
}
|
|
|
|
.rb-hidden-system-admin .rb-system-admin .rb-icon-minify,
|
|
.rb-minified-sidebar .rb-system-admin .rb-icon-hide,
|
|
.rb-minified-sidebar .rb-system-admin .rb-icon-hide {
|
|
display: none;
|
|
}
|
|
|
|
.rb-system-admin .btn-toolbar {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rb-system-admin .btn-toolbar .btn {
|
|
padding: 0 9px;
|
|
}
|
|
|
|
.rb-system-admin nav ul {
|
|
font-size: 13px;
|
|
line-height: 0.5em;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.rb-system-admin .rb-buttons {
|
|
border: solid transparent;
|
|
border-width: 1px 0;
|
|
}
|
|
|
|
.rb-system-admin .rb-buttons a:hover {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.rb-system-admin nav .list-group {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.rb-system-admin nav .list-group-item {
|
|
background-color: transparent;
|
|
border: none;
|
|
display: block;
|
|
margin-bottom: -1px;
|
|
padding: 0;
|
|
position: relative;
|
|
border-radius: 0
|
|
}
|
|
|
|
.rb-system-admin nav ul li:hover,
|
|
.rb-system-admin nav ul li:hover .menu-item-parent {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.rb-system-admin nav ul li {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rb-system-admin nav ul li a {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: normal;
|
|
padding: 10px 10px 10px 11px;
|
|
position: relative;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
#sidebar-modules .list-group-item a {
|
|
padding: .4rem .7rem;
|
|
font-size: 12px;
|
|
}
|
|
|
|
#sidebar-modules .list-group-item a i {
|
|
min-width: 1.2rem
|
|
}
|
|
|
|
#sidebar-modules nav>ul li.active>a.collapsed:before {
|
|
content: none
|
|
}
|
|
|
|
#sidebar-sites .list-group-item .rb-inframe {
|
|
width: 80%;
|
|
padding-right: 0;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
-o-text-overflow: ellipsis;
|
|
-ms-text-overflow: ellipsis;
|
|
}
|
|
|
|
#sidebar-sites .list-group-item .rb-blank {
|
|
opacity: 0;
|
|
}
|
|
|
|
#sidebar-sites .list-group-item .rb-blank a {
|
|
padding: 8px;
|
|
}
|
|
|
|
#sidebar-sites .list-group-item:hover .rb-blank {
|
|
opacity: 1
|
|
}
|
|
|
|
.rb-minified-sidebar #sidebar-sites .list-group-item .rb-blank {
|
|
display: none;
|
|
}
|
|
|
|
.rb-system-admin nav>ul>li>a>i {
|
|
/*width: 15px;*/
|
|
display: inline-block;
|
|
margin-right: 5px;
|
|
position: relative;
|
|
text-align: center;
|
|
}
|
|
|
|
.rb-system-admin nav ul span.menu-item-parent {
|
|
display: inline-block;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.rb-system-admin nav>ul>li>a b {
|
|
position: absolute !important;
|
|
right: 10px;
|
|
top: 10px;
|
|
}
|
|
|
|
.rb-system-admin nav ul b {
|
|
float: right;
|
|
font-size: 11px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.rb-system-admin nav ul ul {
|
|
margin: 0;
|
|
padding: 7px 0;
|
|
}
|
|
|
|
.rb-system-admin nav>ul>li>ul::before {
|
|
bottom: 0;
|
|
content: "";
|
|
display: block;
|
|
left: 17px;
|
|
position: absolute;
|
|
top: -8px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rb-system-admin nav ul ul li {
|
|
position: relative;
|
|
}
|
|
|
|
.rb-system-admin nav ul ul li>a {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
outline: 0;
|
|
padding-left: 42px;
|
|
}
|
|
|
|
.rb-system-admin nav>ul li.active>a.collapsed:before {
|
|
content: "\f0d9";
|
|
display: block;
|
|
font-family: FontAwesome;
|
|
font-size: 14px;
|
|
height: 27px;
|
|
line-height: normal;
|
|
position: absolute;
|
|
top: 14px;
|
|
right: -21px;
|
|
width: 27px;
|
|
}
|
|
|
|
.rb-system-admin nav>ul li.active>a:before {
|
|
content: "";
|
|
}
|
|
|
|
.rb-system-admin nav>ul li.active ul li.active>a:before {
|
|
content: "\f0d9";
|
|
display: block;
|
|
font-family: FontAwesome;
|
|
font-size: 20px;
|
|
height: 27px;
|
|
line-height: normal;
|
|
position: absolute;
|
|
right: -21px;
|
|
width: 27px;
|
|
}
|
|
|
|
.rb-system-admin nav ul li.panel {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.rb-system-sidebar .rb-content-padded {
|
|
padding: 9px 10px;
|
|
}
|
|
|
|
.rb-system-admin nav ul li.active.open>a:before {
|
|
content: "";
|
|
}
|
|
|
|
.rb-system-admin nav>ul ul li:before {
|
|
content: "";
|
|
display: block;
|
|
left: 19px;
|
|
position: absolute;
|
|
top: 17px;
|
|
width: 8px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.rb-system-admin nav>ul>li>a>i>em {
|
|
border-radius: 50%;
|
|
display: block;
|
|
font-size: 9px;
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
line-height: 8px;
|
|
max-height: 13px;
|
|
min-width: 13px;
|
|
padding: 2px;
|
|
position: absolute;
|
|
right: -6px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
top: -8px;
|
|
vertical-align: baseline;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rb-system-admin .rb-buttons .dropdown-toggle::after {
|
|
display: none
|
|
}
|
|
|
|
|
|
/* rb-fixed-sidebar */
|
|
|
|
.rb-fixed-sidebar .rb-system-admin {
|
|
height: 100%;
|
|
overflow-y: hidden;
|
|
position: fixed;
|
|
}
|
|
|
|
.rb-fixed-sidebar .rb-system-admin .tab-content {
|
|
-webkit-overflow-scrolling: touch;
|
|
height: 100%;
|
|
max-height: calc(100vh - 255px);
|
|
max-height: -moz-calc(100vh - 255px);
|
|
max-height: -webkit-calc(100vh - 255px);
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
padding-bottom: 15px;
|
|
padding-right: 14px;
|
|
padding-top: 0;
|
|
position: relative;
|
|
width: 114%;
|
|
}
|
|
|
|
/* Mac OS Hack */
|
|
.mac-os .rb-system-admin .tab-content {
|
|
width: 107%;
|
|
}
|
|
|
|
.rb-minified-sidebar.rb-fixed-sidebar .rb-system-admin {
|
|
overflow-y: visible;
|
|
}
|
|
|
|
.rb-minified-sidebar.rb-fixed-sidebar .rb-system-admin .tab-content {
|
|
-webkit-overflow-scrolling: none;
|
|
height: auto;
|
|
overflow: visible;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.rb-minified-sidebar.rb-fixed-sidebar .rb-system-admin .tab-content {
|
|
overflow: visible;
|
|
padding-right: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
|
|
/* tabs-below */
|
|
|
|
.rb-system-admin .nav-tabs {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.rb-system-admin .nav-tabs>li>a {
|
|
-moz-border-radius: 1px 1px 0 0 !important;
|
|
-webkit-border-radius: 1px 1px 0 0 !important;
|
|
border-radius: 1px 1px 0 0 !important;
|
|
border-right: 1px solid transparent;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
padding-bottom: 12px;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
@media (min-width:992px) {
|
|
.rb-system-admin .nav-tabs>li:last-child>a {
|
|
-moz-border-radius: 1px 4px 0 0;
|
|
-webkit-border-radius: 1px 4px 0 0;
|
|
border-radius: 1px 4px 0 0;
|
|
}
|
|
|
|
}
|
|
|
|
.rb-system-admin .nav-tabs>li.active>a,
|
|
.rb-system-admin .nav-tabs>li.active>a:hover,
|
|
.rb-system-admin .nav-tabs>li.active>a:focus {
|
|
border-bottom-color: transparent;
|
|
border-right: 1px solid transparent;
|
|
filter: none;
|
|
}
|
|
|
|
.rb-system-admin .nav-tabs>li>a,
|
|
|
|
.nav-pills>li>a {
|
|
margin-right: 0;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
.rb-system-admin .tabs-below>.nav-tabs {
|
|
border-bottom-width: 0;
|
|
margin-bottom: 0;
|
|
margin-top: -1px;
|
|
top: auto;
|
|
width: 220px;
|
|
}
|
|
|
|
.rb-system-admin .tabs-below>.nav-tabs>li.active>a,
|
|
.rb-system-admin .tabs-below>.nav-tabs>li.active>a:hover,
|
|
.rb-system-admin .tabs-below>.nav-tabs>li.active>a:focus {
|
|
background-color: transparent;
|
|
border-bottom: 2px solid transparent;
|
|
border-color: transparent;
|
|
border-radius: 0;
|
|
border-top-color: transparent;
|
|
border-top-width: 1px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.rb-system-admin .btn {
|
|
border-radius: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.rb-system-admin .btn-sm,
|
|
.rb-system-admin .btn-group-sm>.btn {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin .nav-tabs {
|
|
display: none;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin-quick {
|
|
display: block !important;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin-sites,
|
|
.rb-minified-sidebar .rb-system-admin-modules {
|
|
display: none !important;
|
|
}
|
|
|
|
.rb-system-admin .nav-tabs {
|
|
bottom: 0;
|
|
position: absolute;
|
|
width: 220px;
|
|
}
|
|
|
|
.rb-system-admin nav .rb-icon:before {
|
|
content: "\f147";
|
|
}
|
|
|
|
.rb-system-admin nav .collapsed .rb-icon:before {
|
|
content: "\f196";
|
|
}
|
|
|
|
|
|
/*login-info*/
|
|
|
|
.container .login-info,
|
|
.rb-system-admin .login-info {
|
|
border: solid transparent;
|
|
border-width: 1px 0;
|
|
display: block;
|
|
font-size: 12px;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.container .login-info a,
|
|
.rb-system-admin .login-info a {
|
|
display: block;
|
|
margin-top: 4px;
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.container .login-info a span,
|
|
.rb-system-admin .login-info a span {
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
max-width: 150px;
|
|
overflow: hidden;
|
|
text-decoration: none;
|
|
text-overflow: ellipsis;
|
|
text-transform: capitalize;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.login-info a span+i {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.container .login-info>span,
|
|
.rb-system-admin .login-info>span {
|
|
display: block;
|
|
height: 32px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.container .login-info img,
|
|
.rb-system-admin .login-info img {
|
|
display: inline-block;
|
|
height: auto;
|
|
margin-left: 0;
|
|
margin-right: 5px;
|
|
margin-top: 1px;
|
|
vertical-align: middle;
|
|
width: 25px;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin .login-info a i,
|
|
.rb-minified-sidebar .rb-system-admin .login-info a span {
|
|
display: none;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin .login-info span {
|
|
padding: 0 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin .login-info img {
|
|
margin: -2px 0 0;
|
|
width: 27px;
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-system-admin .login-info {
|
|
border-bottom: 1px solid #181818;
|
|
height: 38px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.rb-rabel {
|
|
display: block;
|
|
cursor: pointer;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/*기타*/
|
|
|
|
#devices {
|
|
bottom: 20px;
|
|
left: 50%;
|
|
margin-left: -125px;
|
|
position: fixed;
|
|
width: 250px;
|
|
z-index: 1000000;
|
|
}
|
|
|
|
|
|
/* opener */
|
|
.rb-opener {
|
|
display: none;
|
|
font-size: 16px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
margin-top: -30px;
|
|
position: absolute;
|
|
top: 13%;
|
|
width: 21px;
|
|
}
|
|
|
|
.rb-hidden-system-site .rb-system-site .rb-opener {
|
|
background-color: #fff;
|
|
border-bottom-left-radius: 2px;
|
|
border-top-left-radius: 2px;
|
|
box-shadow: -1px 0 2px rgba(0, 0, 0, 0.5);
|
|
color: #666;
|
|
display: block;
|
|
left: -20px;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
#site-settings .rb-scrollbar {
|
|
position: absolute;
|
|
top: 64px;
|
|
left: 10px;
|
|
right: 0;
|
|
bottom: 60px;
|
|
padding-top: 15px;
|
|
padding-right: 5px;
|
|
overflow: auto;
|
|
margin-bottom: 0;
|
|
padding-bottom: 15px;
|
|
overflow-x: hidden;
|
|
}
|
|
#site-settings .rb-tab-pane-bottom,
|
|
#main-settings .rb-tab-pane-bottom {
|
|
height: 60px;
|
|
}
|
|
|
|
#layout-settings .rb-scrollbar {
|
|
position: absolute;
|
|
top: 64px;
|
|
left: 10px;
|
|
right: 0;
|
|
bottom: 60px;
|
|
padding-top: 15px;
|
|
padding-right: 5px;
|
|
overflow: auto;
|
|
margin-bottom: 0;
|
|
padding-bottom: 15px;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#layout-settings .rb-tab-pane-bottom {
|
|
height: 60px;
|
|
}
|
|
|
|
#emuldevices {
|
|
position: absolute;
|
|
top: 218px;
|
|
bottom: 175px;
|
|
left: 7px;
|
|
right: 0;
|
|
padding-right: 0;
|
|
padding-bottom: 5px;
|
|
overflow: auto;
|
|
}
|
|
|
|
#emuldevices .table {
|
|
font-size: 12px;
|
|
}
|
|
|
|
#emuldevices tr {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#emuldevices .rb-brand,
|
|
#emuldevices .rb-viewport {
|
|
text-align: center;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
#emuldevices .table tbody tr.active td,
|
|
#emuldevices .table tbody tr.active th {
|
|
color: #fff;
|
|
background-color: #007bff;
|
|
}
|
|
|
|
#emuldevices .table var {
|
|
font-style: normal;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
.rb-tab-pane-bottom {
|
|
position: absolute;
|
|
height: 175px;
|
|
bottom: 0;
|
|
top: auto;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 10px 15px;
|
|
margin-bottom: 0;
|
|
border-radius: 0;
|
|
border: none;
|
|
border-top: 1px solid rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
.rb-tab-pane-bottom .list-group {
|
|
margin: -10px -15px;
|
|
border: none;
|
|
box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
border-radius: 0
|
|
}
|
|
|
|
.rb-tab-pane-bottom .list-group-item {
|
|
background-color: transparent;
|
|
border-left: none;
|
|
border-right: none;
|
|
}
|
|
|
|
.rb-tab-pane-bottom .list-group-item fieldset[disabled] label {
|
|
color: #999;
|
|
}
|
|
|
|
.rb-tab-pane-bottom .list-group-item:first-child {
|
|
border-top: none;
|
|
border-top-left-radius: none;
|
|
border-top-right-radius: none;
|
|
}
|
|
|
|
.rb-tab-pane-bottom .list-group-item:last-child {
|
|
margin-bottom: 0;
|
|
border-bottom: none;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.rb-tab-pane-bottom .list-group-item .checkbox {
|
|
margin-top: 0;
|
|
margin-bottom: 0
|
|
}
|
|
|
|
|
|
/*scrollbar*/
|
|
|
|
.rb-scrollbar::-webkit-scrollbar {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
|
|
.rb-scrollbar::-webkit-scrollbar-thumb {
|
|
opacity: 0.0;
|
|
}
|
|
|
|
.rb-scrollbar:hover::-webkit-scrollbar-thumb {
|
|
opacity: 0.7;
|
|
background: #8B8B8D;
|
|
border-radius: 20px;
|
|
-webkit-transition: all 2s ease-in-out;
|
|
transition: all 2s ease-in-out
|
|
}
|
|
|
|
body {
|
|
background-color: #EEEEEE
|
|
}
|
|
|
|
body,
|
|
html {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.rb-system-main {
|
|
margin-right: 300px;
|
|
}
|
|
|
|
.rb-system-site {
|
|
right: 0;
|
|
width: 300px;
|
|
-webkit-transition: 250ms cubic-bezier(0.1, .57, .1, 1);
|
|
transition: 250ms cubic-bezier(0.1, .57, .1, 1);
|
|
-webkit-transform: translate(0px, 0) translateZ(0px);
|
|
-ms-transform: translate(0px, 0) translateZ(0px);
|
|
transform: translate(0px, 0) translateZ(0px);
|
|
}
|
|
|
|
.rb-system-site.rb-default {
|
|
background-color: #fff
|
|
}
|
|
|
|
.rb-system-site .rb-panel-top {
|
|
background-color: #DFDFDF;
|
|
/*background-color: #222;*/
|
|
border-bottom: 1px solid #A3A3A3;
|
|
/*border-bottom: 1px solid #000;*/
|
|
height: 25px;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.rb-system-site h1 {
|
|
color: #ccc;
|
|
font-size: 13px;
|
|
text-transform: capitalize;
|
|
padding-top: 30px;
|
|
margin: 0 0 13px
|
|
}
|
|
|
|
.rb-system-site .panel-title a {
|
|
display: block;
|
|
text-decoration: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
.rb-system-site .panel-title .collapsed {
|
|
font-weight: normal;
|
|
color: inherit;
|
|
}
|
|
|
|
|
|
/* rb-icon */
|
|
|
|
.rb-system-site .card+.card {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.rb-system-site .card-header {
|
|
padding: 10px 15px;
|
|
/*border-bottom: 1px solid transparent;*/
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
}
|
|
|
|
.rb-system-site .card-header a {
|
|
display: block;
|
|
color: inherit;
|
|
}
|
|
|
|
.rb-system-site .card-header a:hover {
|
|
text-decoration: none
|
|
}
|
|
|
|
.rb-system-site .card-header i {
|
|
font-family: FontAwesome;
|
|
margin-left: -5px;
|
|
margin-right: 5px;
|
|
font-style: normal;
|
|
}
|
|
|
|
.rb-system-site .card-header i:before {
|
|
float: right;
|
|
content: "\f0d7"
|
|
}
|
|
|
|
.rb-system-site .card-header .collapsed i:before {
|
|
float: right;
|
|
content: "\f0da"
|
|
}
|
|
|
|
.rb-system-site .rb-icon-minify {
|
|
text-align: center;
|
|
padding: 0;
|
|
width: 36px;
|
|
height: 28px;
|
|
display: block;
|
|
position: absolute;
|
|
left: -3px;
|
|
top: 5px;
|
|
border-radius: 5px 0 0 5px;
|
|
cursor: pointer;
|
|
margin-top: 5px;
|
|
font-size: 19px;
|
|
transition: all .1s linear 0s;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.rb-system-site .rb-hide-sidebar {
|
|
text-align: center;
|
|
padding: 0;
|
|
width: 36px;
|
|
height: 28px;
|
|
display: block;
|
|
position: absolute;
|
|
left: 25px;
|
|
top: 5px;
|
|
border-radius: 5px 0 0 5px;
|
|
cursor: pointer;
|
|
margin-top: 5px;
|
|
font-size: 19px;
|
|
z-index: 9999;
|
|
-webkit-transition: all .1s linear 0s;
|
|
transition: all .1s linear 0s
|
|
}
|
|
|
|
.rb-system-site .rb-device-buttons {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.rb-system-site .btn-group label {
|
|
margin-bottom: 0
|
|
}
|
|
|
|
.rb-system-site .rb-device-buttons .btn-light {
|
|
color: #666
|
|
}
|
|
|
|
.rb-system-site .rb-device-buttons .btn {
|
|
width: 33.3%
|
|
}
|
|
|
|
.rb-system-site .rb-icon-hide {
|
|
text-align: center;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
line-height: 24px;
|
|
z-index: 9999;
|
|
color: #676767;
|
|
-webkit-transition: all .1s linear 0s;
|
|
transition: all .1s linear 0s
|
|
}
|
|
|
|
.rb-system-site .rb-icon-hide .rb-icon:before {
|
|
content: "\f00d";
|
|
}
|
|
|
|
.rb-system-site .rb-icon-hide:hover .rb-icon:before {
|
|
content: "\f057";
|
|
font-size: 17px;
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
margin-left: -2px;
|
|
color: #222;
|
|
}
|
|
|
|
.rb-hidden-system-site .rb-system-site .rb-icon-hide .rb-icon:before {
|
|
content: "\f08d";
|
|
font-size: 17px;
|
|
display: inline-block;
|
|
margin-top: 4px;
|
|
margin-left: -2px;
|
|
}
|
|
|
|
.rb-hidden-system-site .rb-system-site .rb-icon-hide:hover .rb-icon:before {
|
|
color: #333;
|
|
}
|
|
|
|
|
|
/*테마*/
|
|
.rb-system-site .btn-light.active {
|
|
background-color: #2d6ca2;
|
|
border-color: #2b669a;
|
|
color: #fff;
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
|
|
}
|
|
|
|
.rb-system-site fieldset[disabled] .btn-light,
|
|
.rb-system-site fieldset[disabled] .btn-light.active {
|
|
background-color: #eee;
|
|
color: #999;
|
|
text-shadow: none;
|
|
background-image: -webkit-linear-gradient(top, #fff 0, #e0e0e0 100%);
|
|
background-image: -o-linear-gradient(top, #fff 0, #e0e0e0 100%);
|
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
|
|
background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
|
}
|
|
|
|
.rb-system-main {
|
|
position: fixed;
|
|
overflow: visible;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100%;
|
|
-webkit-transition-property: left, right, top, bottom, width, margin;
|
|
transition-property: left, right, top, bottom, width, margin;
|
|
-webkit-transition-duration: .2s;
|
|
transition-duration: .2s;
|
|
}
|
|
|
|
.rb-full-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.rb-full-overlay-main {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
#site-preview {
|
|
-webkit-transition: all .2s;
|
|
transition: all .2s
|
|
}
|
|
|
|
#site-preview.desktop,
|
|
#site-preview.tablet,
|
|
#site-preview.mobile {
|
|
background: #ADADAD;
|
|
}
|
|
|
|
|
|
|
|
#site-preview iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 0;
|
|
-webkit-transition: all ease 1s;
|
|
-moz-transition: all ease 1s;
|
|
transition: all ease 1s;
|
|
}
|
|
|
|
#site-preview.desktop iframe {
|
|
display: block;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
#site-preview.tablet iframe {
|
|
display: block;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
#site-preview.mobile iframe {
|
|
display: block;
|
|
margin: 0 auto;
|
|
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.rb-devices-change {
|
|
left: 220px;
|
|
right: 300px
|
|
}
|
|
|
|
.rb-minified-sidebar .rb-devices-change {
|
|
left: 45px;
|
|
right: 300px
|
|
}
|
|
|
|
.rb-hidden-sidebar .rb-devices-change {
|
|
left: 10px;
|
|
right: 300px
|
|
}
|
|
|
|
.rb-devices-change {
|
|
min-height: 10px;
|
|
background-image: none;
|
|
background-color: #ADADAD;
|
|
border-color: #999;
|
|
}
|
|
|
|
.rb-devices-change .navbar-btn {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.rb-devices-change .active {
|
|
color: #fff;
|
|
background-color: #222;
|
|
}
|
|
|
|
.rb-devices-change .navbar-form {
|
|
padding: 0 10px;
|
|
margin-top: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.rb-devices-change .form-group {
|
|
margin: 0;
|
|
padding: 0
|
|
}
|
|
|
|
.rb-devices-change button:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.rb-devices-change .rb-mobile i:before {
|
|
font-family: FontAwesome;
|
|
content: "\f096";
|
|
font-style: normal;
|
|
padding-right: 5px
|
|
}
|
|
|
|
.rb-devices-change .rb-mobile.active i:before {
|
|
font-family: FontAwesome;
|
|
content: "\f046";
|
|
font-style: normal;
|
|
padding-right: 5px
|
|
}
|
|
|
|
.rb-table {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: table;
|
|
}
|
|
|
|
.rb-table-cell {
|
|
display: table-cell;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
height: 100%
|
|
}
|
|
|
|
/*tooltip*/
|
|
.tooltip {
|
|
z-index: 99999999
|
|
}
|
|
|
|
|
|
/*popover*/
|
|
|
|
.popover {
|
|
padding: 0;
|
|
z-index: 99999999
|
|
}
|
|
|
|
.popover .popover-title {
|
|
color: rgb(255, 255, 255);
|
|
background: rgb(63, 66, 75);
|
|
}
|
|
|
|
/* ------------------ modal close --------------------*/
|
|
.rb-close-white {
|
|
color: #fff;
|
|
text-shadow: 0 1px 0 #ffffff;
|
|
opacity: 1;
|
|
filter: alpha(opacity=100);
|
|
line-height: 30px;
|
|
}
|
|
|
|
.datepicker {
|
|
z-index: 1151 !important;
|
|
}
|
|
|
|
/* 유틸리티 */
|
|
.f13 {
|
|
font-size: 13px !important
|
|
}
|
|
|
|
.f12 {
|
|
font-size: 12px !important
|
|
}
|
|
|
|
/* submit button loading */
|
|
[role="button"] .not-loading,
|
|
.btn .not-loading {
|
|
display: block;
|
|
}
|
|
[role="button"].disabled .not-loading,
|
|
[role="button"]:disabled .not-loading,
|
|
.btn:disabled .not-loading {
|
|
display: none;
|
|
}
|
|
[role="button"] .is-loading,
|
|
.btn .is-loading {
|
|
display: none;
|
|
}
|
|
[role="button"].disabled .is-loading,
|
|
[role="button"]:disabled .is-loading,
|
|
.btn:disabled .is-loading {
|
|
display: block;
|
|
}
|
|
|
|
/* 메인화면 편집 */
|
|
[data-role="widgetPage"] .card.active {
|
|
background: #f2fbff;
|
|
border-color: #d2d1d1
|
|
}
|
|
|
|
[data-role="widgetPage"] .card-body {
|
|
padding: 10px 15px;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
background-color: rgba(0,0,0,.03);
|
|
}
|
|
|
|
[data-role="widgetPage"] .dd-item .badge {
|
|
display: none;
|
|
position: absolute;
|
|
width: 19px;
|
|
height: 16px;
|
|
border-radius: 0
|
|
}
|
|
|
|
[data-role="widgetPage"] .dd-item:hover .badge {
|
|
display: inline-block;
|
|
}
|
|
|
|
.dd-dragel .dd-item .badge {
|
|
display: none
|
|
}
|
|
|
|
[data-role="widgetPage"] .dd-item .badge[data-act="remove"] {
|
|
right: 5px;
|
|
top: 5px;
|
|
}
|
|
[data-role="widgetPage"] .dd-item .badge[data-act="move"] {
|
|
left: 5px;
|
|
top: 5px;
|
|
cursor: pointer;
|
|
}
|
|
[data-role="addWidget"] .card {
|
|
display: none
|
|
}
|
|
[data-role="addWidget"].active .card {
|
|
display: block
|
|
}
|
|
[data-role="addWidget"].active .btn {
|
|
display: none
|
|
}
|
|
|
|
.card-placeholder {
|
|
margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box;
|
|
}
|
|
|
|
/**
|
|
* Nestable
|
|
*/
|
|
.dd { }
|
|
.dd-list { display: block; position: relative; list-style: none; }
|
|
.dd-list .dd-list { }
|
|
.dd-collapsed .dd-list { display: none; }
|
|
.dd-item,
|
|
.dd-empty,
|
|
.dd-placeholder { }
|
|
|
|
|
|
.dd-placeholder,
|
|
.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
|
|
.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
|
|
background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
|
|
-webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
|
|
background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
|
|
-moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
|
|
background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
|
|
linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
|
|
background-size: 60px 60px;
|
|
background-position: 0 0, 30px 30px;
|
|
}
|
|
.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
|
|
.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
|
|
.dd-dragel .dd-handle {
|
|
-webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
|
|
box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
|
|
}
|
|
|
|
|
|
/*animation : https://daneden.github.io/animate.css/ */
|
|
|
|
.anim-fade-in {
|
|
-webkit-animation-name: fade-in;
|
|
animation-name: fade-in;
|
|
-webkit-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-timing-function: ease-in-out;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
.animated {
|
|
-webkit-animation-duration: 1s;
|
|
-o-animation-duration: 1s;
|
|
animation-duration: 1s;
|
|
-webkit-animation-fill-mode: both;
|
|
-o-animation-fill-mode: both;
|
|
animation-fill-mode: both;
|
|
}
|
|
|
|
.animated.infinite {
|
|
-webkit-animation-iteration-count: infinite;
|
|
-o-animation-iteration-count: infinite;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
.animated.fadeInUp,
|
|
.animated.fadeInDown,
|
|
.animated.fadeOutUp,
|
|
.animated.fadeOutDown {
|
|
-webkit-animation-duration: .5s;
|
|
-o-animation-duration: .5s;
|
|
animation-duration: .5s;
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.fadeIn {
|
|
-webkit-animation-name: fadeIn;
|
|
-o-animation-name: fadeIn;
|
|
animation-name: fadeIn;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-o-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
-o-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.fadeInUp {
|
|
-webkit-animation-name: fadeInUp;
|
|
-o-animation-name: fadeInUp;
|
|
animation-name: fadeInUp;
|
|
}
|
|
|
|
@-webkit-keyframes fadeInDown {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeInDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-o-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInDown {
|
|
from {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
-webkit-transform: none;
|
|
-o-transform: none;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.fadeInDown {
|
|
-webkit-animation-name: fadeInDown;
|
|
-o-animation-name: fadeInDown;
|
|
animation-name: fadeInDown;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.fadeOut {
|
|
-webkit-animation-name: fadeOut;
|
|
-o-animation-name: fadeOut;
|
|
animation-name: fadeOut;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutUp {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutUp {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutUp {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, -100%, 0);
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
}
|
|
|
|
.fadeOutUp {
|
|
-webkit-animation-name: fadeOutUp;
|
|
-o-animation-name: fadeOutUp;
|
|
animation-name: fadeOutUp;
|
|
}
|
|
|
|
@-webkit-keyframes fadeOutDown {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes fadeOutDown {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOutDown {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 100%, 0);
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
}
|
|
|
|
.fadeOutDown {
|
|
-webkit-animation-name: fadeOutDown;
|
|
-o-animation-name: fadeOutDown;
|
|
animation-name: fadeOutDown;
|
|
}
|
|
|
|
.delay-1 {
|
|
-webkit-animation-delay: 0.1s;
|
|
-o-animation-delay: 0.1s;
|
|
animation-delay: 0.1s;
|
|
}
|
|
|
|
.delay-2 {
|
|
-webkit-animation-delay: 0.25s;
|
|
-o-animation-delay: 0.25s;
|
|
animation-delay: 0.25s;
|
|
}
|
|
|
|
.delay-3 {
|
|
-webkit-animation-delay: 0.4s;
|
|
-o-animation-delay: 0.4s;
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.animate-bg {
|
|
-moz-animation: animate-highlight 2s ease 0s 1 alternate ;
|
|
-webkit-animation: animate-highlight 2s ease 0s 1 alternate;
|
|
animation: animate-highlight 2s ease 0s 1 alternate;
|
|
}
|
|
@-webkit-keyframes animate-highlight {
|
|
from { background-color: #F5FFFE;}
|
|
to {background-color: white;}
|
|
}
|
|
@-moz-keyframes animate-highlight {
|
|
from { background-color: #F5FFFE;}
|
|
to {background-color: white;}
|
|
}
|
|
@-keyframes animate-highlight {
|
|
from { background-color: #F5FFFE;}
|
|
to {background-color: white;}
|
|
}
|