Verified Commit 07f3b288 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3332706 by Gauravvvv, smustgrave: Refactor Claro's tabs stylesheet

parent dfa16ab2

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

+43 −91
Original line number Diff line number Diff line
@@ -39,10 +39,6 @@ 
  box-shadow: var(--tabs-base-shadow);

}



[dir="rtl"] .tabs {

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

}



.tabs__tab {

  position: relative;

  border-bottom: var(--tabs-base-border);
@@ -51,6 +47,10 @@ 
  font-weight: bold;

}



.tabs__tab:not(.is-active) {

  display: none;

}



.tabs__tab:last-child {

  border-bottom: 0;

}
@@ -62,6 +62,21 @@ 
  box-shadow: var(--tabs-base-shadow);

}



.tabs__tab.is-active:focus::before {

  top: calc(var(--tabs--focus-height) * -1);

  height: calc(var(--tabs-link-height) + 2px);

}



.tabs__tab.is-active::before {

  z-index: 2;

  top: -1px;

  inset-inline-start: -1px;

  width: var(--tabs--active-height);

  height: calc(100% + 2px);

  border-inline-start: var(--tabs--active-height) solid var(--color-absolutezero);

  border-top-left-radius: var(--tabs-border-radius-size);

}



.tabs__link {

  position: relative;

  display: flex;
@@ -79,7 +94,7 @@ 
.tabs__link:focus {

  min-height: calc(var(--tabs-link-height) + var(--tabs--focus-height) - 1px);

  margin: -1px;

  padding-left: calc(var(--space-l) - var(--tabs--focus-height) + 1px); /* LTR */

  padding-inline-start: calc(var(--space-l) - var(--tabs--focus-height) + 1px);

  text-decoration: none;

  color: var(--color-gray-800);

  border: var(--tabs--focus-height) solid var(--color-focus);
@@ -88,11 +103,6 @@ 
  box-shadow: none;

}



[dir="rtl"] .tabs__link:focus {

  padding-right: calc(var(--space-l) - var(--tabs--focus-height) + 1px);

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

}



.tabs__link:hover {

  text-decoration: none;

  color: var(--color-text);
@@ -108,23 +118,18 @@ 
  margin: -1px 0;

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

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

  border-left: none; /* LTR */

  border-inline-start: none;

  border-radius: 0;

}



.tabs__link:not(.is-active):focus {

  z-index: 3;

}



[dir="rtl"] .tabs__link.is-active:focus {

  border-right: none;

  border-left: var(--tabs--focus-height) solid var(--color-focus);

}



.tabs__link.is-active:hover {

  color: var(--color-text);

}



.tabs__link:not(.is-active):focus {

  z-index: 3;

}



/* Active and hover indicator. */



.tabs__tab::before,
@@ -134,39 +139,8 @@ 
  content: "";

}



.tabs__tab.is-active::before {

  z-index: 2;

  top: -1px;

  left: -1px; /* LTR */

  width: var(--tabs--active-height);

  height: calc(100% + 2px);

  border-left: var(--tabs--active-height) solid var(--color-absolutezero); /* LTR */

  border-top-left-radius: var(--tabs-border-radius-size); /* LTR */

}



[dir="rtl"] .tabs__tab.is-active::before {

  right: -1px;

  left: auto;

  border-right: var(--tabs--focus-height) solid var(--color-absolutezero);

  border-left: none;

  border-radius: 0 var(--tabs-border-radius-size) 0 var(--tabs-border-radius-size);

}



.tabs.is-open .tabs__tab.is-active::before {

  border-bottom-left-radius: 0; /* LTR */

}



[dir="rtl"] .tabs.is-open .tabs__tab.is-active::before {

  border-bottom-right-radius: var(--tabs-border-radius-size);

}



.tabs__tab.is-active:focus::before {

  top: calc(var(--tabs--focus-height) * -1);

  height: calc(var(--tabs-link-height) + 2px);

}



.tabs__tab:not(.is-active) {

  display: none;

  border-bottom-left-radius: 0;

}



.tabs--secondary .tabs__tab:not(.is-active) {
@@ -185,12 +159,7 @@ 
  width: var(--tabs-link-height);

  padding-right: 1px;

  text-align: center;

  border-left: var(--tabs-trigger-border); /* LTR */

}



[dir="rtl"] .tabs__trigger {

  border-right: var(--tabs-trigger-border);

  border-left: none;

  border-inline-start: var(--tabs-trigger-border);

}



.tabs__trigger:focus {
@@ -208,7 +177,6 @@ 
  .tabs-wrapper--secondary {

    position: relative;

  }



  .is-horizontal .tabs {

    flex-direction: row;

    width: auto;
@@ -216,45 +184,39 @@ 
    border: 0;

    box-shadow: none;

  }



  .is-horizontal .tabs--secondary {

    overflow: hidden;

    margin: calc(calc(var(--tabs--focus-height) + 0.1875rem) * -1) calc(calc(var(--tabs--focus-height) + 0.1875rem) * -1) 0;

    padding: calc(var(--tabs--focus-height) + 0.1875rem) calc(var(--tabs--focus-height) + 0.1875rem) 0;

    border-radius: 0;

  }



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

    position: absolute;

    bottom: 0;

    left: 0;

    display: block;

    width: 100%;

    content: "";

    border-bottom: 1px solid var(--color-gray-200);

  }

  .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: 0;

    left: 0;

    display: block;

    width: 100%;

    content: "";

    border-bottom: 1px solid var(--color-gray-200);

  }



  .is-horizontal .tabs__tab {

    display: block;

    border-top: none;

    border-bottom: none;

    background: none;

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

  }



  .is-horizontal .tabs__tab.is-active {

    order: 0;

    background: none;
@@ -266,19 +228,11 @@ 
  .is-horizontal .tabs__tab .tabs__link.is-active::before {

    border-radius: 0;

  }

  .is-horizontal .tabs__trigger {

    display: none;

  }

  .is-horizontal .tabs__tab {

    display: block;

  }



  .is-horizontal .tabs__link {

    padding-right: 2rem;

    padding-left: 2rem;

    border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0;

  }



  .is-horizontal .tabs__link:focus {

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

    margin: 0;
@@ -290,18 +244,10 @@ 
    outline: 2px dotted transparent;

    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);

  }

  [dir="rtl"] .is-horizontal .tabs__link:focus {

    border: none;

  }

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

    box-shadow: 0 0 0 2px var(--color-gray-050), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);

  }



  .is-horizontal .tabs__link:hover {

    color: var(--color-absolutezero-hover);

    background: var(--tabs--hover-bg-color);

  }



  .is-horizontal .tabs__link.is-active::before {

    top: auto;

    right: 0;
@@ -313,4 +259,10 @@ 
    border-bottom: var(--tabs--active-height) solid var(--color-absolutezero);

    border-left: none;

  }

  .is-horizontal .tabs__trigger {

    display: none;

  }

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

    box-shadow: 0 0 0 2px var(--color-gray-050), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);

  }

}

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

+176 −200
Original line number Diff line number Diff line
@@ -18,9 +18,11 @@ 
  --tabs--hover-bg-color: var(--color-bgblue-active);

}



.tabs-wrapper > nav {

.tabs-wrapper {

  & > nav {

    width: 100%;

  }

}

.tabs {

  display: flex;

  flex-direction: column;
@@ -30,9 +32,6 @@ 
  border-radius: var(--tabs-border-radius-size);

  box-shadow: var(--tabs-base-shadow);

}

[dir="rtl"] .tabs {

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

}



.tabs__tab {

  position: relative;
@@ -40,15 +39,31 @@ 
  background-color: var(--color-gray-025);

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

  font-weight: bold;

  &:not(.is-active) {

    display: none;

  }

.tabs__tab:last-child {

  &:last-child {

    border-bottom: 0;

  }

.tabs__tab.is-active {

  &.is-active {

    display: flex;

    justify-content: space-between;

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

    box-shadow: var(--tabs-base-shadow);

    &:focus::before {

      top: calc(var(--tabs--focus-height) * -1);

      height: calc(var(--tabs-link-height) + 2px);

    }

    &::before {

      z-index: 2;

      top: -1px;

      inset-inline-start: -1px;

      width: var(--tabs--active-height);

      height: calc(100% + 2px);

      border-inline-start: var(--tabs--active-height) solid var(--color-absolutezero);

      border-top-left-radius: var(--tabs-border-radius-size);

    }

  }

}



.tabs__link {
@@ -63,11 +78,10 @@ 
  text-decoration: none;

  color: var(--color-gray-800);

  line-height: 1.2rem;

}

.tabs__link:focus {

  &:focus {

    min-height: calc(var(--tabs-link-height) + var(--tabs--focus-height) - 1px);

    margin: -1px;

  padding-left: calc(var(--space-l) - var(--tabs--focus-height) + 1px); /* LTR */

    padding-inline-start: calc(var(--space-l) - var(--tabs--focus-height) + 1px);

    text-decoration: none;

    color: var(--color-gray-800);

    border: var(--tabs--focus-height) solid var(--color-focus);
@@ -75,35 +89,28 @@ 
    outline: none;

    box-shadow: none;

  }

[dir="rtl"] .tabs__link:focus {

  padding-right: calc(var(--space-l) - var(--tabs--focus-height) + 1px);

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

}

.tabs__link:hover {

  &:hover {

    text-decoration: none;

    color: var(--color-text);

  }

.tabs__link.is-active {

  &.is-active {

    z-index: 1;

    flex-grow: 1;

    color: var(--color-absolutezero);

}

.tabs__link.is-active:focus {

    &:focus {

      margin: -1px 0;

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

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

  border-left: none; /* LTR */

      border-inline-start: none;

      border-radius: 0;

    }

.tabs__link:not(.is-active):focus {

  z-index: 3;

    &:hover {

      color: var(--color-text);

    }

[dir="rtl"] .tabs__link.is-active:focus {

  border-right: none;

  border-left: var(--tabs--focus-height) solid var(--color-focus);

  }

.tabs__link.is-active:hover {

  color: var(--color-text);

  &:not(.is-active):focus {

    z-index: 3;

  }

}

/* Active and hover indicator. */

.tabs__tab::before,
@@ -112,39 +119,18 @@ 
  display: block;

  content: "";

}

.tabs__tab.is-active::before {

  z-index: 2;

  top: -1px;

  left: -1px; /* LTR */

  width: var(--tabs--active-height);

  height: calc(100% + 2px);

  border-left: var(--tabs--active-height) solid var(--color-absolutezero); /* LTR */

  border-top-left-radius: var(--tabs-border-radius-size); /* LTR */

}

[dir="rtl"] .tabs__tab.is-active::before {

  right: -1px;

  left: auto;

  border-right: var(--tabs--focus-height) solid var(--color-absolutezero);

  border-left: none;

  border-radius: 0 var(--tabs-border-radius-size) 0 var(--tabs-border-radius-size);

}

.tabs.is-open .tabs__tab.is-active::before {

  border-bottom-left-radius: 0; /* LTR */

}

[dir="rtl"] .tabs.is-open .tabs__tab.is-active::before {

  border-bottom-right-radius: var(--tabs-border-radius-size);

.tabs {

  &.is-open {

    & .tabs__tab.is-active::before {

      border-bottom-left-radius: 0;

    }

.tabs__tab.is-active:focus::before {

  top: calc(var(--tabs--focus-height) * -1);

  height: calc(var(--tabs-link-height) + 2px);

  }



.tabs__tab:not(.is-active) {

  display: none;

}

.tabs--secondary .tabs__tab:not(.is-active) {

.tabs--secondary {

  & .tabs__tab:not(.is-active) {

    display: block;

  }

}

.tabs.is-open > .tabs__tab {

  display: flex;

}
@@ -157,18 +143,14 @@ 
  width: var(--tabs-link-height);

  padding-right: 1px;

  text-align: center;

  border-left: var(--tabs-trigger-border); /* LTR */

}

[dir="rtl"] .tabs__trigger {

  border-right: var(--tabs-trigger-border);

  border-left: none;

}

.tabs__trigger:focus {

  border-inline-start: var(--tabs-trigger-border);

  &:focus {

    padding-right: 0;

    border: var(--tabs--focus-height) solid var(--color-focus);

    border-radius: var(--tabs-border-radius-size);

    box-shadow: none;

  }

}



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

  .tabs-wrapper {
@@ -179,77 +161,65 @@ 
    position: relative;

  }



  .is-horizontal .tabs {

  .is-horizontal {

    & .tabs {

      flex-direction: row;

      width: auto;

      margin: 0;

      border: 0;

      box-shadow: none;

    }



  .is-horizontal .tabs--secondary {

    & .tabs--secondary {

      overflow: hidden;

      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;

      &::after {

        position: absolute;

        bottom: 0;

        left: 0;

        display: block;

        width: 100%;

        content: "";

        border-bottom: 1px solid var(--color-gray-200);

      }



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

      & .tabs__tab {

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

      }



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

      & .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 {

        &:focus {

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

        }



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

    position: absolute;

    bottom: 0;

    left: 0;

    display: block;

    width: 100%;

    content: "";

    border-bottom: 1px solid var(--color-gray-200);

      }



  .is-horizontal .tabs__tab {

    }

    & .tabs__tab {

      display: block;

      border-top: none;

      border-bottom: none;

      background: none;

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

  }



  .is-horizontal .tabs__tab.is-active {

      &.is-active {

        order: 0;

        background: none;

        box-shadow: none;

  }

  .is-horizontal .tabs__tab.is-active::before {

        &::before {

          content: none;

        }

  .is-horizontal .tabs__tab .tabs__link.is-active::before {

      }

      & .tabs__link {

        &.is-active::before {

          border-radius: 0;

        }

  .is-horizontal .tabs__trigger {

    display: none;

      }

  .is-horizontal .tabs__tab {

    display: block;

    }



  .is-horizontal .tabs__link {

    & .tabs__link {

      padding-right: 2rem;

      padding-left: 2rem;

      border-radius: var(--tabs-border-radius-size) var(--tabs-border-radius-size) 0 0;

  }



  .is-horizontal .tabs__link:focus {

      &:focus {

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

        margin: 0;

        padding-right: 2rem;
@@ -260,19 +230,12 @@ 
        outline: 2px dotted transparent;

        box-shadow: 0 0 0 2px var(--color-white), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);

      }

  [dir="rtl"] .is-horizontal .tabs__link:focus {

    border: none;

  }

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

    box-shadow: 0 0 0 2px var(--color-gray-050), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);

  }



  .is-horizontal .tabs__link:hover {

      &:hover {

        color: var(--color-absolutezero-hover);

        background: var(--tabs--hover-bg-color);

      }



  .is-horizontal .tabs__link.is-active::before {

      &.is-active {

        &::before {

          top: auto;

          right: 0;

          bottom: 0;
@@ -284,3 +247,16 @@ 
          border-left: none;

        }

      }

    }

    & .tabs__trigger {

      display: none;

    }

    & .tabs--primary {

      & .tabs__link {

        &:focus {

          box-shadow: 0 0 0 2px var(--color-gray-050), 0 0 0 calc(var(--tabs--focus-height) + 2px) var(--color-focus);

        }

      }

    }

  }

}