diff --git a/ui-v2/app/styles/base/icons/base-variables.scss b/ui-v2/app/styles/base/icons/base-variables.scss
index f4666044f7..2bbf7b7c86 100644
--- a/ui-v2/app/styles/base/icons/base-variables.scss
+++ b/ui-v2/app/styles/base/icons/base-variables.scss
@@ -1,113 +1,170 @@
-$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
-$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$alert-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$alert-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
$alert-triangle-color-svg: url('data:image/svg+xml;charset=UTF-8,');
-$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,');
-$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,');
-$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,');
+$alert-triangle-svg: url('data:image/svg+xml;charset=UTF-8,');
+$arrow-down-svg: url('data:image/svg+xml;charset=UTF-8,');
+$arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,');
$arrow-right-color-svg: url('data:image/svg+xml;charset=UTF-8,');
-$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,');
-$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,');
+$arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,');
+$arrow-up-svg: url('data:image/svg+xml;charset=UTF-8,');
$aws-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,');
-$calendar-svg: url('data:image/svg+xml;charset=UTF-8,');
-$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
-$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
-$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,');
+$bolt-svg: url('data:image/svg+xml;charset=UTF-8,');
+$box-check-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$box-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$bug-svg: url('data:image/svg+xml;charset=UTF-8,');
+$calendar-svg: url('data:image/svg+xml;charset=UTF-8,');
+$cancel-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$cancel-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$cancel-plain-svg: url('data:image/svg+xml;charset=UTF-8,');
$cancel-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,');
-$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
-$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
-$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,');
-$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,');
+$cancel-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$cancel-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$caret-down-svg: url('data:image/svg+xml;charset=UTF-8,');
+$caret-up-svg: url('data:image/svg+xml;charset=UTF-8,');
$check-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,');
-$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
-$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
-$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,');
+$check-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$check-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$check-plain-svg: url('data:image/svg+xml;charset=UTF-8,');
$chevron-down-2-svg: url('data:image/svg+xml;charset=UTF-8,');
-$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,');
-$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,');
-$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,');
-$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,');
+$chevron-down-svg: url('data:image/svg+xml;charset=UTF-8,');
+$chevron-left-svg: url('data:image/svg+xml;charset=UTF-8,');
+$chevron-right-svg: url('data:image/svg+xml;charset=UTF-8,');
+$chevron-up-svg: url('data:image/svg+xml;charset=UTF-8,');
$chevron-svg: url('data:image/svg+xml;charset=UTF-8,');
-$clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
-$clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$clock-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$clock-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
$cloud-cross-svg: url('data:image/svg+xml;charset=UTF-8,');
-$code-svg: url('data:image/svg+xml;charset=UTF-8,');
+$code-svg: url('data:image/svg+xml;charset=UTF-8,');
$consul-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,');
-$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,');
-$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,');
+$copy-action-svg: url('data:image/svg+xml;charset=UTF-8,');
+$copy-success-svg: url('data:image/svg+xml;charset=UTF-8,');
+$database-svg: url('data:image/svg+xml;charset=UTF-8,');
+$deny-alt-svg: url('data:image/svg+xml;charset=UTF-8,');
$deny-color-svg: url('data:image/svg+xml;charset=UTF-8,');
+$deny-default-svg: url('data:image/svg+xml;charset=UTF-8,');
$deny-svg: url('data:image/svg+xml;charset=UTF-8,');
-$disabled-svg: url('data:image/svg+xml;charset=UTF-8,');
-$docs-svg: url('data:image/svg+xml;charset=UTF-8,');
-$download-svg: url('data:image/svg+xml;charset=UTF-8,');
-$edit-svg: url('data:image/svg+xml;charset=UTF-8,');
-$exit-svg: url('data:image/svg+xml;charset=UTF-8,');
-$expand-less-svg: url('data:image/svg+xml;charset=UTF-8,');
-$expand-more-svg: url('data:image/svg+xml;charset=UTF-8,');
-$file-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
-$file-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
-$filter-svg: url('data:image/svg+xml;charset=UTF-8,');
-$flag-svg: url('data:image/svg+xml;charset=UTF-8,');
-$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$disabled-svg: url('data:image/svg+xml;charset=UTF-8,');
+$docs-svg: url('data:image/svg+xml;charset=UTF-8,');
+$download-svg: url('data:image/svg+xml;charset=UTF-8,');
+$edit-svg: url('data:image/svg+xml;charset=UTF-8,');
+$envelope-sealed-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$envelope-sealed-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$envelope-unsealed--outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$envelope-unsealed-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$exit-svg: url('data:image/svg+xml;charset=UTF-8,');
+$expand-less-svg: url('data:image/svg+xml;charset=UTF-8,');
+$expand-more-svg: url('data:image/svg+xml;charset=UTF-8,');
+$file-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$file-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$filter-svg: url('data:image/svg+xml;charset=UTF-8,');
+$flag-svg: url('data:image/svg+xml;charset=UTF-8,');
+$folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
$folder-outline-color-svg: url('data:image/svg+xml;charset=UTF-8,');
-$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
-$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,');
-$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,');
-$git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,');
+$folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$gift-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$gift-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$git-branch-svg: url('data:image/svg+xml;charset=UTF-8,');
+$git-commit-svg: url('data:image/svg+xml;charset=UTF-8,');
+$git-pull-request-svg: url('data:image/svg+xml;charset=UTF-8,');
+$git-repository-svg: url('data:image/svg+xml;charset=UTF-8,');
$hashicorp-logo-svg: url('data:image/svg+xml;charset=UTF-8,');
-$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
-$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
-$history-svg: url('data:image/svg+xml;charset=UTF-8,');
+$health-svg: url('data:image/svg+xml;charset=UTF-8,');
+$help-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$help-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$history-svg: url('data:image/svg+xml;charset=UTF-8,');
$info-circle-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,');
-$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
-$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$info-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$info-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$key-svg: url('data:image/svg+xml;charset=UTF-8,');
$kubernetes-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,');
-$learn-svg: url('data:image/svg+xml;charset=UTF-8,');
-$link-svg: url('data:image/svg+xml;charset=UTF-8,');
+$learn-svg: url('data:image/svg+xml;charset=UTF-8,');
+$link-svg: url('data:image/svg+xml;charset=UTF-8,');
$loading-svg: url('data:image/svg+xml;charset=UTF-8,');
-$lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,');
-$lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,');
-$lock-open-svg: url('data:image/svg+xml;charset=UTF-8,');
-$menu-svg: url('data:image/svg+xml;charset=UTF-8,');
-$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
-$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
-$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,');
+$lock-closed-svg: url('data:image/svg+xml;charset=UTF-8,');
+$lock-disabled-svg: url('data:image/svg+xml;charset=UTF-8,');
+$lock-open-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-alicloud-color-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-alicloud-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-aws-color-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-aws-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-azure-color-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-azure-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-bitbucket-color-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-bitbucket-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-gcp-color-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-gcp-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-github-color-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-github-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-gitlab-color-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-gitlab-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-kubernetes-color-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-kubernetes-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-oracle-color-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-oracle-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-slack-color-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-slack-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-vmware-color-svg: url('data:image/svg+xml;charset=UTF-8,');
+$logo-vmware-monochrome-svg: url('data:image/svg+xml;charset=UTF-8,');
+$menu-svg: url('data:image/svg+xml;charset=UTF-8,');
+$message-svg: url('data:image/svg+xml;charset=UTF-8,');
+$minus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$minus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$minus-plain-svg: url('data:image/svg+xml;charset=UTF-8,');
$minus-square-fill-color-svg: url('data:image/svg+xml;charset=UTF-8,');
-$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$minus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
$minus-svg: url('data:image/svg+xml;charset=UTF-8,');
-$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,');
-$more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,');
+$module-svg: url('data:image/svg+xml;charset=UTF-8,');
+$more-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,');
+$more-vertical-svg: url('data:image/svg+xml;charset=UTF-8,');
$nomad-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,');
-$plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
-$plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
-$plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,');
-$plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
-$queue-svg: url('data:image/svg+xml;charset=UTF-8,');
+$notification-disabled-svg: url('data:image/svg+xml;charset=UTF-8,');
+$notification-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$notification-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$page-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$partner-svg: url('data:image/svg+xml;charset=UTF-8,');
+$plus-circle-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$plus-circle-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$plus-plain-svg: url('data:image/svg+xml;charset=UTF-8,');
+$plus-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$provider-svg: url('data:image/svg+xml;charset=UTF-8,');
+$public-default-svg: url('data:image/svg+xml;charset=UTF-8,');
+$public-locked-svg: url('data:image/svg+xml;charset=UTF-8,');
+$queue-svg: url('data:image/svg+xml;charset=UTF-8,');
+$radio-button-checked-svg: url('data:image/svg+xml;charset=UTF-8,');
+$radio-button-unchecked-svg: url('data:image/svg+xml;charset=UTF-8,');
+$random-svg: url('data:image/svg+xml;charset=UTF-8,');
$redirect-svg: url('data:image/svg+xml;charset=UTF-8,');
-$refresh-svg: url('data:image/svg+xml;charset=UTF-8,');
+$refresh-alert-svg: url('data:image/svg+xml;charset=UTF-8,');
+$refresh-default-svg: url('data:image/svg+xml;charset=UTF-8,');
+$remix-svg: url('data:image/svg+xml;charset=UTF-8,');
+$ribbon-svg: url('data:image/svg+xml;charset=UTF-8,');
$run-svg: url('data:image/svg+xml;charset=UTF-8,');
$search-color-svg: url('data:image/svg+xml;charset=UTF-8,');
-$search-svg: url('data:image/svg+xml;charset=UTF-8,');
+$search-svg: url('data:image/svg+xml;charset=UTF-8,');
$service-identity-svg: url('data:image/svg+xml;charset=UTF-8,');
-$settings-svg: url('data:image/svg+xml;charset=UTF-8,');
-$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
-$star-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$settings-svg: url('data:image/svg+xml;charset=UTF-8,');
+$source-file-svg: url('data:image/svg+xml;charset=UTF-8,');
+$star-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$star-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
$star-svg: url('data:image/svg+xml;charset=UTF-8,');
-$sub-arrow-left-svg: url('data:image/svg+xml;charset=UTF-8,');
-$sub-arrow-right-svg: url('data:image/svg+xml;charset=UTF-8,');
-$swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,');
-$swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,');
+$sub-left-svg: url('data:image/svg+xml;charset=UTF-8,');
+$sub-right-svg: url('data:image/svg+xml;charset=UTF-8,');
+$support-svg: url('data:image/svg+xml;charset=UTF-8,');
+$swap-horizontal-svg: url('data:image/svg+xml;charset=UTF-8,');
+$swap-vertical-svg: url('data:image/svg+xml;charset=UTF-8,');
$terraform-logo-color-svg: url('data:image/svg+xml;charset=UTF-8,');
-$tier-enterprise-svg: url('data:image/svg+xml;charset=UTF-8,');
-$tier-oss-svg: url('data:image/svg+xml;charset=UTF-8,');
-$trash-svg: url('data:image/svg+xml;charset=UTF-8,');
-$tune-svg: url('data:image/svg+xml;charset=UTF-8,');
-$unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,');
-$unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,');
-$upload-svg: url('data:image/svg+xml;charset=UTF-8,');
-$user-organization-svg: url('data:image/svg+xml;charset=UTF-8,');
-$user-plain-svg: url('data:image/svg+xml;charset=UTF-8,');
-$user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
-$user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
-$user-team-svg: url('data:image/svg+xml;charset=UTF-8,');
-$visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,');
-$visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,');
+$trash-svg: url('data:image/svg+xml;charset=UTF-8,');
+$tune-svg: url('data:image/svg+xml;charset=UTF-8,');
+$unfold-less-svg: url('data:image/svg+xml;charset=UTF-8,');
+$unfold-more-svg: url('data:image/svg+xml;charset=UTF-8,');
+$upload-svg: url('data:image/svg+xml;charset=UTF-8,');
+$user-add-svg: url('data:image/svg+xml;charset=UTF-8,');
+$user-organization-svg: url('data:image/svg+xml;charset=UTF-8,');
+$user-plain-svg: url('data:image/svg+xml;charset=UTF-8,');
+$user-square-fill-svg: url('data:image/svg+xml;charset=UTF-8,');
+$user-square-outline-svg: url('data:image/svg+xml;charset=UTF-8,');
+$user-team-svg: url('data:image/svg+xml;charset=UTF-8,');
+$visibility-hide-svg: url('data:image/svg+xml;charset=UTF-8,');
+$visibility-show-svg: url('data:image/svg+xml;charset=UTF-8,');
+$webhook-svg: url('data:image/svg+xml;charset=UTF-8,');
diff --git a/ui-v2/app/styles/base/icons/icon-placeholders.scss b/ui-v2/app/styles/base/icons/icon-placeholders.scss
index 154a328938..6af6e1971e 100644
--- a/ui-v2/app/styles/base/icons/icon-placeholders.scss
+++ b/ui-v2/app/styles/base/icons/icon-placeholders.scss
@@ -2,16 +2,31 @@
@extend %with-icon;
background-image: $alert-circle-fill-svg;
}
+%with-alert-circle-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $alert-circle-fill-svg;
+ mask-image: $alert-circle-fill-svg;
+}
%with-alert-circle-outline-icon {
@extend %with-icon;
background-image: $alert-circle-outline-svg;
}
+%with-alert-circle-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $alert-circle-outline-svg;
+ mask-image: $alert-circle-outline-svg;
+}
%with-alert-triangle-color-icon {
@extend %with-icon;
background-image: $alert-triangle-color-svg;
}
+%with-alert-triangle-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $alert-triangle-color-svg;
+ mask-image: $alert-triangle-color-svg;
+}
%with-alert-triangle-icon {
@extend %with-icon;
@@ -19,6 +34,7 @@
}
%with-alert-triangle-mask {
@extend %with-mask;
+ -webkit-mask-image: $alert-triangle-svg;
mask-image: $alert-triangle-svg;
}
@@ -26,84 +42,199 @@
@extend %with-icon;
background-image: $arrow-down-svg;
}
+%with-arrow-down-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $arrow-down-svg;
+ mask-image: $arrow-down-svg;
+}
%with-arrow-left-icon {
@extend %with-icon;
background-image: $arrow-left-svg;
}
+%with-arrow-left-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $arrow-left-svg;
+ mask-image: $arrow-left-svg;
+}
%with-arrow-right-color-icon {
@extend %with-icon;
background-image: $arrow-right-color-svg;
}
+%with-arrow-right-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $arrow-right-color-svg;
+ mask-image: $arrow-right-color-svg;
+}
%with-arrow-right-icon {
@extend %with-icon;
background-image: $arrow-right-svg;
}
+%with-arrow-right-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $arrow-right-svg;
+ mask-image: $arrow-right-svg;
+}
%with-arrow-up-icon {
@extend %with-icon;
background-image: $arrow-up-svg;
}
+%with-arrow-up-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $arrow-up-svg;
+ mask-image: $arrow-up-svg;
+}
+
+%with-bolt-icon {
+ @extend %with-icon;
+ background-image: $bolt-svg;
+}
+%with-bolt-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $bolt-svg;
+ mask-image: $bolt-svg;
+}
+
+%with-box-check-fill-icon {
+ @extend %with-icon;
+ background-image: $box-check-fill-svg;
+}
+%with-box-check-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $box-check-fill-svg;
+ mask-image: $box-check-fill-svg;
+}
+
+%with-box-outline-icon {
+ @extend %with-icon;
+ background-image: $box-outline-svg;
+}
+%with-box-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $box-outline-svg;
+ mask-image: $box-outline-svg;
+}
+
+%with-bug-icon {
+ @extend %with-icon;
+ background-image: $bug-svg;
+}
+%with-bug-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $bug-svg;
+ mask-image: $bug-svg;
+}
%with-calendar-icon {
@extend %with-icon;
background-image: $calendar-svg;
}
+%with-calendar-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $calendar-svg;
+ mask-image: $calendar-svg;
+}
%with-cancel-circle-fill-icon {
@extend %with-icon;
background-image: $cancel-circle-fill-svg;
}
+%with-cancel-circle-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $cancel-circle-fill-svg;
+ mask-image: $cancel-circle-fill-svg;
+}
%with-cancel-circle-outline-icon {
@extend %with-icon;
background-image: $cancel-circle-outline-svg;
}
+%with-cancel-circle-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $cancel-circle-outline-svg;
+ mask-image: $cancel-circle-outline-svg;
+}
%with-cancel-plain-icon {
@extend %with-icon;
background-image: $cancel-plain-svg;
}
+%with-cancel-plain-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $cancel-plain-svg;
+ mask-image: $cancel-plain-svg;
+}
%with-cancel-square-fill-color-icon {
@extend %with-icon;
background-image: $cancel-square-fill-color-svg;
}
+%with-cancel-square-fill-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $cancel-square-fill-color-svg;
+ mask-image: $cancel-square-fill-color-svg;
+}
%with-cancel-square-fill-icon {
@extend %with-icon;
background-image: $cancel-square-fill-svg;
}
+%with-cancel-square-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $cancel-square-fill-svg;
+ mask-image: $cancel-square-fill-svg;
+}
%with-cancel-square-outline-icon {
@extend %with-icon;
background-image: $cancel-square-outline-svg;
}
+%with-cancel-square-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $cancel-square-outline-svg;
+ mask-image: $cancel-square-outline-svg;
+}
%with-caret-down-icon {
@extend %with-icon;
background-image: $caret-down-svg;
}
+%with-caret-down-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $caret-down-svg;
+ mask-image: $caret-down-svg;
+}
%with-caret-up-icon {
@extend %with-icon;
background-image: $caret-up-svg;
}
+%with-caret-up-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $caret-up-svg;
+ mask-image: $caret-up-svg;
+}
%with-check-circle-fill-color-icon {
@extend %with-icon;
background-image: $check-circle-fill-color-svg;
}
+%with-check-circle-fill-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $check-circle-fill-color-svg;
+ mask-image: $check-circle-fill-color-svg;
+}
%with-check-circle-fill-icon {
@extend %with-icon;
background-image: $check-circle-fill-svg;
}
-
%with-check-circle-fill-mask {
@extend %with-mask;
+ -webkit-mask-image: $check-circle-fill-svg;
mask-image: $check-circle-fill-svg;
}
@@ -111,20 +242,31 @@
@extend %with-icon;
background-image: $check-circle-outline-svg;
}
+%with-check-circle-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $check-circle-outline-svg;
+ mask-image: $check-circle-outline-svg;
+}
%with-check-plain-icon {
@extend %with-icon;
background-image: $check-plain-svg;
}
-
%with-check-plain-mask {
@extend %with-mask;
+ -webkit-mask-image: $check-plain-svg;
mask-image: $check-plain-svg;
}
+
%with-chevron-down-2-icon {
@extend %with-icon;
background-image: $chevron-down-2-svg;
}
+%with-chevron-down-2-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $chevron-down-2-svg;
+ mask-image: $chevron-down-2-svg;
+}
%with-chevron-down-icon {
@extend %with-icon;
@@ -132,17 +274,29 @@
}
%with-chevron-down-mask {
@extend %with-mask;
+ -webkit-mask-image: $chevron-down-svg;
mask-image: $chevron-down-svg;
}
+
%with-chevron-left-icon {
@extend %with-icon;
background-image: $chevron-left-svg;
}
+%with-chevron-left-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $chevron-left-svg;
+ mask-image: $chevron-left-svg;
+}
%with-chevron-right-icon {
@extend %with-icon;
background-image: $chevron-right-svg;
}
+%with-chevron-right-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $chevron-right-svg;
+ mask-image: $chevron-right-svg;
+}
%with-chevron-up-icon {
@extend %with-icon;
@@ -150,6 +304,7 @@
}
%with-chevron-up-mask {
@extend %with-mask;
+ -webkit-mask-image: $chevron-up-svg;
mask-image: $chevron-up-svg;
}
@@ -157,31 +312,61 @@
@extend %with-icon;
background-image: $chevron-svg;
}
+%with-chevron-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $chevron-svg;
+ mask-image: $chevron-svg;
+}
%with-clock-fill-icon {
@extend %with-icon;
background-image: $clock-fill-svg;
}
+%with-clock-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $clock-fill-svg;
+ mask-image: $clock-fill-svg;
+}
%with-clock-outline-icon {
@extend %with-icon;
background-image: $clock-outline-svg;
}
+%with-clock-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $clock-outline-svg;
+ mask-image: $clock-outline-svg;
+}
%with-cloud-cross-icon {
@extend %with-icon;
background-image: $cloud-cross-svg;
}
+%with-cloud-cross-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $cloud-cross-svg;
+ mask-image: $cloud-cross-svg;
+}
%with-code-icon {
@extend %with-icon;
background-image: $code-svg;
}
+%with-code-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $code-svg;
+ mask-image: $code-svg;
+}
%with-consul-logo-color-icon {
@extend %with-icon;
background-image: $consul-logo-color-svg;
}
+%with-consul-logo-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $consul-logo-color-svg;
+ mask-image: $consul-logo-color-svg;
+}
%with-copy-action-icon {
@extend %with-icon;
@@ -189,6 +374,7 @@
}
%with-copy-action-mask {
@extend %with-mask;
+ -webkit-mask-image: $copy-action-svg;
mask-image: $copy-action-svg;
}
@@ -196,220 +382,781 @@
@extend %with-icon;
background-image: $copy-success-svg;
}
+%with-copy-success-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $copy-success-svg;
+ mask-image: $copy-success-svg;
+}
+
+%with-database-icon {
+ @extend %with-icon;
+ background-image: $database-svg;
+}
+%with-database-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $database-svg;
+ mask-image: $database-svg;
+}
+
+%with-deny-alt-icon {
+ @extend %with-icon;
+ background-image: $deny-alt-svg;
+}
+%with-deny-alt-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $deny-alt-svg;
+ mask-image: $deny-alt-svg;
+}
%with-deny-color-icon {
@extend %with-icon;
background-image: $deny-color-svg;
}
+%with-deny-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $deny-color-svg;
+ mask-image: $deny-color-svg;
+}
+
+%with-deny-default-icon {
+ @extend %with-icon;
+ background-image: $deny-default-svg;
+}
+%with-deny-default-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $deny-default-svg;
+ mask-image: $deny-default-svg;
+}
%with-deny-icon {
@extend %with-icon;
background-image: $deny-svg;
}
+%with-deny-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $deny-svg;
+ mask-image: $deny-svg;
+}
%with-disabled-icon {
@extend %with-icon;
background-image: $disabled-svg;
}
+%with-disabled-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $disabled-svg;
+ mask-image: $disabled-svg;
+}
%with-docs-icon {
@extend %with-icon;
background-image: $docs-svg;
}
+%with-docs-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $docs-svg;
+ mask-image: $docs-svg;
+}
%with-download-icon {
@extend %with-icon;
background-image: $download-svg;
}
+%with-download-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $download-svg;
+ mask-image: $download-svg;
+}
%with-edit-icon {
@extend %with-icon;
background-image: $edit-svg;
}
+%with-edit-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $edit-svg;
+ mask-image: $edit-svg;
+}
+
+%with-envelope-sealed-fill-icon {
+ @extend %with-icon;
+ background-image: $envelope-sealed-fill-svg;
+}
+%with-envelope-sealed-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $envelope-sealed-fill-svg;
+ mask-image: $envelope-sealed-fill-svg;
+}
+
+%with-envelope-sealed-outline-icon {
+ @extend %with-icon;
+ background-image: $envelope-sealed-outline-svg;
+}
+%with-envelope-sealed-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $envelope-sealed-outline-svg;
+ mask-image: $envelope-sealed-outline-svg;
+}
+
+%with-envelope-unsealed--outline-icon {
+ @extend %with-icon;
+ background-image: $envelope-unsealed--outline-svg;
+}
+%with-envelope-unsealed--outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $envelope-unsealed--outline-svg;
+ mask-image: $envelope-unsealed--outline-svg;
+}
+
+%with-envelope-unsealed-fill-icon {
+ @extend %with-icon;
+ background-image: $envelope-unsealed-fill-svg;
+}
+%with-envelope-unsealed-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $envelope-unsealed-fill-svg;
+ mask-image: $envelope-unsealed-fill-svg;
+}
%with-exit-icon {
@extend %with-icon;
background-image: $exit-svg;
}
+%with-exit-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $exit-svg;
+ mask-image: $exit-svg;
+}
%with-expand-less-icon {
@extend %with-icon;
background-image: $expand-less-svg;
}
+%with-expand-less-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $expand-less-svg;
+ mask-image: $expand-less-svg;
+}
%with-expand-more-icon {
@extend %with-icon;
background-image: $expand-more-svg;
}
+%with-expand-more-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $expand-more-svg;
+ mask-image: $expand-more-svg;
+}
%with-file-fill-icon {
@extend %with-icon;
background-image: $file-fill-svg;
}
+%with-file-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $file-fill-svg;
+ mask-image: $file-fill-svg;
+}
%with-file-outline-icon {
@extend %with-icon;
background-image: $file-outline-svg;
}
+%with-file-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $file-outline-svg;
+ mask-image: $file-outline-svg;
+}
%with-filter-icon {
@extend %with-icon;
background-image: $filter-svg;
}
+%with-filter-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $filter-svg;
+ mask-image: $filter-svg;
+}
%with-flag-icon {
@extend %with-icon;
background-image: $flag-svg;
}
+%with-flag-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $flag-svg;
+ mask-image: $flag-svg;
+}
%with-folder-fill-icon {
@extend %with-icon;
background-image: $folder-fill-svg;
}
+%with-folder-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $folder-fill-svg;
+ mask-image: $folder-fill-svg;
+}
%with-folder-outline-color-icon {
@extend %with-icon;
background-image: $folder-outline-color-svg;
}
+%with-folder-outline-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $folder-outline-color-svg;
+ mask-image: $folder-outline-color-svg;
+}
%with-folder-outline-icon {
@extend %with-icon;
background-image: $folder-outline-svg;
}
-
%with-folder-outline-mask {
@extend %with-mask;
+ -webkit-mask-image: $folder-outline-svg;
mask-image: $folder-outline-svg;
}
+%with-gift-fill-icon {
+ @extend %with-icon;
+ background-image: $gift-fill-svg;
+}
+%with-gift-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $gift-fill-svg;
+ mask-image: $gift-fill-svg;
+}
+
+%with-gift-outline-icon {
+ @extend %with-icon;
+ background-image: $gift-outline-svg;
+}
+%with-gift-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $gift-outline-svg;
+ mask-image: $gift-outline-svg;
+}
+
%with-git-branch-icon {
@extend %with-icon;
background-image: $git-branch-svg;
}
+%with-git-branch-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $git-branch-svg;
+ mask-image: $git-branch-svg;
+}
%with-git-commit-icon {
@extend %with-icon;
background-image: $git-commit-svg;
}
+%with-git-commit-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $git-commit-svg;
+ mask-image: $git-commit-svg;
+}
%with-git-pull-request-icon {
@extend %with-icon;
background-image: $git-pull-request-svg;
}
+%with-git-pull-request-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $git-pull-request-svg;
+ mask-image: $git-pull-request-svg;
+}
+
+%with-git-repository-icon {
+ @extend %with-icon;
+ background-image: $git-repository-svg;
+}
+%with-git-repository-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $git-repository-svg;
+ mask-image: $git-repository-svg;
+}
%with-hashicorp-logo-icon {
@extend %with-icon;
background-image: $hashicorp-logo-svg;
}
-
%with-hashicorp-logo-mask {
@extend %with-mask;
+ -webkit-mask-image: $hashicorp-logo-svg;
mask-image: $hashicorp-logo-svg;
}
+
+%with-health-icon {
+ @extend %with-icon;
+ background-image: $health-svg;
+}
+%with-health-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $health-svg;
+ mask-image: $health-svg;
+}
+
%with-help-circle-fill-icon {
@extend %with-icon;
background-image: $help-circle-fill-svg;
}
+%with-help-circle-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $help-circle-fill-svg;
+ mask-image: $help-circle-fill-svg;
+}
%with-help-circle-outline-icon {
@extend %with-icon;
background-image: $help-circle-outline-svg;
}
+%with-help-circle-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $help-circle-outline-svg;
+ mask-image: $help-circle-outline-svg;
+}
%with-history-icon {
@extend %with-icon;
background-image: $history-svg;
}
+%with-history-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $history-svg;
+ mask-image: $history-svg;
+}
%with-info-circle-fill-color-icon {
@extend %with-icon;
background-image: $info-circle-fill-color-svg;
}
+%with-info-circle-fill-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $info-circle-fill-color-svg;
+ mask-image: $info-circle-fill-color-svg;
+}
%with-info-circle-fill-icon {
@extend %with-icon;
background-image: $info-circle-fill-svg;
}
+%with-info-circle-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $info-circle-fill-svg;
+ mask-image: $info-circle-fill-svg;
+}
%with-info-circle-outline-icon {
@extend %with-icon;
background-image: $info-circle-outline-svg;
}
+%with-info-circle-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $info-circle-outline-svg;
+ mask-image: $info-circle-outline-svg;
+}
+
+%with-key-icon {
+ @extend %with-icon;
+ background-image: $key-svg;
+}
+%with-key-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $key-svg;
+ mask-image: $key-svg;
+}
%with-kubernetes-logo-color-icon {
@extend %with-icon;
background-image: $kubernetes-logo-color-svg;
}
+%with-kubernetes-logo-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $kubernetes-logo-color-svg;
+ mask-image: $kubernetes-logo-color-svg;
+}
%with-learn-icon {
@extend %with-icon;
background-image: $learn-svg;
}
+%with-learn-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $learn-svg;
+ mask-image: $learn-svg;
+}
%with-link-icon {
@extend %with-icon;
background-image: $link-svg;
}
+%with-link-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $link-svg;
+ mask-image: $link-svg;
+}
%with-loading-icon {
@extend %with-icon;
background-image: $loading-svg;
}
+%with-loading-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $loading-svg;
+ mask-image: $loading-svg;
+}
%with-lock-closed-icon {
@extend %with-icon;
background-image: $lock-closed-svg;
}
+%with-lock-closed-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $lock-closed-svg;
+ mask-image: $lock-closed-svg;
+}
%with-lock-disabled-icon {
@extend %with-icon;
background-image: $lock-disabled-svg;
}
+%with-lock-disabled-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $lock-disabled-svg;
+ mask-image: $lock-disabled-svg;
+}
%with-lock-open-icon {
@extend %with-icon;
background-image: $lock-open-svg;
}
+%with-lock-open-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $lock-open-svg;
+ mask-image: $lock-open-svg;
+}
+
+%with-logo-alicloud-color-icon {
+ @extend %with-icon;
+ background-image: $logo-alicloud-color-svg;
+}
+%with-logo-alicloud-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-alicloud-color-svg;
+ mask-image: $logo-alicloud-color-svg;
+}
+
+%with-logo-alicloud-monochrome-icon {
+ @extend %with-icon;
+ background-image: $logo-alicloud-monochrome-svg;
+}
+%with-logo-alicloud-monochrome-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-alicloud-monochrome-svg;
+ mask-image: $logo-alicloud-monochrome-svg;
+}
+
+%with-logo-aws-color-icon {
+ @extend %with-icon;
+ background-image: $logo-aws-color-svg;
+}
+%with-logo-aws-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-aws-color-svg;
+ mask-image: $logo-aws-color-svg;
+}
+
+%with-logo-aws-monochrome-icon {
+ @extend %with-icon;
+ background-image: $logo-aws-monochrome-svg;
+}
+%with-logo-aws-monochrome-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-aws-monochrome-svg;
+ mask-image: $logo-aws-monochrome-svg;
+}
+
+%with-logo-azure-color-icon {
+ @extend %with-icon;
+ background-image: $logo-azure-color-svg;
+}
+%with-logo-azure-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-azure-color-svg;
+ mask-image: $logo-azure-color-svg;
+}
+
+%with-logo-azure-monochrome-icon {
+ @extend %with-icon;
+ background-image: $logo-azure-monochrome-svg;
+}
+%with-logo-azure-monochrome-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-azure-monochrome-svg;
+ mask-image: $logo-azure-monochrome-svg;
+}
+
+%with-logo-bitbucket-color-icon {
+ @extend %with-icon;
+ background-image: $logo-bitbucket-color-svg;
+}
+%with-logo-bitbucket-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-bitbucket-color-svg;
+ mask-image: $logo-bitbucket-color-svg;
+}
+
+%with-logo-bitbucket-monochrome-icon {
+ @extend %with-icon;
+ background-image: $logo-bitbucket-monochrome-svg;
+}
+%with-logo-bitbucket-monochrome-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-bitbucket-monochrome-svg;
+ mask-image: $logo-bitbucket-monochrome-svg;
+}
+
+%with-logo-gcp-color-icon {
+ @extend %with-icon;
+ background-image: $logo-gcp-color-svg;
+}
+%with-logo-gcp-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-gcp-color-svg;
+ mask-image: $logo-gcp-color-svg;
+}
+
+%with-logo-gcp-monochrome-icon {
+ @extend %with-icon;
+ background-image: $logo-gcp-monochrome-svg;
+}
+%with-logo-gcp-monochrome-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-gcp-monochrome-svg;
+ mask-image: $logo-gcp-monochrome-svg;
+}
+
+%with-logo-github-color-icon {
+ @extend %with-icon;
+ background-image: $logo-github-color-svg;
+}
+%with-logo-github-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-github-color-svg;
+ mask-image: $logo-github-color-svg;
+}
+
+%with-logo-github-monochrome-icon {
+ @extend %with-icon;
+ background-image: $logo-github-monochrome-svg;
+}
+%with-logo-github-monochrome-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-github-monochrome-svg;
+ mask-image: $logo-github-monochrome-svg;
+}
+
+%with-logo-gitlab-color-icon {
+ @extend %with-icon;
+ background-image: $logo-gitlab-color-svg;
+}
+%with-logo-gitlab-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-gitlab-color-svg;
+ mask-image: $logo-gitlab-color-svg;
+}
+
+%with-logo-gitlab-monochrome-icon {
+ @extend %with-icon;
+ background-image: $logo-gitlab-monochrome-svg;
+}
+%with-logo-gitlab-monochrome-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-gitlab-monochrome-svg;
+ mask-image: $logo-gitlab-monochrome-svg;
+}
+
+%with-logo-kubernetes-color-icon {
+ @extend %with-icon;
+ background-image: $logo-kubernetes-color-svg;
+}
+%with-logo-kubernetes-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-kubernetes-color-svg;
+ mask-image: $logo-kubernetes-color-svg;
+}
+
+%with-logo-kubernetes-monochrome-icon {
+ @extend %with-icon;
+ background-image: $logo-kubernetes-monochrome-svg;
+}
+%with-logo-kubernetes-monochrome-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-kubernetes-monochrome-svg;
+ mask-image: $logo-kubernetes-monochrome-svg;
+}
+
+%with-logo-oracle-color-icon {
+ @extend %with-icon;
+ background-image: $logo-oracle-color-svg;
+}
+%with-logo-oracle-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-oracle-color-svg;
+ mask-image: $logo-oracle-color-svg;
+}
+
+%with-logo-oracle-monochrome-icon {
+ @extend %with-icon;
+ background-image: $logo-oracle-monochrome-svg;
+}
+%with-logo-oracle-monochrome-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-oracle-monochrome-svg;
+ mask-image: $logo-oracle-monochrome-svg;
+}
+
+%with-logo-slack-color-icon {
+ @extend %with-icon;
+ background-image: $logo-slack-color-svg;
+}
+%with-logo-slack-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-slack-color-svg;
+ mask-image: $logo-slack-color-svg;
+}
+
+%with-logo-slack-monochrome-icon {
+ @extend %with-icon;
+ background-image: $logo-slack-monochrome-svg;
+}
+%with-logo-slack-monochrome-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-slack-monochrome-svg;
+ mask-image: $logo-slack-monochrome-svg;
+}
+
+%with-logo-vmware-color-icon {
+ @extend %with-icon;
+ background-image: $logo-vmware-color-svg;
+}
+%with-logo-vmware-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-vmware-color-svg;
+ mask-image: $logo-vmware-color-svg;
+}
+
+%with-logo-vmware-monochrome-icon {
+ @extend %with-icon;
+ background-image: $logo-vmware-monochrome-svg;
+}
+%with-logo-vmware-monochrome-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $logo-vmware-monochrome-svg;
+ mask-image: $logo-vmware-monochrome-svg;
+}
%with-menu-icon {
@extend %with-icon;
background-image: $menu-svg;
}
+%with-menu-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $menu-svg;
+ mask-image: $menu-svg;
+}
+
+%with-message-icon {
+ @extend %with-icon;
+ background-image: $message-svg;
+}
+%with-message-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $message-svg;
+ mask-image: $message-svg;
+}
%with-minus-circle-fill-icon {
@extend %with-icon;
background-image: $minus-circle-fill-svg;
}
+%with-minus-circle-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $minus-circle-fill-svg;
+ mask-image: $minus-circle-fill-svg;
+}
%with-minus-circle-outline-icon {
@extend %with-icon;
background-image: $minus-circle-outline-svg;
}
+%with-minus-circle-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $minus-circle-outline-svg;
+ mask-image: $minus-circle-outline-svg;
+}
%with-minus-plain-icon {
@extend %with-icon;
background-image: $minus-plain-svg;
}
+%with-minus-plain-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $minus-plain-svg;
+ mask-image: $minus-plain-svg;
+}
%with-minus-square-fill-color-icon {
@extend %with-icon;
background-image: $minus-square-fill-color-svg;
}
+%with-minus-square-fill-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $minus-square-fill-color-svg;
+ mask-image: $minus-square-fill-color-svg;
+}
%with-minus-square-fill-icon {
@extend %with-icon;
background-image: $minus-square-fill-svg;
}
+%with-minus-square-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $minus-square-fill-svg;
+ mask-image: $minus-square-fill-svg;
+}
%with-minus-icon {
@extend %with-icon;
background-image: $minus-svg;
}
+%with-minus-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $minus-svg;
+ mask-image: $minus-svg;
+}
+
+%with-module-icon {
+ @extend %with-icon;
+ background-image: $module-svg;
+}
+%with-module-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $module-svg;
+ mask-image: $module-svg;
+}
%with-more-horizontal-icon {
@extend %with-icon;
background-image: $more-horizontal-svg;
}
+%with-more-horizontal-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $more-horizontal-svg;
+ mask-image: $more-horizontal-svg;
+}
%with-more-vertical-icon {
@extend %with-icon;
@@ -417,6 +1164,7 @@
}
%with-more-vertical-mask {
@extend %with-mask;
+ -webkit-mask-image: $more-vertical-svg;
mask-image: $more-vertical-svg;
}
@@ -424,74 +1172,299 @@
@extend %with-icon;
background-image: $nomad-logo-color-svg;
}
+%with-nomad-logo-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $nomad-logo-color-svg;
+ mask-image: $nomad-logo-color-svg;
+}
+
+%with-notification-disabled-icon {
+ @extend %with-icon;
+ background-image: $notification-disabled-svg;
+}
+%with-notification-disabled-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $notification-disabled-svg;
+ mask-image: $notification-disabled-svg;
+}
+
+%with-notification-fill-icon {
+ @extend %with-icon;
+ background-image: $notification-fill-svg;
+}
+%with-notification-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $notification-fill-svg;
+ mask-image: $notification-fill-svg;
+}
+
+%with-notification-outline-icon {
+ @extend %with-icon;
+ background-image: $notification-outline-svg;
+}
+%with-notification-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $notification-outline-svg;
+ mask-image: $notification-outline-svg;
+}
+
+%with-outline-icon {
+ @extend %with-icon;
+ background-image: $outline-svg;
+}
+%with-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $outline-svg;
+ mask-image: $outline-svg;
+}
+
+%with-page-outline-icon {
+ @extend %with-icon;
+ background-image: $page-outline-svg;
+}
+%with-page-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $page-outline-svg;
+ mask-image: $page-outline-svg;
+}
+
+%with-partner-icon {
+ @extend %with-icon;
+ background-image: $partner-svg;
+}
+%with-partner-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $partner-svg;
+ mask-image: $partner-svg;
+}
%with-plus-circle-fill-icon {
@extend %with-icon;
background-image: $plus-circle-fill-svg;
}
+%with-plus-circle-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $plus-circle-fill-svg;
+ mask-image: $plus-circle-fill-svg;
+}
%with-plus-circle-outline-icon {
@extend %with-icon;
background-image: $plus-circle-outline-svg;
}
+%with-plus-circle-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $plus-circle-outline-svg;
+ mask-image: $plus-circle-outline-svg;
+}
%with-plus-plain-icon {
@extend %with-icon;
background-image: $plus-plain-svg;
}
+%with-plus-plain-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $plus-plain-svg;
+ mask-image: $plus-plain-svg;
+}
%with-plus-square-fill-icon {
@extend %with-icon;
background-image: $plus-square-fill-svg;
}
+%with-plus-square-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $plus-square-fill-svg;
+ mask-image: $plus-square-fill-svg;
+}
+
+%with-provider-icon {
+ @extend %with-icon;
+ background-image: $provider-svg;
+}
+%with-provider-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $provider-svg;
+ mask-image: $provider-svg;
+}
+
+%with-public-default-icon {
+ @extend %with-icon;
+ background-image: $public-default-svg;
+}
+%with-public-default-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $public-default-svg;
+ mask-image: $public-default-svg;
+}
+
+%with-public-locked-icon {
+ @extend %with-icon;
+ background-image: $public-locked-svg;
+}
+%with-public-locked-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $public-locked-svg;
+ mask-image: $public-locked-svg;
+}
%with-queue-icon {
@extend %with-icon;
background-image: $queue-svg;
}
+%with-queue-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $queue-svg;
+ mask-image: $queue-svg;
+}
+
+%with-radio-button-checked-icon {
+ @extend %with-icon;
+ background-image: $radio-button-checked-svg;
+}
+%with-radio-button-checked-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $radio-button-checked-svg;
+ mask-image: $radio-button-checked-svg;
+}
+
+%with-radio-button-unchecked-icon {
+ @extend %with-icon;
+ background-image: $radio-button-unchecked-svg;
+}
+%with-radio-button-unchecked-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $radio-button-unchecked-svg;
+ mask-image: $radio-button-unchecked-svg;
+}
+
+%with-random-icon {
+ @extend %with-icon;
+ background-image: $random-svg;
+}
+%with-random-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $random-svg;
+ mask-image: $random-svg;
+}
%with-redirect-icon {
@extend %with-icon;
background-image: $redirect-svg;
}
+%with-redirect-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $redirect-svg;
+ mask-image: $redirect-svg;
+}
-%with-refresh-icon {
+%with-refresh-alert-icon {
@extend %with-icon;
- background-image: $refresh-svg;
+ background-image: $refresh-alert-svg;
+}
+%with-refresh-alert-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $refresh-alert-svg;
+ mask-image: $refresh-alert-svg;
+}
+
+%with-refresh-default-icon {
+ @extend %with-icon;
+ background-image: $refresh-default-svg;
+}
+%with-refresh-default-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $refresh-default-svg;
+ mask-image: $refresh-default-svg;
+}
+
+%with-remix-icon {
+ @extend %with-icon;
+ background-image: $remix-svg;
+}
+%with-remix-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $remix-svg;
+ mask-image: $remix-svg;
+}
+
+%with-ribbon-icon {
+ @extend %with-icon;
+ background-image: $ribbon-svg;
+}
+%with-ribbon-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $ribbon-svg;
+ mask-image: $ribbon-svg;
}
%with-run-icon {
@extend %with-icon;
background-image: $run-svg;
}
+%with-run-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $run-svg;
+ mask-image: $run-svg;
+}
%with-search-color-icon {
@extend %with-icon;
background-image: $search-color-svg;
}
+%with-search-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $search-color-svg;
+ mask-image: $search-color-svg;
+}
%with-search-icon {
@extend %with-icon;
background-image: $search-svg;
}
+%with-search-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $search-svg;
+ mask-image: $search-svg;
+}
%with-service-identity-icon {
@extend %with-icon;
background-image: $service-identity-svg;
}
+%with-service-identity-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $service-identity-svg;
+ mask-image: $service-identity-svg;
+}
%with-settings-icon {
@extend %with-icon;
background-image: $settings-svg;
}
+%with-settings-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $settings-svg;
+ mask-image: $settings-svg;
+}
+
+%with-source-file-icon {
+ @extend %with-icon;
+ background-image: $source-file-svg;
+}
+%with-source-file-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $source-file-svg;
+ mask-image: $source-file-svg;
+}
%with-star-fill-icon {
@extend %with-icon;
background-image: $star-fill-svg;
}
-
%with-star-fill-mask {
@extend %with-mask;
+ -webkit-mask-image: $star-fill-svg;
mask-image: $star-fill-svg;
}
@@ -499,96 +1472,191 @@
@extend %with-icon;
background-image: $star-outline-svg;
}
+%with-star-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $star-outline-svg;
+ mask-image: $star-outline-svg;
+}
%with-star-icon {
@extend %with-icon;
background-image: $star-svg;
}
-
-%with-sub-arrow-left-icon {
- @extend %with-icon;
- background-image: $sub-arrow-left-svg;
+%with-star-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $star-svg;
+ mask-image: $star-svg;
}
-%with-sub-arrow-right-icon {
+%with-sub-left-icon {
@extend %with-icon;
- background-image: $sub-arrow-right-svg;
+ background-image: $sub-left-svg;
+}
+%with-sub-left-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $sub-left-svg;
+ mask-image: $sub-left-svg;
+}
+
+%with-sub-right-icon {
+ @extend %with-icon;
+ background-image: $sub-right-svg;
+}
+%with-sub-right-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $sub-right-svg;
+ mask-image: $sub-right-svg;
+}
+
+%with-support-icon {
+ @extend %with-icon;
+ background-image: $support-svg;
+}
+%with-support-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $support-svg;
+ mask-image: $support-svg;
}
%with-swap-horizontal-icon {
@extend %with-icon;
background-image: $swap-horizontal-svg;
}
+%with-swap-horizontal-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $swap-horizontal-svg;
+ mask-image: $swap-horizontal-svg;
+}
%with-swap-vertical-icon {
@extend %with-icon;
background-image: $swap-vertical-svg;
}
+%with-swap-vertical-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $swap-vertical-svg;
+ mask-image: $swap-vertical-svg;
+}
%with-terraform-logo-color-icon {
@extend %with-icon;
background-image: $terraform-logo-color-svg;
}
-
-%with-tier-enterprise-icon {
- @extend %with-icon;
- background-image: $tier-enterprise-svg;
-}
-
-%with-tier-oss-icon {
- @extend %with-icon;
- background-image: $tier-oss-svg;
+%with-terraform-logo-color-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $terraform-logo-color-svg;
+ mask-image: $terraform-logo-color-svg;
}
%with-trash-icon {
@extend %with-icon;
background-image: $trash-svg;
}
+%with-trash-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $trash-svg;
+ mask-image: $trash-svg;
+}
%with-tune-icon {
@extend %with-icon;
background-image: $tune-svg;
}
+%with-tune-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $tune-svg;
+ mask-image: $tune-svg;
+}
%with-unfold-less-icon {
@extend %with-icon;
background-image: $unfold-less-svg;
}
+%with-unfold-less-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $unfold-less-svg;
+ mask-image: $unfold-less-svg;
+}
%with-unfold-more-icon {
@extend %with-icon;
background-image: $unfold-more-svg;
}
+%with-unfold-more-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $unfold-more-svg;
+ mask-image: $unfold-more-svg;
+}
%with-upload-icon {
@extend %with-icon;
background-image: $upload-svg;
}
+%with-upload-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $upload-svg;
+ mask-image: $upload-svg;
+}
+
+%with-user-add-icon {
+ @extend %with-icon;
+ background-image: $user-add-svg;
+}
+%with-user-add-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $user-add-svg;
+ mask-image: $user-add-svg;
+}
%with-user-organization-icon {
@extend %with-icon;
background-image: $user-organization-svg;
}
+%with-user-organization-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $user-organization-svg;
+ mask-image: $user-organization-svg;
+}
%with-user-plain-icon {
@extend %with-icon;
background-image: $user-plain-svg;
}
+%with-user-plain-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $user-plain-svg;
+ mask-image: $user-plain-svg;
+}
%with-user-square-fill-icon {
@extend %with-icon;
background-image: $user-square-fill-svg;
}
+%with-user-square-fill-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $user-square-fill-svg;
+ mask-image: $user-square-fill-svg;
+}
%with-user-square-outline-icon {
@extend %with-icon;
background-image: $user-square-outline-svg;
}
+%with-user-square-outline-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $user-square-outline-svg;
+ mask-image: $user-square-outline-svg;
+}
%with-user-team-icon {
@extend %with-icon;
background-image: $user-team-svg;
}
+%with-user-team-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $user-team-svg;
+ mask-image: $user-team-svg;
+}
%with-visibility-hide-icon {
@extend %with-icon;
@@ -596,6 +1664,7 @@
}
%with-visibility-hide-mask {
@extend %with-mask;
+ -webkit-mask-image: $visibility-hide-svg;
mask-image: $visibility-hide-svg;
}
@@ -605,5 +1674,16 @@
}
%with-visibility-show-mask {
@extend %with-mask;
+ -webkit-mask-image: $visibility-show-svg;
mask-image: $visibility-show-svg;
}
+
+%with-webhook-icon {
+ @extend %with-icon;
+ background-image: $webhook-svg;
+}
+%with-webhook-mask {
+ @extend %with-mask;
+ -webkit-mask-image: $webhook-svg;
+ mask-image: $webhook-svg;
+}