app/assets/stylesheets/backend/main.scss in mokio-0.0.15 vs app/assets/stylesheets/backend/main.scss in mokio-2.0.8
- old
+ new
@@ -19,15 +19,15 @@
}
/*Switcher styles (Remove it in production site)*/
#switcher {
display: none;
- position: fixed;
- right:0; top:160px;
- width: 120px;
- height: auto;
- z-index: 9999;
+ position: fixed;
+ right:0; top:160px;
+ width: 120px;
+ height: auto;
+ z-index: 9999;
padding:5px;
padding-left: 10px;
border: 2px solid #c4c4c4;
border-right: none;
background: rgb(255,255,255);
@@ -54,14 +54,14 @@
margin-right: 3px;
margin-bottom: 3px;
}
#swithcher img {width: 20px !important; height: 20px !important;}
#switchBtn {
- position: fixed;
+ position: fixed;
right:-2px; top:160px;
padding: 10px 5px;
- z-index: 99999;
+ z-index: 99999;
border: 2px solid #c4c4c4;
border-right: 1px solid transparent;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
@@ -223,11 +223,11 @@
.strong {font-weight: 700;}
a,.btn {outline: none !important;}
-/* Typography
+/* Typography
-------------------------------------------------- */
li {margin-bottom:7px;}
a {
color: #ff4057;
@@ -237,16 +237,16 @@
color: #ee1a33;
text-decoration: none;
}
body {
- font-family: 'Open Sans',
- Helvetica, Arial, sans-serif;
- color:#353535;
+ font-family: 'Open Sans',
+ Helvetica, Arial, sans-serif;
+ color:#353535;
font-size: 13px;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
- -webkit-text-size-adjust: 100%;
+ -webkit-text-size-adjust: 100%;
font-size-adjust: 100%;
font-weight: 400;
/*-webkit-text-stroke: 100%;*/
}
@@ -293,18 +293,18 @@
/*Change here if you want to use other fonts*/
#top-nav a, h1,h2,h3,h4,h5,h6 {font-family: 'Open Sans', sans-serif;}
body, p {font-family: 'Open Sans', Helvetica, Arial, sans-serif;}
-
+
/* Boostrap override (make it pretty :)
================================================== */
/*Page header*/
.page-header {
- padding-bottom: 0;
- margin-top:9px;
+ padding-bottom: 0;
+ margin-top:9px;
border-color: #c4c4c4;
-moz-box-shadow:0 1px 0px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
}
@@ -457,11 +457,11 @@
/*Labels & badge fix*/
.label {padding: 2px 4px 2px;}
.badge {padding-top: 2px; padding-bottom: 2px;}
.tab-content {
- background-color: #fff;
+ background-color: #fff;
padding:15px;
border-left:1px solid #c4c4c4;
border-bottom:1px solid #c4c4c4;
border-right:1px solid #c4c4c4;
border-bottom-left-radius: 2px;
@@ -470,11 +470,11 @@
border-bottom-right-radius: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-bottom-right-radius: 2px;
}
.nav-tabs {
- margin-bottom: 0;
+ margin-bottom: 0;
border-color: #c4c4c4;
background: #fff;
border-top:1px solid #c4c4c4;
border-right:1px solid #c4c4c4;
border-left:1px solid #c4c4c4;
@@ -507,22 +507,22 @@
border-bottom:2px solid #fff;
margin-left:-1px;
border-top: 1px solid transparent;
}
.nav-tabs > li > a {
- margin-left:-1px;
- margin-right: -1px;
+ margin-left:-1px;
+ margin-right: -1px;
border-right: 1px solid #c4c4c4;
border-left: 1px solid transparent;
- border-radius: 0;
- -moz-border-radius:0;
+ border-radius: 0;
+ -moz-border-radius:0;
-webkit-border-radius:0;
}
-.nav-tabs > li > a:hover {
+.nav-tabs > li > a:hover {
border-color: transparent #c4c4c4 transparent #c4c4c4;
- border-radius: 0;
- -moz-border-radius:0;
+ border-radius: 0;
+ -moz-border-radius:0;
-webkit-border-radius:0;
}
.nav-tabs > li:first-child > a:hover {
-webkit-border-radius: 0 0 0 2px;
@@ -558,11 +558,11 @@
margin-bottom:-1px;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
-
+
}
.tabs-below > .nav-tabs > li {margin-bottom:-1px;}
.tabs-below > .nav-tabs > li > a:hover { border-color: #c4c4c4 #c4c4c4 #c4c4c4 #c4c4c4;}
.tabs-left > .nav-tabs {
@@ -605,12 +605,12 @@
-moz-border-radius: 2px 0 0 2px;
border-radius: 2px 0 0 2px;
}
.tabs-left > .nav-tabs > li.active:first-child a {border-top: 1px solid transparent;}
-.tabs-right > .nav-tabs {
- margin-left: -1px;
+.tabs-right > .nav-tabs {
+ margin-left: -1px;
border-left: 1px solid #c4c4c4;
-webkit-border-radius: 0 2px 2px 0;
-moz-border-radius: 0 2px 2px 0;
border-radius: 0 2px 2px 0;
border-bottom: 1px solid #c4c4c4;
@@ -683,11 +683,11 @@
/*Labels*/
.label {padding: 2px 4px 2px;}
/*Accordion style*/
.accordion .accordion-group {
- margin-bottom: 0px;
+ margin-bottom: 0px;
border: 1px solid #c4c4c4;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-top: -1px;
@@ -739,11 +739,11 @@
z-index: 1;
}
.progress .bar {
z-index: 2;
- height:13px;
+ height:13px;
border: 1px solid #439db8;
box-shadow: 0 1px 0 #55cbee inset;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
@@ -862,11 +862,11 @@
background: transparent;
border: none;
}
.pagination li>span {
- margin: 0px 8px 0 7px !important;
+ margin: 0px 8px 0 7px !important;
padding:0 5px 0 5px !important;
float:left !important;
display: inline-block !important;
border:none !important;
background: transparent !important;
@@ -1205,24 +1205,24 @@
.dropdown-menu .menu .notif li.header {padding-top:10px; padding-bottom: 8px;}
.dropdown-menu .notif .event {padding-top: 7px;padding-bottom: 5px;display: block; margin-right: 5px;}
.dropdown-menu .menu .notif li.view-all {line-height: 28px; padding-top: 5px !important; padding-bottom: 5px !important;}
.dropdown-menu .menu ul li a .icon {margin-bottom: 0px;}
.dropdown-menu .icon.avatar {padding: 2px 1px 9px 2px;}
- .dropdown-menu .name {float: left;width:168px;}
+ .dropdown-menu .name {float: left;width:168px;}
.dropdown-menu .messages {min-width: 210px;}
- .dropdown-menu .messages a {padding: 0;}
+ .dropdown-menu .messages a {padding: 0;}
.dropdown-menu .messages .time {
font-size:8px; text-transform: uppercase;
float:right;
padding-top:0px;
margin-top: -13px;
}
.dropdown-menu .msg {
width:190px;
clear: both;
color:#6e6e6e;
- }
+ }
.dropdown-menu .view-all {width:100%; text-align:center; padding-bottom: 8px !important; padding-top: 8px !important;}
.dropdown-menu .header {font-size:13px;}
.dropdown-menu li > a {padding:5px 1px;}
@@ -1253,11 +1253,11 @@
/*Notification styles*/
/*Red style*/
.notification {
- padding:0px 7px 0px 7px;
+ padding:0px 7px 0px 7px;
color:#fff;
background: #ed7a53;
border-radius:2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
@@ -1535,23 +1535,24 @@
float: right;
z-index: 1;
position: relative;
}
- .search {
+ .search {
float: right;
position: relative;
}
.search form {
margin-bottom: 0;
margin-right: -5px;
}
.search .top-search {
width:75%;
- margin: 10px;
+ margin: 7px;
border-color: #d9d7d7;
padding-left:25px;
+ height: 35px;
}
.search .search-btn {
background: image-url('backend/search.png') no-repeat;
border: none;
width:20px;
@@ -1699,11 +1700,11 @@
right: -3px;
position: absolute;
height: 20px;
background: none;
}
-
+
.mainnav ul li .sub li a:nth-child(2) span {
width: 20px;
height:20px;
margin:0;
padding:0;
@@ -1782,12 +1783,12 @@
}
h4 .label {float: right; margin-right: 40px;}
h4 .badge {float: right; margin-right: 40px;}
- .box .title span[class*=" icon-"], .box .title span[class*=" brocco-icon-"], .box .title span[class*=" cut-icon-"],
- .box .title span[class*=" entypo-icon-"], .box .title span[class*=" icomoon-icon-"], .box .title span[class*=" minia-icon-"],
+ .box .title span[class*=" icon-"], .box .title span[class*=" brocco-icon-"], .box .title span[class*=" cut-icon-"],
+ .box .title span[class*=" entypo-icon-"], .box .title span[class*=" icomoon-icon-"], .box .title span[class*=" minia-icon-"],
.box .title span[class*=" iconic-icon-"], .box .title span[class*=" meteo-icon-"], .box .title span[class*=" silk-icon-"],
.box .title span[class*=" typ-icon-"], .box .title span[class*=" wpzoom-"], .box .title span[class*=" eco-"]
{
margin: 0 10px 0 0px;
}
@@ -1872,20 +1873,20 @@
.box .content.noPad .tab-content {
margin-bottom: -1px;
margin-left: -1px;
margin-right: -1px;
}
- .box.boxMargin {margin-bottom: 27px;}
+ .box.boxMargin {margin-bottom: 27px;}
.sortable-placeholder {border: 4px dashed #C4C4C4; margin-bottom: 25px;}
/*General heading style*/
.heading {
height:49px;
background: #2a3644;
color: #aeb2b7;
- z-index:1;
+ z-index: 9999;
float: left;
width: auto;
min-width: 100%;
position: relative;
margin-top:0px;
@@ -1970,11 +1971,11 @@
.bigBtnIcon li a.pattern {
background: url(backend/patterns/sidebarbg1.png) repeat;
}
.bigBtnIcon li a .icon { font-size: 26px; width: 100%; margin: 8px 0 12px 0; display: inline-block;}
.bigBtnIcon li a .txt {line-height: 12px; text-align: center; font-size: 12px;}
- .bigBtnIcon li a .notification {padding: 0 6px 1px 6px; z-index: 999}
+ .bigBtnIcon li a .notification {padding: 0 6px 1px 6px; z-index: 999}
/*Circle stats*/
.circle-stats {text-align: center; margin-top:-5px; position: relative;}
.circular-item {position: relative; width:82px; height: 82px;margin-right:20px; margin-bottom: 10px; display: inline-block;}
.circular-item .icon {font-size: 20px; position: absolute; top:48%; left:50%; margin-top: -18px; margin-left: -10px;}
@@ -2065,13 +2066,13 @@
.sparkStats li {margin-bottom: 0; line-height: 32px; padding-top:3px;}
.sparkStats li .number {font-size: 18px; font-weight: 700; padding:0 10px; color: #ed7a53;}
.sparkStats li span:first-child {margin-right:15px;}
.sparkStats h4 {
position: relative;
- border-bottom: 1px solid #c4c4c4;
- padding-bottom: 0px;
- margin-bottom: 10px;
+ border-bottom: 1px solid #c4c4c4;
+ padding-bottom: 0px;
+ margin-bottom: 10px;
line-height: 37px;
-moz-box-shadow:0 1px 0px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
}
@@ -2084,11 +2085,11 @@
margin-bottom: 0;
padding: 0;
text-align: center;
}
.chartShortcuts li {
- display: inline-block;
+ display: inline-block;
margin: 0 5px 5px 0;
border: 1px solid #C4C4C4;
border-radius: 2px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
@@ -2102,11 +2103,11 @@
background-position: 150% center;
text-align: left;
}
.chartShortcuts a:hover {
background-position: 85% center;
- color:#444444;
+ color:#444444;
-webkit-transition: background 0.3s ease;
-moz-transition: background 0.3s ease;
-ms-transition: background 0.3s ease;
-o-transition: background 0.3s ease;
transition: background 0.3s ease;
@@ -2115,13 +2116,13 @@
.chartShortcuts .number {font-family: 'Signika'; float: left;font-size: 21px; font-weight: 700; width:100%}
/*To Do List*/
.todo {position: relative; margin-bottom: 27px;}
.todo h4 {
- border-bottom: 1px solid #c4c4c4;
- padding-bottom: 0px;
- margin-bottom: 10px;
+ border-bottom: 1px solid #c4c4c4;
+ padding-bottom: 0px;
+ margin-bottom: 10px;
line-height: 37px;
-moz-box-shadow:0 1px 0px rgba(255, 255, 255, 1);
-webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
box-shadow: 0 1px 0px rgba(255, 255, 255, 1);
}
@@ -2234,20 +2235,20 @@
.dualBtn .btn span {margin-right: 0;}
.searchField { max-width: 60%; margin: 0 5px 0 5px; float: left; background: image-url('backend/search.png') no-repeat 95% center; }
.searchBox { overflow: hidden; }
.searchBox input { width: 186px; margin: 0; }
.searchBox > span { float: left; display: block; margin-top: 8px; }
-.searchBox button {
+.searchBox button {
padding-left: 7px;
padding-right: 7px;
padding-bottom: 10px;
}
.count { margin-top: 10px; display: block; float: left; }
#box1Clear span, #box2Clear span {
display: inline-block;
- margin-right: 0;
+ margin-right: 0;
}
.slider {margin-top:8px;}
.pbar .ui-progressbar-value {display:block !important}
.pbar {overflow: hidden}
@@ -2270,11 +2271,11 @@
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
.galleryView>li .actionBtn, .movieGalleryView>li .actionBtn {position: absolute; bottom:10px; width: 100%;}
.galleryView>li .actionBtn a, .movieGalleryView>li .actionBtn a {
- padding:3px;
+ padding:3px;
background: #000;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius: 2px;
width: 23px;
@@ -2302,13 +2303,13 @@
.activity li .btn {margin-left:15px; margin-right: 15px;}
.activity li small {margin-right:15px; font-size: 11px; color:#999999;}
.recent-users {position: relative; list-style:none; padding-top: 15px; margin-left:0; padding-bottom: 0;}
.recent-users li {border-bottom: 1px solid #c4c4c4; padding: 10px 0 15px 0; width: 100%;}
-.recent-users .avatar {
- margin-left:15px;
- width:40px;
+.recent-users .avatar {
+ margin-left:15px;
+ width:40px;
height: 40px;
border:1px solid #e3e2e2;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius: 2px;
@@ -2379,11 +2380,11 @@
top:10px;
right:-10px;
width: 10px;
height: 17px;
background: image-url('backend/icons/arrow-right.png') no-repeat;
- }
+ }
/*loader*/
.loadstate, .loadstate body {overflow:hidden}
.loadstate body > * {visibility:hidden}
.loadstate #qLoverlay {visibility:visible;}
@@ -2469,11 +2470,11 @@
-webkit-transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-ms-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
- }
+ }
.invoice .you {float: left; margin-bottom: 15px;}
.invoice .client {float: right;}
.invoice .payment {float: left;}
.invoice .total {float: right; margin-right: 20px;}
.invoice .total span {font-size: 20px;}
@@ -2487,11 +2488,11 @@
background: #f1f1f1;
}
.invoice-footer p {margin-left: 20px; margin-top: 10px;}
form .image {
- padding: 5px;
+ padding: 5px;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius:2px;
}
@@ -2561,11 +2562,11 @@
background-color: #c4c4c4;
border-bottom: 1px solid white;
}
.email-header {margin-bottom: 20px;}
.email-header .btn-group > .dropdown-toggle, .email-header .btn-group .check {
- padding: 2px 10px;
+ padding: 2px 10px;
font-size: 12px;
-moz-border-radius: 2px 2px 2px 2px !important;
-webkit-border-radius: 2px 2px 2px 2px !important;
border-radius: 2px 2px 2px 2px !important;
line-height: 24px;
@@ -2888,11 +2889,11 @@
#header .navbar .nav a span.notification {text-indent: 0;}
#header .dropdown-menu li span.name a {text-indent: 0 !important; padding: 5px 0 5px 5px; width:100%}
#header .dropdown-menu li span.time {margin-top:-18px;}
#header .dropdown-menu li.view-all a {text-indent: 0; padding: 5px 0 5px 5px; width: auto;}
#header .dropdown-menu li.view-all a span.icon16 {text-indent: 0;}
- #header .dropdown-menu li.menu a {text-indent: 0;}
+ #header .dropdown-menu li.menu a {text-indent: 0;}
#header .dropdown-menu li.menu a span {text-indent: 0 !important;margin-left: 0 !important;}
#header .dropdown-menu .messages {padding-top:0;}
#header .dropdown-menu span.icon span {margin-left:5px !important;}
#header .dropdown-menu ul.notif a {width: 100% !important;}
@@ -2903,11 +2904,11 @@
@media only screen and (max-width: 980px) {
.resBtn {left: 235px; display: block;}
.resBtn.offCanvas {left: 80px; top: 15px;}
.navbar .nav {margin-left: 25px;}
.collapseBtn {display: none;}
-
+
#sidebar{
display: none;
position: absolute;
top: 0;
left: 0;
@@ -2924,11 +2925,11 @@
.mainnav ul li .sub {width: 100%;}
}
@media only screen and (max-width: 767px) {
body {padding-left:0; padding-right: 0;}
-
+
.heading .breadcrumb {margin-right: 80px;}
.resBtnSearch {
display: block;
position: absolute;
right:15px;
@@ -2957,30 +2958,30 @@
#searchform .top-search {width: 150px;}
.loginContainer input#username {width: 100%;}
.form-row .form-label {text-align: left;}
input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"], .row-fluid input[class*="span"], .row-fluid select[class*="span"], .row-fluid textarea[class*="span"], .row-fluid .uneditable-input[class*="span"] {width: 98%;}
- .input-prepend input[class*="span"], .input-append input[class*="span"] {width: auto;}
+ .input-prepend input[class*="span"], .input-append input[class*="span"] {width: auto;}
/*Responsive tables*/
table.responsive { margin-bottom: 0; }
-
- .pinned { position: absolute; left: 0; top: 0;width: 35%;
+
+ .pinned { position: absolute; left: 0; top: 0;width: 35%;
overflow: hidden; /*overflow-x: scroll;*/ border-right: 1px solid #c4c4c4;/* border-left: 1px solid #ccc;*/ }
.pinned table { border-right: none; border-left: none; width: 100%;}
.box .pinned table { border-right: none; border-left: none; width: 100%; margin-bottom: 1px;margin-bottom: 5px;}
.pinned table th, .pinned table td { white-space: nowrap; }
.pinned td:last-child { border-bottom: 0; }
-
+
div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
.box div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right:none; }
div.table-wrapper div.scrollable table { margin-left: 35%; }
- div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
-
+ div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }
+
table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
- table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child,
+ table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child,
table.responsive.pinned td { display: none; }
.dataTables_filter {position: absolute; top:15px;}
.dataTables_wrapper .table-wrapper{margin-top:45px; border-top:1px solid #c4c4c4;}
.paging_full_numbers a {display: none !important;}
@@ -3039,11 +3040,11 @@
.modal {left:90%;}
.errorContainer {width: 340px; margin-left: -185px;}
.elfinder-navbar {width : 120px !important;}
.search .search-btn {top:18px;}
.search {padding-top: 1px;}
-}
+}
@media only screen and (max-width: 400px) {
.resBtn {top:15px; left:15px}
#header .navbar .nav {margin-left:15px;}
#header .navbar-inner {padding-left: 0;}
@@ -3153,11 +3154,11 @@
.loginContainer {width: 180px;margin-left: -100px;}
.ui-datepicker{ max-width: 180px;}
}
.mask-date { text-align: center; }
-.ckeditor {
+.ckeditor {
margin-bottom: 5px;
margin-top: 9px;
}
.loader-div {
@@ -3172,10 +3173,10 @@
#logo {
display: block;
width: 170px;
text-align: center;
-
+
img { width: auto; height: 60px;}
}
.version-nr {
position: absolute;
\ No newline at end of file