mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
补充文档
This commit is contained in:
liaoxuezhi
parent
880ef23839
commit
b08f1be562
@ -10,6 +10,11 @@ order: 18
|
||||
|
||||
amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。
|
||||
|
||||
<div class="bg-pink-500 text-light shadow p-4 rounded-md hover:bg-pink-600">
|
||||
<div class="text-lg b-b p-b-sm">注意</div>
|
||||
<div class="p-t-xs">CSS辅助类样式做了全新的升级，请前往<a class="text-light underline hover:text-pink-300" href="/style">新版样式</a>查看使用文档。旧版本可以继续，但将不再做迭代更新。</div>
|
||||
</div>
|
||||
|
||||
## 基本使用
|
||||
|
||||
例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔
|
||||
@ -17,7 +22,7 @@ amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，
|
||||
```schema:height="100" scope="body"
|
||||
[
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "按钮1",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
@ -26,7 +31,7 @@ amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "按钮2",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
@ -44,7 +49,7 @@ amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，
|
||||
```schema:height="100" scope="body"
|
||||
[
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "按钮1",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
@ -53,7 +58,7 @@ amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "按钮2",
|
||||
"className": "m-l",
|
||||
"actionType": "dialog",
|
||||
|
||||
108
docs/css-utilities/index.md
Normal file
108
docs/css-utilities/index.md
Normal file
@ -0,0 +1,108 @@
|
||||
---
|
||||
title: 样式
|
||||
---
|
||||
|
||||
amis 参考 [tailwindcss](https://tailwindcss.com/) 加入了大量的帮助类 css，掌握这些用法，完全不用手写 css。
|
||||
|
||||
这个文件大概有 300K 左右，所以并没有和主题文件合并在一起，用户可以选择性加载。
|
||||
|
||||
```
|
||||
<link rel="stylesheet" href="amis/lib/utilities.css">
|
||||
```
|
||||
|
||||
## 基本使用
|
||||
|
||||
例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮1",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "Hello World!"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮2",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "Hello World!"
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
1. 通过查阅按钮文档可知，按钮支持 className 配置项，也就是说可以在按钮上添加 CSS 类名；
|
||||
2. 再查阅样式相关文档，我们可以添加`m-l`类名实现`margin-left: 15px;`的 CSS 效果
|
||||
3. 于是我们在`按钮2`的配置中添加`"className": "m-l"`，就能实现间距效果了
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮1",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "Hello World!"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮2",
|
||||
"className": "m-l",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "Hello World!"
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
除了按钮提供的默认样式外，还可以自己自定义比如。
|
||||
|
||||
```schema:height="100" scope="body"
|
||||
[
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮1",
|
||||
"actionType": "dialog",
|
||||
"className": "border-pink-700 shadow-md text-light bg-pink-500 hover:bg-pink-600 hover:text-light hover:border-pink-800",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "Hello World!"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"type": "button",
|
||||
"label": "按钮2",
|
||||
"actionType": "dialog",
|
||||
"className": "m-l-xs border-purple-700 shadow-md text-light bg-purple-500 hover:bg-purple-600 hover:text-light hover:border-purple-800",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
"body": "Hello World!"
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
绝大部分组件都支持各种形式的 CSS 类名自定义，然后搭配该文档中的各种类名可以实现各式各样的样式调整。具体请查阅组件文档；
|
||||
|
||||
<div class="rounded-t-xl overflow-hidden bg-blue-100 p-x-6 p-y-12">
|
||||
<div class="p-6 m-auto max-w-sm m-x-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
|
||||
<div class="flex-shrink-0">
|
||||
<svg class="h-12 w-12" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="#2397B3" offset="0%"></stop><stop stop-color="#13577E" offset="100%"></stop></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b"><stop stop-color="#73DFF2" offset="0%"></stop><stop stop-color="#47B1EB" offset="100%"></stop></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M28.872 22.096c.084.622.128 1.258.128 1.904 0 7.732-6.268 14-14 14-2.176 0-4.236-.496-6.073-1.382l-6.022 2.007c-1.564.521-3.051-.966-2.53-2.53l2.007-6.022A13.944 13.944 0 0 1 1 24c0-7.331 5.635-13.346 12.81-13.95A9.967 9.967 0 0 0 13 14c0 5.523 4.477 10 10 10a9.955 9.955 0 0 0 5.872-1.904z" fill="url(#a)" transform="translate(1 1)"></path><path d="M35.618 20.073l2.007 6.022c.521 1.564-.966 3.051-2.53 2.53l-6.022-2.007A13.944 13.944 0 0 1 23 28c-7.732 0-14-6.268-14-14S15.268 0 23 0s14 6.268 14 14c0 2.176-.496 4.236-1.382 6.073z" fill="url(#b)" transform="translate(1 1)"></path><path d="M18 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM24 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM30 17a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#FFF"></path></g></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xl font-medium text-black">ChitChat</div>
|
||||
<p class="text-gray-500">You have a new message!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -24,6 +24,8 @@ import Select from '../../src/components/Select';
|
||||
import DocSearch from './DocSearch';
|
||||
import Doc, {docs} from './Doc';
|
||||
import Example, {examples} from './Example';
|
||||
import CssDocs, {cssDocs} from './CssDocs';
|
||||
import CSSDocs from './CssDocs';
|
||||
|
||||
let ExamplePathPrefix = '/examples';
|
||||
let DocPathPrefix = '/docs';
|
||||
@ -35,6 +37,10 @@ if (process.env.NODE_ENV === 'production') {
|
||||
ContextPath = '/amis';
|
||||
}
|
||||
|
||||
export function getContextPath() {
|
||||
return ContextPath;
|
||||
}
|
||||
|
||||
const themes = [
|
||||
{
|
||||
label: '默认主题',
|
||||
@ -225,6 +231,9 @@ export class App extends React.PureComponent {
|
||||
<Link to={`${ContextPath}/examples`} activeClassName="is-active">
|
||||
示例
|
||||
</Link>
|
||||
<Link to={`${ContextPath}/style`} activeClassName="is-active">
|
||||
样式
|
||||
</Link>
|
||||
<a
|
||||
href="https://github.com/fex-team/amis-editor-demo"
|
||||
target="_blank"
|
||||
@ -468,6 +477,10 @@ export default function entry({pathPrefix}) {
|
||||
from={`${ContextPath}/examples`}
|
||||
to={`${ContextPath}/examples/pages/simple`}
|
||||
/>
|
||||
<Redirect
|
||||
from={`${ContextPath}/style`}
|
||||
to={`${ContextPath}/style/index`}
|
||||
/>
|
||||
|
||||
<Route path={`${ContextPath}/docs`} component={Doc}>
|
||||
{navigations2route(DocPathPrefix, docs)}
|
||||
@ -475,6 +488,9 @@ export default function entry({pathPrefix}) {
|
||||
<Route path={`${ContextPath}/examples`} component={Example}>
|
||||
{navigations2route(ExamplePathPrefix, examples)}
|
||||
</Route>
|
||||
<Route path={`${ContextPath}/style`} component={CSSDocs}>
|
||||
{navigations2route(ExamplePathPrefix, cssDocs)}
|
||||
</Route>
|
||||
</Route>
|
||||
|
||||
<Route path="*" component={NotFound} />
|
||||
|
||||
63
examples/components/CssDocs.tsx
Normal file
63
examples/components/CssDocs.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
import makeMarkdownRenderer from './MdRenderer';
|
||||
|
||||
export const cssDocs = [
|
||||
{
|
||||
label: '📌 开始',
|
||||
children: [
|
||||
{
|
||||
label: '自定义样式',
|
||||
path: '/style/index',
|
||||
getComponent: (location: any, cb: any) =>
|
||||
(require as any)(
|
||||
['../../docs/css-utilities/index.md'],
|
||||
(doc: any) => {
|
||||
cb(null, makeMarkdownRenderer(doc));
|
||||
}
|
||||
)
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
// prefix: ({classnames: cx}) => <li className={cx('AsideNav-divider')} />,
|
||||
children: [
|
||||
{
|
||||
label: 'CSS',
|
||||
path: '/style/css',
|
||||
getComponent: (location: any, cb: any) =>
|
||||
(require as any)(
|
||||
['../../scss/utilities/background/_background-color.scss'],
|
||||
(doc: any) => {
|
||||
cb(null, makeMarkdownRenderer(doc));
|
||||
}
|
||||
)
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default class CSSDocs extends React.PureComponent<any> {
|
||||
componentDidMount() {
|
||||
this.props.setNavigations(cssDocs);
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.props.setNavigations(cssDocs);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
{React.cloneElement(this.props.children as any, {
|
||||
...(this.props.children as any).props,
|
||||
theme: this.props.theme,
|
||||
classPrefix: this.props.classPrefix,
|
||||
locale: this.props.locale,
|
||||
viewMode: this.props.viewMode,
|
||||
offScreen: this.props.offScreen
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -110,7 +110,7 @@
|
||||
sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
}
|
||||
|
||||
.markdown-body a:not(.btn) {
|
||||
/* .markdown-body a:not(.btn) {
|
||||
color: #4078c0;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -119,7 +119,7 @@
|
||||
.markdown-body a:active:not(.btn) {
|
||||
color: #4078c0;
|
||||
text-decoration: underline;
|
||||
}
|
||||
} */
|
||||
|
||||
.markdown-body hr {
|
||||
height: 0;
|
||||
|
||||
@ -13,9 +13,9 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
// a {
|
||||
// text-decoration: none !important;
|
||||
// }
|
||||
|
||||
.page-play,
|
||||
.page-edit {
|
||||
|
||||
@ -5,6 +5,7 @@ const path = require('path');
|
||||
const fs = require('fs');
|
||||
const package = require('./package.json');
|
||||
const parserMarkdown = require('./scripts/md-parser');
|
||||
const parserCodeMarkdown = require('./scripts/code-md-parser');
|
||||
fis.get('project.ignore').push('public/**', 'npm/**', 'gh-pages/**');
|
||||
// 配置只编译哪些文件。
|
||||
|
||||
@ -31,7 +32,8 @@ Resource.extend({
|
||||
|
||||
fis.set('project.files', [
|
||||
'schema.json',
|
||||
'scss/**.scss',
|
||||
'/scss/utilities.scss',
|
||||
'/scss/themes/*.scss',
|
||||
'/examples/*.html',
|
||||
'/examples/*.tpl',
|
||||
'/examples/static/*.png',
|
||||
@ -81,7 +83,9 @@ fis.match('/src/icons/**.svg', {
|
||||
});
|
||||
|
||||
fis.match('_*.scss', {
|
||||
release: false
|
||||
parser: parserCodeMarkdown,
|
||||
isMod: true,
|
||||
rExt: '.js'
|
||||
});
|
||||
|
||||
fis.match('/node_modules/**.js', {
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
rewrite ^\/(?:examples|docs)\/[a-z0-9\-_\/]+$ /examples/index.html
|
||||
rewrite ^\/(?:examples|docs|style)(?:\/[a-z0-9\-_\/]+)?$ /examples/index.html
|
||||
|
||||
rewrite ^\/play$ /examples/index.html
|
||||
rewrite ^\/edit$ /examples/index.html
|
||||
|
||||
rewrite ^\/api\/ /mock/index.js
|
||||
|
||||
rewrite ^\/cxd /examples/cxd.html
|
||||
rewrite ^\/cxd /examples/cxd.html
|
||||
redirect ^\/$ /docs/index
|
||||
@ -112,7 +112,7 @@
|
||||
"@types/react-json-tree": "^0.6.6",
|
||||
"@types/react-onclickoutside": "^6.0.2",
|
||||
"@types/react-overlays": "^0.8.4",
|
||||
"@types/react-router": "^4.0.16",
|
||||
"@types/react-router": "^3.0.24",
|
||||
"@types/react-select": "^1.0.59",
|
||||
"@types/react-test-renderer": "^16.8.1",
|
||||
"@types/react-transition-group": "^2.0.6",
|
||||
|
||||
11
scripts/code-md-parser.js
Normal file
11
scripts/code-md-parser.js
Normal file
@ -0,0 +1,11 @@
|
||||
const parserMarkdown = require('./md-parser');
|
||||
|
||||
module.exports = function (content, file) {
|
||||
const markdowns = [];
|
||||
|
||||
content.replace(/\/\*\!markdown\n([\s\S]+?)\*\//g, function (_, md) {
|
||||
markdowns.push(md.trim());
|
||||
});
|
||||
|
||||
return parserMarkdown(markdowns.join('\n\n'), file);
|
||||
};
|
||||
@ -156,9 +156,9 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline-block !important;
|
||||
}
|
||||
// .inline {
|
||||
// display: inline-block !important;
|
||||
// }
|
||||
|
||||
.none {
|
||||
display: none;
|
||||
|
||||
@ -96,9 +96,4 @@
|
||||
@import '../components/form/icon-picker';
|
||||
@import '../components/form/form';
|
||||
|
||||
// js 功能依赖这个
|
||||
@keyframes apearSensor {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@import '../utilities';
|
||||
|
||||
@ -1,9 +1,28 @@
|
||||
/*!markdown
|
||||
|
||||
---
|
||||
title: 介绍
|
||||
---
|
||||
|
||||
233
|
||||
|
||||
|
||||
*/
|
||||
|
||||
@mixin bg-colors-map(
|
||||
$colors: $colors,
|
||||
$namePrefix: '',
|
||||
$prefix: '.',
|
||||
$suffix: ''
|
||||
) {
|
||||
#{$prefix}bg#{$namePrefix}-transparent#{$suffix} {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#{$prefix}bg#{$namePrefix}-current#{$suffix} {
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
@each $name, $color in $colors {
|
||||
@if (is-map($color)) {
|
||||
@include bg-colors-map($color, #{'-' + $name}, $prefix, $suffix);
|
||||
@ -25,11 +44,6 @@
|
||||
@include bg-colors-map($colors, '', $prefix, $suffix);
|
||||
}
|
||||
|
||||
.no-bg {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@include bg-colors();
|
||||
@each $deivce in map-keys($devices) {
|
||||
@include media-device($deivce) {
|
||||
@ -39,4 +53,5 @@
|
||||
|
||||
@include bg-colors('.' + selector-escape('hover:'), ':hover');
|
||||
@include bg-colors('.' + selector-escape('active:'), '.is-active');
|
||||
@include bg-colors('.' + selector-escape('disabled:'), '.is-disabled');
|
||||
@include bg-colors('.group:hover .' + selector-escape('group-hover:'));
|
||||
|
||||
@ -28,4 +28,5 @@
|
||||
|
||||
@include border-colors('.' + selector-escape('hover:'), ':hover');
|
||||
@include border-colors('.' + selector-escape('active:'), '.is-active');
|
||||
@include border-colors('.' + selector-escape('disabled:'), '.is-disabled');
|
||||
@include border-colors('.group:hover .' + selector-escape('group-hover:'));
|
||||
|
||||
@ -46,38 +46,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.r {
|
||||
border-radius: $borderRadius $borderRadius $borderRadius $borderRadius;
|
||||
}
|
||||
|
||||
.r-2x {
|
||||
border-radius: $borderRadiusMd;
|
||||
}
|
||||
|
||||
.r-3x {
|
||||
border-radius: $borderRadiusLg;
|
||||
}
|
||||
|
||||
.r-l {
|
||||
border-radius: $borderRadius 0 0 $borderRadius;
|
||||
}
|
||||
|
||||
.r-r {
|
||||
border-radius: 0 $borderRadius $borderRadius 0;
|
||||
}
|
||||
|
||||
.r-t {
|
||||
border-radius: $borderRadius $borderRadius 0 0;
|
||||
}
|
||||
|
||||
.r-b {
|
||||
border-radius: 0 0 $borderRadius $borderRadius;
|
||||
}
|
||||
|
||||
.no-radius {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@include border-radius();
|
||||
@each $deivce in map-keys($devices) {
|
||||
@include media-device($deivce) {
|
||||
@ -87,4 +55,5 @@
|
||||
|
||||
// @include border-radius('.' + selector-escape('hover:'), ':hover');
|
||||
// @include border-radius('.' + selector-escape('active:'), '.is-active');
|
||||
// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled');
|
||||
// @include border-radius('.group:hover .' + selector-escape('group-hover:'));
|
||||
|
||||
@ -30,4 +30,5 @@
|
||||
|
||||
// @include border-radius('.' + selector-escape('hover:'), ':hover');
|
||||
// @include border-radius('.' + selector-escape('active:'), '.is-active');
|
||||
// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled');
|
||||
// @include border-radius('.group:hover .' + selector-escape('group-hover:'));
|
||||
|
||||
@ -15,4 +15,5 @@
|
||||
|
||||
@include make-box-shadow('.' + selector-escape('hover:'), ':hover');
|
||||
@include make-box-shadow('.' + selector-escape('active:'), '.is-active');
|
||||
@include make-box-shadow('.' + selector-escape('disabled:'), '.is-disabled');
|
||||
@include make-box-shadow('.group:hover .' + selector-escape('group-hover:'));
|
||||
|
||||
@ -34,4 +34,5 @@
|
||||
|
||||
// @include border-radius('.' + selector-escape('hover:'), ':hover');
|
||||
// @include border-radius('.' + selector-escape('active:'), '.is-active');
|
||||
// @include border-radius('.' + selector-escape('disabled:'), '.is-disabled');
|
||||
// @include border-radius('.group:hover .' + selector-escape('group-hover:'));
|
||||
|
||||
@ -10,6 +10,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
#{$prefix}m-auto#{$suffix} {
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin margin-negative-spacing($spacing: $spacing, $prefix: '.', $suffix: '') {
|
||||
@ -40,6 +43,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$prefix}m-x-auto#{$suffix} {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin margin-negative-x-spacing(
|
||||
@ -76,6 +84,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#{$prefix}m-y-auto#{$suffix} {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin margin-negative-y-spacing(
|
||||
@ -252,4 +265,5 @@
|
||||
|
||||
// @include bg-colors('.' + selector-escape('hover:'), ':hover');
|
||||
// @include bg-colors('.' + selector-escape('active:'), '.is-active');
|
||||
// @include bg-colors('.' + selector-escape('disabled:'), '.is-disabled');
|
||||
// @include bg-colors('.group:hover .' + selector-escape('group-hover:'));
|
||||
|
||||
@ -118,4 +118,5 @@
|
||||
}
|
||||
// @include bg-colors('.' + selector-escape('hover:'), ':hover');
|
||||
// @include bg-colors('.' + selector-escape('active:'), '.is-active');
|
||||
// @include bg-colors('.' + selector-escape('disabled:'), '.is-disabled');
|
||||
// @include bg-colors('.group:hover .' + selector-escape('group-hover:'));
|
||||
|
||||
@ -41,4 +41,5 @@
|
||||
|
||||
@include text-colors('.' + selector-escape('hover:'), ':hover');
|
||||
@include text-colors('.' + selector-escape('active:'), '.is-active');
|
||||
@include text-colors('.' + selector-escape('disabled:'), '.is-disabled');
|
||||
@include text-colors('.group:hover .' + selector-escape('group-hover:'));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user