rwadurian/frontend/admin-web/src/styles/mixins.scss

// ============================================
// 榴莲认种管理后台 - SCSS Mixins
// ============================================

@use 'variables' as *;

// 过渡动画
@mixin transition-base {
  transition: all $duration-base $ease-in-out;
}

@mixin transition-fast {
  transition: all $duration-fast $ease-in-out;
}

@mixin transition-slow {
  transition: all $duration-slow $ease-in-out;
}

// 悬停抬起效果
@mixin hover-lift {
  transition: transform $duration-fast $ease-out, box-shadow $duration-fast $ease-out;
  &:hover {
    transform: translateY(-2px);
    box-shadow: $shadow-md;
  }
}

// Flexbox 布局
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

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

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

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

// 文本溢出省略
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-ellipsis-multiline($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 滚动条样式
@mixin custom-scrollbar($width: 6px) {
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $border-color;
    border-radius: $border-radius-pill;

    &:hover {
      background-color: $text-disabled;
    }
  }
}

// 卡片样式
@mixin card-base {
  background: $card-background;
  border-radius: $border-radius-base;
  box-shadow: $shadow-base;
}

// 按钮基础样式
@mixin button-base {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: $spacing-sm;
  padding: $padding-button;
  border: none;
  border-radius: $border-radius-base;
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-medium;
  cursor: pointer;
  @include transition-fast;

  &:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }
}

// 输入框基础样式
@mixin input-base {
  width: 100%;
  padding: $padding-input;
  border: 1px solid $border-color;
  border-radius: $border-radius-base;
  font-family: $font-family-base;
  font-size: $font-size-base;
  color: $text-primary;
  background: $card-background;
  @include transition-fast;

  &::placeholder {
    color: $text-disabled;
  }

  &:focus {
    outline: none;
    border-color: $primary-color;
    box-shadow: 0 0 0 3px rgba($primary-color, 0.1);
  }

  &:disabled {
    background: $background-color;
    cursor: not-allowed;
  }
}

// 绝对定位填充
@mixin absolute-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

// 固定定位填充
@mixin fixed-fill {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

// 响应式断点
$breakpoints: (
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  2xl: 1536px
);

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint: #{$breakpoint}";
  }
}

@mixin respond-below($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (max-width: map-get($breakpoints, $breakpoint) - 1px) {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint: #{$breakpoint}";
  }
}

// 隐藏滚动条但保持滚动功能
@mixin hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

// 可点击区域扩大
@mixin clickable-area($size: 8px) {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: -$size;
    left: -$size;
    right: -$size;
    bottom: -$size;
  }
}

// 骨架屏动画
@mixin skeleton-loading {
  background: linear-gradient(
    90deg,
    $background-color 25%,
    lighten($background-color, 5%) 50%,
    $background-color 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;

  @keyframes skeleton-loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}

// 聚焦环
@mixin focus-ring {
  &:focus-visible {
    outline: 2px solid $primary-color;
    outline-offset: 2px;
  }
}