From 55258d70ea40fac3bf695e6609fbb8d05a93ff22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?"J.=20Rene=CC=81e=20Beach"?= Date: Sun, 21 Oct 2012 21:56:24 -0400 Subject: [PATCH] Issue #1799498 by tim.plunkett, seutje, jessebeach: Improve dropbutton MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: J. ReneĢe Beach --- core/includes/theme.inc | 4 +++- core/misc/dropbutton/dropbutton.base-rtl.css | 6 +----- core/misc/dropbutton/dropbutton.base.css | 23 ++++++++++++----------- core/misc/dropbutton/dropbutton.js | 2 +- core/misc/dropbutton/dropbutton.theme.css | 7 ++----- core/themes/bartik/css/style.css | 6 +++--- core/themes/seven/style.css | 6 +++--- 7 files changed, 25 insertions(+), 29 deletions(-) diff --git a/core/includes/theme.inc b/core/includes/theme.inc index cc29a98..0c35b90 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -1721,7 +1721,9 @@ function theme_links($variables) { * the dropbutton menu. Properties used: #children. */ function theme_dropbutton_wrapper($variables) { - return '
' . $variables['element']['#children'] . '
'; + if (!empty($variables['element']['#children'])) { + return '
' . $variables['element']['#children'] . '
'; + } } /** diff --git a/core/misc/dropbutton/dropbutton.base-rtl.css b/core/misc/dropbutton/dropbutton.base-rtl.css index 917c2a8..d677c84 100644 --- a/core/misc/dropbutton/dropbutton.base-rtl.css +++ b/core/misc/dropbutton/dropbutton.base-rtl.css @@ -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; } diff --git a/core/misc/dropbutton/dropbutton.base.css b/core/misc/dropbutton/dropbutton.base.css index 307484e..e0aefeb 100644 --- a/core/misc/dropbutton/dropbutton.base.css +++ b/core/misc/dropbutton/dropbutton.base.css @@ -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; diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.js index 2bd9cda..360daa0 100644 --- a/core/misc/dropbutton/dropbutton.js +++ b/core/misc/dropbutton/dropbutton.js @@ -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. diff --git a/core/misc/dropbutton/dropbutton.theme.css b/core/misc/dropbutton/dropbutton.theme.css index 041724b..c0a347f 100644 --- a/core/misc/dropbutton/dropbutton.theme.css +++ b/core/misc/dropbutton/dropbutton.theme.css @@ -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 > * { diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css index 6f4cb14..f0e244c 100644 --- a/core/themes/bartik/css/style.css +++ b/core/themes/bartik/css/style.css @@ -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; } diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css index 7b8ae1b..3b5776a 100644 --- a/core/themes/seven/style.css +++ b/core/themes/seven/style.css @@ -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 > * { -- 1.7.10.4