Commit e7d29352 authored by Athina Bekakou's avatar Athina Bekakou Committed by Alex Pyrgiotis

admin-ui: Modify design

parent 31701261
......@@ -22,9 +22,8 @@
padding-left: $nav-side-padding;
padding-right: $nav-side-padding;
// background: $blue-light;
background: $gray-dark;
border: 1px solid transparent;
border-bottom-color: white;
background: $total-black;
border: 0 none;
height: $nav-top-height;
z-index: 1040;
}
......@@ -170,23 +169,23 @@
.sidebar {
a {
&:first-child {
margin-bottom: 38px;
margin-bottom: 48px;
}
&:last-child {
margin-top: 32px; //32+6=38
margin-top: 48px; //32+6=38
}
margin-bottom: 6px;
}
}
.custom-buttons .custom-btn, .actions-per-item .custom-btn {
/* .custom-buttons .custom-btn, .actions-per-item .custom-btn {
min-width: 80px;
float: left;
width: auto;
margin-right: 10px;
}
} */
.sidebar, .custom-buttons, .actions-per-item {
/* .sidebar, .custom-buttons, .actions-per-item {
a {
border: 1px solid;
width: 100%;
......@@ -215,34 +214,12 @@
&:hover {
opacity:1;
}
&[data-karma="neutral"] {
background-color: $blue-intense;
border-color: $blue-intense;
}
&[data-karma="good"] {
background-color: $green-intense;
border-color: $green-intense;
}
&[data-karma="bad"] {
background-color: $orange-intense;
border-color: $orange-intense;
}
&[data-caution="warning"][data-karma="good"], &[data-caution="warning"][data-karma="neutral"] {
background-color: $orange-intense;
border-color: $orange-intense;
}
&[data-caution="dangerous"][data-karma="bad"], &[data-caution="dangerous"][data-karma="neutral"] {
background-color: $red-intense;
border-color: $red-intense;
}
}
}
}
.custom-btn.expand-btn {
} */
/* .custom-btn.expand-btn {
width: 110px;
line-height: 30px;
color: white;
......@@ -252,7 +229,7 @@
&:hover {
opacity: 1;
}
}
} */
.instructions-icon {
......@@ -264,6 +241,144 @@
}
}
/*
Βuttons
Αll buttons have colors depending on their karma.
Default color applies to non-karma buttons
*/
.custom-btn {
display: inline-block;
border: 1px solid $default-btn-color;
text-align: center;
// background: $default-btn-color;
opacity: 0.7;
&>span {
border: 1px solid transparent;
display: block;
height: 100%;
padding: 5px 10px;
}
&:hover {
text-decoration: none;
opacity: 1;
span {
color: white;
}
}
// &[data-karma="bad"] {
// background: $bad-karma-color;
// border-color: $bad-karma-color;
// }
// &[data-karma="neutral"] {
// background: $neutral-karma-color;
// border-color: $neutral-karma-color;
// }
// &[data-karma="good"] {
// background: $good-karma-color;
// border-color: $good-karma-color;
// }
&[data-karma="neutral"] {
background-color: $blue-intense;
border-color: $blue-intense;
}
&[data-karma="good"] {
background-color: $green-intense;
border-color: $green-intense;
}
&[data-karma="bad"] {
background-color: $orange-intense;
border-color: $orange-intense;
}
&[data-caution="warning"][data-karma="good"], &[data-caution="warning"][data-karma="neutral"] {
background-color: $orange-intense;
border-color: $orange-intense;
}
&[data-caution="dangerous"][data-karma="bad"], &[data-caution="dangerous"][data-karma="neutral"] {
background-color: $red-intense;
border-color: $red-intense;
}
}
/*
Disabled buttons are transparent with light gray border
and light gray font colors
*/
body .content .custom-btn.disabled {
background-color: transparent;
border-color: $almost-white;
opacity: 0.7;
color: $almost-white;
&:hover {
opacity: 0.7;
}
}
/*
Sidebar buttons are displayed as block elements
*/
.sidebar {
.custom-btn {
display: block;
margin: 0 0 1em;
span {
padding: 8px;
}
}
}
/*
Custom-buttons are buttons of lesser significance.
They have black background
*/
body .custom-buttons {
.custom-btn:not(.disabled) {
background-color: $total-black;
border-color: transparent;
border-bottom: 2px solid transparent;
margin-right: 1em;
&:hover {
border-bottom-color: $almost-white;
}
}
}
.expand-btn {
float:right;
background-color: $total-black;
// border:0 none;
border-color: transparent;
border-bottom: 2px solid transparent;
&:hover {
border-bottom-color: $almost-white;
}
}
/*
Extra-button is used to show total selected rows
*/
.extra-btn {
margin-bottom: 2em;
.badge {
background: white;
color: $default-btn-color;
}
&:hover {
.badge {
color: $default-btn-color;
}
}
}
a.disabled {
cursor: default !important;
}
\ No newline at end of file
......@@ -17,6 +17,50 @@ float: right;
margin-left: 6px;
}
.main {
padding: 5px 0 0px 0;
background: transparent;
&:hover {
// background: #DDD;
}
h4 .title{
font-size: 21px;
cursor: pointer;
}
a {
color: white;
}
.object-details {
padding-left: 0px;
padding-right: 0px;@import "settings";
body {
color: white;
a {
color: white;
}
}
.object-details h4 .label {
// font-size: 0.65em;
font-style: normal;
font-weight: normal;
float: right;
margin-left: 15px;
background: $almost-white;
color: $total-black;
&.important {
font-weight: bold;
}
&.label-success {
background: $good-karma-color;
border-color: $good-karma-color;
color: $almost-white;
}
}
.main {
padding: 5px 0 0px 0;
background: transparent;
......@@ -36,6 +80,113 @@ margin-left: 6px;
}
}
body .well {
border-color: $blue-light;
}
// .tab-content dl {
// background: white;
// }
body .object-details {
h4 {
margin-left: 0;
margin-right: 0;
}
h3 {
margin: 0 0 2em;
}
p {
margin: 10px 20px;
font-style: italic;
}
.length {
margin-left: 6px;
border: 0 none;
font-style: italic;
&::before {
content: '( ';
}
&::after {
content: ' )';
}
}
&>.object-details {
margin-left: -20px;
margin-right: -20px;
padding: 20px;
}
}
.part-two {
.object-details {
padding: 20px;
.object-details {
padding: 0 20px;
}
}
}
.object-details-content .nav-tabs>li {
a {
opacity: 0.7;
color: white;
}
&.active>a {
opacity: 1;
border-color: transparent;
background: $gray-light;
color: white;
border-radius: 0;
}
&:not(.active)>a:hover {
opacity: 1;
color: white;
border-color: transparent;
background: transparent;
}
}
.tab-pane {
overflow: auto;
th {
color: $gray-dark;
}
}
body .object-details h4 {
em {
float: none;
&.os-info {
float: right;
position: relative;
bottom: 3px;
// margin-right: 6px;
img {
height: 26px; // *** i think that is the size of all images temp use for preview
}
}
}
}
.content-seperator {
width: 100%;
border-bottom: 1px solid white;
margin-top: 20px;
margin-bottom: 20px;
}
.content.part-one {
margin-bottom: 0;
margin-top: 160px;
}
.content.part-two {
margin-top: 0;
}
}
}
body .well {
border-color: $blue-light;
......
......@@ -42,7 +42,7 @@
background: white;
height: 38px;
.dropdown {
border: 1px solid #cccccc;
// border: 1px solid #cccccc;
border-radius: 0px;
padding: 8px 12px;
line-height: 1.4; //same as inputs
......@@ -58,7 +58,7 @@
&.open {
a {
text-decoration: none;
color: $blue-intense;
color: $total-black;
}
}
a {
......
......@@ -4,23 +4,18 @@
$total-width: 960px;
$nav-top-height: 50px;
$nav-side-padding: 20px;
$blue-light: #B2CAE9;
$blue-light-extra: #AFC6D6;
$blue-intense: #3C96E0;
$gray-dark: #404041;
$gray-dark: #404040;
$gray-light: #5A5959;
$gray-light-extra: lighten($gray-light, 20%);
$green-intense: #00a551;
$green-intense-extra: darken($green-intense, 10%);
$red-intense: #E42A48;
$orange-intense: #D2881F;
// should I use something like that?
......@@ -34,4 +29,12 @@ $orange-intense: #D2881F;
// $positive-area
$almost-white: #eeeeee;
\ No newline at end of file
$almost-white: #eeeeee;
$total-black: #222;
// Βutton colors
$default-btn-color: $blue-intense;
$bad-karma-color: $red-intense;
$neutral-karma-color: $orange-intense;
$good-karma-color: $green-intense;
\ No newline at end of file
......@@ -164,7 +164,6 @@ textarea:focus {
.badge-important { background-color: #F81A23; }
.badge-info { background-color:#659CEF }
.show-hide-tabs { margin:2em 0; }
.show-hide-all { float:right; /*margin:20px 0;*/ line-height:27px; /* margin-right: 20px; */}
.toggle .badge { font-size:14px; padding:5px 9px; }
.toggle .badge:hover { cursor:pointer; }
.show-hide-tabs .badge { background-color:#8BBA00; }
......@@ -184,7 +183,11 @@ textarea:focus {
.account h3:hover,
.account h4:hover { color:#666 }
.object-details { /* padding: 10px 20px; */ padding: 10px 20px 0 20px;}
.object-details h4 { cursor:pointer; margin-left: 20px; margin-right: 20px; }
.object-details h4 .title,
.object-details h4 .arrow {
cursor: pointer;
}
.object-details h4 em { float:right; font-style:normal; font-size:0.833em;}
.object-details h4 em img { margin:0 5px; }
h4 .badge.arrow { padding:6px 9px 2px; background:url(../img/glyphicons-halflings.png) 160px 43px transparent;}
......@@ -527,14 +530,6 @@ svg>text:last-child {
// box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #659cef;
}
.extra-btn {
width: 100%;
margin-bottom: 40px;
}
/* Landscape phone to portrait tablet */
@media (max-width: 1300px) { // temp
.navbar-fixed-top .navbar-center{
......@@ -634,22 +629,6 @@ table thead th {
white-space: nowrap;
}
/* buttons */
.custom-btn {
display: inline-block;
border: 1px solid;
text-align: center;
&>span {
border: 1px solid transparent;
display: block;
height: 100%;
}
&:hover {
text-decoration: none;
}
}
/* Home */
......@@ -684,10 +663,6 @@ body select, body input {
color: $gray-dark;
}
table.dataTable tbody tr td:last-child, table.dataTable tbody tr th:last-child {
padding: 8px 0;
}
/* updated olga */
.navbar {
......@@ -699,12 +674,20 @@ table.dataTable tbody tr td:last-child, table.dataTable tbody tr th:last-child {
.nav > li.active > a,
.nav > li:hover > a{
color: $gray-dark;
-webkit-transition: color 0 ease 0;
transition: color 0 ease 0;
-webkit-transition: all 0 ease 0;
transition: all 0 ease 0;
background: white;
}
.nav > li > a {
-webkit-transition: all 0 ease 0;
transition: all 0 ease 0;
}
.dropdown-menu {
border-radius: 0;
border: 0 none;
border-top: 1px solid $gray-light;
background-color: white;
}
......@@ -716,12 +699,18 @@ table.dataTable tbody tr td:last-child, table.dataTable tbody tr th:last-child {
}
.sub-nav {
color: $gray-dark;
background: $almost-white;
background: $gray-light;
border: 0 none;
}
.sub-nav a {
color: $gray-dark;
.nav {
& > li > a {
color: $almost-white;
}
& > li:hover {
a {
color: $gray-dark;
}
}
}
}
body .well {
......@@ -760,6 +749,7 @@ table.table {
table.dataTable tbody tr td,
table.dataTable tbody tr th {
border-top: 1px solid lighten($gray-dark, 25%);
padding: 10px;
}
table.dataTable thead th,
......@@ -851,8 +841,8 @@ table.dataTable.no-footer {
.label {
border-radius: 0;
padding: 5px 10px;
border-radius: 10px;
padding: 3px 8px;
border: 1px solid white;
background: inherit;
color: white;
......@@ -879,21 +869,8 @@ table.dataTable.no-footer {
}
.actions-per-item {
color: white;
a {
color: white;
}
.custom-btn {
margin: 10px 10px 10px 0;
span {
padding: 5px 10px;
border: 1px solid inherit;
}
&:hover {
span {
border-color:white;
}
}
}
}
......@@ -946,4 +923,34 @@ table.dataTable.no-footer {
margin-left: 110px;
}
}
}
#logo-icon {
height: 50px;
line-height: 50px;
vertical-align: middle;
padding: 0 15px;
&:hover {
background-color: white;
a {
background-position: center top;
}
}
a {
position: relative;
top: 3px;
width: 17px;
height: 15px;
display: inline-block;
margin-top: 2px;
overflow: hidden;
padding: 0;
background:url(../logo.png) no-repe