webpack-bootstrap-ui-kit/src/scss/_mixings.scss

@use "sass:math";

@import "~bootstrap/scss/mixins";

@mixin hover-disabled() {
  &:not(.disabled) {
    &.active,
    &:active,
    &:hover,
    &:focus {
      @content;
    }
  }
}

@mixin pseudo($display: block, $pos: absolute, $content: "") {
  content: $content;
  display: $display;
  position: $pos;
}

@mixin responsive-ratio($x, $y, $pseudo: false) {
  $padding: unquote(math.div($y, $x) * 100 + "%");

  @if $pseudo {
    &:before {
      @include pseudo($pos: relative);
      padding-top: $padding;
      width: 100%;
    }
  } @else {
    padding-top: $padding;
  }
}

@mixin input-placeholder {
  &.placeholder {
    @content;
  }

  &:-moz-placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }

  &::-webkit-input-placeholder {
    @content;
  }
}

@mixin truncate($truncation-boundary) {
  max-width: $truncation-boundary;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin fix-bold() {
  display: inline-flex;
  flex-direction: column;

  &:before {
    content: attr(data-text);
    content: attr(data-text) / "";
    font-weight: bold;
    height: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    visibility: hidden;
  }
}

@mixin dropdowns-dark() {
  .navbar-dark {
    .nav-link {
      @include hover-focus {
        background: $navbar-dark-hover-background;
      }
    }

    .active > .nav-link,
    .nav-link.active {
      background: $navbar-dark-active-background;
    }

    .nav-link.show,
    .navbar-nav .show > .nav-link {
      background: $navbar-dark-show-background;
      color: $navbar-dark-show-color;
    }
  }

  .dropdown-menu.bg-dark {
    border-color: $dark;

    .nav-link {
      color: $navbar-dark-color;

      @include hover-focus {
        color: $navbar-dark-hover-color;
      }

      &.disabled {
        color: $navbar-dark-disabled-color;
        cursor: default;
      }
    }

    .show > .nav-link,
    .active > .nav-link,
    .nav-link.show,
    .nav-link.active {
      color: $navbar-dark-active-color;
    }

    .dropdown-item {
      @include hover-focus {
        background: $navbar-dark-hover-background;
        color: $navbar-dark-hover-color;
      }

      &.active,
      &:active {
        background: $navbar-dark-active-background;
      }

      .nav-link {
        background: none;
      }
    }
  }
}

@mixin dropdown-hovers() {
  .dropdown.show {
    .dropdown {
      &:hover,
      &.active,
      &:focus {
        > .dropdown-menu {
          display: block;
        }
      }
    }
  }

  @media only screen and (min-width: map-get($grid-breakpoints, "md")) {
    .dropdown-hover ul li {
      position: relative;
    }

    .dropdown-hover ul li {
      &:hover,
      &.active,
      &:focus {
        > .dropdown-toggle::after {
          transform: rotate(-90deg);
        }

        > ul {
          display: block;
        }
      }
    }

    .dropdown-hover ul ul {
      display: none;
      left: 0;
      min-width: 250px;
      position: absolute;
      top: 100%;
    }

    .dropdown-hover ul ul li {
      position: relative;
    }

    .dropdown-hover ul ul li {
      &:hover,
      &.active,
      &:focus {
        > ul {
          display: block;
        }
      }
    }

    .dropdown-hover ul ul ul {
      display: none;
      left: 100%;
      min-width: 250px;
      position: absolute;
      top: 0;
    }

    .dropdown-hover ul ul ul li {
      position: relative;
    }

    .dropdown-hover ul ul ul li {
      &:hover,
      &.active,
      &:focus {
        ul {
          display: block;
        }
      }
    }

    .dropdown-hover ul ul ul ul {
      display: none;
      left: -100%;
      min-width: 250px;
      position: absolute;
      top: 0;
      z-index: 1;
    }
  }
}