[GH-15776]Switch center-channel-color-## with center-channel-color-rg…

…b variables (#6641)
mattermost · Oct 7, 2020 · 5f6be0f · 5f6be0f
1 parent fa382ac
commit 5f6be0f
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 12 deletions.
diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
@@ -110,15 +110,15 @@ button {
     color: v(center-channel-color-56);
 
     &:hover {
-        background: v(center-channel-color-08);
+        background: rgba(var(--center-channel-color-rgb), 0.08);
         fill: v(center-channel-color-72);
         color: v(center-channel-color-72);
     }
 
     &:active,
     &--active,
     &--active:hover {
-        background: v(button-bg-08);
+        background: rgba(var(--center-channel-color-rgb), 0.08);
         fill: v(button-bg);
         color: v(button-bg);
     }

diff --git a/sass/components/_emoticons.scss b/sass/components/_emoticons.scss
@@ -156,12 +156,12 @@
         text-decoration: none;
 
         &:hover {
-            background-color: v(center-channel-color-04);
+            background-color: rgba(var(--center-channel-color-rgb), 0.04);
             color: v(center-channel-color);
         }
 
         &:active {
-            background-color: v(center-channel-color-16);
+            background-color: rgba(var(--center-channel-color-rgb), 0.16);
             color: v(center-channel-color);
         }
 
@@ -318,11 +318,11 @@
 
     &.selected,
     &:hover {
-        background-color: v(center-channel-color-16);
+        background-color: rgba(var(--center-channel-color-rgb), 0.16);
     }
 
     &:active {
-        background-color: v(center-channel-color-32);
+        background-color: rgba(var(--center-channel-color-rgb), 0.32);
     }
 
     > div {

diff --git a/sass/components/_popover.scss b/sass/components/_popover.scss
@@ -209,7 +209,7 @@
 
             &:before {
                 position: absolute;
-                background: v(center-channel-color-04) !important;
+                background: rgba(var(--center-channel-color-rgb), 0.04) !important;
                 content: '';
                 width: 100%;
                 height: 100%;
@@ -226,7 +226,7 @@
         .popover-content {
             border-radius: 0 0 3px 3px;
             border-top: none;
-            @include box-shadow(v(center-channel-color-08) 0px 17px 50px 0px, v(center-channel-color-08) 0px 12px 15px 0px);
+            @include box-shadow(rgba(var(--center-channel-color-rgb), 0.08) 0px 17px 50px 0px, rgba(var(--center-channel-color-rgb), 0.08) 0px 12px 15px 0px);
             background: v(center-channel-bg);
         }
     }
@@ -286,7 +286,7 @@
     &:before {
         content: '';
         height: 1px;
-        background: v(center-channel-color-08);
+        background: rgba(var(--center-channel-color-rgb), 0.08);
         position: absolute;
         top: -7px;
         left: 0;
@@ -324,7 +324,7 @@
 
             &::-webkit-scrollbar-thumb {
                 border: 1px solid v(center-channel-bg);
-                background-color: v(center-channel-color-24) !important;
+                background-color: rgba(var(--center-channel-color-rgb), 0.24) !important;
                 border-radius: 4px;
             }
         }
@@ -342,12 +342,12 @@
         padding: 0 2.4rem;
 
         &.selected {
-            background: v(center-channel-color-08);
+            background: rgba(var(--center-channel-color-rgb), 0.08);
             box-shadow: none;
         }
 
         .status--group {
-            background-color: v(center-channel-color-20);
+            background-color: rgba(var(--center-channel-color-rgb), 0.20);
             margin: 0;
             width: 1.8rem;
             height: 1.8rem;