amis-rev-ui 6.13.0

package/scss/helper/layout/_top-right-bottom-left.scss

@@ -0,0 +1,292 @@
+/*!markdown
+
+---
+title: Top / Right / Bottom / Left
+---
+
+用来控制位置的样式集。
+
+| Class        | Properties                                                                        |
+| ------------ | --------------------------------------------------------------------------------- |
+| inset-0      | top: 0px;<br/>right: 0px;<br/>bottom: 0px;<br/>left: 0px;                         |
+| -inset-0     | top: 0px;<br/>right: 0px;<br/>bottom: 0px;<br/>left: 0px;                         |
+| inset-y-0    | top: 0px;<br/>bottom: 0px;                                                        |
+| inset-x-0    | right: 0px;<br/>left: 0px;                                                        |
+| -inset-y-0   | top: 0px;<br/>bottom: 0px;                                                        |
+| -inset-x-0   | right: 0px;<br/>left: 0px;                                                        |
+| top-0        | top: 0px;                                                                         |
+| right-0      | right: 0px;                                                                       |
+| bottom-0     | bottom: 0px;                                                                      |
+| left-0       | left: 0px;                                                                        |
+| -top-0       | top: 0px;                                                                         |
+| -right-0     | right: 0px;                                                                       |
+| -bottom-0    | bottom: 0px;                                                                      |
+| -left-0      | left: 0px;                                                                        |
+| inset-0.5    | top: 0.125rem;<br/>right: 0.125rem;<br/>bottom: 0.125rem;<br/>left: 0.125rem;     |
+| -inset-0.5   | top: -0.125rem;<br/>right: -0.125rem;<br/>bottom: -0.125rem;<br/>left: -0.125rem; |
+| inset-y-0.5  | top: 0.125rem;<br/>bottom: 0.125rem;                                              |
+| inset-x-0.5  | right: 0.125rem;<br/>left: 0.125rem;                                              |
+| -inset-y-0.5 | top: -0.125rem;<br/>bottom: -0.125rem;                                            |
+| -inset-x-0.5 | right: -0.125rem;<br/>left: -0.125rem;                                            |
+| top-0.5      | top: 0.125rem;                                                                    |
+| right-0.5    | right: 0.125rem;                                                                  |
+| bottom-0.5   | bottom: 0.125rem;                                                                 |
+| left-0.5     | left: 0.125rem;                                                                   |
+| -top-0.5     | top: -0.125rem;                                                                   |
+| -right-0.5   | right: -0.125rem;                                                                 |
+| -bottom-0.5  | bottom: -0.125rem;                                                                |
+| -left-0.5    | left: -0.125rem;                                                                  |
+
+按以下尺寸表依次类推
+
+| 尺寸 | 大小           |
+| ---- | -------------- |
+| 0    | 0              |
+| 0.5  | 0.125rem;      |
+| 1    | 0.25rem        |
+| 1.5  | 0.375rem       |
+| 1.5  | 0.375rem       |
+| 2    | 0.5rem         |
+| 2.5  | 0.625rem       |
+| 3    | 0.75rem        |
+| 3.5  | 0.875rem       |
+| 4    | 1rem           |
+| 5    | 1.25rem        |
+| 6    | 1.5rem         |
+| 7    | 1.75rem        |
+| 8    | 2rem           |
+| 9    | 2.25rem        |
+| 10   | 2.5rem         |
+| 11   | 2.75rem        |
+| 12   | 3rem           |
+| 14   | 3.5rem         |
+| 16   | 4rem           |
+| 20   | 5rem           |
+| 24   | 6rem           |
+| 28   | 7rem           |
+| 32   | 8rem           |
+| 36   | 9rem           |
+| 40   | 10rem          |
+| 44   | 11rem          |
+| 48   | 12rem          |
+| 52   | 13rem          |
+| 56   | 14rem          |
+| 60   | 15rem          |
+| 64   | 16rem          |
+| 68   | 17rem          |
+| 72   | 18rem          |
+| 76   | 19rem          |
+| 80   | 20rem          |
+| 96   | 24rem          |
+| auto | auto           |
+| 1/2  | 50%            |
+| 1/3  | 33.333333%     |
+| 2/3  | 66.666667%     |
+| 1/4  | 25%;           |
+| 2/4  | 50%;           |
+| 3/4  | 75%;           |
+| full | 100%;          |
+| px   | 0.0625rem(1px) |
+
+## 用法
+
+结合 relative 和 absolute 定位 和位置样式 `{top|right|bottom|left|inset}-xxx`，可以很方便的实现各种组件布局。
+
+```html
+<div class="grid grid-cols-4 m:grid-cols-2 gap-4">
+
+<!-- Span top edge -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute inset-x-0 top-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">1</div>
+</div>
+
+<!-- Span right edge -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute inset-y-0 right-0 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">2</div>
+</div>
+
+<!-- Span bottom edge -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute inset-x-0 bottom-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">3</div>
+</div>
+
+<!-- Span left edge -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute inset-y-0 left-0 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">4</div>
+</div>
+
+<!-- Fill entire parent -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute inset-0 bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">5</div>
+</div>
+
+<!-- Pin to top left corner -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute left-0 top-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">6</div>
+</div>
+
+<!-- Pin to top right corner -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute top-0 right-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">7</div>
+</div>
+
+<!-- Pin to bottom right corner -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute bottom-0 right-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">8</div>
+</div>
+
+<!-- Pin to bottom left corner -->
+<div class="relative h-32 w-32 ... bg-blue-500">
+  <div class="absolute bottom-0 left-0 h-16 w-16 ... bg-red-500 text-white font-extrabold text-2xl flex items-center justify-center">9</div>
+</div>
+
+</div>
+```
+
+## 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
+
+*/
+
+@mixin make-single-position(
+  $selector,
+  $direction,
+  $name,
+  $value,
+  $prefix: '.'
+) {
+  #{$prefix}#{'' + selector-escape($selector + '-' + $name) } {
+    #{$direction}: $value;
+  }
+}
+
+@mixin make-single-positions($direction, $map: $inset, $prefix: '.') {
+  @each $name, $value in $map {
+    @include make-single-position(
+      $direction,
+      $direction,
+      $name,
+      $value,
+      $prefix
+    );
+  }
+
+  @each $name, $value in $map {
+    @if (type-of($value) == 'number') {
+      @include make-single-position(
+        #{'-' + $direction},
+        $direction,
+        $name,
+        ($value * -1),
+        $prefix
+      );
+    }
+  }
+}
+
+@mixin make-inset-positions($map: $inset, $prefix: '.') {
+  @each $name, $value in $map {
+    #{$prefix}#{selector-escape('inset-' + $name) } {
+      top: $value;
+      right: $value;
+      bottom: $value;
+      left: $value;
+    }
+  }
+
+  @each $name, $value in $map {
+    @if (type-of($value) == 'number') {
+      #{$prefix}#{selector-escape('-inset-' + $name) } {
+        top: $value * -1;
+        right: $value * -1;
+        bottom: $value * -1;
+        left: $value * -1;
+      }
+    }
+  }
+}
+
+@mixin make-inset-x-positions($map: $inset, $prefix: '.') {
+  @each $name, $value in $map {
+    #{$prefix}#{selector-escape('inset-x-' + $name) } {
+      right: $value;
+      left: $value;
+    }
+  }
+
+  @each $name, $value in $map {
+    @if (type-of($value) == 'number') {
+      #{$prefix}#{selector-escape('-inset-x-' + $name) } {
+        right: $value * -1;
+        left: $value * -1;
+      }
+    }
+  }
+}
+
+@mixin make-inset-y-positions($map: $inset, $prefix: '.') {
+  @each $name, $value in $map {
+    #{$prefix}#{selector-escape('inset-y-' + $name) } {
+      top: $value;
+      bottom: $value;
+    }
+  }
+
+  @each $name, $value in $map {
+    @if (type-of($value) == 'number') {
+      #{$prefix}#{selector-escape('-inset-y-' + $name) } {
+        top: $value * -1;
+        bottom: $value * -1;
+      }
+    }
+  }
+}
+
+@include make-single-positions('top');
+@include make-single-positions('right');
+@include make-single-positions('bottom');
+@include make-single-positions('left');
+
+@include make-inset-positions();
+@include make-inset-x-positions();
+@include make-inset-y-positions();
+
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-single-positions(
+      'top',
+      $inset,
+      '.' + selector-escape($deivce + ':')
+    );
+    @include make-single-positions(
+      'right',
+      $inset,
+      '.' + selector-escape($deivce + ':')
+    );
+    @include make-single-positions(
+      'bottom',
+      $inset,
+      '.' + selector-escape($deivce + ':')
+    );
+    @include make-single-positions(
+      'left',
+      $inset,
+      '.' + selector-escape($deivce + ':')
+    );
+
+    @include make-inset-positions($inset, '.' + selector-escape($deivce + ':'));
+    @include make-inset-x-positions(
+      $inset,
+      '.' + selector-escape($deivce + ':')
+    );
+    @include make-inset-y-positions(
+      $inset,
+      '.' + selector-escape($deivce + ':')
+    );
+  }
+}

package/scss/helper/layout/_visibility.md

@@ -0,0 +1,21 @@
+---
+title: Visibility
+---
+
+显示与隐藏。
+
+| Class     | Properties           |
+| --------- | -------------------- |
+| visible   | visibility: visible; |
+| invisible | visibility: hidden;  |
+
+## 用法
+
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。

package/scss/helper/layout/_visibility.scss

@@ -0,0 +1,42 @@
+/*!markdown
+
+---
+title: Visibility
+---
+
+显示与隐藏。
+
+| Class     | Properties           |
+| --------- | -------------------- |
+| visible   | visibility: visible; |
+| invisible | visibility: hidden;  |
+
+## 用法
+
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
+
+*/
+
+@mixin make-visibility($prefix: '.') {
+  #{$prefix}visible {
+    visibility: visible;
+  }
+
+  #{$prefix}invisible {
+    visibility: hidden;
+  }
+}
+
+@include make-visibility();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-visibility('.' + selector-escape($deivce + ':'));
+  }
+}

package/scss/helper/layout/_z-index.md

@@ -0,0 +1,37 @@
+---
+title: Z-Index
+---
+
+Utilities for controlling the stack order of an element.
+
+
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| z-0  | z-index: 0  |
+| z-10  | z-index: 10  |
+| z-20  | z-index: 20  |
+| z-30  | z-index: 30  |
+| z-40  | z-index: 40  |
+| z-50  | z-index: 50  |
+| z-auto  | z-index: auto  |
+
+## 用法
+
+```html
+<div class="flex ... justify-center relative h-28 text-center transform translate-x-12">
+  <div class="z-40 ... relative w-20 h-20 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">5</div>
+  <div class="z-30 ... relative w-20 h-20 -left-6 top-2 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">4</div>
+  <div class="z-20 ... relative w-20 h-20 -left-12 top-4 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">3</div>
+  <div class="z-10 ... relative w-20 h-20 -left-18 top-6 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">2</div>
+  <div class="z-0 ... relative w-20 h-20 -left-24 top-8 bg-purple-500 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">1</div>
+</div>
+```
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。

package/scss/helper/layout/_z-index.scss

@@ -0,0 +1,67 @@
+/*!markdown
+
+---
+title: Z-Index
+---
+
+Utilities for controlling the stack order of an element.
+
+
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| z-0  | z-index: 0  |
+| z-10  | z-index: 10  |
+| z-20  | z-index: 20  |
+| z-30  | z-index: 30  |
+| z-40  | z-index: 40  |
+| z-50  | z-index: 50  |
+| z-auto  | z-index: auto  |
+
+## 用法
+
+```html
+<div class="flex ... justify-center relative h-28 text-center transform translate-x-12">
+  <div class="z-40 ... relative w-20 h-20 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">5</div>
+  <div class="z-30 ... relative w-20 h-20 -left-6 top-2 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">4</div>
+  <div class="z-20 ... relative w-20 h-20 -left-12 top-4 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">3</div>
+  <div class="z-10 ... relative w-20 h-20 -left-18 top-6 bg-purple-500 border-r border-opacity-50 border-purple-600 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">2</div>
+  <div class="z-0 ... relative w-20 h-20 -left-24 top-8 bg-purple-500 rounded-md shadow-md flex justify-center items-center text-white text-2xl font-extrabold">1</div>
+</div>
+```
+
+# 响应式设计
+
+支持通过添加设备前缀 `m:` 或者 `pc:` 来分别针对「手机端」或者「pc端」设置样式，更多说明请前往[「响应式设计」](../../../docs/style/responsive-design.md)。
+
+## 状态前缀
+
+不支持[「状态前缀」](../../../docs/style/state.md)，有需求请提 [issue](https://github.com/baidu/amis/issues)。
+
+*/
+
+@mixin make-z-index($prefix: '.') {
+  @each $name,
+    $value
+      in (
+        '0': 0,
+        '10': 10,
+        '20': 20,
+        '30': 30,
+        '40': 40,
+        '50': 50,
+        'auto': auto
+      )
+  {
+    #{$prefix + 'z-' + $name} {
+      z-index: $value;
+    }
+  }
+}
+
+@include make-z-index();
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include make-z-index('.' + selector-escape($deivce + ':'));
+  }
+}

package/scss/helper/sizing/_height.md

@@ -0,0 +1,103 @@
+---
+title: Height
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| h-px | height: 0.0625rem |
+| h-0 | height: 0 |
+| h-none | height: 0 |
+| h-0\.5 | height: 0.125rem |
+| h-1 | height: 0.25rem |
+| h-1\.5 | height: 0.375rem |
+| h-2 | height: 0.5rem |
+| h-2\.5 | height: 0.625rem |
+| h-3 | height: 0.75rem |
+| h-3\.5 | height: 0.875rem |
+| h-4 | height: 1rem |
+| h-5 | height: 1.25rem |
+| h-6 | height: 1.5rem |
+| h-7 | height: 1.75rem |
+| h-8 | height: 2rem |
+| h-9 | height: 2.25rem |
+| h-10 | height: 2.5rem |
+| h-11 | height: 2.75rem |
+| h-12 | height: 3rem |
+| h-14 | height: 3.5rem |
+| h-16 | height: 4rem |
+| h-18 | height: 4.5rem |
+| h-20 | height: 5rem |
+| h-24 | height: 6rem |
+| h-28 | height: 7rem |
+| h-32 | height: 8rem |
+| h-36 | height: 9rem |
+| h-40 | height: 10rem |
+| h-44 | height: 11rem |
+| h-48 | height: 12rem |
+| h-52 | height: 13rem |
+| h-56 | height: 14rem |
+| h-60 | height: 15rem |
+| h-64 | height: 16rem |
+| h-72 | height: 18rem |
+| h-80 | height: 20rem |
+| h-96 | height: 24rem |
+| h-auto | height: auto |
+| h-1\/2 | height: 50% |
+| h-1\/3 | height: 33.333333% |
+| h-2\/3 | height: 66.666667% |
+| h-1\/4 | height: 25% |
+| h-2\/4 | height: 50% |
+| h-3\/4 | height: 75% |
+| h-1\/5 | height: 20% |
+| h-2\/5 | height: 40% |
+| h-3\/5 | height: 60% |
+| h-4\/5 | height: 80% |
+| h-1\/6 | height: 16.666667% |
+| h-2\/6 | height: 33.333333% |
+| h-3\/6 | height: 50% |
+| h-4\/6 | height: 66.666667% |
+| h-5\/6 | height: 83.333333% |
+| h-full | height: 100% |
+| h-screen | height: 100vh |
+| min-h-0 | min-height: 0px |
+| min-h-full | min-height: 100% |
+| min-h-screen | min-height: 100vh |
+| max-h-px | max-height: 0.0625rem |
+| max-h-0 | max-height: 0 |
+| max-h-none | max-height: 0 |
+| max-h-0\.5 | max-height: 0.125rem |
+| max-h-1 | max-height: 0.25rem |
+| max-h-1\.5 | max-height: 0.375rem |
+| max-h-2 | max-height: 0.5rem |
+| max-h-2\.5 | max-height: 0.625rem |
+| max-h-3 | max-height: 0.75rem |
+| max-h-3\.5 | max-height: 0.875rem |
+| max-h-4 | max-height: 1rem |
+| max-h-5 | max-height: 1.25rem |
+| max-h-6 | max-height: 1.5rem |
+| max-h-7 | max-height: 1.75rem |
+| max-h-8 | max-height: 2rem |
+| max-h-9 | max-height: 2.25rem |
+| max-h-10 | max-height: 2.5rem |
+| max-h-11 | max-height: 2.75rem |
+| max-h-12 | max-height: 3rem |
+| max-h-14 | max-height: 3.5rem |
+| max-h-16 | max-height: 4rem |
+| max-h-18 | max-height: 4.5rem |
+| max-h-20 | max-height: 5rem |
+| max-h-24 | max-height: 6rem |
+| max-h-28 | max-height: 7rem |
+| max-h-32 | max-height: 8rem |
+| max-h-36 | max-height: 9rem |
+| max-h-40 | max-height: 10rem |
+| max-h-44 | max-height: 11rem |
+| max-h-48 | max-height: 12rem |
+| max-h-52 | max-height: 13rem |
+| max-h-56 | max-height: 14rem |
+| max-h-60 | max-height: 15rem |
+| max-h-64 | max-height: 16rem |
+| max-h-72 | max-height: 18rem |
+| max-h-80 | max-height: 20rem |
+| max-h-96 | max-height: 24rem |
+| max-h-full | max-height: 100% |
+| max-h-screen | max-height: 100vh |