<commit_before>@import typography
@import mixins
@import branding

// Foundation overrides
#tabs .tabs-content > .content p
  max-width: 100% !important
  
.tabs-content > .content
  padding-top: 0 !important

// Tabs styling

#tabs
  background: url("/assets/gray_jean.png") top left repeat
  @include box-shadow(inset 0 2px 3px 0 rgba(0,0,0,0.15))
  display: block
  color: $dark-grey
  .header
    text-align: center
    text-transform: uppercase
    color: $dark-grey
    border-bottom: 1px solid $disabled-dark
    margin-top: 0.75rem
    margin-bottom: 0.75rem
    padding-bottom: 0.25rem
    font-size: 0.875rem

  .panel
    border-color: $clr-brick-bright
    background-color: rgba(255, 255, 255, 0)

  dl dd a
    @include avenir
    background: transparent
    text-transform: uppercase
    line-height: 50px
    font-size: 0.875em
    text-shadow: 0 -1px 1px #ffffff
    &:hover, &:focus, &:active
      color: $clr-brick-bright
    @media all and (max-width: 768px)
      line-height: 30px !important
    border: none
    &, &:hover
      background: none
    padding: 0px 2.2em
    @media all and (max-width: 768px)
      line-height: inherit !important
  
  // inactive nav link

  dl  
    dd
      border-top: 4px solid transparent
      a:after
        padding-left: 8px
        content: "\e634"
        visibility: hidden
        @include icon-font
    dd:hover
      a:after
        visibility: visible
  
  // active nav link
  
  dl
    dd.active
      border-top: 4px solid $clr-brick
      a
        color: $clr-brick
      a:after
        content: "\e633"
        visibility: visible
        @include icon-font

  // content revealed in accordion

  .tabs-content
    margin-bottom: 0
    & > .content
      background: none
      border: none
      img
        margin: 0px 0px 0px 40px
      p
        max-width: 555px
        @media all and (max-width: 768px)
          height: auto !important
      ul
        list-style-type: none
        padding-left: none
      .panel
        padding-bottom: 1.25em
<commit_msg>Styling shopfront tabs make things better and more responsive<commit_after>@import typography
@import mixins
@import branding

// Foundation overrides
#tabs .tabs-content > .content p
  max-width: 100% !important
  
.tabs-content > .content
  padding-top: 0 !important

// Tabs styling

#tabs
  background: url("/assets/gray_jean.png") top left repeat
  @include box-shadow(inset 0 2px 3px 0 rgba(0,0,0,0.15))
  display: block
  color: $dark-grey
  .header
    text-align: center
    text-transform: uppercase
    color: $dark-grey
    border-bottom: 1px solid $disabled-dark
    margin-top: 0.75rem
    margin-bottom: 0.75rem
    padding-bottom: 0.25rem
    font-size: 0.875rem

  .panel
    border-color: $clr-brick-bright
    background-color: rgba(255, 255, 255, 0)

  dl dd 

    text-align: center
    @media all and (max-width: 640px)
      text-align: left

    a
      @include avenir
      background: transparent
      text-transform: uppercase
      line-height: 1
      font-size: 0.875em
      text-shadow: 0 -1px 1px #ffffff
      padding: 1em
      border: none
      &:hover, &:focus, &:active
        color: $clr-brick-bright
      &, &:hover
        background: none
      
      @media all and (max-width: 640px)
        padding: 0.35em 0 0.65em 0
        text-shadow: none
  
  // inactive nav link
  dl  
    dd
      border-top: 4px solid transparent
      
      a:after
        padding-left: 8px
        content: "\e633"
        visibility: hidden
        @include icon-font
        @media all and (max-width: 640px)
          content: "\e633"
    dd:hover
      a:after
        visibility: visible
  
  // active nav link
  
  dl
    dd.active
      border-top: 4px solid $clr-brick
      @media all and (max-width: 640px)
        border-top: 4px solid transparent
        background-color: $clr-brick
      a
        color: $clr-brick
        @media all and (max-width: 640px)
          color: white
      a:after
        content: "\e634"
        visibility: visible
        @include icon-font
        @media all and (max-width: 640px)
          content: "\e633"

  // content revealed in accordion

  .tabs-content
    margin-bottom: 0
    & > .content
      background: none
      border: none
      img
        margin: 0px 0px 0px 40px
      p
        max-width: 555px
        @media all and (max-width: 768px)
          height: auto !important
      ul
        list-style-type: none
        padding-left: none
      .panel
        padding-bottom: 1.25em

{'fraction_non_alphanumeric': 0.09648929123426805, 'fraction_numerical': 0.041068668580260544, 'mean_word_length': 1.97634691195795, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3217224', 'n_tokens_mistral': 1659, 'n_tokens_neox': 1458, 'n_words': 426}