Merge branch 'winh-cleanup-dropdowns' into 'master'
Clean up new dropdown styles Closes #39142 and #39446 See merge request gitlab-org/gitlab-ce!13676
This commit is contained in:
commit
ab0d5e2751
|
@ -143,20 +143,48 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin dropdown-link {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 5px 8px;
|
||||
@mixin dropdown-item-hover {
|
||||
background-color: $dropdown-item-hover-bg;
|
||||
color: $gl-text-color;
|
||||
line-height: initial;
|
||||
border-radius: 2px;
|
||||
white-space: nowrap;
|
||||
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: 8px 16px;
|
||||
color: $gl-text-color;
|
||||
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 {
|
||||
font-weight: $gl-font-weight-bold;
|
||||
color: $gl-text-color;
|
||||
&.is-indeterminate,
|
||||
&.is-active {
|
||||
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;
|
||||
&::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;
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -3,8 +3,6 @@
|
|||
}
|
||||
|
||||
.navbar-gitlab {
|
||||
@include new-style-dropdown;
|
||||
|
||||
&.navbar-gitlab {
|
||||
padding: 0 16px;
|
||||
z-index: 1000;
|
||||
|
|
|
@ -132,8 +132,6 @@ ul.content-list {
|
|||
}
|
||||
|
||||
.controls {
|
||||
@include new-style-dropdown;
|
||||
|
||||
float: right;
|
||||
|
||||
> .control-text {
|
||||
|
|
|
@ -86,8 +86,6 @@
|
|||
}
|
||||
|
||||
.nav-controls {
|
||||
@include new-style-dropdown;
|
||||
|
||||
display: inline-block;
|
||||
float: right;
|
||||
text-align: right;
|
||||
|
|
|
@ -144,10 +144,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.issuable-sidebar {
|
||||
@include new-style-dropdown;
|
||||
}
|
||||
|
||||
.pikaday-container {
|
||||
.pika-single {
|
||||
margin-top: 2px;
|
||||
|
|
|
@ -343,8 +343,6 @@ a > code {
|
|||
@extend .ref-name;
|
||||
}
|
||||
|
||||
@include new-style-dropdown('.git-revision-dropdown');
|
||||
|
||||
/**
|
||||
* Apply Markdown typography
|
||||
*
|
||||
|
|
|
@ -323,8 +323,6 @@
|
|||
}
|
||||
|
||||
.build-dropdown {
|
||||
@include new-style-dropdown;
|
||||
|
||||
margin: $gl-padding 0;
|
||||
padding: 0;
|
||||
|
||||
|
|
|
@ -13,8 +13,6 @@
|
|||
max-width: 100%;
|
||||
}
|
||||
|
||||
@include new-style-dropdown('.clusters-dropdown ');
|
||||
|
||||
.clusters-container {
|
||||
.nav-bar-right {
|
||||
padding: $gl-padding-top $gl-padding;
|
||||
|
|
|
@ -1,6 +1,4 @@
|
|||
#cycle-analytics {
|
||||
@include new-style-dropdown;
|
||||
|
||||
max-width: 1000px;
|
||||
margin: 24px auto 0;
|
||||
position: relative;
|
||||
|
|
|
@ -32,8 +32,6 @@
|
|||
}
|
||||
|
||||
.detail-page-header-actions {
|
||||
@include new-style-dropdown;
|
||||
|
||||
align-self: center;
|
||||
flex-shrink: 0;
|
||||
flex: 0 0 auto;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -12,8 +12,6 @@
|
|||
|
||||
.environments-container {
|
||||
.ci-table {
|
||||
@include new-style-dropdown;
|
||||
|
||||
.deployment-column {
|
||||
> span {
|
||||
word-break: break-all;
|
||||
|
|
|
@ -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%;
|
||||
|
||||
|
|
|
@ -142,8 +142,6 @@ ul.related-merge-requests > li {
|
|||
}
|
||||
|
||||
.issue-form {
|
||||
@include new-style-dropdown;
|
||||
|
||||
.select2-container {
|
||||
width: 250px !important;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -23,8 +23,6 @@
|
|||
.new-note,
|
||||
.note-edit-form {
|
||||
.note-form-actions {
|
||||
@include new-style-dropdown;
|
||||
|
||||
position: relative;
|
||||
margin: $gl-padding 0 0;
|
||||
}
|
||||
|
|
|
@ -490,8 +490,6 @@ ul.notes {
|
|||
}
|
||||
|
||||
.note-actions {
|
||||
@include new-style-dropdown;
|
||||
|
||||
align-self: flex-start;
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
|
|
|
@ -14,7 +14,3 @@
|
|||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-form {
|
||||
@include new-style-dropdown;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -265,7 +265,3 @@
|
|||
font-weight: $gl-font-weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
.todos-filters {
|
||||
@include new-style-dropdown;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,4 @@
|
|||
.tree-holder {
|
||||
@include new-style-dropdown;
|
||||
|
||||
.nav-block {
|
||||
margin: 10px 0;
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue