..F....... [ZBX-17748] fixed subfilter styles

3 files changed, 48 insertions, 47 deletions

diff --git a/sass/stylesheets/sass/components/_subfilter.scss b/sass/stylesheets/sass/components/_subfilter.scss
new file mode 100755
index 00000000000..52ffa81361f
--- /dev/null
+++ b/sass/stylesheets/sass/components/_subfilter.scss
@@ -0,0 +1,47 @@
+.subfilter-option-grid {
+	grid-template-columns: minmax(75px, max-content) auto;
+	display: grid;
+	margin: 5px 0;
+
+	.subfilter-options {
+		grid-column: 2 / -1;
+	}
+}
+
+.subfilter,
+.subfilter-enabled {
+	display: inline-block;
+	height: 18px;
+	position: relative;
+}
+
+.subfilter {
+	margin-right: 10px;
+	white-space: nowrap;
+}
+
+.subfilter-enabled {
+	background-color: $ui-bg-selected-color;
+	border-radius: 2px;
+	color: $font-selected-color;
+	padding: 0 4px;
+
+	.link-action {
+		color: $font-selected-color;
+		text-decoration: none;
+
+		&:focus {
+			color: $font-selected-color;
+			border-bottom: 2px solid rgba($font-selected-color, .7);
+		}
+
+		&:hover {
+			color: $font-selected-color;
+			border-bottom: 1px solid rgba($font-selected-color, .7);
+		}
+	}
+
+	sup {
+		color: lighten($ui-bg-selected-color, 25%);
+	}
+}
diff --git a/sass/stylesheets/sass/components/_tabfilter.scss b/sass/stylesheets/sass/components/_tabfilter.scss
index 8807d133c3b..7736a75ff4c 100644
--- a/sass/stylesheets/sass/components/_tabfilter.scss
+++ b/sass/stylesheets/sass/components/_tabfilter.scss
@@ -40,16 +40,6 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 		}
 	}
 
-	.subfilter-option-grid {
-		grid-template-columns: minmax(75px, max-content) auto;
-		display: grid;
-		margin: 5px 0;
-
-		.subfilter-options {
-			grid-column: 2 / -1;
-		}
-	}
-
 	/* Top navigation labels */
 	nav > ul {
 		display: flex;
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index 1711390ed35..2cb1116bd5b 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -39,6 +39,7 @@ $browser-sprite-path: '../img/browser-sprite.png?20211222';
 @import "components/message-box";
 @import "components/radio-list-control";
 @import "components/service/info";
+@import "components/subfilter";
 @import "components/tabfilter";
 @import "components/toc";
 @import "components/z-select";
@@ -1077,43 +1078,6 @@ form {
 	}
 }
 
-.subfilter,
-.subfilter-enabled {
-	display: inline-block;
-	height: 18px;
-	position: relative;
-}
-
-.subfilter {
-	margin-right: 10px;
-}
-
-.subfilter-enabled {
-	background-color: $ui-bg-selected-color;
-	border-radius: 2px;
-	color: $font-selected-color;
-	padding: 0 4px;
-
-	.link-action {
-		color: $font-selected-color;
-		text-decoration: none;
-
-		&:focus {
-			color: $font-selected-color;
-			border-bottom: 2px solid rgba($font-selected-color, .7);
-		}
-
-		&:hover {
-			color: $font-selected-color;
-			border-bottom: 1px solid rgba($font-selected-color, .7);
-		}
-	}
-
-	sup {
-		color: lighten($ui-bg-selected-color, 25%);
-	}
-}
-
 .filter-forms {
 	margin: 0 auto;
 	text-align: center;