chore: make theme toggle icon visible on mobile

nestjs · Aug 12, 2024 · 6058fa5 · 6058fa5
1 parent 8d6df62
commit 6058fa5
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 4 deletions.
diff --git a/src/app/common/social-wrapper/social-wrapper.component.scss b/src/app/common/social-wrapper/social-wrapper.component.scss
@@ -1,5 +1,14 @@
 @import '../../../scss/utils.scss';
 
+:host {
+  @include media(small) {
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    transform: translateY(-50%);
+  }
+}
+
 .social-wrapper {
   @extend .center-top;
   float: right;
@@ -9,7 +18,7 @@
 
   a {
     @extend .transition-fast;
-    display: inline-block;
+    display: inline-flex;
     vertical-align: middle;
     color: #fff;
     font-size: 18px;
@@ -36,7 +45,13 @@
     padding-right: 20px;
   }
   @include media(small) {
-    display: none;
+    top: 0;
+    transform: none;
+    padding-right: 0;
+
+    a {
+      display: none;
+    }
   }
   @media print {
     display: none;

diff --git a/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.scss b/src/app/shared/components/theme-mode-toggle/theme-mode-toggle.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../scss//utils.scss';
+
 :host {
   display: block;
   display: flex;
@@ -27,6 +29,11 @@
   padding-left: 15px;
   position: relative;
 
+  @include media(small) {
+    padding: 0;
+    margin: 0;
+  }
+
   .material-icons {
     font-size: 20px;
     cursor: pointer;
@@ -36,14 +43,22 @@
       position: absolute;
       background: #fff;
       opacity: 0.2;
-      left: 0;
+      left: 2px;
       top: 0;
-      bottom: 0;
+      bottom: 2px;
       width: 2px;
     }
 
     &:hover {
       color: var(--primary);
     }  
+
+    @include media(small) {
+      font-size: 24px;
+
+      &::before {
+        display: none;
+      }
+    }
   }
 }