IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added some transitions, animations and some more shadow variant to the styleguide

Browse Source
This commit is contained in:
Grzegorz Leoniec 2019-01-11 14:53:57 +01:00
parent 331ea6d0c1
commit c144e12229
No known key found for this signature in database
GPG Key ID: 3AA43686D4EB1377
4 changed files with 89 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
styleguide/src/system/styles/shared.scss
View File

@ -16,3 +16,5 @@
@import "./shared/background";
@import "./shared/spacing";
@import "./shared/form";
@import "./shared/transitions";
@import "./shared/animations";

19
styleguide/src/system/styles/shared/_animations.scss Normal file
View File

@ -0,0 +1,19 @@
@keyframes ds-animation-shake {
from, to {
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
transform: translate3d(-5px, 0, 0);
}
20%, 40%, 60%, 80% {
transform: translate3d(5px, 0, 0);
}
}
.ds-animated {
animation-duration: 0.8s;
animation-fill-mode: both;
}
.ds-animation-shake {
animation-name: ds-animation-shake;
}

66
styleguide/src/system/styles/shared/_transitions.scss Normal file
View File

@ -0,0 +1,66 @@
$easeOut: cubic-bezier(0.19, 1, 0.22, 1);
// slide up ease
.ds-transition-slide-up-enter-active {
transition: all 500ms $easeOut;
transition-delay: 20ms;
opacity: 1;
transform: translateY(0);
}
.ds-transition-slide-up-enter,
.ds-transition-slide-up-leave-active {
opacity: 0;
box-shadow: none;
transform: translateY(15px);
}
// slide next / prev
.ds-transition-slide-next-enter-active,
.ds-transition-slide-prev-enter-active {
transition: transform 500ms $easeOut, opacity 500ms $easeOut;
transition-delay: 100ms;
opacity: 1;
}
.ds-transition-slide-next-enter,
.ds-transition-slide-next-leave-active {
opacity: 0;
transform: translateX(10px);
}
.ds-transition-slide-prev-enter,
.ds-transition-slide-prev-leave-active {
opacity: 0;
transform: translateX(-10px);
}
.ds-transition-slide-next-leave-active,
.ds-transition-slide-prev-leave-active {
display: none;
}
.ds-transition-slide-next-leave-active,
.ds-transition-slide-prev-leave-active {
opacity: 0;
transform: translateX(-2px);
transition: transform 100ms $easeOut, opacity 100ms $easeOut;
}
.ds-transition-fade-delayed-leave-active {
transition: opacity 0ms;
transition-delay: 0ms;
}
.ds-transition-fade-delayed-enter-active {
transition: opacity 300ms ease-out;
transition-delay: 100ms;
opacity: 1;
}
.ds-transition-fade-delayed-enter,
.ds-transition-fade-delayed-leave-active {
opacity: 0.1;
}
.ds-transition-fade-enter-active,
.ds-transition-fade-leave-active {
transition: opacity 200ms;
}
.ds-transition-fade-enter,
.ds-transition-fade-leave-to {
opacity: 0;
}

2
styleguide/src/system/tokens/_examples/dark-purple/box-shadow.yml
View File

@ -5,6 +5,8 @@
#
props:
- name: box-shadow-x-large
value: "0 40px 120px 0 rgba(0, 0, 0, .8)"
- name: box-shadow-large
value: "0 20px 60px 0 rgba(0, 0, 0, .8)"
- name: box-shadow-base