Merge pull request #6692 from nextcloud/inputs-border-to-main-bg

Inputs border to main bg and fix white inputs

3 files changed, 36 insertions, 34 deletions

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 42de33b0be8..eb7d20cf8af 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -41,7 +41,7 @@ textarea,
 	font-size: 13px;
 	background-color: $color-main-background;
 	color: nc-lighten($color-main-text, 33%);
-	border: 1px solid nc-lighten($color-main-text, 86%);
+	border: 1px solid nc-darken($color-main-background, 14%);
 	outline: none;
 	border-radius: 3px;
 	cursor: text;
@@ -163,7 +163,7 @@ textarea {
 		&:active,
 		&:hover,
 		&:focus {
-			border-color: nc-lighten($color-main-text, 86%) !important;
+			border-color: nc-darken($color-main-background, 14%) !important;
 			background-color: $color-main-background !important;
 		}
 	}
@@ -192,6 +192,8 @@ select,
 
 /* Radio & Checkboxes */
 input {
+	$color-checkbox-radio-disabled: nc-darken($color-main-background, 27%);
+	$color-checkbox-radio-border: nc-darken($color-main-background, 47%);
 	&[type='checkbox'],
 	&[type='radio'] {
 		&.radio,
@@ -218,7 +220,7 @@ input {
 				border-radius: 50%;
 				margin: 3px;
 				margin-top: 1px;
-				border: 1px solid nc-lighten($color-main-text, 53%);
+				border: 1px solid $color-checkbox-radio-border;
 			}
 			&:not(:disabled):not(:checked) + label:hover:before,
 			&:focus + label:before {
@@ -233,11 +235,11 @@ input {
 				border-color: $color-primary-element;
 			}
 			&:disabled + label:before {
-				border: 1px solid nc-lighten($color-main-text, 53%);
-				background-color: nc-lighten($color-main-text, 73%) !important; /* override other status */
+				border: 1px solid $color-checkbox-radio-border;
+				background-color: $color-checkbox-radio-disabled !important; /* override other status */
 			}
 			&:checked:disabled + label:before {
-				background-color: nc-lighten($color-main-text, 73%);
+				background-color: $color-checkbox-radio-disabled;
 			}
 		}
 		&.checkbox {
@@ -255,45 +257,45 @@ input {
 				background-image: url('../img/actions/checkbox-mixed.svg');
 			}
 		}
+
+		/* We do not use the nc-darken function as this si not supposed to be changed */
+		$color-checkbox-radio-white: #fff;
 		&.radio--white,
 		&.checkbox--white {
-			+ label:before {
-				border-color: nc-lighten($color-main-text, 86%);
-			}
-			&:not(:disabled):not(:checked) + label:hover:before,
+			+ label:before,
 			&:focus + label:before {
-				border-color: $color-main-background;
+				border-color: darken($color-checkbox-radio-white, 27%);
+			}
+			&:not(:disabled):not(:checked) + label:hover:before {
+				border-color: $color-checkbox-radio-white;
 			}
 			&:checked + label:before {
-				box-shadow: inset 0px 0px 0px 2px $color-main-text;
-				background-color: $color-border;
-				border-color: $color-border
+				box-shadow: inset 0px 0px 0px 2px $color-main-background;
+				background-color: darken($color-checkbox-radio-white, 14%);
+				border-color: darken($color-checkbox-radio-white, 14%);
 			}
 			&:disabled + label:before {
-				background-color: nc-lighten($color-main-text, 33%) !important; /* override other status */
-				border-color: rgba($color-main-text, 0.4) !important; /* override other status */
+				background-color: darken($color-checkbox-radio-white, 27%) !important; /* override other status */
+				border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
 			}
 			&:checked:disabled + label:before {
-				box-shadow: inset 0px 0px 0px 2px $color-main-text;
-				border-color: nc-lighten($color-main-text, 33%);
-				background-color: nc-lighten($color-main-text, 33%);
+				box-shadow: inset 0px 0px 0px 2px $color-main-background;
+				border-color: rgba($color-checkbox-radio-white, 0.4) !important; /* override other status */
+				background-color: darken($color-checkbox-radio-white, 27%);
 			}
 		}
 		&.checkbox--white {
 			&:checked + label:before,
 			&:indeterminate + label:before {
 				background-color: transparent !important; /* Override default checked */
-				border-color: $color-main-background !important; /* Override default checked */
+				border-color: $color-checkbox-radio-white !important; /* Override default checked */
 				background-image: url('../img/actions/checkbox-mark-white.svg');
 			}
 			&:indeterminate + label:before {
 				background-image: url('../img/actions/checkbox-mixed-white.svg');
 			}
-			&:checked:disabled + label:after {
-				border-color: nc-lighten($color-main-text, 73%);
-			}
-			&:indeterminate:disabled + label:after {
-				background-color: nc-lighten($color-main-text, 73%);
+			&:disabled + label:before {
+				opacity: 0.7; /* No other choice for white background image */
 			}
 		}
 	}
@@ -304,7 +306,7 @@ input {
 	margin-top: -2px;
 	background-color: $color-main-background;
 	&.select2-drop-active {
-		border-color: nc-lighten($color-main-text, 86%);
+		border-color: nc-darken($color-main-background, 14%);
 	}
 	.avatar {
 		display: inline-block;
@@ -369,7 +371,7 @@ input {
 		color: nc-lighten($color-main-text, 33%);
 		box-sizing: content-box;
 		border-radius: 3px;
-		border: 1px solid nc-lighten($color-main-text, 86%);
+		border: 1px solid nc-darken($color-main-background, 14%);
 		margin: 0;
 		padding: 2px 0;
 		min-height: auto;
@@ -383,7 +385,7 @@ input {
 				background-image: none;
 				background-color: $color-main-background;
 				color: nc-lighten($color-main-text, 33%);
-				border: 1px solid nc-lighten($color-main-text, 86%);
+				border: 1px solid nc-darken($color-main-background, 14%);
 			}
 			.select2-search-choice-close {
 				display: none;
@@ -414,7 +416,7 @@ input {
 		color: nc-lighten($color-main-text, 33%);
 		box-sizing: content-box;
 		border-radius: 3px;
-		border: 1px solid nc-lighten($color-main-text, 86%);
+		border: 1px solid nc-darken($color-main-background, 14%);
 		margin: 0;
 		padding: 2px 0;
 		padding-left: 6px;
diff --git a/core/css/share.scss b/core/css/share.scss
index 35d90fb4b88..2a9f357bc38 100644
--- a/core/css/share.scss
+++ b/core/css/share.scss
@@ -149,7 +149,7 @@ a {
 }
 
 #link {
-	border-top: 1px solid nc-lighten($color-main-text, 86%);
+	border-top: 1px solid nc-darken($color-main-background, 14%);
 	padding-top: 8px;
 	#showPassword img {
 		padding-left: 5px;
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 33618d34117..c23c5cd86a2 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -361,7 +361,7 @@ body {
 		}
 		a {
 			color: $color-primary-text;
-			border-bottom: 1px solid nc-lighten($color-main-text, 73%);
+			border-bottom: 1px solid nc-darken($color-main-background, 27%);
 		}
 	}
 	.infogroup {
@@ -627,7 +627,7 @@ label.infield {
 			background: nc-darken($color-main-background, 3%);
 			color: nc-lighten($color-main-text, 53%);
 			cursor: pointer;
-			border: 1px solid nc-lighten($color-main-text, 86%);
+			border: 1px solid nc-darken($color-main-background, 14%);
 			span {
 				cursor: pointer;
 				padding: 10px 20px;
@@ -1064,7 +1064,7 @@ code {
 }
 
 .ui-datepicker-prev, .ui-datepicker-next {
-	border: nc-lighten($color-main-text, 86%);
+	border: nc-darken($color-main-background, 14%);
 	background: $color-main-background;
 }
 
@@ -1287,7 +1287,7 @@ span.ui-icon {
 	}
 	.scrollarea {
 		overflow: auto;
-		border: 1px solid nc-lighten($color-main-text, 86%);
+		border: 1px solid nc-darken($color-main-background, 14%);
 		width: 100%;
 		height: 240px;
 	}