web/_sass/addon/module.scss

/*
* Mainly scss modules, only imported to `assets/css/main.scss`
*/

/* ---------- scss placeholder --------- */

%heading {
  color: var(--heading-color);
  font-weight: 400;
  font-family: $font-family-heading;
  scroll-margin-top: 3.5rem;
}

%anchor {
  .anchor {
    font-size: 80%;
  }

  @media (hover: hover) {
    .anchor {
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
    }

    &:hover {
      .anchor {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.25s ease-in, visibility 0s ease-in 0s;
      }
    }
  }
}

%tag-hover {
  background: var(--tag-hover);
  transition: background 0.35s ease-in-out;
}

%table-cell {
  padding: 0.4rem 1rem;
  font-size: 95%;
  white-space: nowrap;
}

%link-hover {
  color: #d2603a !important;
  border-bottom: 1px solid #d2603a;
  text-decoration: none;
}

%link-color {
  color: var(--link-color);
}

%link-underline {
  border-bottom: 1px solid var(--link-underline-color);
}

%clickable-transition {
  transition: all 0.3s ease-in-out;
}

%no-cursor {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

%no-bottom-border {
  border-bottom: none;
}

%cursor-pointer {
  cursor: pointer;
}

%normal-font-style {
  font-style: normal;
}

%rounded {
  border-radius: $radius-lg;
}

%img-caption {
  + em {
    display: block;
    text-align: center;
    font-style: normal;
    font-size: 80%;
    padding: 0;
    color: #6d6c6c;
  }
}

%sidebar-links {
  color: var(--sidebar-muted-color);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

%text-clip {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

%text-ellipsis {
  @include text-ellipsis;
}

%text-highlight {
  color: var(--text-muted-highlight-color);
  font-weight: 600;
}

%text-sm {
  font-size: 0.85rem;
}

%text-xs {
  font-size: 0.8rem;
}

%sup-fn-target {
  &:target {
    background-color: var(--footnote-target-bg);
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    transition: background-color 1.75s ease-in-out;
  }
}

%btn-color {
  button i {
    color: #999999;
  }
}

/* ---------- scss mixin --------- */

@mixin mt-mb($value) {
  margin-top: $value;
  margin-bottom: $value;
}

@mixin ml-mr($value) {
  margin-left: $value;
  margin-right: $value;
}

@mixin pt-pb($val) {
  padding-top: $val;
  padding-bottom: $val;
}

@mixin pl-pr($val, $important: false) {
  @if $important {
    padding-left: $val !important;
    padding-right: $val !important;
  } @else {
    padding-left: $val;
    padding-right: $val;
  }
}

@mixin placeholder {
  color: var(--text-muted-color) !important;
}

@mixin placeholder-focus {
  opacity: 0.6;
}

@mixin label($font-size: 1rem, $font-weight: 600, $color: var(--label-color)) {
  color: $color;
  font-size: $font-size;
  font-weight: $font-weight;
}

@mixin align-center {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

@mixin prompt($type, $fa-content, $fa-style: 'solid', $rotate: 0) {
  &.prompt-#{$type} {
    background-color: var(--prompt-#{$type}-bg);

    &::before {
      content: $fa-content;
      color: var(--prompt-#{$type}-icon-color);
      font: var(--fa-font-#{$fa-style});

      @if $rotate != 0 {
        transform: rotate(#{$rotate}deg);
      }
    }
  }
}