From df6d628572194f387dc42bd04c0af22472685acf Mon Sep 17 00:00:00 2001 From: lubber-de Date: Wed, 24 May 2023 14:11:58 +0200 Subject: [PATCH] feat(chore): optional outline on focus --- src/definitions/collections/form.less | 6 ++++++ src/definitions/elements/button.less | 3 +++ src/definitions/elements/input.less | 3 +++ src/definitions/modules/calendar.less | 2 +- src/definitions/modules/checkbox.less | 9 +++++++++ src/definitions/modules/dropdown.less | 17 ++++++++++++++++- src/definitions/modules/flyout.less | 6 ++++++ src/definitions/modules/modal.less | 6 ++++++ src/definitions/modules/search.less | 3 +++ src/definitions/modules/slider.less | 2 +- src/themes/default/collections/form.variables | 2 ++ src/themes/default/globals/site.variables | 1 + src/themes/default/modules/checkbox.variables | 2 ++ src/themes/default/modules/dropdown.variables | 4 ++++ src/themes/default/modules/flyout.variables | 3 +++ src/themes/default/modules/modal.variables | 1 + 16 files changed, 67 insertions(+), 3 deletions(-) diff --git a/src/definitions/collections/form.less b/src/definitions/collections/form.less index 0aeda3e92c..833ed7eded 100755 --- a/src/definitions/collections/form.less +++ b/src/definitions/collections/form.less @@ -162,6 +162,9 @@ font-family: @inputFont; line-height: @textAreaLineHeight; resize: @textAreaResize; + &:focus when not (@textAreaFocusOutline = none) { + outline: @textAreaFocusOutline; + } } .ui.form textarea:not([rows]) { height: @textAreaHeight; @@ -424,6 +427,9 @@ border-radius: @inputFocusBorderRadius; background: @inputFocusBackground; box-shadow: @inputFocusBoxShadow; + & when not (@inputFocusOutline = none) { + outline: @inputFocusOutline; + } } & when (@variationInputAction) { .ui.form .ui.action.input:not([class*="left action"]) { diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less index 07cf1f0b89..99101b8458 100755 --- a/src/definitions/elements/button.less +++ b/src/definitions/elements/button.less @@ -76,6 +76,9 @@ color: @focusColor; background-image: @focusBackgroundImage; box-shadow: @focusBoxShadow; + & when not (@focusOutline = none) { + outline: @focusOutline; + } } .ui.button:focus .icon { diff --git a/src/definitions/elements/input.less b/src/definitions/elements/input.less index 6be2a90571..575ca053fb 100755 --- a/src/definitions/elements/input.less +++ b/src/definitions/elements/input.less @@ -56,6 +56,9 @@ transition: @iconTransition; cursor: pointer; } + &:focus when not (@focusOutline = none) { + outline: @focusOutline; + } } /* -------------------- diff --git a/src/definitions/modules/calendar.less b/src/definitions/modules/calendar.less index 0aab4a33ae..146f07a90b 100644 --- a/src/definitions/modules/calendar.less +++ b/src/definitions/modules/calendar.less @@ -37,7 +37,7 @@ .ui.calendar .calendar:focus, .ui.calendar.popup:focus { - outline: 0; + outline: @focusOutline; } /******************************* diff --git a/src/definitions/modules/checkbox.less b/src/definitions/modules/checkbox.less index 9c7d932cad..68fb39c5b7 100755 --- a/src/definitions/modules/checkbox.less +++ b/src/definitions/modules/checkbox.less @@ -36,6 +36,9 @@ font-size: @relativeMedium; line-height: @checkboxLineHeight; min-width: @checkboxSize; + &:focus when not (@focusOutline = none) { + outline: @focusOutline; + } } /* HTML Checkbox */ @@ -50,6 +53,9 @@ z-index: 3; width: @checkboxSize; height: @checkboxSize; + &:focus when not (@inputFocusOutline = none) { + outline: @inputFocusOutline; + } } .ui.checkbox label { @@ -58,6 +64,9 @@ display: block; outline: none; font-size: @labelFontSize; + &:focus when not (@labelFocusOutline = none) { + outline: @labelFocusOutline; + } } .ui.checkbox:not(.invisible) label { diff --git a/src/definitions/modules/dropdown.less b/src/definitions/modules/dropdown.less index 682a36ff40..b900056782 100755 --- a/src/definitions/modules/dropdown.less +++ b/src/definitions/modules/dropdown.less @@ -30,6 +30,9 @@ transition: @transition; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + &:focus when not (@focusOutline = none) { + outline: @focusOutline; + } } /******************************* @@ -59,6 +62,9 @@ transition: @menuTransition; z-index: @menuZIndex; will-change: transform, opacity; + &:focus when not (@menuFocusOutline = none) { + outline: @menuFocusOutline; + } } .ui.dropdown .menu > * { @@ -387,7 +393,7 @@ select.ui.dropdown { word-wrap: break-word; line-height: 1em; white-space: normal; - outline: 0; + outline: none; transform: rotateZ(0); min-width: @selectionMinWidth; min-height: @selectionMinHeight; @@ -399,6 +405,9 @@ select.ui.dropdown { border: @selectionBorder; border-radius: @selectionBorderRadius; transition: @selectionTransition; + &:focus when not (@selectionFocusOutline = none) { + outline: @selectionFocusOutline; + } } .ui.selection.dropdown.visible, .ui.selection.dropdown.active { @@ -448,6 +457,9 @@ select.ui.dropdown { border-radius: @selectionMenuBorderRadius; box-shadow: @selectionMenuBoxShadow; transition: @selectionMenuTransition; + &:focus when not (@selectionMenuFocusOutline = none) { + outline: @selectionMenuFocusOutline; + } } .ui.selection.dropdown .menu::after, .ui.selection.dropdown .menu::before { @@ -695,6 +707,9 @@ select.ui.dropdown { outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); padding: inherit; + &:focus when not (@searchFocusOutline = none) { + outline: @searchFocusOutline; + } } /* Text Layering */ diff --git a/src/definitions/modules/flyout.less b/src/definitions/modules/flyout.less index b937e0c2fc..3c0d830a3b 100644 --- a/src/definitions/modules/flyout.less +++ b/src/definitions/modules/flyout.less @@ -40,6 +40,9 @@ z-index: @topLayer; background: #fff; outline: none; + &:focus when not (@focusOutline = none) { + outline: @focusOutline; + } } /* GPU Layers for Child Elements */ @@ -71,6 +74,9 @@ opacity: 1; outline: none; } +.ui.flyout > .close:focus when not (@closeFocusOutline = none) { + outline: @closeFocusOutline; +} /* -------------- Header diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less index 274fc6d36a..aa36000292 100755 --- a/src/definitions/modules/modal.less +++ b/src/definitions/modules/modal.less @@ -35,6 +35,9 @@ user-select: text; will-change: top, left, margin, transform, opacity; outline: none; + &:focus when not (@focusOutline = none) { + outline: @focusOutline; + } } .ui.modal > :first-child:not(.close):not(.dimmer), @@ -80,6 +83,9 @@ opacity: 1; outline: none; } +.ui.modal > .close:focus when not (@closeFocusOutline = none) { + outline: @closeFocusOutline; +} /* -------------- Header diff --git a/src/definitions/modules/search.less b/src/definitions/modules/search.less index 54cdf5b35e..11108eb4e8 100755 --- a/src/definitions/modules/search.less +++ b/src/definitions/modules/search.less @@ -183,6 +183,9 @@ border-color: @promptFocusBorderColor; background: @promptFocusBackground; color: @promptFocusColor; + & when not (@focusOutline = none) { + outline: @focusOutline; + } } & when (@variationSearchLoading) { diff --git a/src/definitions/modules/slider.less b/src/definitions/modules/slider.less index 59e0cfdaeb..c39d230926 100644 --- a/src/definitions/modules/slider.less +++ b/src/definitions/modules/slider.less @@ -27,7 +27,7 @@ } .ui.slider:not(.checkbox):focus { - outline: 0; + outline: @focusOutline; } .ui.slider .inner { diff --git a/src/themes/default/collections/form.variables b/src/themes/default/collections/form.variables index 70907c8765..71af6157a6 100644 --- a/src/themes/default/collections/form.variables +++ b/src/themes/default/collections/form.variables @@ -91,6 +91,7 @@ @inputFocusColor: @selectedTextColor; @inputFocusBoxShadow: @inputFocusPointerSize 0 0 0 @selectedBorderColor inset; @inputFocusBorderRadius: @inputBorderRadius; +@inputFocusOutline: @focusOutline; /* Text Area Focus */ @textAreaFocusBackground: @inputFocusBackground; @@ -98,6 +99,7 @@ @textAreaFocusColor: @inputFocusColor; @textAreaFocusBoxShadow: @inputFocusBoxShadow; @textAreaFocusBorderRadius: @inputFocusBorderRadius; +@textAreaFocusOutline: @focusOutline; /* Disabled */ @disabledLabelOpacity: @disabledOpacity; diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index 037727238d..2dfab71356 100755 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -1136,6 +1136,7 @@ /* ------------------- Focus -------------------- */ +@focusOutline: none; /* --- Colors --- */ @primaryColorFocus: saturate(darken(@primaryColor, 8), 20, relative); diff --git a/src/themes/default/modules/checkbox.variables b/src/themes/default/modules/checkbox.variables index bb264d6326..9e885bf3e0 100644 --- a/src/themes/default/modules/checkbox.variables +++ b/src/themes/default/modules/checkbox.variables @@ -50,6 +50,8 @@ @checkboxFocusBorderColor: @focusedFormMutedBorderColor; @checkboxFocusCheckColor: @selectedTextColor; @labelFocusColor: @selectedTextColor; +@labelFocusOutline: @focusOutline; +@inputFocusOutline: @focusOutline; /* Active */ @labelActiveColor: @selectedTextColor; diff --git a/src/themes/default/modules/dropdown.variables b/src/themes/default/modules/dropdown.variables index ddc1ba36a4..e532847837 100755 --- a/src/themes/default/modules/dropdown.variables +++ b/src/themes/default/modules/dropdown.variables @@ -32,6 +32,7 @@ @menuPadding: 0; @menuTop: 100%; @menuTextAlign: left; +@menuFocusOutline: @focusOutline; @menuBorderWidth: 1px; @menuBorderColor: @borderColor; @@ -202,6 +203,8 @@ @selectionFocusBorderColor: @focusedFormMutedBorderColor; @selectionFocusBoxShadow: none; @selectionFocusMenuBoxShadow: @raisedShadow; +@selectionFocusOutline: @focusOutline; +@selectionMenuFocusOutline: @focusOutline; /* Visible */ @selectionVisibleTextFontWeight: @normal; @@ -224,6 +227,7 @@ -------------- */ @searchMinWidth: ""; +@searchFocusOutline: @focusOutline; /* Search Selection */ @searchSelectionLineHeight: @inputLineHeight; diff --git a/src/themes/default/modules/flyout.variables b/src/themes/default/modules/flyout.variables index dd1c3e0779..b82d22b722 100644 --- a/src/themes/default/modules/flyout.variables +++ b/src/themes/default/modules/flyout.variables @@ -11,6 +11,9 @@ @duration: 500ms; @easing: @defaultEasing; +/* Focus */ +@closeFocusOutline: @focusOutline; + /* Dimmer */ @dimmerColor: rgba(0, 0, 0, 0.4); @dimmerTransition: all @duration; diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables index fefb01f2f7..00073724c8 100755 --- a/src/themes/default/modules/modal.variables +++ b/src/themes/default/modules/modal.variables @@ -16,6 +16,7 @@ @closeOpacityDimmed: 0.1; @closeSize: 1.25em; @closeColor: @white; +@closeFocusOutline: @focusOutline; @closeHitbox: 2.25rem; @closeDistance: 0.25rem;