Add: Tabs shortcode (inspired by https://rayramble.com/blog/test-tab-group/)

machiav3lli

17.15.2023 20a7d0ddbfcbc7eaab6f3ad47db0483d39b36107

 assets/sass/_components.sass

@@ -321,3 +321,59 @@
    background-size: 12%
    background-position: 50% 50%
    background-repeat: no-repeat

.tabs
  display: flex
  flex-wrap: wrap
  margin: 2rem 0 2rem 0
  position: relative

  &.tabs-left
    justify-content: flex-start

    label.tab-label
      margin-right: 0.5rem

    .tab-content
      border-radius: 0px 6px 6px 6px

  &.tabs-right
    justify-content: flex-end

    label.tab-label
      margin-left: 0.5rem

    .tab-content
      border-radius: 6px 6px 6px 6px

  input.tab-input
    display: none

  label.tab-label
    background-color: var(--accent) transparent
    border-color: var(--theme)
    border-radius: 6px 6px 0px 0px
    border-style: solid
    border-bottom-style: hidden
    border-width: 2px
    cursor: pointer
    display: inline-block
    order: 1
    padding: 0.3rem 0.6rem
    position: relative
    top: 2px
    user-select: none

  input.tab-input:checked + label.tab-label
    background-color: var(--accent)
    border-color: var(--theme)

  .tab-content
    background-color: var(--accent)
    border-color: var(--theme)
    border-style: solid
    border-width: 2px
    display: none
    order: 2
    padding: 1rem
    width: 100%