penpot/frontend/resources/styles/common/refactor/mixins.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

@use "./fonts.scss" as *;
@use "./spacing.scss" as *;

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-column($gap: $s-4) {
  display: flex;
  flex-direction: column;
  gap: #{$gap};
}

@mixin flex-row {
  display: flex;
  align-items: center;
  gap: $s-4;
}

@mixin button-style {
  border: none;
  background: none;
  cursor: pointer;
}

@mixin remove-input-style {
  border: none;
  background: none;
  outline: none;
}

@mixin uppercase-title-typography {
  font-family: "worksans", "vazirmatn", sans-serif;
  font-size: $fs-11;
  font-weight: $fw500;
  line-height: 1.2;
  text-transform: uppercase;
}

@mixin big-title-typography {
  font-family: "worksans", "vazirmatn", sans-serif;
  font-size: $fs-24;
  font-weight: $fw400;
  line-height: 1.2;
}

@mixin med-title-typography {
  font-family: "worksans", "vazirmatn", sans-serif;
  font-size: $fs-20;
  font-weight: $fw400;
  line-height: 1.2;
}

@mixin small-title-typography {
  font-family: "worksans", "vazirmatn", sans-serif;
  font-size: $fs-14;
  font-weight: $fw400;
  line-height: 1.2;
}

@mixin headline-large-typography {
  font-family: "worksans", "vazirmatn", sans-serif;
  font-size: $fs-18;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: $fw400;
}

@mixin headline-medium-typography {
  font-family: "worksans", "vazirmatn", sans-serif;
  font-size: $fs-16;
  line-height: 1.4;
  text-transform: uppercase;
  font-weight: $fw400;
}

@mixin headline-small-typography {
  font-family: "worksans", "vazirmatn", sans-serif;
  font-size: $fs-12;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: $fw500;
}

@mixin body-large-typography {
  font-family: "worksans", "vazirmatn", sans-serif;
  font-size: $fs-16;
  line-height: 1.5;
  font-weight: $fw400;
}

@mixin body-medium-typography {
  font-family: "worksans", "vazirmatn", sans-serif;
  font-size: $fs-14;
  line-height: 1.4;
  font-weight: $fw400;
}

@mixin body-small-typography {
  font-family: "worksans", "vazirmatn", sans-serif;
  font-size: $fs-12;
  font-weight: $fw400;
  line-height: 1.4;
}

@mixin code-typography {
  font-family: "robotomono", monospace;
  font-size: $fs-12;
  font-weight: $fw400;
  line-height: 1.2;
}

@mixin text-ellipsis {
  display: block;
  max-width: 99%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin two-line-text-ellipsis {
  max-width: 99%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@mixin inspect-value {
  @include body-small-typography;

  display: inline-block;
  width: fit-content;
  padding: 0;
  margin: 0;
  text-align: left;
  color: var(--menu-foreground-color);
}

@mixin copy-wrapper-base {
  position: relative;
  min-height: $s-32;
  width: $s-144;
  padding: calc($s-8 - $s-1) 0 calc($s-8 - $s-1) calc($s-8 - $s-1);
  border-radius: $s-8;
  box-sizing: border-box;
}

@mixin hidden-element {
  cursor: default;
  pointer-events: none;
  box-sizing: border-box;
  color: var(--input-foreground-color-disabled);
  stroke: var(--input-foreground-color-disabled);
  background-color: transparent;
}

@keyframes spin-animation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(359deg);
  }
}