[4.1] Vertical tabs style is forced for nested tabs

[Denitz]

Pull Request for Issue #31376 .

Summary of Changes

Horizontal tabs inside vertical tabs incorrectly inherit vertical CSS style.

Testing Instructions

Display horizontal tabs inside vertical tabs.

The code:

<?= HTMLHelper::_('uitab.startTabset', 'tabs1', ['active' => 'tabA']) ?>
	<?= HTMLHelper::_('uitab.addTab', 'tabs1', 'tabs11', 'tabs11') ?>
		Horizontal tab 1

		<?= HTMLHelper::_('uitab.startTabset', 'tabs2', ['active' => 'tabA', 'orientation' => 'vertical']) ?>
		<?= HTMLHelper::_('uitab.addTab', 'tabs2', 'tabs21', 'tabs21') ?>
		Horizontal &gt; Vertical tab 1

			<?= HTMLHelper::_('uitab.startTabset', 'tabs3', ['active' => 'tabA', 'orientation' => 'horizontal']) ?>
			<?= HTMLHelper::_('uitab.addTab', 'tabs3', 'tabs31', 'tabs31') ?>
			Horizontal &gt; Vertical &gt; Horizontal tab 1
			<?= HTMLHelper::_('uitab.endTab') ?>
			<?= HTMLHelper::_('uitab.addTab', 'tabs3', 'tabs32', 'tabs32') ?>
			Horizontal &gt; Vertical &gt; Horizontal tab 2
			<?= HTMLHelper::_('uitab.endTab') ?>
			<?= HTMLHelper::_('uitab.endTabset') ?>

		<?= HTMLHelper::_('uitab.endTab') ?>

		<?= HTMLHelper::_('uitab.addTab', 'tabs2', 'tabs22', 'tabs22') ?>
		Horizontal &gt; Vertical tab 2
		<?= HTMLHelper::_('uitab.endTab') ?>

		<?= HTMLHelper::_('uitab.endTabset') ?>

	<?= HTMLHelper::_('uitab.endTab') ?>

	<?= HTMLHelper::_('uitab.addTab', 'tabs1', 'tabs12', 'tabs12') ?>
		Horizontal tab 2
	<?= HTMLHelper::_('uitab.endTab') ?>

<?= HTMLHelper::_('uitab.endTabset') ?>

Actual result BEFORE applying this Pull Request

See the invalid style of horizontal tabs.

Expected result AFTER applying this Pull Request

Valid horizontal tabs style.

Documentation Changes Required

No.

[ceford]

I have tested this item :white_check_mark: successfully on 88e33ce2ec32a259f47597e4718af80a9f485566

I put the test code from #31376 at the bottom of the banners list to test. Needs npm run build:css

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.}

[ceford]

Before:

After:

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.}

[ghost]

I have tested this item :white_check_mark: successfully on 88e33ce2ec32a259f47597e4718af80a9f485566

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.}

[Quy]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.}

[richard67]

@Denitz Could you fix the SCSS code style errors reported here by Drone? https://ci.joomla.org/joomla/joomla-cms/37650/1/20 . It might be necessary that you change some SCSS in line 152 and after of file administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss so you have a nesting depth of not more than 4 levels.

[richard67]

Back to pending since it fails SCSS code style tests in Drone.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.}

[Denitz]

@richard67 SCSS changed.

[infograf768]

Restarted drone

[chmst]

@Denitz could you resolve the conflicts in your branch, please?

[Denitz]

@chmst Done.

[HLeithner]

This pull request has automatically rebased to 4.2-dev.

[joomla-bot]

This pull requests has been automatically converted to the PSR-12 coding standard.

[obuisard]

@roland-d do you consider it a bug fix for 4.2? Major changes in the style file but I don't see it breaking anything. If insure, I will include it into 4.3.

[roland-d]

@obuisard We can include this in 4.2.x once there are 2 testers again because it had a number of changes since then. @ceford Would you mind testing this one again please?

[obuisard]

I have tested this item :white_check_mark: successfully on d0ea92ccaa495f61b07fbaa9658fed1ec78278b5

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.}

[obuisard]

With the markup provided for testing.

[ceford]

Not sure about this. I get a different vertical tab style from @obuisard but the same as I got last time. This is on a new install of ‎4.3.0-rc2-dev with test sample data. I would prefer the style shown by @obuisard.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.}

[obuisard]

@ceford Do not look so much at the style because it may differ depending on the template you are using. The importance is to get a horizontal thick border on the selected tab when the tabulation is horizontal and a vertical thick border on the selected tab when the tabulation is vertical.

[roland-d]

@ceford The answer by Olivier, does that mean your test is OK? If so, could you please mark it. Thank you.

[ceford]

I have tested this item :white_check_mark: successfully on d0ea92ccaa495f61b07fbaa9658fed1ec78278b5

I put the test code in a front end form and there the appearance is as depicted by @obuisard - so it is OK. I guess the backend appearance is a separate issue.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.}

[alikon]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/31419.}

[roland-d]

Thank you