From da5662c454cbdf9e81c6ac83cc0dfe72692fd883 Mon Sep 17 00:00:00 2001
From: Julius Härtl <jus@bitgrid.net>
Date: Fri, 11 Aug 2017 15:11:47 +0200
Subject: Use separate element color in theming
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This way we can use a grey color when the primary color is to bright

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 core/css/inputs.scss          | 18 +++++++++---------
 core/css/jquery-ui-fixes.scss |  2 +-
 core/css/variables.scss       |  1 +
 3 files changed, 11 insertions(+), 10 deletions(-)

(limited to 'core')

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 10e3fcef015..5a7da4f50c9 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -50,7 +50,7 @@ textarea,
 		&:focus,
 		&.active {
 		/* active class used for multiselect */
-			border-color: $color-primary;
+			border-color: $color-primary-element;
 			outline: none;
 		}
 		&:active {
@@ -66,21 +66,21 @@ textarea,
 	}
 	/* Primary action button, use sparingly */
 	&.primary {
-		border: 1px solid #fff;
-		background-color: $color-primary;
+		background-color: $color-primary-element;
+		border: 1px solid $color-primary-text;
 		color: $color-primary-text;
 		cursor: pointer;
 		&:not(:disabled) {
 			&:hover,
 			&:focus {
-				background-color: rgba($color-primary, .85);
+				background-color: rgba($color-primary-element, .85);
 			}
 			&:active {
-				background-color: rgba($color-primary, .7);
+				background-color: rgba($color-primary-element, .7);
 			}
 		}
 		&:disabled {
-			background-color: rgba($color-primary, .7);
+			background-color: rgba($color-primary-element, .7);
 			color: nc-lighten($color-main-text, 73%);
 		}
 	}
@@ -225,15 +225,15 @@ input {
 			}
 			&:not(:disabled):not(:checked) + label:hover:before,
 			&:focus + label:before {
-				border-color: $color-primary;
+				border-color: $color-primary-element;
 			}
 			&: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 $color-main-background;
-				background-color: $color-primary;
-				border-color: $color-primary
+				background-color: $color-primary-element;
+				border-color: $color-primary-element;
 			}
 			&:disabled + label:before {
 				border: 1px solid nc-lighten($color-main-text, 53%);
diff --git a/core/css/jquery-ui-fixes.scss b/core/css/jquery-ui-fixes.scss
index cf27c1561f0..87167100813 100644
--- a/core/css/jquery-ui-fixes.scss
+++ b/core/css/jquery-ui-fixes.scss
@@ -190,6 +190,6 @@
 	.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: 1px solid transparent;
 		background: inherit;
-		color: $color-primary;
+		color: $color-primary-element;
 	}
 }
diff --git a/core/css/variables.scss b/core/css/variables.scss
index 5b7783a888a..3a135f91c86 100644
--- a/core/css/variables.scss
+++ b/core/css/variables.scss
@@ -5,6 +5,7 @@ $color-primary-text: #ffffff;
 $color-error: #e9322d;
 $color-warning: #ffcc44;
 $color-success: #46ba61;
+$color-primary-element: $color-primary;
 
 @function nc-darken($color, $value) {
   @return darken($color, $value);
-- 
cgit v1.2.3