From a96e87aece0ec213e629685642e1ed240b0e1000 Mon Sep 17 00:00:00 2001
From: Kenia <19161242+kaxcode@users.noreply.github.com>
Date: Mon, 12 Jul 2021 09:28:01 -0400
Subject: [PATCH] ui: Add socket icon for UDS (#10573)
---
.../app/components/icon-definition/index.scss | 2 +-
.../app/styles/base/icons/base-variables.scss | 4 ++++
.../app/styles/base/icons/icon-placeholders.scss | 10 ++++++++++
3 files changed, 15 insertions(+), 1 deletion(-)
diff --git a/ui/packages/consul-ui/app/components/icon-definition/index.scss b/ui/packages/consul-ui/app/components/icon-definition/index.scss
index 16c34ebbea..088b4df187 100644
--- a/ui/packages/consul-ui/app/components/icon-definition/index.scss
+++ b/ui/packages/consul-ui/app/components/icon-definition/index.scss
@@ -38,7 +38,7 @@
@extend %with-public-default-mask, %as-pseudo;
}
%icon-definition.socket dt::before {
- @extend %with-port-mask, %as-pseudo;
+ @extend %with-socket-mask, %as-pseudo;
}
%icon-definition.mesh dt::before {
@extend %with-mesh-mask, %as-pseudo;
diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
index 6286d952d0..aeb0d256eb 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss
@@ -634,6 +634,10 @@
--settings-svg: url('data:image/svg+xml;charset=UTF-8,');
}
+%socket-svg-prop {
+ --socket-svg: url('data:image/svg+xml;charset=UTF-8,');
+}
+
%sort-svg-prop {
--sort-svg: url('data:image/svg+xml;charset=UTF-8,');
}
diff --git a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss
index 823463419c..e2bb1e0197 100644
--- a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss
+++ b/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss
@@ -1588,6 +1588,16 @@
mask-image: var(--settings-svg);
}
+%with-socket-icon {
+ @extend %with-icon, %socket-svg-prop;
+ background-image: var(--socket-svg);
+}
+%with-socket-mask {
+ @extend %with-mask, %socket-svg-prop;
+ -webkit-mask-image: var(--socket-svg);
+ mask-image: var(--socket-svg);
+}
+
%with-sort-icon {
@extend %with-icon, %sort-svg-prop;
background-image: var(--sort-svg);