diff --git a/src/app/components/fireblog-page/fireblog-page.component.scss b/src/app/components/fireblog-page/fireblog-page.component.scss index abae0b5..fa91787 100644 --- a/src/app/components/fireblog-page/fireblog-page.component.scss +++ b/src/app/components/fireblog-page/fireblog-page.component.scss @@ -76,6 +76,7 @@ } h2 { + @include shine-effect; @include title-text; text-align: center; color: $blueviolet; diff --git a/src/app/views/auth/auth/auth.component.scss b/src/app/views/auth/auth/auth.component.scss index bcbb4cb..289d3af 100644 --- a/src/app/views/auth/auth/auth.component.scss +++ b/src/app/views/auth/auth/auth.component.scss @@ -1,37 +1,8 @@ @use '../../../../partials/_variables.scss' as *; @use '../../../../partials/mixins' as *; -// Shine effect mixin -@mixin shine-effect { - position: relative; - overflow: hidden; - &::after { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: linear-gradient( - to right, - rgba(255, 255, 255, 0) 0%, - rgba(255, 255, 255, 0.3) 50%, - rgba(255, 255, 255, 0) 100% - ); - transform: rotate(30deg); - animation: shine 3s infinite linear; - } -} -@keyframes shine { - 0% { - transform: translateX(-100%) rotate(30deg); - } - 100% { - transform: translateX(100%) rotate(30deg); - } -} main { height: 100%; diff --git a/src/partials/_mixins.scss b/src/partials/_mixins.scss index ce5671c..d4c3f22 100644 --- a/src/partials/_mixins.scss +++ b/src/partials/_mixins.scss @@ -123,3 +123,33 @@ } } +@mixin shine-effect { + position: relative; + overflow: hidden; + + &::after { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + to right, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.3) 50%, + rgba(255, 255, 255, 0) 100% + ); + transform: rotate(30deg); + animation: shine 3s infinite linear; + } +} + +@keyframes shine { + 0% { + transform: translateX(-100%) rotate(30deg); + } + 100% { + transform: translateX(100%) rotate(30deg); + } +}