Unverified Commit 2d166ac2 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3097651 by kishor_kolekar, sauravk, reinchek, Neslee Canil Pinto, Adam... 

Issue #3097651 by kishor_kolekar, sauravk, reinchek, Neslee Canil Pinto, Adam Szalapski, sibustephen, ravi.shankar, kostyashupenko, Krzysztof Domański, KondratievaS, lauriii, ckrina: Implement secondary tabs based on the designs
parent a6c0adae

core/themes/claro/css/components/content-header.css

+1 −1
Changes for core/themes/claro/css/components/content-header.css: 1 added line, 1 removed line.
Original line number Diff line number Diff line
@@ -55,7 +55,7 @@ 


.content-header {

  overflow: hidden;

  margin-bottom: 2rem;

  margin-bottom: 0.75rem;

  padding: 1.5rem 0 0;

  background-color: #f3f4f9;

}

core/themes/claro/css/components/content-header.pcss.css

+2 −2
Changes for core/themes/claro/css/components/content-header.pcss.css: 2 added lines, 2 removed lines.
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@ 


.content-header {

  overflow: hidden;

  margin-bottom: 2rem;

  padding: 1.5rem 0 0;

  margin-bottom: var(--space-s);

  padding: var(--space-l) 0 0;

  background-color: var(--color-whitesmoke);

}

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

+20 −9
Changes for core/themes/claro/css/components/tabs.css: 20 added lines, 9 removed lines.
Original line number Diff line number Diff line
@@ -56,11 +56,7 @@ 
:root {

  /**

  * Tabs.

  */ /* 48px */

}



.tabs-wrapper {

  display: flex;

  */ /* 48px */ /* 40px */

}



.tabs-wrapper > nav {
@@ -253,6 +249,9 @@ rgba(216, 217, 224, 0.8); 
}



@media screen and (min-width: 48em) {

  .tabs-wrapper {

    display: flex;

  }

  .is-horizontal .tabs {

    flex-direction: row;

    width: auto;
@@ -263,16 +262,28 @@ rgba(216, 217, 224, 0.8); 


  .is-horizontal .tabs--secondary {

    overflow: hidden;

    margin-right: -6px;

    margin-bottom: 1rem;

    margin-left: -6px;

    margin: -6px -6px 0;

    padding: 6px 6px 0;

    border-radius: 0;

  }



  .is-horizontal .tabs--secondary .tabs__tab {

    font-size: 0.889rem;

  }



  .is-horizontal .tabs--secondary .tabs__link {

    min-height: 2.5rem;

    padding-top: 0.5rem;

    padding-bottom: 0.5rem;

  }



  .is-horizontal .tabs--secondary .tabs__link:focus {

    min-height: 2.5rem;

  }



  .is-horizontal .tabs--secondary::after {

    position: absolute;

    bottom: 1rem;

    bottom: 0;

    left: 0;

    display: block;

    width: 100%;

core/themes/claro/css/components/tabs.pcss.css

+20 −7
Changes for core/themes/claro/css/components/tabs.pcss.css: 20 added lines, 7 removed lines.
Original line number Diff line number Diff line
@@ -13,15 +13,13 @@ 
  --tabs--focus-height: 3px;

  --tabs--active-height: 3px;

  --tabs-link-height: 3rem; /* 48px */

  --tabs-secondary-link-height: 2.5rem; /* 40px */

  --tabs-base-border: 1px solid var(--color-lightgray);

  --tabs-base-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  --tabs-trigger-border: 1px solid rgba(216, 217, 224, 0.8);

  --tabs--hover-bg-color: #e6ecf8;

}



.tabs-wrapper {

  display: flex;

}

.tabs-wrapper > nav {

  width: 100%;

}
@@ -175,6 +173,9 @@ 
}



@media screen and (min-width: 48em) {

  .tabs-wrapper {

    display: flex;

  }

  .is-horizontal .tabs {

    flex-direction: row;

    width: auto;
@@ -185,16 +186,28 @@ 


  .is-horizontal .tabs--secondary {

    overflow: hidden;

    margin-right: calc(calc(var(--tabs--focus-height) + 3px) * -1);

    margin-bottom: var(--space-m);

    margin-left: calc(calc(var(--tabs--focus-height) + 3px) * -1);

    margin: calc(calc(var(--tabs--focus-height) + 3px) * -1) calc(calc(var(--tabs--focus-height) + 3px) * -1) 0;

    padding: calc(var(--tabs--focus-height) + 3px) calc(var(--tabs--focus-height) + 3px) 0;

    border-radius: 0;

  }



  .is-horizontal .tabs--secondary .tabs__tab {

    font-size: var(--font-size-s);

  }



  .is-horizontal .tabs--secondary .tabs__link {

    min-height: var(--tabs-secondary-link-height);

    padding-top: var(--space-xs);

    padding-bottom: var(--space-xs);

  }



  .is-horizontal .tabs--secondary .tabs__link:focus {

    min-height: var(--tabs-secondary-link-height);

  }



  .is-horizontal .tabs--secondary::after {

    position: absolute;

    bottom: var(--space-m);

    bottom: 0;

    left: 0;

    display: block;

    width: 100%;

core/themes/claro/css/layout/layout.css

+12 −1
Changes for core/themes/claro/css/layout/layout.css: 12 added lines, 1 removed line.
Original line number Diff line number Diff line
@@ -4,15 +4,26 @@ 
 * https://www.drupal.org/node/2815083

 * @preserve

 */



/**

 * Add spacing to bottom of pages

 * Add spacing to top and bottom of pages.

 */



.page-content {

  margin-top: 1.5rem;

  margin-bottom: 80px;

}



@media screen and (min-width: 38em) {

  .page-content {

    margin-top: 2rem;

  }

}



/**

 * Add color to layout icons.

 */



.layout-icon__region {

  fill: #f5f5f2;

  stroke: #666;