Merge pull request #12558 from nextcloud/blurry-button

Apply border to primary button if on log in page (and not in a dark container) or if in header
nextcloud · Nov 22, 2018 · 2e68b73 · 2e68b73
2 parents bebdb19 + f80a023
commit 2e68b73
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
@@ -82,10 +82,9 @@ $invert: luma($color-primary) > 0.6;
 			@include icon-color('checkbox-mark', 'actions', $color-white, 1, true);
 		}
 	}
-	#body-user {
-		.primary {
-			border: 1px solid transparent;
-		}
+	/* Always give primary button a border for light primary colors */
+	.primary {
+		border-color: var(--color-border) !important;
 	}
 } @else {
 	#appmenu:not(.inverted) svg {

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
@@ -85,14 +85,22 @@ div[contenteditable=true],
 	/* Primary action button, use sparingly */
 	&.primary {
 		background-color: var(--color-primary-element);
-		border: 1px solid var(--color-primary-text);
+		border-color: var(--color-primary-element);
 		color: var(--color-primary-text);
 		cursor: pointer;
+
+		/* Apply border to primary button if on log in page (and not in a dark container) or if in header */
+		#body-login :not(.body-login-container) &,
+		#header & {
+			border-color: var(--color-primary-text);
+		}
+
 		&:not(:disabled) {
 			&:hover,
 			&:focus,
-			&:active  {
-				background-color: var(--color-primary-element-light)
+			&:active {
+				background-color: var(--color-primary-element-light);
+				border-color: var(--color-primary-element-light);
 			}
 			&:active {
 				color: var(--color-primary-text-dark);