Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
project
drupal
Commits
3e790105
Commit
3e790105
authored
Nov 01, 2012
by
Dries Buytaert
Browse files
Issue
#1799498
by seutje, tim.plunkett, delmarr, jessebeach: improve dropbutton.
parent
e76af8e7
Changes
7
Hide whitespace changes
Inline
Side-by-side
core/includes/theme.inc
View file @
3e790105
...
...
@@ -1721,7 +1721,9 @@ function theme_links($variables) {
* the dropbutton menu. Properties used: #children.
*/
function
theme_dropbutton_wrapper
(
$variables
)
{
return
'<div class="dropbutton-wrapper"><div class="dropbutton-widget">'
.
$variables
[
'element'
][
'#children'
]
.
'</div></div>'
;
if
(
!
empty
(
$variables
[
'element'
][
'#children'
]))
{
return
'<div class="dropbutton-wrapper"><div class="dropbutton-widget">'
.
$variables
[
'element'
][
'#children'
]
.
'</div></div>'
;
}
}
/**
...
...
core/misc/dropbutton/dropbutton.base-rtl.css
View file @
3e790105
...
...
@@ -7,10 +7,6 @@
/**
* The dropbutton arrow.
*/
.dropbutton-widget
{
left
:
0
;
right
:
auto
;
}
.dropbutton-toggle
{
left
:
0
;
right
:
auto
;
...
...
@@ -19,7 +15,7 @@
left
:
0.6667em
;
right
:
auto
;
}
.dropbutton-multiple
.dropbutton-widget
{
.js
.dropbutton-multiple
.dropbutton-widget
{
padding-left
:
2em
;
padding-right
:
0
;
}
core/misc/dropbutton/dropbutton.base.css
View file @
3e790105
...
...
@@ -13,28 +13,28 @@
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
;
}
.dropbutton-wrapper
{
.js
.dropbutton-wrapper
{
display
:
block
;
min-height
:
2em
;
position
:
relative
;
}
.dropbutton-widget
{
position
:
absolute
;
right
:
0
;
/* LTR */
}
.dropbutton-wrapper
,
.dropbutton-widget
{
.js
.dropbutton-wrapper
,
.js
.dropbutton-widget
{
max-width
:
100%
;
}
.js
.dropbutton-widget
{
position
:
absolute
;
}
/* UL styles are over-scoped in core, so this selector needs weight parity. */
.dropbutton-widget
.dropbutton
{
.js
.dropbutton-widget
.dropbutton
{
list-style-image
:
none
;
list-style-type
:
none
;
margin
:
0
;
overflow
:
hidden
;
padding
:
0
;
}
.dropbutton
li
,
.dropbutton
a
{
.js
.dropbutton
li
,
.js
.dropbutton
a
{
display
:
block
;
}
...
...
@@ -48,7 +48,7 @@
* The arrow is created using border on a zero-width, zero-height span.
* The arrow inherits the link color, but can be overridden with border colors.
*/
.dropbutton-multiple
.dropbutton-widget
{
.js
.dropbutton-multiple
.dropbutton-widget
{
padding-right
:
2em
;
/* LTR */
}
.dropbutton-multiple.open
,
...
...
@@ -97,6 +97,7 @@
right
:
40%
;
/* 0.6667em; */
/* LTR */
top
:
0.9em
;
width
:
0
;
overflow
:
hidden
;
}
.dropbutton-multiple.open
.dropbutton-arrow
{
border-bottom
:
0.3333em
solid
;
...
...
core/misc/dropbutton/dropbutton.js
View file @
3e790105
...
...
@@ -59,7 +59,7 @@ function DropButton (dropbutton, settings) {
var
$primary
=
this
.
$actions
.
slice
(
0
,
1
);
// Identify the secondary actions.
var
$secondary
=
this
.
$actions
.
slice
(
1
);
$
(
$secondary
)
.
addClass
(
'
secondary-action
'
);
$secondary
.
addClass
(
'
secondary-action
'
);
// Add toggle link.
$primary
.
after
(
Drupal
.
theme
(
'
dropbuttonToggle
'
,
options
));
// Bind mouse events.
...
...
@@ -73,7 +73,12 @@ function DropButton (dropbutton, settings) {
/**
* Clears timeout when mouseout of the dropdown.
*/
'
mouseenter.dropbutton
'
:
$
.
proxy
(
this
.
hoverIn
,
this
)
'
mouseenter.dropbutton
'
:
$
.
proxy
(
this
.
hoverIn
,
this
),
/**
* Similar to mouseleave/mouseenter, but for keyboard navigation.
*/
'
focusout.dropbutton
'
:
$
.
proxy
(
this
.
focusOut
,
this
),
'
focusin.dropbutton
'
:
$
.
proxy
(
this
.
focusIn
,
this
)
});
}
}
...
...
@@ -125,6 +130,14 @@ $.extend(DropButton.prototype, {
close
:
function
()
{
this
.
toggle
(
false
);
},
focusOut
:
function
(
e
)
{
this
.
hoverOut
.
call
(
this
,
e
);
},
focusIn
:
function
(
e
)
{
this
.
hoverIn
.
call
(
this
,
e
);
}
});
...
...
core/misc/dropbutton/dropbutton.theme.css
View file @
3e790105
...
...
@@ -4,14 +4,11 @@
* General styles for dropbuttons.
*/
.dropbutton-wrapper
{
cursor
:
pointer
;
}
.dropbutton-widget
{
.js
.dropbutton-widget
{
background-color
:
white
;
border
:
1px
solid
#cccccc
;
}
.dropbutton-widget
:hover
{
.js
.dropbutton-widget
:hover
{
border-color
:
#b8b8b8
;
}
.dropbutton
.dropbutton-action
>
*
{
...
...
core/themes/bartik/css/style.css
View file @
3e790105
...
...
@@ -1609,15 +1609,15 @@ div.admin-panel .description {
}
/* ---------- Dropbutton ----------- */
.dropbutton-widget
{
.js
.dropbutton-widget
{
background-color
:
white
;
border-radius
:
5px
;
}
.dropbutton-widget
:hover
{
.js
.dropbutton-widget
:hover
{
background-color
:
#f8f8f8
;
border-color
:
#b8b8b8
;
}
.dropbutton-multiple.open
.dropbutton-widget
:hover
{
.js
.dropbutton-multiple.open
.dropbutton-widget
:hover
{
background-color
:
white
;
}
...
...
core/themes/seven/style.css
View file @
3e790105
...
...
@@ -1036,7 +1036,7 @@ div.add-or-remove-shortcuts {
}
/* Dropbutton */
.dropbutton-widget
{
.js
.dropbutton-widget
{
background-color
:
#fff
;
background-image
:
-moz-linear-gradient
(
-90deg
,
rgba
(
255
,
255
,
255
,
0
),
#e7e7e7
);
background-image
:
-o-linear-gradient
(
-90deg
,
rgba
(
255
,
255
,
255
,
0
),
#e7e7e7
);
...
...
@@ -1044,11 +1044,11 @@ div.add-or-remove-shortcuts {
background-image
:
linear-gradient
(
-90deg
,
rgba
(
255
,
255
,
255
,
0
),
#e7e7e7
);
border-radius
:
5px
;
}
.dropbutton-widget
:hover
{
.js
.dropbutton-widget
:hover
{
background-color
:
#f0f0f0
;
border-color
:
#b8b8b8
;
}
.dropbutton-multiple.open
.dropbutton-widget
:hover
{
.js
.dropbutton-multiple.open
.dropbutton-widget
:hover
{
background-color
:
#fff
;
}
.dropbutton-content
li
:first-child
>
*
{
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment