mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-01 13:36:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: clean some scss files

Browse Source
This commit is contained in:
07akioni 2020-02-11 14:44:29 +08:00
parent 6d31f6402d
commit 01b1947d45
78 changed files with 454 additions and 758 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
demo/documentation/components/spin/enUS/wrap.md
View File

@ -4,7 +4,7 @@ You can wrap a component inside spin. To match regular components's size, spin a
<div
>
<n-spin
style="display:inline-block"
style="display: inline-block; margin: 0 8px 12px 0;"
size="in-small"
:spinning="spinning"
>
@ -13,7 +13,7 @@ You can wrap a component inside spin. To match regular components's size, spin a
</n-button>
</n-spin>
<n-spin
style="display:inline-block"
style="display: inline-block; margin: 0 8px 12px 0;"
size="in-medium"
:spinning="spinning"
>
@ -22,7 +22,7 @@ You can wrap a component inside spin. To match regular components's size, spin a
</n-button>
</n-spin>
<n-spin
style="display:inline-block"
style="display: inline-block; margin: 0 8px 12px 0;"
size="in-large"
:spinning="spinning"
>
@ -53,10 +53,6 @@ export default {
}
```
```css
.n-button {
margin: 0 8px 12px 0;
}
.n-alert {
margin: 0 0 12px 0;
}

10
demo/documentation/components/spin/zhCN/wrap.md
View File

@ -4,7 +4,7 @@
<div
>
<n-spin
style="display:inline-block"
style="display: inline-block; margin: 0 8px 12px 0;"
size="in-small"
:spinning="spinning"
>
@ -13,7 +13,7 @@
</n-button>
</n-spin>
<n-spin
style="display:inline-block"
style="display: inline-block; margin: 0 8px 12px 0;"
size="in-medium"
:spinning="spinning"
>
@ -22,7 +22,7 @@
</n-button>
</n-spin>
<n-spin
style="display:inline-block"
style="display: inline-block; margin: 0 8px 12px 0;"
size="in-large"
:spinning="spinning"
>
@ -53,10 +53,6 @@ export default {
}
```
```css
.n-button {
margin: 0 8px 12px 0;
}
.n-alert {
margin: 0 0 12px 0;
}

2
packages/base/CancelMark/src/main.vue
View File

@ -1,5 +1,5 @@
<template>
<transition name="n-cancel-mark--transition">
<transition name="n-cancel-mark-transition">
<div
v-if="loading || (show && (clearable || arrow))"
class="n-cancel-mark"

2
packages/base/MenuMask/src/main.vue
View File

@ -1,6 +1,6 @@
<template>
<transition
name="n-base-menu-mask--transition"
name="n-base-menu-mask-transition"
>
<div
v-if="active"

2
packages/common/BackTop/src/main.vue
View File

@ -1,6 +1,6 @@
<template>
<n-base-portal ref="portal" :on-mounted="init">
<transition name="n-back-top--transition">
<transition name="n-back-top-transition">
<div
v-if="show"
:class="{

2
packages/common/Badge/src/main.vue
View File

@ -11,7 +11,7 @@
>
<slot />
<transition
name="n-badge--transition"
name="n-badge-transition"
@after-enter="handleAfterEnter"
@after-leave="handleAfterLeave"
>

6
packages/common/Cascader/src/CascaderMenu.vue
View File

@ -3,7 +3,7 @@
class="n-positioning-container"
>
<div ref="content" class="n-positioning-content">
<transition name="n-cascader-menu--transition">
<transition name="n-cascader-menu-transition">
<div
v-if="active"
class="n-cascader-menu"
@ -296,7 +296,9 @@ export default {
if (this.type === 'multiple') {
const newValues = []
if (!option.determined) {
this.$refs.mask.showOnce(`Please load all ${option.label}'s descedants before checking it.`)
this.$refs.mask.showOnce(
this.NCascader.localeNamespace.loadingRequiredMessage(option.label)
)
return
}
const traverseMultiple = item => {

2
packages/common/Cascader/src/CascaderOption.vue
View File

@ -51,7 +51,7 @@
class="n-cascader-option__label"
>{{ label }}
</span>
<transition name="n-fade-in--transition">
<transition name="n-cascader-option-loading-transition">
<div
v-if="loading"
class="n-cascader-option__loading"

2
packages/common/Cascader/src/CascaderSelectMenu.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="n-positioning-container">
<div ref="content" class="n-positioning-content">
<transition name="n-cascader-menu--transition">
<transition name="n-cascader-menu-transition">
<n-base-select-menu
v-if="active"
ref="contentInner"

2
packages/common/Cascader/src/CascaderSubmenu.vue
View File

@ -4,7 +4,7 @@
@mouseleave="handleMouseLeave"
>
<n-scrollbar ref="scrollbar">
<transition name="n-cascader-light-bar--transition">
<transition name="n-cascader-light-bar-transition">
<div
v-if="showLightBar"
class="n-cascader-light-bar-container"

2
packages/common/DatePicker/src/panel/date.vue
View File

@ -1,5 +1,5 @@
<template>
<transition name="n-date-panel--transition">
<transition name="n-date-panel-transition">
<div
v-show="active"
ref="self"

2
packages/common/DatePicker/src/panel/daterange.vue
View File

@ -1,5 +1,5 @@
<template>
<transition name="n-date-panel--transition">
<transition name="n-date-panel-transition">
<div
v-show="active"
ref="self"

2
packages/common/DatePicker/src/panel/datetime.vue
View File

@ -1,5 +1,5 @@
<template>
<transition name="n-date-panel--transition">
<transition name="n-date-panel-transition">
<div
v-show="active"
ref="self"

2
packages/common/DatePicker/src/panel/datetimerange.vue
View File

@ -1,5 +1,5 @@
<template>
<transition name="n-date-panel--transition">
<transition name="n-date-panel-transition">
<div
v-show="active"
ref="self"

2
packages/common/Drawer/src/main.vue
View File

@ -4,7 +4,7 @@
<div
class="n-drawer-container"
>
<transition name="n-fade-in--transition">
<transition name="n-drawer-overlay-transition">
<div
v-if="active"
class="n-drawer-overlay"

2
packages/common/Dropdown/src/DropdownSubmenu.vue
View File

@ -191,7 +191,7 @@ export default {
]),
h('transition', {
props: {
name: 'n-fade-in-scale-up--transition'
name: 'n-dropdown-menu-transition'
}
}, [
this.active ? h(NDropdownMenu, {

2
packages/common/Form/src/FormItem.vue
View File

@ -33,7 +33,7 @@
</div>
<div v-if="path" class="n-form-item-feedback-wrapper">
<transition
name="n-fade-down"
name="n-form-item-feedback-transition"
@before-enter="handleBeforeEnter"
@before-leave="handleBeforeLeave"
@after-leave="handleAfterLeave"

2
packages/common/Input/src/Input.vue
View File

@ -101,7 +101,7 @@
<slot name="prefix" />
</slot>
</div>
<transition name="n-button-suffix--transition">
<transition name="n-button-suffix-transition">
<div
class="n-input__suffix"
>

2
packages/common/LoadingBar/src/LoadingBar.vue
View File

@ -1,6 +1,6 @@
<template>
<transition
name="n-fade-in--transition"
name="n-loading-bar-container-transition"
appear
@after-enter="handleAfterEnter"
@after-leave="handleAfterLeave"

4
packages/common/Scrollbar/src/main.vue
View File

@ -36,7 +36,7 @@
class="n-scrollbar-rail n-scrollbar-rail--vertical"
:style="{...horizontalRailStyle, width: scrollbarSize }"
>
<transition name="n-scrollbar--transition">
<transition name="n-scrollbar-transition">
<div
v-if="needVerticalScrollbar && showVeriticalScrollbar"
class="n-scrollbar-rail__scrollbar"
@ -58,7 +58,7 @@
class="n-scrollbar-rail n-scrollbar-rail--horizontal"
:style="{ ...verticalRailStyle, height: scrollbarSize }"
>
<transition name="n-scrollbar--transition">
<transition name="n-scrollbar-transition">
<div
v-if="needHorizontalScrollbar && showHorizontalScrollbar"
class="n-scrollbar-rail__scrollbar"

2
packages/common/Select/src/Select.vue
View File

@ -51,7 +51,7 @@
class="n-positioning-content"
>
<transition
name="n-select-menu--transition"
name="n-select-menu-transition"
@after-leave="handleMenuAfterLeave"
>
<n-base-select-menu

2
packages/common/Slider/src/main.vue
View File

@ -77,7 +77,7 @@
ref="content"
class="n-positioning-content"
>
<transition name="n-fade-in-scale-up--transition">
<transition name="n-slider-indicator-transition">
<div
v-if="showTooltip"
class="n-slider-handle-indicator"

2
packages/common/Spin/src/main.vue
View File

@ -11,7 +11,7 @@
>
<slot />
</div>
<transition name="n-spin--transition">
<transition name="n-spin-transition">
<n-base-loading
v-if="spinning"
:class="{

2
packages/common/TimePicker/src/main.vue
View File

@ -31,7 +31,7 @@
ref="content"
class="n-positioning-content"
>
<transition name="n-time-picker--transition">
<transition name="n-time-picker-transition">
<div
v-if="active"
ref="panel"

3
packages/locale/enUS.js
View File

@ -4,7 +4,8 @@ export default {
negativeText: 'Cancel'
},
Cascader: {
placeholder: 'Please Select'
placeholder: 'Please Select',
loadingRequiredMessage: label => `Please load all ${label}'s descedants before checking it.`
},
DatePicker: {
Jan: 'Jan',

3
packages/locale/zhCN.js
View File

@ -4,7 +4,8 @@ export default {
negativeText: '取消'
},
Cascader: {
placeholder: '请选择'
placeholder: '请选择',
loadingRequiredMessage: label => `加载全部 ${label} 的子节点后才可选中`
},
DatePicker: {
Jan: '一月',

6
styles/Alert.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@mixin alert-type-mixin ($type) {
@include m($type + '-type') {
@ -43,14 +43,14 @@
transition:
transform $duration $--n-ease-in-out-cubic-bezier,
max-height $duration $--n-ease-in-out-cubic-bezier,
opacity $duration $fast-in-cubic-bezier,
opacity $duration $--n-ease-out-cubic-bezier,
margin-top $duration $--n-ease-in-out-cubic-bezier,
margin-bottom $duration $--n-ease-in-out-cubic-bezier;
}
&.n-fade-in-height-expand-enter-active {
overflow: hidden;
transition: max-height $duration $--n-ease-in-out-cubic-bezier,
opacity $duration $slow-out-cubic-bezier,
opacity $duration $--n-ease-in-cubic-bezier,
margin-top $duration $--n-ease-in-out-cubic-bezier,
margin-bottom $duration $--n-ease-in-out-cubic-bezier;
}

2
styles/BackTop.scss
View File

@ -2,7 +2,7 @@
@include themes-mixin {
@include b(back-top) {
@include fade-in-transition(back-top);
@include fade-in-scale-up-transition(back-top);
@include once {
position: fixed;
right: 40px;

4
styles/Badge.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@mixin badge-type-mixin ($type) {
@include m($type + '-type') {
@ -13,7 +13,7 @@
@include b(badge-sup) {
&::before {
animation-duration: 2s, 2s;
animation-timing-function: $fast-in-cubic-bezier, $--n-ease-in-out-cubic-bezier;
animation-timing-function: $--n-ease-out-cubic-bezier, $--n-ease-in-out-cubic-bezier;
animation-iteration-count: infinite, infinite;
}
}

3
styles/BaseCancelMark.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin {
@include b(cancel-mark) {
@ -55,7 +55,6 @@
}
@include b(cancel-mark-arrow) {
@include once {
// @include fade-in-transition(cancel-mark);
@include icon-switch-transition();
transform: $--n-transform-debounce-scale;
position: absolute;

4
styles/BaseLightBar.scss
View File

@ -18,10 +18,10 @@
opacity: 0;
}
&.#{block()}-transition-enter-active {
transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .15s $fast-in-cubic-bezier, top .3s $--n-ease-in-out-cubic-bezier!important;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .15s $--n-ease-out-cubic-bezier, top .3s $--n-ease-in-out-cubic-bezier!important;
}
&.#{block()}-transition-leave-active {
transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .15s $slow-out-cubic-bezier, top .3s $--n-ease-in-out-cubic-bezier!important;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .15s $--n-ease-in-cubic-bezier, top .3s $--n-ease-in-out-cubic-bezier!important;
}
}
background-color: $--base-select-menu-light-bar-background-color;

2
styles/BaseLoading.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
$--base-loading-stroke-dashoffset: 500;

2
styles/BasePicker.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@mixin base-picker-size-mixin ($size) {
$base-picker-tag-margin: 3px;

2
styles/BaseSelectMenu.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@mixin base-select-size-mixin ($size) {
@include m($size + '-size') {

10
styles/BaseSlotMachine.scss
View File

@ -1,4 +1,4 @@
@import './themes/vars.scss';
@import './mixins/mixins.scss';
@keyframes n-badge-number-fade-up-in {
@ -69,11 +69,11 @@
transform: translateY(100%);
}
@include m(down-scroll) {
animation: n-badge-number-fade-down-out .2s $fast-in-cubic-bezier;
animation: n-badge-number-fade-down-out .2s $--n-ease-out-cubic-bezier;
animation-iteration-count: 1
}
@include m(up-scroll) {
animation: n-badge-number-fade-up-out .2s $fast-in-cubic-bezier;
animation: n-badge-number-fade-up-out .2s $--n-ease-out-cubic-bezier;
animation-iteration-count: 1
}
}
@ -87,11 +87,11 @@
opacity: 1;
transform: translateY(0);
@include m(down-scroll) {
animation: n-badge-number-fade-down-in .2s $fast-in-cubic-bezier;
animation: n-badge-number-fade-down-in .2s $--n-ease-out-cubic-bezier;
animation-iteration-count: 1
}
@include m(up-scroll) {
animation: n-badge-number-fade-up-in .2s $fast-in-cubic-bezier;
animation: n-badge-number-fade-up-in .2s $--n-ease-out-cubic-bezier;
animation-iteration-count: 1
}
@include e(inner) {

60
styles/Button.scss
View File

@ -1,20 +1,20 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@mixin button-size-mixin($size) {
@include m($size + "-size") {
$height: map-get($map: $button-height, $key: $size);
$font-size: map-get($map: $button-font-size, $key: $size);
border-radius: $button-border-radius;
$height: map-get($map: $--button-height, $key: $size);
$font-size: map-get($map: $--button-font-size, $key: $size);
border-radius: $--button-border-radius;
font-size: $font-size;
@include not-m(text) {
height: $height;
line-height: $height;
padding: map-get($map: $button-padding, $key: $size);
padding: map-get($map: $--button-padding, $key: $size);
}
white-space: nowrap;
@include m(round) {
padding: map-get($map: $round-button-padding, $key: $size);
padding: map-get($map: $--round-button-padding, $key: $size);
border-radius: $height / 2;
}
@include m(circle) {
@ -29,7 +29,7 @@
@include e(icon) {
display: inline-block;
position: relative;
$icon-size: map-get($map: $button-icon-size, $key: $size);
$icon-size: map-get($map: $--button-icon-size, $key: $size);
line-height: $height;
height: $height;
width: $icon-size;
@ -78,9 +78,9 @@
@mixin button-type-mixin ($type) {
@include m($type + "-type") {
color: map-get($map: $button-color, $key: $type);
background-color: map-get($map: $button-background-color, $key: $type);
box-shadow: map-get($map: $button-box-shadow, $key: $type);
color: map-get($map: $--button-color, $key: $type);
background-color: map-get($map: $--button-background-color, $key: $type);
box-shadow: map-get($map: $--button-box-shadow, $key: $type);
@include m(text) {
box-shadow: none;
background-color: transparent;
@ -115,51 +115,51 @@
}
}
@include m(ghost) {
background-color: map-get($map: $ghost-button-background-color, $key: $type);
color: map-get($map: $ghost-button-color, $key: $type);
box-shadow: map-get($map: $button-box-shadow, $key: $type + '-ghost');
background-color: map-get($map: $--ghost-button-background-color, $key: $type);
color: map-get($map: $--ghost-button-color, $key: $type);
box-shadow: map-get($map: $--button-box-shadow, $key: $type + '-ghost');
@include not-m(disabled) {
@include m(enter-pressed) {
background-color: map-get($map: $ghost-button-background-color, $key: $type + '-active');
background-color: map-get($map: $--ghost-button-background-color, $key: $type + '-active');
}
&:not(:active):focus {
@include not-m(enter-pressed) {
background-color: map-get($map: $ghost-button-background-color, $key: $type + '-hover');
background-color: map-get($map: $--ghost-button-background-color, $key: $type + '-hover');
}
}
@include not-m(enter-pressed) {
&:hover {
background-color: map-get($map: $ghost-button-background-color, $key: $type + '-hover');
background-color: map-get($map: $--ghost-button-background-color, $key: $type + '-hover');
}
&:active {
background-color: map-get($map: $ghost-button-background-color, $key: $type + '-active');
background-color: map-get($map: $--ghost-button-background-color, $key: $type + '-active');
}
}
}
@include e(icon) {
@include b(icon) {
fill: map-get($map: $ghost-button-color, $key: $type) !important;
stroke: map-get($map: $ghost-button-color, $key: $type) !important;
fill: map-get($map: $--ghost-button-color, $key: $type) !important;
stroke: map-get($map: $--ghost-button-color, $key: $type) !important;
}
circle {
stroke: map-get($map: $ghost-button-color, $key: $type) !important;
stroke: map-get($map: $--ghost-button-color, $key: $type) !important;
}
}
}
@if $type == 'default' {
@include e(icon) {
@include b(icon) {
fill: map-get($map: $ghost-button-color, $key: $type) !important;
stroke: map-get($map: $ghost-button-color, $key: $type) !important;
fill: map-get($map: $--ghost-button-color, $key: $type) !important;
stroke: map-get($map: $--ghost-button-color, $key: $type) !important;
}
circle {
stroke: map-get($map: $ghost-button-color, $key: $type) !important;
stroke: map-get($map: $--ghost-button-color, $key: $type) !important;
}
}
}
@include not-m(disabled) {
@include m(enter-pressed) {
background-color: map-get($map: $button-background-color, $key: $type + '-active');
background-color: map-get($map: $--button-background-color, $key: $type + '-active');
}
@include m(rippling) {
&::after {
@ -171,15 +171,15 @@
}
&:not(:active):focus {
@include not-m(enter-pressed) {
background-color: map-get($map: $button-background-color, $key: $type + '-hover');
background-color: map-get($map: $--button-background-color, $key: $type + '-hover');
}
}
@include not-m(enter-pressed) {
&:hover {
background-color: map-get($map: $button-background-color, $key: $type + '-hover');
background-color: map-get($map: $--button-background-color, $key: $type + '-hover');
}
&:active {
background-color: map-get($map: $button-background-color, $key: $type + '-active');
background-color: map-get($map: $--button-background-color, $key: $type + '-active');
}
}
}
@ -190,10 +190,10 @@
@mixin ripple-mixin($type) {
@keyframes #{$theme}-#{$type}-button-ripple--spread {
from {
box-shadow: map-get($map: $button-box-shadow, $key: $type + '-focus-ripple-start');
box-shadow: map-get($map: $--button-box-shadow, $key: $type + '-focus-ripple-start');
}
to {
box-shadow: map-get($map: $button-box-shadow, $key: $type + '-focus-ripple-end');
box-shadow: map-get($map: $--button-box-shadow, $key: $type + '-focus-ripple-end');
}
}
@keyframes #{$theme}-#{$type}-button-ripple--opacity {
@ -218,7 +218,7 @@
outline: none;
position: relative;
border: none;
font-family: $button-font-family;
font-family: $--button-font-family;
display: inline-block;
align-items: center;
justify-content: center;

4
styles/Cascader.scss
View File

@ -1,6 +1,6 @@
/* stylelint-disable */
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin {
@ -102,7 +102,7 @@
display: block;
}
@include e(loading) {
@include fade-in-transition;
@include fade-in-scale-up-transition(cascader-option-loading, $original-transform: translateY(-50%));
position: absolute;
width: 14px;
height: 14px;

2
styles/Confirm.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin {
@include b(confirm) {

4
styles/DataTable.scss
View File

@ -1,10 +1,10 @@
@import "./mixins/mixins.scss";
@import "./themes/vars.scss";
@include themes-mixin {
@include b(data-table) {
width: 100%;
font-size: $table-font-size;
font-size: 14px;
padding-bottom: 8px;
@include b(data-table-tables-wrapper) {
position: relative;

2
styles/DatePicker.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin {
@include once {

4
styles/Drawer.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin {
@include b(drawer) {
@ -37,7 +37,7 @@
}
@include b(drawer-overlay) {
@include fade-in-transition(fade-in, $enter-duration: .3s, $leave-duration: .3s);
@include fade-in-transition(drawer-overlay, $enter-duration: .3s, $leave-duration: .3s);
background-color: rgba(0, 0, 0, .3);
position: absolute;
left: 0;

4
styles/Dropdown.scss
View File

@ -1,5 +1,5 @@
@import "./mixins/mixins.scss";
@import "./themes/vars.scss";
@include themes-mixin {
@include b(popover-content) {
@ -80,7 +80,7 @@
margin: 2px 0;
}
@include b(dropdown-submenu) {
@include fade-in-scale-up-transition();
@include fade-in-scale-up-transition(dropdown-menu);
margin-top: 0;
position: absolute !important;
margin-left: 6px;

4
styles/Form.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include b(form) {
width: 100%;
@ -123,7 +123,7 @@
line-height: 1.25;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include b(form-item-feedback) {
@include fade-down-transition($from-offset: -3px);
@include fade-down-transition($name: form-item-feedback, $from-offset: -3px);
}
}
color: $--error-6;

2
styles/GradientText.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@mixin gradient-text-type-mixin ($type) {
@include m($type + '-type') {

2
styles/Input.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@mixin input-group-label-size-mixin ($size) {
$font-size: map-get($map: $--n-font-size, $key: $size);

2
styles/InputNumber.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@mixin input-number-size-mixin ($size) {
@include m($size + '-size') {

4
styles/LoadingBar.scss
View File

@ -1,10 +1,10 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin {
@include b(loading-bar-container) {
@include once {
@include fade-in-transition(fade-in, .3s, .8s);
@include fade-in-transition(loading-bar-container, .3s, .8s);
z-index: 5800;
position: fixed;
top: 0;

2
styles/Menu.scss
View File

@ -1,6 +1,6 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin() {
@include b(menu) {

2
styles/Notification.scss
View File

@ -1,6 +1,6 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include b(notification-container) {
z-index: 4000;

2
styles/Pagination.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin {
@include b(pagination) {

2
styles/Popconfirm.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include b(popconfirm-content) {
padding: 14px 16px;

6
styles/Popover.scss
View File

@ -1,5 +1,5 @@
@import "./mixins/mixins.scss";
@import "./themes/vars.scss";
@mixin popover-content-transition {
&#{&}-transition-enter-to, &#{&}-transition-leave {
@ -11,10 +11,10 @@
transform: scale(.85);
}
&#{&}-transition-enter-active {
transition: opacity .15s $fast-in-cubic-bezier, transform .15s $fast-in-cubic-bezier;
transition: opacity .15s $--n-ease-out-cubic-bezier, transform .15s $--n-ease-out-cubic-bezier;
}
&#{&}-transition-leave-active {
transition: opacity .15s $slow-out-cubic-bezier, transform .15s $slow-out-cubic-bezier;
transition: opacity .15s $--n-ease-in-cubic-bezier, transform .15s $--n-ease-in-cubic-bezier;
}
}

2
styles/Popselect.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include b(popselect) {
@include b(popover-content) {

4
styles/Progress.scss
View File

@ -1,5 +1,5 @@
@import "./mixins/mixins.scss";
@import "./themes/vars.scss";
@mixin progress-animation-mixin ($type) {
@keyframes progress-#{$type}-type-ripple {
@ -56,7 +56,7 @@
&::after {
content: '';
background-image: $--progress-line-processing-background-image;
animation: progress-#{$type}-type-ripple 3s $fast-in-cubic-bezier infinite;
animation: progress-#{$type}-type-ripple 3s $--n-ease-out-cubic-bezier infinite;
}
}
}

6
styles/Radio.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@mixin radio-group-size-mixin ($size) {
@include m($size + '-size') {
@ -46,14 +46,14 @@
transform: scale(.8);
background-color: map-get($--radio-control-background-color, 'active');
opacity: 0;
transition: opacity .3s $slow-out-cubic-bezier, transform .3s $slow-out-cubic-bezier;
transition: opacity .3s $--n-ease-in-cubic-bezier, transform .3s $--n-ease-in-cubic-bezier;
}
@include m(checked) {
box-shadow: map-get($--radio-box-shadow, 'active');
&::before {
opacity: 1;
transform: scale(1);
transition: opacity .3s $fast-in-cubic-bezier, transform .3s $fast-in-cubic-bezier;
transition: opacity .3s $--n-ease-out-cubic-bezier, transform .3s $--n-ease-out-cubic-bezier;
}
}
}

2
styles/Scrollbar.scss
View File

@ -1,6 +1,6 @@
/* stylelint-disable */
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin {
@include b(scrollbar) {

2
styles/Select.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin {
@include once {

4
styles/Slider.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin {
@include b(slider) {
@ -127,7 +127,7 @@
}
@include b(slider-handle-indicator) {
@include once {
@include fade-in-scale-up-transition();
@include fade-in-scale-up-transition(slider-indicator);
transform: $--n-transform-debounce-scale;
font-size: 14px;
padding: 8px 12px;

4
styles/Spin.scss
View File

@ -1,11 +1,10 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin {
@include once {
@include b(spin) {
display: inline-block;
@include fade-in-transition(spin);
@include m(in-small-size) {
width: 14px;
height: 14px;
@ -34,6 +33,7 @@
@include b(spin-container) {
position: relative;
@include b(spin) {
@include fade-in-transition(spin);
position: absolute;
top: 50%;
left: 50%;

2
styles/Steps.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
$--steps-header-font-size: (
'small': 14px,

2
styles/Switch.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin{
@include b(switch) {

2
styles/Table.scss
View File

@ -1,5 +1,5 @@
@import "./mixins/mixins.scss";
@import "./themes/vars.scss";
@include themes-mixin {

2
styles/Tabs.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
$--tabs-tab-font-size: (
'small': 13px,

2
styles/Tag.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@mixin tag-size-mixin($size) {
$height: map-get($--n-height, $size) - 6px;

1
styles/Time.scss
View File

@ -1,2 +1 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';

2
styles/TimePicker.scss
View File

@ -1,5 +1,5 @@
@import "./mixins/mixins.scss";
@import "./themes/vars.scss";
@include themes-mixin {
@include once {

2
styles/Timeline.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
$--timeline-header-font-size: (
'medium': 14px,

2
styles/Tooltip.scss
View File

@ -1,5 +1,5 @@
@import "./mixins/mixins.scss";
@import "./themes/vars.scss";
@include themes-mixin {
.#{block(tooltip)} {

10
styles/Transfer.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@keyframes transfer-height-collapse {
0% {
@ -215,14 +215,14 @@
transform: translateX(150%);
animation-name: transfer-height-expand, transfer-slide-in-from-right;
animation-duration: .25s, .25s;
animation-timing-function: $--n-ease-in-out-cubic-bezier, $fast-in-cubic-bezier;
animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-out-cubic-bezier;
animation-delay: 0s, .25s;
}
@include m(leave) {
transform: translateX(-150%);
animation-name: transfer-height-collapse, transfer-slide-out-to-right;
animation-duration: .25s, .25s;
animation-timing-function: $--n-ease-in-out-cubic-bezier, $slow-out-cubic-bezier;
animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-in-cubic-bezier;
animation-delay: .25s, 0s;
}
}
@ -232,14 +232,14 @@
transform: translateX(-150%);
animation-name: transfer-height-expand, transfer-slide-in-from-left;
animation-duration: .25s, .25s;
animation-timing-function: $--n-ease-in-out-cubic-bezier, $fast-in-cubic-bezier;
animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-out-cubic-bezier;
animation-delay: 0s, .25s;
}
@include m(leave) {
transform: translateX(150%);
animation-name: transfer-height-collapse, transfer-slide-out-to-left;
animation-duration: .25s, .25s;
animation-timing-function: $--n-ease-in-out-cubic-bezier, $slow-out-cubic-bezier;
animation-timing-function: $--n-ease-in-out-cubic-bezier, $--n-ease-in-cubic-bezier;
animation-delay: .25s, 0s;
}
}

2
styles/Tree.scss
View File

@ -1,5 +1,5 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include themes-mixin {
@include b(tree) {

2
styles/base.scss
View File

@ -1,7 +1,7 @@
@import './fonts/Lato.scss';
@import './fonts/FiraCode.scss';
@import './fonts/FiraSans.scss';
@import './themes/commonVars.scss';
@import './themes/common.scss';
@import './themes/light/index.scss';
@import './Detachable.scss';

1
styles/mixins/color.scss
View File

@ -1 +0,0 @@
//

4
styles/mixins/mixins.scss
View File

@ -1,8 +1,8 @@
@import "config.scss";
@import "../themes/vars.scss";
@import "../themes/dark/index.scss";
@import "../themes/light/index.scss";
@import "../themes/commonVars.scss";
@import "../themes/common.scss";
@import "../themes/transition.scss";
/**
* BEM related mixins

8
styles/themes/commonVars.scss → styles/themes/common.scss
View File

@ -21,6 +21,8 @@ $--n-font-size: (
"huge": 16px
);
$--button-border-radius: 6px;
$--base-picker-border-radius: 6px;
$--base-select-menu-box-shadow: none;
@ -40,3 +42,9 @@ $--slider-dot-size: 8px;
$--slider-handle-size: 14px;
$--icon-transition: (fill .3s $--n-ease-in-out-cubic-bezier, stroke .3s $--n-ease-in-out-cubic-bezier);
$--n-transform-debounce-scale: scale(0.99999);
$--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
$--n-ease-out-cubic-bezier: cubic-bezier(0, 0, .2, 1);
$--n-ease-in-cubic-bezier: cubic-bezier(.4, 0, 1, 1);

71
styles/themes/dark/components/Button.scss
View File

@ -1,37 +1,36 @@
@mixin setup-dark-button {
$button-font-family: $--n-font-family !global;
$button-border-radius: 6px !global;
$button-font-size: (
$--button-font-family: $--n-font-family !global;
$--button-font-size: (
"tiny": 12px,
"small": 14px,
"medium": 14px,
"large": 16px
) !global;
$button-height: (
$--button-height: (
"tiny": 22px,
"small": 28px,
"medium": 34px,
"large": 40px
) !global;
$button-padding: (
$--button-padding: (
"tiny": 0 6px,
"small": 0 10px,
"medium": 0 14px,
"large": 0 18px
) !global;
$round-button-padding: (
$--round-button-padding: (
"tiny": 0 10px,
"small": 0 14px,
"medium": 0 18px,
"large": 0 22px
) !global;
$button-icon-size: (
$--button-icon-size: (
"tiny": 14px,
"small": 16px,
"medium": 18px,
"large": 20px
) !global;
$button-border-color: (
$--button-border-color: (
"default": $--primary-6,
"primary": $--primary-6,
"info": $--info-6,
@ -39,46 +38,46 @@
"warning": $--warning-6,
"error": $--error-6
) !global;
$button-box-shadow-spread: 0px !global;
$button-box-shadow-ripple-spread: 4px !global;
$button-box-shadow-spread-alpha: .3 !global;
$button-box-shadow: (
'default': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'),
'default-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'),
'default-focus': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'),
'default-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'default')),
'default-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'default')),
$--button-box-shadow-spread: 0px !global;
$--button-box-shadow-ripple-spread: 4px !global;
$--button-box-shadow-spread-alpha: .3 !global;
$--button-box-shadow: (
'default': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'default'),
'default-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'default'),
'default-focus': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'default'),
'default-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'default')),
'default-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'default')),
'primary': none,
'primary-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'primary'),
'primary-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'primary'),
'primary-focus': none,
'primary-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'primary')),
'primary-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'primary')),
'primary-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'primary')),
'primary-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'primary')),
'success': none,
'success-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'success'),
'success-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'success'),
'success-focus': none,
'success-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'success')),
'success-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'success')),
'success-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'success')),
'success-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'success')),
'info': none,
'info-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'info'),
'info-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'info'),
'info-focus': none,
'info-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'info')),
'info-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'info')),
'info-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'info')),
'info-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'info')),
'warning': none,
'warning-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'warning'),
'warning-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'warning'),
'warning-focus': none,
'warning-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'warning')),
'warning-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'warning')),
'warning-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'warning')),
'warning-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'warning')),
'error': none,
'error-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'error'),
'error-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'error'),
'error-focus': none,
'error-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'error')),
'error-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'error'))
'error-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'error')),
'error-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'error'))
) !global;
$button-ghost-alpha: 0;
$button-ghost-hover-alpha: .2;
$button-ghost-active-alpha: .3;
$button-ghost-focus-alpha: .2;
$button-background-color: (
$--button-background-color: (
"default": change-color($--primary-6, $alpha: $button-ghost-alpha),
"default-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
"default-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
@ -104,7 +103,7 @@
"error-hover": $--error-5,
"error-active": $--error-7,
) !global;
$ghost-button-background-color: (
$--ghost-button-background-color: (
"default": change-color($--primary-6, $alpha: $button-ghost-alpha),
"default-focus": change-color($--primary-6, $alpha: $button-ghost-focus-alpha),
"default-hover": change-color($--primary-6, $alpha: $button-ghost-hover-alpha),
@ -130,7 +129,7 @@
"warning-hover": change-color($--warning-6, $alpha: $button-ghost-hover-alpha),
"warning-active": change-color($--warning-6, $alpha: $button-ghost-active-alpha),
) !global;
$ghost-button-color: (
$--ghost-button-color: (
"default": $--primary-6,
"primary": $--primary-6,
"info": $--info-6,
@ -138,7 +137,7 @@
"warning": $--warning-6,
"error": $--error-6
)!global;
$button-color: (
$--button-color: (
"default": $--primary-6,
"primary": black,
"info": black,

71
styles/themes/light/components/Button.scss
View File

@ -1,37 +1,36 @@
@mixin setup-light-button {
$button-font-family: $--n-font-family !global;
$button-border-radius: 6px !global;
$button-font-size: (
$--button-font-family: $--n-font-family !global;
$--button-font-size: (
"tiny": 12px,
"small": 14px,
"medium": 14px,
"large": 16px
) !global;
$button-height: (
$--button-height: (
"tiny": 22px,
"small": 28px,
"medium": 34px,
"large": 40px
) !global;
$button-padding: (
$--button-padding: (
"tiny": 0 6px,
"small": 0 10px,
"medium": 0 14px,
"large": 0 18px
) !global;
$round-button-padding: (
$--round-button-padding: (
"tiny": 0 10px,
"small": 0 14px,
"medium": 0 18px,
"large": 0 22px
) !global;
$button-icon-size: (
$--button-icon-size: (
"tiny": 14px,
"small": 16px,
"medium": 18px,
"large": 20px
) !global;
$button-border-color: (
$--button-border-color: (
"default": $--n-border-color,
"primary": $--primary-6,
"info": $--info-6,
@ -39,40 +38,40 @@
"warning": $--warning-6,
"error": $--error-6
) !global;
$button-box-shadow-spread: 0px !global;
$button-box-shadow-ripple-spread: 4px !global;
$button-box-shadow-spread-alpha: .3 !global;
$button-box-shadow: (
'default': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'),
'default-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'),
'default-focus': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'),
'default-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'default')),
'default-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'default')),
$--button-box-shadow-spread: 0px !global;
$--button-box-shadow-ripple-spread: 4px !global;
$--button-box-shadow-spread-alpha: .3 !global;
$--button-box-shadow: (
'default': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'default'),
'default-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'default'),
'default-focus': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'default'),
'default-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'default')),
'default-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'default')),
'primary': none,
'primary-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'primary'),
'primary-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'primary'),
'primary-focus': none,
'primary-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'primary')),
'primary-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'primary')),
'primary-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'primary')),
'primary-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'primary')),
'success': none,
'success-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'success'),
'success-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'success'),
'success-focus': none,
'success-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'success')),
'success-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'success')),
'success-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'success')),
'success-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'success')),
'info': none,
'info-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'info'),
'info-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'info'),
'info-focus': none,
'info-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'info')),
'info-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'info')),
'info-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'info')),
'info-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'info')),
'warning': none,
'warning-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'warning'),
'warning-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'warning'),
'warning-focus': none,
'warning-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'warning')),
'warning-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'warning')),
'warning-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'warning')),
'warning-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'warning')),
'error': none,
'error-ghost': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'error'),
'error-ghost': inset 0 0 0 1px map-get($map: $--button-border-color, $key: 'error'),
'error-focus': none,
'error-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'error')),
'error-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'error'))
'error-focus-ripple-start': (0 0 0 0 map-get($map: $--button-border-color, $key: 'error')),
'error-focus-ripple-end': (0 0 0 $--button-box-shadow-ripple-spread map-get($map: $--button-border-color, $key: 'error'))
) !global;
$button-ghost-alpha: 0;
$button-ghost-hover-alpha: .1;
@ -82,7 +81,7 @@
$button-ghost-hover-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-hover-alpha);
$button-ghost-active-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-active-alpha);
$button-ghost-focus-weight: percentage(red($--n-border-color) / (255 - red($--n-border-color)) * $button-ghost-focus-alpha);
$button-background-color: (
$--button-background-color: (
"default": mix($--n-border-color, white, $button-ghost-weight),
"default-focus": mix($--n-border-color, white, $button-ghost-focus-weight),
"default-hover": mix($--n-border-color, white, $button-ghost-hover-weight),
@ -108,7 +107,7 @@
"error-hover": $--error-5,
"error-active": $--error-7,
) !global;
$ghost-button-background-color: (
$--ghost-button-background-color: (
"default": change-color($--n-secondary-text-color, $alpha: $button-ghost-alpha),
"default-focus": change-color($--n-secondary-text-color, $alpha: $button-ghost-focus-alpha),
"default-hover": change-color($--n-secondary-text-color, $alpha: $button-ghost-hover-alpha),
@ -134,7 +133,7 @@
"warning-hover": change-color($--warning-6, $alpha: $button-ghost-hover-alpha),
"warning-active": change-color($--warning-6, $alpha: $button-ghost-active-alpha),
) !global;
$ghost-button-color: (
$--ghost-button-color: (
"default": $--n-secondary-text-color,
"primary": $--primary-6,
"info": $--info-6,
@ -142,7 +141,7 @@
"warning": $--warning-6,
"error": $--error-6
)!global;
$button-color: (
$--button-color: (
"default": $--n-secondary-text-color,
"primary": white,
"info": white,

240
styles/themes/transition.scss Normal file
View File

@ -0,0 +1,240 @@
@mixin fade-down-transition ($name: 'fade-down', $from-offset: -4px) {
&.#{$namespace}-#{$name}-transition-enter, &.#{$namespace}-#{$name}-transition-leave-to {
opacity: 0;
transform: translateY($from-offset);
}
&.#{$namespace}-#{$name}-transition-enter-to, &.#{$namespace}-#{$name}-transition-leave {
opacity: 1;
transform: translateY(0);
}
&.#{$namespace}-#{$name}-transition-leave-active {
transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier;
}
&.#{$namespace}-#{$name}-transition-enter-active {
transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier;
}
}
@mixin fade-in-scale-up-transition ($name: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9, $original-transform: (), $original-transition: ()) {
&.#{$namespace}-#{$name}-transition-leave-active {
transform-origin: $origin;
transition: opacity $duration $--n-ease-in-cubic-bezier, transform $duration $--n-ease-in-cubic-bezier, $original-transition;
}
&.#{$namespace}-#{$name}-transition-enter-active {
transform-origin: $origin;
transition: opacity $duration $--n-ease-out-cubic-bezier, transform $duration $--n-ease-out-cubic-bezier, $original-transition;
}
&.#{$namespace}-#{$name}-transition-enter, &.#{$namespace}-#{$name}-transition-leave-to {
opacity: 0;
transform: scale($start-scale) $original-transform;
}
&.#{$namespace}-#{$name}-transition-leave, &.#{$namespace}-#{$name}-transition-enter-to {
opacity: 1;
transform: $--n-transform-debounce-scale $original-transform;
}
}
@mixin fade-in-transition ($name: 'fade-in', $enter-duration: .2s, $leave-duration: .2s) {
&.#{$namespace}-#{$name}-transition-enter-active {
transition: all $enter-duration $--n-ease-in-out-cubic-bezier !important;
}
&.#{$namespace}-#{$name}-transition-leave-active {
transition: all $leave-duration $--n-ease-in-out-cubic-bezier !important;
}
&.#{$namespace}-#{$name}-transition-enter,
&.#{$namespace}-#{$name}-transition-leave-to {
opacity: 0;
}
&.#{$namespace}-#{$name}-transition-enter-to,
&.#{$namespace}-#{$name}-transition-leave {
opacity: 1;
}
}
@mixin slide-in-from-right-transition ($duration: .3s, $leave-duration: .2s) {
&.#{$namespace}-slide-in-from-right-leave-active {
transition: transform $leave-duration $--n-ease-in-cubic-bezier;
}
&.#{$namespace}-slide-in-from-right-enter-active {
transition: transform $duration $--n-ease-out-cubic-bezier;
}
&.#{$namespace}-slide-in-from-right-enter-to {
transform: translateX(0);
}
&.#{$namespace}-slide-in-from-right-enter {
transform: translateX(100%);
}
&.#{$namespace}-slide-in-from-right-leave {
transform: translateX(0);
}
&.#{$namespace}-slide-in-from-right-leave-to {
transform: translateX(100%);
}
}
@mixin slide-in-from-top-transition ($duration: .3s, $leave-duration: .2s) {
&.#{$namespace}-slide-in-from-top-leave-active {
transition: transform $leave-duration $--n-ease-in-cubic-bezier;
}
&.#{$namespace}-slide-in-from-top-enter-active {
transition: transform $duration $--n-ease-out-cubic-bezier;
}
&.#{$namespace}-slide-in-from-top-enter-to {
transform: translateY(0);
}
&.#{$namespace}-slide-in-from-top-enter {
transform: translateY(-100%);
}
&.#{$namespace}-slide-in-from-top-leave {
transform: translateY(0);
}
&.#{$namespace}-slide-in-from-top-leave-to {
transform: translateY(-100%);
}
}
@mixin slide-in-from-bottom-transition ($duration: .3s, $leave-duration: .2s) {
&.#{$namespace}-slide-in-from-bottom-leave-active {
transition: transform $leave-duration $--n-ease-in-cubic-bezier;
}
&.#{$namespace}-slide-in-from-bottom-enter-active {
transition: transform $duration $--n-ease-out-cubic-bezier;
}
&.#{$namespace}-slide-in-from-bottom-enter-to {
transform: translateY(0);
}
&.#{$namespace}-slide-in-from-bottom-enter {
transform: translateY(100%);
}
&.#{$namespace}-slide-in-from-bottom-leave {
transform: translateY(0);
}
&.#{$namespace}-slide-in-from-bottom-leave-to {
transform: translateY(100%);
}
}
@mixin slide-in-from-left-transition ($duration: .3s, $leave-duration: .2s) {
&.#{$namespace}-slide-in-from-left-leave-active {
transition: transform $duration $--n-ease-in-cubic-bezier;
}
&.#{$namespace}-slide-in-from-left-enter-active {
transition: transform $duration $--n-ease-out-cubic-bezier;
}
&.#{$namespace}-slide-in-from-left-enter-to {
transform: translateX(0);
}
&.#{$namespace}-slide-in-from-left-enter {
transform: translateX(-100%);
}
&.#{$namespace}-slide-in-from-left-leave {
transform: translateX(0);
}
&.#{$namespace}-slide-in-from-left-leave-to {
transform: translateX(-100%);
}
}
@mixin fade-in-height-expand-transition ($name: 'fade-in-height-expand', $duration: .3s, $delay: 0s) {
&.#{$namespace}-#{$name}-leave, &.#{$namespace}-#{$name}-enter-to {
opacity: 1;
}
&.#{$namespace}-#{$name}-leave-to, &.#{$namespace}-#{$name}-enter {
opacity: 0;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
&.#{$namespace}-#{$name}-leave-active {
overflow: hidden;
transition:
max-height $duration $--n-ease-in-out-cubic-bezier,
opacity $duration $--n-ease-out-cubic-bezier,
margin-top $duration $--n-ease-in-out-cubic-bezier,
margin-bottom $duration $--n-ease-in-out-cubic-bezier;
}
&.#{$namespace}-#{$name}-enter-active {
overflow: hidden;
transition: max-height $duration $--n-ease-in-out-cubic-bezier,
opacity $duration $--n-ease-in-cubic-bezier,
margin-top $duration $--n-ease-in-out-cubic-bezier,
margin-bottom $duration $--n-ease-in-out-cubic-bezier;
}
}
@mixin fade-in-width-expand-transition ($name: 'fade-in-width-expand', $duration: .2s, $delay: .1s) {
&.#{$namespace}-#{$name}-leave-active {
transition: opacity $duration $--n-ease-in-out-cubic-bezier, max-width $duration $--n-ease-in-out-cubic-bezier $delay,
margin-left $duration $--n-ease-in-out-cubic-bezier $delay,
margin-right $duration $--n-ease-in-out-cubic-bezier $delay;
}
&.#{$namespace}-#{$name}-enter-active {
transition: opacity $duration $--n-ease-in-out-cubic-bezier $delay, max-width $duration $--n-ease-in-out-cubic-bezier,
margin-left $duration $--n-ease-in-out-cubic-bezier,
margin-right $duration $--n-ease-in-out-cubic-bezier;
}
&.#{$namespace}-#{$name}-enter-to {
opacity: 1;
}
&.#{$namespace}-#{$name}-enter {
max-width: 0;
margin-left: 0 !important;
margin-right: 0 !important;
opacity: 0!important;
}
&.#{$namespace}-#{$name}-leave {
opacity: 1;
}
&.#{$namespace}-#{$name}-leave-to {
max-width: 0 !important;
opacity: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@mixin fade-up-width-expand-transition ($name: 'fade-up-width-expand', $duration: .2s) {
&.#{$namespace}-#{$name}-leave-active {
transition: opacity $duration $--n-ease-out-cubic-bezier, max-width $duration $--n-ease-out-cubic-bezier, transform $duration $--n-ease-out-cubic-bezier;
}
&.#{$namespace}-#{$name}-enter-active {
transition: opacity $duration $--n-ease-out-cubic-bezier, max-width $duration $--n-ease-out-cubic-bezier, transform $duration $--n-ease-out-cubic-bezier;
}
&.#{$namespace}-#{$name}-enter-to {
opacity: 1;
transform: translateX(0) translateY(0);
}
&.#{$namespace}-#{$name}-enter {
max-width: 0!important;
opacity: 0;
transform: translateY(60%);
}
&.#{$namespace}-#{$name}-leave {
opacity: 1;
transform: translateY(0);
}
&.#{$namespace}-#{$name}-leave-to {
max-width: 0!important;
opacity: 0!important;
transform: translateY(60%);
}
}
@mixin icon-switch-transition ($original-transform: (), $left: 0, $top: 0) {
&.n-icon-switch-enter, &.n-icon-switch-leave-to {
/* make sure it apply to element */
transform: $original-transform scale(.75);
opacity: 0;
}
&.n-icon-switch-enter-to, &.n-icon-switch-leave {
transform: $--n-transform-debounce-scale $original-transform;
opacity: 1;
}
&.n-icon-switch-leave-active, &.n-icon-switch-enter-active {
transform-origin: center;
position: absolute;
left: $left;
top: $top;
transition:
all .3s cubic-bezier(.4, 0, .2, 1) !important;
}
}

543
styles/themes/vars.scss
View File

@ -1,543 +0,0 @@
@import '../mixins/config.scss';
$body-background-color: #1a2033;
$--n-transform-debounce-scale: scale(0.99999);
/**
* genaral
*/
$tiny-height: 22px;
$small-height: 28px;
$default-height: 34px;
$medium-height: 34px;
$large-height: 40px;
$main-color: #63E2B7;
@function main-color-with-alpha($alpha) {
@return rgba(99, 226, 183, $alpha);
}
$fast-in-cubic-bezier: cubic-bezier(0.0, 0.0, 0.2, 1);
$slow-out-cubic-bezier: cubic-bezier(0.4, 0.0, 1, 1);
/**
* n-input
*/
$small-input-font-size: 13px;
$default-input-font-size: 14px;
$medium-input-font-size: 14px;
$large-input-font-size: 15px;
$input-background-color: rgba(255, 255, 255, 0.12);
$disabled-input-background-color:rgba(255,255,255,0.06);
$disabled-input-text-color: rgba(255, 255, 255, .2);
$disabled-input-placeholder-color: rgba(255, 255, 255, .2);
$input-caret-color: $main-color;
$input-placeholder-color: rgba(255, 255, 255, .4);
$focus-input-background-color: rgba(99, 226, 183, 0.1);
$input-border-radius: 6px;
$input-icon-color: rgba(255,255,255,0.2);
/**
* n-button
*/
$button-border-radius: 6px;
$button-font-size: (
"tiny": 12px,
"small": 14px,
"medium": 14px,
"large": 16px
);
$button-height: (
"tiny": 22px,
"small": 28px,
"medium": 34px,
"large": 40px
);
$button-padding: (
"tiny": 0 6px,
"small": 0 10px,
"medium": 0 14px,
"large": 0 18px
);
$round-button-padding: (
"tiny": 0 10px,
"small": 0 14px,
"medium": 0 18px,
"large": 0 22px
);
$button-icon-size: (
"tiny": 14px,
"small": 16px,
"medium": 18px,
"large": 20px
);
$button-border-color: (
"default": $main-color,
"primary": $main-color,
"info": $main-color,
"success": $main-color,
"warning": $main-color,
"error": $main-color
);
$button-box-shadow-spread: 0px;
$button-box-shadow-ripple-spread: 4px;
$button-box-shadow-ripple-spread-alpha: 0;
$button-box-shadow-spread-alpha: .3;
$button-box-shadow: (
'default': inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'),
'default-focus': (inset 0 0 0 1px map-get($map: $button-border-color, $key: 'default'), 0 0 0 $button-box-shadow-spread change-color(map-get($map: $button-border-color, $key: 'default'), $alpha: $button-box-shadow-spread-alpha)),
'default-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'default')),
'default-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'default')),
'primary': none,
'primary-focus': 0 0 0 $button-box-shadow-spread change-color(map-get($map: $button-border-color, $key: 'primary'), $alpha: $button-box-shadow-spread-alpha),
'primary-focus-ripple-start': (0 0 0 0 map-get($map: $button-border-color, $key: 'primary')),
'primary-focus-ripple-end': (0 0 0 $button-box-shadow-ripple-spread map-get($map: $button-border-color, $key: 'primary'))
);
$button-background-color: (
"default": transparent,
"default-focus": rgba(99, 226, 183, .3),
"default-hover": rgba(99, 226, 183, .3),
"default-active": rgba(99, 226, 183, .2),
"primary": $main-color,
"primary-focus": rgb(103, 235, 190),
"primary-hover": rgb(103, 235, 190),
"primary-active": rgb(97, 218, 177),
"info": $main-color,
"success": $main-color,
"warning": $main-color,
"error": $main-color
);
$button-color: (
"default": $main-color,
"primary": black,
"info": $main-color,
"success": $main-color,
"warning": $main-color,
"error": $main-color
);
/**
* n-select
*/
$select-text-color: #ffffff;
$select-font-size--small: 14px;
$select-font-size--medium: 14px;
$select-font-size--large: 14px;
$select-background-color: rgba(255, 255, 255, 0.12);
$select-background-color--disabled:rgba(255,255,255,0.06);
$select-text-color--disabled: rgba(255, 255, 255, .2);
$select-placeholder-color--disabled: rgba(255, 255, 255, .2);
$select-placeholder-color: rgba(255, 255, 255, .4);
$select-background-color--active: rgba(99, 226, 183, 0.1);
$select-item-background-color--active: rgba(96, 220, 178, 0.3);
$select-border-radius: 6px;
$select-border-color--active: $main-color;
/**
* n-pagination
*/
$pagination-color--disabled: rgba(255,255,255,.2);
$pagination-color: rgba(255,255,255,.6);
$pagination-border-radius: 4px;
$pagination-color--active: $main-color;
$pagination-background-color--active: rgba(99,226,183,0.3);
$pagination-background-color--disabled-active: rgba(255,255,255,0.15);
/**
* n-table
*/
$table-font-size: 13px;
/**
* n-checkbox
*/
$checkbox-background: transparent;
$checkbox-background--active: $main-color;
$checkbox-border-color: rgba(255, 255, 255, .4);
$checkbox-border-color--active: $main-color;
/**
* n-input-number
*/
$input-number-border-radius: $input-border-radius;
$input-number-background-color: rgba(238, 238, 238, .1);
$input-number-color: #e9e9ec;
$input-number-button-background-color: rgba(238, 238, 238, .1);
$amazing-font-size: 20px;
$huge-font-size: 18px;
$large-font-size: 16px;
$regular-font-size: 14px;
$small-font-size: 12px;
$normal-font-size: $regular-font-size;
$meta-font-size: $small-font-size;
$--primary-text-color: rgba(255, 255, 255, .8);
$regular-text-color: rgba(255, 255, 255, .6);
$secondary-text-color: rgba(255, 255, 255, .4);
$table-header-background-color: rgb(43,49,71);
$table-body-background-color: #1f263e;
$table-box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2);
$default-button-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
$default-text-gradient: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
$default-text-gradient-warning: linear-gradient(252deg, rgba(247,181,0,1) 0%, rgba(237,255,0,1) 100%);
$default-text-gradient-success: linear-gradient(14deg, rgba(120,205,104,1) 0%, rgba(20,166,165,1) 100%);
$default-text-gradient-danger: linear-gradient(214deg, rgba(224,32,32,1) 0%, rgba(250,100,0,1) 100%);
$--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
$--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
$--n-ease-out-cubic-bezier: cubic-bezier(0, 0, .2, 1);
$--n-ease-in-cubic-bezier: cubic-bezier(.4, 0, 1, 1);
// $scrollbar-color: rgba(255,255,255,0.2);
// $scrollbar-color--hover: rgba(255,255,255,0.3);
@mixin scrollbar {
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 2.5px;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.3);
}
}
@mixin input-border {
&:focus:hover {
box-shadow: inset 0 0 0px 1px $main-color, 0px 0px 10px 1px #366555;
}
&:hover {
box-shadow: inset 0 0 0px 1px $main-color;
}
&:focus {
box-shadow: inset 0 0 0px 1px $main-color;
background-color: $focus-input-background-color;
}
}
@mixin fade-down-transition ($name: 'fade-down', $from-offset: -4px) {
&.#{$namespace}-#{$name}-enter, &.#{$namespace}-#{$name}-leave-to {
opacity: 0;
transform: translateY($from-offset);
}
&.#{$namespace}-#{$name}-enter-to, &.#{$namespace}-#{$name}-leave {
opacity: 1;
transform: translateY(0);
}
&.#{$namespace}-#{$name}-leave-active {
transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier;
}
&.#{$namespace}-#{$name}-enter-active {
transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier;
}
}
@mixin fade-up-transition($block) {
&.#{$namespace}-#{$block}--transition-enter, .#{$namespace}-#{$block}--transition-leave-to {
opacity: 0;
transform: translateY(4px);
}
&.#{$namespace}-#{$block}--transition-leave-active {
transition: opacity .3s $slow-out-cubic-bezier, transform .3s $slow-out-cubic-bezier;
}
&.#{$namespace}-#{$block}--transition-enter-active {
transition: opacity .3s $fast-in-cubic-bezier, transform .3s $fast-in-cubic-bezier;
}
}
@mixin fade-in-scale-up-transition($block: 'fade-in-scale-up', $origin: inherit, $duration: .2s, $start-scale: 0.9, $original-transform: (), $original-transition: ()) {
&.#{$namespace}-#{$block}--transition-leave-active {
transform-origin: $origin;
transition: opacity $duration $slow-out-cubic-bezier, transform $duration $slow-out-cubic-bezier, $original-transition;
}
&.#{$namespace}-#{$block}--transition-enter-active {
transform-origin: $origin;
transition: opacity $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier, $original-transition;
}
&.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
opacity: 0;
transform: scale($start-scale) $original-transform;
}
&.#{$namespace}-#{$block}--transition-leave, &.#{$namespace}-#{$block}--transition-enter-to {
opacity: 1;
transform: $--n-transform-debounce-scale $original-transform;
}
}
@mixin fade-in-transition($block: "fade-in", $enter-duration: .2s, $leave-duration: .2s) {
&.#{$namespace}-#{$block}--transition-enter-active {
transition: all $enter-duration $--n-ease-in-out-cubic-bezier !important;
}
&.#{$namespace}-#{$block}--transition-leave-active {
transition: all $leave-duration $--n-ease-in-out-cubic-bezier !important;
}
&.#{$namespace}-#{$block}--transition-enter,
&.#{$namespace}-#{$block}--transition-leave-to {
opacity: 0;
}
&.#{$namespace}-#{$block}--transition-enter-to,
&.#{$namespace}-#{$block}--transition-leave {
opacity: 1;
}
}
@mixin fade-in-transition-ease-in-out($block, $duration: .2s) {
&.#{$namespace}-#{$block}--transition-enter-active,
&.#{$namespace}-#{$block}--transition-leave-active {
opacity: 1;
}
&.#{$namespace}-#{$block}--transition-enter-active {
transition: opacity $duration $--n-ease-in-out-cubic-bezier;
}
&.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
opacity: 0;
}
&.#{$namespace}-#{$block}--transition-leave-to {
transition: opacity $duration $--n-ease-in-out-cubic-bezier;
}
}
@mixin slide-in-from-right-transition($duration: .3s, $leave-duration: .2s) {
&.#{$namespace}-slide-in-from-right-leave-active {
transition: transform $leave-duration $--n-ease-in-cubic-bezier;
}
&.#{$namespace}-slide-in-from-right-enter-active {
transition: transform $duration $--n-ease-out-cubic-bezier;
}
&.#{$namespace}-slide-in-from-right-enter-to {
transform: translateX(0);
}
&.#{$namespace}-slide-in-from-right-enter {
transform: translateX(100%);
}
&.#{$namespace}-slide-in-from-right-leave {
transform: translateX(0);
}
&.#{$namespace}-slide-in-from-right-leave-to {
transform: translateX(100%);
}
}
@mixin slide-in-from-top-transition($duration: .3s, $leave-duration: .2s) {
&.#{$namespace}-slide-in-from-top-leave-active {
transition: transform $leave-duration $--n-ease-in-cubic-bezier;
}
&.#{$namespace}-slide-in-from-top-enter-active {
transition: transform $duration $--n-ease-out-cubic-bezier;
}
&.#{$namespace}-slide-in-from-top-enter-to {
transform: translateY(0);
}
&.#{$namespace}-slide-in-from-top-enter {
transform: translateY(-100%);
}
&.#{$namespace}-slide-in-from-top-leave {
transform: translateY(0);
}
&.#{$namespace}-slide-in-from-top-leave-to {
transform: translateY(-100%);
}
}
@mixin slide-in-from-bottom-transition($duration: .3s, $leave-duration: .2s) {
&.#{$namespace}-slide-in-from-bottom-leave-active {
transition: transform $leave-duration $--n-ease-in-cubic-bezier;
}
&.#{$namespace}-slide-in-from-bottom-enter-active {
transition: transform $duration $--n-ease-out-cubic-bezier;
}
&.#{$namespace}-slide-in-from-bottom-enter-to {
transform: translateY(0);
}
&.#{$namespace}-slide-in-from-bottom-enter {
transform: translateY(100%);
}
&.#{$namespace}-slide-in-from-bottom-leave {
transform: translateY(0);
}
&.#{$namespace}-slide-in-from-bottom-leave-to {
transform: translateY(100%);
}
}
@mixin slide-in-from-left-transition($duration: .3s, $leave-duration: .2s) {
&.#{$namespace}-slide-in-from-left-leave-active {
transition: transform $duration $--n-ease-in-cubic-bezier;
}
&.#{$namespace}-slide-in-from-left-enter-active {
transition: transform $duration $--n-ease-out-cubic-bezier;
}
&.#{$namespace}-slide-in-from-left-enter-to {
transform: translateX(0);
}
&.#{$namespace}-slide-in-from-left-enter {
transform: translateX(-100%);
}
&.#{$namespace}-slide-in-from-left-leave {
transform: translateX(0);
}
&.#{$namespace}-slide-in-from-left-leave-to {
transform: translateX(-100%);
}
}
@mixin slide-right-transition($block, $duration: .3s, $delay: .3s) {
&.#{$namespace}-#{$block}--transition-leave-active {
transition: transform $duration $slow-out-cubic-bezier, max-height $duration $--n-ease-in-out-cubic-bezier $delay;
}
&.#{$namespace}-#{$block}--transition-enter-active {
transition: transform $duration $fast-in-cubic-bezier $delay, max-height $duration $--n-ease-in-out-cubic-bezier;
}
&.#{$namespace}-#{$block}--transition-enter-to {
transform: translateX(0);
}
&.#{$namespace}-#{$block}--transition-enter {
transform: translateX(120%);
max-height: 0;
}
&.#{$namespace}-#{$block}--transition-leave {
transform: translateX(0);
}
&.#{$namespace}-#{$block}--transition-leave-to {
transform: translateX(120%);
max-height: 0;
}
}
@mixin slide-left-transition($block, $duration: .3s, $delay: .3s) {
&.#{$namespace}-#{$block}--transition-leave-active {
transition: transform $duration $slow-out-cubic-bezier, max-height $duration $--n-ease-in-out-cubic-bezier $delay;
}
&.#{$namespace}-#{$block}--transition-enter-active {
transition: transform $duration $fast-in-cubic-bezier $delay, max-height $duration $--n-ease-in-out-cubic-bezier;
}
&.#{$namespace}-#{$block}--transition-enter-to {
transform: translateX(0);
}
&.#{$namespace}-#{$block}--transition-enter {
transform: translateX(-120%);
max-height: 0;
}
&.#{$namespace}-#{$block}--transition-leave {
transform: translateX(0);
}
&.#{$namespace}-#{$block}--transition-leave-to {
transform: translateX(-120%);
max-height: 0;
}
}
@mixin fade-in-height-expand-transition($block: "fade-in-height-expand", $duration: .3s, $delay: 0s) {
&.#{$namespace}-#{$block}-leave, &.#{$namespace}-#{$block}-enter-to {
opacity: 1;
}
&.#{$namespace}-#{$block}-leave-to, &.#{$namespace}-#{$block}-enter {
opacity: 0;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
&.#{$namespace}-#{$block}-leave-active {
overflow: hidden;
transition:
max-height $duration $--n-ease-in-out-cubic-bezier,
opacity $duration $fast-in-cubic-bezier,
margin-top $duration $--n-ease-in-out-cubic-bezier,
margin-bottom $duration $--n-ease-in-out-cubic-bezier;
}
&.#{$namespace}-#{$block}-enter-active {
overflow: hidden;
transition: max-height $duration $--n-ease-in-out-cubic-bezier,
opacity $duration $slow-out-cubic-bezier,
margin-top $duration $--n-ease-in-out-cubic-bezier,
margin-bottom $duration $--n-ease-in-out-cubic-bezier;
}
}
@mixin fade-in-width-expand-transition($block: "fade-in-width-expand", $duration: .2s, $delay: .1s) {
&.#{$namespace}-#{$block}-leave-active {
transition: opacity $duration $--n-ease-in-out-cubic-bezier, max-width $duration $--n-ease-in-out-cubic-bezier $delay,
margin-left $duration $--n-ease-in-out-cubic-bezier $delay,
margin-right $duration $--n-ease-in-out-cubic-bezier $delay;
}
&.#{$namespace}-#{$block}-enter-active {
transition: opacity $duration $--n-ease-in-out-cubic-bezier $delay, max-width $duration $--n-ease-in-out-cubic-bezier,
margin-left $duration $--n-ease-in-out-cubic-bezier,
margin-right $duration $--n-ease-in-out-cubic-bezier;
}
&.#{$namespace}-#{$block}-enter-to {
opacity: 1;
}
&.#{$namespace}-#{$block}-enter {
max-width: 0;
margin-left: 0 !important;
margin-right: 0 !important;
opacity: 0!important;
}
&.#{$namespace}-#{$block}-leave {
opacity: 1;
}
&.#{$namespace}-#{$block}-leave-to {
max-width: 0 !important;
opacity: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@mixin fade-up-width-expand-transition($block: "fade-up-width-expand", $duration: .2s) {
&.#{$namespace}-#{$block}-leave-active {
transition: opacity $duration $fast-in-cubic-bezier, max-width $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier;
}
&.#{$namespace}-#{$block}-enter-active {
transition: opacity $duration $fast-in-cubic-bezier, max-width $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier;
}
&.#{$namespace}-#{$block}-enter-to {
opacity: 1;
transform: translateX(0) translateY(0);
}
&.#{$namespace}-#{$block}-enter {
max-width: 0!important;
opacity: 0;
transform: translateY(60%);
}
&.#{$namespace}-#{$block}-leave {
opacity: 1;
transform: translateY(0);
}
&.#{$namespace}-#{$block}-leave-to {
max-width: 0!important;
opacity: 0!important;
transform: translateY(60%);
}
}
@mixin icon-switch-transition ($original-transform: (), $left: 0, $top: 0) {
&.n-icon-switch-enter, &.n-icon-switch-leave-to {
/* make sure it apply to element */
transform: $original-transform scale(.75);
opacity: 0;
}
&.n-icon-switch-enter-to, &.n-icon-switch-leave {
transform: $--n-transform-debounce-scale $original-transform;
opacity: 1;
}
&.n-icon-switch-leave-active, &.n-icon-switch-enter-active {
transform-origin: center;
position: absolute;
left: $left;
top: $top;
transition:
all .3s cubic-bezier(.4, 0, .2, 1) !important;
}
}