hugo-geekblog/src/sass/_shortcodes.scss

// {{< expand "Label" "icon" >}}
.gblog-expand {
  margin-top: $padding-16;
  margin-bottom: $padding-16;

  border: $border-1 solid $gray-200;
  border-radius: $border-radius;

  overflow: hidden;

  &__head {
    background: $gray-100;
    padding: $padding-8 $padding-16;
    cursor: pointer;
  }

  &__content {
    display: none;
    padding: $padding-16;
  }

  &__control:checked + &__content {
    display: block;
  }

  .gblog-page__anchor {
    display: none;
  }
}

// {{< tabs >}}
.gblog-tabs {
  margin-top: $padding-16;
  margin-bottom: $padding-16;

  border: $border-1 solid $gray-200;
  border-radius: $border-radius;

  overflow: hidden;

  display: flex;
  flex-wrap: wrap;

  &__label {
    display: inline-block;
    padding: $padding-8 $padding-16;
    border-bottom: $border-1 transparent;
    cursor: pointer;
  }

  &__content {
    order: 999; //Move content blocks to the end
    width: 100%;
    border-top: $border-1 solid $gray-100;
    padding: $padding-16;
    display: none;
  }

  &__control:checked + &__label {
    border-bottom: $border-1 solid $color-link;
  }
  &__control:checked + &__label + &__content {
    display: block;
  }
}

// {{< columns >}}
.gblog-columns {
  margin-left: -$padding-16;
  margin-right: -$padding-16;

  &__content {
    margin: $padding-16 0;
    min-width: $body-min-width * 0.66;
    padding: 0 $padding-16;
  }

  .gblog-page__anchor {
    display: none;
  }
}

// {{< button >}}
.gblog-button {
  $root: &;

  display: inline-block;
  color: $gray-700;
  border: $border-1 solid $gray-500;
  border-radius: $border-radius;
  margin: $padding-8 0;
  cursor: pointer;

  &__link {
    display: inline-block;
    color: inherit !important;
    text-decoration: none !important;

    &:hover {
      background: none;
    }
  }

  &:hover {
    background: lighten($main-color, 2);
    border-color: $main-color;
    color: $gray-100;
  }

  &--regular {
    font-size: $font-size-base;

    #{$root}__link {
      padding: $padding-4 $padding-8;
    }
  }

  &--large {
    font-size: $font-size-20;

    #{$root}__link {
      padding: $padding-8 $padding-16;
    }
  }
}

// {{< hint >}}
.gblog-hint {
  @each $name, $color in $hint-colors {
    &.#{$name} {
      border-left-color: $color;
      background-color: rgba($color, 0.1);
    }
  }
}

// {{< mermaid >}}
.gblog-mermaid {
  font-family: "Liberation Sans", sans-serif;
}