Skip to content

G
gitlab-ce
Commit ab0d5e27 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray
Browse files
Options

Merge branch 'winh-cleanup-dropdowns' into 'master' 

Clean up new dropdown styles

Closes #39142 and #39446

See merge request gitlab-org/gitlab-ce!13676
parents 007e470c c07df632
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 361 deletions
app/assets/stylesheets/framework/dropdowns.scss
View file @ ab0d5e27
...@@ -143,20 +143,48 @@ ...@@ -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 { @mixin dropdown-link {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
display: block; display: block;
font-weight: $gl-font-weight-normal;
position: relative; position: relative;
padding: 5px 8px; padding: 8px 16px;
color: $gl-text-color; color: $gl-text-color;
line-height: initial; line-height: normal;
border-radius: 2px; white-space: normal;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-align: left;
width: 100%;
// make sure the text color is not overriden
&.text-danger {
color: $brand-danger;
}
&:hover, &:hover,
&:active,
&:focus, &:focus,
&.is-focused { &.is-focused {
background-color: $dropdown-link-hover-bg; @include dropdown-item-hover;
text-decoration: none; text-decoration: none;
.badge { .badge {
...@@ -166,6 +194,13 @@ ...@@ -166,6 +194,13 @@
&.dropdown-menu-user-link { &.dropdown-menu-user-link {
line-height: 16px; line-height: 16px;
padding-top: 10px;
padding-bottom: 7px;
white-space: nowrap;
.dropdown-menu-user-username {
display: block;
}
} }
.icon-play { .icon-play {
...@@ -187,8 +222,8 @@ ...@@ -187,8 +222,8 @@
z-index: 300; z-index: 300;
min-width: 240px; min-width: 240px;
max-width: 500px; max-width: 500px;
margin-top: 2px; margin-top: $dropdown-vertical-offset;
margin-bottom: 2px; margin-bottom: 24px;
font-size: 14px; font-size: 14px;
font-weight: $gl-font-weight-normal; font-weight: $gl-font-weight-normal;
padding: 8px 0; padding: 8px 0;
...@@ -197,6 +232,10 @@ ...@@ -197,6 +232,10 @@
border-radius: $border-radius-base; border-radius: $border-radius-base;
box-shadow: 0 2px 4px $dropdown-shadow-color; box-shadow: 0 2px 4px $dropdown-shadow-color;
&.dropdown-open-top {
margin-bottom: $dropdown-vertical-offset;
}
&.dropdown-open-left { &.dropdown-open-left {
right: 0; right: 0;
left: auto; left: auto;
...@@ -227,16 +266,27 @@ ...@@ -227,16 +266,27 @@
} }
li { li {
display: block;
text-align: left; text-align: left;
list-style: none; list-style: none;
padding: 0 10px; padding: 0 1px;
a,
button,
.menu-item {
@include dropdown-link;
}
} }
.divider { .divider {
height: 1px; height: 1px;
margin: 6px 10px; margin: 6px 0;
padding: 0; padding: 0;
background-color: $dropdown-divider-color; background-color: $dropdown-divider-color;
&:hover {
background-color: $dropdown-divider-color;
}
} }
.separator { .separator {
...@@ -247,10 +297,6 @@ ...@@ -247,10 +297,6 @@
background-color: $dropdown-divider-color; background-color: $dropdown-divider-color;
} }
a {
@include dropdown-link;
}
.dropdown-menu-empty-item a { .dropdown-menu-empty-item a {
&:hover, &:hover,
&:focus { &:focus {
...@@ -262,7 +308,7 @@ ...@@ -262,7 +308,7 @@
color: $gl-text-color-secondary; color: $gl-text-color-secondary;
font-size: 13px; font-size: 13px;
line-height: 22px; line-height: 22px;
padding: 0 16px; padding: 8px 16px;
} }
&.capitalize-header .dropdown-header { &.capitalize-header .dropdown-header {
...@@ -277,7 +323,7 @@ ...@@ -277,7 +323,7 @@
.separator + .dropdown-header, .separator + .dropdown-header,
.separator + .dropdown-bold-header { .separator + .dropdown-bold-header {
padding-top: 2px; padding-top: 10px;
} }
.unclickable { .unclickable {
...@@ -298,48 +344,28 @@ ...@@ -298,48 +344,28 @@
} }
.dropdown-menu li { .dropdown-menu li {
padding: $gl-btn-padding;
cursor: pointer; cursor: pointer;
&.droplab-item-active button {
@include dropdown-item-hover;
}
> a, > a,
> button { > button {
display: flex; display: flex;
margin: 0; margin: 0;
padding: 0;
border-radius: 0;
text-overflow: inherit; text-overflow: inherit;
background-color: inherit;
color: inherit;
border: inherit;
text-align: left; text-align: left;
&:hover,
&:focus {
background-color: inherit;
color: inherit;
}
&.btn .fa:not(:last-child) { &.btn .fa:not(:last-child) {
margin-left: 5px; margin-left: 5px;
} }
} }
&:hover,
&:focus {
background-color: $dropdown-hover-color;
color: $white-light;
}
&.droplab-item-selected i { &.droplab-item-selected i {
visibility: visible; visibility: visible;
} }
&.divider {
margin: 0 8px;
padding: 0;
border-top: $gray-darkest;
}
.icon { .icon {
visibility: hidden; visibility: hidden;
} }
...@@ -431,11 +457,6 @@ ...@@ -431,11 +457,6 @@
} }
} }
.dropdown-menu-user-link {
padding-top: 10px;
padding-bottom: 7px;
}
.dropdown-menu-user-full-name { .dropdown-menu-user-full-name {
display: block; display: block;
font-weight: $gl-font-weight-normal; font-weight: $gl-font-weight-normal;
...@@ -464,41 +485,44 @@ ...@@ -464,41 +485,44 @@
.dropdown-menu-align-right { .dropdown-menu-align-right {
left: auto; left: auto;
right: 0; right: 0;
margin-top: -5px;
} }
.dropdown-menu-selectable { .dropdown-menu-selectable {
a { li {
padding-left: 26px; a {
position: relative; 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, &.dropdown-menu-user-link {
&.is-active { &::before {
font-weight: $gl-font-weight-bold; top: 50%;
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;
} }
}
&.is-indeterminate::before { &.is-indeterminate::before {
content: "\f068"; content: "\f068";
} }
&.is-active::before { &.is-active::before {
content: "\f00c"; content: "\f00c";
position: absolute; }
top: 50%;
transform: translateY(-50%);
} }
} }
} }
...@@ -735,136 +759,6 @@ ...@@ -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) { @media (max-width: $screen-xs-max) {
.navbar-gitlab { .navbar-gitlab {
li.header-projects, li.header-projects,
...@@ -891,9 +785,6 @@ ...@@ -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 { header.header-content .dropdown-menu.projects-dropdown-menu {
padding: 0; padding: 0;
} }
......
app/assets/stylesheets/framework/filters.scss
View file @ ab0d5e27
...@@ -50,8 +50,6 @@ ...@@ -50,8 +50,6 @@
} }
.filtered-search-wrapper { .filtered-search-wrapper {
@include new-style-dropdown;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
...@@ -165,16 +163,6 @@ ...@@ -165,16 +163,6 @@
} }
} }
.droplab-dropdown li.filtered-search-token {
padding: 0;
&:hover,
&:focus {
background-color: inherit;
color: inherit;
}
}
.filtered-search-term { .filtered-search-term {
.name { .name {
background-color: inherit; background-color: inherit;
...@@ -336,21 +324,12 @@ ...@@ -336,21 +324,12 @@
.filtered-search-history-dropdown-content { .filtered-search-history-dropdown-content {
max-height: none; 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; .filtered-search-history-dropdown-item,
border: 0; .filtered-search-history-clear-button {
text-align: left; white-space: nowrap;
white-space: nowrap; text-overflow: ellipsis;
text-overflow: ellipsis; }
} }
.filtered-search-history-dropdown-token { .filtered-search-history-dropdown-token {
...@@ -402,24 +381,9 @@ ...@@ -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 { .droplab-dropdown .dropdown-menu .filter-dropdown-item {
.btn { .btn {
border: 0;
width: 100%;
text-align: left;
padding: 8px 16px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden;
border-radius: 0;
.fa { .fa {
width: 15px; width: 15px;
...@@ -434,11 +398,6 @@ ...@@ -434,11 +398,6 @@
height: 17px; height: 17px;
top: 0; top: 0;
} }
&:hover,
&:focus {
@extend %filter-dropdown-item-btn-hover;
}
} }
.dropdown-light-content { .dropdown-light-content {
...@@ -459,17 +418,9 @@ ...@@ -459,17 +418,9 @@
word-break: break-all; word-break: break-all;
} }
} }
&.droplab-item-active .btn {
@extend %filter-dropdown-item-btn-hover;
}
} }
.filter-dropdown-loading { .filter-dropdown-loading {
padding: 8px 16px; padding: 8px 16px;
text-align: center; text-align: center;
} }
.issues-details-filters {
@include new-style-dropdown;
}
app/assets/stylesheets/framework/header.scss
View file @ ab0d5e27
...@@ -3,8 +3,6 @@ ...@@ -3,8 +3,6 @@
} }
.navbar-gitlab { .navbar-gitlab {
@include new-style-dropdown;
&.navbar-gitlab { &.navbar-gitlab {
padding: 0 16px; padding: 0 16px;
z-index: 1000; z-index: 1000;
......
app/assets/stylesheets/framework/lists.scss
View file @ ab0d5e27
...@@ -132,8 +132,6 @@ ul.content-list { ...@@ -132,8 +132,6 @@ ul.content-list {
} }
.controls { .controls {
@include new-style-dropdown;
float: right; float: right;
> .control-text { > .control-text {
......
app/assets/stylesheets/framework/secondary-navigation-elements.scss
View file @ ab0d5e27
...@@ -86,8 +86,6 @@ ...@@ -86,8 +86,6 @@
} }
.nav-controls { .nav-controls {
@include new-style-dropdown;
display: inline-block; display: inline-block;
float: right; float: right;
text-align: right; text-align: right;
......
app/assets/stylesheets/framework/sidebar.scss
View file @ ab0d5e27
...@@ -144,10 +144,6 @@ ...@@ -144,10 +144,6 @@
} }
} }
.issuable-sidebar {
@include new-style-dropdown;
}
.pikaday-container { .pikaday-container {
.pika-single { .pika-single {
margin-top: 2px; margin-top: 2px;
......
app/assets/stylesheets/framework/typography.scss
View file @ ab0d5e27
...@@ -343,8 +343,6 @@ a > code { ...@@ -343,8 +343,6 @@ a > code {
@extend .ref-name; @extend .ref-name;
} }
@include new-style-dropdown('.git-revision-dropdown');
/** /**
* Apply Markdown typography * Apply Markdown typography
* *
......
app/assets/stylesheets/pages/builds.scss
View file @ ab0d5e27
...@@ -323,8 +323,6 @@ ...@@ -323,8 +323,6 @@
} }
.build-dropdown { .build-dropdown {
@include new-style-dropdown;
margin: $gl-padding 0; margin: $gl-padding 0;
padding: 0; padding: 0;
......
app/assets/stylesheets/pages/clusters.scss
View file @ ab0d5e27
...@@ -13,8 +13,6 @@ ...@@ -13,8 +13,6 @@
max-width: 100%; max-width: 100%;
} }
@include new-style-dropdown('.clusters-dropdown ');
.clusters-container { .clusters-container {
.nav-bar-right { .nav-bar-right {
padding: $gl-padding-top $gl-padding; padding: $gl-padding-top $gl-padding;
......
app/assets/stylesheets/pages/cycle_analytics.scss
View file @ ab0d5e27
#cycle-analytics { #cycle-analytics {
@include new-style-dropdown;
max-width: 1000px; max-width: 1000px;
margin: 24px auto 0; margin: 24px auto 0;
position: relative; position: relative;
......
app/assets/stylesheets/pages/detail_page.scss
View file @ ab0d5e27
...@@ -32,8 +32,6 @@ ...@@ -32,8 +32,6 @@
} }
.detail-page-header-actions { .detail-page-header-actions {
@include new-style-dropdown;
align-self: center; align-self: center;
flex-shrink: 0; flex-shrink: 0;
flex: 0 0 auto; flex: 0 0 auto;
......
app/assets/stylesheets/pages/diff.scss
View file @ ab0d5e27
...@@ -581,8 +581,6 @@ ...@@ -581,8 +581,6 @@
} }
.commit-stat-summary { .commit-stat-summary {
@include new-style-dropdown;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
margin-left: -$gl-padding; margin-left: -$gl-padding;
padding-left: $gl-padding; padding-left: $gl-padding;
......
app/assets/stylesheets/pages/editor.scss
View file @ ab0d5e27
...@@ -204,8 +204,6 @@ ...@@ -204,8 +204,6 @@
.gitlab-ci-yml-selector, .gitlab-ci-yml-selector,
.dockerfile-selector, .dockerfile-selector,
.template-type-selector { .template-type-selector {
@include new-style-dropdown;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
font-family: $regular_font; font-family: $regular_font;
......
app/assets/stylesheets/pages/environments.scss
View file @ ab0d5e27
...@@ -12,8 +12,6 @@ ...@@ -12,8 +12,6 @@
.environments-container { .environments-container {
.ci-table { .ci-table {
@include new-style-dropdown;
.deployment-column { .deployment-column {
> span { > span {
word-break: break-all; word-break: break-all;
......
app/assets/stylesheets/pages/issuable.scss
View file @ ab0d5e27
...@@ -488,12 +488,6 @@ ...@@ -488,12 +488,6 @@
} }
} }
.dropdown-content {
a:hover {
color: inherit;
}
}
.dropdown-menu-toggle { .dropdown-menu-toggle {
width: 100%; width: 100%;
padding-top: 6px; padding-top: 6px;
...@@ -512,10 +506,6 @@ ...@@ -512,10 +506,6 @@
} }
} }
.sidebar-move-issue-dropdown {
@include new-style-dropdown;
}
.sidebar-move-issue-confirmation-button { .sidebar-move-issue-confirmation-button {
width: 100%; width: 100%;
......
app/assets/stylesheets/pages/issues.scss
View file @ ab0d5e27
...@@ -142,8 +142,6 @@ ul.related-merge-requests > li { ...@@ -142,8 +142,6 @@ ul.related-merge-requests > li {
} }
.issue-form { .issue-form {
@include new-style-dropdown;
.select2-container { .select2-container {
width: 250px !important; width: 250px !important;
} }
......
app/assets/stylesheets/pages/labels.scss
View file @ ab0d5e27
...@@ -116,8 +116,6 @@ ...@@ -116,8 +116,6 @@
} }
.manage-labels-list { .manage-labels-list {
@include new-style-dropdown;
> li:not(.empty-message):not(.is-not-draggable) { > li:not(.empty-message):not(.is-not-draggable) {
background-color: $white-light; background-color: $white-light;
cursor: move; cursor: move;
......
app/assets/stylesheets/pages/members.scss
View file @ ab0d5e27
...@@ -58,8 +58,6 @@ ...@@ -58,8 +58,6 @@
} }
.member-form-control { .member-form-control {
@include new-style-dropdown;
@media (max-width: $screen-xs-max) { @media (max-width: $screen-xs-max) {
padding-bottom: 5px; padding-bottom: 5px;
margin-left: 0; margin-left: 0;
...@@ -73,8 +71,6 @@ ...@@ -73,8 +71,6 @@
} }
.member-search-form { .member-search-form {
@include new-style-dropdown;
position: relative; position: relative;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
......
app/assets/stylesheets/pages/merge_requests.scss
View file @ ab0d5e27
...@@ -485,8 +485,6 @@ ...@@ -485,8 +485,6 @@
} }
.mr-source-target { .mr-source-target {
@include new-style-dropdown;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
...@@ -608,8 +606,6 @@ ...@@ -608,8 +606,6 @@
} }
.mr-version-controls { .mr-version-controls {
@include new-style-dropdown;
position: relative; position: relative;
background: $gray-light; background: $gray-light;
color: $gl-text-color; color: $gl-text-color;
...@@ -727,7 +723,3 @@ ...@@ -727,7 +723,3 @@
font-size: 16px; font-size: 16px;
} }
} }
.merge-request-form {
@include new-style-dropdown;
}
app/assets/stylesheets/pages/note_form.scss
View file @ ab0d5e27
...@@ -23,8 +23,6 @@ ...@@ -23,8 +23,6 @@
.new-note, .new-note,
.note-edit-form { .note-edit-form {
.note-form-actions { .note-form-actions {
@include new-style-dropdown;
position: relative; position: relative;
margin: $gl-padding 0 0; margin: $gl-padding 0 0;
} }
......
app/assets/stylesheets/pages/notes.scss
View file @ ab0d5e27
...@@ -490,8 +490,6 @@ ul.notes { ...@@ -490,8 +490,6 @@ ul.notes {
} }
.note-actions { .note-actions {
@include new-style-dropdown;
align-self: flex-start; align-self: flex-start;
flex-shrink: 0; flex-shrink: 0;
display: inline-flex; display: inline-flex;
......
app/assets/stylesheets/pages/notifications.scss
View file @ ab0d5e27
...@@ -14,7 +14,3 @@ ...@@ -14,7 +14,3 @@
font-size: 18px; font-size: 18px;
} }
} }
.notification-form {
@include new-style-dropdown;
}
app/assets/stylesheets/pages/pipelines.scss
View file @ ab0d5e27
...@@ -286,8 +286,6 @@ ...@@ -286,8 +286,6 @@
// Pipeline visualization // Pipeline visualization
.pipeline-actions { .pipeline-actions {
@include new-style-dropdown;
border-bottom: 0; border-bottom: 0;
} }
...@@ -703,9 +701,6 @@ button.mini-pipeline-graph-dropdown-toggle { ...@@ -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 // dropdown content for big and mini pipeline
.big-pipeline-graph-dropdown-menu, .big-pipeline-graph-dropdown-menu,
.mini-pipeline-graph-dropdown-menu { .mini-pipeline-graph-dropdown-menu {
...@@ -804,7 +799,6 @@ button.mini-pipeline-graph-dropdown-toggle { ...@@ -804,7 +799,6 @@ button.mini-pipeline-graph-dropdown-toggle {
font-weight: normal; font-weight: normal;
line-height: $line-height-base; line-height: $line-height-base;
white-space: nowrap; white-space: nowrap;
border-radius: 3px;
.ci-job-name-component { .ci-job-name-component {
align-items: center; align-items: center;
......
app/assets/stylesheets/pages/projects.scss
View file @ ab0d5e27
...@@ -323,8 +323,6 @@ ...@@ -323,8 +323,6 @@
} }
.project-repo-buttons { .project-repo-buttons {
@include new-style-dropdown;
.project-action-button .dropdown-menu { .project-action-button .dropdown-menu {
max-height: 250px; max-height: 250px;
overflow-y: auto; overflow-y: auto;
...@@ -898,8 +896,6 @@ pre.light-well { ...@@ -898,8 +896,6 @@ pre.light-well {
.new-protected-branch, .new-protected-branch,
.new-protected-tag { .new-protected-tag {
@include new-style-dropdown;
label { label {
margin-top: 6px; margin-top: 6px;
font-weight: $gl-font-weight-normal; font-weight: $gl-font-weight-normal;
...@@ -919,8 +915,6 @@ pre.light-well { ...@@ -919,8 +915,6 @@ pre.light-well {
.protected-branches-list, .protected-branches-list,
.protected-tags-list { .protected-tags-list {
@include new-style-dropdown;
margin-bottom: 30px; margin-bottom: 30px;
.settings-message { .settings-message {
......
app/assets/stylesheets/pages/search.scss
View file @ ab0d5e27
...@@ -116,11 +116,6 @@ input[type="checkbox"]:hover { ...@@ -116,11 +116,6 @@ input[type="checkbox"]:hover {
opacity: 0; opacity: 0;
display: block; display: block;
left: -5px; left: -5px;
padding: 0;
ul {
padding: 10px 0;
}
} }
.dropdown-content { .dropdown-content {
...@@ -185,8 +180,6 @@ input[type="checkbox"]:hover { ...@@ -185,8 +180,6 @@ input[type="checkbox"]:hover {
} }
.search-holder { .search-holder {
@include new-style-dropdown;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
......
app/assets/stylesheets/pages/todos.scss
View file @ ab0d5e27
...@@ -265,7 +265,3 @@ ...@@ -265,7 +265,3 @@
font-weight: $gl-font-weight-bold; font-weight: $gl-font-weight-bold;
} }
} }
.todos-filters {
@include new-style-dropdown;
}
app/assets/stylesheets/pages/tree.scss
View file @ ab0d5e27
.tree-holder { .tree-holder {
@include new-style-dropdown;
.nav-block { .nav-block {
margin: 10px 0; margin: 10px 0;
......
app/views/projects/blob/_template_selectors.html.haml
View file @ ab0d5e27
...@@ -3,15 +3,15 @@ ...@@ -3,15 +3,15 @@
Template Template
.template-selector-dropdowns-wrap .template-selector-dropdowns-wrap
.template-type-selector.js-template-type-selector-wrap.hidden .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 .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 .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 .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 .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 .template-selectors-undo-menu.hidden
%span.text-info Template applied %span.text-info Template applied
%button.btn.btn-sm.btn-info Undo %button.btn.btn-sm.btn-info Undo
app/views/projects/branches/new.html.haml
View file @ ab0d5e27
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
.col-sm-10.create-from .col-sm-10.create-from
.dropdown .dropdown
= hidden_field_tag :ref, default_ref = 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 .text-left.dropdown-toggle-text= default_ref
= icon('chevron-down') = icon('chevron-down')
= render 'shared/ref_dropdown', dropdown_class: 'wide' = render 'shared/ref_dropdown', dropdown_class: 'wide'
......
app/views/projects/tags/new.html.haml
View file @ ab0d5e27
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
.col-sm-10.create-from .col-sm-10.create-from
.dropdown .dropdown
= hidden_field_tag :ref, default_ref = 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 .text-left.dropdown-toggle-text= default_ref
= render 'shared/ref_dropdown', dropdown_class: 'wide' = render 'shared/ref_dropdown', dropdown_class: 'wide'
.help-block .help-block
......
app/views/shared/_label.html.haml
View file @ ab0d5e27
...@@ -39,7 +39,12 @@ ...@@ -39,7 +39,12 @@
%li %li
= link_to 'Edit', edit_label_path(label) = link_to 'Edit', edit_label_path(label)
%li %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 .pull-right.hidden-xs.hidden-sm.hidden-md
- if show_label_merge_requests_link - if show_label_merge_requests_link
......
doc/development/fe_guide/dropdowns.md
View file @ ab0d5e27
...@@ -4,15 +4,15 @@ ...@@ -4,15 +4,15 @@
## How to style a bootstrap dropdown ## How to style a bootstrap dropdown
1. Use the HTML structure provided by the [docs][bootstrap-dropdowns] 1. Use the HTML structure provided by the [docs][bootstrap-dropdowns]
1. Add a specific class to the top level `.dropdown` element 1. Add a specific class to the top level `.dropdown` element
```Haml ```Haml
.dropdown.my-dropdown .dropdown.my-dropdown
%button{ type: 'button', data: { toggle: 'dropdown' }, 'aria-haspopup': true, 'aria-expanded': false } %button{ type: 'button', data: { toggle: 'dropdown' }, 'aria-haspopup': true, 'aria-expanded': false }
%span.dropdown-toggle-text %span.dropdown-toggle-text
Toggle Dropdown Toggle Dropdown
= icon('chevron-down') = icon('chevron-down')
%ul.dropdown-menu %ul.dropdown-menu
%li %li
%a %a
...@@ -29,10 +29,4 @@ ...@@ -29,10 +29,4 @@
item! item!
``` ```
1. Include the mixin in CSS
```SCSS
@include new-style-dropdown('.my-dropdown ');
```
[bootstrap-dropdowns]: https://getbootstrap.com/docs/3.3/javascript/#dropdowns [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