BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit c6f51662 by Phil Hughes
Options

Added CSS for new dropdowns

See #3279 for the designs
parent 491ac7ce
Showing with 353 additions and 0 deletions
app/assets/stylesheets/framework/dropdowns.scss
......@@ -36,6 +36,21 @@
border-radius: $border-radius-base;
box-shadow: 0 2px 4px $dropdown-shadow-color;
&.is-loading {
.dropdown-content {
display: none;
}
.dropdown-loading {
display: block;
}
}
ul {
margin: 0;
padding: 0;
}
li {
text-align: left;
list-style: none;
......@@ -68,6 +83,57 @@
}
}
.dropdown-menu-paging {
.dropdown-page-two {
display: none;
}
&.is-page-two {
.dropdown-page-one {
display: none;
}
.dropdown-page-two {
display: block;
}
}
}
.dropdown-menu-user {
.avatar {
float: left;
width: 30px;
height: 30px;
margin: 0 10px 0 0;
}
}
.dropdown-menu-user-link {
padding-top: 7px;
padding-bottom: 7px;
}
.dropdown-menu-user-full-name {
display: block;
margin-bottom: 2px;
line-height: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.dropdown-menu-user-username {
display: block;
line-height: 1;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.dropdown-select {
width: 280px;
}
.dropdown-menu-align-right {
left: auto;
right: 0;
......@@ -101,3 +167,112 @@
font-size: 13px;
line-height: 22px;
}
.dropdown-title {
position: relative;
margin-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;
font-weight: 600;
line-height: 1;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
border-bottom: 1px solid $dropdown-divider-color;
overflow: hidden;
}
.dropdown-title-button {
position: absolute;
top: -1px;
padding: 0;
color: #BFBFBF;
font-size: 14px;
border: 0;
background: none;
&:hover {
color: darken(#BFBFBF, 15%);
}
}
.dropdown-menu-close {
right: 0;
}
.dropdown-menu-back {
left: 0;
}
.dropdown-input {
position: relative;
margin-bottom: 10px;
.fa {
position: absolute;
top: 10px;
right: 10px;
color: #C7C7C7;
font-size: 12px;
pointer-events: none;
}
}
.dropdown-input-field {
width: 100%;
padding: 0 7px;
color: #C7C7C7;
line-height: 30px;
border: 1px solid $dropdown-divider-color;
border-radius: 2px;
outline: 0;
&:focus {
color: $dropdown-link-color;
border-color: rgb(58, 171, 240);
box-shadow: 0 0 4px rgba(#000, .2);
+ .fa {
color: $dropdown-link-color;
}
}
&:hover {
+ .fa {
color: $dropdown-link-color;
}
}
}
.dropdown-content {
max-height: 200px;
overflow-y: scroll;
}
.dropdown-footer {
padding-top: 10px;
margin-top: 10px;
font-size: 13px;
border-top: 1px solid $dropdown-divider-color;
}
.dropdown-loading {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: 9;
background-color: rgba(#fff, .6);
font-size: 28px;
.fa {
position: absolute;
top: 50%;
left: 50%;
margin-top: -14px;
margin-left: -14px;
}
}
app/views/help/ui.html.haml
......@@ -19,6 +19,8 @@
%li
= link_to 'Buttons', '#buttons'
%li
= link_to 'Dropdowns', '#dropdowns'
%li
= link_to 'Panels', '#panels'
%li
= link_to 'Alerts', '#alerts'
......@@ -212,6 +214,182 @@
%button.btn.btn-danger{:type => "button"} Danger
%button.btn.btn-link{:type => "button"} Link
%h2#dropdowns Dropdowns
.example
.clearfix
.dropdown.inline.pull-left
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
Dropdown
%b.caret
%ul.dropdown-menu
%li
%a{href: "#"}
Dropdown Option
.dropdown.inline.pull-right
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
Dropdown
%b.caret
%ul.dropdown-menu.dropdown-menu-align-right
%li
%a{href: "#"}
Dropdown Option
.example
%div
.dropdown.inline
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
Dropdown
%b.caret
%ul.dropdown-menu.dropdown-menu-selectable
%li
%a.is-active{href: "#"}
Dropdown Option
.example
%div
.dropdown.inline
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
Dropdown
%b.caret
.dropdown-menu.dropdown-select.dropdown-menu-selectable
.dropdown-title
%span Dropdown Title
%button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
= icon('times')
.dropdown-input
%input.dropdown-input-field{type: "search", placeholder: "Filter results"}
= icon('search')
.dropdown-content
%ul
%li
%a.is-active{href: "#"}
Dropdown Option
%li
%a{href: "#"}
Dropdown Option
%li.divider
%li
%a{href: "#"}
Dropdown Option
%li
%a{href: "#"}
Dropdown Option
%li
%a{href: "#"}
Dropdown Option
%li
%a{href: "#"}
Dropdown Option
%li
%a{href: "#"}
Dropdown Option
.dropdown-footer
%strong Tip:
If an author is not a member of this project, you can still filter by his name while using the search field.
.dropdown.inline
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
Dropdown loading
%b.caret
.dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
.dropdown-title
%span Dropdown Title
%button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
= icon('times')
.dropdown-input
%input.dropdown-input-field{type: "search", placeholder: "Filter results"}
= icon('search')
.dropdown-content
%ul
%li
%a.is-active{href: "#"}
Dropdown Option
%li
%a{href: "#"}
Dropdown Option
%li.divider
%li
%a{href: "#"}
Dropdown Option
%li
%a{href: "#"}
Dropdown Option
%li
%a{href: "#"}
Dropdown Option
%li
%a{href: "#"}
Dropdown Option
%li
%a{href: "#"}
Dropdown Option
.dropdown-footer
%strong Tip:
If an author is not a member of this project, you can still filter by his name while using the search field.
.dropdown-loading
= icon('spinner spin')
.example
%div
.dropdown.inline
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
Dropdown user
%b.caret
.dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
.dropdown-title
%span Dropdown Title
%button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
= icon('times')
.dropdown-input
%input.dropdown-input-field{type: "search", placeholder: "Filter results"}
= icon('search')
.dropdown-content
%ul
%li
%a.dropdown-menu-user-link.is-active{href: "#"}
= link_to_member_avatar(current_user, size: 30)
%strong.dropdown-menu-user-full-name
= current_user.name
.dropdown-menu-user-username
= current_user.to_reference
.example
%div
.dropdown.inline.open
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
Dropdown page 2
%b.caret
.dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two
.dropdown-page-one
.dropdown-title
%button.dropdown-title-button.dropdown-menu-back{aria: {label: "Go back"}}
= icon('arrow-left')
%span Dropdown Title
%button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
= icon('times')
.dropdown-input
%input.dropdown-input-field{type: "search", placeholder: "Filter results"}
= icon('search')
.dropdown-content
%ul
%li
%a.dropdown-menu-user-link.is-active{href: "#"}
= link_to_member_avatar(current_user, size: 30)
%strong.dropdown-menu-user-full-name
= current_user.name
.dropdown-menu-user-username
= current_user.to_reference
.dropdown-page-two
.dropdown-title
%button.dropdown-title-button.dropdown-menu-back{aria: {label: "Go back"}}
= icon('arrow-left')
%span Create label
%button.dropdown-title-button.dropdown-menu-close{aria: {label: "Close"}}
= icon('times')
.dropdown-input
%input.dropdown-input-field{type: "search", placeholder: "Name new label"}
.dropdown-content
%button.btn.btn-primary
Create
%h2#panels Panels
.row
......
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