enh(NcActions): Readability

Signed-off-by: Christopher Ng <chrng8@gmail.com>
nextcloud-libraries · May 6, 2023 · 35aef22 · 35aef22
1 parent 2783024
commit 35aef22
Show file tree

Hide file tree

Showing 6 changed files with 2 additions and 43 deletions.
diff --git a/src/assets/action.scss b/src/assets/action.scss
@@ -61,7 +61,6 @@
 		cursor: pointer;
 		white-space: nowrap;
 
-		opacity: $opacity_normal;
 		color: var(--color-main-text);
 		border: 0;
 		border-radius: 0; // otherwise Safari will cut the border-radius area
@@ -72,11 +71,6 @@
 		font-size: var(--default-font-size);
 		line-height: $clickable-area;
 
-		&:hover,
-		&:focus {
-			opacity: $opacity_full;
-		}
-
 		& > span {
 			cursor: pointer;
 			white-space: nowrap;

diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue
@@ -193,9 +193,6 @@ export default {
 
 		width: 1px;
 		height: 1px;
-		&:focus + .action-checkbox__label {
-			opacity: $opacity_full;
-		}
 	}
 
 	&__label {
@@ -206,7 +203,6 @@ export default {
 		padding: 0 !important;
 		padding-right: $icon-margin !important;
 
-		opacity: $opacity_normal;
 		// checkbox-width is 12px, border is 2
 		// (44 - 14 - 2) / 2 = 14
 		&::before {
@@ -220,13 +216,6 @@ export default {
 			cursor: pointer;
 		}
 	}
-
-	&:not(.action-checkbox--disabled):hover,
-	&:not(.action-checkbox--disabled):focus {
-		.action-checkbox__label {
-			opacity: $opacity_full;
-		}
-	}
 }
 
 </style>
diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
@@ -494,7 +494,6 @@ $input-margin: 4px;
 	cursor: pointer;
 	white-space: nowrap;
 
-	opacity: $opacity_normal;
 	color: var(--color-main-text);
 	border: 0;
 	border-radius: 0; // otherwise Safari will cut the border-radius area
@@ -503,11 +502,6 @@ $input-margin: 4px;
 
 	font-weight: normal;
 
-	&:hover,
-	&:focus {
-		opacity: $opacity_full;
-	}
-
 	&__icon-wrapper {
 		display: flex;
 		align-self: center;

diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
@@ -188,9 +188,6 @@ export default {
 
 		width: 1px;
 		height: 1px;
-		&:focus + .action-radio__label {
-			opacity: $opacity_full;
-		}
 	}
 
 	&__label {
@@ -201,7 +198,6 @@ export default {
 		padding: 0 !important;
 		padding-right: $icon-margin !important;
 
-		opacity: $opacity_normal;
 		// radio-width is 12px, border is 2
 		// (44 - 14 - 2) / 2 = 14
 		&::before {
@@ -215,13 +211,6 @@ export default {
 			cursor: pointer;
 		}
 	}
-
-	&:not(.action-radio--disabled):hover,
-	&:not(.action-radio--disabled):focus {
-		.action-radio__label {
-			opacity: $opacity_full;
-		}
-	}
 }
 
 </style>
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -207,7 +207,6 @@ $input-margin: 4px;
 	cursor: pointer;
 	white-space: nowrap;
 
-	opacity: $opacity_normal;
 	color: var(--color-main-text);
 	border: 0;
 	border-radius: 0; // otherwise Safari will cut the border-radius area
@@ -217,11 +216,6 @@ $input-margin: 4px;
 	font-weight: normal;
 	line-height: $clickable-area;
 
-	&:hover,
-	&:focus {
-		opacity: $opacity_full;
-	}
-
 	& > span {
 		cursor: pointer;
 		white-space: nowrap;
@@ -283,8 +277,6 @@ $input-margin: 4px;
 		margin: 0;
 		padding: 7px 6px;
 
-		opacity: $opacity_full;
-		color: var(--color-text-maxcontrast);
 		border: 0;
 		border-radius: 50%;
 		/* Avoid background under border */
@@ -299,6 +291,8 @@ $input-margin: 4px;
 	/* Inputs inside popover supports text, submit & reset */
 	&__textarea {
 		flex: 1 1 auto;
+		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 */

diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
@@ -1239,7 +1239,6 @@ export default {
 	}
 
 	&.action-item--open .action-item__menutoggle {
-		opacity: $opacity_full;
 		background-color: var(--open-background-color);
 	}
 }