From 2681d5346e2d77fa7e75d1054cb3bd0b219c1e5c Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Wed, 21 Sep 2022 10:49:37 +0200
Subject: [PATCH] Add custom :focus and :focus-visible CSS rules

---
 resources/sass/app.scss | 181 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 181 insertions(+)

diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index f63352cf..e4b3dcbd 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -382,6 +382,187 @@ figure.no-icon {
   border-left: none;
 }
 
+.button.is-like-text {
+  line-height: inherit !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  height: auto;
+  text-decoration: none;
+}
+.button.copy-text:hover,
+.button.copy-text:active,
+.button.copy-text:focus,
+.button.copy-text:focus-visible,
+.button.copy-text:focus-within,
+.button.is-like-text:hover,
+.button.is-like-text:active, 
+.button.is-like-text:focus, 
+.button.is-like-text:focus-visible, 
+.button.is-like-text:focus-within {
+  background: inherit;
+  color: inherit;
+  // box-shadow: inherit;
+}
+
+
+
+
+.button:focus, .button:focus-visible, .button.is-focused {
+  border-color: transparent;
+  outline-offset: 3px !important;
+}
+a:focus, a:focus-visible {
+  outline-offset: 2px !important;
+}
+.button:focus:not(:active), .button.is-focused:not(:active),
+.button.is-white:focus:not(:active), .button.is-white.is-focused:not(:active),
+.button.is-light:focus:not(:active), .button.is-light.is-focused:not(:active),
+.button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active),
+.button.is-black:focus:not(:active), .button.is-black.is-focused:not(:active),
+.button.is-text:focus:not(:active), .button.is-text.is-focused:not(:active),
+.button.is-ghost:focus:not(:active), .button.is-ghost.is-focused:not(:active),
+.button.is-primary:focus:not(:active), .button.is-primary.is-focused:not(:active),
+.button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active),
+.button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active),
+.button.is-success:focus:not(:active), .button.is-success.is-focused:not(:active),
+.button.is-warning:focus:not(:active), .button.is-warning.is-focused:not(:active),
+.button.is-danger:focus:not(:active), .button.is-danger.is-focused:not(:active)
+{
+	box-shadow: none;
+}
+
+.button.is-white:focus, .button.is-white:focus-visible, .button.is-white.is-focused
+{
+  outline: 2px solid $white !important;
+}
+.button.is-light:focus, .button.is-light:focus-visible, .button.is-light.is-focused
+{
+  outline: 2px solid $grey-lightest !important;
+}
+.button.is-dark:focus, .button.is-dark:focus-visible, .button.is-dark.is-focused
+{
+  outline: 2px solid $dark !important;
+}
+.button.is-black:focus, .button.is-black:focus-visible, .button.is-black.is-focused
+{
+  outline: 2px solid $black !important;
+}
+.button.is-text:focus, .button.is-text:focus-visible, .button.is-text.is-focused
+{
+  outline: 2px solid $text !important;
+}
+.button.is-ghost:focus, .button.is-ghost:focus-visible, .button.is-ghost.is-focused
+{
+  outline: 2px solid $text !important;
+}
+.button.is-primary:focus, .button.is-primary:focus-visible, .button.is-primary.is-focused
+{
+  outline: 2px solid $primary !important;
+}
+.button.is-link:focus, .button.is-link:focus-visible, .button.is-link.is-focused
+{
+  outline: 2px solid $link !important;
+}
+.button.is-info:focus, .button.is-info:focus-visible, .button.is-info.is-focused
+{
+  outline: 2px solid $info !important;
+}
+.button.is-success:focus, .button.is-success:focus-visible, .button.is-success.is-focused
+{
+  outline: 2px solid $success !important;
+}
+.button.is-warning:focus, .button.is-warning:focus-visible, .button.is-warning.is-focused
+{
+  outline: 2px solid $warning !important;
+}
+.button.is-danger:focus, .button.is-danger:focus-visible, .button.is-danger.is-focused
+{
+  outline: 2px solid $danger !important;
+}
+
+a:focus, a:focus-visible
+{
+  border-radius: 3px;
+  outline: 1px dashed $link;
+}
+
+a.has-text-black-bis:focus, a.has-text-black-bis:focus-visible {
+  outline-color: $black-bis;
+}
+a.has-text-black-ter:focus, a.has-text-black-ter:focus-visible {
+  outline-color: $black-ter;
+}
+a.has-text-grey-darker:focus, a.has-text-grey-darker:focus-visible {
+  outline-color: $grey-darker;
+}
+a.has-text-grey-dark:focus, a.has-text-grey-dark:focus-visible {
+  outline-color: $grey-dark;
+}
+a.has-text-grey:focus, a.has-text-grey:focus-visible {
+  outline-color: $grey;
+}
+a.has-text-grey-light:focus, a.has-text-grey-light:focus-visible {
+  outline-color: $grey-light;
+}
+a.has-text-grey-lighter:focus, a.has-text-grey-lighter:focus-visible {
+  outline-color: $grey-lighter;
+}
+a.has-text-white-ter:focus, a.has-text-white-ter:focus-visible {
+  outline-color: $white-ter;
+}
+a.has-text-white-bis:focus, a.has-text-white-bis:focus-visible {
+  outline-color: $white-bis;
+}
+
+.control.has-icons-right > span.icon:focus-visible,
+.control.has-icons-left > span.icon:focus-visible,
+.control.has-icons-right > span.icon:focus,
+.control.has-icons-left > span.icon:focus
+{
+  outline: none;
+  border: 1px solid $input-focus-border-color;
+  box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color;
+}
+
+// .button.is-dark:focus:not(:active), .button.is-dark.is-focused:not(:active),
+// .button.is-link:focus:not(:active), .button.is-link.is-focused:not(:active) {
+// 	box-shadow: 0 0 0 0.125em hsla(0, 0%, 96%, 0.25);
+// }
+// .button.copy-text:focus:not(:active), .button.copy-text.is-focused:not(:active) {
+// 	box-shadow: none;
+//   color: hsl(0, 0%, 86%);
+// }
+
+// a:focus,
+// .button:focus,
+// .control.has-icons-right > span.icon:focus {
+//   outline: none !important;
+// }
+// .button:focus {
+//   box-shadow: none;
+// }
+// a:focus-visible,
+// .control.has-icons-right > span.icon:focus {
+//   outline: 2px solid hsl(217, 71%, 53%) !important;
+//   outline-offset: 3px !important;
+// }
+
+// .button:focus-visible {
+//   box-shadow: none;
+//   outline: 2px solid hsl(217, 71%, 53%) !important;
+//   outline-offset: 3px !important;
+// }
+
+// @supports not selector(:focus-visible) {
+//   a:focus,
+//   button:focus,
+//   .control.has-icons-right > span.icon:focus {
+//     outline: 2px solid hsl(217, 71%, 53%);
+//     outline-offset: 3px;
+//   }
+// }
+
+
 .label {
   color: hsl(0, 0%, 48%);
 }