diff options
Diffstat (limited to 'app/assets/stylesheets/framework/filters.scss')
-rw-r--r-- | app/assets/stylesheets/framework/filters.scss | 101 |
1 files changed, 99 insertions, 2 deletions
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 499398ecf85..8f2150066c7 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -64,6 +64,89 @@ -webkit-flex-direction: column; flex-direction: column; } + + .tokens-container { + display: -webkit-flex; + display: flex; + flex: 1; + -webkit-flex: 1; + padding-left: 30px; + position: relative; + margin-bottom: 0; + } + + .input-token { + flex: 1; + -webkit-flex: 1; + } + + .filtered-search-token + .input-token:not(:last-child) { + max-width: 200px; + } +} + +.filtered-search-token, +.filtered-search-term { + display: -webkit-flex; + display: flex; + margin-top: 5px; + margin-bottom: 5px; + + .selectable { + display: -webkit-flex; + display: flex; + } + + .name, + .value { + display: inline-block; + padding: 2px 7px; + } + + .name { + background-color: $filter-name-resting-color; + color: $filter-name-text-color; + border-radius: 2px 0 0 2px; + margin-right: 1px; + text-transform: capitalize; + } + + .value { + background-color: $white-normal; + color: $filter-value-text-color; + border-radius: 0 2px 2px 0; + margin-right: 5px; + } + + .selected { + .name { + background-color: $filter-name-selected-color; + } + + .value { + background-color: $filter-value-selected-color; + } + } +} + +.filtered-search-term { + .name { + background-color: inherit; + color: $black; + text-transform: none; + } + + .selectable { + cursor: text; + } +} + +.scroll-container { + display: -webkit-flex; + display: flex; + overflow-x: scroll; + white-space: nowrap; + width: 100%; } .filtered-search-input-container { @@ -71,6 +154,9 @@ display: flex; position: relative; width: 100%; + border: 1px solid $border-color; + background-color: $white-light; + max-width: 87%; @media (max-width: $screen-xs-min) { -webkit-flex: 1 1 100%; @@ -87,12 +173,22 @@ } .form-control { - padding-left: 25px; + position: relative; + min-width: 200px; + padding-left: 0; padding-right: 25px; + border-color: transparent; &:focus ~ .fa-filter { color: $common-gray-dark; } + + &:focus, + &:hover { + outline: none; + border-color: transparent; + box-shadow: none; + } } .fa-filter { @@ -109,12 +205,13 @@ .clear-search { width: 35px; - background-color: transparent; + background-color: $white-light; border: none; position: absolute; right: 0; height: 100%; outline: none; + z-index: 1; &:hover .fa-times { color: $common-gray-dark; |