mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: rename $default-cubic-bezier to $--n-ease-in-out-cubic-bezier

Browse Source
This commit is contained in:
07akioni 2019-12-22 15:50:37 +08:00
parent 5259d0cf5c
commit 33808cb31f
55 changed files with 252 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demo/styles/ComponentDemo.scss
View File

@ -11,7 +11,7 @@
color: $--n-text-color;
}
@include e(code) {
transition: border-color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
border-top: 1px solid $--n-divider-color;
code {
font-family: $--n-mono-font-family;
@ -25,9 +25,9 @@
overflow: hidden;
border-radius: 8px;
padding-top: 16px;
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
@include e(title) {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
position: relative;
margin: 0 24px;
font-size: 18px;

6
demo/styles/markdown.scss
View File

@ -13,10 +13,10 @@
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
// background-color: $--n-alpha-table-body-color;
th {
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
background-color: $--n-table-header-color;
// background-clip: padding-box;
text-align: inherit;
@ -33,7 +33,7 @@
}
}
td {
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
background-color: $--n-table-body-color;
// background-clip: padding-box;
padding: 12px;

20
styles/Alert.scss
View File

@ -40,22 +40,22 @@
overflow: hidden;
transform: top center;
transition:
transform $duration $default-cubic-bezier,
max-height $duration $default-cubic-bezier,
transform $duration $--n-ease-in-out-cubic-bezier,
max-height $duration $--n-ease-in-out-cubic-bezier,
opacity $duration $fast-in-cubic-bezier,
margin-top $duration $default-cubic-bezier,
margin-bottom $duration $default-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 $default-cubic-bezier,
transition: max-height $duration $--n-ease-in-out-cubic-bezier,
opacity $duration $slow-out-cubic-bezier,
margin-top $duration $default-cubic-bezier,
margin-bottom $duration $default-cubic-bezier;
margin-top $duration $--n-ease-in-out-cubic-bezier,
margin-bottom $duration $--n-ease-in-out-cubic-bezier;
}
border-radius: 6px;
position: relative;
transition: background-color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier;
@include e(icon) {
position: absolute;
left: 12px;
@ -82,7 +82,7 @@
@include b(alert-body) {
padding: 16px 16px 16px 48px;
@include e(title) {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
font-size: 16px;
line-height: 19px;
font-weight: 700;
@ -93,7 +93,7 @@
}
}
@include e(content) {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
font-size: 14px;
}
}

8
styles/Anchor.scss
View File

@ -12,7 +12,7 @@
left: 2px;
width: 100%;
max-width: 0;
transition: top .15s $default-cubic-bezier, max-width .15s $default-cubic-bezier;
transition: top .15s $--n-ease-in-out-cubic-bezier, max-width .15s $--n-ease-in-out-cubic-bezier;
border-top-right-radius: 10.5px;
border-bottom-right-radius: 10.5px;
}
@ -26,7 +26,7 @@
bottom: 0;
width: 4px;
border-radius: 2px;
transition: background-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
overflow: hidden;
}
background-color: $--anchor-rail-background-color;
@ -34,7 +34,7 @@
@include once {
position: absolute;
left: 0;
transition: top .15s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
transition: top .15s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
width: 4px;
height: 21px;
background-color: transparent;
@ -79,7 +79,7 @@
display: inline-block;
font-size: 14px;
padding-right: 16px;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: map-get($--anchor-link-title-text-color, 'default');;
&:hover, &:focus {

4
styles/Avatar.scss
View File

@ -24,12 +24,12 @@
@include avatar-size-mixin('medium');
@include avatar-size-mixin('large');
@include b(icon) {
transition: fill .3s $default-cubic-bezier;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
fill: white;
vertical-align: bottom;
}
color: white;
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
font-size: 14px;
display: inline-block;
position: relative;

2
styles/BackTop.scss
View File

@ -13,7 +13,7 @@
}
@include e(default-button) {
@include once {
transition: box-shadow .3s $default-cubic-bezier, fill .3s $default-cubic-bezier;;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier, fill .3s $--n-ease-in-out-cubic-bezier;;
border-radius: 20px;
height: 40px;
width: 40px;

4
styles/Badge.scss
View File

@ -13,7 +13,7 @@
@include b(badge-sup) {
&::before {
animation-duration: 2s, 2s;
animation-timing-function: $fast-in-cubic-bezier, $default-cubic-bezier;
animation-timing-function: $fast-in-cubic-bezier, $--n-ease-in-out-cubic-bezier;
animation-iteration-count: infinite, infinite;
}
}
@ -128,7 +128,7 @@
@include once {
@include b(badge-sup) {
@include fade-in-scale-up-transition(badge, left bottom, $original-transform: (translateX(-50%)));
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
color: white;
position: absolute;
height: 18px;

4
styles/BaseCancelMark.scss
View File

@ -25,7 +25,7 @@
}
@include e(icon) {
@include once {
transition: fill .3s $default-cubic-bezier;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
}
fill: map-get($map: $--base-cancel-mark-cross-color, $key: "default");
}
@ -59,7 +59,7 @@
}
&::after {
@include once {
transition: transform .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: transform .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
position: absolute;
content: '';
box-sizing: border-box;

2
styles/BaseLoading.scss
View File

@ -36,7 +36,7 @@
@include b(base-loading-circular-path) {
stroke: $--base-loading-stroke;
@include once {
transition: stroke .3s $default-cubic-bezier;
transition: stroke .3s $--n-ease-in-out-cubic-bezier;
animation: n-base-loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90, 150;
stroke-dashoffset: 0;

10
styles/BasePicker.scss
View File

@ -62,7 +62,7 @@
left: 14px;
top: 0;
opacity: 1;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: map-get($--base-picker-placeholder-color, 'default');
}
@ -72,7 +72,7 @@
outline: none;
box-sizing: border-box;
position: relative;
transition: color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
border-radius: $--base-picker-border-radius;
}
box-shadow: map-get($map: $--base-picker-box-shadow, $key: "default");
@ -87,7 +87,7 @@
outline: none;
box-sizing: border-box;
position: relative;
transition: color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
border-radius: $--base-picker-border-radius;
}
box-shadow: map-get($map: $--base-picker-box-shadow, $key: "default");
@ -102,14 +102,14 @@
border:none;
width: 100%;
white-space: nowrap;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
padding: 0 32px 0 14px;
background-color: transparent;
height: 100%;
}
color: $--base-picker-color;
&::placeholder {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
color: map-get($--base-picker-placeholder-color, 'default');
}
@include m(placeholder) {

16
styles/BaseSelectMenu.scss
View File

@ -32,7 +32,7 @@
z-index: 0;
position: relative;
border-radius: 6px;
transition: background-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
@include b(base-select-menu-option-wrapper) {
position: relative;
width: 100%;
@ -48,10 +48,10 @@
}
/** transition of menu light bar */
.n-base-select-menu-light-bar--transition-enter-active {
transition: opacity .15s $fast-in-cubic-bezier, top .3s $default-cubic-bezier!important;
transition: opacity .15s $fast-in-cubic-bezier, top .3s $--n-ease-in-out-cubic-bezier!important;
}
.n-base-select-menu-light-bar--transition-leave-active {
transition: opacity .15s $slow-out-cubic-bezier, top .3s $default-cubic-bezier!important;
transition: opacity .15s $slow-out-cubic-bezier, top .3s $--n-ease-in-out-cubic-bezier!important;
}
.n-base-select-menu-light-bar--transition-enter, .n-base-select-menu-light-bar--transition-leave-to {
opacity: 0;
@ -64,7 +64,7 @@
position: relative;
padding: 0px 14px;
white-space: nowrap;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
color: map-get($map: $--base-select-menu-option-color, $key: "default");
@include m(selected) {
color: map-get($map: $--base-select-menu-option-color, $key: "selected");
@ -102,18 +102,18 @@
}
}
@include b(base-select-menu-light-bar) {
transition: background-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
position: absolute;
width:100%;
background-color: $--base-select-menu-light-bar-background-color;
top: 0;
left: 0;
transition: top .15s $default-cubic-bezier;
transition: top .15s $--n-ease-in-out-cubic-bezier;
}
@include m(multiple) {
@include b(base-select-option) {
position: relative;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
padding-right: 28px;
&::after {
@include once {
@ -125,7 +125,7 @@
transform: rotate(45deg) scale(.5);
top: calc(50% - 4px);
opacity: 0;
transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier;
transition: transform .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
}
border-right: 1px solid $--base-select-menu-option-check-mark-color;
border-bottom: 1px solid $--base-select-menu-option-check-mark-color;

8
styles/Breadcrumb.scss
View File

@ -5,26 +5,26 @@
white-space: nowrap;
@include b(breadcrumb-item) {
@include once {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include b(icon) {
font-size: 16px;
vertical-align: -.2em;
}
}
@include b(icon) {
transition: fill .3s $default-cubic-bezier;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
fill: map-get($--breadcrumb-link-text-color, 'default');
}
@include e(link) {
@include once {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
cursor: pointer;
}
color: map-get($--breadcrumb-link-text-color, 'default');
}
@include e(seperator) {
@include once {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
margin: 0 4px;
}
color: map-get($--breadcrumb-seperator-text-color, 'default');

6
styles/Button.scss
View File

@ -223,7 +223,7 @@
user-select: none;
// font-weight: 700;
text-align: center;
transition: background-color .2s $default-cubic-bezier, opacity .15s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier;
transition: background-color .2s $--n-ease-in-out-cubic-bezier, opacity .15s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier;
cursor: pointer;
&::after {
content: "";
@ -236,7 +236,7 @@
}
@include e(icon) {
@include fade-in-width-expand-transition();
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
@include e(content-aligner) {
display: inline-block;
@ -249,7 +249,7 @@
}
@include e(content) {
white-space: nowrap;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
@include m(left-icon) {
@include e(icon) {

16
styles/Card.scss
View File

@ -104,7 +104,7 @@ $--card-margin-bottom: (
width: 100%;
box-sizing: border-box;
position: relative;
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
border-radius: 6px;
@include card-size-mixin('small');
@include card-size-mixin('medium');
@ -126,7 +126,7 @@ $--card-margin-bottom: (
@include m(title-segmented, title-soft-segmented) {
@include b(card-header) {
@include once {
transition: border-color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
}
&:not(:last-child) {
border-bottom: 1px solid $--card-border-color;
@ -136,7 +136,7 @@ $--card-margin-bottom: (
@include m(content-segmented, content-soft-segmented) {
@include e(content) {
@include once {
transition: border-color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
}
&:not(:last-child) {
border-bottom: 1px solid $--card-border-color;
@ -146,7 +146,7 @@ $--card-margin-bottom: (
@include m(footer-segmented, footer-soft-segmented) {
@include e(footer) {
@include once {
transition: border-color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
}
&:not(:last-child) {
border-bottom: 1px solid $--card-border-color;
@ -164,7 +164,7 @@ $--card-margin-bottom: (
@include once {
font-weight: 700;
font-size: 18px;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
flex: 1;
}
color: $--card-title-text-color;
@ -173,14 +173,14 @@ $--card-margin-bottom: (
@include once {
font-weight: 400;
font-size: 14px;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: $--card-text-color;
}
@include e(close-mark) {
@include once {
cursor: pointer;
transition: fill .3s $default-cubic-bezier
transition: fill .3s $--n-ease-in-out-cubic-bezier
}
fill: $--card-close-fill;
}
@ -197,7 +197,7 @@ $--card-margin-bottom: (
}
@include e(action) {
@include once {
transition: background-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
line-height: 1.5;
font-size: 14px;
}

8
styles/Cascader.scss
View File

@ -155,7 +155,7 @@
box-sizing: border-box;
min-width: 182px;
background-color: transparent;
transition: background-color .2s $default-cubic-bezier, color 0.2s $default-cubic-bezier;
transition: background-color .2s $--n-ease-in-out-cubic-bezier, color 0.2s $--n-ease-in-out-cubic-bezier;
height: 34px;
line-height: 34px;
display: flex;
@ -177,7 +177,7 @@
transform: rotate(45deg) scale(.5);
top: calc(50% - 4px);
opacity: 0;
transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier;
transition: transform .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
}
border-right: 1px solid $--cascader-item-check-mark-color;
border-bottom: 1px solid $--cascader-item-check-mark-color;
@ -244,7 +244,7 @@
right: 18px;
top: 50%;
opacity: 1;
transition: opacity .3s $default-cubic-bezier;
transition: opacity .3s $--n-ease-in-out-cubic-bezier;
}
border-top: 2px solid $--cascader-option-arrow-background-color;
border-right: 2px solid $--cascader-option-arrow-background-color;
@ -294,7 +294,7 @@
width: 100%;
left: 0;
height: 34px;
transition: top .15s $default-cubic-bezier;
transition: top .15s $--n-ease-in-out-cubic-bezier;
}
background-color: $--cascader-menu-lightbar-background-color;
}

20
styles/Checkbox.scss
View File

@ -22,11 +22,11 @@
box-sizing: border-box;
border-radius: 4px;
position: relative;
transition: box-shadow 0.3s $default-cubic-bezier,
background-color 0.3s $default-cubic-bezier;
transition: box-shadow 0.3s $--n-ease-in-out-cubic-bezier,
background-color 0.3s $--n-ease-in-out-cubic-bezier;
@include e(line-mark, check-mark) {
path {
transition: fill .3s $default-cubic-bezier;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
fill: $--checkbox-icon-fill;
}
}
@ -40,9 +40,9 @@
opacity: 0;
transform: scale(0.5);
transform-origin: center;
transition: transform 0.3s $default-cubic-bezier,
opacity 0.3s $default-cubic-bezier,
border-color 0.3s $default-cubic-bezier;
transition: transform 0.3s $--n-ease-in-out-cubic-bezier,
opacity 0.3s $--n-ease-in-out-cubic-bezier,
border-color 0.3s $--n-ease-in-out-cubic-bezier;
}
@include e(check-mark) {
content: "";
@ -55,13 +55,13 @@
opacity: 0;
transform: scale(0.5);
transform-origin: center;
transition: transform 0.3s $default-cubic-bezier,
opacity 0.3s $default-cubic-bezier,
border-color 0.3s $default-cubic-bezier;
transition: transform 0.3s $--n-ease-in-out-cubic-bezier,
opacity 0.3s $--n-ease-in-out-cubic-bezier,
border-color 0.3s $--n-ease-in-out-cubic-bezier;
}
}
@include e(label) {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
user-select: none;
padding-left: 8px;
}

2
styles/Code.scss
View File

@ -13,7 +13,7 @@
font-size: 14px;
font-family: $--n-mono-font-family, monospace;
[class^=hljs] {
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
}
&.#{block(light-theme)} {
.hljs {

8
styles/Collapse.scss
View File

@ -9,7 +9,7 @@
@include once {
overflow: hidden;
font-size: 14px;
transition: border-color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
margin-top: 16px;
&:first-child {
margin-top: 0px;
@ -41,13 +41,13 @@
}
@include e(header) {
@include once {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
position: relative;
cursor: pointer;
margin-left: 18px;
padding: 16px 0 0 0;
@include b(icon) {
transition: transform .15s $default-cubic-bezier, fill .3s $default-cubic-bezier;
transition: transform .15s $--n-ease-in-out-cubic-bezier, fill .3s $--n-ease-in-out-cubic-bezier;
font-size: 16px;
position: absolute;
left: -18px;
@ -61,7 +61,7 @@
}
@include e(content-inner) {
@include once {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
padding-top: 16px;
}
color: $--collapse-content-text-color;

4
styles/Confirm.scss
View File

@ -4,7 +4,7 @@
@include themes-mixin {
@include b(confirm) {
@include once {
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
box-sizing: border-box;
width: 100%;
max-width: 446px;
@ -27,7 +27,7 @@
}
@include b(confirm-title) {
@include once {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
display: flex;
justify-content: space-between;
align-items: center;

4
styles/DatePicker.scss
View File

@ -160,7 +160,7 @@
border-radius: 3px;
z-index: 0;
cursor: pointer;
transition: background-color .2s $default-cubic-bezier, color .2s $default-cubic-bezier;
transition: background-color .2s $--n-ease-in-out-cubic-bezier, color .2s $--n-ease-in-out-cubic-bezier;
@include m(no-transition) {
transition: none!important;
}
@ -183,7 +183,7 @@
height: 4px;
width: 4px;
border-radius: 2px;
transition: background-color .2s $default-cubic-bezier;
transition: background-color .2s $--n-ease-in-out-cubic-bezier;
}
background-color: map-get($--date-picker-item-background-color, 'active');
}

14
styles/Descriptions.scss
View File

@ -114,13 +114,13 @@
@include once {
font-weight: 700;
font-size: 18px;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: $--descriptions-header-text-color;
}
@include b(descriptions-table-wrapper) {
@include once {
transition: border-color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
}
@include b(descriptions-table) {
@include once {
@ -132,7 +132,7 @@
@include b(descriptions-table-row) {
@include once {
box-sizing: border-box;
transition: border-color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
}
@include b(descriptions-table-header) {
@include once {
@ -140,7 +140,7 @@
line-height: 1.5;
display: table-cell;
box-sizing: border-box;
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
}
color: $--descriptions-header-text-color;
}
@ -148,7 +148,7 @@
@include e(content) {
color: $--descriptions-content-text-color;
@include once {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
display: inline-block;
}
}
@ -156,7 +156,7 @@
color: $--descriptions-header-text-color;
@include once {
font-weight: 700;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
display: inline-block;
margin-right: 14px;
}
@ -166,7 +166,7 @@
line-height: 1.5;
display: table-cell;
box-sizing: border-box;
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
padding: 0 0 16px 0;
}
color: $--descriptions-content-text-color;

6
styles/Divider.scss
View File

@ -7,7 +7,7 @@
display: flex;
width: 100%;
font-size: 16px;
transition: background-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
@include not-m(vertical) {
margin-top: 24px;
margin-bottom: 24px;
@ -17,7 +17,7 @@
}
}
@include e(title) {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
display: flex;
align-items: center;
margin-left: 12px;
@ -60,7 +60,7 @@
@include once {
@include e(line) {
border: none;
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
height: 1px;
width: 100%;
}

2
styles/Drawer.scss
View File

@ -11,7 +11,7 @@
right: 0;
background-color: $--n-card-color;
color: $--n-secondary-text-color;
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
}
}

6
styles/Empty.scss
View File

@ -9,7 +9,7 @@
}
@include e(icon) {
@include once {
transition: fill .3s $default-cubic-bezier;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
width: 40px;
height: 40px;
}
@ -18,14 +18,14 @@
@include e(description) {
@include once {
margin-top: 8px;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: $--empty-text-color;
}
@include e(extra) {
@include once {
text-align: center;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
margin-top: 16px;
}
color: $--empty-extra-text-color;

6
styles/Form.scss
View File

@ -94,9 +94,9 @@
height: 24px;
box-sizing: border-box;
font-size: 14px;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
&::after {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
}
color: $--n-text-color;
@ -111,7 +111,7 @@
font-size: 14px;
transform-origin: top left;
line-height: 1.25;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include b(form-item-feedback) {
@include fade-down-transition($from-offset: -3px);
}

2
styles/Icon.scss
View File

@ -7,5 +7,5 @@
text-align: center;
display: inline-block;
position: relative;
transition: fill .3s $default-cubic-bezier;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
}

12
styles/Input.scss
View File

@ -82,12 +82,12 @@
width: 100%;
display: inline-block;
border-radius: $--input-border-radius;
transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
@include input-size-mixin("small");
@include input-size-mixin("medium");
@include input-size-mixin("large");
@include e(suffix, affix) {
transition: opacity .3s $default-cubic-bezier;
transition: opacity .3s $--n-ease-in-out-cubic-bezier;
position: absolute;
line-height: $--input-icon-size;
height: $--input-icon-size;
@ -95,7 +95,7 @@
@include b(icon) {
font-size: $--input-icon-size;;
path {
transition: fill .3s $default-cubic-bezier;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
}
}
top: calc(50% - 9px);
@ -180,19 +180,19 @@
outline: none;
font-family: $--n-font-family;
width: 100%;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: map-get($--input-color, 'default');
caret-color: map-get($--input-caret-color, 'default');
background-color: transparent;
&::placeholder {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
color: map-get($--input-placeholder-color, 'default');
opacity: 1;
}
}
@include e(splitor) {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
color: map-get($--input-color, 'default');
padding-left: 0px;
padding-right: 0px;

8
styles/InputNumber.scss
View File

@ -48,7 +48,7 @@
left: 0;
box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
border-radius: $--input-number-border-radius;
transition: box-shadow .3s $default-cubic-bezier;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
pointer-events: none;
}
@include e(minus-button, add-button) {
@ -67,7 +67,7 @@
fill: map-get($--input-number-button-text-color, 'default');
}
font-size: 14px;
transition: background-color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier;
box-shadow: inset 0 0 0px 1px map-get($--input-number-border-color, 'default');
&:hover ~ {
@include e(border-layer) {
@ -79,7 +79,7 @@
color: map-get($--input-number-button-text-color, 'hover');
}
&:active {
transition: color .3s $default-cubic-bezier, background-color .15s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .15s $--n-ease-in-out-cubic-bezier;
background-color: map-get($--input-number-button-background-color, 'active')
}
@include m(disabled) {
@ -119,7 +119,7 @@
}
}
}
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier;
border: none;
color: map-get($--input-number-text-color, 'default');
width: 100%;

16
styles/Layout.scss
View File

@ -7,7 +7,7 @@
position: relative;
display: flex;
flex-wrap: nowrap;
transition: margin-left .3s $default-cubic-bezier;
transition: margin-left .3s $--n-ease-in-out-cubic-bezier;
flex-direction: column;
overflow: auto;
@include m(has-sider) {
@ -29,7 +29,7 @@
}
@include b(layout-header) {
@include once {
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
box-sizing: border-box;
width: 100%;
@include m(absolute-positioned) {
@ -49,11 +49,11 @@
box-sizing: border-box;
position: relative;
}
transition: margin-left .3s $default-cubic-bezier;
transition: margin-left .3s $--n-ease-in-out-cubic-bezier;
}
@include b(layout-footer) {
@include once {
transition: border-color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
box-sizing: border-box;
@include m(absolute-positioned) {
position: absolute;
@ -70,13 +70,13 @@
@include once {
box-sizing: border-box;
position: relative;
transition: min-width .3s $default-cubic-bezier, max-width .3s $default-cubic-bezier, transform .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: min-width .3s $--n-ease-in-out-cubic-bezier, max-width .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
}
background-color: $--layout-sider-background-color;
@include e(toggle-button) {
@include once {
z-index: 1;
transition: transform .3s $default-cubic-bezier;
transition: transform .3s $--n-ease-in-out-cubic-bezier;
cursor: pointer;
width: 36px;
height: 36px;
@ -87,7 +87,7 @@
}
path {
@include once {
transition: fill .3s $default-cubic-bezier;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
}
fill: $--layout-sider-toggle-button-fill;
}
@ -95,7 +95,7 @@
@include once {
@include e(content) {
opacity: 0;
transition: opacity .3s $default-cubic-bezier;
transition: opacity .3s $--n-ease-in-out-cubic-bezier;
}
}
@include once {

6
styles/List.scss
View File

@ -4,7 +4,7 @@
@include b(list) {
@include once {
font-size: 14px;
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
padding: 0;
list-style-type: none;
}
@ -36,7 +36,7 @@
@include once {
padding: 12px 0;
box-sizing: border-box;
transition: border-color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
}
&:not(:last-child) {
border-bottom: 1px solid $--n-border-color;
@ -49,7 +49,7 @@
display: flex;
flex-wrap: nowrap;
align-items: center;
transition: border-color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
@include e(prefix) {
margin-right: 20px;
flex: 0;

4
styles/Log.scss
View File

@ -7,7 +7,7 @@
font-size: 14px;
color: $--n-secondary-text-color;
box-sizing: border-box;
transition: border-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
@include b(scrollbar) {
@include b(scrollbar-content) {
// padding-top: 8px;
@ -30,7 +30,7 @@
}
@include b(log-loader) {
@include fade-in-width-expand-transition($duration: .3s, $delay: 0s);
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
box-sizing: border-box;
border: 1px solid $--n-border-color;
position: absolute;

6
styles/Menu.scss
View File

@ -10,14 +10,14 @@ $layout-nav-height: 64px;
width: 100%;
transition:width .3s;
@include b(menu-container) {
transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: transform .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
@include b(menu-divider) {
margin: 0px 25px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
@include b(menu-content) {
overflow: hidden;
transition: opacity .3s $default-cubic-bezier;
transition: opacity .3s $--n-ease-in-out-cubic-bezier;
@include b(menu-list) {
list-style: none;
@ -98,7 +98,7 @@ $layout-nav-height: 64px;
top: calc(50% - 3px);
transform: rotate(45deg) ;
transform-origin: 25% 25%;
transition: transform 0.3s $default-cubic-bezier, opacity 0.3s $default-cubic-bezier;
transition: transform 0.3s $--n-ease-in-out-cubic-bezier, opacity 0.3s $--n-ease-in-out-cubic-bezier;
}
@include m(collapsed) {
&::after {

2
styles/Message.scss
View File

@ -32,7 +32,7 @@
@include b(message) {
@include once {
display: flex;
transition: color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, transform .3s $default-cubic-bezier, max-height .3s $default-cubic-bezier, margin-bottom .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier, max-height .3s $--n-ease-in-out-cubic-bezier, margin-bottom .3s $--n-ease-in-out-cubic-bezier;
max-height: 40px;
opacity: 1;
margin-bottom: 12px;

24
styles/NimbusServiceLayout.scss
View File

@ -20,7 +20,7 @@
box-sizing: border-box;
border-bottom: 1px solid $service-layout-border-color;
// box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.1),0px 1px 3px 0px rgba(0,0,0,0.17);
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
height: $layout-nav-height;
}
@include e(body) {
@ -32,7 +32,7 @@
bottom: 0;
overflow: hidden;
background-color: $service-layout-body-background-color;
transition: background-color .3s $default-cubic-bezier, left .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, left .3s $--n-ease-in-out-cubic-bezier;
@include m(active) {
left: 272px;
}
@ -55,19 +55,19 @@
top: 0;
bottom: 0;
left: 0;
transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: transform .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
// box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .2);
@include b(nimbus-service-layout-drawer-divider) {
margin: 0px 25px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
@include e(toggle-button) {
transition: transform .3s $default-cubic-bezier;
transition: transform .3s $--n-ease-in-out-cubic-bezier;
cursor: pointer;
width: 36px;
height: 36px;
path {
transition: fill .3s $default-cubic-bezier;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
fill: $service-layout-toggle-button-color;
}
position: absolute;
@ -81,7 +81,7 @@
left: 0;
right: 0;
overflow: hidden;
transition: opacity .3s $default-cubic-bezier;
transition: opacity .3s $--n-ease-in-out-cubic-bezier;
@include b(nimbus-service-layout-drawer-header) {
position: relative;
font-weight: 700;
@ -120,7 +120,7 @@
}
}
span {
transition: opacity 0.3s $default-cubic-bezier, color 0.3s $default-cubic-bezier;
transition: opacity 0.3s $--n-ease-in-out-cubic-bezier, color 0.3s $--n-ease-in-out-cubic-bezier;
opacity: 1;
}
@include m(active) {
@ -145,7 +145,7 @@
top: 0;
bottom: 0;
z-index: -1;
transition: opacity 0.3s $default-cubic-bezier, background-position .3s $default-cubic-bezier;
transition: opacity 0.3s $--n-ease-in-out-cubic-bezier, background-position .3s $--n-ease-in-out-cubic-bezier;
opacity: 0;
}
@include m(active) {
@ -165,7 +165,7 @@
top: calc(50% - 1px);
transform: rotate(45deg);
transform-origin: 25% 25%;
transition: transform 0.3s $default-cubic-bezier, opacity 0.3s $default-cubic-bezier;
transition: transform 0.3s $--n-ease-in-out-cubic-bezier, opacity 0.3s $--n-ease-in-out-cubic-bezier;
}
// @include m(group-item-is-choosed) {
// span {
@ -184,7 +184,7 @@
}
@include b(nimbus-service-layout-drawer-group-items) {
overflow: hidden;
transition: max-height .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier;
transition: max-height .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
opacity: 1;
@include m(collapsed) {
max-height: 0;
@ -195,7 +195,7 @@
@include m(active) {
transform: translateX(0);
opacity: 1;
// transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
// transition: transform .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
@include e(toggle-button) {
transform: translateX(50%) translateY(-50%) rotate(0deg);
}
@ -206,7 +206,7 @@
@include m(collapsed) {
opacity: 1;
transform: translateX(-224px);
// transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
// transition: transform .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
pointer-events: none;
@include e(toggle-button) {
transform: translateX(50%) translateY(-50%) rotate(180deg);

22
styles/Notification.scss
View File

@ -47,13 +47,13 @@
color: $--notification-text-color;
@include once {
transition:
background-color .3s $default-cubic-bezier,
color .3s $default-cubic-bezier,
opacity .3s $default-cubic-bezier,
transform .3s $default-cubic-bezier,
max-height .3s $default-cubic-bezier,
background-color .3s $--n-ease-in-out-cubic-bezier,
color .3s $--n-ease-in-out-cubic-bezier,
opacity .3s $--n-ease-in-out-cubic-bezier,
transform .3s $--n-ease-in-out-cubic-bezier,
max-height .3s $--n-ease-in-out-cubic-bezier,
margin-bottom .3s linear,
box-shadow .3s $default-cubic-bezier;
box-shadow .3s $--n-ease-in-out-cubic-bezier;
font-family: $--n-font-family;
font-size: 14px;
font-weight: 400;
@ -130,7 +130,7 @@
@include once {
font-weight: 700;
font-size: 16px;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: $--notification-header-text-color;
}
@ -138,7 +138,7 @@
@include once {
margin-top: 8px;
font-size: 12px;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: $--notification-description-text-color;
}
@ -152,7 +152,7 @@
}
white-space: pre-wrap;
word-wrap: break-word;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: $--notification-content-text-color;
}
@ -163,14 +163,14 @@
@include e(meta) {
@include once {
font-size: 12px;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: $--notification-description-text-color;
}
@include e(action) {
@include once {
cursor: pointer;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: $--notification-action-text-color;
}

6
styles/Pagination.scss
View File

@ -28,7 +28,7 @@
display: flex;
width: 110px;
line-height: 28px;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include b(input) {
margin: 0 8px;
input {
@ -50,14 +50,14 @@
padding-right: 4px;
box-sizing: border-box;
opacity: 1;
transition: color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
display: flex;
align-items: center;
justify-content: center;
border-radius:6px;
line-height: 28px;
path {
transition: fill .3s $default-cubic-bezier;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
}
&:not(:last-child) {
margin-right: 10px;

4
styles/Popover.scss
View File

@ -22,14 +22,14 @@
@include b(popover-content) {
@include once {
@include popover-content-transition;
transition: background-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
transform-origin: inherit;
transform: scale(.99999);
position: relative;
border-radius: 6px;
font-size: 13px;
@include b(popover-arrow) {
transition: border-color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
border-width: 6px;
pointer-events: none;
position: absolute;

22
styles/Progress.scss
View File

@ -97,7 +97,7 @@
height: 18px;
line-height: 18px;
font-size: 18px;
transition: fill .3s $default-cubic-bezier;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
@include m(as-text) {
text-align: center;
width: 40px;
@ -126,7 +126,7 @@
align-items: center;
color: inherit;
font-size: 36px;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
@include b(progress-icon) {
position: absolute;
@ -141,7 +141,7 @@
@include b(progress-text) {
white-space: nowrap;
font-weight: 700;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include e(percentage) {
color: inherit;
font-size: 28px;
@ -157,7 +157,7 @@
width: 200px;
color: inherit;
@include b(progress-text) {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
position: absolute;
left: 50%;
top: 50%;
@ -186,12 +186,12 @@
vertical-align: bottom;
}
@include b(progress-graph-circle-fill) {
transition: stroke .3s $default-cubic-bezier, stroke-dasharray .3s $default-cubic-bezier;
transition: stroke .3s $--n-ease-in-out-cubic-bezier, stroke-dasharray .3s $--n-ease-in-out-cubic-bezier;
}
}
@include b(progress-graph-circle-rail) {
@include once {
transition: stroke .3s $default-cubic-bezier;
transition: stroke .3s $--n-ease-in-out-cubic-bezier;
}
stroke: $--progress-rail-color;
}
@ -211,7 +211,7 @@
@include b(progress-graph-line-indicator) {
@include once {
background-color: transparent;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
white-space: nowrap;
text-align: right;
font-weight: 700;
@ -230,7 +230,7 @@
display: flex;
align-items: center;
@include b(progress-graph-line-rail) {
transition: background-color .3s $default-cubic-bezier, right .2s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, right .2s $--n-ease-in-out-cubic-bezier;
flex: 1;
}
}
@ -239,7 +239,7 @@
transform: translateZ(0); // to avoid strange offset
display: flex;
vertical-align: middle;
transition: right .2s $default-cubic-bezier, color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
transition: right .2s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
height: 21px;
line-height: 21px;
padding: 0 10px;
@ -264,11 +264,11 @@
height: 10px;
width: 100%;
max-width: 0%;
transition: background-color .3s $default-cubic-bezier, max-width .2s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, max-width .2s $--n-ease-in-out-cubic-bezier;
}
}
background-color: $--progress-rail-color;
transition: background-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
}
}
}

14
styles/Radio.scss
View File

@ -29,7 +29,7 @@
}
@include e(control) {
box-shadow: map-get($--radio-box-shadow, 'default');
transition: box-shadow .3s $default-cubic-bezier;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
height: 14px;
width: 14px;
border-radius: 7px;
@ -67,7 +67,7 @@
&:hover {
@include e(control) {
box-shadow: map-get($--radio-box-shadow, 'hover');
transition: box-shadow .3s $default-cubic-bezier;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
}
}
&:focus:not(:active) {
@ -81,7 +81,7 @@
cursor: not-allowed;
@include e(control) {
box-shadow: map-get($--radio-box-shadow, 'disabled');
transition: box-shadow .3s $default-cubic-bezier;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
&::before {
transform: scale(.8);
transform-origin: center;
@ -126,12 +126,12 @@
padding-left: 14px;
padding-right: 14px;
white-space: nowrap;
transition: background-color .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier, color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier;
@include e(border-mask) {
pointer-events: none;
position: absolute;
box-shadow: inset 0 0 0 $--radio-border-mask-width transparent;
transition: box-shadow .3s $default-cubic-bezier;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
left: -1px;
bottom: -1px;
right: -1px;
@ -172,7 +172,7 @@
@include e(border-mask) {
box-shadow: map-get($--radio-button-box-shadow, 'hover');
@include once {
transition: box-shadow .3s $default-cubic-bezier;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
}
}
@include not-m(checked) {
@ -203,7 +203,7 @@
vertical-align: bottom;
height: 28px;
width: 1px;
transition: background-color .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
}
background-color: map-get($--radio-button-border-color, 'default');
@include m(checked) {

4
styles/Result.scss
View File

@ -19,7 +19,7 @@
@include result-status-mixin('error');
@include once {
font-size: 14px;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include b(result-icon) {
display: flex;
justify-content: center;
@ -42,7 +42,7 @@
margin-top: 16px;
font-size: 32px;
font-weight: 700;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
text-align: center;
}
color: $--result-header-text-color;

2
styles/Scrollbar.scss
View File

@ -67,7 +67,7 @@
cursor: pointer;
}
background-color: map-get($scrollbar-color, 'default');
transition: background-color .2s $default-cubic-bezier;
transition: background-color .2s $--n-ease-in-out-cubic-bezier;
&:hover {
background-color: map-get($scrollbar-color, 'hover');
}

8
styles/Slider.scss
View File

@ -66,7 +66,7 @@
}
height: $--slider-rail-height;
background-color: map-get($--slider-rail-background-color, 'default');
transition: background-color .2s $default-cubic-bezier;
transition: background-color .2s $--n-ease-in-out-cubic-bezier;
border-radius: $--slider-rail-height / 2;
@include e(fill) {
@include once {
@ -74,7 +74,7 @@
top: 0;
bottom: 0;
border-radius: $--slider-rail-height / 2;
transition: background-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
}
background-color: map-get($--slider-rail-fill-background-color, 'default');
}
@ -85,7 +85,7 @@
height: $--slider-handle-size;
width: $--slider-handle-size;
border-radius: $--slider-handle-size / 2;
transition: box-shadow .2s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
transition: box-shadow .2s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
position: absolute;
top: 0;
transform: translateX(-50%);
@ -113,7 +113,7 @@
}
@include b(slider-dot) {
@include once {
transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
transition: box-shadow .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
position: absolute;
transform: translateX(-50%) translateY(-50%);
height: $--slider-dot-size;

2
styles/Spin.scss
View File

@ -59,7 +59,7 @@
}
@include b(spin-content) {
opacity: 1;
transition: opacity .2s $default-cubic-bezier;
transition: opacity .2s $--n-ease-in-out-cubic-bezier;
@include m(spinning) {
opacity: .5;
}

12
styles/Statistic.scss
View File

@ -13,13 +13,13 @@
@include e(prefix) {
@include once {
font-size: 18px;
transition: .3s color $default-cubic-bezier;
transition: .3s color $--n-ease-in-out-cubic-bezier;
}
color: $--statistic-value-prefix-text-color;
@include b(icon) {
@include once {
vertical-align: -0.125em;
transition: .3s fill $default-cubic-bezier;
transition: .3s fill $--n-ease-in-out-cubic-bezier;
}
fill: $--statistic-value-prefix-text-color;
}
@ -27,20 +27,20 @@
@include e(content) {
@include once {
font-size: 24px;
transition: .3s color $default-cubic-bezier;
transition: .3s color $--n-ease-in-out-cubic-bezier;
}
color: $--statistic-value-content-text-color;
}
@include e(suffix) {
@include once {
font-size: 18px;
transition: .3s color $default-cubic-bezier;
transition: .3s color $--n-ease-in-out-cubic-bezier;
}
color: $--statistic-value-suffix-text-color;
@include b(icon) {
@include once {
vertical-align: -0.125em;
transition: .3s fill $default-cubic-bezier;
transition: .3s fill $--n-ease-in-out-cubic-bezier;
}
fill: $--statistic-value-prefix-text-color;
}
@ -49,7 +49,7 @@
@include e(label) {
@include once {
font-weight: 700;
transition: .3s color $default-cubic-bezier;
transition: .3s color $--n-ease-in-out-cubic-bezier;
font-size: 14px;
}
color: $--statistic-value-label-text-color;

10
styles/Steps.scss
View File

@ -100,7 +100,7 @@ $--steps-indicator-icon-size: (
width: 100%;
display: flex;
@include b(step-splitor) {
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
height: 1px;
flex: 1;
align-self: flex-start;
@ -110,7 +110,7 @@ $--steps-indicator-icon-size: (
@include b(step-content) {
flex: 1;
@include b(step-content-header) {
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
position: relative;
display: flex;
font-weight: 700;
@ -121,13 +121,13 @@ $--steps-indicator-icon-size: (
}
}
@include e(description) {
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
margin-top: 12px;
margin-left: 9px;
}
}
@include b(step-indicator) {
transition: background-color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier;
display: flex;
align-items: center;
justify-content: center;
@ -137,7 +137,7 @@ $--steps-indicator-icon-size: (
@include icon-switch-transition();
display: inline-block;
text-align: center;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
position: absolute;
left: 0;
top: 0;

4
styles/Switch.scss
View File

@ -17,7 +17,7 @@
width: 30px;
border-radius: 7px;
margin: 3px;
transition: background-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
&::before, &::after {
box-sizing: border-box;
cursor: inherit;
@ -30,7 +30,7 @@
top: -3px;
left: -3px;
background-size: 800% 800%;
transition: left .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, max-width .3s $default-cubic-bezier, background-position .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier;
transition: left .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier, max-width .3s $--n-ease-in-out-cubic-bezier, background-position .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier;
}
&::before {
opacity: 1;

16
styles/Tabs.scss
View File

@ -26,7 +26,7 @@ $--tabs-tab-font-size: (
@include tabs-size-mixin('large');
@include tabs-size-mixin('huge');
width: 100%;
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
@include m(flex) {
@include b(tabs-nav) {
@include b(tabs-nav-scroll) {
@ -45,7 +45,7 @@ $--tabs-tab-font-size: (
@include once {
display: flex;
background-clip: padding-box;
transition: border-color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
@include b(tabs-nav-scroll) {
overflow: hidden;
}
@ -57,7 +57,7 @@ $--tabs-tab-font-size: (
line-height: 20px;
align-self: center;
cursor: pointer;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include m(left) {
margin-right: 8px;
}
@ -87,7 +87,7 @@ $--tabs-tab-font-size: (
bottom: 2px;
height: 2px;
border-radius: 1px;
transition: left .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier;
transition: left .2s $--n-ease-in-out-cubic-bezier, max-width .2s $--n-ease-in-out-cubic-bezier;
}
background-color: $--tabs-tab-bar-background-color;
}
@ -98,7 +98,7 @@ $--tabs-tab-font-size: (
flex-wrap: nowrap;
display: inline-flex;
align-items: center;
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
@include m(disabled) {
cursor: not-allowed;
}
@ -110,13 +110,13 @@ $--tabs-tab-font-size: (
line-height: 16px;
height: 16px;
cursor: pointer;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
fill: map-get($--tabs-tab-close-button-color, 'default');
}
@include e(label) {
@include once {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: map-get($--tabs-tab-text-color, 'default');
}
@ -126,7 +126,7 @@ $--tabs-tab-font-size: (
@include once {
width: 100%;
margin-top: 8px;
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
}
color: $--tabs-panel-text-color;
}

6
styles/Tag.scss
View File

@ -83,11 +83,11 @@
box-sizing: border-box;
cursor: default;
display: inline-block;
transition: background-color .2s $default-cubic-bezier, color .3s $default-cubic-bezier, box-shadow .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier;
transition: background-color .2s $--n-ease-in-out-cubic-bezier, color .3s $--n-ease-in-out-cubic-bezier, box-shadow .3s $--n-ease-in-out-cubic-bezier, opacity .3s $--n-ease-in-out-cubic-bezier;
@include e(close-mark) {
cursor: pointer;
path {
transition: fill .2s $default-cubic-bezier;
transition: fill .2s $--n-ease-in-out-cubic-bezier;
}
}
@include m(checkable) {
@ -105,7 +105,7 @@
@include m(closable) {
padding-right: 18px;
@include e(close-mark) {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
right: 3px;
top: 50%;
transform: translateY(-50%);

4
styles/Thing.scss
View File

@ -4,7 +4,7 @@
@include b(thing) {
@include once {
display: flex;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
font-size: 14px;
@include b(thing-avatar) {
margin-right: 12px;
@ -25,7 +25,7 @@
@include e(title) {
font-size: 16px;
font-weight: 700;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
@include e(extra) {

2
styles/TimePicker.scss
View File

@ -47,7 +47,7 @@
display: flex;
align-items: center;
justify-content: center;
transition: background-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
background: transparent;
}
color: map-get($--time-picker-text-color, 'default');

10
styles/Timeline.scss
View File

@ -87,7 +87,7 @@ $--timeline-header-margin-top: (
@include b(timeline-item-content) {
@include e(title) {
@include once {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
font-size: 14px;
font-weight: 700;
margin-bottom: 6px;
@ -96,14 +96,14 @@ $--timeline-header-margin-top: (
}
@include e(content) {
@include once {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
font-size: 14px;
}
color: $--timeline-item-content-color;
}
@include e(meta) {
@include once {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
font-size: 12px;
margin-top: 6px;
margin-bottom: 20px;
@ -121,7 +121,7 @@ $--timeline-header-margin-top: (
}
@include once {
@include e(circle) {
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
width: 14px;
height: 14px;
border-radius: 7px;
@ -132,7 +132,7 @@ $--timeline-header-margin-top: (
}
@include e(line) {
@include once {
transition: background-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
position: absolute;
top: 14px;
left: 6px;

14
styles/Transfer.scss
View File

@ -20,7 +20,7 @@
background-clip: padding-box;
width: 182px;
height: 311px;
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
border-radius: 6px;
}
background-color: map-get($--transfer-list-background-color, 'default');
@ -29,7 +29,7 @@
@include once {
box-sizing: border-box;
margin: -1px -1px 0 -1px;
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
display: flex;
border-radius: 6px 6px 0 0;
align-items: center;
@ -53,7 +53,7 @@
line-height: 1;
font-size: 16px;
font-weight: 700;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
}
color: map-get($--transfer-list-header-text-color, 'default');
@include m(disabled) {
@ -62,7 +62,7 @@
}
@include e(extra) {
@include once {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
font-size: 12px;
justify-self: flex-end;
margin-right: 14px;
@ -100,7 +100,7 @@
@include once {
@include fade-in-transition(transfer-list-light-bar);
height: 34px;
transition: top .15s $default-cubic-bezier;
transition: top .15s $--n-ease-in-out-cubic-bezier;
width: 100%;
position: absolute;
}
@ -110,7 +110,7 @@
@include once {
@include slide-right-transition(transfer-list-item-source);
@include slide-left-transition(transfer-list-item-target);
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
position: relative;
cursor: pointer;
max-height: 34px;
@ -172,7 +172,7 @@
@include e(icon) {
@include once {
pointer-events: none;
transition: fill .3s $default-cubic-bezier;
transition: fill .3s $--n-ease-in-out-cubic-bezier;
}
fill: map-get($--transfer-gap-button-background-color, 'default');
}

4
styles/Tree.scss
View File

@ -37,7 +37,7 @@ $tree-content-selected-background-color: main-color-with-alpha(.3);
svg {
width: 12px;
height: 12px;
transition: transform .15s $default-cubic-bezier;
transition: transform .15s $--n-ease-in-out-cubic-bezier;
}
@include m(hide) {
visibility: hidden
@ -70,7 +70,7 @@ $tree-content-selected-background-color: main-color-with-alpha(.3);
padding: 0 6px;
cursor: pointer;
border-radius: 3px;
transition: .2s background-color $default-cubic-bezier, .2s border-color $default-cubic-bezier;
transition: .2s background-color $--n-ease-in-out-cubic-bezier, .2s border-color $--n-ease-in-out-cubic-bezier;
&:hover {
background-color: $tree-content-hover-background-color;
}

16
styles/Typography.scss
View File

@ -45,7 +45,7 @@ $--header-bar-width: (
margin-top: 0
}
margin: map-get($--header-margin, $level);
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
@include m(prefix-bar) {
position: relative;
padding-left: map-get($--header-prefix-width, $level);
@ -113,7 +113,7 @@ $--header-bar-width: (
&:last-child {
margin-bottom: 0;
}
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
margin: 8px 0 8px 0;
font-size: 14px;
line-height: 1.625;
@ -146,25 +146,25 @@ $--header-bar-width: (
}
}
@include b(li) {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
line-height: 1.625em;
margin-bottom: 0px;
font-size: 14px;
color: $--n-secondary-text-color;
}
@include b(a) {
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
color: $--n-primary-color;
text-decoration: underline;
}
@include b(text) {
display: inline-block;
transition: color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier;
color: $--n-secondary-text-color;
@include m(code) {
line-height: 1.4;
font-family: $--n-mono-font-family;
transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
white-space: nowrap;
box-sizing: border-box;
background-clip: padding-box;
@ -202,7 +202,7 @@ $--header-bar-width: (
}
@include b(hr) {
margin: 12px 0;
transition: border-color .3s $default-cubic-bezier;
transition: border-color .3s $--n-ease-in-out-cubic-bezier;
border-top: 1px solid $--n-divider-color;
border-left: none;
border-right: none;
@ -219,7 +219,7 @@ $--header-bar-width: (
margin: 0;
margin-top: 12px;
margin-bottom: 12px;
transition: color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
transition: color .3s $--n-ease-in-out-cubic-bezier, border-color .3s $--n-ease-in-out-cubic-bezier;
border-left: 4px solid $--n-border-color;
padding-left: 12px;
color: $--n-secondary-text-color;

50
styles/themes/vars.scss
View File

@ -184,7 +184,7 @@ $default-text-gradient-warning: linear-gradient(252deg, rgba(247,181,0,1) 0%, rg
$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%);
$default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
$--n-ease-in-out-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
// $scrollbar-color: rgba(255,255,255,0.2);
// $scrollbar-color--hover: rgba(255,255,255,0.3);
@ -228,10 +228,10 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
transform: translateY(0);
}
&.#{$namespace}-#{$name}-leave-active {
transition: opacity .3s $default-cubic-bezier, transform .3s $default-cubic-bezier;
transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier;
}
&.#{$namespace}-#{$name}-enter-active {
transition: opacity .3s $default-cubic-bezier, transform .3s $default-cubic-bezier;
transition: opacity .3s $--n-ease-in-out-cubic-bezier, transform .3s $--n-ease-in-out-cubic-bezier;
}
}
@ -269,10 +269,10 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
@mixin fade-in-transition($block: "fade-in", $enter-duration: .2s, $leave-duration: .2s) {
&.#{$namespace}-#{$block}--transition-enter-active {
transition: all $enter-duration $default-cubic-bezier !important;
transition: all $enter-duration $--n-ease-in-out-cubic-bezier !important;
}
&.#{$namespace}-#{$block}--transition-leave-active {
transition: all $leave-duration $default-cubic-bezier !important;
transition: all $leave-duration $--n-ease-in-out-cubic-bezier !important;
}
&.#{$namespace}-#{$block}--transition-enter,
&.#{$namespace}-#{$block}--transition-leave-to {
@ -290,22 +290,22 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
opacity: 1;
}
&.#{$namespace}-#{$block}--transition-enter-active {
transition: opacity $duration $default-cubic-bezier;
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 $default-cubic-bezier;
transition: opacity $duration $--n-ease-in-out-cubic-bezier;
}
}
@mixin slide-in-from-right-transition($duration: .3s) {
&.#{$namespace}-slide-in-from-right-leave-active {
transition: transform $duration $default-cubic-bezier;
transition: transform $duration $--n-ease-in-out-cubic-bezier;
}
&.#{$namespace}-slide-in-from-right-enter-active {
transition: transform $duration $default-cubic-bezier;
transition: transform $duration $--n-ease-in-out-cubic-bezier;
}
&.#{$namespace}-slide-in-from-right-enter-to {
transform: translateX(0);
@ -323,10 +323,10 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
@mixin slide-right-transition($block, $duration: .3s, $delay: .3s) {
&.#{$namespace}-#{$block}--transition-leave-active {
transition: transform $duration $slow-out-cubic-bezier, max-height $duration $default-cubic-bezier $delay;
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 $default-cubic-bezier;
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);
@ -346,10 +346,10 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
@mixin slide-left-transition($block, $duration: .3s, $delay: .3s) {
&.#{$namespace}-#{$block}--transition-leave-active {
transition: transform $duration $slow-out-cubic-bezier, max-height $duration $default-cubic-bezier $delay;
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 $default-cubic-bezier;
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);
@ -379,30 +379,30 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
&.#{$namespace}-#{$block}-leave-active {
overflow: hidden;
transition:
max-height $duration $default-cubic-bezier,
max-height $duration $--n-ease-in-out-cubic-bezier,
opacity $duration $fast-in-cubic-bezier,
margin-top $duration $default-cubic-bezier,
margin-bottom $duration $default-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 $default-cubic-bezier,
transition: max-height $duration $--n-ease-in-out-cubic-bezier,
opacity $duration $slow-out-cubic-bezier,
margin-top $duration $default-cubic-bezier,
margin-bottom $duration $default-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 $default-cubic-bezier, max-width $duration $default-cubic-bezier $delay,
margin-left $duration $default-cubic-bezier $delay,
margin-right $duration $default-cubic-bezier $delay;
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 $default-cubic-bezier $delay, max-width $duration $default-cubic-bezier,
margin-left $duration $default-cubic-bezier,
margin-right $duration $default-cubic-bezier;
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;