diff options
Diffstat (limited to 'app/assets/stylesheets/framework/filters.scss')
-rw-r--r-- | app/assets/stylesheets/framework/filters.scss | 215 |
1 files changed, 209 insertions, 6 deletions
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index e3da467a27c..51805c5d734 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -1,10 +1,24 @@ .filter-item { - margin-right: 6px; vertical-align: top; &.reset-filters { padding: 7px; } + + &.update-issues-btn { + float: right; + margin-right: 0; + + @media (max-width: $screen-xs-max) { + float: none; + } + } +} + +.filters-section { + @media (max-width: $screen-xs-max) { + display: inline-block; + } } @media (min-width: $screen-sm-min) { @@ -14,6 +28,20 @@ width: 132px; } } + + .filter-item:not(:last-child) { + margin-right: 6px; + } + + .sort-filter { + display: inline-block; + float: right; + } + + .dropdown-menu-sort { + left: auto; + right: 0; + } } @media (max-width: $screen-xs-max) { @@ -21,11 +49,106 @@ display: block; margin: 0 0 10px; } + + .dropdown-menu-toggle, + .update-issues-btn .btn { + width: 100%; + } } .filtered-search-container { display: -webkit-flex; display: flex; + + @media (max-width: $screen-xs-min) { + -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 { + max-width: 200px; + } + + .input-token:only-child, + .input-token:last-child { + flex: 1; + -webkit-flex: 1; + max-width: initial; + } +} + +.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: auto; + white-space: nowrap; + width: 100%; } .filtered-search-input-container { @@ -33,13 +156,48 @@ display: flex; position: relative; width: 100%; + border: 1px solid $border-color; + background-color: $white-light; + + @media (max-width: $screen-xs-min) { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + margin-bottom: 10px; + + .dropdown-menu { + width: auto; + left: 0; + right: 0; + max-width: none; + min-width: 100%; + } + } + + &:hover { + @extend .form-control:hover; + } + + &.focus, + &.focus:hover { + border-color: $dropdown-input-focus-border; + box-shadow: 0 0 4px $search-input-focus-shadow-color; + } + + &.focus .fa-filter { + color: $common-gray-dark; + } .form-control { - padding-left: 25px; - padding-right: 25px; + position: relative; + min-width: 200px; + padding: 5px 25px 6px 0; + border-color: transparent; - &:focus ~ .fa-filter { - color: $common-gray-dark; + &:focus, + &:hover { + outline: none; + border-color: transparent; + box-shadow: none; } } @@ -57,12 +215,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; @@ -70,6 +229,15 @@ } } +.filter-dropdown-container { + display: -webkit-flex; + display: flex; + + .dropdown-toggle { + line-height: 22px; + } +} + .dropdown-menu .filter-dropdown-item { padding: 0; } @@ -79,6 +247,41 @@ overflow: auto; } +@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { + .issues-details-filters { + .dropdown-menu-toggle { + width: 100px; + } + } +} + +@media (max-width: $screen-xs-max) { + .issues-details-filters { + padding: 0 0 10px; + background-color: $white-light; + border-top: 0; + } +} + +@media (max-width: $screen-xs) { + .filter-dropdown-container { + .dropdown-toggle, + .dropdown { + width: 100%; + } + + .dropdown { + margin-left: 0; + } + + .fa-chevron-down { + position: absolute; + right: 10px; + top: 10px; + } + } +} + %filter-dropdown-item-btn-hover { background-color: $dropdown-hover-color; color: $white-light; |