Replace scss variable with css one and remove declaration

Signed-off-by: Marco Ambrosini <[email protected]>
nextcloud-libraries · Jun 17, 2024 · 193f916 · 193f916
1 parent fccf879
commit 193f916
Show file tree

Hide file tree

Showing 26 changed files with 88 additions and 94 deletions.
diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
@@ -5,7 +5,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));
@@ -81,22 +81,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;
@@ -110,7 +110,7 @@
 		}
 
 		.editingContainer {
-			width: calc(100% - #{$clickable-area});
+			width: calc(100% - #{var(--default-clickable-area)});
 			margin: auto;
 		}
 
@@ -141,21 +141,21 @@
 .app-navigation-entry__deleted {
 	display: inline-flex;
 	flex: 1 1 0;
-	padding-left: $clickable-area - $icon-margin !important;
+	padding-left: 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
@@ -69,25 +69,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 {

diff --git a/src/assets/variables.scss b/src/assets/variables.scss
@@ -19,19 +19,13 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-
-// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
-// recommended is 48px
-// 34px is what we choose and have very good visual-to-usability ratio
-$clickable-area: 34px;
-
 // 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
+// icon padding for a var(--default-clickable-area) width and a $icon-size icon
 // ( 34px - 16px ) / 2
-$icon-margin: math.div($clickable-area - $icon-size, 2);
+$icon-margin: math.div(var(--default-clickable-area) - $icon-size, 2);
 
 // transparency background for icons
 $icon-focus-bg: rgba(127, 127, 127, .25);

diff --git a/src/components/NcActionCaption/NcActionCaption.vue b/src/components/NcActionCaption/NcActionCaption.vue
@@ -61,15 +61,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
@@ -200,7 +200,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
@@ -538,8 +538,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 {
@@ -558,7 +558,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: #{math.div(var(--default-clickable-area), 2)} 0 #{math.div(var(--default-clickable-area), 2)} var(--default-clickable-area);
 
 		background-position: #{$icon-margin} center;
 		background-size: $icon-size;

diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
@@ -195,7 +195,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
@@ -221,7 +221,7 @@ $input-margin: 4px;
 	box-shadow: none;
 
 	font-weight: normal;
-	line-height: $clickable-area;
+	line-height: var(--default-clickable-area);
 
 	& > span {
 		cursor: pointer;
@@ -233,15 +233,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: #{math.div(var(--default-clickable-area), 2)} 0 #{math.div(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 {
@@ -278,8 +278,8 @@ $input-margin: 4px;
 		position: absolute;
 		right: $icon-margin + 1;
 		bottom: 1px;
-		width: #{$clickable-area - $input-margin * 2};
-		height: #{$clickable-area - $input-margin * 2};
+		width: #{var(--default-clickable-area) - $input-margin * 2};
+		height: #{var(--default-clickable-area) - $input-margin * 2};
 		box-sizing: border-box;
 		margin: 0;
 		padding: 7px 6px;
@@ -301,10 +301,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: #{var(--default-clickable-area) * 2 - $input-margin * 2}; /* twice the element margin-y */
+		max-height: #{var(--default-clickable-area) * 3 - $input-margin * 2}; /* twice the element margin-y */
 		// block width widening
-		min-width: $clickable-area * 4;
+		min-width: var(--default-clickable-area) * 4;
 		width: 100% !important;
 		margin: 0;
 

diff --git a/src/components/NcAppContent/NcAppDetailsToggle.vue b/src/components/NcAppContent/NcAppDetailsToggle.vue
@@ -98,8 +98,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
@@ -228,7 +228,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;
@@ -241,12 +241,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: math.div(var(--default-clickable-area), 2);
 }
 </style>
diff --git a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
@@ -188,7 +188,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
@@ -102,7 +102,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;
@@ -115,17 +115,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
@@ -90,7 +90,7 @@ export default {
 	position: absolute;
 	top: var(--app-navigation-padding);
 	right: calc(0px - var(--app-navigation-padding));
-	margin-right: - $clickable-area;
+	margin-right: - var(--default-clickable-area);
 }
 
 button.app-navigation-toggle {

diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -425,9 +425,9 @@ export default {
 		display: flex;
 		align-content: center;
 		font-size: 16px;
-		height: $clickable-area;
+		height: var(--default-clickable-area);
 		margin: 4px 0;
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 		border-radius: var(--border-radius-pill);
 		font-weight: bold;
 		padding: 0 20px;