Issue #3081489 by kostyashupenko, mherchel, justafish, andy-blum,... (4b6a0adc) · Commits · project / drupal

core/misc/vertical-tabs.es6.js

+4 −4

Original line number	Diff line number	Diff line
		@@ -92,9 +92,7 @@
		tabList.append(verticalTab.item);
		$that
		.removeClass('collapsed')
		// prop() can't be used on browsers not supporting details element,
		// the style won't apply to them if prop() is used.
		.attr('open', true)
		.removeAttr('open')
		.addClass('vertical-tabs__pane')
		.data('verticalTab', verticalTab);
		if (this.id === focusID) {
		@@ -178,12 +176,14 @@
		.each(function () {
		const tab = $(this).data('verticalTab');
		tab.details.hide();
		tab.details.removeAttr('open');
		tab.item.removeClass('is-selected');
		})
		.end()
		.show()
		.siblings(':hidden.vertical-tabs__active-tab')[0].value =
		this.details.attr('id');
		this.details.attr('open', true);
		this.item.addClass('is-selected');
		// Mark the active tab for screen readers.
		$('#active-vertical-tab').remove();
		@@ -249,7 +249,7 @@
		.eq(0)
		.addClass('first');
		// Hide the details element.
		this.details.addClass('vertical-tab--hidden').hide();
		this.details.addClass('vertical-tab--hidden').hide().removeAttr('open');
		// Focus the first visible tab (if there is one).
		const $firstTab = this.details
		.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden)')

core/misc/vertical-tabs.js

+4 −2

Original line number	Diff line number	Diff line
		@@ -42,7 +42,7 @@
		details: $that
		});
		tabList.append(verticalTab.item);
		$that.removeClass('collapsed').attr('open', true).addClass('vertical-tabs__pane').data('verticalTab', verticalTab);
		$that.removeClass('collapsed').removeAttr('open').addClass('vertical-tabs__pane').data('verticalTab', verticalTab);

		if (this.id === focusID) {
		tabFocus = $that;
		@@ -93,8 +93,10 @@
		this.details.siblings('.vertical-tabs__pane').each(function () {
		var tab = $(this).data('verticalTab');
		tab.details.hide();
		tab.details.removeAttr('open');
		tab.item.removeClass('is-selected');
		}).end().show().siblings(':hidden.vertical-tabs__active-tab')[0].value = this.details.attr('id');
		this.details.attr('open', true);
		this.item.addClass('is-selected');
		$('#active-vertical-tab').remove();
		this.link.append("<span id=\"active-vertical-tab\" class=\"visually-hidden\">".concat(Drupal.t('(active tab)'), "</span>"));
		@@ -113,7 +115,7 @@
		tabHide: function tabHide() {
		this.item.hide();
		this.item.parent().children('.vertical-tabs__menu-item').removeClass('first').filter(':visible').eq(0).addClass('first');
		this.details.addClass('vertical-tab--hidden').hide();
		this.details.addClass('vertical-tab--hidden').hide().removeAttr('open');
		var $firstTab = this.details.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden)').eq(0);

		if ($firstTab.length) {

core/themes/claro/claro.info.yml

+0 −2

Original line number	Diff line number	Diff line
		@@ -52,8 +52,6 @@ libraries-override:
		css:
		component:
		misc/vertical-tabs.css: false
		js:
		misc/vertical-tabs.js: js/vertical-tabs.js

		core/drupal.autocomplete:
		css:

core/themes/claro/claro.libraries.yml

+2 −0

Original line number	Diff line number	Diff line
		@@ -263,6 +263,8 @@ vertical-tabs:
		css:
		component:
		css/components/vertical-tabs.css: {}
		js:
		js/vertical-tabs.js: {}
		dependencies:
		- claro/global-styling

core/themes/claro/css/components/vertical-tabs.css

+27 −38

Original line number	Diff line number	Diff line
		@@ -35,7 +35,7 @@

		.vertical-tabs__menu {
		position: relative;
		display: none;
		display: block;
		float: left; /* LTR */
		width: 20em;
		margin: 0;
		@@ -49,13 +49,6 @@
		margin: 0;
		}

		@media screen and (min-width: 85em) {
		.vertical-tabs__menu {
		display: block;
		width: 20em;
		}
		}

		/**
		* Vertical tabs menu item.
		*/
		@@ -107,7 +100,7 @@
		* Making the separator line visible only if it follows an unhidden menu item.
		*/

		.vertical-tabs__menu-item:not(.vertical-tabs__menu-item--hidden) ~ .vertical-tabs__menu-item::before {
		.vertical-tabs__menu-item:not(.vertical-tab--hidden) ~ .vertical-tabs__menu-item::before {
		content: "";
		}

		@@ -119,7 +112,7 @@
		}

		.vertical-tabs__menu-item.is-selected::before,
		.vertical-tabs__menu-item:not(.vertical-tabs__menu-item--hidden) ~ .vertical-tabs__menu-item.is-selected::before {
		.vertical-tabs__menu-item:not(.vertical-tab--hidden) ~ .vertical-tabs__menu-item.is-selected::before {
		content: normal;
		}

		@@ -287,7 +280,7 @@

		/* This modifier is added by JavaScript (this is inherited from Drupal core). */

		.vertical-tabs__items--processed {
		.vertical-tabs__panes {
		position: relative;
		z-index: 1; /* The wrapper of the details of the vertical tabs should be on a higher level than the vertical tabs menu */
		top: -1px;
		@@ -297,25 +290,23 @@

		/* This clearfix makes the pane wrapper at least as tall as the menu. */

		.vertical-tabs__items--processed::after {
		.vertical-tabs__panes::after {
		display: block;
		clear: both;
		content: "";
		}

		@media screen and (min-width: 85em) {
		.vertical-tabs__items--processed {
		.vertical-tabs .vertical-tabs__panes {
		margin-left: 20em; /* LTR */
		border-top-left-radius: 0; /* LTR */
		}

		.js[dir="rtl"] .vertical-tabs__items--processed {
		[dir="rtl"] .vertical-tabs .vertical-tabs__panes {
		margin-right: 20em;
		margin-left: 0;
		border-top-left-radius: 2px;
		border-top-right-radius: 0;
		}
		}

		/**
		* The actual vertical tabs pane.
		@@ -330,30 +321,28 @@
		border-radius: 0;
		}

		.vertical-tabs__item--first {
		.vertical-tabs__item.first {
		border-top-left-radius: 2px;
		border-top-right-radius: 2px;
		}

		.vertical-tabs__item--last {
		.vertical-tabs__item.last {
		margin-bottom: -1px;
		border-bottom-right-radius: 2px;
		border-bottom-left-radius: 2px;
		}

		@media screen and (min-width: 85em) {
		.js .vertical-tabs__item {
		.js .vertical-tabs .vertical-tabs__item {
		overflow: hidden;
		margin: 0;
		border: 0;
		}

		.js .vertical-tabs__item--first,
		.js .vertical-tabs__item--last {
		.js .vertical-tabs .vertical-tabs__item.first,
		.js .vertical-tabs .vertical-tabs__item.last {
		border-radius: 0;
		}

		.js .vertical-tabs__item > summary {
		.js .vertical-tabs .vertical-tabs__item > summary {
		display: none;
		}
		}