Commit 1f8e5542 authored by Athina Bekakou's avatar Athina Bekakou
Browse files

admin-ui: Add more style rules

- Modify style of filters
- Add style rules in order to change the state of checkboxes,
  radiobuttons and arrow-buttons by css
- Fix rendering bugs noticed in Firefox
parent 989d1d0a
......@@ -168,7 +168,7 @@ and light gray font colors
}
.instructions .line-btn {
padding: 8px 9px;
padding: 8px 10px;
span {
padding: 0 4px;
}
......@@ -395,3 +395,37 @@ body .custom-buttons .extra-btn {
right: 0px;
}
/* Clickable elements that change state */
/* These are icon-fonts. We insert in html two icons (one for each state) */
/* The icon with the false state is hidden and only the correct one is displayed */
/* Which state is the correct it comes from the class of a parent element */
li.active .snf-checkbox-unchecked, li.active .snf-radio-unchecked {
display: none;
}
li:not(.active) .snf-checkbox-checked, , li:not(.active) .snf-radio-checked {
display: none;
}
table.dataTable tbody tr.selected .snf-checkbox-unchecked{
display: none;
}
table.dataTable tbody tr:not(.selected) .snf-checkbox-checked {
display: none;
}
.show-hide-all.open .snf-font-arrow-down {
display: none;
}
.show-hide-all:not(.open) .snf-font-arrow-up {
display: none;
}
.instructions .line-btn.open .snf-angle-down {
display: none;
}
.instructions .line-btn:not(.open) .snf-angle-up {
display: none;
}
\ No newline at end of file
......@@ -229,20 +229,10 @@
.show-hide-all {
span.snf-font-arrow-up {
@extend .snf-arrow-up;
display: none;
padding: 0;
}
span.snf-font-arrow-down {
@extend .snf-arrow-down;
display: inline;
padding: 0;
}
&.open {
.snf-font-arrow-up {
display: inline;
}
.snf-font-arrow-down {
display: none;
}
}
}
......@@ -4,22 +4,24 @@ $filter-height: 30px;
.filters-area {
margin-bottom: $navbar-height - $filter-margin;
}
.filters {
margin-left: $sidebar-width + 30px;
@media (max-width: $screen-lg-min) {
margin: 0 $filter-margin $filter-margin 0;
}
&.no-margin-left {
margin-left: 0;
}
a:focus, input:focus {
outline: none;
}
}
.filters .badge {
margin-left: 6px;
opacity: 0.9;
padding: 2px 9px;
}
.filters ul.nav a {
padding-bottom: 10px;
.badge {
margin-left: 6px;
opacity: 0.9;
padding: 2px 9px;
}
ul.nav a {
padding-bottom: 10px;
}
}
.filter {
......@@ -42,10 +44,28 @@ $filter-height: 30px;
background: transparent;
font-weight: normal;
margin: 0;
&>a {
.selected-value {
margin-left: 4px;
}
.arrow {
font-weight: bold;
}
}
&.open {
a {
text-decoration: none;
color: $filter-font-color;
}
}
a {
color: $filter-font-color;
}
}
.dropdown-menu {
.dropdown-menu, .dropdown-list {
background: $filter-bg;
margin: 0;
width: auto;
> .active > a{
background: $filter-active-bg;
}
......@@ -53,6 +73,13 @@ $filter-height: 30px;
background: $filter-hover-bg;
color: $filter-hover-color;
}
a {
span {
margin-right: 6px;
}
padding-left: 12px;
padding-right: 12px;
}
}
input {
border: 0 none;
......@@ -63,47 +90,21 @@ $filter-height: 30px;
font-weight: normal;
color: $filter-font-color;
}
}
.filter-dropdown {
.dropdown {
&>a {
.selected-value {
margin-left: 4px;
}
.arrow {
font-weight: bold;
}
}
&.open {
a {
text-decoration: none;
color: $filter-font-color;
}
}
a {
color: $filter-font-color;
}
.dropdown-menu {
width: auto;
a {
span {
margin-right: 6px;
}
padding-left: 12px;
padding-right: 12px;
}
}
.dropdown-list > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857;
color: #303030; // ?
white-space: nowrap;
}
}
.filters.subnav-fixed {
top: $navbar-height;
}
.input-with-btn {
border-width: 0px;
background-color: transparent;
display: inline;
input {
@media screen and (min-width: 400px) {
width: 200px;
......@@ -124,24 +125,18 @@ $filter-height: 30px;
border: 1px solid $filter-border-color;
margin-bottom: 0.6em;
}
.filter-error {
word-wrap: break-word;
}
.error-sign {
display: block;
opacity: 0;
position: static;
display: inline-block;
margin-right: 6px;
margin-left: 6;
margin-left: 10px;
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;
......@@ -166,6 +161,55 @@ $filter-height: 30px;
}
.filter.invisible {
.filter:not(.visible-filter):not(.visible-filter-fade) {
display: none;
}
\ No newline at end of file
opacity: 0;
}
.visible-filter-fade {
opacity: 1;
transition: opacity 0.5s;
}
.filters .filters-list {
border-radius: 15px;
background: $btn-line-bg;
border: 1px solid $filter-border-color-alt;
height: 28px;
&>a {
color: $btn-line-border;
line-height: 28px;
font-weight: bold;
padding: 8px 7px;
background: transparent;
}
.popover {
padding: 0;
}
.popover-content {
padding: 0;
}
.popover ul {
list-style: none;
padding: 5px 0px;
min-width: 160px;
li {
white-space: nowrap;
a {
color: $filter-font-color;
}
span {
margin-right: 10px;
}
}
.divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
}
.popover.bottom > .arrow:after {
border-bottom-color: $filter-bg;
}
}
......@@ -132,7 +132,6 @@ table.dataTable tbody tr.selected {
background-color: $table-selected-row-bg;
}
html body .dataTables_wrapper {
label {
font-weight: normal;
......
......@@ -78,6 +78,8 @@ $filter-active-bg: darken($filter-bg,10%);
$filter-hover-bg: darken($filter-bg,5%);
$filter-hover-color: inherit;
$filter-border-color: $theme-gray-medium;
$filter-border-color-alt: $theme-gray-medium;
// Tabs
$tab-content-bg: lighten($theme-gray-medium,5%);
......
......@@ -78,6 +78,7 @@ $filter-active-bg: $filter-bg;
$filter-hover-bg: $gray-lighter;
$filter-hover-color: inherit;
$filter-border-color: transparent;
$filter-border-color-alt: white;
// Tabs
$tab-content-bg: $gray-light;
......
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