RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

no quiero AAA

Browse Source
This commit is contained in:
srgooglo 2020-08-26 20:41:01 +02:00
parent 6e54a6907b
commit 9f2e4225fc
1 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/UserProfile/components/Follow_btn.scss
View File

@ -1,4 +1,4 @@
$width: 120px; $width: 120px;
$height: 40px; $height: 40px;
$border: 0; $border: 0;
@ -7,36 +7,36 @@ $orange: #ff7159;
$border-radius: 8px; $border-radius: 8px;
$deg: 120deg; $deg: 120deg;
$size: 400%; $size: 400%;
$dur: 15s; $dur: 15s;
@mixin clip-frame($width, $height, $border) { @mixin clip-frame($width, $height, $border) {
-webkit-clip-path: polygon(0% 100%, $border 100%, $border $border, $width - $border $border, $width - $border $height - $border, $border $height - $border, $border 100%, 100% 100%, 100% 0%, 0% 0%); -webkit-clip-path: polygon(0% 100%, $border 100%, $border $border, $width - $border $border, $width - $border $height - $border, $border $height - $border, $border 100%, 100% 100%, 100% 0%, 0% 0%);
} }
.like_btn { .like_btn {
width: 100px; width: 100px;
height: 30px; height: 30px;
line-height: 28px; line-height: 28px;
padding: 5px 15px 5px 15px; padding: 5px 15px 5px 15px;
@extend .text-formatting; @extend .text-formatting;
&:hover {
color: #7e7e7e;
}
&.nofollowed {
&:hover { &:hover {
color: #7e7e7e; border: none;
} content: '';
color: white;
&.nofollowed{ border-radius: $border-radius;
&:hover { background: linear-gradient($deg, $violet, $orange, $violet);
border: none; background-size: $size $size;
content: ''; animation: gradient $dur ease-in-out infinite, border 1s forwards ease-in-out reverse;
color: white;
border-radius: $border-radius;
background: linear-gradient($deg, $violet, $orange, $violet);
background-size: $size $size;
animation: gradient $dur ease-in-out infinite, border 1s forwards ease-in-out reverse;
}
} }
}
} }
/* helpers */ /* helpers */
@ -51,7 +51,15 @@ $dur: 15s;
/* motion */ /* motion */
@keyframes gradient { @keyframes gradient {
0% { background-position: 14% 0%; } 0% {
50% { background-position: 87% 100%; } background-position: 14% 0%;
100% { background-position: 14% 0%; } }
50% {
background-position: 87% 100%;
}
100% {
background-position: 14% 0%;
}
} }