mi-assessment/uniapp/styles/common.scss

/**
 * 通用样式类
 * 常用布局、文字、按钮等样式
 */

@import './variables.scss';

// ==================== Flex 布局 ====================

.flex {
  display: flex;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-end {
  justify-content: flex-end;
}

// ==================== 文字样式 ====================

.text-xs {
  font-size: $font-size-xs;
}

.text-sm {
  font-size: $font-size-sm;
}

.text-md {
  font-size: $font-size-md;
}

.text-lg {
  font-size: $font-size-lg;
}

.text-xl {
  font-size: $font-size-xl;
}

.text-primary {
  color: $primary-color;
}

.text-secondary {
  color: $text-secondary;
}

.text-placeholder {
  color: $text-placeholder;
}

.text-white {
  color: $text-white;
}

.text-success {
  color: $success-color;
}

.text-warning {
  color: $warning-color;
}

.text-error {
  color: $error-color;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.font-medium {
  font-weight: $font-weight-medium;
}

.font-bold {
  font-weight: $font-weight-bold;
}

// 文字省略
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

// ==================== 间距样式 ====================

// Margin
.m-xs { margin: $spacing-xs; }
.m-sm { margin: $spacing-sm; }
.m-md { margin: $spacing-md; }
.m-lg { margin: $spacing-lg; }

.mt-xs { margin-top: $spacing-xs; }
.mt-sm { margin-top: $spacing-sm; }
.mt-md { margin-top: $spacing-md; }
.mt-lg { margin-top: $spacing-lg; }

.mb-xs { margin-bottom: $spacing-xs; }
.mb-sm { margin-bottom: $spacing-sm; }
.mb-md { margin-bottom: $spacing-md; }
.mb-lg { margin-bottom: $spacing-lg; }

.ml-xs { margin-left: $spacing-xs; }
.ml-sm { margin-left: $spacing-sm; }
.ml-md { margin-left: $spacing-md; }
.ml-lg { margin-left: $spacing-lg; }

.mr-xs { margin-right: $spacing-xs; }
.mr-sm { margin-right: $spacing-sm; }
.mr-md { margin-right: $spacing-md; }
.mr-lg { margin-right: $spacing-lg; }

// Padding
.p-xs { padding: $spacing-xs; }
.p-sm { padding: $spacing-sm; }
.p-md { padding: $spacing-md; }
.p-lg { padding: $spacing-lg; }

.pt-xs { padding-top: $spacing-xs; }
.pt-sm { padding-top: $spacing-sm; }
.pt-md { padding-top: $spacing-md; }
.pt-lg { padding-top: $spacing-lg; }

.pb-xs { padding-bottom: $spacing-xs; }
.pb-sm { padding-bottom: $spacing-sm; }
.pb-md { padding-bottom: $spacing-md; }
.pb-lg { padding-bottom: $spacing-lg; }

.pl-xs { padding-left: $spacing-xs; }
.pl-sm { padding-left: $spacing-sm; }
.pl-md { padding-left: $spacing-md; }
.pl-lg { padding-left: $spacing-lg; }

.pr-xs { padding-right: $spacing-xs; }
.pr-sm { padding-right: $spacing-sm; }
.pr-md { padding-right: $spacing-md; }
.pr-lg { padding-right: $spacing-lg; }

// ==================== 背景样式 ====================

.bg-white {
  background-color: $bg-white;
}

.bg-gray {
  background-color: $bg-gray;
}

.bg-primary {
  background-color: $primary-color;
}

// ==================== 边框样式 ====================

.border {
  border: 1rpx solid $border-color;
}

.border-top {
  border-top: 1rpx solid $border-color;
}

.border-bottom {
  border-bottom: 1rpx solid $border-color;
}

.rounded-sm {
  border-radius: $border-radius-sm;
}

.rounded-md {
  border-radius: $border-radius-md;
}

.rounded-lg {
  border-radius: $border-radius-lg;
}

.rounded-full {
  border-radius: $border-radius-round;
}

// ==================== 按钮样式 ====================

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  border-radius: $border-radius-lg;
  font-size: $font-size-lg;
  font-weight: $font-weight-medium;
  transition: opacity $transition-fast;
  
  &:active {
    opacity: 0.8;
  }
}

.btn-primary {
  background-color: $primary-color;
  color: $text-white;
}

.btn-outline {
  background-color: transparent;
  border: 2rpx solid $primary-color;
  color: $primary-color;
}

.btn-disabled {
  background-color: #CCCCCC;
  color: $text-white;
  pointer-events: none;
}

.btn-sm {
  height: 64rpx;
  font-size: $font-size-md;
  border-radius: $border-radius-md;
}

.btn-lg {
  height: 96rpx;
  font-size: $font-size-xl;
}

// ==================== 卡片样式 ====================

.card {
  background-color: $bg-white;
  border-radius: $border-radius-lg;
  padding: $spacing-lg;
  box-shadow: $shadow-sm;
}

// ==================== 分割线 ====================

.divider {
  height: 1rpx;
  background-color: $border-color;
  margin: $spacing-md 0;
}

// ==================== 安全区域 ====================

.safe-area-bottom {
  padding-bottom: $safe-area-bottom;
}

// ==================== 宽高 ====================

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

// ==================== 定位 ====================

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

// ==================== 溢出 ====================

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}