Skip to content

G
gitlab-ce
Commit daecc3d2 authored by Winnie Hellmann's avatar Winnie Hellmann Committed by Annabel Dunstone Gray
Browse files
Options

Clean up new dropdown styles (EE port)

parent eb1420fc
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 363 deletions
app/assets/stylesheets/framework/dropdowns.scss
View file @ daecc3d2
......@@ -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;
}
......
app/assets/stylesheets/framework/filters.scss
View file @ daecc3d2
......@@ -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;
......@@ -433,11 +397,6 @@
width: 17px;
height: 17px;
}
&:hover,
&:focus {
@extend %filter-dropdown-item-btn-hover;
}
}
.dropdown-light-content {
......@@ -458,17 +417,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;
}
app/assets/stylesheets/framework/header.scss
View file @ daecc3d2
......@@ -3,8 +3,6 @@
}
.navbar-gitlab {
@include new-style-dropdown;
&.navbar-gitlab {
padding: 0 16px;
z-index: 1000;
......
app/assets/stylesheets/framework/lists.scss
View file @ daecc3d2
......@@ -132,8 +132,6 @@ ul.content-list {
}
.controls {
@include new-style-dropdown;
float: right;
> .control-text {
......
app/assets/stylesheets/framework/secondary-navigation-elements.scss
View file @ daecc3d2
......@@ -86,8 +86,6 @@
}
.nav-controls {
@include new-style-dropdown;
display: inline-block;
float: right;
text-align: right;
......
app/assets/stylesheets/framework/sidebar.scss
View file @ daecc3d2
......@@ -144,10 +144,6 @@
}
}
.issuable-sidebar {
@include new-style-dropdown;
}
.pikaday-container {
.pika-single {
margin-top: 2px;
......
app/assets/stylesheets/framework/typography.scss
View file @ daecc3d2
......@@ -343,8 +343,6 @@ a > code {
@extend .ref-name;
}
@include new-style-dropdown('.git-revision-dropdown');
/**
* Apply Markdown typography
*
......
app/assets/stylesheets/pages/boards.scss
View file @ daecc3d2
......@@ -699,8 +699,6 @@
}
.boards-switcher {
@include new-style-dropdown;
padding-right: 10px;
}
......
app/assets/stylesheets/pages/builds.scss
View file @ daecc3d2
......@@ -323,8 +323,6 @@
}
.build-dropdown {
@include new-style-dropdown;
margin: $gl-padding 0;
padding: 0;
......
app/assets/stylesheets/pages/clusters.scss
View file @ daecc3d2
......@@ -13,8 +13,6 @@
max-width: 100%;
}
@include new-style-dropdown('.clusters-dropdown ');
.clusters-container {
.nav-bar-right {
padding: $gl-padding-top $gl-padding;
......
app/assets/stylesheets/pages/cycle_analytics.scss
View file @ daecc3d2
#cycle-analytics {
@include new-style-dropdown;
max-width: 1000px;
margin: 24px auto 0;
position: relative;
......
app/assets/stylesheets/pages/detail_page.scss
View file @ daecc3d2
......@@ -32,8 +32,6 @@
}
.detail-page-header-actions {
@include new-style-dropdown;
align-self: center;
flex-shrink: 0;
flex: 0 0 auto;
......
app/assets/stylesheets/pages/diff.scss
View file @ daecc3d2
......@@ -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;
......
app/assets/stylesheets/pages/editor.scss
View file @ daecc3d2
......@@ -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;
......
app/assets/stylesheets/pages/environments.scss
View file @ daecc3d2
......@@ -12,8 +12,6 @@
.environments-container {
.ci-table {
@include new-style-dropdown;
.deployment-column {
> span {
word-break: break-all;
......
app/assets/stylesheets/pages/issuable.scss
View file @ daecc3d2
......@@ -489,12 +489,6 @@
}
}
.dropdown-content {
a:hover {
color: inherit;
}
}
.dropdown-menu-toggle {
width: 100%;
padding-top: 6px;
......@@ -513,10 +507,6 @@
}
}
.sidebar-move-issue-dropdown {
@include new-style-dropdown;
}
.sidebar-move-issue-confirmation-button {
width: 100%;
......
app/assets/stylesheets/pages/issues.scss
View file @ daecc3d2
......@@ -142,8 +142,6 @@ ul.related-merge-requests > li {
}
.issue-form {
@include new-style-dropdown;
.select2-container {
width: 250px !important;
}
......
app/assets/stylesheets/pages/labels.scss
View file @ daecc3d2
......@@ -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;
......
app/assets/stylesheets/pages/members.scss
View file @ daecc3d2
......@@ -64,8 +64,6 @@
}
.member-form-control {
@include new-style-dropdown;
@media (max-width: $screen-xs-max) {
padding-bottom: 5px;
margin-left: 0;
......@@ -79,8 +77,6 @@
}
.member-search-form {
@include new-style-dropdown;
position: relative;
@media (min-width: $screen-sm-min) {
......
app/assets/stylesheets/pages/merge_requests.scss
View file @ daecc3d2
......@@ -471,8 +471,6 @@
}
.mr-source-target {
@include new-style-dropdown;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
......@@ -594,8 +592,6 @@
}
.mr-version-controls {
@include new-style-dropdown;
position: relative;
background: $gray-light;
color: $gl-text-color;
......@@ -818,7 +814,3 @@
}
}
}
.merge-request-form {
@include new-style-dropdown;
}
app/assets/stylesheets/pages/note_form.scss
View file @ daecc3d2
......@@ -23,8 +23,6 @@
.new-note,
.note-edit-form {
.note-form-actions {
@include new-style-dropdown;
position: relative;
margin: $gl-padding 0 0;
}
......
app/assets/stylesheets/pages/notes.scss
View file @ daecc3d2
......@@ -490,8 +490,6 @@ ul.notes {
}
.note-actions {
@include new-style-dropdown;
align-self: flex-start;
flex-shrink: 0;
display: inline-flex;
......
app/assets/stylesheets/pages/notifications.scss
View file @ daecc3d2
......@@ -14,7 +14,3 @@
font-size: 18px;
}
}
.notification-form {
@include new-style-dropdown;
}
app/assets/stylesheets/pages/pipelines.scss
View file @ daecc3d2
......@@ -321,8 +321,6 @@
// Pipeline visualization
.pipeline-actions {
@include new-style-dropdown;
border-bottom: 0;
}
......@@ -730,9 +728,6 @@ a.linked-pipeline-mini-item {
}
}
@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 {
......@@ -831,7 +826,6 @@ a.linked-pipeline-mini-item {
font-weight: normal;
line-height: $line-height-base;
white-space: nowrap;
border-radius: 3px;
.ci-job-name-component {
align-items: center;
......
app/assets/stylesheets/pages/projects.scss
View file @ daecc3d2
......@@ -331,8 +331,6 @@
}
.project-repo-buttons {
@include new-style-dropdown;
.project-action-button .dropdown-menu {
max-height: 250px;
overflow-y: auto;
......@@ -910,8 +908,6 @@ a.allowed-to-push {
.new-protected-branch,
.new-protected-tag {
@include new-style-dropdown;
label {
margin-top: 6px;
font-weight: $gl-font-weight-normal;
......@@ -938,8 +934,6 @@ a.allowed-to-push {
.protected-branches-list,
.protected-tags-list {
@include new-style-dropdown;
margin-bottom: 30px;
.settings-message {
......
app/assets/stylesheets/pages/search.scss
View file @ daecc3d2
......@@ -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;
......
app/assets/stylesheets/pages/todos.scss
View file @ daecc3d2
......@@ -265,7 +265,3 @@
font-weight: $gl-font-weight-bold;
}
}
.todos-filters {
@include new-style-dropdown;
}
app/assets/stylesheets/pages/tree.scss
View file @ daecc3d2
.tree-holder {
@include new-style-dropdown;
.nav-block {
margin: 10px 0;
......
app/views/projects/blob/_template_selectors.html.haml
View file @ daecc3d2
......@@ -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
app/views/projects/branches/new.html.haml
View file @ daecc3d2
......@@ -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'
......
app/views/projects/tags/new.html.haml
View file @ daecc3d2
......@@ -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
......
app/views/shared/_label.html.haml
View file @ daecc3d2
......@@ -35,7 +35,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
= link_to_label(label, subject: subject, type: :merge_request, css_class: 'btn btn-transparent btn-action btn-link') do
......
doc/development/fe_guide/dropdowns.md
View file @ daecc3d2
......@@ -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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7