Commit e73ce6ea authored by Alex Pott's avatar Alex Pott
Browse files

Issue #2408511 by joaogarin, pjbaert, rpayanm, bobrov1989: Rewrite... 

Issue #2408511 by joaogarin, pjbaert, rpayanm, bobrov1989: Rewrite vertical-tabs component inline with our CSS standards
parent 58481b72

core/misc/vertical-tabs.css

+19 −17
Changes for core/misc/vertical-tabs.css: 19 added lines, 17 removed lines.
Original line number Diff line number Diff line 
/**

 * @file

 * Vertical Tabs.

 */



.vertical-tabs {

  margin: 1em 0 1em 15em; /* LTR */
@@ -7,7 +11,7 @@ 
   margin-left: 0;

   margin-right: 15em;

}

.vertical-tabs-list {

.vertical-tabs__menu {

  float: left; /* LTR */

  width: 15em;

  margin: -1px 0 -1px -15em; /* LTR */
@@ -15,52 +19,50 @@ 
  border-top: 1px solid #ccc;

  list-style: none;

}

[dir="rtl"] .vertical-tabs-list {

[dir="rtl"] .vertical-tabs__menu {

  float: right;

  margin-left: 0;

  margin-right: -15em;

}

.vertical-tabs-pane {

.vertical-tabs__pane {

  margin: 0;

  border: 0;

}

.vertical-tabs-pane > summary {

.vertical-tabs__pane > summary {

  display: none;

}



/* Layout of each tab */

.vertical-tab-button {

  margin: 0;

  padding: 0;

/* Layout of each tab. */

.vertical-tabs__menu-item {

  border: 1px solid #ccc;

  border-top: 0;

  background: #eee;

}

.vertical-tab-button a {

.vertical-tabs__menu-item a {

  display: block;

  padding: 0.5em 0.6em;

  text-decoration: none;

}

.vertical-tab-button a:focus strong,

.vertical-tab-button a:active strong,

.vertical-tab-button a:hover strong {

.vertical-tabs__menu-item a:focus .vertical-tabs__menu-item-title,

.vertical-tabs__menu-item a:active .vertical-tabs__menu-item-title,

.vertical-tabs__menu-item a:hover .vertical-tabs__menu-item-title {

  text-decoration: underline;

}

.vertical-tab-button a:hover {

.vertical-tabs__menu-item a:hover {

  outline: 1px dotted;

}

.vertical-tab-button.selected {

.vertical-tabs__menu-item.is-selected {

  border-right-width: 0; /* LTR */

  background-color: #fff;

}

[dir="rtl"] .vertical-tab-button.selected {

[dir="rtl"] .vertical-tabs__menu-item.is-selected {

  border-left-width: 0;

  border-right-width: 1px;

}

.vertical-tab-button.selected strong {

.vertical-tabs__menu-item.is-selected .vertical-tabs__menu-item-title {

  color: #000;

}

.vertical-tab-button .summary {

.vertical-tabs__menu-item-summary {

  display: block;

  margin-bottom: 0;

  line-height: normal;

core/misc/vertical-tabs.js

+19 −19
Changes for core/misc/vertical-tabs.js: 19 added lines, 19 removed lines.
Original line number Diff line number Diff line
@@ -21,8 +21,8 @@ 
      }



      $(context).find('[data-vertical-tabs-panes]').once('vertical-tabs').each(function () {

        var $this = $(this).addClass('vertical-tabs-panes');

        var focusID = $this.find(':hidden.vertical-tabs-active-tab').val();

        var $this = $(this).addClass('vertical-tabs__panes');

        var focusID = $this.find(':hidden.vertical-tabs__active-tab').val();

        var tab_focus;



        // Check if there are some details that can be converted to vertical-tabs
@@ -32,7 +32,7 @@ 
        }



        // Create the tab column.

        var tab_list = $('<ul class="vertical-tabs-list"></ul>');

        var tab_list = $('<ul class="vertical-tabs__menu"></ul>');

        $this.wrap('<div class="vertical-tabs clearfix"></div>').before(tab_list);



        // Transform each details into a tab.
@@ -48,7 +48,7 @@ 
            // 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)

            .addClass('vertical-tabs-pane')

            .addClass('vertical-tabs__pane')

            .data('verticalTab', vertical_tab);

          if (this.id === focusID) {

            tab_focus = $that;
@@ -63,10 +63,10 @@ 
          // element that matches the URL fragment, activate that tab.

          var $locationHash = $this.find(window.location.hash);

          if (window.location.hash && $locationHash.length) {

            tab_focus = $locationHash.closest('.vertical-tabs-pane');

            tab_focus = $locationHash.closest('.vertical-tabs__pane');

          }

          else {

            tab_focus = $this.find('> .vertical-tabs-pane:first');

            tab_focus = $this.find('> .vertical-tabs__pane:first');

          }

        }

        if (tab_focus.length) {
@@ -102,7 +102,7 @@ 
      if (event.keyCode === 13) {

        self.focus();

        // Set focus on the first input field of the visible details/tab pane.

        $(".vertical-tabs-pane :input:visible:enabled:first").trigger('focus');

        $(".vertical-tabs__pane :input:visible:enabled:first").trigger('focus');

      }

    });
@@ -119,17 +119,17 @@ 
     */

    focus: function () {

      this.details

        .siblings('.vertical-tabs-pane')

        .siblings('.vertical-tabs__pane')

        .each(function () {

          var tab = $(this).data('verticalTab');

          tab.details.hide();

          tab.item.removeClass('selected');

          tab.item.removeClass('is-selected');

        })

        .end()

        .show()

        .siblings(':hidden.vertical-tabs-active-tab')

        .siblings(':hidden.vertical-tabs__active-tab')

        .val(this.details.attr('id'));

      this.item.addClass('selected');

      this.item.addClass('is-selected');

      // Mark the active tab for screen readers.

      $('#active-vertical-tab').remove();

      this.link.append('<span id="active-vertical-tab" class="visually-hidden">' + Drupal.t('(active tab)') + '</span>');
@@ -153,10 +153,10 @@ 
      // Update .first marker for items. We need recurse from parent to retain the

      // actual DOM element order as jQuery implements sortOrder, but not as public

      // method.

      this.item.parent().children('.vertical-tab-button').removeClass('first')

      this.item.parent().children('.vertical-tabs__menu-item').removeClass('first')

        .filter(':visible:first').addClass('first');

      // Display the details element.

      this.details.removeClass('vertical-tab-hidden').show();

      this.details.removeClass('vertical-tab--hidden').show();

      // Focus this tab.

      this.focus();

      return this;
@@ -171,12 +171,12 @@ 
      // Update .first marker for items. We need recurse from parent to retain the

      // actual DOM element order as jQuery implements sortOrder, but not as public

      // method.

      this.item.parent().children('.vertical-tab-button').removeClass('first')

      this.item.parent().children('.vertical-tabs__menu-item').removeClass('first')

        .filter(':visible:first').addClass('first');

      // Hide the details element.

      this.details.addClass('vertical-tab-hidden').hide();

      this.details.addClass('vertical-tab--hidden').hide();

      // Focus the first visible tab (if there is one).

      var $firstTab = this.details.siblings('.vertical-tabs-pane:not(.vertical-tab-hidden):first');

      var $firstTab = this.details.siblings('.vertical-tabs__pane:not(.vertical-tab--hidden):first');

      if ($firstTab.length) {

        $firstTab.data('verticalTab').focus();

      }
@@ -203,10 +203,10 @@ 
   */

  Drupal.theme.verticalTab = function (settings) {

    var tab = {};

    tab.item = $('<li class="vertical-tab-button" tabindex="-1"></li>')

    tab.item = $('<li class="vertical-tabs__menu-item" tabindex="-1"></li>')

      .append(tab.link = $('<a href="#"></a>')

        .append(tab.title = $('<strong></strong>').text(settings.title))

        .append(tab.summary = $('<span class="summary"></span>')

        .append(tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>').text(settings.title))

        .append(tab.summary = $('<span class="vertical-tabs__menu-item-summary"></span>')

        )

      );

    return tab;

core/themes/bartik/css/components/vertical-tabs.component.css

+7 −2
Changes for core/themes/bartik/css/components/vertical-tabs.component.css: 7 added lines, 2 removed lines.
Original line number Diff line number Diff line 
/**

 * @file

 * Vertical tabs component.

 */



/* Vertical Tabs Reset */

ul.vertical-tabs-list {

.vertical-tabs__menu {

  margin: -1px 0 -1px -15em; /* LTR */

  padding: 0;

}

[dir="rtl"] ul.vertical-tabs-list {

[dir="rtl"] .vertical-tabs__menu {

  margin-left: 0;

  margin-right: -15em;

  /* This is required to win specificity over [dir="rtl"] .region-content ul */

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

+25 −27
Changes for core/themes/seven/css/components/vertical-tabs.css: 25 added lines, 27 removed lines.
Original line number Diff line number Diff line 
/**

 * @file

 * Override of misc/vertical-tabs.css.

 */



.vertical-tabs {

  position: relative;

  overflow: hidden;
@@ -9,7 +11,7 @@ 
  border-radius: 4px;

  background: #e6e5e1;

}

.vertical-tabs-list {

.vertical-tabs__menu {

  float: left; /* LTR */

  width: 240px;

  margin: 0 -100% -1px 0; /* LTR */
@@ -17,32 +19,29 @@ 
  border-bottom: 1px solid #ccc;

  line-height: 1;

}

[dir="rtl"] .vertical-tabs-list {

[dir="rtl"] .vertical-tabs__menu {

  float: right;

  margin: 0 0 -1px -100%;

}

.vertical-tab-button {

.vertical-tabs__menu-item {

  position: relative;

  margin: 0;

  list-style: none;

  list-style-image: none;

}

.vertical-tab-button.selected {

.vertical-tabs__menu-item.is-selected {

  z-index: 1;

  overflow-x: hidden;

  width: 100%;

  border-right: 1px solid #fcfcfa; /* LTR */

  box-shadow: 0 5px 5px -5px hsla(0, 0%, 0%, 0.3);

}

[dir="rtl"] .vertical-tab-button.selected {

[dir="rtl"] .vertical-tabs__menu-item.is-selected {

  border-left: 1px solid #fcfcfa;

  border-right: none;

}

.vertical-tab-button:focus,

.vertical-tab-button:active {

.vertical-tabs__menu-item:focus,

.vertical-tabs__menu-item:active {

  z-index: 2;

}

.vertical-tab-button a {

.vertical-tabs__menu-item a {

  display: block;

  padding: 10px 15px 15px;

  border-bottom: 1px solid #b3b2ad;
@@ -50,60 +49,59 @@ 
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);

  text-decoration: none;

}

.vertical-tab-button:last-child a {

.vertical-tabs__menu-item:last-child a {

  border-bottom: 0;

}

.vertical-tab-button.selected a,

.vertical-tab-button a:hover,

.vertical-tab-button a:focus {

.vertical-tabs__menu-item.is-selected a,

.vertical-tabs__menu-item a:hover,

.vertical-tabs__menu-item a:focus {

  background: #fcfcfa;

  text-shadow: none;

  text-decoration: none;

}

.vertical-tab-button.selected a {

.vertical-tabs__menu-item.is-selected a {

  border-bottom-color: #b3b2ad;

  color: #004f80;

}

.vertical-tab-button.selected a:hover,

.vertical-tab-button.selected a:focus {

.vertical-tabs__menu-item.is-selected a:hover,

.vertical-tabs__menu-item.is-selected a:focus {

  color: #007ecc;

}

[data-vertical-tabs-panes] {

  background-color: #fcfcfa;

}

.vertical-tabs-panes {

.vertical-tabs__panes {

  margin: 0 0 0 240px; /* LTR */

  padding: 10px 15px 10px 15px;

  border-left: 1px solid #a6a5a1; /* LTR */

}

[dir="rtl"] .vertical-tabs-panes {

[dir="rtl"] .vertical-tabs__panes {

  margin: 0 240px 0 0;

  border-left: none;

  border-right: 1px solid #a6a5a1;

}

.vertical-tabs-panes:after {

.vertical-tabs__panes:after {

  content: "";

  display: table;

  clear: both;

}

.vertical-tabs-pane {

.vertical-tabs__pane {

  margin: 0;

  padding: 0;

  border: 0;

  color: #595959;

}

.vertical-tab-button strong {

.vertical-tabs__menu-item-title {

  font-size: 0.923em;

}

.vertical-tab-button .summary {

.vertical-tabs__menu-item-summary {

  display: block;

  padding-top: 0.4em;

  color: #666;

  font-size: 0.846em;

}

.vertical-tab-button.selected a:focus strong {

.vertical-tabs__menu-item.is-selected a:focus .vertical-tabs__menu-item-title {

  text-decoration: underline;

}

.vertical-tabs-pane > summary {

.vertical-tabs__pane > summary {

  display: none;

}