feat(core): ✨ use consistent spacing for menu elements

StarCitizenTools · Jul 6, 2023 · 462d1dd · 462d1dd
1 parent 417c151
commit 462d1dd
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 12 deletions.
diff --git a/resources/skins.citizen.preferences/skins.citizen.preferences.less b/resources/skins.citizen.preferences/skins.citizen.preferences.less
@@ -63,7 +63,7 @@
 
 #citizen-pref {
 	&-header {
-		padding: 1.25rem 1.25rem 0;
+		padding: var( --space-lg ) var( --space-md ) 0;
 		color: var( --color-base--emphasized );
 		font-size: 1rem;
 		font-weight: var( --font-weight-semibold );
@@ -79,7 +79,7 @@
 		}
 
 		fieldset {
-			padding: 0 1.25rem;
+			padding: 0 var( --space-md );
 			border: 0;
 			margin: 0;
 			appearance: none;
@@ -93,8 +93,8 @@
 
 	&-form {
 		display: grid;
-		margin: 1rem 0;
-		gap: 1.25rem;
+		margin: var( --space-md ) 0;
+		gap: var( --space-md );
 	}
 
 	&-theme {
@@ -132,7 +132,7 @@
 
 	&-resetbutton {
 		width: 100%;
-		padding: 0.625rem 1.25rem;
+		padding: var( --space-sm ) var( --space-md );
 		border: 0;
 		border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
 		appearance: none;

diff --git a/resources/skins.citizen.styles/components/Drawer.less b/resources/skins.citizen.styles/components/Drawer.less
@@ -8,7 +8,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: var( --space-md );
+		padding: var( --space-sm )  var( --space-md ) var( --space-md );
 		border-bottom: 1px solid var( --border-color-base );
 		gap: var( --space-md );
 	}
@@ -35,14 +35,14 @@
 		display: grid;
 		max-width: 92vw;
 		justify-content: center;
-		padding: var( --space-xs ) var( --space-md );
+		padding: var( --space-xs );
 		font-size: 0.875rem; // TODO: Make this a variable
 		gap: var( --space-xs );
 		grid-template-columns: repeat( auto-fit, 15rem );
 
 		a {
 			.menu-item-link;
-			padding: 0.625rem var( --space-md ); // TODO: Make this a variable
+			padding: var( --space-xs ) var( --space-md ); // TODO: Make this a variable
 			border-radius: var( --border-radius--small );
 
 			&:hover {

diff --git a/resources/skins.citizen.styles/components/Menu.less b/resources/skins.citizen.styles/components/Menu.less
@@ -1,14 +1,18 @@
 .citizen-menu {
 	&__heading {
 		display: block;
-		padding: 0.625rem var( --space-md );
+		padding: var( --space-xs ) var( --space-md );
 		margin: 0;
 		color: var( --color-base--subtle );
 		font-size: inherit;
 		font-weight: var( --font-weight-normal );
 		letter-spacing: 0.05em;
 	}
 
+	.mw-list-item {
+		line-height: var( --line-height-xs );
+	}
+
 	a {
 		&:hover,
 		&:focus {

diff --git a/resources/skins.citizen.styles/components/Pagetools.less b/resources/skins.citizen.styles/components/Pagetools.less
@@ -49,7 +49,7 @@
 		.citizen-card-hide( top right );
 
 		a {
-			padding: 0.625rem var( --space-md );
+			padding: var( --space-xs ) var( --space-md );
 			.menu-item-link;
 
 			&:hover {

diff --git a/resources/skins.citizen.styles/components/Sitestats.less b/resources/skins.citizen.styles/components/Sitestats.less
@@ -2,6 +2,8 @@
 	display: flex;
 	font-size: 0.875rem; // TODO: Put this in variable
 	gap: var( --space-md );
+	line-height: var( --line-height-xxs );
+	white-space: nowrap;
 
 	&__item {
 		display: flex;

diff --git a/resources/skins.citizen.styles/components/Usermenu.less b/resources/skins.citizen.styles/components/Usermenu.less
@@ -26,8 +26,7 @@
 			a {
 				.menu-item-link;
 				align-items: center;
-				// TODO: Need to revisit this spacing, maybe set a min-height instead?
-				padding: 0.625rem var( --space-md );
+				padding: var( --space-xs ) var( --space-md );
 
 				&:hover {
 					.menu-item-link-hover;