diff options
author | Phil Hughes <me@iamphill.com> | 2016-03-04 12:20:20 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2016-03-04 12:20:20 +0000 |
commit | 8c0f551f493eb0b5e6b3524bed412c6d75cf31cf (patch) | |
tree | 4072d621a6a8a9adde422a93ff5aacc82c4816a9 /app | |
parent | f8c4dc97230c520df077c1274fd8d88680da5242 (diff) | |
download | gitlab-ce-8c0f551f493eb0b5e6b3524bed412c6d75cf31cf.tar.gz |
Updated dropdown CSS
This is a start on #3279 by updating the CSS for the dropdown menu. This doesnt include any CSS for the title bar or filter field
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/stylesheets/framework.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/common.scss | 19 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 99 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/tw_bootstrap.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 11 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 23 | ||||
-rw-r--r-- | app/views/explore/projects/_dropdown.html.haml | 2 |
7 files changed, 113 insertions, 44 deletions
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index e2a30f5ed34..c85ab9148d0 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -11,6 +11,7 @@ @import "framework/calendar.scss"; @import "framework/callout.scss"; @import "framework/common.scss"; +@import "framework/dropdowns.scss"; @import "framework/files.scss"; @import "framework/filters.scss"; @import "framework/flash.scss"; diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 1d3c71932a8..c98e43ad09f 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -60,25 +60,6 @@ hr { margin: $gl-padding 0; } -.dropdown-menu { - margin: 6px 0 0; -} - -.dropdown-menu > li > a { - text-shadow: none; -} - -.dropdown-menu-align-right { - left: auto; - right: 0px; -} - -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus { - background: $gl-primary; - color: #FFF; -} - .str-truncated { @include str-truncated; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss new file mode 100644 index 00000000000..f184d083cd6 --- /dev/null +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -0,0 +1,99 @@ +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: $caret-width-base dashed; + border-right: $caret-width-base solid transparent; + border-left: $caret-width-base solid transparent; +} + +.dropdown { + position: relative; + + &.open { + .dropdown-menu { + display: block; + } + } +} + +.dropdown-menu { + display: none; + position: absolute; + top: 100%; + left: 0; + z-index: 9999; + width: 240px; + margin-top: 2px; + padding: 10px 10px; + background-color: $dropdown-bg; + border: 1px solid $dropdown-border-color; + border-radius: $border-radius-base; + box-shadow: 0 2px 4px $dropdown-shadow-color; + + li { + text-align: left; + list-style: none; + } + + .divider { + width: 100%; + height: 1px; + margin-top: 8px; + margin-bottom: 8px; + background-color: $dropdown-divider-color; + } + + a { + display: block; + position: relative; + padding-left: 10px; + padding-right: 10px; + color: $dropdown-link-color; + line-height: 34px; + text-overflow: ellipsis; + border-radius: 2px; + white-space: nowrap; + overflow: hidden; + + &:hover { + background-color: $dropdown-link-hover-bg; + text-decoration: none; + } + } +} + +.dropdown-menu-align-right { + left: auto; + right: 0; +} + +.dropdown-menu-selectable { + a { + padding-left: 25px; + + &.is-active { + &::before { + content: "\f00c"; + position: absolute; + left: 4px; + top: 8px; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + } +} + +.dropdown-header { + padding-left: 10px; + padding-right: 10px; + color: $dropdown-header-color; + font-size: 13px; + line-height: 22px; +} diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss index 1e9959429cd..ddf76704a53 100644 --- a/app/assets/stylesheets/framework/tw_bootstrap.scss +++ b/app/assets/stylesheets/framework/tw_bootstrap.scss @@ -22,7 +22,7 @@ // Components @import "bootstrap/component-animations"; -@import "bootstrap/dropdowns"; +// @import "bootstrap/dropdowns"; @import "bootstrap/button-groups"; @import "bootstrap/input-groups"; @import "bootstrap/navs"; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 6fc62f7f201..880c8d0bd43 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -126,3 +126,14 @@ $deleted: #f77; */ $monospace_font: 'Menlo', 'Liberation Mono', 'Consolas', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; $regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif; + +/* +* Dropdowns +*/ +$dropdown-bg: #fff; +$dropdown-link-color: #555; +$dropdown-link-hover-bg: rgba(#000, .04); +$dropdown-border-color: rgba(#000, .1); +$dropdown-shadow-color: rgba(#000, .1); +$dropdown-divider-color: rgba(#000, .1); +$dropdown-header-color: #959494; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 247ac83c24a..5142f4f2270 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -185,29 +185,6 @@ } } -.dropdown-menu { - @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px); - @include border-radius ($border-radius-default); - - border: none; - padding: 10px 0; - font-size: 14px; - font-weight: 100; - - li a { - color: #5f697a; - line-height: 30px; - - &:hover { - background-color: #3084bb !important; - } - } - - i { - margin-right: 8px; - } -} - .project-visibility-level-holder { .radio { margin-bottom: 10px; diff --git a/app/views/explore/projects/_dropdown.html.haml b/app/views/explore/projects/_dropdown.html.haml index 87c556adc7d..a4b4cd8d6c7 100644 --- a/app/views/explore/projects/_dropdown.html.haml +++ b/app/views/explore/projects/_dropdown.html.haml @@ -6,7 +6,7 @@ - else = sort_title_recently_updated %b.caret - %ul.dropdown-menu + %ul.dropdown-menu.dropdown-menu-align-right %li = link_to explore_projects_filter_path(sort: sort_value_name) do = sort_title_name |