Dropdown toggle button styling
This commit is contained in:
parent
8651137a4f
commit
22b89f35c7
3 changed files with 64 additions and 16 deletions
|
@ -17,6 +17,47 @@
|
|||
.dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu-toggle {
|
||||
border-color: $dropdown-toggle-hover-border-color;
|
||||
|
||||
.fa {
|
||||
color: $dropdown-toggle-hover-icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-toggle {
|
||||
position: relative;
|
||||
min-width: 160px;
|
||||
padding: 5px 20px 5px 10px;
|
||||
background-color: $dropdown-toggle-bg;
|
||||
color: $dropdown-toggle-color;
|
||||
font-size: 15px;
|
||||
text-align: left;
|
||||
border: 1px solid $dropdown-toggle-border-color;
|
||||
border-radius: 2px;
|
||||
outline: 0;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
.fa {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 6px;
|
||||
margin-top: -4px;
|
||||
color: $dropdown-toggle-icon-color;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
&:hover, {
|
||||
border-color: $dropdown-toggle-hover-border-color;
|
||||
|
||||
.fa {
|
||||
color: $dropdown-toggle-hover-icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
|
|
|
@ -143,3 +143,10 @@ $dropdown-input-color: #C7C7C7;
|
|||
$dropdown-input-focus-border: rgb(58, 171, 240);
|
||||
$dropdown-input-focus-shadow: rgba(#000, .2);
|
||||
$dropdown-loading-bg: rgba(#fff, .6);
|
||||
|
||||
$dropdown-toggle-bg: #fff;
|
||||
$dropdown-toggle-color: #626262;
|
||||
$dropdown-toggle-border-color: #EAEAEA;
|
||||
$dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 15%);
|
||||
$dropdown-toggle-icon-color: #C4C4C4;
|
||||
$dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
|
||||
|
|
|
@ -182,9 +182,9 @@
|
|||
.nav-controls
|
||||
= text_field_tag 'sample', nil, class: 'form-control'
|
||||
.dropdown
|
||||
%button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
|
||||
%button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
|
||||
%span Sort by name
|
||||
%b.caret
|
||||
= icon('chevron-down')
|
||||
%ul.dropdown-menu
|
||||
%li
|
||||
%a Sort by date
|
||||
|
@ -219,17 +219,17 @@
|
|||
.example
|
||||
.clearfix
|
||||
.dropdown.inline.pull-left
|
||||
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
|
||||
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||
Dropdown
|
||||
%b.caret
|
||||
= icon('chevron-down')
|
||||
%ul.dropdown-menu
|
||||
%li
|
||||
%a{href: "#"}
|
||||
Dropdown Option
|
||||
.dropdown.inline.pull-right
|
||||
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
|
||||
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||
Dropdown
|
||||
%b.caret
|
||||
= icon('chevron-down')
|
||||
%ul.dropdown-menu.dropdown-menu-align-right
|
||||
%li
|
||||
%a{href: "#"}
|
||||
|
@ -237,9 +237,9 @@
|
|||
.example
|
||||
%div
|
||||
.dropdown.inline
|
||||
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
|
||||
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||
Dropdown
|
||||
%b.caret
|
||||
= icon('chevron-down')
|
||||
%ul.dropdown-menu.dropdown-menu-selectable
|
||||
%li
|
||||
%a.is-active{href: "#"}
|
||||
|
@ -247,9 +247,9 @@
|
|||
.example
|
||||
%div
|
||||
.dropdown.inline
|
||||
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
|
||||
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||
Dropdown
|
||||
%b.caret
|
||||
= icon('chevron-down')
|
||||
.dropdown-menu.dropdown-select.dropdown-menu-selectable
|
||||
.dropdown-title
|
||||
%span Dropdown Title
|
||||
|
@ -286,9 +286,9 @@
|
|||
%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'}}
|
||||
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||
Dropdown loading
|
||||
%b.caret
|
||||
= icon('chevron-down')
|
||||
.dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
|
||||
.dropdown-title
|
||||
%span Dropdown Title
|
||||
|
@ -330,9 +330,9 @@
|
|||
.example
|
||||
%div
|
||||
.dropdown.inline
|
||||
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
|
||||
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||
Dropdown user
|
||||
%b.caret
|
||||
= icon('chevron-down')
|
||||
.dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
|
||||
.dropdown-title
|
||||
%span Dropdown Title
|
||||
|
@ -354,9 +354,9 @@
|
|||
.example
|
||||
%div
|
||||
.dropdown.inline
|
||||
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
|
||||
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||
Dropdown page 2
|
||||
%b.caret
|
||||
= icon('chevron-down')
|
||||
.dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two
|
||||
.dropdown-page-one
|
||||
.dropdown-title
|
||||
|
|
Loading…
Reference in a new issue