diff options
Diffstat (limited to 'app/assets/stylesheets/framework/dropdowns.scss')
-rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 120 |
1 files changed, 76 insertions, 44 deletions
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 3e34ec98427..889366d6ddf 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -8,6 +8,12 @@ } } +@mixin chevron-active { + .fa-chevron-down { + color: $gray-darkest; + } +} + .open { .dropdown-menu, .dropdown-menu-nav { @@ -19,48 +25,30 @@ } } + .dropdown-toggle, .dropdown-menu-toggle { - border-color: $dropdown-toggle-hover-border-color; - - .fa { - color: $dropdown-toggle-hover-icon-color; - } + @include chevron-active; + border-color: $gray-darkest; } } -.dropdown-menu-toggle { - position: relative; - width: 160px; - padding: 6px 20px 6px 10px; - background-color: $dropdown-toggle-bg; - color: $dropdown-toggle-color; - font-size: 15px; +.dropdown-toggle { + padding: 6px 8px 6px 10px; + background-color: $white-light; + color: $gl-text-color; + font-size: 14px; text-align: left; border: 1px solid $border-color; border-radius: $border-radius-base; - outline: 0; - text-overflow: ellipsis; white-space: nowrap; - overflow: hidden; - .fa { - position: absolute; - top: 10px; - right: 8px; - color: $dropdown-toggle-icon-color; - - &.fa-spinner { - font-size: 16px; - margin-top: -8px; - } + &[disabled] { + background-color: $input-bg-disabled; + cursor: not-allowed; } - &:hover, { - border-color: $dropdown-toggle-hover-border-color; - - .fa { - color: $dropdown-toggle-hover-icon-color; - } + &.no-outline { + outline: 0; } &.large { @@ -83,6 +71,51 @@ max-width: 100%; padding-right: 25px; } + + .fa { + color: $gray-darkest; + } + + .fa-chevron-down { + font-size: $dropdown-chevron-size; + position: relative; + top: -3px; + margin-left: 5px; + } + + &:hover { + @include chevron-active; + border-color: $gray-darkest; + } + + &:focus:active { + @include chevron-active; + border-color: $dropdown-toggle-active-border-color; + } +} + +.dropdown-menu-toggle { + @extend .dropdown-toggle; + padding-right: 20px; + position: relative; + width: 163px; + text-overflow: ellipsis; + overflow: hidden; + + .fa { + position: absolute; + + &.fa-spinner { + font-size: 16px; + margin-top: -8px; + } + } + + .fa-chevron-down { + position: absolute; + top: 11px; + right: 8px; + } } .dropdown-menu, @@ -95,10 +128,10 @@ width: 240px; margin-top: 2px; margin-bottom: 0; - font-size: 15px; + font-size: 14px; font-weight: normal; padding: 8px 0; - background-color: $dropdown-bg; + background-color: $white-light; border: 1px solid $dropdown-border-color; border-radius: $border-radius-base; box-shadow: 0 2px 4px $dropdown-shadow-color; @@ -155,7 +188,6 @@ &.is-focused { background-color: $dropdown-link-hover-bg; text-decoration: none; - outline: 0; } &.dropdown-menu-empty-link { @@ -169,7 +201,7 @@ } .icon-play { - fill: $table-text-gray; + fill: $gl-gray-light; margin-right: 6px; height: 12px; width: 11px; @@ -177,7 +209,7 @@ } .dropdown-header { - color: $dropdown-header-color; + color: $gl-gray-light; font-size: 13px; line-height: 22px; padding: 0 10px; @@ -190,7 +222,7 @@ .unclickable { cursor: not-allowed; padding: 5px 8px; - color: $dropdown-header-color; + color: $gl-gray-light; } } @@ -348,7 +380,7 @@ position: absolute; top: 10px; right: 20px; - color: #c7c7c7; + color: $dropdown-input-fa-color; font-size: 12px; pointer-events: none; } @@ -501,7 +533,7 @@ .ui-datepicker-calendar { .ui-state-hover, .ui-state-active { - color: #fff; + color: $white-light; border: 0; } } @@ -561,7 +593,7 @@ .ui-datepicker-title { color: $gl-gray; - font-size: 15px; + font-size: 14px; line-height: 1; font-weight: normal; } @@ -569,14 +601,14 @@ th { padding: 2px 0; - color: $calendar-header-color; + color: $note-disabled-comment-color; font-weight: normal; text-transform: lowercase; border-top: 1px solid $calendar-border-color; } .ui-datepicker-unselectable { - background-color: $calendar-unselectable-bg; + background-color: $gray-light; } } @@ -588,11 +620,11 @@ .dropdown-menu-inner-content { display: block; - color: $gl-placeholder-color; + color: $gl-gray-light; } .dropdown-toggle-text { &.is-default { - color: $gl-placeholder-color; + color: $gl-gray-light; } } |