プロフィール内タブのデザイン調整

2020-10-24 15:40:11 +09:00
parent b50a15c109
commit 581ae56173
2 changed files with 10 additions and 2 deletions
--- a/resources/assets/sass/_underline-tabs.scss
+++ b/resources/assets/sass/_underline-tabs.scss
@@ -3,14 +3,22 @@

    .nav-link {
        padding: 0.5rem 1.25rem;
-        border-bottom: 4px solid transparent;
+        color: $secondary;
+        border-bottom: 2px solid transparent;
+        transition: border-bottom-color .12s ease-in;

        @include media-breakpoint-up(lg) {
            padding: 1rem 1.25rem;
        }

        &.active {
+            color: $primary;
            border-bottom-color: $primary;
        }
+
+        &:not(.active):hover {
+            border-bottom-color: transparentize($secondary, 0.3);
+            transition: border-bottom-color .4s ease-out;
+        }
    }
 }