test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 03:58:07 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

补充文档

Browse Source
This commit is contained in:
2betop 2020-11-30 21:33:12 +08:00
parent e928f57818
commit f01a319511
14 changed files with 64 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/css-utilities/index.md
View File

@ -4,7 +4,7 @@ title: 快速开始
amis 参考 [tailwindcss](https://tailwindcss.com/) 加入了大量的帮助类 css，掌握这些用法，完全不用手写 css。
理念来自于[tailwindcss](https://tailwindcss.com/), 不过根据我们经验分析，做了一定的筛选，把一些不常用的用法剔除了，另外响应式方面只做了 pc 端和手机端，其他的设备并没有支持。这个文件未压缩版本大概是 300K 左右，比官方的要小很多。目前这个文件没有和主题文件合并在一起，用户可以选择性加载。
理念来自于[tailwindcss](https://tailwindcss.com/), 不过我们做了一定的筛选，把一些不常用的用法剔除了，另外响应式方面只做了 pc 端和手机端，其他的设备并没有支持。这个文件未压缩版本大概是 300K 左右，比官方的要小很多。目前这个文件没有和主题文件合并在一起，用户可以选择性加载。
```html
<link rel="stylesheet" href="amis/lib/utilities.css" />

2
docs/css-utilities/responsive-design.md
View File

@ -2,7 +2,7 @@
title: 响应式设计
---
响应式设计目前只支持 pc 端和手机端，其他设备目前不支持，貌似也没必要支持。默认就是 pc，如果你在 css 类名前面再加个 `mobile:` 开头，就是专门给移动设备设置样式了。
响应式设计目前只支持 pc 端和手机端，其他设备目前不支持，貌似也没必要支持。默认就是 pc，如果你在 css 类名前面再加个 `mobile:` 开头，就是专门给手机端设置样式了。
<!-- ```html
<div class="text-black-500 mobile:text-red-500">

2
docs/css-utilities/state.md
View File

@ -8,7 +8,7 @@ title: 状态样式
{
"type": "button",
"label": "按钮",
"className": "bg-pink-400 hover:bg-pink-600",
"className": "rounded-xl text-light bg-pink-400 border-pink-600 hover:bg-pink-500 hover:border-pink-800 active:bg-pink-600 active:border-pink-900",
"actionType": "dialog",
"dialog": {
"title": "弹框",

46
scss/_mixins.scss
View File

@ -246,25 +246,46 @@
box-shadow: $Button-boxShadow;
@include hover {
@if ($color != $hover-color) {
color: $hover-color;
}
@if ($background != $hover-background) {
background-color: $hover-background;
}
@if ($border != $hover-border) {
border-color: $hover-border;
}
@include focus {
color: $color;
background-color: $background;
border-color: $border;
box-shadow: $Button-boxShadow;
}
// @include focus {
// color: $color;
// background-color: $background;
// border-color: $border;
// box-shadow: $Button-boxShadow;
// }
@include hover-focus {
color: $hover-color;
background-color: $hover-background;
border-color: $hover-border;
// color: $hover-color;
// background-color: $hover-background;
// border-color: $hover-border;
box-shadow: $Button-boxShadow;
}
&:active,
&.is-active {
@if ($active-color != $color) {
color: $active-color;
}
@if ($active-background != $background) {
background-color: $active-background;
}
@if ($active-border != $border) {
border-color: $active-border;
}
}
&.is-disabled,
&:disabled {
@if variable-exists(Button-onDisabled-bg) {
@ -285,13 +306,6 @@
border-color: $border;
}
}
&:not(:disabled):not(.is-disabled):active,
&:not(:disabled):not(.is-disabled).is-active {
color: $active-color;
background-color: $active-background;
border-color: $active-border;
}
}
@mixin input-clear {

20
scss/components/_button.scss
View File

@ -13,6 +13,15 @@
min-width: $Button-mimWidth;
}
&:active,
&.is-active {
box-shadow: $Button-onActive-boxShadow;
&:focus {
box-shadow: $Button-onActive-boxShadow;
}
}
@include button-size(
$Button-paddingY,
$Button-paddingX,
@ -23,7 +32,7 @@
);
@include hover-focus {
color: $text-color;
// color: $text-color;
text-decoration: none;
}
@ -60,15 +69,6 @@
cursor: pointer;
}
&:not(:disabled):not(.is-disabled):active,
&:not(:disabled):not(.is-disabled).is-active {
box-shadow: $Button-onActive-boxShadow;
&:focus {
box-shadow: $Button-onActive-boxShadow;
}
}
> .pull-left,
> .pull-right {
line-height: inherit;

2
scss/utilities/background/_background-color.scss
View File

@ -53,5 +53,7 @@ title: 介绍
@include bg-colors('.' + selector-escape('hover:'), ':hover');
@include bg-colors('.' + selector-escape('active:'), '.is-active');
@include bg-colors('.' + selector-escape('active:'), ':active');
@include bg-colors('.' + selector-escape('focus:'), ':focus');
@include bg-colors('.' + selector-escape('disabled:'), '.is-disabled');
@include bg-colors('.group:hover .' + selector-escape('group-hover:'));

2
scss/utilities/border/_border-color.scss
View File

@ -28,5 +28,7 @@
@include border-colors('.' + selector-escape('hover:'), ':hover');
@include border-colors('.' + selector-escape('active:'), '.is-active');
@include border-colors('.' + selector-escape('active:'), ':active');
@include border-colors('.' + selector-escape('focus:'), ':focus');
@include border-colors('.' + selector-escape('disabled:'), '.is-disabled');
@include border-colors('.group:hover .' + selector-escape('group-hover:'));

2
scss/utilities/border/_border-radius.scss
View File

@ -55,5 +55,7 @@
// @include border-radius('.' + selector-escape('hover:'), ':hover');
// @include border-radius('.' + selector-escape('active:'), '.is-active');
// @include border-radius('.' + selector-escape('active:'), ':active');
// @include border-radius('.' + selector-escape('focus:'), ':focus');
// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled');
// @include border-radius('.group:hover .' + selector-escape('group-hover:'));

2
scss/utilities/border/_border-width.scss
View File

@ -30,5 +30,7 @@
// @include border-radius('.' + selector-escape('hover:'), ':hover');
// @include border-radius('.' + selector-escape('active:'), '.is-active');
// @include border-radius('.' + selector-escape('active:'), ':active');
// @include border-radius('.' + selector-escape('focus:'), ':focus');
// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled');
// @include border-radius('.group:hover .' + selector-escape('group-hover:'));

2
scss/utilities/effect/_box-shadow.scss
View File

@ -15,5 +15,7 @@
@include make-box-shadow('.' + selector-escape('hover:'), ':hover');
@include make-box-shadow('.' + selector-escape('active:'), '.is-active');
@include make-box-shadow('.' + selector-escape('active:'), ':active');
@include make-box-shadow('.' + selector-escape('focus:'), ':focus');
@include make-box-shadow('.' + selector-escape('disabled:'), '.is-disabled');
@include make-box-shadow('.group:hover .' + selector-escape('group-hover:'));

2
scss/utilities/effect/_opacity.scss
View File

@ -34,5 +34,7 @@
// @include border-radius('.' + selector-escape('hover:'), ':hover');
// @include border-radius('.' + selector-escape('active:'), '.is-active');
// @include border-radius('.' + selector-escape('active:'), ':active');
// @include border-radius('.' + selector-escape('focus:'), ':focus');
// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled');
// @include border-radius('.group:hover .' + selector-escape('group-hover:'));

2
scss/utilities/spacing/_margin.scss
View File

@ -265,5 +265,7 @@
// @include bg-colors('.' + selector-escape('hover:'), ':hover');
// @include bg-colors('.' + selector-escape('active:'), '.is-active');
// @include bg-colors('.' + selector-escape('active:'), ':active');
// @include bg-colors('.' + selector-escape('focus:'), ':focus');
// @include bg-colors('.' + selector-escape('disabled:'), '.is-disabled');
// @include bg-colors('.group:hover .' + selector-escape('group-hover:'));

2
scss/utilities/spacing/_padding.scss
View File

@ -118,5 +118,7 @@
}
// @include bg-colors('.' + selector-escape('hover:'), ':hover');
// @include bg-colors('.' + selector-escape('active:'), '.is-active');
// @include bg-colors('.' + selector-escape('active:'), ':active');
// @include bg-colors('.' + selector-escape('focus:'), ':focus');
// @include bg-colors('.' + selector-escape('disabled:'), '.is-disabled');
// @include bg-colors('.group:hover .' + selector-escape('group-hover:'));

2
scss/utilities/typography/_text-color.scss
View File

@ -41,5 +41,7 @@
@include text-colors('.' + selector-escape('hover:'), ':hover');
@include text-colors('.' + selector-escape('active:'), '.is-active');
@include text-colors('.' + selector-escape('active:'), ':active');
@include text-colors('.' + selector-escape('focus:'), ':focus');
@include text-colors('.' + selector-escape('disabled:'), '.is-disabled');
@include text-colors('.group:hover .' + selector-escape('group-hover:'));