diff options
32 files changed, 117 insertions, 361 deletions
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 8d83554d813..478269f3fcf 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -143,20 +143,48 @@ } } +@mixin dropdown-item-hover { + background-color: $dropdown-item-hover-bg; + color: $gl-text-color; + outline: 0; + + // make sure the text color is not overriden + &.text-danger { + color: $brand-danger; + } + + .avatar { + border-color: $white-light; + } +} + @mixin dropdown-link { + background: transparent; + border: 0; + border-radius: 0; + box-shadow: none; display: block; + font-weight: $gl-font-weight-normal; position: relative; - padding: 5px 8px; + padding: 8px 16px; color: $gl-text-color; - line-height: initial; - border-radius: 2px; - white-space: nowrap; + line-height: normal; + white-space: normal; overflow: hidden; + text-align: left; + width: 100%; + + // make sure the text color is not overriden + &.text-danger { + color: $brand-danger; + } &:hover, + &:active, &:focus, &.is-focused { - background-color: $dropdown-link-hover-bg; + @include dropdown-item-hover; + text-decoration: none; .badge { @@ -166,6 +194,13 @@ &.dropdown-menu-user-link { line-height: 16px; + padding-top: 10px; + padding-bottom: 7px; + white-space: nowrap; + + .dropdown-menu-user-username { + display: block; + } } .icon-play { @@ -187,8 +222,8 @@ z-index: 300; min-width: 240px; max-width: 500px; - margin-top: 2px; - margin-bottom: 2px; + margin-top: $dropdown-vertical-offset; + margin-bottom: 24px; font-size: 14px; font-weight: $gl-font-weight-normal; padding: 8px 0; @@ -197,6 +232,10 @@ border-radius: $border-radius-base; box-shadow: 0 2px 4px $dropdown-shadow-color; + &.dropdown-open-top { + margin-bottom: $dropdown-vertical-offset; + } + &.dropdown-open-left { right: 0; left: auto; @@ -227,16 +266,27 @@ } li { + display: block; text-align: left; list-style: none; - padding: 0 10px; + padding: 0 1px; + + a, + button, + .menu-item { + @include dropdown-link; + } } .divider { height: 1px; - margin: 6px 10px; + margin: 6px 0; padding: 0; background-color: $dropdown-divider-color; + + &:hover { + background-color: $dropdown-divider-color; + } } .separator { @@ -247,10 +297,6 @@ background-color: $dropdown-divider-color; } - a { - @include dropdown-link; - } - .dropdown-menu-empty-item a { &:hover, &:focus { @@ -262,7 +308,7 @@ color: $gl-text-color-secondary; font-size: 13px; line-height: 22px; - padding: 0 16px; + padding: 8px 16px; } &.capitalize-header .dropdown-header { @@ -277,7 +323,7 @@ .separator + .dropdown-header, .separator + .dropdown-bold-header { - padding-top: 2px; + padding-top: 10px; } .unclickable { @@ -298,48 +344,28 @@ } .dropdown-menu li { - padding: $gl-btn-padding; cursor: pointer; + &.droplab-item-active button { + @include dropdown-item-hover; + } + > a, > button { display: flex; margin: 0; - padding: 0; - border-radius: 0; text-overflow: inherit; - background-color: inherit; - color: inherit; - border: inherit; text-align: left; - &:hover, - &:focus { - background-color: inherit; - color: inherit; - } - &.btn .fa:not(:last-child) { margin-left: 5px; } } - &:hover, - &:focus { - background-color: $dropdown-hover-color; - color: $white-light; - } - &.droplab-item-selected i { visibility: visible; } - &.divider { - margin: 0 8px; - padding: 0; - border-top: $gray-darkest; - } - .icon { visibility: hidden; } @@ -431,11 +457,6 @@ } } -.dropdown-menu-user-link { - padding-top: 10px; - padding-bottom: 7px; -} - .dropdown-menu-user-full-name { display: block; font-weight: $gl-font-weight-normal; @@ -464,41 +485,44 @@ .dropdown-menu-align-right { left: auto; right: 0; - margin-top: -5px; } .dropdown-menu-selectable { - a { - padding-left: 26px; - position: relative; + li { + a { + padding: 8px 40px; + position: relative; + + &.is-indeterminate, + &.is-active { + color: $gl-text-color; + + &::before { + position: absolute; + left: 16px; + top: 16px; + transform: translateY(-50%); + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } - &.is-indeterminate, - &.is-active { - font-weight: $gl-font-weight-bold; - color: $gl-text-color; - - &::before { - position: absolute; - left: 6px; - top: 50%; - transform: translateY(-50%); - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + &.dropdown-menu-user-link { + &::before { + top: 50%; + } + } } - } - &.is-indeterminate::before { - content: "\f068"; - } + &.is-indeterminate::before { + content: "\f068"; + } - &.is-active::before { - content: "\f00c"; - position: absolute; - top: 50%; - transform: translateY(-50%); + &.is-active::before { + content: "\f00c"; + } } } } @@ -735,136 +759,6 @@ } } -@mixin dropdown-item-hover { - background-color: $dropdown-item-hover-bg; - color: $gl-text-color; -} - -// TODO: change global style and remove mixin -@mixin new-style-dropdown($selector: '') { - #{$selector}.dropdown-menu, - #{$selector}.dropdown-menu-nav { - margin-bottom: 24px; - - &.dropdown-open-top { - margin-bottom: $dropdown-vertical-offset; - } - - li { - display: block; - padding: 0 1px; - - &:hover { - background-color: transparent; - } - - &.divider { - margin: 6px 0; - - &:hover { - background-color: $dropdown-divider-color; - } - } - - &.dropdown-header { - padding: 8px 16px; - } - - &.droplab-item-active button { - @include dropdown-item-hover; - } - - a, - button, - .menu-item { - margin-bottom: 0; - border-radius: 0; - box-shadow: none; - padding: 8px 16px; - text-align: left; - white-space: normal; - width: 100%; - font-weight: $gl-font-weight-normal; - line-height: normal; - - &.dropdown-menu-user-link { - white-space: nowrap; - - .dropdown-menu-user-username { - display: block; - } - } - - // make sure the text color is not overriden - &.text-danger { - color: $brand-danger; - } - - &.is-focused, - &:hover, - &:active, - &:focus { - @include dropdown-item-hover; - - background-color: $dropdown-item-hover-bg; - color: $gl-text-color; - - // make sure the text color is not overriden - &.text-danger { - color: $brand-danger; - } - } - - &.is-active { - font-weight: inherit; - - &::before { - top: 16px; - } - - &.dropdown-menu-user-link::before { - top: 50%; - transform: translateY(-50%); - } - } - } - - &.dropdown-menu-empty-item a { - &:hover, - &:focus { - background-color: transparent; - } - } - } - - &.dropdown-menu-selectable { - li { - a { - padding: 8px 40px; - - &.is-indeterminate::before, - &.is-active::before { - left: 16px; - } - } - } - } - } - - #{$selector}.dropdown-menu-align-right { - margin-top: 2px; - } - - .open { - #{$selector}.dropdown-menu, - #{$selector}.dropdown-menu-nav { - @media (max-width: $screen-xs-max) { - max-width: 100%; - } - } - } -} - @media (max-width: $screen-xs-max) { .navbar-gitlab { li.header-projects, @@ -891,9 +785,6 @@ } } -@include new-style-dropdown('.breadcrumbs-list .dropdown '); -@include new-style-dropdown('.js-namespace-select + '); - header.header-content .dropdown-menu.projects-dropdown-menu { padding: 0; } diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index cec38eea464..2d7465401f1 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -50,8 +50,6 @@ } .filtered-search-wrapper { - @include new-style-dropdown; - display: -webkit-flex; display: flex; @@ -165,16 +163,6 @@ } } -.droplab-dropdown li.filtered-search-token { - padding: 0; - - &:hover, - &:focus { - background-color: inherit; - color: inherit; - } -} - .filtered-search-term { .name { background-color: inherit; @@ -336,21 +324,12 @@ .filtered-search-history-dropdown-content { max-height: none; -} - -.filtered-search-history-dropdown-item, -.filtered-search-history-clear-button { - @include dropdown-link; - - overflow: hidden; - width: 100%; - margin: 0.5em 0; - background-color: transparent; - border: 0; - text-align: left; - white-space: nowrap; - text-overflow: ellipsis; + .filtered-search-history-dropdown-item, + .filtered-search-history-clear-button { + white-space: nowrap; + text-overflow: ellipsis; + } } .filtered-search-history-dropdown-token { @@ -402,24 +381,9 @@ } } -%filter-dropdown-item-btn-hover { - text-decoration: none; - outline: 0; - - .avatar { - border-color: $white-light; - } -} - .droplab-dropdown .dropdown-menu .filter-dropdown-item { .btn { - border: 0; - width: 100%; - text-align: left; - padding: 8px 16px; text-overflow: ellipsis; - overflow: hidden; - border-radius: 0; .fa { width: 15px; @@ -434,11 +398,6 @@ height: 17px; top: 0; } - - &:hover, - &:focus { - @extend %filter-dropdown-item-btn-hover; - } } .dropdown-light-content { @@ -459,17 +418,9 @@ word-break: break-all; } } - - &.droplab-item-active .btn { - @extend %filter-dropdown-item-btn-hover; - } } .filter-dropdown-loading { padding: 8px 16px; text-align: center; } - -.issues-details-filters { - @include new-style-dropdown; -} diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index f985a3aea5c..2ce4de6a2d5 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -3,8 +3,6 @@ } .navbar-gitlab { - @include new-style-dropdown; - &.navbar-gitlab { padding: 0 16px; z-index: 1000; diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index e6e6c4c3963..f79a71221c4 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -132,8 +132,6 @@ ul.content-list { } .controls { - @include new-style-dropdown; - float: right; > .control-text { diff --git a/app/assets/stylesheets/framework/secondary-navigation-elements.scss b/app/assets/stylesheets/framework/secondary-navigation-elements.scss index 8498b37abe4..5f67126bafa 100644 --- a/app/assets/stylesheets/framework/secondary-navigation-elements.scss +++ b/app/assets/stylesheets/framework/secondary-navigation-elements.scss @@ -86,8 +86,6 @@ } .nav-controls { - @include new-style-dropdown; - display: inline-block; float: right; text-align: right; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 3ebba4f9efb..0742c0a2a09 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -144,10 +144,6 @@ } } -.issuable-sidebar { - @include new-style-dropdown; -} - .pikaday-container { .pika-single { margin-top: 2px; diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 0817cce114c..11c1aeea871 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -343,8 +343,6 @@ a > code { @extend .ref-name; } -@include new-style-dropdown('.git-revision-dropdown'); - /** * Apply Markdown typography * diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index f139f4ab650..98d460339cd 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -323,8 +323,6 @@ } .build-dropdown { - @include new-style-dropdown; - margin: $gl-padding 0; padding: 0; diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss index c303f016ff9..88d44131d5b 100644 --- a/app/assets/stylesheets/pages/clusters.scss +++ b/app/assets/stylesheets/pages/clusters.scss @@ -13,8 +13,6 @@ max-width: 100%; } -@include new-style-dropdown('.clusters-dropdown '); - .clusters-container { .nav-bar-right { padding: $gl-padding-top $gl-padding; diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index 292e0ad394b..3b35beb7695 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -1,6 +1,4 @@ #cycle-analytics { - @include new-style-dropdown; - max-width: 1000px; margin: 24px auto 0; position: relative; diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index 52e4d904b9b..2f2c04206e2 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -32,8 +32,6 @@ } .detail-page-header-actions { - @include new-style-dropdown; - align-self: center; flex-shrink: 0; flex: 0 0 auto; diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 71a6c7a2bf9..60b07537799 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -581,8 +581,6 @@ } .commit-stat-summary { - @include new-style-dropdown; - @media (min-width: $screen-sm-min) { margin-left: -$gl-padding; padding-left: $gl-padding; diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index c586dab4cf2..8ecda50602d 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/pages/editor.scss @@ -204,8 +204,6 @@ .gitlab-ci-yml-selector, .dockerfile-selector, .template-type-selector { - @include new-style-dropdown; - display: inline-block; vertical-align: top; font-family: $regular_font; diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index a5a6b7461a3..f4882305c57 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -12,8 +12,6 @@ .environments-container { .ci-table { - @include new-style-dropdown; - .deployment-column { > span { word-break: break-all; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 2e26f2b5bbd..8f8f11e3857 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -488,12 +488,6 @@ } } - .dropdown-content { - a:hover { - color: inherit; - } - } - .dropdown-menu-toggle { width: 100%; padding-top: 6px; @@ -512,10 +506,6 @@ } } -.sidebar-move-issue-dropdown { - @include new-style-dropdown; -} - .sidebar-move-issue-confirmation-button { width: 100%; diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index af1df8b8802..c48e58af691 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -142,8 +142,6 @@ ul.related-merge-requests > li { } .issue-form { - @include new-style-dropdown; - .select2-container { width: 250px !important; } diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 92abe82df4c..e8cd8a4905c 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -116,8 +116,6 @@ } .manage-labels-list { - @include new-style-dropdown; - > li:not(.empty-message):not(.is-not-draggable) { background-color: $white-light; cursor: move; diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 18c48405ecd..3422829de58 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -58,8 +58,6 @@ } .member-form-control { - @include new-style-dropdown; - @media (max-width: $screen-xs-max) { padding-bottom: 5px; margin-left: 0; @@ -73,8 +71,6 @@ } .member-search-form { - @include new-style-dropdown; - position: relative; @media (min-width: $screen-sm-min) { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 2afb17334e3..e75a35d78ad 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -485,8 +485,6 @@ } .mr-source-target { - @include new-style-dropdown; - display: flex; flex-wrap: wrap; justify-content: space-between; @@ -608,8 +606,6 @@ } .mr-version-controls { - @include new-style-dropdown; - position: relative; background: $gray-light; color: $gl-text-color; @@ -727,7 +723,3 @@ font-size: 16px; } } - -.merge-request-form { - @include new-style-dropdown; -} diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index ebb5d121433..6d4ccd53e12 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -23,8 +23,6 @@ .new-note, .note-edit-form { .note-form-actions { - @include new-style-dropdown; - position: relative; margin: $gl-padding 0 0; } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 4d5613c292b..26e6e8688b6 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -490,8 +490,6 @@ ul.notes { } .note-actions { - @include new-style-dropdown; - align-self: flex-start; flex-shrink: 0; display: inline-flex; diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss index c28b1e68008..bdf07a99daf 100644 --- a/app/assets/stylesheets/pages/notifications.scss +++ b/app/assets/stylesheets/pages/notifications.scss @@ -14,7 +14,3 @@ font-size: 18px; } } - -.notification-form { - @include new-style-dropdown; -} diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index cb24274c612..9805fc4f882 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -286,8 +286,6 @@ // Pipeline visualization .pipeline-actions { - @include new-style-dropdown; - border-bottom: 0; } @@ -703,9 +701,6 @@ button.mini-pipeline-graph-dropdown-toggle { } } -@include new-style-dropdown('.big-pipeline-graph-dropdown-menu'); -@include new-style-dropdown('.mini-pipeline-graph-dropdown-menu'); - // dropdown content for big and mini pipeline .big-pipeline-graph-dropdown-menu, .mini-pipeline-graph-dropdown-menu { @@ -804,7 +799,6 @@ button.mini-pipeline-graph-dropdown-toggle { font-weight: normal; line-height: $line-height-base; white-space: nowrap; - border-radius: 3px; .ci-job-name-component { align-items: center; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 674588752d2..6f4c678c4b8 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -323,8 +323,6 @@ } .project-repo-buttons { - @include new-style-dropdown; - .project-action-button .dropdown-menu { max-height: 250px; overflow-y: auto; @@ -898,8 +896,6 @@ pre.light-well { .new-protected-branch, .new-protected-tag { - @include new-style-dropdown; - label { margin-top: 6px; font-weight: $gl-font-weight-normal; @@ -919,8 +915,6 @@ pre.light-well { .protected-branches-list, .protected-tags-list { - @include new-style-dropdown; - margin-bottom: 30px; .settings-message { diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index fe455a04960..49c8e546bf2 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -116,11 +116,6 @@ input[type="checkbox"]:hover { opacity: 0; display: block; left: -5px; - padding: 0; - - ul { - padding: 10px 0; - } } .dropdown-content { @@ -185,8 +180,6 @@ input[type="checkbox"]:hover { } .search-holder { - @include new-style-dropdown; - @media (min-width: $screen-sm-min) { display: -webkit-flex; display: flex; diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss index 2139a029fc7..a79772ea37b 100644 --- a/app/assets/stylesheets/pages/todos.scss +++ b/app/assets/stylesheets/pages/todos.scss @@ -265,7 +265,3 @@ font-weight: $gl-font-weight-bold; } } - -.todos-filters { - @include new-style-dropdown; -} diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 5d14323e4bc..e0ee7e9aa3d 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -1,6 +1,4 @@ .tree-holder { - @include new-style-dropdown; - .nav-block { margin: 10px 0; diff --git a/app/views/projects/blob/_template_selectors.html.haml b/app/views/projects/blob/_template_selectors.html.haml index 2a178325041..5b092427496 100644 --- a/app/views/projects/blob/_template_selectors.html.haml +++ b/app/views/projects/blob/_template_selectors.html.haml @@ -3,15 +3,15 @@ Template .template-selector-dropdowns-wrap .template-type-selector.js-template-type-selector-wrap.hidden - = dropdown_tag("Choose type", options: { toggle_class: 'btn js-template-type-selector', title: "Choose a template type" } ) + = dropdown_tag("Choose type", options: { toggle_class: 'js-template-type-selector', title: "Choose a template type" } ) .license-selector.js-license-selector-wrap.js-template-selector-wrap.hidden - = dropdown_tag("Apply a license template", options: { toggle_class: 'btn js-license-selector', title: "Apply a license", filter: true, placeholder: "Filter", data: { data: licenses_for_select, project: @project.name, fullname: @project.namespace.human_name } } ) + = dropdown_tag("Apply a license template", options: { toggle_class: 'js-license-selector', title: "Apply a license", filter: true, placeholder: "Filter", data: { data: licenses_for_select, project: @project.name, fullname: @project.namespace.human_name } } ) .gitignore-selector.js-gitignore-selector-wrap.js-template-selector-wrap.hidden - = dropdown_tag("Apply a .gitignore template", options: { toggle_class: 'btn js-gitignore-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitignore_names } } ) + = dropdown_tag("Apply a .gitignore template", options: { toggle_class: 'js-gitignore-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitignore_names } } ) .gitlab-ci-yml-selector.js-gitlab-ci-yml-selector-wrap.js-template-selector-wrap.hidden - = dropdown_tag("Apply a GitLab CI Yaml template", options: { toggle_class: 'btn js-gitlab-ci-yml-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls } } ) + = dropdown_tag("Apply a GitLab CI Yaml template", options: { toggle_class: 'js-gitlab-ci-yml-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: gitlab_ci_ymls } } ) .dockerfile-selector.js-dockerfile-selector-wrap.js-template-selector-wrap.hidden - = dropdown_tag("Apply a Dockerfile template", options: { toggle_class: 'btn js-dockerfile-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: dockerfile_names } } ) + = dropdown_tag("Apply a Dockerfile template", options: { toggle_class: 'js-dockerfile-selector', title: "Apply a template", filter: true, placeholder: "Filter", data: { data: dockerfile_names } } ) .template-selectors-undo-menu.hidden %span.text-info Template applied %button.btn.btn-sm.btn-info Undo diff --git a/app/views/projects/branches/new.html.haml b/app/views/projects/branches/new.html.haml index 2baaaf6ac5b..e9d8fc75142 100644 --- a/app/views/projects/branches/new.html.haml +++ b/app/views/projects/branches/new.html.haml @@ -20,7 +20,7 @@ .col-sm-10.create-from .dropdown = hidden_field_tag :ref, default_ref - = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide form-control js-branch-select git-revision-dropdown-toggle', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do + = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide js-branch-select git-revision-dropdown-toggle', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do .text-left.dropdown-toggle-text= default_ref = icon('chevron-down') = render 'shared/ref_dropdown', dropdown_class: 'wide' diff --git a/app/views/projects/tags/new.html.haml b/app/views/projects/tags/new.html.haml index 031efa903c5..be92f953d24 100644 --- a/app/views/projects/tags/new.html.haml +++ b/app/views/projects/tags/new.html.haml @@ -20,7 +20,7 @@ .col-sm-10.create-from .dropdown = hidden_field_tag :ref, default_ref - = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide form-control js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do + = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do .text-left.dropdown-toggle-text= default_ref = render 'shared/ref_dropdown', dropdown_class: 'wide' .help-block diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml index 4bdfeb99591..81d07074325 100644 --- a/app/views/shared/_label.html.haml +++ b/app/views/shared/_label.html.haml @@ -39,7 +39,12 @@ %li = link_to 'Edit', edit_label_path(label) %li - = link_to 'Delete', destroy_label_path(label), title: 'Delete', method: :delete, data: {confirm: 'Remove this label? Are you sure?'} + = link_to 'Delete', + destroy_label_path(label), + title: 'Delete', + method: :delete, + data: {confirm: 'Remove this label? Are you sure?'}, + class: 'text-danger' .pull-right.hidden-xs.hidden-sm.hidden-md - if show_label_merge_requests_link diff --git a/doc/development/fe_guide/dropdowns.md b/doc/development/fe_guide/dropdowns.md index e1660ac5caa..6314f8f38d2 100644 --- a/doc/development/fe_guide/dropdowns.md +++ b/doc/development/fe_guide/dropdowns.md @@ -4,15 +4,15 @@ ## How to style a bootstrap dropdown 1. Use the HTML structure provided by the [docs][bootstrap-dropdowns] 1. Add a specific class to the top level `.dropdown` element - - + + ```Haml .dropdown.my-dropdown %button{ type: 'button', data: { toggle: 'dropdown' }, 'aria-haspopup': true, 'aria-expanded': false } %span.dropdown-toggle-text Toggle Dropdown = icon('chevron-down') - + %ul.dropdown-menu %li %a @@ -29,10 +29,4 @@ item! ``` -1. Include the mixin in CSS - - ```SCSS - @include new-style-dropdown('.my-dropdown '); - ``` - [bootstrap-dropdowns]: https://getbootstrap.com/docs/3.3/javascript/#dropdowns |