Contents

.c-tabs {
  display: flex;
  flex-wrap: wrap;

  &__input {
    display: none;
  }

  &__button {
    order: 0;
    padding: .5rem;
    border: 1px solid #aaa;
    min-width: 3rem;
    text-align: center;
    position: relative;
    background-color: #f2f2f2;
    
    &:first-of-type {
      margin-left: 1rem;
      border-top-left-radius: .25rem;
      &::before {
        background-color: #aaa;
        content: "";
        width: 1rem;
        left: -1rem;
        bottom: -1px;
        height: 1px;
        position: absolute;
      }
    }

    &:last-of-type {
      margin-right: 1rem;
      border-top-right-radius: .25rem;
      &::after {
        background-color: #aaa;
        content: "";
        width: 1rem;
        right: -1rem;
        bottom: -1px;
        height: 1px;
        position: absolute;
      }
    }

    &:not(:first-of-type){
      border-left: none;
    }
  }

  &__pane {
    order: 1;
    display: none;
    width: 100%;
  }

  &__input:checked + &__button {
    font-weight: bold;
    border-bottom-color: transparent;
    background-color: transparent;
  }

  &__input:checked + &__button + &__pane {
    display: block;
  }

}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
databook-theme-0.1.1	_sass/components/_tabs.scss