diff --git a/core/lib/Drupal/Core/Render/Element/Dropbutton.php b/core/lib/Drupal/Core/Render/Element/Dropbutton.php
index 76fab89..c91f210 100644
--- a/core/lib/Drupal/Core/Render/Element/Dropbutton.php
+++ b/core/lib/Drupal/Core/Render/Element/Dropbutton.php
@@ -34,7 +34,8 @@ public function getInfo() {
*/
public static function preRenderDropbutton($element) {
$element['#attached']['library'][] = 'core/drupal.dropbutton';
- $element['#attributes']['class'][] = 'dropbutton';
+ $element['#attributes']['class'][] = 'dropbutton__menu';
+ $element['#attributes']['class'][] = 'js-dropbutton__menu';
if (!isset($element['#theme_wrappers'])) {
$element['#theme_wrappers'] = array();
}
diff --git a/core/misc/dropbutton/dropbutton.css b/core/misc/dropbutton/dropbutton.css
index 5990514..330b5b8 100644
--- a/core/misc/dropbutton/dropbutton.css
+++ b/core/misc/dropbutton/dropbutton.css
@@ -7,75 +7,74 @@
/**
* When a dropbutton has only one option, it is simply a button.
*/
-.dropbutton-wrapper,
-.dropbutton-wrapper div {
+.dropbutton,
+.dropbutton div {
box-sizing: border-box;
}
-.js .dropbutton-wrapper,
-.js .dropbutton-widget {
+.js .dropbutton {
display: block;
- position: relative;
+ float: left;
+ position: relative;
}
@media screen and (max-width:600px) {
- .js .dropbutton-wrapper {
+ .js .dropbutton {
width: 100%;
}
}
/* Splitbuttons */
@media screen and (min-width:600px) {
- .form-actions .dropbutton-wrapper {
+ .form-actions .dropbutton {
float: left; /* LTR */
}
- [dir="rtl"] .form-actions .dropbutton-wrapper {
+ [dir="rtl"] .form-actions .dropbutton {
float: right;
}
}
-.js .form-actions .dropbutton-widget {
+.js .form-actions .dropbutton {
position: static;
}
-.js td .dropbutton-widget {
- position: absolute;
-}
-.js td .dropbutton-wrapper {
- min-height: 2em;
+.js td .dropbutton {
+ min-height: 2em;
}
-.js td .dropbutton-multiple {
- padding-right: 10em; /* LTR */
- margin-right: 2em; /* LTR */
+.js td .dropbutton--multiple {
max-width: 100%;
}
-[dir="rtl"].js td .dropbutton-multiple {
- padding-right: 0;
- margin-right: 0;
- padding-left: 10em;
- margin-left: 2em;
-}
-.js td .dropbutton-multiple .dropbutton-action a,
-.js td .dropbutton-multiple .dropbutton-action input,
-.js td .dropbutton-multiple .dropbutton-action button {
+.js td .dropbutton--multiple .dropbutton__action {
width: auto;
}
/* UL styles are over-scoped in core, so this selector needs weight parity. */
-.js .dropbutton-widget .dropbutton {
+.js .dropbutton .dropbutton__menu {
+ display: none;
list-style-image: none;
list-style-type: none;
- margin: 0;
+ margin: 5px 0;
overflow: hidden;
- padding: 0;
+ padding: 5px 0;
+ border-radius: 5px;
+ background: #fff;
+ border: 1px solid #a6a6a6;
+ position: absolute;
+ top: 2em;
+ min-width: 100%;
}
-.js .dropbutton li,
-.js .dropbutton a {
+
+.dropbutton--multiple.is-open .dropbutton__menu {
+ display: block;
+}
+
+.js .dropbutton__menu li,
+.js .dropbutton__menu .dropbutton__action {
display: block;
outline: none;
}
-.js .dropbutton li:hover,
-.js .dropbutton li:focus,
-.js .dropbutton a:hover,
-.js .dropbutton a:focus {
+.js .dropbutton__menu li:hover,
+.js .dropbutton__menu li:focus,
+.js .dropbutton__menu a:hover,
+.js .dropbutton__menu a:focus {
outline: initial;
}
@@ -89,60 +88,58 @@
* 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.
*/
-.js .dropbutton-multiple .dropbutton-widget {
+.js .dropbutton--multiple {
padding-right: 2em; /* LTR */
}
-.js[dir="rtl"] .dropbutton-multiple .dropbutton-widget {
+.js[dir="rtl"] .dropbutton--multiple {
padding-left: 2em;
padding-right: 0;
}
-.dropbutton-multiple.open,
-.dropbutton-multiple.open .dropbutton-widget {
+.dropbutton--multiple.is-open {
max-width: none;
}
-.dropbutton-multiple.open {
+.dropbutton--multiple.is-open {
z-index: 100;
}
-.dropbutton-multiple .dropbutton .secondary-action {
- display: none;
+.dropbutton--multiple .dropbutton__menu .dropbutton__action {
+ color: #262626;
+ padding: 0.35em 1em;
+ text-decoration: none;
}
-.dropbutton-multiple.open .dropbutton .secondary-action {
- display: block;
+
+.dropbutton--multiple .dropbutton__menu .dropbutton__action:focus,
+.dropbutton--multiple .dropbutton__menu .dropbutton__action:hover {
+ background: #c8ecfe;
}
-.dropbutton-toggle {
+
+.dropbutton__trigger {
bottom: 0;
+ cursor: pointer;
display: block;
- position: absolute;
- right: 0; /* LTR */
+ /*right: 0; /* LTR */
text-indent: 110%;
top: 0;
white-space: nowrap;
width: 2em;
+ margin: 0;
+ padding: 0;
+ height: auto;
}
-[dir="rtl"] .dropbutton-toggle {
+[dir="rtl"] .dropbutton__trigger {
left: 0;
right: auto;
}
-.dropbutton-toggle button {
- background: none;
- border: 0;
- cursor: pointer;
- display: block;
- height: 100%;
- margin: 0;
- padding: 0;
- width: 100%;
-}
-.dropbutton-toggle button:hover,
-.dropbutton-toggle button:focus {
+.dropbutton__trigger:hover,
+.dropbutton__trigger:focus {
outline: initial;
}
-.dropbutton-arrow {
+.dropbutton__trigger:after {
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
border-style: solid;
border-width: 0.3333em 0.3333em 0;
+ content: "";
display: block;
height: 0;
line-height: 0;
@@ -153,12 +150,29 @@
width: 0;
overflow: hidden;
}
-[dir="rtl"] .dropbutton-arrow {
+[dir="rtl"] .dropbutton__trigger:after {
left: 0.6667em;
right: auto;
}
-.dropbutton-multiple.open .dropbutton-arrow {
+.dropbutton--multiple.is-open .dropbutton__trigger:after {
border-bottom: 0.3333em solid;
border-top-color: transparent;
top: 0.6667em;
}
+.dropbutton .button.dropbutton__action {
+ border-radius: 0;
+ border-top-left-radius: 20em;
+ border-bottom-left-radius: 20em;
+ padding-left: 1em;
+ float: left;
+ font-size: 0.825rem;
+}
+.dropbutton .button.dropbutton__trigger {
+ border-radius: 0;
+ border-top-right-radius: 20em;
+ border-bottom-right-radius: 20em;
+ padding-right: 1em;
+ float: left;
+ margin-left: -1px;
+ position: absolute;
+}
diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.js
index eebf354..1e70184 100644
--- a/core/misc/dropbutton/dropbutton.js
+++ b/core/misc/dropbutton/dropbutton.js
@@ -7,12 +7,12 @@
*/
Drupal.behaviors.dropButton = {
attach: function (context, settings) {
- var $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton');
+ var $dropbuttons = $(context).find('.dropbutton').once('dropbutton__menu');
if ($dropbuttons.length) {
// Adds the delegated handler that will toggle dropdowns on click.
var $body = $('body').once('dropbutton-click');
if ($body.length) {
- $body.on('click', '.dropbutton-toggle', dropbuttonClickHandler);
+ $body.on('click', '.dropbutton__trigger', dropbuttonClickHandler);
}
// Initialize all buttons.
var il = $dropbuttons.length;
@@ -28,7 +28,7 @@
*/
function dropbuttonClickHandler(e) {
e.preventDefault();
- $(e.target).closest('.dropbutton-wrapper').toggleClass('open');
+ $(e.target).closest('.dropbutton').toggleClass('is-open');
}
/**
@@ -50,22 +50,26 @@
var options = $.extend({'title': Drupal.t('List additional actions')}, settings);
var $dropbutton = $(dropbutton);
this.$dropbutton = $dropbutton;
- this.$list = $dropbutton.find('.dropbutton');
+ this.$list = $dropbutton.find('.dropbutton__menu');
// Find actions and mark them.
- this.$actions = this.$list.find('li').addClass('dropbutton-action');
+ this.$actions = this.$list.find('li').children().addClass('dropbutton__action');
// Add the special dropdown only if there are hidden actions.
if (this.$actions.length > 1) {
// Identify the first element of the collection.
var $primary = this.$actions.slice(0, 1);
+ // Remove parent for first dropbutton action and move.
+ $primary.unwrap().addClass('button').each(function() {
+ $(this).parent().before(this);
+ });
// Identify the secondary actions.
var $secondary = this.$actions.slice(1);
- $secondary.addClass('secondary-action');
+ //$secondary.addClass('dropbutton__action');
// Add toggle link.
$primary.after(Drupal.theme('dropbuttonToggle', options));
// Bind mouse events.
this.$dropbutton
- .addClass('dropbutton-multiple')
+ .addClass('dropbutton--multiple')
.on({
/**
* Adds a timeout to close the dropdown on mouseleave.
@@ -83,7 +87,8 @@
});
}
else {
- this.$dropbutton.addClass('dropbutton-single');
+ //TODO route through button theming
+ this.$dropbutton.addClass('dropbutton--single');
}
}
@@ -112,8 +117,8 @@
*/
toggle: function (show) {
var isBool = typeof show === 'boolean';
- show = isBool ? show : !this.$dropbutton.hasClass('open');
- this.$dropbutton.toggleClass('open', show);
+ show = isBool ? show : !this.$dropbutton.hasClass('is-open');
+ this.$dropbutton.toggleClass('is-open', show);
},
hoverIn: function () {
@@ -157,7 +162,7 @@
* A string representing a DOM fragment.
*/
dropbuttonToggle: function (options) {
- return '';
+ return '';
}
});
diff --git a/core/modules/system/templates/dropbutton-wrapper.html.twig b/core/modules/system/templates/dropbutton-wrapper.html.twig
index ca0ff7e..b07aa29 100644
--- a/core/modules/system/templates/dropbutton-wrapper.html.twig
+++ b/core/modules/system/templates/dropbutton-wrapper.html.twig
@@ -14,10 +14,8 @@
#}
{% if children %}
{% spaceless %}
-