penpot/frontend/resources/styles/common/dependencies/mixin.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

/// This mixin allows you  to add styles to a specific Media query inside the style selector specifying which Breaking Point you want to choose.
/// @group Mixins
/// @parameter $point - This parameter decide which one of Breaking Point you want to use: "bp-desktop" (Desktop), "bp-tablet" (Tablet) and "bp-mobile" (Mobile).
$bp-min-720: "(min-width: 720px)";
$bp-min-1020: "(min-width: 1020px)";
$bp-min-1366: "(min-width: 1366px)";
$bp-max-1366: "(max-width: 1366px)";
$bp-min-2556: "(min-width: 2556px)";

@mixin bp($point) {
  @if $point == mobile {
    @media #{$bp-min-720} {
      @content;
    }
  } @else if $point == tablet {
    @media #{$bp-min-1020} {
      @content;
    }
  } @else if $point == desktop {
    @media #{$bp-min-1366} {
      @content;
    }
  }
}

// Advanced positioning
// ----------------
@mixin position(
  $type,
  $top: $position-default,
  $right: $position-default,
  $bottom: $position-default,
  $left: $position-default
) {
  position: $type;
  $allowed_types: absolute relative fixed;
  @if not index($allowed_types, $type) {
    @warn "Unknown position: #{$type}.";
  }
  @each $data in top $top, right $right, bottom $bottom, left $left {
    #{nth($data, 1)}: nth($data, 2);
  }
}
@mixin absolute(
  $top: $position-default,
  $right: $position-default,
  $bottom: $position-default,
  $left: $position-default
) {
  @include position(absolute, $top, $right, $bottom, $left);
}
@mixin relative(
  $top: $position-default,
  $right: $position-default,
  $bottom: $position-default,
  $left: $position-default
) {
  @include position(relative, $top, $right, $bottom, $left);
}
@mixin fixed(
  $top: $position-default,
  $right: $position-default,
  $bottom: $position-default,
  $left: $position-default
) {
  @include position(fixed, $top, $right, $bottom, $left);
}

/// Center an element vertically and horizontally with an absolute position.
/// @group Mixins

@mixin centerer {
  @include absolute(50%, null, null, 50%);
  transform: translate(-50%, -50%);
}

/// This mixing allow you to add placeholder colors in all available browsers
/// @group Mixins

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

  &:-moz-placeholder {
    /* Firefox 18- */
    @content;
  }

  &::-moz-placeholder {
    /* Firefox 19+ */
    @content;
  }

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

/// Allows you to visually
/// @group Mixins

@mixin hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
}

@mixin font-face($style-name, $file, $weight: unquote("normal"), $style: unquote("normal")) {
  $filepath: "/fonts/" + $file;
  @font-face {
    font-family: "#{$style-name}";
    src:
      url($filepath + ".woff2") format("woff2"),
      url($filepath + ".ttf") format("truetype");
    font-weight: unquote($weight);
    font-style: unquote($style);
  }
}

@mixin tooltipShow {
  &:hover {
    .icon-tooltip {
      display: block;
      left: 2rem;
      animation: tooltipAppear 0.2s linear;
    }
  }
  &.active {
    .icon-tooltip {
      display: block;
      left: 2rem;
      animation: tooltipAppear 0.2s linear;
    }
  }
}

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

@mixin paragraph-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;

  &::after {
    background-color: $color-gray-50;
    bottom: -3px;
    content: "...";
    padding-left: 10px;
    position: absolute;
    right: 2px;
  }
}