Faster transitions
This commit is contained in:
parent
9794a09f12
commit
0a099bca72
@ -64,7 +64,7 @@
|
|||||||
border-radius 3px
|
border-radius 3px
|
||||||
box-shadow 4px 4px 8px rgba(0, 0, 0, 0.12)
|
box-shadow 4px 4px 8px rgba(0, 0, 0, 0.12)
|
||||||
filter saturate(100%)
|
filter saturate(100%)
|
||||||
transition all 290ms ease
|
transition all transitionSpeed ease
|
||||||
&:hover
|
&:hover
|
||||||
filter saturate(130%)
|
filter saturate(130%)
|
||||||
box-shadow 6px 6px 12px rgba(0, 0, 0, 0.2)
|
box-shadow 6px 6px 12px rgba(0, 0, 0, 0.2)
|
||||||
|
@ -29,7 +29,7 @@
|
|||||||
border-radius 3px
|
border-radius 3px
|
||||||
box-shadow 0px 0px 8px rgba(0, 0, 0, 0.4)
|
box-shadow 0px 0px 8px rgba(0, 0, 0, 0.4)
|
||||||
transform translate(10%, -50%)
|
transform translate(10%, -50%)
|
||||||
transition all 290ms ease
|
transition all transitionSpeed ease
|
||||||
pointer-events none
|
pointer-events none
|
||||||
|
|
||||||
.anime
|
.anime
|
||||||
|
@ -13,7 +13,7 @@ body
|
|||||||
|
|
||||||
a
|
a
|
||||||
text-decoration none
|
text-decoration none
|
||||||
transition all 290ms ease
|
transition all transitionSpeed ease
|
||||||
&:hover
|
&:hover
|
||||||
text-decoration none
|
text-decoration none
|
||||||
&:active
|
&:active
|
||||||
|
@ -10,4 +10,6 @@ uiBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0,
|
|||||||
uiHoverBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
|
uiHoverBackground = linear-gradient(to bottom, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.027) 100%)
|
||||||
outlineShadowLight = 0 0 6px rgba(0, 0, 0, 0.05)
|
outlineShadowLight = 0 0 6px rgba(0, 0, 0, 0.05)
|
||||||
outlineShadowMedium = 0 0 6px rgba(0, 0, 0, 0.15)
|
outlineShadowMedium = 0 0 6px rgba(0, 0, 0, 0.15)
|
||||||
outlineShadowHeavy = 0 0 6px rgba(0, 0, 0, 0.4)
|
outlineShadowHeavy = 0 0 6px rgba(0, 0, 0, 0.4)
|
||||||
|
transitionSpeed = 290ms
|
||||||
|
fadeSpeed = 200ms
|
@ -1,6 +1,6 @@
|
|||||||
.fade
|
.fade
|
||||||
opacity 1
|
opacity 1
|
||||||
transition opacity 200ms ease
|
transition opacity fadeSpeed ease
|
||||||
will-change opacity
|
will-change opacity
|
||||||
|
|
||||||
.fade-out
|
.fade-out
|
||||||
|
@ -31,7 +31,7 @@ button
|
|||||||
box-shadow none
|
box-shadow none
|
||||||
border none
|
border none
|
||||||
text-align center
|
text-align center
|
||||||
transition all 290ms ease
|
transition all transitionSpeed ease
|
||||||
width 100%
|
width 100%
|
||||||
max-width none
|
max-width none
|
||||||
|
|
||||||
|
@ -26,7 +26,7 @@
|
|||||||
border uiHoverBorder
|
border uiHoverBorder
|
||||||
background uiHoverBackground
|
background uiHoverBackground
|
||||||
box-shadow outlineShadowMedium
|
box-shadow outlineShadowMedium
|
||||||
transform scale(1.04)
|
transform scale(1.03)
|
||||||
// .grid-icon
|
// .grid-icon
|
||||||
// transform scale(1.3)
|
// transform scale(1.3)
|
||||||
|
|
||||||
@ -50,7 +50,6 @@
|
|||||||
margin-top 2rem
|
margin-top 2rem
|
||||||
margin-bottom 0.7rem
|
margin-bottom 0.7rem
|
||||||
color linkColor
|
color linkColor
|
||||||
transition transform 200ms ease-in-out
|
|
||||||
|
|
||||||
.grid-image
|
.grid-image
|
||||||
width 100%
|
width 100%
|
||||||
|
@ -20,7 +20,7 @@
|
|||||||
margin-top 0
|
margin-top 0
|
||||||
height 3px
|
height 3px
|
||||||
width 0px
|
width 0px
|
||||||
transition all 500ms ease
|
transition all transitionSpeed ease
|
||||||
&.active
|
&.active
|
||||||
&:hover
|
&:hover
|
||||||
cursor pointer
|
cursor pointer
|
||||||
@ -33,4 +33,4 @@
|
|||||||
padding 0.75em 1em
|
padding 0.75em 1em
|
||||||
font-size 1.1em
|
font-size 1.1em
|
||||||
line-height 1em
|
line-height 1em
|
||||||
transition all 290ms ease
|
// transition all transitionSpeed ease
|
Loading…
Reference in New Issue
Block a user