footer インタラクション作成してSCSS共通化

Fumito Abe · Fumito Abe · commit 2ca2752091b8 · 2020-11-14T16:13:26.000+09:00
diff --git a/src/assets/scss/_index.scss b/src/assets/scss/_index.scss
@@ -1,4 +1,6 @@
 @import 'color';
 @import 'font';
 @import 'breakpoint';
-@import 'wordpress-article';
+@import 'wordpress-article';
+@import 'transition';
+@import 'mixins';
diff --git a/src/assets/scss/_mixins.scss b/src/assets/scss/_mixins.scss
@@ -0,0 +1,53 @@
+@mixin linkList {
+  .c-footer-list {
+    list-style: none;
+    padding-left: 14px;
+  
+    &__item {
+      position: relative;
+      font-size: 0.87rem;
+      line-height: 18px;
+      margin-bottom: 1.4rem;
+      &:before {
+        position: absolute;
+        top: 50%;
+        left: -20px;
+        content: '';
+        display: block;
+        color: #fff;
+        width: 10px;
+        height: 1px;
+        background: $mid-gray-2;
+        transition: $soease;
+        transform: scaleX(0);
+        transform-origin: left center;
+      }
+      &:hover::before {
+        transform: scaleX(1);
+        transform-origin: right center;
+      }
+      &:after {
+        position: absolute;
+        top: 50%;
+        left: -20px;
+        content: '';
+        display: block;
+        color: #fff;
+        width: 10px;
+        height: 1px;
+        background: $mid-gray-2;
+        transition: $soease;
+        opacity: 0.5;
+      }
+    } //&__list-item
+  
+    &__link {
+      text-decoration: none;
+      color: $white;
+      transition: $soease;
+      &:hover {
+        color: $mid-gray-2;
+      }
+    }
+  } // c-footer-list
+}
diff --git a/src/assets/scss/_transition.scss b/src/assets/scss/_transition.scss
@@ -0,0 +1 @@
+$soease: all 0.4s cubic-bezier(0.76, 0, 0.3, 1);
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -239,37 +239,7 @@ if (process.client) {
 } // c-footer-menu
 
 // メニューのリスト
-.c-footer-list {
-  list-style: none;
-  padding-left: 14px;
-
-  &__item {
-    position: relative;
-    font-size: 0.87rem;
-    line-height: 28px;
-    margin-bottom: 0.5rem;
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: -12px;
-      content: '';
-      display: block;
-      color: #fff;
-      width: 5px;
-      height: 1px;
-      background: $mid-gray-2;
-    }
-  } //&__list-item
-
-  &__link {
-    text-decoration: none;
-    color: $white;
-    transition: all 0.3s ease;
-    &:hover {
-      color: $mid-gray-2;
-    }
-  }
-} // c-footer-list
+@include linkList;
 
 .sns-link {
   margin: 16px 0 40px 0;
diff --git a/src/components/FooterBlog.vue b/src/components/FooterBlog.vue
@@ -28,37 +28,5 @@ query ($page: Int) {
 </static-query>
 
 <style lang="scss" scoped>
-// メニューのリスト
-.c-footer-list {
-  list-style: none;
-  padding-left: 14px;
-
-  &__item {
-    position: relative;
-    font-size: 0.87rem;
-    line-height: 18px;
-    margin-bottom: 0.6rem;
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: -12px;
-      content: '';
-      display: block;
-      color: #fff;
-      width: 5px;
-      height: 1px;
-      background: $mid-gray-2;
-    }
-  } //&__list-item
-
-  &__link {
-    text-decoration: none;
-    color: $white;
-    transition: all 0.3s ease;
-    &:hover {
-      color: $mid-gray-2;
-    }
-  }
-} // c-footer-list
-
+  @include linkList;
 </style>
diff --git a/src/components/FooterWorks.vue b/src/components/FooterWorks.vue
@@ -31,37 +31,5 @@ query ($page: Int) {
 </static-query>
 
 <style lang="scss" scoped>
-// メニューのリスト
-.c-footer-list {
-  list-style: none;
-  padding-left: 14px;
-
-  &__item {
-    position: relative;
-    font-size: 0.87rem;
-    line-height: 18px;
-    margin-bottom: 0.6rem;
-    &:before {
-      position: absolute;
-      top: 50%;
-      left: -12px;
-      content: '';
-      display: block;
-      color: #fff;
-      width: 5px;
-      height: 1px;
-      background: $mid-gray-2;
-    }
-  } //&__list-item
-
-  &__link {
-    text-decoration: none;
-    color: $white;
-    transition: all 0.3s ease;
-    &:hover {
-      color: $mid-gray-2;
-    }
-  }
-} // c-footer-list
-
+  @include linkList;
 </style>

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+$soease: all 0.4s cubic-bezier(0.76, 0, 0.3, 1);`