extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2024-11-22 16:23:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add custom :focus and :focus-visible CSS rules

Browse Source
This commit is contained in:
Bubka 2022-09-21 10:49:37 +02:00
parent fc077bf267
commit 2681d5346e
1 changed files with 181 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
resources/sass/app.scss vendored
View File

@ -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%);
}