Use 2px border and --border-radius

Signed-off-by: Carl Schwan <carl@carlschwan.eu>
nextcloud · Mar 17, 2022 · 6124d8f · 6124d8f
1 parent 0a83a3c
commit 6124d8f
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 13 deletions.
diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss
@@ -231,6 +231,9 @@ table th .columntitle {
 	box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	vertical-align: middle;
+	&:focus-visible {
+		border-radius: 2px;
+	}
 }
 table.multiselect th .columntitle {
 	display: inline-block;
@@ -506,6 +509,9 @@ table td.selection {
 	&:focus + label {
 		background-color: var(--color-background-hover);
 		border-radius: var(--border-radius-pill);
+		outline: none !important;
+		border: 2px solid var(--color-primary) !important;
+		padding: 14px;
 	}
 }
 
@@ -844,6 +850,10 @@ table.dragshadow td.size {
 	position: relative;
 }
 
+.breadcrumb .icon-home {
+	border-radius: var(--border-radius);
+}
+
 .breadcrumb .canDrop > a,
 #filestable tbody tr.canDrop {
 	background-color: rgba( $color-primary, .3 );
@@ -1198,7 +1208,7 @@ table.dragshadow td.size {
 
 	&:focus-visible,
 	#showgridview:focus-visible + & {
-		outline: 1px solid var(--color-primary) !important;
+		outline: 2p2 solid var(--color-primary) !important;
 	}
 }
 

diff --git a/core/css/apps.scss b/core/css/apps.scss
@@ -160,11 +160,12 @@ kbd {
 				}
 			}
 			a:focus-visible {
-				border: 1px solid var(--color-primary);
+				border: 2px solid var(--color-primary);
+				border-radius: var(--border-radius);
 				outline: none;
-				padding: 0 9px 0 43px !important;
-				background-position: 13px center;
-				line-height: 42px;
+				padding: 0 8px 0 42px !important;
+				background-position: 12px center;
+				line-height: 40px;
 			}
 			&.active,
 			a:active,
@@ -379,7 +380,8 @@ kbd {
 			&:focus-visible {
 				opacity: 1;
 				background: none;
-				border: 1px solid var(--color-primary);
+				border-radius: var(--border-radius);
+				border: 2px solid var(--color-primary);
 			}
 		}
 		&:before {
@@ -762,7 +764,8 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 		background-color: var(--color-background-hover);
 	}
 	&:focus-visible {
-		border: 1px solid var(--color-primary) !important;
+		border: 2px solid var(--color-primary) !important;
+		border-radius: var(--border-radius);
 		background-position: 12px center;
 		padding-left: 42px;
 	}

diff --git a/core/css/header.scss b/core/css/header.scss
@@ -21,7 +21,9 @@
 	-moz-user-select: none;
 	-ms-user-select: none;
 	a:focus-visible, button:focus-visible, div[role="button"]:focus-visible {
-		outline: 1px solid var(--color-primary-text);
+		border: 2px solid var(--color-primary-text);
+		border-radius: var(--border-radius);
+		margin: 0;
 	}
 }
 
@@ -234,7 +236,7 @@
 				justify-content: center;
 				align-items: center;
 				width: $header-height;
-				height: 46px;
+				height: 44px;
 				cursor: pointer;
 				opacity: 0.6;
 				padding: 0;
@@ -243,6 +245,12 @@
 				&:focus {
 					opacity: 1;
 				}
+
+				&:focus-visible {
+					outline: none;
+					margin: 0;
+					margin-top: 1px;
+				}
 			}
 		}
 	}
@@ -446,14 +454,15 @@ nav[role='navigation'] {
 			position: relative;
 			display: flex;
 			margin: 0;
-			height: $header-height - 4px;
+			height: $header-height - 6px;
 			width: $header-height;
 			align-items: center;
 			justify-content: center;
 			opacity: .6;
 			// Make sure most app names don’t ellipsize
 			letter-spacing: -0.5px;
 			font-size: 12px;
+			margin: 2px;
 		}
 
 		/* focused app visual feedback */
@@ -588,7 +597,7 @@ nav[role='navigation'] {
 		border-width: 10px;
 		transform: translateX(-50%);
 		left: 50%;
-		bottom: -2px;
+		bottom: -5px;
 		display: none;
 	}
 

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
@@ -77,6 +77,9 @@ div[contenteditable=true],
 		cursor: default;
 		opacity: 0.5;
 	}
+	&:focus-visible {
+		border-width: 2px;
+	}
 	&:required {
 		box-shadow: none;
 	}

diff --git a/core/css/styles.scss b/core/css/styles.scss
@@ -32,7 +32,7 @@ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pr
 }
 
 *:focus-visible {
-	outline: 1px solid var(--color-primary);
+	outline: 2px solid var(--color-primary);
 }
 
 /** Let vue apps handle the focus themselves */

diff --git a/core/src/components/HeaderMenu.vue b/core/src/components/HeaderMenu.vue
@@ -174,7 +174,7 @@ export default {
 		align-items: center;
 		justify-content: center;
 		width: 50px;
-		height: 46px;
+		height: 44px;
 		margin: 2px 0;
 		padding: 0;
 		cursor: pointer;
@@ -188,6 +188,11 @@ export default {
 		opacity: 1;
 	}
 
+	&__trigger:focus-active {
+		outline: none;
+		margin-top: 1px !important;
+	}
+
 	&__wrapper {
 		position: fixed;
 		z-index: 2000;