Merge pull request #3530 from nextcloud/scss-variables

Implement scss variables

1 files changed, 61 insertions, 65 deletions

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index faddcc50214..37405172d3a 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -39,9 +39,9 @@ textarea,
 	margin: 3px 3px 3px 0;
 	padding: 7px 6px;
 	font-size: 13px;
-	background-color: #fff;
-	color: #333;
-	border: 1px solid #ddd;
+	background-color: $color-main-background;
+	color: nc-lighten($color-main-text, 33%);
+	border: 1px solid nc-lighten($color-main-text, 86%);
 	outline: none;
 	border-radius: 3px;
 	&:not(:disabled):not(.primary) {
@@ -50,38 +50,38 @@ textarea,
 		&:focus,
 		&.active {
 		/* active class used for multiselect */
-			border-color: #0082c9;
+			border-color: $color-primary;
 			outline: none;
 		}
 		&:active {
 			outline: none;
-			background-color: #fff;
+			background-color: $color-main-background;
 		}
 	}
 	&:disabled {
-		background-color: #eee;
-		color: #999;
+		background-color: nc-darken($color-main-background, 8%);
+		color: rgba($color-main-text, 0.4);
 		cursor: default;
 		opacity: 0.5;
 	}
 	/* Primary action button, use sparingly */
 	&.primary {
-		border: 1px solid #0082c9;
-		background-color: #00a2e9;
-		color: #fff;
+		border: 1px solid $color-primary;
+		background-color: rgba($color-primary, .7);
+		color: $color-primary-text;
 		cursor: pointer;
 		&:not(:disabled) {
 			&:hover,
 			&:focus {
-				background-color: #0092d9;
+				background-color: rgba($color-primary, .85);
 			}
 			&:active {
-				background-color: #00a2e9;
+				background-color: rgba($color-primary, .7);
 			}
 		}
 		&:disabled {
-			background-color: #00a2e9;
-			color: #bbb;
+			background-color: rgba($color-primary, .7);
+			color: nc-lighten($color-main-text, 73%);
 		}
 	}
 }
@@ -128,7 +128,7 @@ input[type='reset'] {
 	min-height: 34px;
 	cursor: pointer;
 	box-sizing: border-box;
-	background-color: #fafafa;
+	background-color: nc-darken($color-main-background, 3%);
 }
 
 /* Buttons */
@@ -155,7 +155,7 @@ button, .button {
 }
 
 textarea {
-	color: #555;
+	color: nc-lighten($color-main-text, 33%);
 	cursor: text;
 	font-family: inherit;
 	height: auto;
@@ -163,8 +163,8 @@ textarea {
 		&:active,
 		&:hover,
 		&:focus {
-			border-color: #ddd !important;
-			background-color: #fff !important;
+			border-color: nc-lighten($color-main-text, 86%) !important;
+			background-color: $color-main-background !important;
 		}
 	}
 }
@@ -186,7 +186,7 @@ button img,
 	cursor: pointer;
 }
 #quota {
-	color: #555;
+	color: nc-lighten($color-main-text, 33%);
 }
 select,
 .button.multiselect {
@@ -221,27 +221,26 @@ input {
 				border-radius: 50%;
 				margin: 3px;
 				margin-top: 1px;
-				border: 1px solid #888;
+				border: 1px solid nc-lighten($color-main-text, 53%);
 			}
 			&:not(:disabled):not(:checked) + label:hover:before,
 			&:focus + label:before {
-				border-color: #0082c9;
+				border-color: $color-primary;
 			}
 			&:checked + label:before,
 			&.checkbox:indeterminate + label:before {
 			/* ^ :indeterminate have a strange behavior on radio,
 			so we respecified the checkbox class again to be safe */
-				box-shadow: inset 0px 0px 0px 2px #fff;
-				background-color: #0082c9;
-				border-color: #0082c9
+				box-shadow: inset 0px 0px 0px 2px $color-main-background;
+				background-color: $color-primary;
+				border-color: $color-primary
 			}
 			&:disabled + label:before {
-				background-color: #ccc !important; /* override other status */
+				border: 1px solid nc-lighten($color-main-text, 53%);
+				background-color: nc-lighten($color-main-text, 73%) !important; /* override other status */
 			}
 			&:checked:disabled + label:before {
-				box-shadow: inset 0px 0px 0px 2px #fff;
-				border-color: #aaa;
-				background-color: #bbb;
+				background-color: nc-lighten($color-main-text, 73%);
 			}
 		}
 		&.checkbox {
@@ -258,49 +257,46 @@ input {
 			&:indeterminate + label:before {
 				background-image: url('../img/actions/checkbox-mixed.svg');
 			}
-			&:indeterminate:disabled + label:before {
-				border-color: #888;
-			}
 		}
 		&.radio--white,
 		&.checkbox--white {
 			+ label:before {
-				border-color: #ddd;
+				border-color: nc-lighten($color-main-text, 86%);
 			}
 			&:not(:disabled):not(:checked) + label:hover:before,
 			&:focus + label:before {
-				border-color: #fff;
+				border-color: $color-main-background;
 			}
 			&:checked + label:before {
-				box-shadow: inset 0px 0px 0px 2px #000;
-				background-color: #eee;
-				border-color: #eee
+				box-shadow: inset 0px 0px 0px 2px $color-main-text;
+				background-color: nc-darken($color-main-background, 8%);
+				border-color: nc-darken($color-main-background, 8%)
 			}
 			&:disabled + label:before {
-				background-color: #666 !important; /* override other status */
-				border-color: #999 !important; /* override other status */
+				background-color: nc-lighten($color-main-text, 33%) !important; /* override other status */
+				border-color: rgba($color-main-text, 0.4) !important; /* override other status */
 			}
 			&:checked:disabled + label:before {
-				box-shadow: inset 0px 0px 0px 2px #000;
-				border-color: #666;
-				background-color: #222;
+				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%);
 			}
 		}
 		&.checkbox--white {
 			&:checked + label:before,
 			&:indeterminate + label:before {
 				background-color: transparent !important; /* Override default checked */
-				border-color: #fff !important; /* Override default checked */
+				border-color: $color-main-background !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: #aaa;
+				border-color: nc-lighten($color-main-text, 73%);
 			}
 			&:indeterminate:disabled + label:after {
-				background-color: #aaa;
+				background-color: nc-lighten($color-main-text, 73%);
 			}
 		}
 	}
@@ -310,7 +306,7 @@ input {
 .select2-drop {
 	margin-top: -2px;
 	&.select2-drop-active {
-		border-color: #ddd;
+		border-color: nc-lighten($color-main-text, 86%);
 	}
 	.avatar {
 		display: inline-block;
@@ -343,17 +339,17 @@ input {
 			position: relative;
 			display: list-item;
 			padding: 12px;
-			background-color: #fff;
+			background-color: $color-main-background;
 			cursor: pointer;
-			color: #222;
+			color: nc-lighten($color-main-text, 33%);
 		}
 		.select2-result {
 			&.select2-selected {
-				background-color: #f8f8f8;
+				background-color: nc-darken($color-main-background, 3%);
 			}
 			&.select2-highlighted {
-				background-color: #f8f8f8;
-				color: #000;
+				background-color: nc-darken($color-main-background, 3%);
+				color: $color-main-text;
 			}
 		}
 	}
@@ -371,11 +367,11 @@ input {
 		box-shadow: none;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		background: #fff;
-		color: #555;
+		background: $color-main-background;
+		color: nc-lighten($color-main-text, 33%);
 		box-sizing: content-box;
 		border-radius: 3px;
-		border: 1px solid #ddd;
+		border: 1px solid nc-lighten($color-main-text, 86%);
 		margin: 0;
 		padding: 2px 0;
 		min-height: auto;
@@ -387,9 +383,9 @@ input {
 			&:active,
 			& {
 				background-image: none;
-				background-color: #fff;
-				color: #333;
-				border: 1px solid #ddd;
+				background-color: $color-main-background;
+				color: nc-lighten($color-main-text, 33%);
+				border: 1px solid nc-lighten($color-main-text, 86%);
 			}
 			.select2-search-choice-close {
 				display: none;
@@ -413,11 +409,11 @@ input {
 		box-shadow: none;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		background: #fff;
-		color: #555;
+		background: $color-main-background;
+		color: nc-lighten($color-main-text, 33%);
 		box-sizing: content-box;
 		border-radius: 3px;
-		border: 1px solid #ddd;
+		border: 1px solid nc-lighten($color-main-text, 86%);
 		margin: 0;
 		padding: 2px 0;
 		padding-left: 6px;
@@ -426,15 +422,15 @@ input {
 			line-height: 20px;
 			padding-left: 5px;
 			background-image: none;
-			background-color: #f8f8f8;
-			border-color: #f8f8f8;
+			background-color: nc-darken($color-main-background, 3%);
+			border-color: nc-darken($color-main-background, 3%);
 			.select2-search-choice-close {
 				display: none;
 			}
 			&.select2-search-choice-focus,
 			&:hover {
-				background-color: #f0f0f0;
-				border-color: #f0f0f0;
+				background-color: nc-darken($color-main-background, 8%);
+				border-color: nc-darken($color-main-background, 8%);
 			}
 		}
 		.select2-arrow {
@@ -470,7 +466,7 @@ input {
 }
 
 .ui-widget-content {
-	background: #fff;
+	background: $color-main-background;
 	border-top: none;
 }
 
@@ -482,7 +478,7 @@ input {
 
 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
 	border: none;
-	background: #f8f8f8;
+	background: nc-darken($color-main-background, 3%);
 }
 
 /* Animation */