various fixes for page filters

This commit is contained in:
Andy Miller
2014-09-15 21:25:35 -06:00
parent 7479aa9b9f
commit 30b44bbd43
5 changed files with 83 additions and 30 deletions

View File

@@ -480,12 +480,20 @@ form .form-select-wrapper, form .selectize-control.single .selectize-input {
form .selectize-input {
box-shadow: none;
color: #737c81; }
form .selectize-control.multi .selectize-input > div {
color: #737c81;
border-radius: 2px;
line-height: 1.5; }
form .selectize-control.multi .selectize-input > div.active {
background: #d4d4d4; }
form .selectize-control.multi .selectize-input {
padding: 0.425rem 0.425rem; }
form .selectize-control.multi .selectize-input.has-items {
padding-top: 6px;
padding-bottom: 4px; }
form .selectize-control.multi .selectize-input input {
font-size: 1rem;
line-height: 1.7; }
form .selectize-control.multi .selectize-input > div {
color: #737c81;
border-radius: 2px;
line-height: 1.5; }
form .selectize-control.multi .selectize-input > div.active {
background: #d4d4d4; }
form .selectize-control.single .selectize-input:after {
right: 24px; }
form .selectize-control.single .selectize-input.dropdown-active:after {
@@ -996,16 +1004,23 @@ tr {
top: 10px;
content: '\f002';
font-family: 'FontAwesome'; }
form .selectize-control.multi .selectize-input > div, form .selectize-control.multi .selectize-input > div.active {
color: white;
padding: 2px 10px; }
form .selectize-control.multi .selectize-input > div[data-value='Routable'], form .selectize-control.multi .selectize-input > div.active[data-value='Routable'] {
background: #CE431D; }
form .selectize-control.multi .selectize-input > div[data-value='Visible'], form .selectize-control.multi .selectize-input > div.active[data-value='Visible'] {
background: #999; }
form .selectize-control.multi .selectize-input > div[data-value='Modular'], form .selectize-control.multi .selectize-input > div.active[data-value='Modular'] {
background: #9055AF; }
#page-filtering .selectize-control.multi .selectize-input {
padding: 0.425rem 0.425rem; }
#page-filtering .selectize-control.multi .selectize-input.has-items {
padding-top: 6px;
padding-bottom: 4px; }
#page-filtering .selectize-control.multi .selectize-input input {
font-size: 1rem;
line-height: 1.7; }
#page-filtering .selectize-control.multi .selectize-input > div, #page-filtering .selectize-control.multi .selectize-input > div.active {
color: white;
padding: 2px 10px; }
#page-filtering .selectize-control.multi .selectize-input > div[data-value='Routable'], #page-filtering .selectize-control.multi .selectize-input > div.active[data-value='Routable'] {
background: #CE431D; }
#page-filtering .selectize-control.multi .selectize-input > div[data-value='Visible'], #page-filtering .selectize-control.multi .selectize-input > div.active[data-value='Visible'] {
background: #999; }
#page-filtering .selectize-control.multi .selectize-input > div[data-value='Modular'], #page-filtering .selectize-control.multi .selectize-input > div.active[data-value='Modular'] {
background: #9055AF; }
.depth-0 .row {
padding-left: 3rem; }

File diff suppressed because one or more lines are too long

View File

@@ -23,7 +23,6 @@
// @extend strong;
// }
// Forms
// Forms
$form-label-width: 30%;
$form-border: darken($content-bg,10%);
@@ -83,7 +82,21 @@ form {
color: $content-fg;
}
.selectize-control.multi .selectize-input {
padding: ($leading-margin / 4) ($leading-margin / 4);
&.has-items {
padding-top: 6px;
padding-bottom: 4px;
}
input {
font-size: $core-font-size;
line-height: $core-line-height;
}
> div {
color: $content-fg;
// background: $content-bg;

View File

@@ -120,24 +120,40 @@
font-family: 'FontAwesome';
}
}
}
form .selectize-control.multi .selectize-input > {
div, div.active {
color: $white;
padding: 2px 10px;
&[data-value='Routable'] {
background: #CE431D;
.selectize-control.multi .selectize-input {
padding: ($leading-margin / 4) ($leading-margin / 4);
&.has-items {
padding-top: 6px;
padding-bottom: 4px;
}
&[data-value='Visible'] {
background: #999;
input {
font-size: $core-font-size;
line-height: $core-line-height;
}
&[data-value='Modular'] {
background: #9055AF;
> div, > div.active {
color: $white;
padding: 2px 10px;
&[data-value='Routable'] {
background: #CE431D;
}
&[data-value='Visible'] {
background: #999;
}
&[data-value='Modular'] {
background: #9055AF;
}
}
}
}
@for $i from 0 to 10 {
.depth-#{$i} .row {
padding-left: 3rem * ($i + 1);

View File

@@ -78,7 +78,16 @@
{% else %}
<form id="page-filtering">
<div class="page-filters">
<input type="text" placeholder="Add Filters" class="fancy" value="Routable,Visible,Modular" name="page-filter" />
<input type="text" placeholder="Add Filters" class="page-filter" value="Routable,Visible,Modular" name="page-filter" />
<script>
$(function() {
// selectize
$('input.page-filter').selectize({
delimiter: ',',
create: false
});
});
</script>
</div>
<div class="page-search">
<input type="text" placeholder="Search Pages" name="page-search" />