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 {
|
.dropdown-menu {
|
||||||
display: block;
|
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 {
|
.dropdown-menu {
|
||||||
|
|
|
@ -143,3 +143,10 @@ $dropdown-input-color: #C7C7C7;
|
||||||
$dropdown-input-focus-border: rgb(58, 171, 240);
|
$dropdown-input-focus-border: rgb(58, 171, 240);
|
||||||
$dropdown-input-focus-shadow: rgba(#000, .2);
|
$dropdown-input-focus-shadow: rgba(#000, .2);
|
||||||
$dropdown-loading-bg: rgba(#fff, .6);
|
$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
|
.nav-controls
|
||||||
= text_field_tag 'sample', nil, class: 'form-control'
|
= text_field_tag 'sample', nil, class: 'form-control'
|
||||||
.dropdown
|
.dropdown
|
||||||
%button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
|
%button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
|
||||||
%span Sort by name
|
%span Sort by name
|
||||||
%b.caret
|
= icon('chevron-down')
|
||||||
%ul.dropdown-menu
|
%ul.dropdown-menu
|
||||||
%li
|
%li
|
||||||
%a Sort by date
|
%a Sort by date
|
||||||
|
@ -219,17 +219,17 @@
|
||||||
.example
|
.example
|
||||||
.clearfix
|
.clearfix
|
||||||
.dropdown.inline.pull-left
|
.dropdown.inline.pull-left
|
||||||
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
|
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||||
Dropdown
|
Dropdown
|
||||||
%b.caret
|
= icon('chevron-down')
|
||||||
%ul.dropdown-menu
|
%ul.dropdown-menu
|
||||||
%li
|
%li
|
||||||
%a{href: "#"}
|
%a{href: "#"}
|
||||||
Dropdown Option
|
Dropdown Option
|
||||||
.dropdown.inline.pull-right
|
.dropdown.inline.pull-right
|
||||||
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
|
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||||
Dropdown
|
Dropdown
|
||||||
%b.caret
|
= icon('chevron-down')
|
||||||
%ul.dropdown-menu.dropdown-menu-align-right
|
%ul.dropdown-menu.dropdown-menu-align-right
|
||||||
%li
|
%li
|
||||||
%a{href: "#"}
|
%a{href: "#"}
|
||||||
|
@ -237,9 +237,9 @@
|
||||||
.example
|
.example
|
||||||
%div
|
%div
|
||||||
.dropdown.inline
|
.dropdown.inline
|
||||||
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
|
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||||
Dropdown
|
Dropdown
|
||||||
%b.caret
|
= icon('chevron-down')
|
||||||
%ul.dropdown-menu.dropdown-menu-selectable
|
%ul.dropdown-menu.dropdown-menu-selectable
|
||||||
%li
|
%li
|
||||||
%a.is-active{href: "#"}
|
%a.is-active{href: "#"}
|
||||||
|
@ -247,9 +247,9 @@
|
||||||
.example
|
.example
|
||||||
%div
|
%div
|
||||||
.dropdown.inline
|
.dropdown.inline
|
||||||
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
|
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||||
Dropdown
|
Dropdown
|
||||||
%b.caret
|
= icon('chevron-down')
|
||||||
.dropdown-menu.dropdown-select.dropdown-menu-selectable
|
.dropdown-menu.dropdown-select.dropdown-menu-selectable
|
||||||
.dropdown-title
|
.dropdown-title
|
||||||
%span Dropdown Title
|
%span Dropdown Title
|
||||||
|
@ -286,9 +286,9 @@
|
||||||
%strong Tip:
|
%strong Tip:
|
||||||
If an author is not a member of this project, you can still filter by his name while using the search field.
|
If an author is not a member of this project, you can still filter by his name while using the search field.
|
||||||
.dropdown.inline
|
.dropdown.inline
|
||||||
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
|
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||||
Dropdown loading
|
Dropdown loading
|
||||||
%b.caret
|
= icon('chevron-down')
|
||||||
.dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
|
.dropdown-menu.dropdown-select.dropdown-menu-selectable.is-loading
|
||||||
.dropdown-title
|
.dropdown-title
|
||||||
%span Dropdown Title
|
%span Dropdown Title
|
||||||
|
@ -330,9 +330,9 @@
|
||||||
.example
|
.example
|
||||||
%div
|
%div
|
||||||
.dropdown.inline
|
.dropdown.inline
|
||||||
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
|
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||||
Dropdown user
|
Dropdown user
|
||||||
%b.caret
|
= icon('chevron-down')
|
||||||
.dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
|
.dropdown-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user
|
||||||
.dropdown-title
|
.dropdown-title
|
||||||
%span Dropdown Title
|
%span Dropdown Title
|
||||||
|
@ -354,9 +354,9 @@
|
||||||
.example
|
.example
|
||||||
%div
|
%div
|
||||||
.dropdown.inline
|
.dropdown.inline
|
||||||
%button.dropdown-toggle.btn{type: 'button', data: {toggle: 'dropdown'}}
|
%button.dropdown-menu-toggle{type: 'button', data: {toggle: 'dropdown'}}
|
||||||
Dropdown page 2
|
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-menu.dropdown-select.dropdown-menu-selectable.dropdown-menu-user.dropdown-menu-paging.is-page-two
|
||||||
.dropdown-page-one
|
.dropdown-page-one
|
||||||
.dropdown-title
|
.dropdown-title
|
||||||
|
|
Loading…
Reference in a new issue