From dfc6b8dd2a725c6b2e0afe1e115f419f6b180305 Mon Sep 17 00:00:00 2001 From: tikagan <30419893+tikagan@users.noreply.github.com> Date: Tue, 9 Jan 2024 14:17:44 -0500 Subject: [PATCH 01/10] feat: nav keyboard navigation styling --- packages/fe/assets/scss/variables.scss | 15 ++++++++++++--- packages/fe/components/buttons/button-b.vue | 3 ++- packages/fe/components/buttons/button-x.vue | 4 ++-- packages/fe/components/dropdown-panel.vue | 3 ++- packages/fe/components/logo.vue | 2 +- .../fe/components/navigation/button-login.vue | 6 +++++- packages/fe/components/navigation/nav-desktop.vue | 7 +++++++ .../components/navigation/notification-panel.vue | 14 ++++++++++++-- .../fe/components/navigation/profile-panel.vue | 13 ++++++++++--- 9 files changed, 53 insertions(+), 14 deletions(-) diff --git a/packages/fe/assets/scss/variables.scss b/packages/fe/assets/scss/variables.scss index 0321552c..bd2a927e 100644 --- a/packages/fe/assets/scss/variables.scss +++ b/packages/fe/assets/scss/variables.scss @@ -68,16 +68,25 @@ $breakpoint_UltraLarge: 140.625rem; // 2250px box-shadow: 0.125rem 0px 0.3125rem 0.25rem rgb(black, 0.4); } +@mixin focusBoxOutline { + outline: 3px solid rgba($greenYellow, 0.5); +} + +@mixin focusBoxOutlineWithOffset { + outline: 3px solid rgba($greenYellow, 0.5); + outline-offset: 4px; +} + @mixin focusBoxShadow { - box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5); + box-shadow: 0 0 0 5px rgba($greenYellow, 0.5); } @mixin focusBoxShadowSmall { - box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); + box-shadow: 0 0 0 3px rgba($greenYellow, 0.5); } @mixin focusBoxShadowLink { - box-shadow: 0 0 0 5px rgba(0, 123, 255, 0.5); + box-shadow: 0 0 0 5px rgba($greenYellow, 0.5); border-radius: 0.125rem; } diff --git a/packages/fe/components/buttons/button-b.vue b/packages/fe/components/buttons/button-b.vue index d775712b..aaa28616 100644 --- a/packages/fe/components/buttons/button-b.vue +++ b/packages/fe/components/buttons/button-b.vue @@ -130,7 +130,8 @@ export default { color: $greenYellow; border-color: $greenYellow; &:not([disabled]) { - &:hover { + &:hover, + &:focus-visible { background-color: $greenYellow; } } diff --git a/packages/fe/components/buttons/button-x.vue b/packages/fe/components/buttons/button-x.vue index 54202b79..f1c01914 100644 --- a/packages/fe/components/buttons/button-x.vue +++ b/packages/fe/components/buttons/button-x.vue @@ -81,7 +81,7 @@ export default { } } &:focus-visible { - @include focusBoxShadow; + @include focusBoxOutline; } } &[disabled] { @@ -92,7 +92,7 @@ export default { } a.button, -button.button, { +button.button { cursor: pointer; &[disabled] { cursor: no-drop; diff --git a/packages/fe/components/dropdown-panel.vue b/packages/fe/components/dropdown-panel.vue index 33af5a0b..96f4617a 100644 --- a/packages/fe/components/dropdown-panel.vue +++ b/packages/fe/components/dropdown-panel.vue @@ -87,7 +87,8 @@ $squigglyWidth: 40; // ///////////////////////////////////////////////////////////////////// General .dropdown-panel { &.toggle-on-hover { - &:hover { + &:hover, + &:focus-within { .panel-container { transition: 150ms ease-in; transform: translate(-50%, 0); diff --git a/packages/fe/components/logo.vue b/packages/fe/components/logo.vue index ef84d5ac..698d45c0 100644 --- a/packages/fe/components/logo.vue +++ b/packages/fe/components/logo.vue @@ -1,6 +1,6 @@ @@ -178,7 +178,8 @@ $cardRadiusTiny: 0.9375rem; .button { position: absolute; z-index: 20; - &:hover { + &:hover, + &:focus-visible { .icon-text { transition: 150ms ease-in; transform: scale(1.05); @@ -188,6 +189,10 @@ $cardRadiusTiny: 0.9375rem; transform: rotate(45deg); } } + &:focus-visible { + @include focusOutlineWithOffset; + border-radius: toRem(5); + } :deep(.button-content) { display: flex; flex-direction: row; diff --git a/packages/fe/components/form/fields/range.vue b/packages/fe/components/form/fields/range.vue index 006b95f9..296ef1a7 100644 --- a/packages/fe/components/form/fields/range.vue +++ b/packages/fe/components/form/fields/range.vue @@ -166,18 +166,32 @@ $borderWidth: 2px; background-color: $titanWhite; transition: all 150ms ease; } - &:hover { + &:hover, + &:focus-within { .thumb { - &:before, &:after { height: 0.75rem; } } } + #total_datacap_size_range { + &:focus-visible { + + .thumb-container { + .thumb { + &:before { + height: calc(100% + 1rem); + @include focusBoxShadow; + } + &::after { + height: 1rem; + } + } + } + } + } &:active { .thumb { background-color: $mandysPink; - &::before, &::after { background-color: $mandysPink; height: 1rem; @@ -198,25 +212,27 @@ $borderWidth: 2px; width: $thumbWidth; height: $trackHeight; background-color: $titanWhite; + z-index: 5; transition: all 150ms linear; - &:before, + &:after { content: ''; position: absolute; bottom: 100%; height: 0.5rem; - width: 50%; + left: 0; + width: 100%; pointer-events: inherit; background-color: inherit; transition: all 150ms linear; } &:before { content: ''; - right: 50%; - } - &:after { - content: ''; - left: 50%; + position: absolute; + bottom: 0; + left: 0; + height: calc(100% + 0.5rem); + width: 100%; } } @@ -258,7 +274,8 @@ $borderWidth: 2px; top: 0; margin-top: 0.375rem; transition: 150ms ease-out; - &:hover { + &:hover, + &:focus-visible { transition: 150ms ease-in; transform: scale(1.1); &:before { @@ -266,6 +283,10 @@ $borderWidth: 2px; opacity: 1; } } + &:focus-visible { + @include focusOutlineWithOffset; + border-radius: toRem(3); + } &:before { content: ''; position: absolute; @@ -289,14 +310,12 @@ $borderWidth: 2px; &:hover { transform: translateX(calc(-100% + toRem(9))) scale(1.1); // remove width of '+' icon } - &:before { - width: calc(100% + toRem(3 * 2) - toRem(9)); // remove width of '+' icon - } .button-content { &:after { content: '+'; - position: relative; + position: absolute; top: toRem(-1); + right: toRem(-9); font-size: 90%; font-weight: 500; transform: scale(0.5); diff --git a/packages/fe/modules/form/fields/range.vue b/packages/fe/modules/form/fields/range.vue index 7b55ee66..28125a2e 100644 --- a/packages/fe/modules/form/fields/range.vue +++ b/packages/fe/modules/form/fields/range.vue @@ -2,19 +2,6 @@
-
- -
- -
- -
- + +
+ +
+ +
+ +
+
Date: Tue, 9 Jan 2024 17:27:24 -0500 Subject: [PATCH 06/10] feat: datacap spinner added to tab order, keyboard navigation styling --- packages/fe/assets/scss/variables.scss | 4 ++-- packages/fe/components/hero-c.vue | 4 +++- packages/fe/components/spinners/datacap-text.vue | 13 +++++++++---- 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/fe/assets/scss/variables.scss b/packages/fe/assets/scss/variables.scss index 306531b1..dbfc41e9 100644 --- a/packages/fe/assets/scss/variables.scss +++ b/packages/fe/assets/scss/variables.scss @@ -72,9 +72,9 @@ $breakpoint_UltraLarge: 140.625rem; // 2250px outline: 3px solid rgba($greenYellow, 0.5); } -@mixin focusOutlineWithOffset { +@mixin focusOutlineWithOffset($offset: 4px) { outline: 3px solid rgba($greenYellow, 0.5); - outline-offset: 4px; + outline-offset: $offset; } @mixin focusBoxShadow { diff --git a/packages/fe/components/hero-c.vue b/packages/fe/components/hero-c.vue index b3ea8f43..5e5cf1bd 100644 --- a/packages/fe/components/hero-c.vue +++ b/packages/fe/components/hero-c.vue @@ -10,7 +10,9 @@ - +
diff --git a/packages/fe/components/spinners/datacap-text.vue b/packages/fe/components/spinners/datacap-text.vue index 035bff37..89d59e97 100644 --- a/packages/fe/components/spinners/datacap-text.vue +++ b/packages/fe/components/spinners/datacap-text.vue @@ -1,5 +1,5 @@