flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Buttons: Change text direction on hover

Browse Source
This commit is contained in:
Félix Péault
2020-03-06 11:14:13 +01:00
parent c63c7a5826
commit 9a5c8a135e
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/style/atoms/_button-outline.scss
View File

@@ -39,7 +39,7 @@
top: 50%; top: 50%;
left: 0; left: 0;
right: 0; right: 0;
transform: translateY(-120%); transform: translateY(100%);
} }
span, &:after { span, &:after {
@@ -61,7 +61,7 @@
span { span {
opacity: 0; opacity: 0;
transform: translateY(100%); transform: translateY(-75%);
} }
.text:after { .text:after {
opacity: 1; opacity: 1;

4
src/style/atoms/_button.scss
View File

@@ -60,7 +60,7 @@
top: 50%; top: 50%;
left: 0; left: 0;
width: 100%; width: 100%;
transform: translateY(-120%); transform: translateY(100%);
} }
} }
@@ -86,7 +86,7 @@
.text { .text {
span { span {
opacity: 0; opacity: 0;
transform: translateY(100%); transform: translateY(-75%);
} }
&:after { &:after {
opacity: 1; opacity: 1;

4
src/style/atoms/_link.scss
View File

@@ -88,7 +88,7 @@
span { span {
display: inline-block; display: inline-block;
transform: translateY(-75%); transform: translateY(100%);
opacity: 0; opacity: 0;
transition: all 275ms $ease-cubic; transition: all 275ms $ease-cubic;
will-change: transform, opacity; will-change: transform, opacity;
@@ -99,7 +99,7 @@
&:hover { &:hover {
.text { .text {
&:after { &:after {
transform: translateY(25%); transform: translateY(-75%);
opacity: 0; opacity: 0;
} }