mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-12 12:25:16 +08:00
07akioni
GitHub Enterprise
commit
33232a79c8
@ -4,7 +4,7 @@
|
||||
|
||||
<h1 align="center">Naive UI</h1>
|
||||
<p align="center">A Vue UI Framework</p>
|
||||
<p align="center"><b>Caring About Styles, Themed, Batteries Included</b></p>
|
||||
<p align="center"><b>Caring About Styles, Themed, Batteries Included, Not Rather Slow</b></p>
|
||||
<p align="center">Interesting Somehow</p>
|
||||
|
||||
## Documentation
|
||||
|
||||
@ -6,7 +6,7 @@ const postcssConfig = require('../postcss.config')
|
||||
const ncp = require('ncp')
|
||||
|
||||
const styleFiles = fs
|
||||
.readdirSync(path.resolve(__dirname, '../styles'))
|
||||
.readdirSync(path.resolve(__dirname, '../src/_styles'))
|
||||
.filter(fileName => fileName.endsWith('.scss'))
|
||||
|
||||
function createDirIfNotExists (...args) {
|
||||
@ -24,7 +24,7 @@ createDirIfNotExists(__dirname, '../es', 'styles', 'resources')
|
||||
|
||||
styleFiles.forEach(fileName => {
|
||||
sass.render({
|
||||
file: path.resolve(__dirname, '../styles', fileName),
|
||||
file: path.resolve(__dirname, '../src/_styles', fileName),
|
||||
outputStyle: 'expanded'
|
||||
}, function (err, sassResult) {
|
||||
if (err) console.error(err)
|
||||
@ -52,6 +52,11 @@ styleFiles.forEach(fileName => {
|
||||
})
|
||||
|
||||
ncp(
|
||||
path.resolve(__dirname, '../styles/resources'),
|
||||
path.resolve(__dirname, '../src/_styles/resources'),
|
||||
path.resolve(__dirname, '../lib/styles/resources')
|
||||
)
|
||||
|
||||
ncp(
|
||||
path.resolve(__dirname, '../src/_styles/resources'),
|
||||
path.resolve(__dirname, '../es/styles/resources')
|
||||
)
|
||||
|
||||
@ -6,7 +6,7 @@ const postcssConfig = require('../postcss.config')
|
||||
const ncp = require('ncp')
|
||||
|
||||
const styleFiles = fs
|
||||
.readdirSync(path.resolve(__dirname, '../styles'))
|
||||
.readdirSync(path.resolve(__dirname, '../src/_styles'))
|
||||
.filter(fileName => fileName.endsWith('.scss'))
|
||||
|
||||
function createDirIfNotExists (...args) {
|
||||
@ -24,7 +24,7 @@ createDirIfNotExists(__dirname, '../es', 'styles', 'resources')
|
||||
|
||||
styleFiles.forEach(fileName => {
|
||||
sass.render({
|
||||
file: path.resolve(__dirname, '../styles', fileName),
|
||||
file: path.resolve(__dirname, '../src/_styles', fileName),
|
||||
outputStyle: 'expanded'
|
||||
}, function (err, sassResult) {
|
||||
if (err) console.error(err)
|
||||
@ -52,6 +52,11 @@ styleFiles.forEach(fileName => {
|
||||
})
|
||||
|
||||
ncp(
|
||||
path.resolve(__dirname, '../styles/resources'),
|
||||
path.resolve(__dirname, '../src/_styles/resources'),
|
||||
path.resolve(__dirname, '../lib/styles/resources')
|
||||
)
|
||||
|
||||
ncp(
|
||||
path.resolve(__dirname, '../src/_styles/resources'),
|
||||
path.resolve(__dirname, '../es/styles/resources')
|
||||
)
|
||||
|
||||
@ -6,10 +6,10 @@ const webpack = require('webpack')
|
||||
const config = require('./config')
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin')
|
||||
const env = process.env.NODE_ENV
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
||||
|
||||
const webpackConfig = {
|
||||
mode: env === 'production' ? 'production' : 'development',
|
||||
mode: 'production',
|
||||
entry: './demo/deploymentIndex.js',
|
||||
output: {
|
||||
path: path.resolve(process.cwd()),
|
||||
@ -26,7 +26,8 @@ const webpackConfig = {
|
||||
host: '0.0.0.0',
|
||||
port: 8087,
|
||||
publicPath: '/',
|
||||
hot: true
|
||||
hot: false,
|
||||
historyApiFallback: true
|
||||
},
|
||||
performance: {
|
||||
hints: false
|
||||
@ -49,6 +50,11 @@ const webpackConfig = {
|
||||
preserveWhitespace: false
|
||||
}
|
||||
}
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].css',
|
||||
chunkFilename: '[id].css',
|
||||
ignoreOrder: false
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@ import debugRouteMixin from './routes/debugRouteMixin'
|
||||
import hljs from './hljs'
|
||||
import demoRouterView from './demoRouterView'
|
||||
import NaiveUI from '../src/index'
|
||||
import '../styles/index.scss'
|
||||
import '../src/_styles/index.scss'
|
||||
import { routes, childRoutes } from './routes/routes'
|
||||
import createRouter from './routes/router'
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
# 形状
|
||||
按钮拥有不同的形状。
|
||||
Button has different shapes.
|
||||
```html
|
||||
<n-button circle>
|
||||
<template v-slot:icon>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
This component's name has been changed many times.
|
||||
|
||||
In the beginning, it was created for inputing environment variables.
|
||||
## 演示
|
||||
## Demos
|
||||
```demo
|
||||
basic
|
||||
pair
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
"zh-CN": {
|
||||
"start": "开始使用",
|
||||
"intro1": "一个 Vue UI 框架",
|
||||
"intro2": "在意样式，带主题，比较完整",
|
||||
"intro2": "在意样式，带主题，比较完整，不算太慢",
|
||||
"intro3": "有点意思",
|
||||
"intro4": "换个主题"
|
||||
},
|
||||
"en-US": {
|
||||
"start": "Get Started",
|
||||
"intro1": "A Vue UI Framework",
|
||||
"intro2": "Caring About Styles, Themed, Batteries Included",
|
||||
"intro2": "Caring About Styles, Themed, Batteries Included, Not Rather Slow",
|
||||
"intro3": "Interesting Somehow",
|
||||
"intro4": "Change Theme"
|
||||
}
|
||||
|
||||
@ -56,7 +56,7 @@
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<n-tag class="nav-picker" @click.native="handleThemeChange">
|
||||
{{ themeOptions[theme].label }}
|
||||
{{ $t(themeOptions[theme].label) }}
|
||||
</n-tag>
|
||||
<n-tag class="nav-picker" @click.native="handleLanguageChange">
|
||||
{{ langOptions[lang].label }}
|
||||
@ -108,11 +108,11 @@ export default {
|
||||
state: state,
|
||||
themeOptions: {
|
||||
dark: {
|
||||
label: 'Light',
|
||||
label: 'light',
|
||||
next: 'light'
|
||||
},
|
||||
light: {
|
||||
label: 'Dark',
|
||||
label: 'dark',
|
||||
next: 'dark'
|
||||
}
|
||||
},
|
||||
|
||||
@ -7,7 +7,7 @@ export default {
|
||||
},
|
||||
render (h, context) {
|
||||
const locale = this.$i18n.locale
|
||||
const defaultSlot = this.$slots.default || []
|
||||
const defaultSlot = (this.$scopedSlots.default && this.$scopedSlots.default()) || []
|
||||
const index = defaultSlot.findIndex(VNode => VNode.componentOptions.tag === locale)
|
||||
// console.log(locale, defaultSlot[0].componentOptions.tag)
|
||||
// console.log(index)
|
||||
|
||||
12
package.json
12
package.json
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "naive-ui",
|
||||
"version": "1.0.14",
|
||||
"description": "A Vue UI Framework. Caring About Styles, Themed, Batteries Included.",
|
||||
"description": "A Vue UI Framework. Caring About Styles, Themed, Batteries Included, Not Rather Slow.",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
"scripts": {
|
||||
@ -12,11 +12,11 @@
|
||||
"build:doc": "npm run build && rm -rf doc/dist && cross-env NODE_ENV=production webpack --config build/webpack.doc.js",
|
||||
"build": "npm run clean && node build/buildStyle.js && node build/buildIcon.js && rollup -c",
|
||||
"clean": "rm -rf lib && rm -rf es && rm -rf dist",
|
||||
"demo": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js",
|
||||
"demo": "cross-env NODE_ENV=production webpack-dev-server --config build/webpack.demo.js",
|
||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.dev.js",
|
||||
"lint": "eslint --no-error-on-unmatched-pattern --fix \"src/**/*.{js,vue}\" \"test/**/*.{js,vue}\" \"build/**/*.{js,vue}\" \"demo/**/*.{js,vue}\" && stylelint \"styles/**/*.scss\"",
|
||||
"lint": "eslint --no-error-on-unmatched-pattern --fix \"src/**/*.{js,vue}\" \"test/**/*.{js,vue}\" \"build/**/*.{js,vue}\" \"demo/**/*.{js,vue}\" && stylelint \"src/_styles/**/*.scss\"",
|
||||
"lint:js": "eslint --no-error-on-unmatched-pattern --fix \"src/**/*.{js,vue}\" \"test/**/*.{js,vue}\" \"build/**/*.{js,vue}\" \"demo/**/*.{js,vue}\"",
|
||||
"lint:style": "stylelint \"styles/**/*.scss\"",
|
||||
"lint:style": "stylelint \"src/_styles/**/*.scss\"",
|
||||
"release:doc": "npm run build:doc && sudo bash doc/deploy-doc.sh",
|
||||
"release:doc:no-build": "sudo bash doc/deploy-doc.sh",
|
||||
"release:package": "npm run build && npm publish",
|
||||
@ -40,6 +40,7 @@
|
||||
"@babel/cli": "^7.8.4",
|
||||
"@babel/core": "^7.8.4",
|
||||
"@babel/preset-env": "^7.8.4",
|
||||
"@css-render/plugin-bem": "^0.7.5",
|
||||
"@kazupon/vue-i18n-loader": "^0.4.1",
|
||||
"@rollup/plugin-node-resolve": "^6.1.0",
|
||||
"@rollup/plugin-strip": "^1.3.2",
|
||||
@ -62,6 +63,7 @@
|
||||
"cors": "^2.8.5",
|
||||
"cross-env": "^5.2.1",
|
||||
"css-loader": "^2.1.1",
|
||||
"css-render": "^0.7.5",
|
||||
"cssnano": "^4.1.10",
|
||||
"emoji-regex": "^8.0.0",
|
||||
"emoji-unicode": "^1.1.0",
|
||||
@ -120,9 +122,7 @@
|
||||
"webpack-dev-server": "^3.10.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@css-render/plugin-bem": "^0.7.3",
|
||||
"async-validator": "^1.11.5",
|
||||
"css-render": "^0.7.3",
|
||||
"date-fns": "^2.9.0",
|
||||
"highlight.js": "^9.18.1",
|
||||
"lodash-es": "^4.17.15",
|
||||
|
||||
@ -46,6 +46,8 @@ module.exports = {
|
||||
'async-validator',
|
||||
'vue-virtual-scroller',
|
||||
'lodash-es',
|
||||
'resize-observer-polyfill'
|
||||
'resize-observer-polyfill',
|
||||
'css-render',
|
||||
'@css-render/plugin-bem'
|
||||
])
|
||||
}
|
||||
|
||||
@ -1,153 +0,0 @@
|
||||
import { c, cB, cE, cM, cNotM } from '../../_utils/cssr'
|
||||
|
||||
function createRippleAnimation (props) {
|
||||
return [
|
||||
c(`@keyframes n-button-${props.digest}-colored-ripple-spread`, {
|
||||
from: {
|
||||
boxShadow: `0 0 0 0 ${props.color}`
|
||||
},
|
||||
to: {
|
||||
boxShadow: `0 0 0 4px ${props.color}`
|
||||
}
|
||||
}),
|
||||
c(`@keyframes n-button-${props.digest}-colored-ripple-opacity`, {
|
||||
from: {
|
||||
opacity: 0.4
|
||||
},
|
||||
to: {
|
||||
opacity: 0
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
function createBasicColorProps (
|
||||
color, backgroundColor, borderColor
|
||||
) {
|
||||
const props = {}
|
||||
if (color) props.color = color
|
||||
if (backgroundColor) props.backgroundColor = backgroundColor
|
||||
if (borderColor) props.border = `1px solid ${borderColor}`
|
||||
return props
|
||||
}
|
||||
|
||||
function createIconColorStyle (color) {
|
||||
return cE('icon', [
|
||||
cB('icon', {
|
||||
fill: color + '!important',
|
||||
stroke: color + '!important'
|
||||
}),
|
||||
cB('base-loading', {
|
||||
fill: color + '!important',
|
||||
stroke: color + '!important'
|
||||
})
|
||||
])
|
||||
}
|
||||
|
||||
function createBorderMaskStyle (color) {
|
||||
return cE('border-mask', {
|
||||
boxShadow: `inset 0 0 0 1px ${color}`
|
||||
})
|
||||
}
|
||||
|
||||
export function createColorStyle () {
|
||||
return c([
|
||||
({ props }) => createRippleAnimation(props),
|
||||
cB('button', [
|
||||
({ props }) => cM(`${props.digest}-type`, createBasicColorProps(
|
||||
null, props.color, props.color
|
||||
), [
|
||||
cNotM('disabled', [
|
||||
cM(
|
||||
'enter-pressed',
|
||||
createBasicColorProps(props.textColor, props.activeColor, props.activeColor),
|
||||
[
|
||||
createBorderMaskStyle(props.activeColor),
|
||||
createIconColorStyle(props.textColor)
|
||||
]
|
||||
),
|
||||
cNotM('enter-pressed', [
|
||||
c('&:hover', createBasicColorProps(props.textColor, props.hoverColor, props.hoverColor), [
|
||||
createBorderMaskStyle(props.hoverColor),
|
||||
createIconColorStyle(props.textColor)
|
||||
]),
|
||||
c('&:active', createBasicColorProps(props.textColor, props.activeColor, props.activeColor), [
|
||||
createBorderMaskStyle(props.activeColor),
|
||||
createIconColorStyle(props.textColor)
|
||||
])
|
||||
]),
|
||||
c('&:not(:active):focus', [
|
||||
cNotM('enter-pressed', createBasicColorProps(props.textColor, props.focusColor, props.focusColor), [
|
||||
createBorderMaskStyle(props.focusColor),
|
||||
createIconColorStyle(props.textColor)
|
||||
])
|
||||
]),
|
||||
cM('rippling', [
|
||||
c('&::after', {
|
||||
animationName: `n-button-${props.digest}-colored-ripple-spread, n-button-${props.digest}-colored-ripple-opacity`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM(`ghost`, createBasicColorProps(
|
||||
props.color, 'transparent', props.color
|
||||
), [
|
||||
createIconColorStyle(props.color),
|
||||
cNotM('disabled', [
|
||||
cM(
|
||||
'enter-pressed',
|
||||
createBasicColorProps(props.activeColor, 'transparent', props.color),
|
||||
[
|
||||
createBorderMaskStyle(props.activeColor),
|
||||
createIconColorStyle(props.activeColor)
|
||||
]
|
||||
),
|
||||
cNotM('enter-pressed', [
|
||||
c('&:hover', createBasicColorProps(props.hoverColor, 'transparent', props.color), [
|
||||
createBorderMaskStyle(props.hoverColor),
|
||||
createIconColorStyle(props.hoverColor)
|
||||
]),
|
||||
c('&:active', createBasicColorProps(props.activeColor, 'transparent', props.color), [
|
||||
createBorderMaskStyle(props.activeColor),
|
||||
createIconColorStyle(props.activeColor)
|
||||
])
|
||||
]),
|
||||
c('&:not(:active):focus', [
|
||||
cNotM('enter-pressed', createBasicColorProps(props.focusColor, 'transparent', props.color), [
|
||||
createBorderMaskStyle(props.focusColor),
|
||||
createIconColorStyle(props.focusColor)
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
cM('text', ({
|
||||
color: props.color
|
||||
}), [
|
||||
createIconColorStyle(props.color),
|
||||
cNotM('disabled', [
|
||||
cM(
|
||||
'enter-pressed',
|
||||
createBasicColorProps(props.activeColor, null, null),
|
||||
[
|
||||
createIconColorStyle(props.activeColor)
|
||||
]
|
||||
),
|
||||
cNotM('enter-pressed', [
|
||||
c('&:hover', createBasicColorProps(props.hoverColor, null, null), [
|
||||
createIconColorStyle(props.hoverColor)
|
||||
]),
|
||||
c('&:active', createBasicColorProps(props.activeColor, null, null), [
|
||||
createIconColorStyle(props.activeColor)
|
||||
])
|
||||
]),
|
||||
c('&:not(:active):focus', [
|
||||
cNotM('enter-pressed', createBasicColorProps(props.focusColor, null, null), [
|
||||
createBorderMaskStyle(props.focusColor),
|
||||
createIconColorStyle(props.focusColor)
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
}
|
||||
@ -9,7 +9,8 @@
|
||||
:class="{
|
||||
'n-button--round': round,
|
||||
'n-button--circle': circle,
|
||||
[`n-button--${colorHash || type}-type`]: true,
|
||||
[`n-button--${colorHash || type}-colored`]: true,
|
||||
[`n-button--${type}-type`]: true,
|
||||
[`n-button--${syntheticSize}-size`]: true,
|
||||
'n-button--disabled': disabled,
|
||||
'n-button--loading': loading,
|
||||
@ -122,12 +123,23 @@ import themeable from '../../_mixins/themeable'
|
||||
import NIcon from '../../Icon'
|
||||
import NIconSwitchTransition from '../../_transition/IconSwitchTransition'
|
||||
import { read, composite, hash } from '../../_utils/color'
|
||||
import { createColorStyle } from './Button.cssr.js'
|
||||
import { createColorStyle } from './styles/Button.cssr.js'
|
||||
import { createThemedStyle } from '../../_utils/cssr'
|
||||
import theme from './styles/theme'
|
||||
|
||||
let colorStyle = null
|
||||
const colorStyle = createColorStyle()
|
||||
const typeStyle = createThemedStyle(colorStyle, theme)
|
||||
|
||||
function mountTypeStyle (type) {
|
||||
typeStyle.mount({
|
||||
target: 'n-button-' + type + '-style',
|
||||
props: {
|
||||
type
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function mountColorStyle (color, colorHash) {
|
||||
if (!colorStyle) colorStyle = createColorStyle()
|
||||
const textColor = null
|
||||
const rgb = read(color)
|
||||
const digest = hash(rgb)
|
||||
@ -137,12 +149,14 @@ function mountColorStyle (color, colorHash) {
|
||||
colorStyle.mount({
|
||||
target: 'n-button-' + digest,
|
||||
props: {
|
||||
color,
|
||||
hoverColor,
|
||||
activeColor,
|
||||
focusColor,
|
||||
textColor,
|
||||
digest
|
||||
digest,
|
||||
pallete: {
|
||||
color,
|
||||
hoverColor,
|
||||
activeColor,
|
||||
focusColor,
|
||||
textColor
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
@ -297,6 +311,9 @@ export default {
|
||||
},
|
||||
color (value) {
|
||||
mountColorStyle(value)
|
||||
},
|
||||
type (value) {
|
||||
mountTypeStyle(value)
|
||||
}
|
||||
},
|
||||
created () {
|
||||
@ -304,6 +321,7 @@ export default {
|
||||
if (color) {
|
||||
mountColorStyle(color)
|
||||
}
|
||||
mountTypeStyle(this.type)
|
||||
},
|
||||
beforeDestroy () {
|
||||
const colorHash = this.colorHash
|
||||
|
||||
175
src/Button/src/styles/Button.cssr.js
Normal file
175
src/Button/src/styles/Button.cssr.js
Normal file
@ -0,0 +1,175 @@
|
||||
import { c, cB, cTB, cE, cM, cNotM } from '../../../_utils/cssr'
|
||||
|
||||
function createRippleAnimation (digest, color, theme) {
|
||||
return [
|
||||
c(`@keyframes n-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-spread`, {
|
||||
from: {
|
||||
boxShadow: `0 0 0 0 ${color}`
|
||||
},
|
||||
to: {
|
||||
boxShadow: `0 0 0 4px ${color}`
|
||||
}
|
||||
}),
|
||||
c(`@keyframes n-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-opacity`, {
|
||||
from: {
|
||||
opacity: 0.4
|
||||
},
|
||||
to: {
|
||||
opacity: 0
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
function createBasicColorProps (
|
||||
color, backgroundColor, borderColor
|
||||
) {
|
||||
const props = {}
|
||||
if (color) props.color = color
|
||||
if (backgroundColor) props.backgroundColor = backgroundColor
|
||||
if (borderColor) props.border = `1px solid ${borderColor}`
|
||||
return props
|
||||
}
|
||||
|
||||
function createIconColorStyle (color) {
|
||||
return cE('icon', [
|
||||
cB('icon', {
|
||||
fill: color,
|
||||
stroke: color
|
||||
}),
|
||||
cB('base-loading', {
|
||||
fill: color,
|
||||
stroke: color
|
||||
})
|
||||
])
|
||||
}
|
||||
|
||||
function createBorderMaskStyle (color) {
|
||||
return cE('border-mask', {
|
||||
boxShadow: `inset 0 0 0 1px ${color}`
|
||||
})
|
||||
}
|
||||
|
||||
export function createColorStyle () {
|
||||
return c([
|
||||
({ props, context }) => {
|
||||
const digest = props.digest || props.type
|
||||
const pallete = (props && props.pallete) || context.pallete[digest]
|
||||
const theme = context.theme
|
||||
return [
|
||||
createRippleAnimation(digest, pallete.rippleColor || pallete.borderColor || pallete.color, theme),
|
||||
cTB('button', [
|
||||
cM(`${digest}-colored`, createBasicColorProps(
|
||||
pallete.textColor, pallete.color, pallete.borderColor || pallete.color
|
||||
), [
|
||||
cNotM('disabled', [
|
||||
cM(
|
||||
'enter-pressed',
|
||||
createBasicColorProps(
|
||||
pallete.activeTextColor || pallete.textColor,
|
||||
pallete.activeColor,
|
||||
pallete.activeBorderColor || pallete.activeColor
|
||||
),
|
||||
[
|
||||
createBorderMaskStyle(pallete.activeBorderColor || pallete.activeColor),
|
||||
createIconColorStyle(pallete.activeTextColor || pallete.textColor)
|
||||
]
|
||||
),
|
||||
cNotM('enter-pressed', [
|
||||
c('&:hover', createBasicColorProps(
|
||||
pallete.hoverTextColor || pallete.textColor,
|
||||
pallete.hoverColor,
|
||||
pallete.hoverBorderColor || pallete.hoverColor
|
||||
), [
|
||||
createBorderMaskStyle(pallete.hoverBorderColor || pallete.hoverColor),
|
||||
createIconColorStyle(pallete.hoverTextColor || pallete.textColor)
|
||||
]),
|
||||
c('&:active', createBasicColorProps(
|
||||
pallete.activeTextColor || pallete.textColor,
|
||||
pallete.activeColor,
|
||||
pallete.activeBorderColor || pallete.activeColor
|
||||
), [
|
||||
createBorderMaskStyle(pallete.activeBorderColor || pallete.activeColor),
|
||||
createIconColorStyle(pallete.activeTextColor || pallete.textColor)
|
||||
])
|
||||
]),
|
||||
c('&:not(:active):focus', [
|
||||
cNotM('enter-pressed', createBasicColorProps(
|
||||
pallete.focusTextColor || pallete.textColor,
|
||||
pallete.focusColor,
|
||||
pallete.focusBorderColor || pallete.focusColor
|
||||
), [
|
||||
createBorderMaskStyle(pallete.focusBorderColor || pallete.focusColor),
|
||||
createIconColorStyle(pallete.focusTextColor || pallete.textColor)
|
||||
])
|
||||
]),
|
||||
cM('rippling', [
|
||||
c('&::after', {
|
||||
animationName: `n-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-spread, n-${theme ? theme + '-' : ''}button-${digest}-colored-ripple-opacity`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM(`ghost`, createBasicColorProps(
|
||||
pallete.ghostTypedTextColor || pallete.color, 'transparent', pallete.borderColor || pallete.color
|
||||
), [
|
||||
createIconColorStyle(pallete.ghostTypedTextColor || pallete.color),
|
||||
cNotM('disabled', [
|
||||
cM(
|
||||
'enter-pressed',
|
||||
createBasicColorProps(pallete.ghostTypedActiveTextColor || pallete.activeColor, 'transparent', pallete.activeBorderColor || pallete.activeColor),
|
||||
[
|
||||
createBorderMaskStyle(pallete.activeBorderColor || pallete.activeColor),
|
||||
createIconColorStyle(pallete.ghostTypedActiveTextColor || pallete.activeColor)
|
||||
]
|
||||
),
|
||||
cNotM('enter-pressed', [
|
||||
c('&:hover', createBasicColorProps(pallete.ghostTypedHoverTextColor || pallete.hoverColor, 'transparent', pallete.hoverBorderColor || pallete.hoverColor), [
|
||||
createBorderMaskStyle(pallete.hoverBorderColor || pallete.hoverColor),
|
||||
createIconColorStyle(pallete.ghostTypedHoverTextColor || pallete.hoverColor)
|
||||
]),
|
||||
c('&:active', createBasicColorProps(pallete.ghostTypedActiveTextColor || pallete.activeColor, 'transparent', pallete.activeBorderColor || pallete.activeColor), [
|
||||
createBorderMaskStyle(pallete.activeBorderColor || pallete.activeColor),
|
||||
createIconColorStyle(pallete.ghostTypedActiveTextColor || pallete.activeColor)
|
||||
])
|
||||
]),
|
||||
c('&:not(:active):focus', [
|
||||
cNotM('enter-pressed', createBasicColorProps(pallete.ghostTypedHoverTextColor || pallete.hoverColor, 'transparent', pallete.focusBorderColor || pallete.focusColor), [
|
||||
createBorderMaskStyle(pallete.focusBorderColor || pallete.focusColor),
|
||||
createIconColorStyle(pallete.ghostTypedHoverTextColor || pallete.hoverColor)
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
cM('text', ({
|
||||
color: pallete.textTypedTextColor || pallete.color
|
||||
}), [
|
||||
createIconColorStyle(pallete.textTypedTextColor || pallete.color),
|
||||
cNotM('disabled', [
|
||||
cM(
|
||||
'enter-pressed',
|
||||
createBasicColorProps(pallete.textTypedActiveTextColor || pallete.activeColor, null, null),
|
||||
[
|
||||
createIconColorStyle(pallete.textTypedActiveTextColor || pallete.activeColor)
|
||||
]
|
||||
),
|
||||
cNotM('enter-pressed', [
|
||||
c('&:hover', createBasicColorProps(pallete.textTypedHoverTextColor || pallete.hoverColor, null, null), [
|
||||
createIconColorStyle(pallete.textTypedHoverTextColor || pallete.hoverColor)
|
||||
]),
|
||||
c('&:active', createBasicColorProps(pallete.textTypedActiveTextColor || pallete.activeColor, null, null), [
|
||||
createIconColorStyle(pallete.textTypedActiveTextColor || pallete.activeColor)
|
||||
])
|
||||
]),
|
||||
c('&:not(:active):focus', [
|
||||
cNotM('enter-pressed', createBasicColorProps(pallete.textTypedFocusTextColor || pallete.focusColor, null, null), [
|
||||
createIconColorStyle(pallete.textTypedFocusTextColor || pallete.focusColor)
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
])
|
||||
]
|
||||
}
|
||||
])
|
||||
}
|
||||
139
src/Button/src/styles/theme.js
Normal file
139
src/Button/src/styles/theme.js
Normal file
@ -0,0 +1,139 @@
|
||||
import lightScheme from '../../../_styles-in-js/lightStyleScheme.scss'
|
||||
import darkScheme from '../../../_styles-in-js/darkStyleScheme.scss'
|
||||
|
||||
const light = {
|
||||
default: {
|
||||
color: lightScheme.baseBackgroundColor,
|
||||
hoverColor: lightScheme.baseBackgroundColor,
|
||||
activeColor: lightScheme.baseBackgroundColor,
|
||||
focusColor: lightScheme.baseBackgroundColor,
|
||||
|
||||
textColor: lightScheme.secondaryTextColor,
|
||||
hoverTextColor: lightScheme.primaryHoverColor,
|
||||
activeTextColor: lightScheme.primaryActiveColor,
|
||||
focusTextColor: lightScheme.primaryHoverColor,
|
||||
|
||||
textTypedTextColor: lightScheme.secondaryTextColor,
|
||||
textTypedHoverTextColor: lightScheme.primaryHoverColor,
|
||||
textTypedActiveTextColor: lightScheme.primaryActiveColor,
|
||||
textTypedFocusTextColor: lightScheme.primaryHoverColor,
|
||||
|
||||
ghostTypedTextColor: lightScheme.secondaryTextColor,
|
||||
ghostTypedHoverTextColor: lightScheme.primaryHoverColor,
|
||||
ghostTypedActiveTextColor: lightScheme.primaryActiveColor,
|
||||
ghostTypedFocusTextColor: lightScheme.primaryHoverColor,
|
||||
|
||||
borderColor: lightScheme.borderColor,
|
||||
hoverBorderColor: lightScheme.primaryHoverColor,
|
||||
activeBorderColor: lightScheme.primaryActiveColor,
|
||||
focusBorderColor: lightScheme.primaryHoverColor,
|
||||
|
||||
rippleColor: lightScheme.primaryColor
|
||||
},
|
||||
primary: {
|
||||
color: lightScheme.primaryColor,
|
||||
hoverColor: lightScheme.primaryHoverColor,
|
||||
activeColor: lightScheme.primaryActiveColor,
|
||||
focusColor: lightScheme.primaryHoverColor,
|
||||
textColor: lightScheme.baseBackgroundColor
|
||||
},
|
||||
info: {
|
||||
color: lightScheme.infoColor,
|
||||
hoverColor: lightScheme.infoHoverColor,
|
||||
activeColor: lightScheme.infoActiveColor,
|
||||
focusColor: lightScheme.infoHoverColor,
|
||||
textColor: lightScheme.baseBackgroundColor
|
||||
},
|
||||
success: {
|
||||
color: lightScheme.successColor,
|
||||
hoverColor: lightScheme.successHoverColor,
|
||||
activeColor: lightScheme.successActiveColor,
|
||||
focusColor: lightScheme.successHoverColor,
|
||||
textColor: lightScheme.baseBackgroundColor
|
||||
},
|
||||
warning: {
|
||||
color: lightScheme.warningColor,
|
||||
hoverColor: lightScheme.warningHoverColor,
|
||||
activeColor: lightScheme.warningActiveColor,
|
||||
focusColor: lightScheme.warningHoverColor,
|
||||
textColor: lightScheme.baseBackgroundColor
|
||||
},
|
||||
error: {
|
||||
color: lightScheme.errorColor,
|
||||
hoverColor: lightScheme.errorHoverColor,
|
||||
activeColor: lightScheme.errorActiveColor,
|
||||
focusColor: lightScheme.errorHoverColor,
|
||||
textColor: lightScheme.baseBackgroundColor
|
||||
}
|
||||
}
|
||||
|
||||
const dark = {
|
||||
default: {
|
||||
color: 'transparent',
|
||||
hoverColor: 'transparent',
|
||||
activeColor: 'transparent',
|
||||
focusColor: 'transparent',
|
||||
|
||||
textColor: darkScheme.secondaryTextColor,
|
||||
hoverTextColor: darkScheme.primaryHoverColor,
|
||||
activeTextColor: darkScheme.primaryActiveColor,
|
||||
focusTextColor: darkScheme.primaryHoverColor,
|
||||
|
||||
textTypedTextColor: darkScheme.secondaryTextColor,
|
||||
textTypedHoverTextColor: darkScheme.primaryHoverColor,
|
||||
textTypedActiveTextColor: darkScheme.primaryActiveColor,
|
||||
textTypedFocusTextColor: darkScheme.primaryHoverColor,
|
||||
|
||||
ghostTypedTextColor: darkScheme.secondaryTextColor,
|
||||
ghostTypedHoverTextColor: darkScheme.primaryHoverColor,
|
||||
ghostTypedActiveTextColor: darkScheme.primaryActiveColor,
|
||||
ghostTypedFocusTextColor: darkScheme.primaryHoverColor,
|
||||
|
||||
borderColor: darkScheme.borderColor,
|
||||
hoverBorderColor: darkScheme.primaryHoverColor,
|
||||
activeBorderColor: darkScheme.primaryActiveColor,
|
||||
focusBorderColor: darkScheme.primaryHoverColor,
|
||||
|
||||
rippleColor: darkScheme.primaryColor
|
||||
},
|
||||
primary: {
|
||||
color: darkScheme.primaryColor,
|
||||
hoverColor: darkScheme.primaryHoverColor,
|
||||
activeColor: darkScheme.primaryActiveColor,
|
||||
focusColor: darkScheme.primaryHoverColor,
|
||||
textColor: darkScheme.baseBackgroundColor
|
||||
},
|
||||
info: {
|
||||
color: darkScheme.infoColor,
|
||||
hoverColor: darkScheme.infoHoverColor,
|
||||
activeColor: darkScheme.infoActiveColor,
|
||||
focusColor: darkScheme.infoHoverColor,
|
||||
textColor: darkScheme.baseBackgroundColor
|
||||
},
|
||||
success: {
|
||||
color: darkScheme.successColor,
|
||||
hoverColor: darkScheme.successHoverColor,
|
||||
activeColor: darkScheme.successActiveColor,
|
||||
focusColor: darkScheme.successHoverColor,
|
||||
textColor: darkScheme.baseBackgroundColor
|
||||
},
|
||||
warning: {
|
||||
color: darkScheme.warningColor,
|
||||
hoverColor: darkScheme.warningHoverColor,
|
||||
activeColor: darkScheme.warningActiveColor,
|
||||
focusColor: darkScheme.warningHoverColor,
|
||||
textColor: darkScheme.baseBackgroundColor
|
||||
},
|
||||
error: {
|
||||
color: darkScheme.errorColor,
|
||||
hoverColor: darkScheme.errorHoverColor,
|
||||
activeColor: darkScheme.errorActiveColor,
|
||||
focusColor: darkScheme.errorHoverColor,
|
||||
textColor: darkScheme.baseBackgroundColor
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
fallback: light,
|
||||
dark
|
||||
}
|
||||
@ -50,7 +50,7 @@ import NCascaderOption from './CascaderOption.vue'
|
||||
import NScrollbar from '../../Scrollbar'
|
||||
import NBaseTrackingRect from '../../_base/TrackingRect'
|
||||
import debounce from 'lodash-es/debounce'
|
||||
import { itemSize } from '../../_interoperation/common'
|
||||
import { itemSize } from '../../_styles-in-js/common'
|
||||
|
||||
export default {
|
||||
name: 'NCascaderSubmenu',
|
||||
|
||||
@ -11,8 +11,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NInput from '../../Input'
|
||||
|
||||
export default {
|
||||
name: 'NDynamicInputInputPreset',
|
||||
components: {
|
||||
NInput
|
||||
},
|
||||
inject: {
|
||||
NDynamicInput: {
|
||||
default: null
|
||||
|
||||
@ -18,8 +18,13 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NInput from '../../Input'
|
||||
|
||||
export default {
|
||||
name: 'NDynamicInputPairPreset',
|
||||
components: {
|
||||
NInput
|
||||
},
|
||||
inject: {
|
||||
NDynamicInput: {
|
||||
default: null
|
||||
|
||||
@ -199,7 +199,7 @@ import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import { RecycleScroller } from 'vue-virtual-scroller'
|
||||
import debounce from 'lodash-es/debounce'
|
||||
import { itemSize } from '../../_interoperation/common'
|
||||
import { itemSize } from '../../_styles-in-js/common'
|
||||
|
||||
export default {
|
||||
name: 'NTransfer',
|
||||
|
||||
@ -120,7 +120,7 @@ import {
|
||||
OPTION_TYPE
|
||||
} from '../../../_utils/component/select'
|
||||
import formatLength from '../../../_utils/css/formatLength'
|
||||
import { itemSize } from '../../../_interoperation/common.js'
|
||||
import { itemSize } from '../../../_styles-in-js/common.js'
|
||||
|
||||
export default {
|
||||
name: 'NBaseSelectMenu',
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
export const itemSize = {
|
||||
tiny: 22,
|
||||
small: 28,
|
||||
medium: 34,
|
||||
large: 40,
|
||||
huge: 46
|
||||
}
|
||||
13
src/_styles-in-js/common.js
Normal file
13
src/_styles-in-js/common.js
Normal file
@ -0,0 +1,13 @@
|
||||
import commonStyle from './common.scss'
|
||||
|
||||
function extractLength (length) {
|
||||
return Number(length.match(/^\d+/)[0])
|
||||
}
|
||||
|
||||
export const itemSize = {
|
||||
tiny: extractLength(commonStyle.tinySize),
|
||||
small: extractLength(commonStyle.smallSize),
|
||||
medium: extractLength(commonStyle.mediumSize),
|
||||
large: extractLength(commonStyle.largeSize),
|
||||
huge: extractLength(commonStyle.hugeSize)
|
||||
}
|
||||
9
src/_styles-in-js/common.scss
Normal file
9
src/_styles-in-js/common.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@import '../_styles/themes/common.scss';
|
||||
|
||||
:export {
|
||||
tinySize: map-get($--n-height, 'tiny');
|
||||
smallSize: map-get($--n-height, 'small');
|
||||
mediumSize: map-get($--n-height, 'medium');
|
||||
largeSize: map-get($--n-height, 'large');
|
||||
hugeSize: map-get($--n-height, 'huge');
|
||||
}
|
||||
@ -1,10 +1,11 @@
|
||||
@import '../../styles/themes/dark/index.scss';
|
||||
@import '../../styles/themes/common.scss';
|
||||
@import '../_styles/themes/dark/index.scss';
|
||||
@import '../_styles/themes/common.scss';
|
||||
|
||||
@include setup-dark-theme($in-js-env: true);
|
||||
|
||||
/* stylelint-disable */
|
||||
:export {
|
||||
baseBackgroundColor: $--n-base-background-color;
|
||||
primaryColor: $--n-primary-color;
|
||||
primaryHoverColor: $--n-primary-hover-color;
|
||||
primaryActiveColor: $--n-primary-active-color;
|
||||
@ -31,6 +32,7 @@
|
||||
dividerColor: $--overlay-divider;
|
||||
borderColor: $--n-border-color;
|
||||
easeInOutCubicBezier: $--n-ease-in-out-cubic-bezier;
|
||||
// unstable
|
||||
tableHeaderOverlayBackgroundColor: $--n-table-header-overlay-background-color;
|
||||
inputOverlayBackgroundColor: $--n-input-overlay-background-color;
|
||||
}
|
||||
@ -1,10 +1,11 @@
|
||||
@import '../../styles/themes/light/index.scss';
|
||||
@import '../../styles/themes/common.scss';
|
||||
@import '../_styles/themes/light/index.scss';
|
||||
@import '../_styles/themes/common.scss';
|
||||
|
||||
@include setup-light-theme($in-js-env: true);
|
||||
|
||||
/* stylelint-disable */
|
||||
:export {
|
||||
baseBackgroundColor: $--n-base-background-color;
|
||||
primaryColor: $--n-primary-color;
|
||||
primaryHoverColor: $--n-primary-hover-color;
|
||||
primaryActiveColor: $--n-primary-active-color;
|
||||
@ -32,6 +33,7 @@
|
||||
dividerColor: $--overlay-divider;
|
||||
borderColor: $--n-border-color;
|
||||
easeInOutCubicBezier: $--n-ease-in-out-cubic-bezier;
|
||||
// unstable
|
||||
tableHeaderOverlayBackgroundColor: $--n-table-header-overlay-background-color;
|
||||
inputOverlayBackgroundColor: $--n-input-overlay-background-color;
|
||||
}
|
||||
@ -78,171 +78,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-icon-mixin($color) {
|
||||
@include e(icon) {
|
||||
@include b(icon) {
|
||||
fill: $color;
|
||||
stroke: $color;
|
||||
}
|
||||
@include b(base-loading) {
|
||||
fill: $color;
|
||||
stroke: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-type-mixin-content ($type) {
|
||||
color: map-get($--button-text-color, $type);
|
||||
background-color: map-get($--button-background-color, $type);
|
||||
border: 1px solid map-get($--button-border-color, $type);
|
||||
@include button-icon-mixin(map-get($--button-text-color, $type));
|
||||
@include not-m(disabled) {
|
||||
@include m(enter-pressed) {
|
||||
background-color: map-get($--button-background-color, $type + '-active');
|
||||
color: map-get($--button-text-color, $type + '-active');
|
||||
@include e(border-mask) {
|
||||
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-active');
|
||||
}
|
||||
@include button-icon-mixin(map-get($--button-text-color, $type + '-active'));
|
||||
}
|
||||
@include not-m(enter-pressed) {
|
||||
&:hover {
|
||||
background-color: map-get($--button-background-color, $type + '-hover');
|
||||
color: map-get($--button-text-color, $type + '-hover');
|
||||
@include e(border-mask) {
|
||||
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-hover');
|
||||
}
|
||||
@include button-icon-mixin(map-get($--button-text-color, $type + '-hover'));
|
||||
}
|
||||
&:active {
|
||||
background-color: map-get($--button-background-color, $type + '-active');
|
||||
color: map-get($--button-text-color, $type + '-active');
|
||||
@include e(border-mask) {
|
||||
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-active');
|
||||
}
|
||||
@include button-icon-mixin(map-get($--button-text-color, $type + '-active'));
|
||||
}
|
||||
}
|
||||
&:not(:active):focus {
|
||||
@include not-m(enter-pressed) {
|
||||
background-color: map-get($--button-background-color, $type + '-focus');
|
||||
color: map-get($--button-text-color, $type + '-focus');
|
||||
@include e(border-mask) {
|
||||
box-shadow: map-get($--button-border-mask-box-shadow, $type + '-focus');
|
||||
}
|
||||
@include button-icon-mixin(map-get($--button-text-color, $type + '-focus'));
|
||||
}
|
||||
}
|
||||
@include m(rippling) {
|
||||
&::after {
|
||||
animation-name: #{$theme}-#{$type}-button-ripple--spread, #{$theme}-#{$type}-button-ripple--opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(ghost) {
|
||||
background-color: map-get($--button-ghost-typed-background-color, $type);
|
||||
color: map-get($--button-ghost-typed-text-color, $type);
|
||||
border: 1px solid map-get($--button-ghost-typed-border-color, $type);
|
||||
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type));
|
||||
@include not-m(disabled) {
|
||||
@include m(enter-pressed) {
|
||||
background-color: map-get($--button-ghost-typed-background-color, $type + '-active');
|
||||
color: map-get($--button-ghost-typed-text-color, $type + '-active');
|
||||
@include e(border-mask) {
|
||||
box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-active');
|
||||
}
|
||||
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-active'));
|
||||
}
|
||||
&:not(:active):focus {
|
||||
@include not-m(enter-pressed) {
|
||||
color: map-get($--button-ghost-typed-text-color, $type + '-focus');
|
||||
background-color: map-get($--button-ghost-typed-background-color, $type + '-focus');
|
||||
@include e(border-mask) {
|
||||
box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-focus');
|
||||
}
|
||||
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-focus'));
|
||||
}
|
||||
}
|
||||
@include not-m(enter-pressed) {
|
||||
&:hover {
|
||||
background-color: map-get($--button-ghost-typed-background-color, $type + '-hover');
|
||||
color: map-get($--button-ghost-typed-text-color, $type + '-hover');
|
||||
@include e(border-mask) {
|
||||
box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-hover');
|
||||
}
|
||||
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-hover'));
|
||||
}
|
||||
&:active {
|
||||
background-color: map-get($--button-ghost-typed-background-color, $type + '-active');
|
||||
color: map-get($--button-ghost-typed-text-color, $type + '-active');
|
||||
@include e(border-mask) {
|
||||
box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-active');
|
||||
}
|
||||
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-active'));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(text) {
|
||||
color: map-get($--button-text-typed-text-color, $type);
|
||||
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type));
|
||||
@include not-m(disabled) {
|
||||
@include m(enter-pressed) {
|
||||
color: map-get($--button-text-typed-text-color, $type + '-active');
|
||||
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-active'));
|
||||
}
|
||||
&:not(:active):focus {
|
||||
@include not-m(enter-pressed) {
|
||||
color: map-get($--button-text-typed-text-color, $type + '-focus');
|
||||
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-focus'));
|
||||
}
|
||||
}
|
||||
@include not-m(enter-pressed) {
|
||||
&:hover {
|
||||
color: map-get($--button-text-typed-text-color, $type + '-hover');
|
||||
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-hover'));
|
||||
}
|
||||
&:active {
|
||||
color: map-get($--button-text-typed-text-color, $type + '-active');
|
||||
@include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-active'));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-type-mixin ($type) {
|
||||
@include m($type + '-type') {
|
||||
@include button-type-mixin-content($type);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-ripple-mixin($type) {
|
||||
@keyframes #{$theme}-#{$type}-button-ripple--spread {
|
||||
from {
|
||||
box-shadow: map-get($--button-ripple-box-shadow, $type + '-start');
|
||||
}
|
||||
to {
|
||||
box-shadow: map-get($--button-ripple-box-shadow, $type + '-end');
|
||||
}
|
||||
}
|
||||
@keyframes #{$theme}-#{$type}-button-ripple--opacity {
|
||||
from {
|
||||
opacity: .4;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include themes-mixin {
|
||||
@include button-ripple-mixin('default');
|
||||
@include button-ripple-mixin('primary');
|
||||
@include button-ripple-mixin('error');
|
||||
@include button-ripple-mixin('success');
|
||||
@include button-ripple-mixin('warning');
|
||||
@include button-ripple-mixin('info');
|
||||
@include b(button) {
|
||||
@include once {
|
||||
box-sizing: border-box;
|
||||
@ -339,12 +175,6 @@
|
||||
@include m(disabled) {
|
||||
opacity: $--button-disabled-opacity;
|
||||
}
|
||||
@include button-type-mixin-content('default');
|
||||
@include button-type-mixin('primary');
|
||||
@include button-type-mixin('info');
|
||||
@include button-type-mixin('success');
|
||||
@include button-type-mixin('warning');
|
||||
@include button-type-mixin('error');
|
||||
}
|
||||
}
|
||||
|
||||
@ -368,8 +198,8 @@
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
margin-left: 0!important;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0!important;
|
||||
border-bottom-left-radius: 0!important;
|
||||
}
|
||||
&:not(:first-child):not(:last-child) {
|
||||
margin-left: 0!important;
|
||||
@ -384,7 +214,7 @@
|
||||
& + {
|
||||
@include b(button) {
|
||||
@include m(default-type) {
|
||||
border-left-width: 0px;
|
||||
border-left-width: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -394,7 +224,7 @@
|
||||
& + {
|
||||
@include b(button) {
|
||||
@include m(primary-type) {
|
||||
border-left-width: 0px;
|
||||
border-left-width: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -403,7 +233,7 @@
|
||||
& + {
|
||||
@include b(button) {
|
||||
@include m(success-type) {
|
||||
border-left-width: 0px;
|
||||
border-left-width: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -412,7 +242,7 @@
|
||||
& + {
|
||||
@include b(button) {
|
||||
@include m(error-type) {
|
||||
border-left-width: 0px;
|
||||
border-left-width: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -421,7 +251,7 @@
|
||||
& + {
|
||||
@include b(button) {
|
||||
@include m(info-type) {
|
||||
border-left-width: 0px;
|
||||
border-left-width: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -430,7 +260,7 @@
|
||||
& + {
|
||||
@include b(button) {
|
||||
@include m(info-type) {
|
||||
border-left-width: 0px;
|
||||
border-left-width: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -446,15 +276,15 @@
|
||||
margin-bottom: 0!important;
|
||||
margin-left: 0!important;
|
||||
margin-right: 0!important;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0!important;
|
||||
border-bottom-right-radius: 0!important;
|
||||
}
|
||||
&:last-child:not(:first-child) {
|
||||
margin-top: 0!important;
|
||||
margin-left: 0!important;
|
||||
margin-right: 0!important;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0!important;
|
||||
border-top-right-radius: 0!important;
|
||||
}
|
||||
&:not(:first-child):not(:last-child) {
|
||||
margin: 0!important;
|
||||
@ -464,7 +294,7 @@
|
||||
& + {
|
||||
@include b(button) {
|
||||
@include m(default-type) {
|
||||
border-top-width: 0px;
|
||||
border-top-width: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -474,7 +304,7 @@
|
||||
& + {
|
||||
@include b(button) {
|
||||
@include m(info-type) {
|
||||
border-top-width: 0px;
|
||||
border-top-width: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -483,7 +313,7 @@
|
||||
& + {
|
||||
@include b(button) {
|
||||
@include m(success-type) {
|
||||
border-top-width: 0px;
|
||||
border-top-width: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -492,7 +322,7 @@
|
||||
& + {
|
||||
@include b(button) {
|
||||
@include m(warning-type) {
|
||||
border-top-width: 0px;
|
||||
border-top-width: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -501,7 +331,7 @@
|
||||
& + {
|
||||
@include b(button) {
|
||||
@include m(error-type) {
|
||||
border-top-width: 0px;
|
||||
border-top-width: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -510,7 +340,7 @@
|
||||
& + {
|
||||
@include b(button) {
|
||||
@include m(primary-type) {
|
||||
border-top-width: 0px;
|
||||
border-top-width: 0px!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user