fix: Replace all hardcoded values with CSS variables

Co-authored-by: Ferdinand Thiessen <[email protected]> Co-authored-by: Grigorii K. Shartsev <[email protected]> Signed-off-by: Marco <[email protected]>
nextcloud-libraries · Jul 1, 2024 · 8df3711 · 8df3711
1 parent 7890745
commit 8df3711
Show file tree

Hide file tree

Showing 37 changed files with 112 additions and 119 deletions.
diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
@@ -10,7 +10,7 @@
 	flex-wrap: wrap;
 	box-sizing: border-box;
 	width: 100%;
-	min-height: $clickable-area;
+	min-height: var(--default-clickable-area);
 	transition: background-color var(--animation-quick) ease-in-out;
 	transition: background-color 200ms ease-in-out;
 	border-radius: var(--border-radius-element, var(--border-radius-pill));
@@ -86,22 +86,22 @@
 		overflow: hidden;
 		flex: 1 1 0;
 		box-sizing: border-box;
-		min-height: $clickable-area;
+		min-height: var(--default-clickable-area);
 		padding: 0;
 		white-space: nowrap;
 		color: var(--color-main-text);
 		background-repeat: no-repeat;
 		background-position: $icon-margin center;
 		background-size: $icon-size $icon-size;
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 
 		.app-navigation-entry-icon {
 			display: flex;
 			align-items: center;
-			flex: 0 0 $clickable-area;
+			flex: 0 0 var(--default-clickable-area);
 			justify-content: center;
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			background-size: $icon-size $icon-size;
 			background-repeat: no-repeat;
 			background-position: $icon-margin center;
@@ -115,7 +115,7 @@
 		}
 
 		.editingContainer {
-			width: calc(100% - #{$clickable-area});
+			width: calc(100% - var(--default-clickable-area));
 			margin: auto;
 		}
 
@@ -146,21 +146,21 @@
 .app-navigation-entry__deleted {
 	display: inline-flex;
 	flex: 1 1 0;
-	padding-left: $clickable-area - $icon-margin !important;
+	padding-left: calc(var(--default-clickable-area) - $icon-margin) !important;
 	.app-navigation-entry__deleted-description {
 		position: relative;
 		overflow: hidden;
 		flex: 1 1 0;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 	}
 }
 
 /* counter and actions */
 .app-navigation-entry__utils {
 	display: flex;
-	min-width: $clickable-area;
+	min-width: var(--default-clickable-area);
 	align-items: center;
 	flex: 0 1 auto;
 	justify-content: flex-end;

diff --git a/src/assets/action.scss b/src/assets/action.scss
@@ -51,25 +51,25 @@
 
 		font-weight: normal;
 		font-size: var(--default-font-size);
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 
 		& > span {
 			cursor: pointer;
 			white-space: nowrap;
 		}
 
 		&__icon {
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			opacity: $opacity_full;
 			background-position: $icon-margin center;
 			background-size: $icon-size;
 			background-repeat: no-repeat;
 		}
 
 		&:deep(.material-design-icon) {
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			opacity: $opacity_full;
 
 			.material-design-icon__svg {
@@ -83,8 +83,7 @@
 			max-width: 220px;
 			line-height: 1.6em;
 
-			// 14px are currently 1em line-height. Mixing units as '44px - 1.6em' does not work.
-			padding: #{math.div($clickable-area - 1.6 * 14px, 2)} 0;
+			padding: calc((var(--default-clickable-area) - 1.6em) / 2) 0;
 
 			cursor: pointer;
 			text-align: left;
@@ -114,7 +113,7 @@
 			margin-left: auto;
 			// Align with right end of the button
 			// This is the padding-right
-			margin-right: -$icon-margin;
+			margin-right: calc($icon-margin * -1);
 		}
 	}
 }
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
@@ -2,19 +2,13 @@
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-
-// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
-// recommended is 48px
-// 44px is what we choose and have very good visual-to-usability ratio
-$clickable-area: 44px;
-
 // background icon size
 // also used for the scss icon font
 $icon-size: 16px;
 
-// icon padding for a $clickable-area width and a $icon-size icon
-// ( 44px - 16px ) / 2
-$icon-margin: math.div($clickable-area - $icon-size, 2);
+// icon padding for a var(--default-clickable-area) width and a $icon-size icon
+// ( 34px - 16px ) / 2
+$icon-margin: calc((var(--default-clickable-area) - $icon-size) / 2);
 
 // transparency background for icons
 $icon-focus-bg: rgba(127, 127, 127, .25);

diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
@@ -548,6 +548,6 @@ export default {
 
 .action-button__pressed-icon {
 	margin-left: auto;
-	margin-right: -$icon-margin;
+	margin-right: calc($icon-margin * -1);
 }
 </style>
diff --git a/src/components/NcActionCaption/NcActionCaption.vue b/src/components/NcActionCaption/NcActionCaption.vue
@@ -46,15 +46,15 @@ export default {
 <style lang="scss" scoped>
 	.app-navigation-caption {
 		color: var(--color-text-maxcontrast);
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		box-shadow: none !important;
 		user-select: none;
 		pointer-events: none;
 		margin-left: 12px;
 		padding-right: 14px;
-		height: $clickable-area;
+		height: var(--default-clickable-area);
 		display: flex;
 		align-items: center;
 	}

diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue
@@ -182,7 +182,7 @@ export default {
 	box-shadow: none;
 
 	font-weight: normal;
-	line-height: $clickable-area;
+	line-height: var(--default-clickable-area);
 
 	/* checkbox/radio fixes */
 	&__checkbox {

diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
@@ -520,8 +520,8 @@ $input-margin: 4px;
 		justify-content: center;
 
 		&:deep(.material-design-icon) {
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			opacity: $opacity_full;
 
 			.material-design-icon__svg {
@@ -540,7 +540,7 @@ $input-margin: 4px;
 		min-height: 0;
 		/* Keep padding to define the width to
 			assure correct position of a possible text */
-		padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;
+		padding: calc(var(--default-clickable-area)/ 2) 0 calc(var(--default-clickable-area)/ 2) var(--default-clickable-area);
 
 		background-position: #{$icon-margin} center;
 		background-size: $icon-size;
@@ -610,12 +610,12 @@ $input-margin: 4px;
 // add the same bottomMargin as the right padding
 // for visual balance
 li:last-child > .action-input {
-	padding-bottom: $icon-margin - $input-margin;
+	padding-bottom: calc($icon-margin - $input-margin);
 }
 
 // same for first item
 li:first-child > .action-input:not(.action-input--visible-label) {
-	padding-top: $icon-margin - $input-margin;
+	padding-top: calc($icon-margin - $input-margin);
 }
 
 </style>
diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
@@ -177,7 +177,7 @@ export default {
 	box-shadow: none;
 
 	font-weight: normal;
-	line-height: $clickable-area;
+	line-height: var(--default-clickable-area);
 
 	/* checkbox/radio fixes */
 	&__radio {

diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -203,7 +203,7 @@ $input-margin: 4px;
 	box-shadow: none;
 
 	font-weight: normal;
-	line-height: $clickable-area;
+	line-height: var(--default-clickable-area);
 
 	& > span {
 		cursor: pointer;
@@ -215,15 +215,15 @@ $input-margin: 4px;
 		min-height: 0;
 		/* Keep padding to define the width to
 			assure correct position of a possible text */
-		padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;
+		padding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);
 
 		background-position: #{$icon-margin} center;
 		background-size: $icon-size;
 	}
 
 	&:deep(.material-design-icon) {
-		width: $clickable-area;
-		height: $clickable-area;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		opacity: $opacity_full;
 
 		.material-design-icon__svg {
@@ -258,10 +258,10 @@ $input-margin: 4px;
 
 		// bottom-right corner
 		position: absolute;
-		right: $icon-margin + 1;
+		right: calc($icon-margin + 1);
 		bottom: 1px;
-		width: #{$clickable-area - $input-margin * 2};
-		height: #{$clickable-area - $input-margin * 2};
+		width: calc(var(--default-clickable-area) - $input-margin * 2);
+		height: calc(var(--default-clickable-area) - $input-margin * 2);
 		box-sizing: border-box;
 		margin: 0;
 		padding: 7px 6px;
@@ -283,10 +283,10 @@ $input-margin: 4px;
 		color: inherit;
 		border-color: var(--color-border-maxcontrast);
 
-		min-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */
-		max-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */
+		min-height: calc(var(--default-clickable-area) * 2 - $input-margin * 2); /* twice the element margin-y */
+		max-height: calc(var(--default-clickable-area) * 3 - $input-margin * 2); /* twice the element margin-y */
 		// block width widening
-		min-width: $clickable-area * 4;
+		min-width: calc(var(--default-clickable-area) * 4);
 		width: 100% !important;
 		margin: 0;
 
@@ -329,11 +329,11 @@ $input-margin: 4px;
 // add the same bottomMargin as the right padding
 // for visual balance
 li:last-child > .action-text-editable {
-	margin-bottom: $icon-margin - $input-margin;
+	margin-bottom: calc($icon-margin - $input-margin);
 }
 
 // same for first item
 li:first-child > .action-text-editable {
-	margin-top: $icon-margin - $input-margin;
+	margin-top: calc($icon-margin - $input-margin);
 }
 </style>
diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
@@ -2009,7 +2009,7 @@ export default {
 
 	// Spacing between buttons
 	& > button {
-		margin-right: math.div($icon-margin, 2);
+		margin-right: calc($icon-margin / 2);
 	}
 }
 

diff --git a/src/components/NcAppContent/NcAppDetailsToggle.vue b/src/components/NcAppContent/NcAppDetailsToggle.vue
@@ -81,8 +81,8 @@ export default {
 <style lang="scss" scoped>
 .app-details-toggle {
 	position: sticky;
-	width: $clickable-area;
-	height: $clickable-area;
+	width: var(--default-clickable-area);
+	height: var(--default-clickable-area);
 	padding: $icon-margin;
 	cursor: pointer;
 	opacity: .6;

diff --git a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
@@ -233,7 +233,7 @@ export default {
 		font-weight: bold;
 		color: var(--color-main-text);
 		font-size: var(--default-font-size);
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -246,12 +246,12 @@ export default {
 	}
 
 	&__actions {
-		flex: 0 0 $clickable-area;
+		flex: 0 0 var(--default-clickable-area);
 	}
 }
 
 // extra top space if it's not the first item on the list
 .app-navigation-caption:not(:first-child) {
-	margin-top: math.div($clickable-area, 2);
+	margin-top: calc(var(--default-clickable-area) / 2);
 }
 </style>
diff --git a/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue b/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue
@@ -72,7 +72,7 @@ export default {
 .app-navigation-entry__icon-bullet {
 	display: block;
 	// there is 2 margins
-	padding: $icon-margin + 1px;
+	padding: calc($icon-margin + 1px);
 	div {
 		width: $icon-size - 2px;
 		height: $icon-size - 2px;

diff --git a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
@@ -171,7 +171,7 @@ export default {
 }
 
 .newItemContainer {
-	width: calc(100% - #{$clickable-area});
+	width: calc(100% - var(--default-clickable-area));
 	margin: auto;
 }
 </style>
diff --git a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
@@ -85,7 +85,7 @@ export default {
 		.settings-button {
 			display: flex;
 			flex: 1 1 0;
-			height: $clickable-area;
+			height: var(--default-clickable-area);
 			width: 100%;
 			padding: 0;
 			margin: 0;
@@ -98,17 +98,17 @@ export default {
 			font-size: 100%;
 			color: var(--color-main-text);
 			padding-right: 14px;
-			line-height: $clickable-area;
+			line-height: var(--default-clickable-area);
 
 			&:hover,
 			&:focus {
 				background-color: var(--color-background-hover);
 			}
 
 			&__icon {
-				width: $clickable-area;
-				height: $clickable-area;
-				min-width: $clickable-area;
+				width: var(--default-clickable-area);
+				height: var(--default-clickable-area);
+				min-width: var(--default-clickable-area);
 			}
 			&__label {
 				overflow: hidden;

diff --git a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
@@ -72,7 +72,7 @@ export default {
 	position: absolute;
 	top: var(--app-navigation-padding);
 	right: calc(0px - var(--app-navigation-padding));
-	margin-right: - $clickable-area;
+	margin-right: calc(-1 * var(--default-clickable-area));
 }
 
 button.app-navigation-toggle {