enfrancais-app/src/assets/scss/abstracts/_mixins.scss

@import '~bootstrap/scss/mixins';


@mixin button-variant(
  $background,
  $border,
  $hover-background: darken($background, 7.5%),
  $hover-border: darken($border, 10%),
  $active-background: darken($background, 10%),
  $active-border: darken($border, 12.5%)
) {
  color: color-yiq($background);
  @include gradient-bg($background);
  border-color: $border;
  // @include box-shadow($btn-box-shadow);
  @if $background == $white {
    box-shadow: 3px 5px 0 $dark;
  }

  @include hover() {
    color: color-yiq($hover-background);
    @include gradient-bg($hover-background);
    border-color: $hover-border;

    @if $background == $white {
      background-color: $white;
      border-color: $dark;
    }
  }

  &:focus,
  &.focus {
    color: color-yiq($hover-background);
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $background == $white {
      background-color: $white;
      border-color: $dark;
    }
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    color: color-yiq($background);
    background-color: $background;
    border-color: $border;
  }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: color-yiq($active-background);
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      border-color: $hover-border;
    }
  }
}

@mixin dot-button-variant(
  $background,
  $border,
  $hover-background: darken($background, 7.5%),
  $hover-border: lighten($border, 5%),
  $active-background: $background,
  $active-border: $border
) {
  color: color-yiq($background);
  background-color: lighten($background, 15%);
  @if $background == $white {
    border-color: $black;
    border-width: 3px;
  } @else {
    border-color: lighten($border, 15%);
  }

  &:focus,
  &.focus {
    color: color-yiq($hover-background);
    @if $background == $white {
      border-color: $black;
    } @else {
      border-color: $hover-border;
    }
  }

  // Disabled comes first so active can properly restyle
  // &.disabled,
  // &:disabled {
  //   color: color-yiq($background);
  //   background-color: $background;
  //   border-color: $border;
  // }

  &:not(:disabled):not(.disabled):active,
  &:not(:disabled):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: color-yiq($active-background);
    background-color: $active-background;
    @if $background == $white {
      border-color: $black;
    } @else {
      border-color: $active-border;

      &:focus {
        border-color: $hover-border;
      }
    }
  }
}


// List Groups

@mixin list-group-item-variant($state, $osef1, $osef2) {
  $color: theme-color($state);

  .list-group-item-#{$state} {
    color: darken($color, 32%);
    background-color: lighten($color, 3.25%);

    &.list-group-item-action {
      @include hover-focus() {
        color: darken($color, 40%);
        background-color: $color;
      }

      // &.active {
      //   color: $white;
      //   background-color: $color;
      //   border-color: $color;
      // }
    }
  }
}


@mixin line-clamp($lines, $line-height) {
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  max-height: $lines * $line-height;
  text-overflow: ellipsis;
  overflow: hidden;
}