尺寸

$basic-font-sizes: (
  "xs": 12px,
  "sm": 12px,
  "md": 14px,
  "lg": 16px,
  "xl": 16px,
);
类名大概相当于 CSS
c-h-xsfont-size: 12px; line-height: 12px;
c-h-smfont-size: 12px; line-height: 12px;
c-h-mdfont-size: 14px; line-height: 14px;
c-h-lgfont-size: 16px; line-height: 16px;
c-h-xlfont-size: 16px; line-height: 16px;

圆角

$basic-rounded-sizes: (
  "xs": 4px,
  "sm": 4px,
  "md": 8px,
  "lg": 12px,
  "xl": 12px,
);
类名大概相当于 CSS
c-rounded-xsborder-radius: 4px;
c-rounded-smborder-radius: 4px;
c-rounded-mdborder-radius: 8px;
c-rounded-lgborder-radius: 12px;
c-rounded-xlborder-radius: 12px;

flex 布局

类名大概相当于 CSS
o-flex c-column c-rowdisplay: inline-flex;
c-justify-startjustify-content: flex-start;
c-justify-centerjustify-content: center;
c-justify-endjustify-content: flex-end;
c-justify-betweenjustify-content: space-between;
c-justify-evenlyjustify-content: space-evenly;
c-justify-aroundjustify-content: space-around;
c-items-startalign-items: flex-start;
c-items-centeralign-items: flex-center;
c-items-endalign-items: flex-end;
c-items-baselinealign-items: baseline;
c-items-stretchalign-items: stretch;

间距

$sizes: (
  "xs": 4px,
  "sm": 8px,
  "md": 12px,
  "lg": 16px,
  "xl": 24px,
);

.o-[p | m][a | x | y| l | t | r | b]-[xs | sm | md | lg | xl]

类名大概相当于 CSS
c-pa-mdpadding: 12px;
c-mr-smmargin-right: 8px;
c-px-lgpadding-left: 16px; padding-right: 16px;
......

栅格

Casual UI 使用经典的 12 栅格机制

c-col-[colSize]

子元素间距

提示

该项需要配合.c-row或者.c-column使用

.c-gutter[-x | -y ]-[xs | sm | md | lg | xl]

类名含义
c-gutter-x-[size]水平方向上子元素具有[size]大小的间距
c-gutter-y-[size]垂直方向上子元素具有[size]大小的间距
c-gutter-[size]水平与垂直方向上子元素具有[size]大小的间距

一些示例

col-2 + gutter-sm
col-2 + gutter-sm
col-2 + gutter-sm
col-2 + gutter-sm
col-2 + gutter-sm
col-2 + gutter-sm
col-3 + gutter-md
col-3 + gutter-md
col-3 + gutter-md
col-3 + gutter-md
col-4 + gutter-lg
col-4 + gutter-lg
col-4 + gutter-lg
<template>
  <div class="c-row c-gutter-x-sm">
    <div v-for="n in 6" :key="n" class="c-col-2">
      <div>col-2 + gutter-sm</div>
    </div>
  </div>
  <div class="c-row c-gutter-x-md c-mt-md">
    <div v-for="n in 4" :key="n" class="c-col-3">
      <div>col-3 + gutter-md</div>
    </div>
  </div>
  <div class="c-row c-gutter-x-lg c-mt-md">
    <div v-for="n in 3" :key="n" class="c-col-4">
      <div>col-4 + gutter-lg</div>
    </div>
  </div>
</template>

<style scoped>
.c-col-2 > div ,
.c-col-3 > div ,
.c-col-4 > div {
  border: 1px solid #333;
  background-color: var(--casual-primary);
  padding: 12px 0;
  color: #fff;
  text-align: center;
}
</style>
点击展开/收起代码
点击打开交互式编辑器

贝塞尔曲线

<template>
  <div class="c-row c-wrap c-gutter-md">
    <div v-for="n in 8" :key="n" class="motion-item" />
  </div>
  <div class="c-row c-wrap c-gutter-md">
    <div v-for="n in 8" :key="n" class="motion-item-eio" />
  </div>
  <div class="c-row c-wrap c-gutter-md">
    <div v-for="n in 8" :key="n" class="motion-item-ei" />
  </div>
</template>

<style scoped lang="scss">
@keyframes circle {
  from {
    transform: scale(0.2);
  }
  to {
    transform: scale(1);
  }
}
.motion-item,
.motion-item-eio,
.motion-item-ei {
  width: 72px;
  height: 72px;
  background-color: var(--casual-primary);
  border-radius: 50%;
  background-clip: content-box;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: circle;
}
.motion-item {
  &:nth-child(1) {
    animation-timing-function: var(--casual-ease-out-circle);
  }
  &:nth-child(2) {
    animation-timing-function: var(--casual-ease-out-overshoots);
  }
  &:nth-child(3) {
    animation-timing-function: var(--casual-ease-out-quadratic);
  }
  &:nth-child(4) {
    animation-timing-function: var(--casual-ease-out-cubic);
  }
  &:nth-child(5) {
    animation-timing-function: var(--casual-ease-out-quartic);
  }
  &:nth-child(6) {
    animation-timing-function: var(--casual-ease-out-quintic);
  }
  &:nth-child(7) {
    animation-timing-function: var(--casual-ease-out-exponential);
  }
  &:nth-child(8) {
    animation-timing-function: var(--casual-ease-out-sin);
  }
}
.motion-item-eio {
  &:nth-child(1) {
    animation-timing-function: var(--casual-ease-in-out-circle);
  }
  &:nth-child(2) {
    animation-timing-function: var(--casual-ease-in-out-overshoots);
  }
  &:nth-child(3) {
    animation-timing-function: var(--casual-ease-in-out-quadratic);
  }
  &:nth-child(4) {
    animation-timing-function: var(--casual-ease-in-out-cubic);
  }
  &:nth-child(5) {
    animation-timing-function: var(--casual-ease-in-out-quartic);
  }
  &:nth-child(6) {
    animation-timing-function: var(--casual-ease-in-out-quintic);
  }
  &:nth-child(7) {
    animation-timing-function: var(--casual-ease-in-out-exponential);
  }
  &:nth-child(8) {
    animation-timing-function: var(--casual-ease-in-out-sin);
  }
}
.motion-item-ei {
  &:nth-child(1) {
    animation-timing-function: var(--casual-ease-in-circle);
  }
  &:nth-child(2) {
    animation-timing-function: var(--casual-ease-in-overshoots);
  }
  &:nth-child(3) {
    animation-timing-function: var(--casual-ease-in-quadratic);
  }
  &:nth-child(4) {
    animation-timing-function: var(--casual-ease-in-cubic);
  }
  &:nth-child(5) {
    animation-timing-function: var(--casual-ease-in-quartic);
  }
  &:nth-child(6) {
    animation-timing-function: var(--casual-ease-in-quintic);
  }
  &:nth-child(7) {
    animation-timing-function: var(--casual-ease-in-exponential);
  }
  &:nth-child(8) {
    animation-timing-function: var(--casual-ease-in-sin);
  }
}
</style>
点击展开/收起代码
点击打开交互式编辑器
查看变量定义
// ⬇️⬇️⬇️ 淡出 ⬇️⬇️⬇️
// 圆形
$ease-out-circle: cubic-bezier(0.075, 0.82, 0.165, 1);

// 急速
$ease-out-overshoots: cubic-bezier(0.175, 0.885, 0.32, 1.275);

// 2级指数
$ease-out-quadratic: cubic-bezier(0.25, 0.46, 0.45, 0.94);

// 3级指数
$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);

// 4级指数
$ease-out-quartic: cubic-bezier(0.165, 0.84, 0.44, 1);

// 5级指数
$ease-out-quintic: cubic-bezier(0.23, 1, 0.32, 1);

// 10级指数
$ease-out-exponential: cubic-bezier(0.19, 1, 0.22, 1);

// sin
$ease-out-sin: cubic-bezier(0.39, 0.575, 0.565, 1);

// ⬆️⬆️⬆️ 淡出 ⬆️⬆️⬆️

// ⬇️⬇️⬇️ 淡入 ⬇️⬇️⬇️
// 圆形
$ease-in-circle: cubic-bezier(0.6, 0.04, 0.98, 0.335);

// sin
$ease-in-sin: cubic-bezier(0.47, 0, 0.745, 0.715);

// 急速
$ease-in-overshoots: cubic-bezier(0.6, -0.28, 0.735, 0.045);

// 2级指数
$ease-in-quadratic: cubic-bezier(0.55, 0.085, 0.68, 0.53);

// 3级指数
$ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);

// 4级指数
$ease-in-quartic: cubic-bezier(0.895, 0.03, 0.685, 0.22);

// 5级指数
$ease-in-quintic: cubic-bezier(0.755, 0.05, 0.855, 0.06);

// 10级指数
$ease-in-exponential: cubic-bezier(0.95, 0.05, 0.795, 0.035);

// ⬆️⬆️⬆️ 淡入 ⬆️⬆️⬆️

// ⬇️⬇️⬇️ 淡入淡出 ⬇️⬇️⬇️
// 圆形
$ease-in-out-circle: cubic-bezier(0.785, 0.135, 0.15, 0.86);

// sin
$ease-in-out-sin: cubic-bezier(0.445, 0.05, 0.55, 0.95);

// 急速
$ease-in-out-overshoots: cubic-bezier(0.68, -0.55, 0.265, 1.55);

// 2级指数
$ease-in-out-quadratic: cubic-bezier(0.455, 0.03, 0.515, 0.955);

// 3级指数
$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);

// 4级指数
$ease-in-out-quartic: cubic-bezier(0.77, 0, 0.175, 1);

// 5级指数
$ease-in-out-quintic: cubic-bezier(0.86, 0, 0.07, 1);

// 10级指数
$ease-in-out-exponential: cubic-bezier(1, 0, 0, 1);

// ⬆️⬆️⬆️ 淡入淡出 ⬆️⬆️⬆️

:root {
  --casual-ease-out-circle: #{$ease-out-circle};
  --casual-ease-out-overshoots: #{$ease-out-overshoots};
  --casual-ease-out-quadratic: #{$ease-out-quadratic};
  --casual-ease-out-cubic: #{$ease-out-cubic};
  --casual-ease-out-quartic: #{$ease-out-quartic};
  --casual-ease-out-quintic: #{$ease-out-quintic};
  --casual-ease-out-exponential: #{$ease-out-exponential};
  --casual-ease-out-sin: #{$ease-out-sin};
  --casual-ease-in-out-circle: #{$ease-in-out-circle};
  --casual-ease-in-out-overshoots: #{$ease-in-out-overshoots};
  --casual-ease-in-out-quadratic: #{$ease-in-out-quadratic};
  --casual-ease-in-out-cubic: #{$ease-in-out-cubic};
  --casual-ease-in-out-quartic: #{$ease-in-out-quartic};
  --casual-ease-in-out-quintic: #{$ease-in-out-quintic};
  --casual-ease-in-out-exponential: #{$ease-in-out-exponential};
  --casual-ease-in-out-sin: #{$ease-in-out-sin};
  --casual-ease-in-circle: #{$ease-in-circle};
  --casual-ease-in-overshoots: #{$ease-in-overshoots};
  --casual-ease-in-quadratic: #{$ease-in-quadratic};
  --casual-ease-in-cubic: #{$ease-in-cubic};
  --casual-ease-in-quartic: #{$ease-in-quartic};
  --casual-ease-in-quintic: #{$ease-in-quintic};
  --casual-ease-in-exponential: #{$ease-in-exponential};
  --casual-ease-in-sin: #{$ease-in-sin};
}

宫格

类名大概相当于 CSS
o-giddisplay: grid;
c-grid-col-[1-12]grid-template-columns: repeat([1-12], 1fr)
c-grid-row-[1-12]grid-template-rows: repeat([1-12], 1fr)
c-grid-gap-xsgaps: 4px;
c-grid-gap-smgaps: 8px;
c-grid-gap-xsgaps: 12px;
c-grid-gap-lggaps: 16px;
c-grid-gap-xlgaps: 24px;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
  <div class="c-grid c-grid-col-4 c-grid-row-4 c-grid-gap-md custom-grid">
    <div v-for="n in 16" :key="n" class="custom-grid--item">
      {{ n }}
    </div>
  </div>
</template>

<style scoped>
.custom-grid--item {
  text-align: center;
  background: var(--casual-primary);
  color: #fff;
  height: 80px;
  line-height: 80px;
}
</style>
点击展开/收起代码
点击打开交互式编辑器