Commit aeac2e01 authored by Athina Bekakou's avatar Athina Bekakou
Browse files

admin-ui: Add style for Filters' Compact View

Add only SASS files.
parent 94ec2057
......@@ -103,7 +103,7 @@ and light gray font colors
@mixin line-btn($color:$btn-line-bg, $padding:$default-btn-padding, $border:$btn-line-border ) {
@include default-btn($padding);
background-color: $color;
border-bottom: 2px solid $color;
border-bottom: 2px solid $color;
color: $border;
&:hover,
&:focus{
......@@ -148,6 +148,42 @@ and light gray font colors
}
}
.search-btn {
@include line-btn();
position: relative;
top: -2px;
margin-left: 20px;
span {
padding: 7px;
}
cursor: pointer;
}
.search-mode-btn {
float: right;
line-height: 30px;
&:hover {
cursor: pointer;
}
}
.instructions .line-btn {
padding: 8px 9px;
span {
padding: 0 4px;
}
&:hover {
.arrow {
font-weight: bold;
}
}
&.open:hover {
border-bottom-color: transparent;
}
.arrow {
vertical-align: middle;
}
}
// ====== STUFF ====== //
......@@ -198,12 +234,12 @@ body .custom-buttons {
.disabled {
display: none;
}
.snf-font-reload {
@extend .snf-refresh-outline;
}
.snf-font-remove {
@extend .snf-remove;
}
.snf-font-reload {
@extend .snf-refresh-outline;
}
.snf-font-remove {
@extend .snf-remove;
}
}
......@@ -212,7 +248,9 @@ body .custom-buttons {
Extra-button is used to show total selected rows
*/
.extra-btn {
body .custom-buttons .extra-btn {
float: right;
margin-right: 0;
span {
display: inline-block;
}
......@@ -279,3 +317,81 @@ Extra-button is used to show total selected rows
vertical-align: middle;
cursor: pointer;
}
/* Switch in filters */
.onoffswitch {
display: inline-block;
float: right;
position: relative;
width: 134px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
/*border: 2px solid #F7EFEF;*/
border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s;
-webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 12px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: normal;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Standard View";
padding-left: 10px;
background-color: $btn-line-bg;
color: $btn-line-border;
}
.onoffswitch-inner:after {
content: "Compact View";
padding-right: 10px;
background-color: $btn-line-bg;
color: $btn-line-border;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 19px;
margin: 6px;
background: $btn-line-border;
border: 2px solid #F7EFEF;
border-radius: 20px;
position: absolute;
top: 0;
bottom: 4px;
right: 103px;
-moz-transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
......@@ -271,33 +271,84 @@ svg>text:last-child {
.shortcuts-btn {
.book-icon {
padding-right: 8px;
padding-right: 2px;
vertical-align: sub;
font-size: 17px;
}
}
.shortcuts {
body .shortcuts {
dt {
width: 119px;
margin-bottom: 12px;
}
dd {
margin-left: 139px;
}
.key {
padding: 2px 9px;
font-style: normal;
font-weight: bold;
border: 1px solid gray;
border: 1px solid $gray-light-extra-2;
background: $gray-light-extra-3;
border-radius: 6px;
}
}
.filters-examples {
dt {
font-weight: normal;
margin-bottom: 0;
}
dd {
margin-bottom: 12px;
.highlight {
background: $gray-light-extra-3;
padding: 2px 6px;
border-bottom: 1px solid $gray-light-extra-2;
}
&.divider {
margin-bottom: 8px;
border-bottom: 1px solid $gray-light-extra-2;
}
}
}
.notes {
dt {
width: 50px;
}
dd {
margin-left: 60px;
}
}
.popover {
z-index: 1999;
max-width: none;
color: $popover-color;
color: $popover-color;
margin-bottom: 20px;
h2 {
text-align: center;
font-size: 1.3em;
font-weight: bold;
margin-top: 0;
}
h3 {
font-size: 1.2em;
font-weight: bold;
}
h4 {
font-size: 1.1em;
font-weight: bold;
}
dt {
margin-bottom: 8px;
overflow: visible;
}
.panel-default {
border-color: transparent;
box-shadow: none;
}
}
.sign-out {
......@@ -379,3 +430,6 @@ svg>text:last-child {
color: #222;
}
}
.popover-content {
max-width: 800px;
}
......@@ -32,7 +32,7 @@ $filter-height: 30px;
margin: 0;
height: $filter-height;
}
label,
label,
.dropdown{
height: $filter-height;
line-height: $filter-height;
......@@ -100,3 +100,72 @@ $filter-height: 30px;
.filters.subnav-fixed {
top: $navbar-height;
}
.input-with-btn {
border-width: 0px;
background-color: transparent;
input {
@media screen and (min-width: 400px) {
width: 200px;
}
@media screen and (min-width: 600px) {
width: 300px;
}
@media screen and (min-width: 800px) {
width: 500px;
}
@media screen and (min-width: 1000px) {
width: 700px;
}
}
.form-group {
display: inline-block;
background: $filter-bg;
border: 1px solid $filter-border-color;
margin-bottom: 0.6em;
}
.error-sign {
display: block;
opacity: 0;
position: static;
display: inline-block;
margin-right: 6px;
margin-left: 6;
vertical-align: bottom;
}
.form-group, .filter-error, .instructions {
margin-left: $sidebar-width + 30px;
@media (max-width: $screen-lg-min) {
margin: 0 $filter-margin $filter-margin 0;
}
}
&.no-margin-left .form-group, &.no-margin-left .filter-error, &.no-margin-left .instructions {
margin-left: 0;
}
.instructions {
margin-top: 0.6em;
* {
color: $btn-line-border;
}
.content-area {
display: none;
background: $btn-line-bg;
padding: 12px 13px 18px;
dt {
width: 200px;
}
dd {
margin-left: 220px;
}
}
.clarifications {
font-style: italic;
}
}
}
.filter.invisible {
display: none;
}
\ No newline at end of file
......@@ -4,11 +4,11 @@ p.progress-area {
}
.in-progress .modal-body {
background-color: $gray-light-extra;
background-color: $gray-light-extra-1;
p.progress-area {
visibility: visible;
}
}
.modal {
......@@ -49,7 +49,7 @@ p.progress-area {
min-height: 160px;
}
}
label {
// float: left;
margin-right: 6px;
......@@ -102,7 +102,7 @@ p.progress-area {
}
}
&[data-karma="bad"] {
.elem {
......@@ -154,6 +154,9 @@ p.progress-area {
text-align: center;
}
}
.popover-content {
min-width: 150px;
}
}
......
......@@ -6,7 +6,9 @@ $ciel: #4d99d8;
$blue-light: #B2CAE9;
$blue-light-extra: #AFC6D6;
$blue-intense: #3C96E0;
$gray-light-extra: lighten($snf_gray-light, 20%);
$gray-light-extra-1: lighten($snf_gray-light, 20%);
$gray-light-extra-2: #dddddd;
$gray-light-extra-3: #f5f5f5; // whitesmoke
$green-intense: #00a551;
$green-intense-extra: darken($green-intense, 10%);
$red-intense: #E42A48;
......
......@@ -189,6 +189,7 @@ table.dataTable.no-footer {
.dataTables_wrapper > .custom-buttons {
margin-bottom: 1em;
width: 100%;
}
.dataTables_wrapper .dataTables_processing {
......
......@@ -85,7 +85,7 @@ $tab-content-color: #fff;
$tab-border: inherit;
$object-details-bg: lighten($body-bg,3%);
$object-details-border: $gray-light-extra;
$object-details-border: $gray-light-extra-1;
$object-details-row-hover-bg: lighten($object-details-bg,2%);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment