bramw_baserow/web-frontend/assets/scss/abstracts/_mixins.scss

@mixin button-style($background, $active-background, $color: $white) {
  background-color: $background;
  color: $color;

  &:active {
    background-color: $active-background;
  }

  &.disabled,
  &[disabled] {
    background-color: $background;
  }

  &.button-loading {
    background-color: $active-background;
    color: $active-background;
  }
}

@mixin button-size($font-size, $height, $left-right-space) {
  font-size: $font-size;
  height: $height;
  line-height: $height;
  padding: 0 $left-right-space;
}

@mixin alert-style($background, $border, $title, $text, $icon-border) {
  background-color: $background;
  border-color: $border;

  .alert-icon {
    border-color: $icon-border;
  }

  .alert-title {
    color: $title;
  }

  .alert-content {
    color: $text;
  }

  .alert-close {
    color: $title;

    &:hover {
      color: $text;
    }
  }
}

@mixin fixed-height($height, $font-size) {
  height: $height;
  line-height: $height;
  font-size: $font-size;
}

@mixin center-text($width, $font-size, $height: $width) {
  @include fixed-height($height, $font-size);

  width: $width;
  text-align: center;
}

@mixin loading($size: 1.4em) {
  position: relative;
  display: block;
  width: $size;
  height: $size;
  border-radius: 50%;
  border: 0.25em solid;
  border-color: $color-primary-500 transparent $color-primary-500 transparent;
  animation: spin infinite 1800ms;
  animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

// The basically works the same as padding: 10px 0 0 10px or padding: 10px; only then
// resulting position: absolute; with corresponding top, right, bottom, left values.
// -------
// Example:
//  @include absolute(10px);
// Would result in:
//  position: absolute;
//  top: 10px; right: 10px; bottom: 10px; left: 10px;
// -------
// Example:
//  @include absolute(10px, 20px);
// Would result in:
//  position: absolute;
//  top: 10px; right: 20px; bottom: 10px; left: 20px;
// -------
// Example:
//  @include absolute(10px, 20px, 30px);
// Would result in:
//  position: absolute;
//  top: 10px; right: 20px; bottom: 30px;
@mixin absolute($top: null, $right: null, $bottom: null, $left: null) {
  position: absolute;

  @if ($top != null and $right == null and $bottom == null and $left == null) {
    top: $top;
    right: $top;
    bottom: $top;
    left: $top;
  }

  /* stylelint-disable-next-line at-rule-no-unknown */
  @else if ($top != null and $right != null and $bottom == null and
  $left == null) {
    top: $top;
    right: $right;
    bottom: $top;
    left: $right;
  }

  /* stylelint-disable-next-line at-rule-no-unknown */
  @else {
    @if $top != null {
      top: $top;
    }

    @if $right != null {
      right: $right;
    }

    @if $bottom != null {
      bottom: $bottom;
    }

    @if $left != null {
      left: $left;
    }
  }
}