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/lib/Drupal/Core/Render/Element/Dropbutton.php b/core/lib/Drupal/Core/Render/Element/Dropbutton.php index 76fab89..c690089 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..308a2d8 100644 --- a/core/misc/dropbutton/dropbutton.css +++ b/core/misc/dropbutton/dropbutton.css @@ -1,164 +1,118 @@ - /** * @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-wrapper, -.dropbutton-wrapper div { - box-sizing: border-box; +.button { + background: #FFF; + color: #333; + border: 1px solid #BBB; + padding: 0.4em 1em; + border-radius: 20em; + text-decoration: none; } -.js .dropbutton-wrapper, -.js .dropbutton-widget { - display: block; - position: relative; -} - -@media screen and (max-width:600px) { - .js .dropbutton-wrapper { - width: 100%; - } -} - -/* Splitbuttons */ -@media screen and (min-width:600px) { - .form-actions .dropbutton-wrapper { - float: left; /* LTR */ - } - [dir="rtl"] .form-actions .dropbutton-wrapper { - float: right; - } -} -.js .form-actions .dropbutton-widget { - position: static; -} -.js td .dropbutton-widget { - position: absolute; -} -.js td .dropbutton-wrapper { - min-height: 2em; -} -.js td .dropbutton-multiple { - padding-right: 10em; /* LTR */ - margin-right: 2em; /* LTR */ - 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 { - width: auto; -} - -/* UL styles are over-scoped in core, so this selector needs weight parity. */ -.js .dropbutton-widget .dropbutton { - list-style-image: none; - list-style-type: none; - margin: 0; - overflow: hidden; - padding: 0; -} -.js .dropbutton li, -.js .dropbutton a { - display: block; - outline: none; -} - -.js .dropbutton li:hover, -.js .dropbutton li:focus, -.js .dropbutton a:hover, -.js .dropbutton 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-widget { +.dropbutton { + position: relative; + display: inline-block; padding-right: 2em; /* LTR */ } -.js[dir="rtl"] .dropbutton-multiple .dropbutton-widget { +[dir="rtl"] .dropbutton { padding-left: 2em; padding-right: 0; } -.dropbutton-multiple.open, -.dropbutton-multiple.open .dropbutton-widget { - max-width: none; +@media screen and (max-width:600px) { + .dropbutton { + width: 100%; + } } -.dropbutton-multiple.open { +.dropbutton.is-open { + max-width: none; z-index: 100; } -.dropbutton-multiple .dropbutton .secondary-action { - display: none; -} -.dropbutton-multiple.open .dropbutton .secondary-action { + +/* 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; } -.dropbutton-toggle { - bottom: 0; - display: block; + +/* The dropbutton trigger toggles the hidden menu. */ +.dropbutton__trigger { position: absolute; - right: 0; /* LTR */ - text-indent: 110%; + margin: 0; + border-top-left-radius: 0; + border-bottom-left-radius: 0; top: 0; - white-space: nowrap; + bottom: 0; + right: 0; /* LTR */ + display: block; + height: auto; width: 2em; + cursor: pointer; + background: url(../icons/333333/caret-down.svg) no-repeat center center; } -[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 { - border-bottom-color: transparent; - border-left-color: transparent; - border-right-color: transparent; - border-style: solid; - border-width: 0.3333em 0.3333em 0; - display: block; - height: 0; - line-height: 0; + +/* The dropbutton menu contains the hidden action items. */ +.dropbutton__menu { position: absolute; - right: 40%; /* 0.6667em; */ /* LTR */ - top: 50%; - margin-top: -0.1666em; - width: 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-arrow { - left: 0.6667em; - right: auto; +.dropbutton.is-open .dropbutton__menu { + display: block; } -.dropbutton-multiple.open .dropbutton-arrow { - border-bottom: 0.3333em solid; - border-top-color: transparent; - top: 0.6667em; +.dropbutton__menu li, +.dropbutton__menu-item { + display: block; + outline: none; } + +.dropbutton__menu-item { + padding: 0.35em 1em; + color: #262626; + text-decoration: none; +} +.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 4f7645c..7bcd17c 100644 --- a/core/misc/dropbutton/dropbutton.js +++ b/core/misc/dropbutton/dropbutton.js @@ -14,12 +14,12 @@ */ Drupal.behaviors.dropButton = { attach: function (context, settings) { - var $dropbuttons = $(context).find('.dropbutton-wrapper').once('dropbutton'); + 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'); if ($body.length) { - $body.on('click', '.dropbutton-toggle', dropbuttonClickHandler); + $body.on('click', '.dropbutton__trigger', dropbuttonClickHandler); } // Initialize all buttons. var il = $dropbuttons.length; @@ -39,7 +39,7 @@ */ function dropbuttonClickHandler(e) { e.preventDefault(); - $(e.target).closest('.dropbutton-wrapper').toggleClass('open'); + $(e.target).closest('.js-dropbutton').toggleClass('is-open'); } /** @@ -71,27 +71,30 @@ /** * @type {jQuery} */ - this.$list = $dropbutton.find('.dropbutton'); + this.$list = $dropbutton.find('.dropbutton__menu'); /** * Find actions and mark them. * * @type {jQuery} */ - this.$actions = this.$list.find('li').addClass('dropbutton-action'); - + this.$actions = this.$list.find('li'); // 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); + var $primary = this.$actions.slice(0, 1).find('a'); + // Remove parent
  • for first dropbutton action and move. + $primary.unwrap().addClass('button dropbutton__primary-action').each(function() { + $(this).parent().before(this); + }); // Identify the secondary actions. - var $secondary = this.$actions.slice(1); - $secondary.addClass('secondary-action'); + var $secondary = this.$actions.slice(1).find('a'); + $secondary.addClass('dropbutton__menu-item'); // Add toggle link. $primary.after(Drupal.theme('dropbuttonToggle', options)); // Bind mouse events. this.$dropbutton - .addClass('dropbutton-multiple') + .addClass('dropbutton') .on({ /** @@ -122,7 +125,9 @@ }); } else { - this.$dropbutton.addClass('dropbutton-single'); + // If there's only one action, add a button class. + var $action = this.$actions.slice(0, 1).find('a'); + $action.unwrap().unwrap().addClass('button'); } } @@ -152,8 +157,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); }, /** @@ -216,7 +221,7 @@ * A string representing a DOM fragment. */ dropbuttonToggle: function (options) { - return '
    • '; + return ''; } }); diff --git a/core/misc/dropbutton/dropbutton.theme.css b/core/misc/dropbutton/dropbutton.theme.css deleted file mode 100644 index 65f2568..0000000 --- a/core/misc/dropbutton/dropbutton.theme.css +++ /dev/null @@ -1,34 +0,0 @@ - -/** - * @file - * General styles for dropbuttons. - */ - -.js .dropbutton-widget { - background-color: white; - border: 1px solid #cccccc; -} -.js .dropbutton-widget:hover { - border-color: #b8b8b8; -} -.dropbutton .dropbutton-action > * { - padding: 0.1em 0.5em; - white-space: nowrap; -} -.dropbutton .secondary-action { - border-top: 1px solid #e8e8e8; -} -.dropbutton-multiple .dropbutton { - border-right: 1px solid #e8e8e8; /* LTR */ -} -[dir="rtl"] .dropbutton-multiple .dropbutton { - border-left: 1px solid #e8e8e8; - border-right: 0 none; -} -.dropbutton-multiple .dropbutton .dropbutton-action > * { - margin-right: 0.25em; /* LTR */ -} -[dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * { - margin-left: 0.25em; - margin-right: 0; -} diff --git a/core/modules/book/src/Tests/BookTest.php b/core/modules/book/src/Tests/BookTest.php index b530265..db7f670 100644 --- a/core/modules/book/src/Tests/BookTest.php +++ b/core/modules/book/src/Tests/BookTest.php @@ -733,7 +733,7 @@ public function testAdminBookNodeListing() { $this->drupalGet('admin/structure/book/' . $this->book->id()); $this->assertText($this->book->label(), 'The book title is displayed on the administrative book listing page.'); - $elements = $this->xpath('//table//ul[@class="dropbutton"]/li/a'); + $elements = $this->xpath('//table//div[@class="dropbutton"]//a'); $this->assertEqual((string) $elements[0], 'View', 'View link is found from the list.'); } diff --git a/core/modules/content_translation/src/Tests/ContentTranslationUITestBase.php b/core/modules/content_translation/src/Tests/ContentTranslationUITestBase.php index a5d6d09..ac15fcf 100644 --- a/core/modules/content_translation/src/Tests/ContentTranslationUITestBase.php +++ b/core/modules/content_translation/src/Tests/ContentTranslationUITestBase.php @@ -215,7 +215,7 @@ protected function doTestTranslationOverview() { $elements = $this->xpath('//table//a[@href=:href]', array(':href' => $view_path)); $this->assertEqual((string) $elements[0], $entity->getTranslation($langcode)->label(), format_string('Label correctly shown for %language translation.', array('%language' => $langcode))); $edit_path = $entity->url('edit-form', array('language' => $language)); - $elements = $this->xpath('//table//ul[@class="dropbutton"]/li/a[@href=:href]', array(':href' => $edit_path)); + $elements = $this->xpath('//table//div[@class="dropbutton"]//a[@href=:href]', array(':href' => $edit_path)); $this->assertEqual((string) $elements[0], t('Edit'), format_string('Edit link correct for %language translation.', array('%language' => $langcode))); } } diff --git a/core/modules/field_ui/src/Tests/ManageFieldsTest.php b/core/modules/field_ui/src/Tests/ManageFieldsTest.php index 1f3d191..8555308 100644 --- a/core/modules/field_ui/src/Tests/ManageFieldsTest.php +++ b/core/modules/field_ui/src/Tests/ManageFieldsTest.php @@ -153,7 +153,7 @@ function manageFieldsPage($type = '') { // Assert entity operations for all fields. $number_of_links = 3; $number_of_links_found = 0; - $operation_links = $this->xpath('//ul[@class = "dropbutton"]/li/a'); + $operation_links = $this->xpath('//div[@class = "dropbutton"]//a'); $url = base_path() . "admin/structure/types/manage/$type/fields/node.$type.body"; foreach ($operation_links as $link) { diff --git a/core/modules/language/config/optional/tour.tour.language.yml b/core/modules/language/config/optional/tour.tour.language.yml index 7cca3e5..3c0dbf3 100644 --- a/core/modules/language/config/optional/tour.tour.language.yml +++ b/core/modules/language/config/optional/tour.tour.language.yml @@ -42,7 +42,7 @@ tips: body: '

    Operations are provided for editing and deleting your languages.

    You can edit the name and the direction of the language.

    Deleted languages can be added back at a later time. Deleting a language will remove all interface translations associated with it, and content in this language will be set to be language neutral. Note that you cannot delete the default language of the site.

    ' weight: 5 attributes: - data-class: dropbutton-wrapper + data-class: dropbutton language-continue: id: language-continue plugin: text diff --git a/core/modules/node/src/Tests/AssertButtonsTrait.php b/core/modules/node/src/Tests/AssertButtonsTrait.php index 96eb6c8..403c40b 100644 --- a/core/modules/node/src/Tests/AssertButtonsTrait.php +++ b/core/modules/node/src/Tests/AssertButtonsTrait.php @@ -35,7 +35,7 @@ public function assertButtons($buttons, $dropbutton = TRUE) { $this->assertTrue(empty($save_button)); // Dropbutton elements. - $elements = $this->xpath('//div[@class="dropbutton-wrapper"]//input[@type="submit"]'); + $elements = $this->xpath('//div[@class="js-dropbutton"]//input[@type="submit"]'); $this->assertEqual($count, count($elements)); foreach ($elements as $element) { $value = isset($element['value']) ? (string) $element['value'] : ''; @@ -46,7 +46,7 @@ public function assertButtons($buttons, $dropbutton = TRUE) { else { // Assert there is a save button. $this->assertTrue(!empty($save_button)); - $this->assertNoRaw('dropbutton-wrapper'); + $this->assertNoRaw('js-dropbutton'); } } } diff --git a/core/modules/system/css/system.admin.css b/core/modules/system/css/system.admin.css index dead982..db8bb09 100644 --- a/core/modules/system/css/system.admin.css +++ b/core/modules/system/css/system.admin.css @@ -188,24 +188,30 @@ small .admin-link:after { } /* Status report. */ -.system-status-report td { +.system-status-report__status-title { + position: relative; vertical-align: top; + width: 25%; + padding: 10px 6px 10px 40px; + box-sizing: border-box; + font-weight: normal; } -.system-status-report__status-icon { - width: 16px; - padding-right: 0; /* LTR */ -} -[dir="rtl"] .system-status-report__status-icon { - padding-left: 0; - padding-right: 6px; +[dir="rtl"] .system-status-report__status-title { + padding: 10px 40px 10px 6px; } .system-status-report__status-icon:before { content: ""; background-repeat: no-repeat; height: 16px; width: 16px; - margin-top: 2px; display: block; + position: absolute; + left: 12px; /* LTR */ + top: 12px; +} +[dir="rtl"] .system-status-report__status-icon:before { + left: auto; + right: 12px; } .system-status-report__status-icon--error:before { background-image: url(../../../misc/icons/e32700/error.svg); @@ -213,9 +219,6 @@ small .admin-link:after { .system-status-report__status-icon--warning:before { background-image: url(../../../misc/icons/e29700/warning.svg); } -.system-status-report__status-title { - width: 25%; -} /** * Appearance page. diff --git a/core/modules/system/templates/dropbutton-wrapper.html.twig b/core/modules/system/templates/dropbutton-wrapper.html.twig index ca0ff7e..e5f4941 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 %} -
    -
    - {{ children }} -
    +
    + {{ children }}
    {% endspaceless %} {% endif %} diff --git a/core/modules/system/templates/status-report.html.twig b/core/modules/system/templates/status-report.html.twig index 6cdfaa8..b44e181 100644 --- a/core/modules/system/templates/status-report.html.twig +++ b/core/modules/system/templates/status-report.html.twig @@ -18,29 +18,23 @@ */ #} - - - - - - {% for requirement in requirements %} - {% if requirement.severity_status %} - - {% endif %} - - - - + + {% if requirement.severity_status in ['warning', 'error'] %} + + + {% endfor %}
    -
    - -
    -     		{{ requirement.title }} - {{ requirement.value }} - {% if requirement.description %} -
    {{ requirement.description }}
    - {% endif %} -
    + + {% else %} + + {% endif %} + {{ requirement.title }} + + {{ requirement.value }} + {% if requirement.description %} +
    {{ requirement.description }}
    + {% endif %} +
    diff --git a/core/modules/views/src/Tests/Plugin/RowRenderCacheTest.php b/core/modules/views/src/Tests/Plugin/RowRenderCacheTest.php index c00d584..828d5f1 100644 --- a/core/modules/views/src/Tests/Plugin/RowRenderCacheTest.php +++ b/core/modules/views/src/Tests/Plugin/RowRenderCacheTest.php @@ -157,10 +157,10 @@ protected function doTestRenderedOutput(AccountInterface $account, $check_cache $output = $view->style_plugin->getField($index, 'delete_node'); $this->assertEqual($output, $expected); - $expected = $access ? "
      " . + $expected = $access ? "
    " : ""; + "
    " : ""; $output = $view->style_plugin->getField($index, 'operations'); $this->assertEqual($output, $expected); diff --git a/core/modules/views_ui/config/optional/tour.tour.views-ui.yml b/core/modules/views_ui/config/optional/tour.tour.views-ui.yml index 1b4e475..0b04d67 100644 --- a/core/modules/views_ui/config/optional/tour.tour.views-ui.yml +++ b/core/modules/views_ui/config/optional/tour.tour.views-ui.yml @@ -60,7 +60,7 @@ tips: body: 'Add, rearrange or remove filters.' weight: 7 attributes: - data-class: 'views-ui-display-tab-bucket.filter .dropbutton-widget' + data-class: 'views-ui-display-tab-bucket.filter .dropbutton' views-ui-sorts: id: views-ui-sorts plugin: text @@ -76,7 +76,7 @@ tips: body: 'Add, rearrange or remove sorting rules.' weight: 9 attributes: - data-class: 'views-ui-display-tab-bucket.sort .dropbutton-widget' + data-class: 'views-ui-display-tab-bucket.sort .dropbutton' views-ui-preview: id: views-ui-preview plugin: text diff --git a/core/modules/views_ui/css/views_ui.admin.css b/core/modules/views_ui/css/views_ui.admin.css index e932af1..638db6a 100644 --- a/core/modules/views_ui/css/views_ui.admin.css +++ b/core/modules/views_ui/css/views_ui.admin.css @@ -203,6 +203,6 @@ html.js .js-only { html.js span.js-only { display: inline; } -.js .views-edit-view .dropbutton-wrapper { +.js .views-edit-view .dropbutton { width: auto; } diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css index 6e7f1e0..5208bd5 100644 --- a/core/modules/views_ui/css/views_ui.admin.theme.css +++ b/core/modules/views_ui/css/views_ui.admin.theme.css @@ -18,95 +18,6 @@ .box-margin { margin: 12px 12px 0 12px; } -.views-admin .icon { - height: 16px; - width: 16px; -} -.views-admin .icon, -.views-admin .icon-text { - background-attachment: scroll; - background-image: url(../images/sprites.png); - background-position: left top; /* LTR */ - background-repeat: no-repeat; -} -[dir="rtl"] .views-admin .icon, -[dir="rtl"] .views-admin .icon-text { - background-position: right top; -} -.views-admin a.icon { - background: linear-gradient(-90deg, #fff 0, #e8e8e8 100%) no-repeat, repeat-y; - border: 1px solid #ddd; - border-radius: 4px; - box-shadow: 0 0 0 rgba(0,0,0,0.3333) inset; -} -.views-admin a.icon:hover { - border-color: #d0d0d0; - box-shadow: 0 0 1px rgba(0,0,0,0.3333) inset; -} -.views-admin a.icon:active { - border-color: #c0c0c0; -} -.views-admin span.icon { - float: left; /* LTR */ - position: relative; -} -[dir="rtl"] .views-admin span.icon { - float: right; -} -.views-admin .icon.compact { - display: block; - overflow: hidden; - direction: ltr; - text-indent: -9999px; -} - -/* Targets any element with an icon -> text combo */ -.views-admin .icon-text { - padding-left: 19px; /* LTR */ -} -[dir="rtl"] .views-admin .icon-text { - padding-left: 0; - padding-right: 19px; -} -.views-admin .icon.linked { - background-position: center -153px; -} -.views-admin .icon.unlinked { - background-position: center -195px; -} -.views-admin .icon.add { - background-position: center 3px; -} -.views-admin a.icon.add { - background-position: center 3px, left top; /* LTR */ -} -[dir="rtl"] .views-admin a.icon.add { - background-position: center 3px, right top; -} -.views-admin .icon.delete { - background-position: center -52px; -} -.views-admin a.icon.delete { - background-position: center -52px, left top; /* LTR */ -} -[dir="rtl"] .views-admin a.icon.delete { - background-position: center -52px, right top; -} -.views-admin .icon.rearrange { - background-position: center -111px; -} -.views-admin a.icon.rearrange { - background-position: center -111px, left top; /* LTR */ -} -[dir="rtl"] .views-admin a.icon.rearrange { - background-position: center -111px, right top; -} -.views-displays .tabs a:hover > .icon.add { - background-position: center -25px; -} -.views-displays .tabs .open a:hover > .icon.add { - background-position: center 3px; -} details.box-padding { border: none; } @@ -748,64 +659,54 @@ td.group-title { margin-bottom: 18px; line-height: 1.4555; } -.dropbutton-multiple { + +/* Dropbutton overrides. */ +.dropbutton { position: absolute; } -.dropbutton-widget { - position: relative; -} -.js .views-edit-view .dropbutton-wrapper .dropbutton .dropbutton-action > * { +.views-edit-view .dropbutton__menu-item > * { font-size: 10px; } -.js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber { +.dropbutton__menu-item > .ajax-progress-throbber { position: absolute; right: -5px; /* LTR */ top: -1px; z-index: 2; } -[dir="rtl"].js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber { +[dir="rtl"] .dropbutton__menu-item > .ajax-progress-throbber { left: -5px; right: auto; } -.js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a { - border-radius: 1.1em 0 0 0; /* LTR */ -} -[dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:first-child a { - border-radius: 0 1.1em 0 0; -} -.js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a { - border-radius: 0 0 0 1.1em; /* LTR */ -} -[dir="rtl"].js .dropbutton-wrapper.dropbutton-multiple.open .dropbutton-action:last-child a { - border-radius: 0 0 1.1em 0; -} -.views-display-top .dropbutton-wrapper { + +/* Add a separate class here. */ +.views-display-top .dropbutton { position: absolute; right: 12px; /* LTR */ top: 7px; } -[dir="rtl"] .views-display-top .dropbutton-wrapper { +[dir="rtl"] .views-display-top .dropbutton { left: 12px; right: auto; } -.views-display-top .dropbutton-wrapper .dropbutton-widget .dropbutton-action a { +.views-display-top .dropbutton-action a { width: auto; } -.views-ui-display-tab-bucket .dropbutton-wrapper { +.views-ui-display-tab-bucket .dropbutton { position: absolute; right: 5px; /* LTR */ top: 4px; + font-size: small; } -[dir="rtl"] .views-ui-display-tab-bucket .dropbutton-wrapper { +[dir="rtl"] .views-ui-display-tab-bucket .dropbutton { left: 5px; right: auto; } -.views-ui-display-tab-bucket .dropbutton-wrapper .dropbutton-widget .dropbutton-action a { +.views-ui-display-tab-bucket .dropbutton-widget .dropbutton-action a { width: auto; } -.views-ui-display-tab-actions .dropbutton-wrapper li a, -.views-ui-display-tab-actions .dropbutton-wrapper input { +.views-ui-display-tab-actions .dropbutton li a, +.views-ui-display-tab-actions .dropbutton input { background: none; border: medium; font-family: inherit; @@ -813,12 +714,12 @@ td.group-title { padding-left: 12px; /* LTR */ margin-bottom: 0; } -[dir="rtl"] .views-ui-display-tab-actions .dropbutton-wrapper li a, -[dir="rtl"] .views-ui-display-tab-actions .dropbutton-wrapper input { +[dir="rtl"] .views-ui-display-tab-actions .dropbutton li a, +[dir="rtl"] .views-ui-display-tab-actions .dropbutton input { padding-left: 0.5em; padding-right: 12px; } -.views-ui-display-tab-actions .dropbutton-wrapper input:hover { +.views-ui-display-tab-actions .dropbutton input:hover { background: none; border: none; } diff --git a/core/modules/views_ui/src/ViewEditForm.php b/core/modules/views_ui/src/ViewEditForm.php index 1b335de..5398672 100644 --- a/core/modules/views_ui/src/ViewEditForm.php +++ b/core/modules/views_ui/src/ViewEditForm.php @@ -396,7 +396,7 @@ public function getDisplayDetails($view, $display) { // Because some of the 'links' are actually submit buttons, we have to // manually wrap each item in
  • and the whole list in