refactor(*): use mask-image CSS for cloud provider logos (#6280)

spinnaker · Jan 3, 2019 · 86baac9 · 86baac9
1 parent dac9b21
commit 86baac9
Show file tree

Hide file tree

Showing 10 changed files with 14 additions and 22 deletions.
diff --git a/app/scripts/modules/amazon/src/logo/aws.logo.less b/app/scripts/modules/amazon/src/logo/aws.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-aws {
-    background: url('aws.icon.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('aws.icon.svg');
   }
 }
diff --git a/app/scripts/modules/appengine/src/logo/appengine.logo.less b/app/scripts/modules/appengine/src/logo/appengine.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-appengine {
-    background: url('appengine.icon.svg') no-repeat 100% 100%;
-    background-size: cover;
+    mask-image: url('appengine.icon.svg');
   }
 }
diff --git a/app/scripts/modules/cloudfoundry/src/logo/cf.logo.less b/app/scripts/modules/cloudfoundry/src/logo/cf.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-cloudfoundry {
-    background: url('cf.logo.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('cf.logo.svg');
   }
 }
diff --git a/app/scripts/modules/core/src/cloudProvider/cloudProviderLogo.less b/app/scripts/modules/core/src/cloudProvider/cloudProviderLogo.less
@@ -4,16 +4,17 @@
   .icon {
     display: inline-block;
     vertical-align: sub;
-    -webkit-filter: invert(53%) sepia(100%) hue-rotate(50deg);
-    filter: invert(53%) sepia(100%) hue-rotate(50deg);
+    mask-repeat: no-repeat;
+    mask-position: 50% 50%;
+    mask-size: cover;
+    background-color: var(--color-success);
   }
 }
 
 .disabled {
   .cloud-provider-logo {
     .icon {
-      -webkit-filter: opacity(64%);
-      filter: opacity(64%);
+      background-color: var(--color-dovegray);
     }
   }
 }

diff --git a/app/scripts/modules/dcos/logo/dcos.logo.less b/app/scripts/modules/dcos/logo/dcos.logo.less
@@ -1,6 +1,5 @@
 cloud-provider-logo {
   .icon-dcos {
-    background: url('dcos.logo.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('dcos.logo.svg');
   }
 }
diff --git a/app/scripts/modules/ecs/src/logo/ecs.logo.less b/app/scripts/modules/ecs/src/logo/ecs.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-ecs {
-    background: url('ecs.icon.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('ecs.icon.svg');
   }
 }
diff --git a/app/scripts/modules/google/src/logo/gce.logo.less b/app/scripts/modules/google/src/logo/gce.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-gce {
-    background: url('gce.logo.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('gce.logo.svg');
   }
 }
diff --git a/app/scripts/modules/kubernetes/src/logo/kubernetes.logo.less b/app/scripts/modules/kubernetes/src/logo/kubernetes.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-kubernetes {
-    background: url('kubernetes.icon.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('kubernetes.icon.svg');
   }
 }
diff --git a/app/scripts/modules/openstack/src/logo/openstack.logo.less b/app/scripts/modules/openstack/src/logo/openstack.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-openstack {
-    background: url('openstack.logo.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('openstack.logo.svg');
   }
 }
diff --git a/app/scripts/modules/titus/src/logo/titus.logo.less b/app/scripts/modules/titus/src/logo/titus.logo.less
@@ -1,6 +1,5 @@
 .cloud-provider-logo {
   .icon-titus {
-    background: url('titus.logo.svg') no-repeat 50% 50%;
-    background-size: cover;
+    mask-image: url('titus.logo.svg');
   }
 }