diff --git a/core/core.libraries.yml b/core/core.libraries.yml index 3d5fcef..5de1ccf 100644 --- a/core/core.libraries.yml +++ b/core/core.libraries.yml @@ -197,10 +197,8 @@ drupal.dropbutton: js: misc/dropbutton/dropbutton.js: {} css: - component: - misc/dropbutton/dropbutton.css: {} theme: - misc/dropbutton/dropbutton.theme.css: {} + misc/dropbutton/dropbutton.css: {} dependencies: - core/jquery - core/drupal diff --git a/core/includes/theme.inc b/core/includes/theme.inc index b1a911a..341221a 100644 --- a/core/includes/theme.inc +++ b/core/includes/theme.inc @@ -1678,7 +1678,7 @@ function drupal_common_theme() { 'variables' => array('links' => array(), 'attributes' => array('class' => array('links')), 'heading' => array(), 'set_active_class' => FALSE), ), 'dropbutton_wrapper' => array( - 'variables' => array('children' => NULL), + 'variables' => array('attributes' => array(), 'children' => NULL), ), 'image' => array( // HTML 4 and XHTML 1.0 always require an alt attribute. The HTML 5 draft diff --git a/core/misc/dropbutton/dropbutton.css b/core/misc/dropbutton/dropbutton.css index c2e6820..308a2d8 100644 --- a/core/misc/dropbutton/dropbutton.css +++ b/core/misc/dropbutton/dropbutton.css @@ -1,133 +1,75 @@ - /** * @file - * Base styles for dropbuttons. + * Dropbutton styling. + * + * A dropbutton is a widget that displays a list of action links as a button + * with a primary action. Secondary actions are hidden in a dropdown menu. + * */ /** - * When a dropbutton has only one option, it is simply a button. + * The button class is added when there is only one action. This should be moved + * to button.css */ -.dropbutton, -.dropbutton div { - box-sizing: border-box; -} -.js .dropbutton { - position: relative; - display: block; - float: left; -} - -@media screen and (max-width:600px) { - .js .dropbutton { - width: 100%; - } -} - -/* Splitbuttons */ -@media screen and (min-width:600px) { - .form-actions .dropbutton { - float: left; /* LTR */ - } - [dir="rtl"] .form-actions .dropbutton { - float: right; - } -} -.js .form-actions .dropbutton { - position: static; -} -.js td .dropbutton { - min-height: 2em; -} -.js td .dropbutton--multiple { - max-width: 100%; -} -.js td .dropbutton--multiple .dropbutton__action { - width: auto; -} - -/* UL styles are over-scoped in core, so this selector needs weight parity. */ -.js .dropbutton .dropbutton__menu { - /* Positioning declarations */ - position: absolute; - top: 2em; - /* Box model declarations */ - display: none; - margin: 5px 0; - min-width: 100%; - padding: 5px 0; - /* Other declarations */ - background: #fff; - border: 1px solid #a6a6a6; - border-radius: 5px; - list-style-image: none; - list-style-type: none; - overflow: hidden; -} - -.dropbutton--multiple.is-open .dropbutton__menu { - display: block; -} - -.js .dropbutton__menu li, -.js .dropbutton__menu .dropbutton__action { - display: block; - outline: none; +.button { + background: #FFF; + color: #333; + border: 1px solid #BBB; + padding: 0.4em 1em; + border-radius: 20em; + text-decoration: none; } - -.js .dropbutton__menu li:hover, -.js .dropbutton__menu li:focus, -.js .dropbutton__menu a:hover, -.js .dropbutton__menu a:focus { - outline: initial; +.button:hover { + background-color: #EFEFEF; } /** - * The dropbutton styling. - * - * A dropbutton is a widget that displays a list of action links as a button - * with a primary action. Secondary actions are hidden behind a click on a - * twisty arrow. - * - * 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. + * The dropbutton class is added with Javascript when there is more than one + * action. */ -.js .dropbutton--multiple { +.dropbutton { + position: relative; + display: inline-block; padding-right: 2em; /* LTR */ } -[dir="rtl"].js .dropbutton--multiple { +[dir="rtl"] .dropbutton { padding-left: 2em; padding-right: 0; } -.dropbutton--multiple.is-open { +@media screen and (max-width:600px) { + .dropbutton { + width: 100%; + } +} +.dropbutton.is-open { max-width: none; z-index: 100; } -.dropbutton--multiple .dropbutton__menu .dropbutton__action { - padding: 0.35em 1em; - color: #262626; - text-decoration: none; -} -.dropbutton--multiple .dropbutton__menu .dropbutton__action:focus, -.dropbutton--multiple .dropbutton__menu .dropbutton__action:hover { - background: #c8ecfe; +/* The primary action, always visible. */ +.dropbutton__primary-action { + padding-left: 1em; + display: block; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + color: #333; + border-right: 0; } +/* The dropbutton trigger toggles the hidden menu. */ .dropbutton__trigger { - /* Positioning declarations */ + position: absolute; + margin: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + top: 0; bottom: 0; right: 0; /* LTR */ - top: 0; - /* Box model declarations */ display: block; height: auto; - margin: 0; - padding: 0; width: 2em; - /* Other declarations */ cursor: pointer; - text-indent: 110%; - white-space: nowrap; + background: url(../icons/333333/caret-down.svg) no-repeat center center; } [dir="rtl"] .dropbutton__trigger { left: 0; @@ -137,54 +79,40 @@ .dropbutton__trigger:focus { outline: initial; } -.dropbutton__trigger:after { - /* Positioning declarations */ + +/* The dropbutton menu contains the hidden action items. */ +.dropbutton__menu { position: absolute; - right: 40%; /* 0.6667em; */ /* LTR */ - top: 50%; - /* Box model declarations */ - content: ""; - display: block; - height: 0; - line-height: 0; - margin-top: -0.1666em; - width: 0; - /* Other declarations */ - border-bottom-color: transparent; - border-left-color: transparent; - border-right-color: transparent; - border-style: solid; - border-width: 0.3333em 0.3333em 0; + top: 2em; + display: none; + min-width: 150px; + margin: 5px 0; + min-width: 100%; + padding: 5px 0; + background: #fff; + border: 1px solid #a6a6a6; + border-radius: 5px; + list-style-image: none; + list-style-type: none; overflow: hidden; } -[dir="rtl"] .dropbutton__trigger:after { - left: 0.6667em; - right: auto; +.dropbutton.is-open .dropbutton__menu { + display: block; } -.dropbutton--multiple.is-open .dropbutton__trigger:after { - top: 0.6667em; - border-bottom: 0.3333em solid; - border-top-color: transparent; +.dropbutton__menu li, +.dropbutton__menu-item { + display: block; + outline: none; } -.dropbutton--multiple .button.dropbutton__action { - /* Box model declarations */ - padding-left: 1em; - float: left; - /* Other declarations */ - border-radius: 0; - border-top-left-radius: 20em; - border-bottom-left-radius: 20em; - font-size: 0.825rem; + +.dropbutton__menu-item { + padding: 0.35em 1em; + color: #262626; + text-decoration: none; } -.dropbutton .button.dropbutton__trigger { - /* Positioning declarations */ - position: absolute; - /* Box model declarations */ - padding-right: 1em; - float: left; - margin-left: -1px; - /* Other declarations */ - border-radius: 0; - border-top-right-radius: 20em; - border-bottom-right-radius: 20em; +.dropbutton__menu-item:focus, +.dropbutton__menu-item:hover { + background: #c8ecfe; + outline: initial; } + diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.js index 2e61208..7bcd17c 100644 --- a/core/misc/dropbutton/dropbutton.js +++ b/core/misc/dropbutton/dropbutton.js @@ -14,7 +14,7 @@ */ Drupal.behaviors.dropButton = { attach: function (context, settings) { - var $dropbuttons = $(context).find('.dropbutton').once('dropbutton__menu'); + var $dropbuttons = $(context).find('.js-dropbutton').once('dropbutton__menu'); if ($dropbuttons.length) { // Adds the delegated handler that will toggle dropdowns on click. var $body = $('body').once('dropbutton-click'); @@ -39,7 +39,7 @@ */ function dropbuttonClickHandler(e) { e.preventDefault(); - $(e.target).closest('.dropbutton').toggleClass('is-open'); + $(e.target).closest('.js-dropbutton').toggleClass('is-open'); } /** @@ -84,17 +84,17 @@ // Identify the first element of the collection. var $primary = this.$actions.slice(0, 1).find('a'); // Remove parent