Refactor scss hover

src/components/popups/index.ts

@@ -75,7 +75,7 @@ export default class PopupElement {
         const button = document.createElement('button');
         button.className = 'btn' + (b.isDanger ? ' danger' : '');
         button.innerHTML =  b.text;
-        ripple(button);
+        //ripple(button);
   
         if(b.callback) {
           button.addEventListener('click', () => {

src/scss/mixins/_hover.scss

@@ -0,0 +1,36 @@
+@mixin hover($color: null, $property: null, $use-transition: false) {
+  @if $color {
+    @if $color == gray {
+      $color: var(--color-gray-hover);
+    } @else if $color == blue {
+      $color: var(--color-blue-hover);
+    } @else if $color == red {
+      $color: var(--color-red-hover);
+    }
+  }
+
+  html.no-touch &:hover {
+    @if $property != null {
+      @if $use-transition {
+        transition: .2s #{$property};
+      }
+      
+      #{$property}: $color;
+    }
+    
+
+    @content;
+  }
+}
+
+@mixin hover-effect($color: gray, $use-transition: false) {
+  @include hover($color, color, $use-transition) {
+    @content;
+  }
+}
+
+@mixin hover-background-effect($color: gray, $use-transition: false) {
+  @include hover($color, background-color, $use-transition) {
+    @content;
+  }
+}

src/scss/mixins/_respondTo.scss

@@ -0,0 +1,36 @@
+@mixin respond-to($media) {
+  @if $media == handhelds {
+    @media only screen and (max-width: $small-screen) { @content; }
+    //@media only screen and (orientation: landscape) and (max-device-width: 896px) { @content; } // iPhone 11 Pro Max
+  } @else if $media == small-screens {
+    @media only screen and (min-width: $small-screen + 1) { @content; }
+  } @else if $media == only-small-screens {
+    @media only screen and (min-width: $small-screen + 1) and (max-width: $medium-screen) { @content; }
+  } @else if $media == medium-screens {
+    @media only screen and (min-width: $medium-screen + 1) { @content; }
+  } @else if $media == only-medium-screens {
+    @media only screen and (min-width: $medium-screen + 1) and (max-width: $large-screen) { @content; }
+  } @else if $media == before-medium-screens {
+    @media only screen and (max-width: $medium-screen) { @content; }
+  } @else if $media == large-screens {
+    @media only screen and (min-width: $large-screen + 1) { @content; }
+  } @else if $media == not-handhelds {
+    @media only screen and (min-width: $small-screen + 1) { @content; }
+  }
+
+  @else if $media == floating-left-sidebar {
+    @media only screen and (min-width: $small-screen + 1) and (max-width: $floating-left-sidebar) { @content; }
+  } @else if $media == until-floating-left-sidebar {
+    @media only screen and (max-width: $floating-left-sidebar) { @content; }
+  } @else if $media == no-floating-left-sidebar {
+    @media only screen and (min-width: $floating-left-sidebar + 1) { @content; }
+  }
+
+  @else if $media == esg-top { // topbar + chat input + margin bottom + height of ESG 
+    @media only screen and (min-height: 570px) and (min-width: $small-screen + 1) { @content; }
+  }
+
+  @else if $media == esg-bottom {
+    @media only screen and (max-height: 569px) { @content; }
+  }
+}

src/scss/partials/_button.scss

@@ -25,9 +25,7 @@
     color: $color-blue;
   }
   
-  html.no-touch &:hover {
+  @include hover-background-effect();
-    background-color: var(--color-gray-hover);
-  }
 
   &:disabled {
     color: #cacaca;
@@ -164,9 +162,7 @@
     text-overflow: ellipsis;
     align-items: center;
 
-    html.no-touch &:hover {
+    @include hover-background-effect();
-      background-color: rgba(112, 117, 121, .06);
-    }
 
     &:before {
       color: $color-gray;
@@ -227,7 +223,7 @@
   padding: 0; // new
   transition: .2s opacity;
  
-  html.no-touch &:hover {
+  @include hover() {
     transition: .2s background-color, .2s opacity;
     background: darken($color-blue, 8%);
   }
@@ -259,9 +255,7 @@
   //text-transform: capitalize;
   font-weight: normal;
 
-  html.no-touch &:hover {
+  @include hover-background-effect();
-    background-color:	var(--color-gray-hover);
-  }
 
   // * tgico
   &:before {

src/scss/partials/_chatBubble.scss

@@ -703,7 +703,7 @@ $bubble-margin: .25rem;
       display: block;
       font-size: calc(1rem - 1px);
       
-      html.no-touch &:hover {
+      @include hover() {
         text-decoration: underline;
       }
     }
@@ -1630,7 +1630,7 @@ $bubble-margin: .25rem;
   }
 
   .quote {
-    html.no-touch &:hover {
+    @include hover() {
       background-color: $light;
     }
   }
@@ -1752,7 +1752,7 @@ $bubble-margin: .25rem;
   }
 
   .quote {
-    html.no-touch &:hover {
+    @include hover() {
       background-color: rgba($color-green, .12);
     }
   }
@@ -2012,7 +2012,7 @@ $bubble-margin: .25rem;
     transition: background-color .35s ease;
     overflow: hidden;
 
-    html.no-touch &:hover {
+    @include hover() {
       background-color: rgba(0, 0, 0, .06);
     }
 
@@ -2158,7 +2158,7 @@ poll-element {
         }
       }
 
-      html.no-touch &:hover {
+      @include hover() {
         .animation-ring {
           visibility: visible;
           transform: scale(1);

src/scss/partials/_chatlist.scss

@@ -77,9 +77,7 @@
       overflow: hidden;
     }
 
-    html.no-touch &:hover {
+    @include hover-background-effect();
-      background: var(--color-gray-hover);
-    }
 
     span {
       display: inline-block;

src/scss/partials/_crop.scss

@@ -48,7 +48,8 @@
     box-sizing: content-box;
     border-radius: 50%;
   
-    html.no-touch &:hover, &:active {
+    html.no-touch &:hover, 
+    &:active {
       cursor: move;
     }
     

src/scss/partials/_emojiDropdown.scss

@@ -193,9 +193,7 @@
 					margin: 0;
 				}
 				
-				html.no-touch &:hover {
+				@include hover-background-effect();
-					background-color: var(--color-gray-hover);
-				}
 			}
 		}
 

src/scss/partials/_mediaViewer.scss

@@ -27,7 +27,7 @@
     transition: var(--open-duration);
     cursor: pointer;
 
-    html.no-touch &:hover {
+    @include hover() {
       color: #fff;
     }
   }
@@ -62,7 +62,7 @@
       margin: 0 .25rem;
       transition: var(--open-duration);
 
-      html.no-touch &:hover {
+      @include hover() {
         color: #fff;
       }
     }
@@ -136,7 +136,7 @@
     .media-viewer-whole.active & {
       opacity: 1;
 
-      html.no-touch & { 
+      @include hover() { 
         opacity: .2;
 
         &:hover {
@@ -156,7 +156,7 @@
     cursor: pointer;
     z-index: 5;
 
-    html.no-touch & {
+    @include hover() {
       height: calc(100% - 3.75rem);
 
       &:hover {

src/scss/partials/_preloader.scss

@@ -114,7 +114,7 @@ $transition: .2s ease-in-out;
       fill: #fff;
     }
 
-    html.no-touch &:hover {
+    @include hover() {
       background: none;
     }
   }

src/scss/partials/_selector.scss

@@ -63,7 +63,7 @@
       transition: none;
     }
 
-    html.no-touch &:hover {
+    @include hover() {
       background-color: #fae2e3;
       cursor: pointer;
 

src/scss/partials/_slider.scss

@@ -28,7 +28,7 @@
     border-top-right-radius: 6px;
     transition: none !important;
 
-    html.no-touch & {
+    @include hover() {
       background-color: transparent;
 
       &:hover {

src/scss/partials/pages/_password.scss

@@ -42,7 +42,7 @@
       content: $tgico-eye2;
     }
     
-    html.no-touch &:hover {
+    @include hover() {
       color: #000;
     }
   }

src/scss/partials/popups/_popup.scss

@@ -74,7 +74,7 @@
       transition: none;
     }
     
-    html.no-touch &:hover {
+    @include hover() {
       color: #000;
     }
   }
@@ -121,7 +121,6 @@
       font-weight: 500;
 			padding: .5rem;
 			text-transform: uppercase;
-			transition: .2s;
 			border-radius: $border-radius;
 			cursor: pointer;
       color: $color-blue;
@@ -135,9 +134,7 @@
         transition: none;
       }
 			
-			html.no-touch &:hover {
+      @include hover-background-effect(blue);
-				background-color: var(--color-gray-hover);
-			}
 			
 			& + .btn {
         margin-top: .5rem;
@@ -146,6 +143,10 @@
         max-width: 286px;
         overflow: hidden;
 			}
+
+      &.danger {
+        @include hover-background-effect(red);
+      }
 		}
   }
   

src/scss/style.scss

@@ -6,15 +6,17 @@ $button-primary-background: #4EA4F6;
 
 $color-green: #4DCD5E;
 $color-error: #E53935;
+$color-red: #E53935;
 $color-gray: #707579;
 $color-blue: #50a2e9;
+$hover-alpha: .08;
 
 $darkgreen: #50af4f;
 $color-text-green: $darkgreen;
 
 $lightgrey: #dadce0;
 
-$light: rgba($color-gray, 0.08);
+$light: rgba($color-gray, $hover-alpha);
 
 //$small-screen: 720px;
 $small-screen: 600px;
@@ -31,57 +33,20 @@ $chat-input-handhelds-size: 2.875rem;
 $chat-padding: 1rem;
 $chat-padding-handhelds: .5rem;
 
-@mixin respond-to($media) {
+@function hover-color($color) {
-  @if $media == handhelds {
+  @return rgba($color, $hover-alpha);
-    @media only screen and (max-width: $small-screen) { @content; }
-    //@media only screen and (orientation: landscape) and (max-device-width: 896px) { @content; } // iPhone 11 Pro Max
-  }
-  @else if $media == small-screens {
-    @media only screen and (min-width: $small-screen + 1) { @content; }
-  }
-  @else if $media == only-small-screens {
-    @media only screen and (min-width: $small-screen + 1) and (max-width: $medium-screen) { @content; }
-  }
-  @else if $media == medium-screens {
-    @media only screen and (min-width: $medium-screen + 1) { @content; }
-  }
-  @else if $media == only-medium-screens {
-    @media only screen and (min-width: $medium-screen + 1) and (max-width: $large-screen) { @content; }
-  }
-  @else if $media == before-medium-screens {
-    @media only screen and (max-width: $medium-screen) { @content; }
-  }
-  @else if $media == large-screens {
-    @media only screen and (min-width: $large-screen + 1) { @content; }
-  }
-  @else if $media == not-handhelds {
-    @media only screen and (min-width: $small-screen + 1) { @content; }
 }
 
-  @else if $media == floating-left-sidebar {
+@import "mixins/hover";
-    @media only screen and (min-width: $small-screen + 1) and (max-width: $floating-left-sidebar) { @content; }
+@import "mixins/respondTo";
-  }
-  @else if $media == until-floating-left-sidebar {
-    @media only screen and (max-width: $floating-left-sidebar) { @content; }
-  }
-  @else if $media == no-floating-left-sidebar {
-    @media only screen and (min-width: $floating-left-sidebar + 1) { @content; }
-  }
-
-  @else if $media == esg-top { // topbar + chat input + margin bottom + height of ESG 
-    @media only screen and (min-height: 570px) and (min-width: $small-screen + 1) { @content; }
-  }
-
-  @else if $media == esg-bottom {
-    @media only screen and (max-height: 569px) { @content; }
-  }
-}
 
 :root {
   --vh: 1vh;
   --z-below: -1;
   --color-gray: #c4c9cc;
-  --color-gray-hover: rgba(112, 117, 121, .08);
+  --color-gray-hover: #{hover-color($color-gray)};
+  --color-blue-hover: #{hover-color($color-blue)};
+  --color-red-hover: #{hover-color($color-red)};
   --pm-transition: .2s ease-in-out;
   --layer-transition: .2s ease-in-out;
   --tabs-transition: .25s ease-in-out;
@@ -569,9 +534,7 @@ hr {
     display: grid;
     grid-template-columns: calc(26px + 2rem) 1fr 80px;
     
-    html.no-touch &:hover {
+    @include hover-effect();
-      background-color: var(--color-gray-hover);
-    }
   }
   
   // +2 px bc of whitespace
@@ -616,7 +579,7 @@ hr {
   height: 24px;
   margin-left: .4rem;
   opacity: .5;
-  transition: .2s;
+  transition: .2s opacity;
   cursor: pointer;
   font-size: 1.5rem;
   
@@ -624,7 +587,7 @@ hr {
     margin-top: -14px;
   }
   
-  html.no-touch &:hover {
+  @include hover() {
     opacity: 1;
   }
 }
@@ -684,9 +647,8 @@ img.emoji {
 }
 
 .super-sticker {
-  html.no-touch &:hover {
+  @include hover-background-effect() {
     border-radius: 10px;
-    background-color: var(--color-gray-hover);
   }
   
   /* &:nth-child(5n+5) {
@@ -1045,10 +1007,7 @@ middle-ellipsis-element {
 }
 
 .hover-effect {
-  html.no-touch &:hover {
+  @include hover-background-effect();
-    transition: .2s background-color;
-    background-color: var(--color-gray-hover);
-  }
 }
 
 .progress-ring {