Update settings group layout to use MDC switch variables.

google · Dec 10, 2024 · 06417ac · 06417ac
1 parent 8971a43
commit 06417ac
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/assets/sass/components/settings/_googlesitekit-settings-group.scss b/assets/sass/components/settings/_googlesitekit-settings-group.scss
@@ -55,7 +55,7 @@
 			color: $c-surfaces-on-surface-variant;
 			flex-basis: 100%;
 			font-size: $fs-label-sm;
-			margin: 6px 0 0 calc(32px + 10px);
+			margin: 6px 0 0 $mdc-switch-track-width + $mdc-switch-label-margin-left;
 		}
 
 		.googlesitekit-analytics-enable-enhanced-measurement--loading {

diff --git a/assets/sass/config/_variables.scss b/assets/sass/config/_variables.scss
@@ -307,6 +307,7 @@ $mdc-typography-styles-subtitle1: (
 $mdc-text-field-error: $c-utility-error;
 $mdc-text-field-placeholder-ink-color: $c-interactive-on-disable-container;
 $mdc-text-field-label: $c-interactive-on-disable-container;
+$mdc-switch-label-margin-left: 10px;
 
 // Custom max width for settings notice content
 $max-width-settings-notice-content: 1098px;

diff --git a/assets/sass/vendor/_mdc-switch.scss b/assets/sass/vendor/_mdc-switch.scss
@@ -40,7 +40,7 @@
 		font-size: $fs-body-md;
 		letter-spacing: $ls-s;
 		line-height: $lh-body-md;
-		margin-left: 10px;
+		margin-left: $mdc-switch-label-margin-left;
 	}
 
 	.mdc-switch__track {