mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
refactor(button): use theme vars from scss source
This commit is contained in:
07akioni
parent
21795f0250
commit
326b6cc889
@ -1,132 +1,135 @@
|
||||
import lightScheme from '../../../_interoperation/lightStyleScheme.scss'
|
||||
import darkScheme from '../../../_interoperation/darkStyleScheme.scss'
|
||||
|
||||
const light = {
|
||||
default: {
|
||||
color: '#fff',
|
||||
hoverColor: '#fff',
|
||||
activeColor: '#fff',
|
||||
focusColor: '#fff',
|
||||
color: lightScheme.baseBackgroundColor,
|
||||
hoverColor: lightScheme.baseBackgroundColor,
|
||||
activeColor: lightScheme.baseBackgroundColor,
|
||||
focusColor: lightScheme.baseBackgroundColor,
|
||||
|
||||
textColor: 'rgba(0, 0, 0, .72)',
|
||||
hoverTextColor: '#36ad6a',
|
||||
activeTextColor: '#0c7a43',
|
||||
focusTextColor: '#36ad6a',
|
||||
textColor: lightScheme.secondaryTextColor,
|
||||
hoverTextColor: lightScheme.primaryHoverColor,
|
||||
activeTextColor: lightScheme.primaryActiveColor,
|
||||
focusTextColor: lightScheme.primaryHoverColor,
|
||||
|
||||
textTypedTextColor: 'rgba(0, 0, 0, .72)',
|
||||
textTypedHoverTextColor: '#36ad6a',
|
||||
textTypedActiveTextColor: '#0c7a43',
|
||||
textTypedFocusTextColor: '#36ad6a',
|
||||
textTypedTextColor: lightScheme.secondaryTextColor,
|
||||
textTypedHoverTextColor: lightScheme.primaryHoverColor,
|
||||
textTypedActiveTextColor: lightScheme.primaryActiveColor,
|
||||
textTypedFocusTextColor: lightScheme.primaryHoverColor,
|
||||
|
||||
ghostTypedTextColor: 'rgba(0, 0, 0, .72)',
|
||||
ghostTypedHoverTextColor: '#36ad6a',
|
||||
ghostTypedActiveTextColor: '#0c7a43',
|
||||
ghostTypedFocusTextColor: '#36ad6a',
|
||||
ghostTypedTextColor: lightScheme.secondaryTextColor,
|
||||
ghostTypedHoverTextColor: lightScheme.primaryHoverColor,
|
||||
ghostTypedActiveTextColor: lightScheme.primaryActiveColor,
|
||||
ghostTypedFocusTextColor: lightScheme.primaryHoverColor,
|
||||
|
||||
borderColor: '#d9d9d9',
|
||||
hoverBorderColor: '#36ad6a',
|
||||
activeBorderColor: '#0c7a43',
|
||||
focusBorderColor: '#36ad6a',
|
||||
borderColor: lightScheme.borderColor,
|
||||
hoverBorderColor: lightScheme.primaryHoverColor,
|
||||
activeBorderColor: lightScheme.primaryActiveColor,
|
||||
focusBorderColor: lightScheme.primaryHoverColor,
|
||||
|
||||
rippleColor: '#18a058'
|
||||
rippleColor: lightScheme.primaryColor
|
||||
},
|
||||
primary: {
|
||||
color: '#18a058',
|
||||
hoverColor: '#36ad6a',
|
||||
activeColor: '#0c7a43',
|
||||
focusColor: '#36ad6a',
|
||||
textColor: '#fff'
|
||||
color: lightScheme.primaryColor,
|
||||
hoverColor: lightScheme.primaryHoverColor,
|
||||
activeColor: lightScheme.primaryActiveColor,
|
||||
focusColor: lightScheme.primaryHoverColor,
|
||||
textColor: lightScheme.baseBackgroundColor
|
||||
},
|
||||
info: {
|
||||
color: '#2080f0',
|
||||
hoverColor: '#4098fc',
|
||||
activeColor: '#1060c9',
|
||||
focusColor: '#4098fc',
|
||||
textColor: '#fff'
|
||||
color: lightScheme.infoColor,
|
||||
hoverColor: lightScheme.infoHoverColor,
|
||||
activeColor: lightScheme.infoActiveColor,
|
||||
focusColor: lightScheme.infoHoverColor,
|
||||
textColor: lightScheme.baseBackgroundColor
|
||||
},
|
||||
success: {
|
||||
color: '#18a058',
|
||||
hoverColor: '#36ad6a',
|
||||
activeColor: '#0c7a43',
|
||||
focusColor: '#36ad6a',
|
||||
textColor: '#fff'
|
||||
color: lightScheme.successColor,
|
||||
hoverColor: lightScheme.successHoverColor,
|
||||
activeColor: lightScheme.successActiveColor,
|
||||
focusColor: lightScheme.successHoverColor,
|
||||
textColor: lightScheme.baseBackgroundColor
|
||||
},
|
||||
warning: {
|
||||
color: '#f0a020',
|
||||
hoverColor: '#fcb040',
|
||||
activeColor: '#c97c10',
|
||||
focusColor: '#fcb040',
|
||||
textColor: '#fff'
|
||||
color: lightScheme.warningColor,
|
||||
hoverColor: lightScheme.warningHoverColor,
|
||||
activeColor: lightScheme.warningActiveColor,
|
||||
focusColor: lightScheme.warningHoverColor,
|
||||
textColor: lightScheme.baseBackgroundColor
|
||||
},
|
||||
error: {
|
||||
color: '#d03050',
|
||||
hoverColor: '#de576d',
|
||||
activeColor: '#ab1f3f',
|
||||
focusColor: '#de576d',
|
||||
textColor: '#fff'
|
||||
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',
|
||||
color: darkScheme.baseBackgroundColor,
|
||||
hoverColor: darkScheme.baseBackgroundColor,
|
||||
activeColor: darkScheme.baseBackgroundColor,
|
||||
focusColor: darkScheme.baseBackgroundColor,
|
||||
|
||||
textColor: 'rgba(255, 255, 255, .84)',
|
||||
hoverTextColor: '#7fe7c4',
|
||||
activeTextColor: '#5acea7',
|
||||
focusTextColor: '#7fe7c4',
|
||||
textColor: darkScheme.secondaryTextColor,
|
||||
hoverTextColor: darkScheme.primaryHoverColor,
|
||||
activeTextColor: darkScheme.primaryActiveColor,
|
||||
focusTextColor: darkScheme.primaryHoverColor,
|
||||
|
||||
textTypedTextColor: 'rgba(255, 255, 255, .84)',
|
||||
textTypedHoverTextColor: '#7fe7c4',
|
||||
textTypedActiveTextColor: '#5acea7',
|
||||
textTypedFocusTextColor: '#7fe7c4',
|
||||
textTypedTextColor: darkScheme.secondaryTextColor,
|
||||
textTypedHoverTextColor: darkScheme.primaryHoverColor,
|
||||
textTypedActiveTextColor: darkScheme.primaryActiveColor,
|
||||
textTypedFocusTextColor: darkScheme.primaryHoverColor,
|
||||
|
||||
ghostTypedTextColor: 'rgba(255, 255, 255, .84)',
|
||||
ghostTypedHoverTextColor: '#7fe7c4',
|
||||
ghostTypedActiveTextColor: '#5acea7',
|
||||
ghostTypedFocusTextColor: '#7fe7c4',
|
||||
ghostTypedTextColor: darkScheme.secondaryTextColor,
|
||||
ghostTypedHoverTextColor: darkScheme.primaryHoverColor,
|
||||
ghostTypedActiveTextColor: darkScheme.primaryActiveColor,
|
||||
ghostTypedFocusTextColor: darkScheme.primaryHoverColor,
|
||||
|
||||
borderColor: 'rgba(255, 255, 255, .24)',
|
||||
hoverBorderColor: '#7fe7c4',
|
||||
activeBorderColor: '#5acea7',
|
||||
focusBorderColor: '#7fe7c4',
|
||||
borderColor: darkScheme.borderColor,
|
||||
hoverBorderColor: darkScheme.primaryHoverColor,
|
||||
activeBorderColor: darkScheme.primaryActiveColor,
|
||||
focusBorderColor: darkScheme.primaryHoverColor,
|
||||
|
||||
rippleColor: '#63e2b7'
|
||||
rippleColor: darkScheme.primaryColor
|
||||
},
|
||||
primary: {
|
||||
color: '#63e2b7',
|
||||
hoverColor: '#7fe7c4',
|
||||
activeColor: '#5acea7',
|
||||
focusColor: '#7fe7c4',
|
||||
textColor: '#000'
|
||||
color: darkScheme.primaryColor,
|
||||
hoverColor: darkScheme.primaryHoverColor,
|
||||
activeColor: darkScheme.primaryActiveColor,
|
||||
focusColor: darkScheme.primaryHoverColor,
|
||||
textColor: darkScheme.baseBackgroundColor
|
||||
},
|
||||
info: {
|
||||
color: '#70C0E8',
|
||||
hoverColor: '#8acbec',
|
||||
activeColor: '#66afd3',
|
||||
focusColor: '#8acbec',
|
||||
textColor: '#000'
|
||||
color: darkScheme.infoColor,
|
||||
hoverColor: darkScheme.infoHoverColor,
|
||||
activeColor: darkScheme.infoActiveColor,
|
||||
focusColor: darkScheme.infoHoverColor,
|
||||
textColor: darkScheme.baseBackgroundColor
|
||||
},
|
||||
success: {
|
||||
color: '#64e3b8',
|
||||
hoverColor: '#7ee7c4',
|
||||
activeColor: '#5acea7',
|
||||
focusColor: '#7ee7c4',
|
||||
textColor: '#000'
|
||||
color: darkScheme.successColor,
|
||||
hoverColor: darkScheme.successHoverColor,
|
||||
activeColor: darkScheme.successActiveColor,
|
||||
focusColor: darkScheme.successHoverColor,
|
||||
textColor: darkScheme.baseBackgroundColor
|
||||
},
|
||||
warning: {
|
||||
color: '#f2c97d',
|
||||
hoverColor: '#f5d599',
|
||||
activeColor: '#e6c260',
|
||||
focusColor: '#f5d599',
|
||||
textColor: '#000'
|
||||
color: darkScheme.warningColor,
|
||||
hoverColor: darkScheme.warningHoverColor,
|
||||
activeColor: darkScheme.warningActiveColor,
|
||||
focusColor: darkScheme.warningHoverColor,
|
||||
textColor: darkScheme.baseBackgroundColor
|
||||
},
|
||||
error: {
|
||||
color: '#e88080',
|
||||
hoverColor: '#e98b8b',
|
||||
activeColor: '#e57272',
|
||||
focusColor: '#e98b8b',
|
||||
textColor: '#000'
|
||||
color: darkScheme.errorColor,
|
||||
hoverColor: darkScheme.errorHoverColor,
|
||||
activeColor: darkScheme.errorActiveColor,
|
||||
focusColor: darkScheme.errorHoverColor,
|
||||
textColor: darkScheme.baseBackgroundColor
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
export const itemSize = {
|
||||
tiny: 22,
|
||||
small: 28,
|
||||
medium: 34,
|
||||
large: 40,
|
||||
huge: 46
|
||||
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/_interoperation/common.scss
Normal file
9
src/_interoperation/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');
|
||||
}
|
||||
@ -5,6 +5,7 @@
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@ -5,6 +5,7 @@
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@ -1,12 +1,52 @@
|
||||
import { CSSRender } from 'css-render'
|
||||
import BEMPlugin from '@css-render/plugin-bem'
|
||||
|
||||
const prefix = '.n-'
|
||||
|
||||
const cssr = CSSRender()
|
||||
const plugin = BEMPlugin({
|
||||
blockPrefix: '.n-'
|
||||
blockPrefix: prefix
|
||||
})
|
||||
cssr.use(plugin)
|
||||
const { c } = cssr
|
||||
const { c, context } = cssr
|
||||
context.theme = null
|
||||
const { cB, cE, cM, cNotM } = plugin
|
||||
|
||||
export { c, cB, cE, cM, cNotM }
|
||||
const cTB = (selector, ...rest) => {
|
||||
return cB(selector, [
|
||||
({ context: ctx }) => {
|
||||
if (ctx.theme) {
|
||||
return c('&' + prefix + ctx.theme + '-theme', ...rest)
|
||||
}
|
||||
return c('&', ...rest)
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
function createThemedStyle (style, themes) {
|
||||
const fallbackPallete = themes.fallback
|
||||
return c([
|
||||
/** render a fallback style */
|
||||
c({
|
||||
before: ctx => {
|
||||
ctx.theme = null
|
||||
ctx.pallete = fallbackPallete
|
||||
},
|
||||
after: ctx => { ctx.theme = null }
|
||||
}, [
|
||||
style
|
||||
]),
|
||||
/** render themed styles */
|
||||
c({
|
||||
before: ctx => {
|
||||
ctx.theme = 'dark'
|
||||
ctx.pallete = themes['dark'] || fallbackPallete
|
||||
},
|
||||
after: ctx => { ctx.theme = null }
|
||||
}, [
|
||||
style
|
||||
])
|
||||
])
|
||||
}
|
||||
|
||||
export { c, cTB, cB, cE, cM, cNotM, createThemedStyle }
|
||||
|
||||
@ -78,167 +78,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// @mixin button-icon-mixin($color) {
|
||||
// @include e(icon) {
|
||||
// .#{block(icon)}, .#{block(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 + '-colored') {
|
||||
// @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;
|
||||
@ -335,12 +175,6 @@
|
||||
@include m(disabled) {
|
||||
opacity: $--button-disabled-opacity;
|
||||
}
|
||||
// @include button-type-mixin('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');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,204 +1,3 @@
|
||||
@mixin setup-dark-button {
|
||||
$--button-box-shadow-ripple-spread: 4px;
|
||||
$--button-ripple-box-shadow: (
|
||||
'default-start': (0 0 0 0 $--n-primary-color),
|
||||
'default-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-primary-color),
|
||||
'primary-start': (0 0 0 0 $--n-primary-color),
|
||||
'primary-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-primary-color),
|
||||
'success-start': (0 0 0 0 $--n-success-color),
|
||||
'success-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-success-color),
|
||||
'info-start': (0 0 0 0 $--n-info-color),
|
||||
'info-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-info-color),
|
||||
'warning-start': (0 0 0 0 $--n-warning-color),
|
||||
'warning-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-warning-color),
|
||||
'error-start': (0 0 0 0 $--n-error-color),
|
||||
'error-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-error-color)
|
||||
) !global;
|
||||
$--button-border-color: (
|
||||
'default': $--n-border-color,
|
||||
'primary': transparent,
|
||||
'success': transparent,
|
||||
'info': transparent,
|
||||
'warning': transparent,
|
||||
'error': transparent
|
||||
) !global;
|
||||
$--button-border-mask-box-shadow: (
|
||||
'default-hover': inset 0 0 0 1px $--n-primary-hover-color,
|
||||
'default-active': inset 0 0 0 1px $--n-primary-active-color,
|
||||
'default-focus': (inset 0 0 0 1px $--n-primary-color),
|
||||
'primary-hover': none,
|
||||
'primary-active': none,
|
||||
'primary-focus': none,
|
||||
'success-hover': none,
|
||||
'success-active': none,
|
||||
'success-focus': none,
|
||||
'info-hover': none,
|
||||
'info-active': none,
|
||||
'info-focus': none,
|
||||
'warning-hover': none,
|
||||
'warning-active': none,
|
||||
'warning-focus': none,
|
||||
'error-hover': none,
|
||||
'error-active': none,
|
||||
'error-focus': none
|
||||
) !global;
|
||||
$--button-ghost-typed-border-color: (
|
||||
'default': $--n-border-color,
|
||||
'primary': change-color($--n-primary-color, $alpha: $--n-tertiary-opacity),
|
||||
'success': change-color($--n-success-color, $alpha: $--n-tertiary-opacity),
|
||||
'info': change-color($--n-info-color, $alpha: $--n-tertiary-opacity),
|
||||
'warning': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity),
|
||||
'error': change-color($--n-error-color, $alpha: $--n-tertiary-opacity),
|
||||
) !global;
|
||||
$--button-ghost-typed-border-mask-box-shadow: (
|
||||
'default-hover': inset 0 0 0 1px $--n-primary-hover-color,
|
||||
'default-active': inset 0 0 0 1px $--n-primary-active-color,
|
||||
'default-focus': inset 0 0 0 1px $--n-primary-hover-color,
|
||||
'primary-hover': inset 0 0 0 1px $--n-primary-hover-color,
|
||||
'primary-active': inset 0 0 0 1px $--n-primary-active-color,
|
||||
'primary-focus': inset 0 0 0 1px $--n-primary-hover-color,
|
||||
'success-hover': inset 0 0 0 1px $--n-success-hover-color,
|
||||
'success-active': inset 0 0 0 1px $--n-success-active-color,
|
||||
'success-focus': inset 0 0 0 1px $--n-success-hover-color,
|
||||
'info-hover': inset 0 0 0 1px $--n-info-hover-color,
|
||||
'info-active': inset 0 0 0 1px $--n-info-active-color,
|
||||
'info-focus': inset 0 0 0 1px $--n-info-hover-color,
|
||||
'warning-hover': inset 0 0 0 1px $--n-warning-hover-color,
|
||||
'warning-active': inset 0 0 0 1px $--n-warning-active-color,
|
||||
'warning-focus': inset 0 0 0 1px $--n-warning-hover-color,
|
||||
'error-hover': inset 0 0 0 1px $--n-error-hover-color,
|
||||
'error-active': inset 0 0 0 1px $--n-error-active-color,
|
||||
'error-focus': inset 0 0 0 1px $--n-error-hover-color
|
||||
) !global;
|
||||
$--button-background-color: (
|
||||
'default': transparent,
|
||||
'default-focus': transparent,
|
||||
'default-hover': transparent,
|
||||
'default-active': transparent,
|
||||
'primary': $--n-primary-color,
|
||||
'primary-focus': $--n-primary-hover-color,
|
||||
'primary-hover': $--n-primary-hover-color,
|
||||
'primary-active': $--n-primary-active-color,
|
||||
'info': $--n-info-color,
|
||||
'info-focus': $--n-info-hover-color,
|
||||
'info-hover': $--n-info-hover-color,
|
||||
'info-active': $--n-info-active-color,
|
||||
'success': $--n-success-color,
|
||||
'success-focus': $--n-success-hover-color,
|
||||
'success-hover': $--n-success-hover-color,
|
||||
'success-active': $--n-success-active-color,
|
||||
'warning': $--n-warning-color,
|
||||
'warning-focus': $--n-warning-hover-color,
|
||||
'warning-hover': $--n-warning-hover-color,
|
||||
'warning-active': $--n-warning-active-color,
|
||||
'error': $--n-error-color,
|
||||
'error-focus': $--n-error-hover-color,
|
||||
'error-hover': $--n-error-hover-color,
|
||||
'error-active': $--n-error-active-color,
|
||||
) !global;
|
||||
$--button-ghost-typed-background-color: (
|
||||
'default': transparent,
|
||||
'default-focus': transparent,
|
||||
'default-hover': transparent,
|
||||
'default-active': transparent,
|
||||
'primary': transparent,
|
||||
'primary-focus': transparent,
|
||||
'primary-hover': transparent,
|
||||
'primary-active': transparent,
|
||||
'info': transparent,
|
||||
'info-focus': transparent,
|
||||
'info-hover': transparent,
|
||||
'info-active': transparent,
|
||||
'success': transparent,
|
||||
'success-focus': transparent,
|
||||
'success-hover': transparent,
|
||||
'success-active': transparent,
|
||||
'error': transparent,
|
||||
'error-focus': transparent,
|
||||
'error-hover': transparent,
|
||||
'error-active': transparent,
|
||||
'warning': transparent,
|
||||
'warning-focus': transparent,
|
||||
'warning-hover': transparent,
|
||||
'warning-active': transparent
|
||||
)!global;
|
||||
$--button-ghost-typed-text-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
'default-focus': $--n-primary-hover-color,
|
||||
'default-hover': $--n-primary-hover-color,
|
||||
'default-active': $--n-primary-active-color,
|
||||
'primary': $--n-primary-color,
|
||||
'primary-focus': $--n-primary-hover-color,
|
||||
'primary-hover': $--n-primary-hover-color,
|
||||
'primary-active': $--n-primary-active-color,
|
||||
'info': $--n-info-color,
|
||||
'info-focus': $--n-info-hover-color,
|
||||
'info-hover': $--n-info-hover-color,
|
||||
'info-active': $--n-info-active-color,
|
||||
'success': $--n-success-color,
|
||||
'success-focus': $--n-success-hover-color,
|
||||
'success-hover': $--n-success-hover-color,
|
||||
'success-active': $--n-success-active-color,
|
||||
'warning': $--n-warning-color,
|
||||
'warning-focus': $--n-warning-hover-color,
|
||||
'warning-hover': $--n-warning-hover-color,
|
||||
'warning-active': $--n-warning-active-color,
|
||||
'error': $--n-error-color,
|
||||
'error-focus': $--n-error-hover-color,
|
||||
'error-hover': $--n-error-hover-color,
|
||||
'error-active': $--n-error-active-color,
|
||||
) !global;
|
||||
$--button-text-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
'default-focus': $--n-primary-hover-color,
|
||||
'default-hover': $--n-primary-hover-color,
|
||||
'default-active': $--n-primary-active-color,
|
||||
'primary': $--n-base-background-color,
|
||||
'primary-focus': $--n-base-background-color,
|
||||
'primary-hover': $--n-base-background-color,
|
||||
'primary-active': $--n-base-background-color,
|
||||
'info': $--n-base-background-color,
|
||||
'info-focus': $--n-base-background-color,
|
||||
'info-hover': $--n-base-background-color,
|
||||
'info-active': $--n-base-background-color,
|
||||
'success': $--n-base-background-color,
|
||||
'success-focus':$--n-base-background-color,
|
||||
'success-hover': $--n-base-background-color,
|
||||
'success-active': $--n-base-background-color,
|
||||
'warning': $--n-base-background-color,
|
||||
'warning-focus': $--n-base-background-color,
|
||||
'warning-hover': $--n-base-background-color,
|
||||
'warning-active': $--n-base-background-color,
|
||||
'error': $--n-base-background-color,
|
||||
'error-focus': $--n-base-background-color,
|
||||
'error-hover': $--n-base-background-color,
|
||||
'error-active': $--n-base-background-color
|
||||
) !global;
|
||||
$--button-text-typed-text-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
'default-hover': $--n-primary-hover-color,
|
||||
'default-active': $--n-primary-active-color,
|
||||
'default-focus': $--n-primary-hover-color,
|
||||
'primary': $--n-primary-color,
|
||||
'primary-hover': $--n-primary-hover-color,
|
||||
'primary-active': $--n-primary-active-color,
|
||||
'primary-focus': $--n-primary-hover-color,
|
||||
'info': $--n-info-color,
|
||||
'info-hover': $--n-info-hover-color,
|
||||
'info-active': $--n-info-active-color,
|
||||
'info-focus': $--n-info-hover-color,
|
||||
'success': $--n-success-color,
|
||||
'success-hover': $--n-success-hover-color,
|
||||
'success-active': $--n-success-active-color,
|
||||
'success-focus': $--n-success-hover-color,
|
||||
'warning': $--n-warning-color,
|
||||
'warning-hover': $--n-warning-hover-color,
|
||||
'warning-active': $--n-warning-active-color,
|
||||
'warning-focus': $--n-warning-hover-color,
|
||||
'error': $--n-error-color,
|
||||
'error-hover': $--n-error-hover-color,
|
||||
'error-active': $--n-error-active-color,
|
||||
'error-focus': $--n-error-hover-color
|
||||
) !global;
|
||||
$--button-disabled-opacity: $--n-disabled-opacity !global;
|
||||
}
|
||||
@ -1,204 +1,3 @@
|
||||
@mixin setup-light-button {
|
||||
$--button-box-shadow-ripple-spread: 4px;
|
||||
$--button-ripple-box-shadow: (
|
||||
'default-start': (0 0 0 0 $--n-primary-color),
|
||||
'default-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-primary-color),
|
||||
'primary-start': (0 0 0 0 $--n-primary-color),
|
||||
'primary-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-primary-color),
|
||||
'success-start': (0 0 0 0 $--n-success-color),
|
||||
'success-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-success-color),
|
||||
'info-start': (0 0 0 0 $--n-info-color),
|
||||
'info-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-info-color),
|
||||
'warning-start': (0 0 0 0 $--n-warning-color),
|
||||
'warning-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-warning-color),
|
||||
'error-start': (0 0 0 0 $--n-error-color),
|
||||
'error-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-error-color)
|
||||
) !global;
|
||||
$--button-border-color: (
|
||||
'default': $--n-border-color,
|
||||
'primary': transparent,
|
||||
'success': transparent,
|
||||
'info': transparent,
|
||||
'warning': transparent,
|
||||
'error': transparent
|
||||
) !global;
|
||||
$--button-border-mask-box-shadow: (
|
||||
'default-hover': inset 0 0 0 1px $--n-primary-hover-color,
|
||||
'default-active': inset 0 0 0 1px $--n-primary-active-color,
|
||||
'default-focus': (inset 0 0 0 1px $--n-primary-color),
|
||||
'primary-hover': none,
|
||||
'primary-active': none,
|
||||
'primary-focus': none,
|
||||
'success-hover': none,
|
||||
'success-active': none,
|
||||
'success-focus': none,
|
||||
'info-hover': none,
|
||||
'info-active': none,
|
||||
'info-focus': none,
|
||||
'warning-hover': none,
|
||||
'warning-active': none,
|
||||
'warning-focus': none,
|
||||
'error-hover': none,
|
||||
'error-active': none,
|
||||
'error-focus': none
|
||||
) !global;
|
||||
$--button-ghost-typed-border-color: (
|
||||
'default': $--n-border-color,
|
||||
'primary': $--n-primary-color,
|
||||
'success': $--n-success-color,
|
||||
'info': $--n-info-color,
|
||||
'warning': $--n-warning-color,
|
||||
'error': $--n-error-color,
|
||||
) !global;
|
||||
$--button-ghost-typed-border-mask-box-shadow: (
|
||||
'default-hover': (inset 0 0 0 1px $--n-primary-hover-color),
|
||||
'default-active': (inset 0 0 0 1px $--n-primary-active-color),
|
||||
'default-focus': (inset 0 0 0 1px $--n-primary-hover-color),
|
||||
'primary-hover': inset 0 0 0 1px $--n-primary-hover-color,
|
||||
'primary-active': inset 0 0 0 1px $--n-primary-active-color,
|
||||
'primary-focus': inset 0 0 0 1px $--n-primary-hover-color,
|
||||
'success-hover': inset 0 0 0 1px $--n-success-hover-color,
|
||||
'success-active': inset 0 0 0 1px $--n-success-active-color,
|
||||
'success-focus': inset 0 0 0 1px $--n-success-hover-color,
|
||||
'info-hover': inset 0 0 0 1px $--n-info-hover-color,
|
||||
'info-active': inset 0 0 0 1px $--n-info-active-color,
|
||||
'info-focus': inset 0 0 0 1px $--n-info-hover-color,
|
||||
'warning-hover': inset 0 0 0 1px $--n-warning-hover-color,
|
||||
'warning-active': inset 0 0 0 1px $--n-warning-active-color,
|
||||
'warning-focus': inset 0 0 0 1px $--n-warning-hover-color,
|
||||
'error-hover': inset 0 0 0 1px $--n-error-hover-color,
|
||||
'error-active': inset 0 0 0 1px $--n-error-active-color,
|
||||
'error-focus': inset 0 0 0 1px $--n-error-hover-color
|
||||
) !global;
|
||||
$--button-background-color: (
|
||||
'default': $--n-base-background-color,
|
||||
'default-focus': $--n-base-background-color,
|
||||
'default-hover': $--n-base-background-color,
|
||||
'default-active': $--n-base-background-color,
|
||||
'primary': $--n-primary-color,
|
||||
'primary-focus': $--n-primary-hover-color,
|
||||
'primary-hover': $--n-primary-hover-color,
|
||||
'primary-active': $--n-primary-active-color,
|
||||
'info': $--n-info-color,
|
||||
'info-focus': $--n-info-hover-color,
|
||||
'info-hover': $--n-info-hover-color,
|
||||
'info-active': $--n-info-active-color,
|
||||
'success': $--n-success-color,
|
||||
'success-focus': $--n-success-hover-color,
|
||||
'success-hover': $--n-success-hover-color,
|
||||
'success-active': $--n-success-active-color,
|
||||
'warning': $--n-warning-color,
|
||||
'warning-focus': $--n-warning-hover-color,
|
||||
'warning-hover': $--n-warning-hover-color,
|
||||
'warning-active': $--n-warning-active-color,
|
||||
'error': $--n-error-color,
|
||||
'error-focus': $--n-error-hover-color,
|
||||
'error-hover': $--n-error-hover-color,
|
||||
'error-active': $--n-error-active-color,
|
||||
) !global;
|
||||
$--button-ghost-typed-background-color: (
|
||||
'default': transparent,
|
||||
'default-focus': transparent,
|
||||
'default-hover': transparent,
|
||||
'default-active': transparent,
|
||||
'primary': transparent,
|
||||
'primary-focus': transparent,
|
||||
'primary-hover': transparent,
|
||||
'primary-active': transparent,
|
||||
'info': transparent,
|
||||
'info-focus': transparent,
|
||||
'info-hover': transparent,
|
||||
'info-active': transparent,
|
||||
'success': transparent,
|
||||
'success-focus': transparent,
|
||||
'success-hover': transparent,
|
||||
'success-active': transparent,
|
||||
'error': transparent,
|
||||
'error-focus': transparent,
|
||||
'error-hover': transparent,
|
||||
'error-active': transparent,
|
||||
'warning': transparent,
|
||||
'warning-focus': transparent,
|
||||
'warning-hover': transparent,
|
||||
'warning-active': transparent
|
||||
)!global;
|
||||
$--button-ghost-typed-text-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
'default-focus': $--n-primary-hover-color,
|
||||
'default-hover': $--n-primary-hover-color,
|
||||
'default-active': $--n-primary-active-color,
|
||||
'primary': $--n-primary-color,
|
||||
'primary-focus': $--n-primary-hover-color,
|
||||
'primary-hover': $--n-primary-hover-color,
|
||||
'primary-active': $--n-primary-active-color,
|
||||
'info': $--n-info-color,
|
||||
'info-focus': $--n-info-hover-color,
|
||||
'info-hover': $--n-info-hover-color,
|
||||
'info-active': $--n-info-active-color,
|
||||
'success': $--n-success-color,
|
||||
'success-focus': $--n-success-hover-color,
|
||||
'success-hover': $--n-success-hover-color,
|
||||
'success-active': $--n-success-active-color,
|
||||
'warning': $--n-warning-color,
|
||||
'warning-focus': $--n-warning-hover-color,
|
||||
'warning-hover': $--n-warning-hover-color,
|
||||
'warning-active': $--n-warning-active-color,
|
||||
'error': $--n-error-color,
|
||||
'error-focus': $--n-error-hover-color,
|
||||
'error-hover': $--n-error-hover-color,
|
||||
'error-active': $--n-error-active-color,
|
||||
) !global;
|
||||
$--button-text-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
'default-focus': $--n-primary-hover-color,
|
||||
'default-hover': $--n-primary-hover-color,
|
||||
'default-active': $--n-primary-active-color,
|
||||
'primary': $--n-base-background-color,
|
||||
'primary-focus': $--n-base-background-color,
|
||||
'primary-hover': $--n-base-background-color,
|
||||
'primary-active': $--n-base-background-color,
|
||||
'info': $--n-base-background-color,
|
||||
'info-focus': $--n-base-background-color,
|
||||
'info-hover': $--n-base-background-color,
|
||||
'info-active': $--n-base-background-color,
|
||||
'success': $--n-base-background-color,
|
||||
'success-focus':$--n-base-background-color,
|
||||
'success-hover': $--n-base-background-color,
|
||||
'success-active': $--n-base-background-color,
|
||||
'warning': $--n-base-background-color,
|
||||
'warning-focus': $--n-base-background-color,
|
||||
'warning-hover': $--n-base-background-color,
|
||||
'warning-active': $--n-base-background-color,
|
||||
'error': $--n-base-background-color,
|
||||
'error-focus': $--n-base-background-color,
|
||||
'error-hover': $--n-base-background-color,
|
||||
'error-active': $--n-base-background-color
|
||||
) !global;
|
||||
$--button-text-typed-text-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
'default-hover': $--n-primary-hover-color,
|
||||
'default-active': $--n-primary-active-color,
|
||||
'default-focus': $--n-primary-hover-color,
|
||||
'primary': $--n-primary-color,
|
||||
'primary-hover': $--n-primary-hover-color,
|
||||
'primary-active': $--n-primary-active-color,
|
||||
'primary-focus': $--n-primary-hover-color,
|
||||
'info': $--n-info-color,
|
||||
'info-hover': $--n-info-hover-color,
|
||||
'info-active': $--n-info-active-color,
|
||||
'info-focus': $--n-info-hover-color,
|
||||
'success': $--n-success-color,
|
||||
'success-hover': $--n-success-hover-color,
|
||||
'success-active': $--n-success-active-color,
|
||||
'success-focus': $--n-success-hover-color,
|
||||
'warning': $--n-warning-color,
|
||||
'warning-hover': $--n-warning-hover-color,
|
||||
'warning-active': $--n-warning-active-color,
|
||||
'warning-focus': $--n-warning-hover-color,
|
||||
'error': $--n-error-color,
|
||||
'error-hover': $--n-error-hover-color,
|
||||
'error-active': $--n-error-active-color,
|
||||
'error-focus': $--n-error-hover-color,
|
||||
) !global;
|
||||
$--button-disabled-opacity: $--n-disabled-opacity !global;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user