From 5ab43c95a191d6fc6bb43bd3864d13e361ee271f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 29 Jul 2024 21:43:17 -0400 Subject: [PATCH 1/7] add initial pass of hover mixin --- src/app/_variables.scss | 38 +++++++++++++++++++ src/app/accounts/MenuAccounts.m.scss | 3 +- src/app/accounts/SelectAccount.m.scss | 4 +- .../character-tile/CharacterTileButton.m.scss | 3 +- src/app/compare/Compare.m.scss | 7 +++- src/app/compare/CompareItem.m.scss | 3 +- src/app/destiny1/activities/activities.scss | 2 +- .../loadout-builder/loadout-builder.scss | 14 ++++--- .../LoadoutDrawerOptions.m.scss | 3 +- src/app/dim-ui/CheckButton.m.scss | 3 +- src/app/dim-ui/ClosableContainer.m.scss | 10 +++-- src/app/dim-ui/CollapsibleTitle.m.scss | 6 +-- src/app/dim-ui/ConfirmButton.m.scss | 6 ++- src/app/dim-ui/Dropdown.m.scss | 5 +-- src/app/dim-ui/ExpandableTextBlock.m.scss | 11 ++++-- src/app/dim-ui/FilterPills.m.scss | 6 +-- src/app/dim-ui/PageWithMenu.m.scss | 3 +- src/app/dim-ui/SetFilterButton.m.scss | 5 ++- src/app/dim-ui/Sheet.m.scss | 5 +-- src/app/dim-ui/TileGrid.m.scss | 3 +- .../destiny-symbols/SymbolsPicker.m.scss | 5 ++- src/app/dim-ui/dim-button.scss | 2 +- .../dim-ui/text-complete/text-complete.m.scss | 6 ++- src/app/farming/farming.scss | 4 +- src/app/inventory-page/DesktopStores.m.scss | 2 +- .../InventoryCollapsibleTitle.m.scss | 3 +- src/app/inventory-page/StoreBucket.scss | 3 +- src/app/inventory-page/Stores.scss | 36 +++++++++--------- .../inventory/DraggableInventoryItem.m.scss | 30 ++++++++------- src/app/inventory/InventoryItem.m.scss | 2 +- src/app/inventory/PullFromPostmaster.m.scss | 8 ++-- src/app/item-actions/ActionButton.m.scss | 3 +- src/app/item-actions/ItemMoveLocations.m.scss | 3 +- src/app/item-feed/ItemFeedSidebar.m.scss | 2 +- src/app/item-popup/DesktopItemActions.m.scss | 6 ++- src/app/item-popup/ItemPerksList.m.scss | 2 +- src/app/item-popup/ItemPopupHeader.m.scss | 3 +- src/app/item-popup/ItemPopupTabs.m.scss | 3 +- src/app/item-popup/ItemSocketsWeapons.m.scss | 4 +- src/app/item-popup/NotesArea.m.scss | 3 +- src/app/item-popup/Plug.m.scss | 12 +++--- .../filter/StatConstraintEditor.m.scss | 5 +-- .../loadout-drawer/LoadoutDrawerHeader.m.scss | 3 +- .../loadout-edit/LoadoutEditSection.m.scss | 5 +-- .../loadout-edit/LoadoutEditSubclass.m.scss | 4 +- .../loadout/loadout-menu/LoadoutPopup.m.scss | 7 ++-- .../loadout-ui/BucketPlaceholder.m.scss | 2 +- src/app/loadout/loadout-ui/LoadoutMods.m.scss | 3 +- src/app/login/Login.m.scss | 3 +- src/app/main.scss | 6 +-- src/app/notifications/Notification.m.scss | 3 +- .../notifications/NotificationButton.m.scss | 3 +- src/app/organizer/DropDown.m.scss | 3 +- src/app/organizer/ItemTable.m.scss | 5 ++- src/app/progress/milestone.scss | 8 ++-- src/app/records/Record.m.scss | 3 +- src/app/search/FilterHelp.m.scss | 7 ++-- src/app/search/SearchBar.m.scss | 14 +++---- src/app/search/search-filter.scss | 3 +- src/app/settings/CustomStatsSettings.m.scss | 3 +- src/app/shell/Header.m.scss | 9 ++--- src/app/strip-sockets/StripSockets.m.scss | 3 +- .../single-vendor/ArtifactUnlocks.m.scss | 8 ++-- 63 files changed, 227 insertions(+), 165 deletions(-) diff --git a/src/app/_variables.scss b/src/app/_variables.scss index a91b565d2b..e07ca8cda0 100644 --- a/src/app/_variables.scss +++ b/src/app/_variables.scss @@ -136,3 +136,41 @@ $tempContainerZindex: 1000; @function dim-rgb-values-to-rgba($values, $alpha: 1) { @return #{'rgba(' + $values + ', ' + $alpha + ')'}; } + +/** + * Declares hover rules only if a device can hover over elements. This avoids issues on mobile + * browsers where tapping an element triggers and persists its hover state. + */ +@mixin hover { + @media (any-hover: hover) { + &:hover { + @content; + } + } +} + +@mixin interactive($hover: false, $focus: false, $focusWithin: false, $active: false) { + @if $hover == true { + @include hover { + @content; + } + } + + @if $focus == true { + &:focus-visible { + @content; + } + } + + @if $focusWithin == true { + &:focus-within { + @content; + } + } + + @if $active == true { + &:active { + @content; + } + } +} diff --git a/src/app/accounts/MenuAccounts.m.scss b/src/app/accounts/MenuAccounts.m.scss index b481f1ce93..210f18bfd1 100644 --- a/src/app/accounts/MenuAccounts.m.scss +++ b/src/app/accounts/MenuAccounts.m.scss @@ -14,8 +14,7 @@ > div { padding: 10px 2rem 10px 1rem; - &:hover, - &:focus { + @include interactive($hover: true, $focus: true) { color: var(--theme-text-invert); background-color: var(--theme-accent-primary); } diff --git a/src/app/accounts/SelectAccount.m.scss b/src/app/accounts/SelectAccount.m.scss index 272bb5e33f..6ed8377964 100644 --- a/src/app/accounts/SelectAccount.m.scss +++ b/src/app/accounts/SelectAccount.m.scss @@ -24,8 +24,8 @@ &:active { outline: none; } - &:hover, - &:focus { + + @include interactive($hover: true, $focus: true) { border-color: var(--theme-accent-primary); color: var(--theme-accent-primary); background-color: rgba(255, 255, 255, 0.1); diff --git a/src/app/character-tile/CharacterTileButton.m.scss b/src/app/character-tile/CharacterTileButton.m.scss index bb6c98694f..18f8198fc1 100644 --- a/src/app/character-tile/CharacterTileButton.m.scss +++ b/src/app/character-tile/CharacterTileButton.m.scss @@ -23,8 +23,7 @@ // Display an outline when hovering characters @media (hover: hover) { - &:hover, - &:active { + @include interactive($hover: true, $active: true) { @include selected-highlight; } } diff --git a/src/app/compare/Compare.m.scss b/src/app/compare/Compare.m.scss index 6a0dc9bff2..a812950b81 100644 --- a/src/app/compare/Compare.m.scss +++ b/src/app/compare/Compare.m.scss @@ -69,8 +69,11 @@ img { margin: 0; } - &:hover img { - filter: drop-shadow(0 0 1px black); + + @include interactive($hover: true) { + img { + filter: drop-shadow(0 0 1px black); + } } } } diff --git a/src/app/compare/CompareItem.m.scss b/src/app/compare/CompareItem.m.scss index 15b524b4d7..e7b9761641 100644 --- a/src/app/compare/CompareItem.m.scss +++ b/src/app/compare/CompareItem.m.scss @@ -88,7 +88,8 @@ background-image: url('images/close.png'); background-position: center; background-repeat: no-repeat; - &:hover { + + @include interactive($hover: true) { background-color: var(--theme-accent-primary); } } diff --git a/src/app/destiny1/activities/activities.scss b/src/app/destiny1/activities/activities.scss index 7a98a71db7..ca6320353d 100644 --- a/src/app/destiny1/activities/activities.scss +++ b/src/app/destiny1/activities/activities.scss @@ -82,7 +82,7 @@ background-blend-mode: multiply; background: #666; - &:hover { + @include interactive($hover: true) { background: #aaa; } } diff --git a/src/app/destiny1/loadout-builder/loadout-builder.scss b/src/app/destiny1/loadout-builder/loadout-builder.scss index 292aa4653c..e2e26a8274 100644 --- a/src/app/destiny1/loadout-builder/loadout-builder.scss +++ b/src/app/destiny1/loadout-builder/loadout-builder.scss @@ -63,7 +63,8 @@ $and-color: #814bcf; vertical-align: middle; width: var(--item-size); height: var(--item-size); - &:hover { + + @include interactive($hover: true) { opacity: 1; transition: 1s; } @@ -97,9 +98,11 @@ $and-color: #814bcf; margin-bottom: 20px; } - .expand-configs:hover { - color: var(--theme-accent-primary); - cursor: pointer; + .expand-configs { + @include interactive($hover: true, $focusWithin: true) { + color: var(--theme-accent-primary); + cursor: pointer; + } } .loadout-builder-item { @@ -216,7 +219,8 @@ $and-color: #814bcf; border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box; cursor: pointer; - &:hover { + + @include interactive($hover: true) { background-color: rgba(160, 160, 160, 0.8); border: 1px solid rgba(32, 32, 32, 0); color: rgba(245, 245, 245, 1); diff --git a/src/app/destiny1/loadout-drawer/LoadoutDrawerOptions.m.scss b/src/app/destiny1/loadout-drawer/LoadoutDrawerOptions.m.scss index a04bf19aee..0fb2a0b2d5 100644 --- a/src/app/destiny1/loadout-drawer/LoadoutDrawerOptions.m.scss +++ b/src/app/destiny1/loadout-drawer/LoadoutDrawerOptions.m.scss @@ -44,8 +44,7 @@ height: 32px; } - &:hover, - &:focus { + @include interactive($hover: true, $focus: true) { background: black; outline: none; border-bottom: 1px solid var(--theme-accent-primary); diff --git a/src/app/dim-ui/CheckButton.m.scss b/src/app/dim-ui/CheckButton.m.scss index 217d01a138..9d4c5cdcda 100644 --- a/src/app/dim-ui/CheckButton.m.scss +++ b/src/app/dim-ui/CheckButton.m.scss @@ -22,8 +22,7 @@ } // Don't do hover - &:hover, - &:active { + @include interactive($hover: true, $active: true) { background-color: rgba(255, 255, 255, 0.2) !important; color: var(--theme-text) !important; } diff --git a/src/app/dim-ui/ClosableContainer.m.scss b/src/app/dim-ui/ClosableContainer.m.scss index f92938bcdf..d353c3c9b3 100644 --- a/src/app/dim-ui/ClosableContainer.m.scss +++ b/src/app/dim-ui/ClosableContainer.m.scss @@ -15,8 +15,8 @@ right: 2px; background-image: url('images/close.png'); background-color: rgba(100, 100, 100, 0.8); - &:hover, - &:focus-visible { + + @include interactive($hover: true, $focus: true) { background-color: var(--theme-accent-primary); outline: none; } @@ -27,7 +27,9 @@ display: none; } - &:hover .close { - display: inline-block; + @include interactive($hover: true) { + .close { + display: inline-block; + } } } diff --git a/src/app/dim-ui/CollapsibleTitle.m.scss b/src/app/dim-ui/CollapsibleTitle.m.scss index 33d285b75c..168313941f 100644 --- a/src/app/dim-ui/CollapsibleTitle.m.scss +++ b/src/app/dim-ui/CollapsibleTitle.m.scss @@ -36,8 +36,7 @@ letter-spacing: 2px; font-size: 14px; - &:hover, - &:focus-visible { + @include interactive($hover: true, $focus: true) { color: var(--theme-accent-primary); @include phone-portrait { @@ -56,8 +55,7 @@ } } - &:hover, - &:focus-within { + @include interactive($hover: true, $focusWithin: true) { background-color: rgba(0, 0, 0, 0.4); } diff --git a/src/app/dim-ui/ConfirmButton.m.scss b/src/app/dim-ui/ConfirmButton.m.scss index dbedb5725d..cf0e3122ba 100644 --- a/src/app/dim-ui/ConfirmButton.m.scss +++ b/src/app/dim-ui/ConfirmButton.m.scss @@ -1,3 +1,5 @@ +@use '../variables.scss' as *; + .confirmButton { overflow: hidden; max-width: 100%; @@ -26,12 +28,12 @@ } color: var(--theme-text) !important; - &:hover { + @include interactive($hover: true) { background-color: #af7d27 !important; } &[class~='danger'] { - &:hover { + @include interactive($hover: true) { background-color: #a22 !important; } } diff --git a/src/app/dim-ui/Dropdown.m.scss b/src/app/dim-ui/Dropdown.m.scss index adf41542c4..6ac2ae97da 100644 --- a/src/app/dim-ui/Dropdown.m.scss +++ b/src/app/dim-ui/Dropdown.m.scss @@ -66,9 +66,8 @@ padding: 4px 8px; color: #999; transition: all 150ms ease-out; - &:active, - &:hover, - &:focus-visible { + + @include interactive($hover: true, $active: true, $focus: true) { color: white; } } diff --git a/src/app/dim-ui/ExpandableTextBlock.m.scss b/src/app/dim-ui/ExpandableTextBlock.m.scss index 3a0da16792..ef777367e7 100644 --- a/src/app/dim-ui/ExpandableTextBlock.m.scss +++ b/src/app/dim-ui/ExpandableTextBlock.m.scss @@ -1,7 +1,10 @@ +@use '../variables.scss' as *; + .textBlockWrapper { position: relative; overflow: hidden; - &:hover { + + @include interactive($hover: true) { cursor: pointer; } &::after { @@ -10,8 +13,10 @@ inset: 0; box-shadow: inset 0 -31px 20px -20px black; } - &.open:hover { - cursor: default; + &.open { + @include interactive($hover: true) { + cursor: default; + } } &.open::after { display: none; diff --git a/src/app/dim-ui/FilterPills.m.scss b/src/app/dim-ui/FilterPills.m.scss index 686269ee4f..c1649b5be3 100644 --- a/src/app/dim-ui/FilterPills.m.scss +++ b/src/app/dim-ui/FilterPills.m.scss @@ -30,10 +30,8 @@ background-color: rgb(255, 255, 255, 0.2); } - @media (hover: hover) { - &:hover { - border-color: rgba(255, 255, 255, 0.3); - } + @include interactive($hover: true) { + border-color: rgba(255, 255, 255, 0.3); } :global(.app-icon) { diff --git a/src/app/dim-ui/PageWithMenu.m.scss b/src/app/dim-ui/PageWithMenu.m.scss index ebc35a4c05..40acb68de7 100644 --- a/src/app/dim-ui/PageWithMenu.m.scss +++ b/src/app/dim-ui/PageWithMenu.m.scss @@ -117,8 +117,7 @@ font-size: 16px; } - &:hover, - &:focus-visible { + @include interactive($hover: true, $focus: true) { color: var(--theme-accent-primary); :global(.app-icon) { diff --git a/src/app/dim-ui/SetFilterButton.m.scss b/src/app/dim-ui/SetFilterButton.m.scss index 133838e84c..9427ec25a5 100644 --- a/src/app/dim-ui/SetFilterButton.m.scss +++ b/src/app/dim-ui/SetFilterButton.m.scss @@ -1,3 +1,5 @@ +@use '../variables.scss' as *; + .setFilterButton { display: inline-block; cursor: pointer; @@ -6,7 +8,8 @@ padding: 0 6px; border-radius: 4px; text-align: center; - &:hover { + + @include interactive($hover: true) { background-color: #68a0b7; color: #222; } diff --git a/src/app/dim-ui/Sheet.m.scss b/src/app/dim-ui/Sheet.m.scss index d8a4eda61f..0eac4eeadc 100644 --- a/src/app/dim-ui/Sheet.m.scss +++ b/src/app/dim-ui/Sheet.m.scss @@ -91,9 +91,8 @@ $control-color: rgba(255, 255, 255, 0.5); width: 24px; font-size: 24px; } - &:active, - &:hover, - &:focus-visible { + + @include interactive($hover: true, $active: true, $focus: true) { color: var(--theme-accent-primary); } } diff --git a/src/app/dim-ui/TileGrid.m.scss b/src/app/dim-ui/TileGrid.m.scss index 710b741751..888f9a33d6 100644 --- a/src/app/dim-ui/TileGrid.m.scss +++ b/src/app/dim-ui/TileGrid.m.scss @@ -31,7 +31,8 @@ gap: 8px; box-sizing: border-box; position: relative; - &:hover { + + @include interactive($hover: true) { background-color: rgba(255, 255, 255, 0.1); } &:focus-visible { diff --git a/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss b/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss index 8332428dca..3a380e63df 100644 --- a/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss +++ b/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss @@ -18,7 +18,8 @@ span { font-size: 18px; } - &:hover { + + @include interactive($hover: true) { color: black; background-color: var(--theme-accent-primary); } @@ -71,7 +72,7 @@ padding: 2px; - &:hover { + @include interactive($hover: true) { color: var(--theme-text-invert); background-color: var(--theme-accent-primary); } diff --git a/src/app/dim-ui/dim-button.scss b/src/app/dim-ui/dim-button.scss index 144315a59f..39ea9e2522 100644 --- a/src/app/dim-ui/dim-button.scss +++ b/src/app/dim-ui/dim-button.scss @@ -74,7 +74,7 @@ } } &.danger { - &:hover { + @include interactive($hover: true) { background-color: $red !important; } } diff --git a/src/app/dim-ui/text-complete/text-complete.m.scss b/src/app/dim-ui/text-complete/text-complete.m.scss index a180b1c5ec..ca19fbc259 100644 --- a/src/app/dim-ui/text-complete/text-complete.m.scss +++ b/src/app/dim-ui/text-complete/text-complete.m.scss @@ -18,7 +18,8 @@ &:nth-child(2) { border-top: none; } - &:hover { + + @include interactive($hover: true) { background-color: #e8a534; } } @@ -28,7 +29,8 @@ a { color: black; font-size: 12px; - &:hover { + + @include interactive($hover: true) { cursor: pointer; } text-decoration-line: none; diff --git a/src/app/farming/farming.scss b/src/app/farming/farming.scss index 3ebc04de85..5dbe08550c 100644 --- a/src/app/farming/farming.scss +++ b/src/app/farming/farming.scss @@ -28,8 +28,8 @@ font-size: 1.5em; margin-left: 1rem; transition: 0.3s background-color; - &:hover, - &:active { + + @include interactive($hover: true, $active: true) { background-color: rgba(232, 165, 52, 0.8); } } diff --git a/src/app/inventory-page/DesktopStores.m.scss b/src/app/inventory-page/DesktopStores.m.scss index 2366c18a33..0267eddf3c 100644 --- a/src/app/inventory-page/DesktopStores.m.scss +++ b/src/app/inventory-page/DesktopStores.m.scss @@ -19,7 +19,7 @@ display: flex; align-items: center; - &:hover { + @include interactive($hover: true) { transform: scale(1.5); color: var(--theme-accent-primary); } diff --git a/src/app/inventory-page/InventoryCollapsibleTitle.m.scss b/src/app/inventory-page/InventoryCollapsibleTitle.m.scss index d6ce0ce34d..29c3b0df18 100644 --- a/src/app/inventory-page/InventoryCollapsibleTitle.m.scss +++ b/src/app/inventory-page/InventoryCollapsibleTitle.m.scss @@ -43,8 +43,7 @@ min-height: 24px; gap: 6px; - &:hover, - &:focus-visible { + @include interactive($hover: true, $focus: true) { color: var(--theme-accent-primary); @include phone-portrait { diff --git a/src/app/inventory-page/StoreBucket.scss b/src/app/inventory-page/StoreBucket.scss index e6492294d1..92453479db 100644 --- a/src/app/inventory-page/StoreBucket.scss +++ b/src/app/inventory-page/StoreBucket.scss @@ -99,7 +99,8 @@ padding: 4px; opacity: 0.3; transition: opacity 0.3s ease-in-out; - &:hover { + + @include interactive($hover: true) { opacity: 1; } } diff --git a/src/app/inventory-page/Stores.scss b/src/app/inventory-page/Stores.scss index 559f9b4da4..0456c76616 100644 --- a/src/app/inventory-page/Stores.scss +++ b/src/app/inventory-page/Stores.scss @@ -121,23 +121,25 @@ padding-top: 0; } - .item-drag-container:hover { - // don't display the default outline when hovering over a draggable subclass item - outline: none; - - // allow the pseudo-element to render outside the bounds of the item - contain: layout style; - - // render a diamond-shaped pseudo-element to act as the border - &::before { - @include draggable-hover-border; - content: ''; - position: absolute; - width: var(--item-size); - height: var(--item-size); - transform: rotate(45deg) scale(0.7); - outline-width: 2px; - box-sizing: border-box; + .item-drag-container { + @include interactive($hover: true) { + // don't display the default outline when hovering over a draggable subclass item + outline: none; + + // allow the pseudo-element to render outside the bounds of the item + contain: layout style; + + // render a diamond-shaped pseudo-element to act as the border + &::before { + @include draggable-hover-border; + content: ''; + position: absolute; + width: var(--item-size); + height: var(--item-size); + transform: rotate(45deg) scale(0.7); + outline-width: 2px; + box-sizing: border-box; + } } } } diff --git a/src/app/inventory/DraggableInventoryItem.m.scss b/src/app/inventory/DraggableInventoryItem.m.scss index 6e306c09f0..6db70c79dd 100644 --- a/src/app/inventory/DraggableInventoryItem.m.scss +++ b/src/app/inventory/DraggableInventoryItem.m.scss @@ -1,18 +1,22 @@ -.engram:hover { - // don't display the default outline when hovering over a draggable subclass item - outline: none; +@use '../variables.scss' as *; - // allow the pseudo-element to render outside the bounds of the item - contain: layout style; +.engram { + @include interactive($hover: true) { + // don't display the default outline when hovering over a draggable subclass item + outline: none; - // render a hexagon-shaped pseudo-element to act as the border - &::before { - content: ''; - position: absolute; - width: var(--item-size); - height: var(--item-size); - box-sizing: border-box; - background: url('images/engram_outline.svg'); + // allow the pseudo-element to render outside the bounds of the item + contain: layout style; + + // render a hexagon-shaped pseudo-element to act as the border + &::before { + content: ''; + position: absolute; + width: var(--item-size); + height: var(--item-size); + box-sizing: border-box; + background: url('images/engram_outline.svg'); + } } } diff --git a/src/app/inventory/InventoryItem.m.scss b/src/app/inventory/InventoryItem.m.scss index 3f9976389a..25492cb342 100644 --- a/src/app/inventory/InventoryItem.m.scss +++ b/src/app/inventory/InventoryItem.m.scss @@ -31,7 +31,7 @@ width: var(--item-size); cursor: grab; - &:hover { + @include interactive($hover: true) { @include draggable-hover-border; } } diff --git a/src/app/inventory/PullFromPostmaster.m.scss b/src/app/inventory/PullFromPostmaster.m.scss index 6914bc5759..2d368a7ec5 100644 --- a/src/app/inventory/PullFromPostmaster.m.scss +++ b/src/app/inventory/PullFromPostmaster.m.scss @@ -17,8 +17,10 @@ align-items: center; gap: 4px; - &:hover .badge { - background-color: black; - color: var(--theme-accent-primary); + @include interactive($hover: true) { + .badge { + background-color: black; + color: var(--theme-accent-primary); + } } } diff --git a/src/app/item-actions/ActionButton.m.scss b/src/app/item-actions/ActionButton.m.scss index 150d51d520..b21f2385c1 100644 --- a/src/app/item-actions/ActionButton.m.scss +++ b/src/app/item-actions/ActionButton.m.scss @@ -28,8 +28,7 @@ } @media (min-width: 541px) { - &:hover, - &:focus-visible { + @include interactive($hover: true, $focus: true) { outline: none; background: var(--theme-accent-primary); color: var(--theme-text-invert); diff --git a/src/app/item-actions/ItemMoveLocations.m.scss b/src/app/item-actions/ItemMoveLocations.m.scss index c111196445..f49af6ed67 100644 --- a/src/app/item-actions/ItemMoveLocations.m.scss +++ b/src/app/item-actions/ItemMoveLocations.m.scss @@ -67,8 +67,7 @@ } } - &:hover, - &:focus-visible { + @include interactive($hover: true, $focus: true) { outline: none; &::after { content: ''; diff --git a/src/app/item-feed/ItemFeedSidebar.m.scss b/src/app/item-feed/ItemFeedSidebar.m.scss index 95567afea0..a936ca889c 100644 --- a/src/app/item-feed/ItemFeedSidebar.m.scss +++ b/src/app/item-feed/ItemFeedSidebar.m.scss @@ -35,7 +35,7 @@ white-space: nowrap; font-size: 16px; - &:hover { + @include interactive($hover: true) { color: var(--theme-text-invert); background-color: var(--theme-accent-primary); } diff --git a/src/app/item-popup/DesktopItemActions.m.scss b/src/app/item-popup/DesktopItemActions.m.scss index e3a34dddb2..d01562bbda 100644 --- a/src/app/item-popup/DesktopItemActions.m.scss +++ b/src/app/item-popup/DesktopItemActions.m.scss @@ -24,8 +24,10 @@ font-size: 16px; } - &:hover :global(.app-icon) { - color: var(--theme-accent-primary); + @include interactive($hover: true) { + :global(.app-icon) { + color: var(--theme-accent-primary); + } } .collapsed & { diff --git a/src/app/item-popup/ItemPerksList.m.scss b/src/app/item-popup/ItemPerksList.m.scss index 4b95db7c6a..fe53cff51d 100644 --- a/src/app/item-popup/ItemPerksList.m.scss +++ b/src/app/item-popup/ItemPerksList.m.scss @@ -12,7 +12,7 @@ padding: 4px 8px; flex-wrap: wrap; - &:hover { + @include interactive($hover: true) { background-color: rgba(255, 255, 255, 0.05); } diff --git a/src/app/item-popup/ItemPopupHeader.m.scss b/src/app/item-popup/ItemPopupHeader.m.scss index da481016d8..5fe147492f 100644 --- a/src/app/item-popup/ItemPopupHeader.m.scss +++ b/src/app/item-popup/ItemPopupHeader.m.scss @@ -15,8 +15,7 @@ } .armory { - &:hover, - &:focus-visible { + @include interactive($hover: true, $focus: true) { outline: none; h1 { text-decoration: underline; diff --git a/src/app/item-popup/ItemPopupTabs.m.scss b/src/app/item-popup/ItemPopupTabs.m.scss index 6efb37fa5f..fd3767bcb6 100644 --- a/src/app/item-popup/ItemPopupTabs.m.scss +++ b/src/app/item-popup/ItemPopupTabs.m.scss @@ -16,7 +16,8 @@ &.selected { border-bottom-color: var(--theme-accent-primary); } - &:hover { + + @include interactive($hover: true) { color: var(--theme-text); background-color: #3f3f3f; } diff --git a/src/app/item-popup/ItemSocketsWeapons.m.scss b/src/app/item-popup/ItemSocketsWeapons.m.scss index 9036599184..728f617a50 100644 --- a/src/app/item-popup/ItemSocketsWeapons.m.scss +++ b/src/app/item-popup/ItemSocketsWeapons.m.scss @@ -46,8 +46,8 @@ background-color: rgba(255, 255, 255, 0.2); color: var(--theme-text); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); - &:hover, - &:active { + + @include interactive($hover: true, $active: true) { background-color: var(--theme-accent-primary) !important; color: var(--theme-text-invert) !important; } diff --git a/src/app/item-popup/NotesArea.m.scss b/src/app/item-popup/NotesArea.m.scss index acb99badd4..868c85847b 100644 --- a/src/app/item-popup/NotesArea.m.scss +++ b/src/app/item-popup/NotesArea.m.scss @@ -5,7 +5,8 @@ cursor: pointer; margin-top: 0 !important; margin-bottom: 0 !important; - &:hover { + + @include interactive($hover: true) { color: var(--theme-accent-primary); } &.noNotesYet { diff --git a/src/app/item-popup/Plug.m.scss b/src/app/item-popup/Plug.m.scss index a4199b220c..0670a5a57a 100644 --- a/src/app/item-popup/Plug.m.scss +++ b/src/app/item-popup/Plug.m.scss @@ -7,9 +7,11 @@ width: var(--item-size); border: none; - &:hover .perkOutline { - stroke: var(--theme-accent-primary); - stroke-width: 6px; + @include interactive($hover: true) { + .perkOutline { + stroke: var(--theme-accent-primary); + stroke-width: 6px; + } } } @@ -84,8 +86,8 @@ .hasMenu { cursor: pointer; - &:hover, - &:focus-visible { + + @include interactive($hover: true, $focus: true) { outline: 1px solid var(--theme-accent-primary); } diff --git a/src/app/loadout-builder/filter/StatConstraintEditor.m.scss b/src/app/loadout-builder/filter/StatConstraintEditor.m.scss index 430dcb7d63..ea8a517481 100644 --- a/src/app/loadout-builder/filter/StatConstraintEditor.m.scss +++ b/src/app/loadout-builder/filter/StatConstraintEditor.m.scss @@ -93,7 +93,7 @@ width: 100%; } - &:hover { + @include interactive($hover: true) { outline: 1px solid var(--theme-accent-primary); } } @@ -128,8 +128,7 @@ color: #555; } - &:hover, - &:focus-visible { + @include interactive($hover: true, $focus: true) { &:not(:disabled) { color: var(--theme-accent-primary); } diff --git a/src/app/loadout-drawer/LoadoutDrawerHeader.m.scss b/src/app/loadout-drawer/LoadoutDrawerHeader.m.scss index 65ae841df3..2464434daf 100644 --- a/src/app/loadout-drawer/LoadoutDrawerHeader.m.scss +++ b/src/app/loadout-drawer/LoadoutDrawerHeader.m.scss @@ -33,8 +33,7 @@ color: #999; } - &:hover, - &:focus-within { + @include interactive($hover: true, $focusWithin: true) { outline: none; box-shadow: inset 0 0 0 1px var(--theme-search-dropdown-border); } diff --git a/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss b/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss index de875cd90c..357a179a12 100644 --- a/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss +++ b/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss @@ -30,9 +30,8 @@ color: #999; padding: 4px; transition: all 150ms ease-out; - &:active, - &:hover, - &:focus-visible { + + @include interactive($hover: true, $focus: true, $active: true) { color: var(--theme-text); } } diff --git a/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss b/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss index 5a370b4a87..877d712bed 100644 --- a/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss +++ b/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss @@ -64,8 +64,8 @@ --item-size: 32px; color: #999; - &:hover, - &:focus-visible { + + @include interactive($hover: true, $focus: true) { color: white; opacity: 1; rect { diff --git a/src/app/loadout/loadout-menu/LoadoutPopup.m.scss b/src/app/loadout/loadout-menu/LoadoutPopup.m.scss index cf61e0f755..7c2251efee 100644 --- a/src/app/loadout/loadout-menu/LoadoutPopup.m.scss +++ b/src/app/loadout/loadout-menu/LoadoutPopup.m.scss @@ -120,7 +120,8 @@ font-size: 15px; } } - &:hover { + + @include interactive($hover: true) { background-color: var(--theme-accent-secondary); color: #222; } @@ -166,8 +167,8 @@ .inGameLoadoutButton { composes: resetButton from '../../dim-ui/common.m.scss'; - &:hover, - &:focus-visible { + + @include interactive($hover: true, $focus: true) { outline: 2px solid var(--theme-accent-primary); } display: block; diff --git a/src/app/loadout/loadout-ui/BucketPlaceholder.m.scss b/src/app/loadout/loadout-ui/BucketPlaceholder.m.scss index 55f4f346e9..51232c5f16 100644 --- a/src/app/loadout/loadout-ui/BucketPlaceholder.m.scss +++ b/src/app/loadout/loadout-ui/BucketPlaceholder.m.scss @@ -26,7 +26,7 @@ border-color: var(--theme-accent-primary); } .placeholder { - &:hover { + @include interactive($hover: true) { opacity: 1; } } diff --git a/src/app/loadout/loadout-ui/LoadoutMods.m.scss b/src/app/loadout/loadout-ui/LoadoutMods.m.scss index bf851c1adb..8c0744374c 100644 --- a/src/app/loadout/loadout-ui/LoadoutMods.m.scss +++ b/src/app/loadout/loadout-ui/LoadoutMods.m.scss @@ -41,8 +41,7 @@ height: var(--item-icon-size); width: var(--item-icon-size); - &:hover, - &:focus-visible { + @include interactive($hover: true, $focus: true) { border-color: var(--theme-accent-primary); color: white; } diff --git a/src/app/login/Login.m.scss b/src/app/login/Login.m.scss index 74b1212eae..641e69110f 100644 --- a/src/app/login/Login.m.scss +++ b/src/app/login/Login.m.scss @@ -86,7 +86,8 @@ background-color: var(--theme-accent-primary); color: var(--theme-text-invert); text-shadow: none; - &:hover { + + @include interactive($hover: true) { transform: scale(1.05); } } diff --git a/src/app/main.scss b/src/app/main.scss index 32781b9731..370d15a8f7 100644 --- a/src/app/main.scss +++ b/src/app/main.scss @@ -245,8 +245,7 @@ textarea { line-height: calc(16 / 12); caret-color: var(--theme-accent-primary); - &:hover, - &:focus { + @include interactive($hover: true, $focus: true) { box-shadow: inset 0 0 0 1px var(--theme-search-dropdown-border); } } @@ -275,8 +274,7 @@ select { height: 35px; } - &:hover, - &:active { + @include interactive($hover: true, $active: true) { background-color: var(--theme-accent-primary); color: var(--theme-text-invert); background-image: url('data:image/svg+xml;utf8,'); diff --git a/src/app/notifications/Notification.m.scss b/src/app/notifications/Notification.m.scss index 99fcd1358e..fa8685a368 100644 --- a/src/app/notifications/Notification.m.scss +++ b/src/app/notifications/Notification.m.scss @@ -18,7 +18,8 @@ user-select: none; transition: transform 150ms ease-in-out; - &:hover { + + @include interactive($hover: true) { transform: scale(1.02); } } diff --git a/src/app/notifications/NotificationButton.m.scss b/src/app/notifications/NotificationButton.m.scss index 3807d1b20e..b50f09c4cc 100644 --- a/src/app/notifications/NotificationButton.m.scss +++ b/src/app/notifications/NotificationButton.m.scss @@ -10,7 +10,8 @@ display: block; width: 30%; cursor: pointer; - &:hover { + + @include interactive($hover: true) { background-color: var(--theme-accent-secondary); color: #222; } diff --git a/src/app/organizer/DropDown.m.scss b/src/app/organizer/DropDown.m.scss index 4815e0b9ab..db846bacfa 100644 --- a/src/app/organizer/DropDown.m.scss +++ b/src/app/organizer/DropDown.m.scss @@ -51,8 +51,7 @@ $dropdown-menu: 10; min-width: 15em; gap: 8px; - &:hover, - &:active { + @include interactive($hover: true, $active: true) { color: var(--theme-text-invert); box-shadow: none; background-color: var(--theme-accent-primary); diff --git a/src/app/organizer/ItemTable.m.scss b/src/app/organizer/ItemTable.m.scss index 2fcc0abdd1..84cc0b6ccc 100644 --- a/src/app/organizer/ItemTable.m.scss +++ b/src/app/organizer/ItemTable.m.scss @@ -159,7 +159,8 @@ $content-cells: 5; > :global(.item) { --item-size: var(--icon-item-size) !important; height: var(--item-size); - &:hover { + + @include interactive($hover: true) { outline: 1px solid var(--theme-item-polaroid-hover-border); cursor: pointer; } @@ -310,7 +311,7 @@ $modslotSize: 30px; // Indicate cells that can be filtered on shift-click .shiftHeld { .hasFilter { - &:hover { + @include interactive($hover: true) { background-color: var(--theme-accent-primary) !important; cursor: pointer; } diff --git a/src/app/progress/milestone.scss b/src/app/progress/milestone.scss index 1939d1f865..33f3cb67cf 100644 --- a/src/app/progress/milestone.scss +++ b/src/app/progress/milestone.scss @@ -57,9 +57,11 @@ button.milestone-quest { } // Apply hover style only on clickable milestone buttons - &[type='button']:hover { - .milestone-name { - color: var(--theme-accent-primary); + &[type='button'] { + @include interactive($hover: true) { + .milestone-name { + color: var(--theme-accent-primary); + } } } diff --git a/src/app/records/Record.m.scss b/src/app/records/Record.m.scss index f8cb123519..c7e01682d9 100644 --- a/src/app/records/Record.m.scss +++ b/src/app/records/Record.m.scss @@ -173,7 +173,8 @@ transition: transform 300ms ease-in-out; transform-origin: center 8px; opacity: 0.7; - &:hover { + + @include interactive($hover: true) { transform: scale(1.5); } img { diff --git a/src/app/search/FilterHelp.m.scss b/src/app/search/FilterHelp.m.scss index 6d720e9965..d94c380178 100644 --- a/src/app/search/FilterHelp.m.scss +++ b/src/app/search/FilterHelp.m.scss @@ -37,9 +37,10 @@ color: #eee; display: block; text-decoration: none; - } - a:hover { - text-decoration: underline; + + @include interactive($hover: true) { + text-decoration: underline; + } } } tr td:first-child { diff --git a/src/app/search/SearchBar.m.scss b/src/app/search/SearchBar.m.scss index 123d4e78e7..56a4437379 100644 --- a/src/app/search/SearchBar.m.scss +++ b/src/app/search/SearchBar.m.scss @@ -67,7 +67,7 @@ padding: 6px 9px 6px 9px; gap: 6px; - &:hover { + @include interactive($hover: true) { cursor: pointer; } @@ -205,13 +205,11 @@ margin: 0 !important; } - @media (hover: hover) { - &:hover { - > span, - > :global(.app-icon), - button > :global(.app-icon) { - color: var(--theme-accent-primary); - } + @include interactive($hover: true) { + > span, + > :global(.app-icon), + button > :global(.app-icon) { + color: var(--theme-accent-primary); } } } diff --git a/src/app/search/search-filter.scss b/src/app/search/search-filter.scss index 2e508b6624..d8a4061f9e 100644 --- a/src/app/search/search-filter.scss +++ b/src/app/search/search-filter.scss @@ -21,8 +21,7 @@ height: 34px; } - &:hover, - &:focus-within { + @include interactive($hover: true, $focusWithin: true) { outline: none; box-shadow: inset 0 0 0 1px var(--theme-search-dropdown-border); } diff --git a/src/app/settings/CustomStatsSettings.m.scss b/src/app/settings/CustomStatsSettings.m.scss index 53aa228d53..d5960d35ec 100644 --- a/src/app/settings/CustomStatsSettings.m.scss +++ b/src/app/settings/CustomStatsSettings.m.scss @@ -19,8 +19,7 @@ flex-grow: 1; border: 0; - &:hover, - &:focus { + @include interactive($hover: true, $focus: true) { outline: none; box-shadow: inset 0 0 0 1px var(--theme-search-dropdown-border); } diff --git a/src/app/shell/Header.m.scss b/src/app/shell/Header.m.scss index d7f66f4fc0..acf5018a84 100644 --- a/src/app/shell/Header.m.scss +++ b/src/app/shell/Header.m.scss @@ -55,7 +55,8 @@ $header-height: 44px; @include phone-portrait { font-size: 24px; } - &:hover { + + @include interactive($hover: true) { color: var(--theme-accent-primary); cursor: pointer; transition: color 0.2s linear; @@ -90,8 +91,7 @@ $header-height: 44px; color: var(--theme-text); cursor: pointer; - &:hover, - &.active { + @include interactive($hover: true, $active: true) { color: var(--theme-accent-primary); transition: color 0.2s linear; } @@ -221,8 +221,7 @@ $header-height: 44px; padding-bottom: 6px; } - &:hover, - &:focus { + @include interactive($hover: true, $focus: true) { background-color: var(--theme-accent-primary); color: var(--theme-text-invert); } diff --git a/src/app/strip-sockets/StripSockets.m.scss b/src/app/strip-sockets/StripSockets.m.scss index 41b265a258..c4bee870be 100644 --- a/src/app/strip-sockets/StripSockets.m.scss +++ b/src/app/strip-sockets/StripSockets.m.scss @@ -33,7 +33,8 @@ flex-direction: row; height: 100%; box-sizing: border-box; - &:hover { + + @include interactive($hover: true) { background-color: rgba(255, 255, 255, 0.1); } &:focus { diff --git a/src/app/vendors/single-vendor/ArtifactUnlocks.m.scss b/src/app/vendors/single-vendor/ArtifactUnlocks.m.scss index db319081c4..b6277cb997 100644 --- a/src/app/vendors/single-vendor/ArtifactUnlocks.m.scss +++ b/src/app/vendors/single-vendor/ArtifactUnlocks.m.scss @@ -1,3 +1,5 @@ +@use '../../variables.scss' as *; + .tiers { display: inline-flex; flex-flow: row nowrap; @@ -43,10 +45,10 @@ background-blend-mode: hard-light; border-bottom: 1px solid rgba(0, 0, 0, 0.75); cursor: pointer; -} -.item:hover { - border: 1px solid white; + @include interactive($hover: true) { + border: 1px solid white; + } } .unlocked { From e160639256715a91ba1f0bb055adedab94b28ca0 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 26 Aug 2024 20:19:47 -0400 Subject: [PATCH 2/7] clean up --- src/app/_variables.scss | 20 ++++++------------- src/app/accounts/SelectAccount.m.scss | 1 - src/app/compare/Compare.m.scss | 1 - src/app/compare/CompareItem.m.scss | 1 - .../loadout-builder/loadout-builder.scss | 4 +--- src/app/dim-ui/ClosableContainer.m.scss | 1 - src/app/dim-ui/Dropdown.m.scss | 1 - src/app/dim-ui/ExpandableTextBlock.m.scss | 1 - src/app/dim-ui/SetFilterButton.m.scss | 1 - src/app/dim-ui/Sheet.m.scss | 1 - src/app/dim-ui/TileGrid.m.scss | 1 - .../destiny-symbols/SymbolsPicker.m.scss | 1 - .../dim-ui/text-complete/text-complete.m.scss | 2 -- src/app/farming/farming.scss | 1 - src/app/inventory-page/StoreBucket.scss | 1 - src/app/item-popup/ItemPopupTabs.m.scss | 1 - src/app/item-popup/ItemSocketsWeapons.m.scss | 1 - src/app/item-popup/NotesArea.m.scss | 1 - src/app/item-popup/Plug.m.scss | 1 - .../loadout-edit/LoadoutEditSection.m.scss | 1 - .../loadout-edit/LoadoutEditSubclass.m.scss | 1 - .../loadout/loadout-menu/LoadoutPopup.m.scss | 2 -- src/app/login/Login.m.scss | 1 - src/app/notifications/Notification.m.scss | 1 - .../notifications/NotificationButton.m.scss | 1 - src/app/organizer/ItemTable.m.scss | 1 - src/app/records/Record.m.scss | 1 - src/app/search/FilterHelp.m.scss | 1 - src/app/shell/Header.m.scss | 8 ++++++-- src/app/strip-sockets/StripSockets.m.scss | 1 - 30 files changed, 13 insertions(+), 48 deletions(-) diff --git a/src/app/_variables.scss b/src/app/_variables.scss index e07ca8cda0..430f214cc3 100644 --- a/src/app/_variables.scss +++ b/src/app/_variables.scss @@ -137,22 +137,14 @@ $tempContainerZindex: 1000; @return #{'rgba(' + $values + ', ' + $alpha + ')'}; } -/** - * Declares hover rules only if a device can hover over elements. This avoids issues on mobile - * browsers where tapping an element triggers and persists its hover state. - */ -@mixin hover { - @media (any-hover: hover) { - &:hover { - @content; - } - } -} - @mixin interactive($hover: false, $focus: false, $focusWithin: false, $active: false) { + // Declares hover rules only if a device can hover over elements. This avoids issues on mobile + // browsers where tapping an element triggers and persists its hover state. @if $hover == true { - @include hover { - @content; + @media (any-hover: hover) { + &:hover { + @content; + } } } diff --git a/src/app/accounts/SelectAccount.m.scss b/src/app/accounts/SelectAccount.m.scss index 6ed8377964..0b6091abe9 100644 --- a/src/app/accounts/SelectAccount.m.scss +++ b/src/app/accounts/SelectAccount.m.scss @@ -24,7 +24,6 @@ &:active { outline: none; } - @include interactive($hover: true, $focus: true) { border-color: var(--theme-accent-primary); color: var(--theme-accent-primary); diff --git a/src/app/compare/Compare.m.scss b/src/app/compare/Compare.m.scss index a812950b81..f5ef88d1d4 100644 --- a/src/app/compare/Compare.m.scss +++ b/src/app/compare/Compare.m.scss @@ -69,7 +69,6 @@ img { margin: 0; } - @include interactive($hover: true) { img { filter: drop-shadow(0 0 1px black); diff --git a/src/app/compare/CompareItem.m.scss b/src/app/compare/CompareItem.m.scss index e7b9761641..9ca3a4d9dc 100644 --- a/src/app/compare/CompareItem.m.scss +++ b/src/app/compare/CompareItem.m.scss @@ -88,7 +88,6 @@ background-image: url('images/close.png'); background-position: center; background-repeat: no-repeat; - @include interactive($hover: true) { background-color: var(--theme-accent-primary); } diff --git a/src/app/destiny1/loadout-builder/loadout-builder.scss b/src/app/destiny1/loadout-builder/loadout-builder.scss index e2e26a8274..bd1941d06a 100644 --- a/src/app/destiny1/loadout-builder/loadout-builder.scss +++ b/src/app/destiny1/loadout-builder/loadout-builder.scss @@ -63,7 +63,6 @@ $and-color: #814bcf; vertical-align: middle; width: var(--item-size); height: var(--item-size); - @include interactive($hover: true) { opacity: 1; transition: 1s; @@ -99,7 +98,7 @@ $and-color: #814bcf; } .expand-configs { - @include interactive($hover: true, $focusWithin: true) { + @include interactive($hover: true) { color: var(--theme-accent-primary); cursor: pointer; } @@ -219,7 +218,6 @@ $and-color: #814bcf; border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box; cursor: pointer; - @include interactive($hover: true) { background-color: rgba(160, 160, 160, 0.8); border: 1px solid rgba(32, 32, 32, 0); diff --git a/src/app/dim-ui/ClosableContainer.m.scss b/src/app/dim-ui/ClosableContainer.m.scss index d353c3c9b3..4d5c59bc9c 100644 --- a/src/app/dim-ui/ClosableContainer.m.scss +++ b/src/app/dim-ui/ClosableContainer.m.scss @@ -15,7 +15,6 @@ right: 2px; background-image: url('images/close.png'); background-color: rgba(100, 100, 100, 0.8); - @include interactive($hover: true, $focus: true) { background-color: var(--theme-accent-primary); outline: none; diff --git a/src/app/dim-ui/Dropdown.m.scss b/src/app/dim-ui/Dropdown.m.scss index 6ac2ae97da..9ba2ab5c3b 100644 --- a/src/app/dim-ui/Dropdown.m.scss +++ b/src/app/dim-ui/Dropdown.m.scss @@ -66,7 +66,6 @@ padding: 4px 8px; color: #999; transition: all 150ms ease-out; - @include interactive($hover: true, $active: true, $focus: true) { color: white; } diff --git a/src/app/dim-ui/ExpandableTextBlock.m.scss b/src/app/dim-ui/ExpandableTextBlock.m.scss index ef777367e7..2e83b196b5 100644 --- a/src/app/dim-ui/ExpandableTextBlock.m.scss +++ b/src/app/dim-ui/ExpandableTextBlock.m.scss @@ -3,7 +3,6 @@ .textBlockWrapper { position: relative; overflow: hidden; - @include interactive($hover: true) { cursor: pointer; } diff --git a/src/app/dim-ui/SetFilterButton.m.scss b/src/app/dim-ui/SetFilterButton.m.scss index 9427ec25a5..33d5c006ad 100644 --- a/src/app/dim-ui/SetFilterButton.m.scss +++ b/src/app/dim-ui/SetFilterButton.m.scss @@ -8,7 +8,6 @@ padding: 0 6px; border-radius: 4px; text-align: center; - @include interactive($hover: true) { background-color: #68a0b7; color: #222; diff --git a/src/app/dim-ui/Sheet.m.scss b/src/app/dim-ui/Sheet.m.scss index 0eac4eeadc..630434985b 100644 --- a/src/app/dim-ui/Sheet.m.scss +++ b/src/app/dim-ui/Sheet.m.scss @@ -91,7 +91,6 @@ $control-color: rgba(255, 255, 255, 0.5); width: 24px; font-size: 24px; } - @include interactive($hover: true, $active: true, $focus: true) { color: var(--theme-accent-primary); } diff --git a/src/app/dim-ui/TileGrid.m.scss b/src/app/dim-ui/TileGrid.m.scss index 888f9a33d6..cf3f4da5d3 100644 --- a/src/app/dim-ui/TileGrid.m.scss +++ b/src/app/dim-ui/TileGrid.m.scss @@ -31,7 +31,6 @@ gap: 8px; box-sizing: border-box; position: relative; - @include interactive($hover: true) { background-color: rgba(255, 255, 255, 0.1); } diff --git a/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss b/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss index 3a380e63df..21626243c4 100644 --- a/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss +++ b/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss @@ -18,7 +18,6 @@ span { font-size: 18px; } - @include interactive($hover: true) { color: black; background-color: var(--theme-accent-primary); diff --git a/src/app/dim-ui/text-complete/text-complete.m.scss b/src/app/dim-ui/text-complete/text-complete.m.scss index ca19fbc259..3f8719fbd0 100644 --- a/src/app/dim-ui/text-complete/text-complete.m.scss +++ b/src/app/dim-ui/text-complete/text-complete.m.scss @@ -18,7 +18,6 @@ &:nth-child(2) { border-top: none; } - @include interactive($hover: true) { background-color: #e8a534; } @@ -29,7 +28,6 @@ a { color: black; font-size: 12px; - @include interactive($hover: true) { cursor: pointer; } diff --git a/src/app/farming/farming.scss b/src/app/farming/farming.scss index 5dbe08550c..5bb80e2fa0 100644 --- a/src/app/farming/farming.scss +++ b/src/app/farming/farming.scss @@ -28,7 +28,6 @@ font-size: 1.5em; margin-left: 1rem; transition: 0.3s background-color; - @include interactive($hover: true, $active: true) { background-color: rgba(232, 165, 52, 0.8); } diff --git a/src/app/inventory-page/StoreBucket.scss b/src/app/inventory-page/StoreBucket.scss index 92453479db..38b9a16a7f 100644 --- a/src/app/inventory-page/StoreBucket.scss +++ b/src/app/inventory-page/StoreBucket.scss @@ -99,7 +99,6 @@ padding: 4px; opacity: 0.3; transition: opacity 0.3s ease-in-out; - @include interactive($hover: true) { opacity: 1; } diff --git a/src/app/item-popup/ItemPopupTabs.m.scss b/src/app/item-popup/ItemPopupTabs.m.scss index fd3767bcb6..2eff2de374 100644 --- a/src/app/item-popup/ItemPopupTabs.m.scss +++ b/src/app/item-popup/ItemPopupTabs.m.scss @@ -16,7 +16,6 @@ &.selected { border-bottom-color: var(--theme-accent-primary); } - @include interactive($hover: true) { color: var(--theme-text); background-color: #3f3f3f; diff --git a/src/app/item-popup/ItemSocketsWeapons.m.scss b/src/app/item-popup/ItemSocketsWeapons.m.scss index 728f617a50..3a6ac92cc6 100644 --- a/src/app/item-popup/ItemSocketsWeapons.m.scss +++ b/src/app/item-popup/ItemSocketsWeapons.m.scss @@ -46,7 +46,6 @@ background-color: rgba(255, 255, 255, 0.2); color: var(--theme-text); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); - @include interactive($hover: true, $active: true) { background-color: var(--theme-accent-primary) !important; color: var(--theme-text-invert) !important; diff --git a/src/app/item-popup/NotesArea.m.scss b/src/app/item-popup/NotesArea.m.scss index 868c85847b..35de19a967 100644 --- a/src/app/item-popup/NotesArea.m.scss +++ b/src/app/item-popup/NotesArea.m.scss @@ -5,7 +5,6 @@ cursor: pointer; margin-top: 0 !important; margin-bottom: 0 !important; - @include interactive($hover: true) { color: var(--theme-accent-primary); } diff --git a/src/app/item-popup/Plug.m.scss b/src/app/item-popup/Plug.m.scss index 12bd96d62f..eaf153bda4 100644 --- a/src/app/item-popup/Plug.m.scss +++ b/src/app/item-popup/Plug.m.scss @@ -80,7 +80,6 @@ .hasMenu { cursor: pointer; - @include interactive($hover: true, $focus: true) { outline: 1px solid var(--theme-accent-primary); } diff --git a/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss b/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss index 357a179a12..b8404c67a2 100644 --- a/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss +++ b/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss @@ -30,7 +30,6 @@ color: #999; padding: 4px; transition: all 150ms ease-out; - @include interactive($hover: true, $focus: true, $active: true) { color: var(--theme-text); } diff --git a/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss b/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss index 877d712bed..ba3a45819e 100644 --- a/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss +++ b/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss @@ -64,7 +64,6 @@ --item-size: 32px; color: #999; - @include interactive($hover: true, $focus: true) { color: white; opacity: 1; diff --git a/src/app/loadout/loadout-menu/LoadoutPopup.m.scss b/src/app/loadout/loadout-menu/LoadoutPopup.m.scss index 7c2251efee..a7a1c79090 100644 --- a/src/app/loadout/loadout-menu/LoadoutPopup.m.scss +++ b/src/app/loadout/loadout-menu/LoadoutPopup.m.scss @@ -120,7 +120,6 @@ font-size: 15px; } } - @include interactive($hover: true) { background-color: var(--theme-accent-secondary); color: #222; @@ -167,7 +166,6 @@ .inGameLoadoutButton { composes: resetButton from '../../dim-ui/common.m.scss'; - @include interactive($hover: true, $focus: true) { outline: 2px solid var(--theme-accent-primary); } diff --git a/src/app/login/Login.m.scss b/src/app/login/Login.m.scss index 641e69110f..0ecea32f9c 100644 --- a/src/app/login/Login.m.scss +++ b/src/app/login/Login.m.scss @@ -86,7 +86,6 @@ background-color: var(--theme-accent-primary); color: var(--theme-text-invert); text-shadow: none; - @include interactive($hover: true) { transform: scale(1.05); } diff --git a/src/app/notifications/Notification.m.scss b/src/app/notifications/Notification.m.scss index fa8685a368..65e99cc6b9 100644 --- a/src/app/notifications/Notification.m.scss +++ b/src/app/notifications/Notification.m.scss @@ -18,7 +18,6 @@ user-select: none; transition: transform 150ms ease-in-out; - @include interactive($hover: true) { transform: scale(1.02); } diff --git a/src/app/notifications/NotificationButton.m.scss b/src/app/notifications/NotificationButton.m.scss index b50f09c4cc..4b44a6e3f7 100644 --- a/src/app/notifications/NotificationButton.m.scss +++ b/src/app/notifications/NotificationButton.m.scss @@ -10,7 +10,6 @@ display: block; width: 30%; cursor: pointer; - @include interactive($hover: true) { background-color: var(--theme-accent-secondary); color: #222; diff --git a/src/app/organizer/ItemTable.m.scss b/src/app/organizer/ItemTable.m.scss index 84cc0b6ccc..fa8f03a35f 100644 --- a/src/app/organizer/ItemTable.m.scss +++ b/src/app/organizer/ItemTable.m.scss @@ -159,7 +159,6 @@ $content-cells: 5; > :global(.item) { --item-size: var(--icon-item-size) !important; height: var(--item-size); - @include interactive($hover: true) { outline: 1px solid var(--theme-item-polaroid-hover-border); cursor: pointer; diff --git a/src/app/records/Record.m.scss b/src/app/records/Record.m.scss index c7e01682d9..8e5275f016 100644 --- a/src/app/records/Record.m.scss +++ b/src/app/records/Record.m.scss @@ -173,7 +173,6 @@ transition: transform 300ms ease-in-out; transform-origin: center 8px; opacity: 0.7; - @include interactive($hover: true) { transform: scale(1.5); } diff --git a/src/app/search/FilterHelp.m.scss b/src/app/search/FilterHelp.m.scss index d94c380178..4468f0d2af 100644 --- a/src/app/search/FilterHelp.m.scss +++ b/src/app/search/FilterHelp.m.scss @@ -37,7 +37,6 @@ color: #eee; display: block; text-decoration: none; - @include interactive($hover: true) { text-decoration: underline; } diff --git a/src/app/shell/Header.m.scss b/src/app/shell/Header.m.scss index acf5018a84..d9c5932d83 100644 --- a/src/app/shell/Header.m.scss +++ b/src/app/shell/Header.m.scss @@ -55,7 +55,6 @@ $header-height: 44px; @include phone-portrait { font-size: 24px; } - @include interactive($hover: true) { color: var(--theme-accent-primary); cursor: pointer; @@ -91,7 +90,12 @@ $header-height: 44px; color: var(--theme-text); cursor: pointer; - @include interactive($hover: true, $active: true) { + &.active { + color: var(--theme-accent-primary); + transition: color 0.2s linear; + } + + @include interactive($hover: true) { color: var(--theme-accent-primary); transition: color 0.2s linear; } diff --git a/src/app/strip-sockets/StripSockets.m.scss b/src/app/strip-sockets/StripSockets.m.scss index c4bee870be..9b4ae16c09 100644 --- a/src/app/strip-sockets/StripSockets.m.scss +++ b/src/app/strip-sockets/StripSockets.m.scss @@ -33,7 +33,6 @@ flex-direction: row; height: 100%; box-sizing: border-box; - @include interactive($hover: true) { background-color: rgba(255, 255, 255, 0.1); } From f9b6d7ecc9b5a97d6de2b2b74685ca232f274c71 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 26 Aug 2024 20:21:45 -0400 Subject: [PATCH 3/7] lint fix --- src/app/accounts/SelectAccount.m.scss | 1 + src/app/compare/Compare.m.scss | 1 + src/app/compare/CompareItem.m.scss | 1 + src/app/destiny1/loadout-builder/loadout-builder.scss | 2 ++ src/app/dim-ui/ClosableContainer.m.scss | 1 + src/app/dim-ui/Dropdown.m.scss | 1 + src/app/dim-ui/ExpandableTextBlock.m.scss | 1 + src/app/dim-ui/SetFilterButton.m.scss | 1 + src/app/dim-ui/Sheet.m.scss | 1 + src/app/dim-ui/TileGrid.m.scss | 1 + src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss | 1 + src/app/dim-ui/text-complete/text-complete.m.scss | 2 ++ src/app/farming/farming.scss | 1 + src/app/inventory-page/StoreBucket.scss | 1 + src/app/item-popup/ItemPopupTabs.m.scss | 1 + src/app/item-popup/ItemSocketsWeapons.m.scss | 1 + src/app/item-popup/NotesArea.m.scss | 1 + src/app/item-popup/Plug.m.scss | 1 + src/app/loadout/loadout-edit/LoadoutEditSection.m.scss | 1 + src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss | 1 + src/app/loadout/loadout-menu/LoadoutPopup.m.scss | 2 ++ src/app/login/Login.m.scss | 1 + src/app/notifications/Notification.m.scss | 1 + src/app/notifications/NotificationButton.m.scss | 1 + src/app/organizer/ItemTable.m.scss | 1 + src/app/records/Record.m.scss | 1 + src/app/search/FilterHelp.m.scss | 1 + src/app/shell/Header.m.scss | 1 + src/app/strip-sockets/StripSockets.m.scss | 1 + 29 files changed, 32 insertions(+) diff --git a/src/app/accounts/SelectAccount.m.scss b/src/app/accounts/SelectAccount.m.scss index 0b6091abe9..6ed8377964 100644 --- a/src/app/accounts/SelectAccount.m.scss +++ b/src/app/accounts/SelectAccount.m.scss @@ -24,6 +24,7 @@ &:active { outline: none; } + @include interactive($hover: true, $focus: true) { border-color: var(--theme-accent-primary); color: var(--theme-accent-primary); diff --git a/src/app/compare/Compare.m.scss b/src/app/compare/Compare.m.scss index f5ef88d1d4..a812950b81 100644 --- a/src/app/compare/Compare.m.scss +++ b/src/app/compare/Compare.m.scss @@ -69,6 +69,7 @@ img { margin: 0; } + @include interactive($hover: true) { img { filter: drop-shadow(0 0 1px black); diff --git a/src/app/compare/CompareItem.m.scss b/src/app/compare/CompareItem.m.scss index 9ca3a4d9dc..e7b9761641 100644 --- a/src/app/compare/CompareItem.m.scss +++ b/src/app/compare/CompareItem.m.scss @@ -88,6 +88,7 @@ background-image: url('images/close.png'); background-position: center; background-repeat: no-repeat; + @include interactive($hover: true) { background-color: var(--theme-accent-primary); } diff --git a/src/app/destiny1/loadout-builder/loadout-builder.scss b/src/app/destiny1/loadout-builder/loadout-builder.scss index bd1941d06a..c515b2cd52 100644 --- a/src/app/destiny1/loadout-builder/loadout-builder.scss +++ b/src/app/destiny1/loadout-builder/loadout-builder.scss @@ -63,6 +63,7 @@ $and-color: #814bcf; vertical-align: middle; width: var(--item-size); height: var(--item-size); + @include interactive($hover: true) { opacity: 1; transition: 1s; @@ -218,6 +219,7 @@ $and-color: #814bcf; border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box; cursor: pointer; + @include interactive($hover: true) { background-color: rgba(160, 160, 160, 0.8); border: 1px solid rgba(32, 32, 32, 0); diff --git a/src/app/dim-ui/ClosableContainer.m.scss b/src/app/dim-ui/ClosableContainer.m.scss index 4d5c59bc9c..d353c3c9b3 100644 --- a/src/app/dim-ui/ClosableContainer.m.scss +++ b/src/app/dim-ui/ClosableContainer.m.scss @@ -15,6 +15,7 @@ right: 2px; background-image: url('images/close.png'); background-color: rgba(100, 100, 100, 0.8); + @include interactive($hover: true, $focus: true) { background-color: var(--theme-accent-primary); outline: none; diff --git a/src/app/dim-ui/Dropdown.m.scss b/src/app/dim-ui/Dropdown.m.scss index 9ba2ab5c3b..6ac2ae97da 100644 --- a/src/app/dim-ui/Dropdown.m.scss +++ b/src/app/dim-ui/Dropdown.m.scss @@ -66,6 +66,7 @@ padding: 4px 8px; color: #999; transition: all 150ms ease-out; + @include interactive($hover: true, $active: true, $focus: true) { color: white; } diff --git a/src/app/dim-ui/ExpandableTextBlock.m.scss b/src/app/dim-ui/ExpandableTextBlock.m.scss index 2e83b196b5..ef777367e7 100644 --- a/src/app/dim-ui/ExpandableTextBlock.m.scss +++ b/src/app/dim-ui/ExpandableTextBlock.m.scss @@ -3,6 +3,7 @@ .textBlockWrapper { position: relative; overflow: hidden; + @include interactive($hover: true) { cursor: pointer; } diff --git a/src/app/dim-ui/SetFilterButton.m.scss b/src/app/dim-ui/SetFilterButton.m.scss index 33d5c006ad..9427ec25a5 100644 --- a/src/app/dim-ui/SetFilterButton.m.scss +++ b/src/app/dim-ui/SetFilterButton.m.scss @@ -8,6 +8,7 @@ padding: 0 6px; border-radius: 4px; text-align: center; + @include interactive($hover: true) { background-color: #68a0b7; color: #222; diff --git a/src/app/dim-ui/Sheet.m.scss b/src/app/dim-ui/Sheet.m.scss index 630434985b..0eac4eeadc 100644 --- a/src/app/dim-ui/Sheet.m.scss +++ b/src/app/dim-ui/Sheet.m.scss @@ -91,6 +91,7 @@ $control-color: rgba(255, 255, 255, 0.5); width: 24px; font-size: 24px; } + @include interactive($hover: true, $active: true, $focus: true) { color: var(--theme-accent-primary); } diff --git a/src/app/dim-ui/TileGrid.m.scss b/src/app/dim-ui/TileGrid.m.scss index cf3f4da5d3..888f9a33d6 100644 --- a/src/app/dim-ui/TileGrid.m.scss +++ b/src/app/dim-ui/TileGrid.m.scss @@ -31,6 +31,7 @@ gap: 8px; box-sizing: border-box; position: relative; + @include interactive($hover: true) { background-color: rgba(255, 255, 255, 0.1); } diff --git a/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss b/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss index 21626243c4..3a380e63df 100644 --- a/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss +++ b/src/app/dim-ui/destiny-symbols/SymbolsPicker.m.scss @@ -18,6 +18,7 @@ span { font-size: 18px; } + @include interactive($hover: true) { color: black; background-color: var(--theme-accent-primary); diff --git a/src/app/dim-ui/text-complete/text-complete.m.scss b/src/app/dim-ui/text-complete/text-complete.m.scss index 3f8719fbd0..ca19fbc259 100644 --- a/src/app/dim-ui/text-complete/text-complete.m.scss +++ b/src/app/dim-ui/text-complete/text-complete.m.scss @@ -18,6 +18,7 @@ &:nth-child(2) { border-top: none; } + @include interactive($hover: true) { background-color: #e8a534; } @@ -28,6 +29,7 @@ a { color: black; font-size: 12px; + @include interactive($hover: true) { cursor: pointer; } diff --git a/src/app/farming/farming.scss b/src/app/farming/farming.scss index 5bb80e2fa0..5dbe08550c 100644 --- a/src/app/farming/farming.scss +++ b/src/app/farming/farming.scss @@ -28,6 +28,7 @@ font-size: 1.5em; margin-left: 1rem; transition: 0.3s background-color; + @include interactive($hover: true, $active: true) { background-color: rgba(232, 165, 52, 0.8); } diff --git a/src/app/inventory-page/StoreBucket.scss b/src/app/inventory-page/StoreBucket.scss index 38b9a16a7f..92453479db 100644 --- a/src/app/inventory-page/StoreBucket.scss +++ b/src/app/inventory-page/StoreBucket.scss @@ -99,6 +99,7 @@ padding: 4px; opacity: 0.3; transition: opacity 0.3s ease-in-out; + @include interactive($hover: true) { opacity: 1; } diff --git a/src/app/item-popup/ItemPopupTabs.m.scss b/src/app/item-popup/ItemPopupTabs.m.scss index 2eff2de374..fd3767bcb6 100644 --- a/src/app/item-popup/ItemPopupTabs.m.scss +++ b/src/app/item-popup/ItemPopupTabs.m.scss @@ -16,6 +16,7 @@ &.selected { border-bottom-color: var(--theme-accent-primary); } + @include interactive($hover: true) { color: var(--theme-text); background-color: #3f3f3f; diff --git a/src/app/item-popup/ItemSocketsWeapons.m.scss b/src/app/item-popup/ItemSocketsWeapons.m.scss index 3a6ac92cc6..728f617a50 100644 --- a/src/app/item-popup/ItemSocketsWeapons.m.scss +++ b/src/app/item-popup/ItemSocketsWeapons.m.scss @@ -46,6 +46,7 @@ background-color: rgba(255, 255, 255, 0.2); color: var(--theme-text); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25); + @include interactive($hover: true, $active: true) { background-color: var(--theme-accent-primary) !important; color: var(--theme-text-invert) !important; diff --git a/src/app/item-popup/NotesArea.m.scss b/src/app/item-popup/NotesArea.m.scss index 35de19a967..868c85847b 100644 --- a/src/app/item-popup/NotesArea.m.scss +++ b/src/app/item-popup/NotesArea.m.scss @@ -5,6 +5,7 @@ cursor: pointer; margin-top: 0 !important; margin-bottom: 0 !important; + @include interactive($hover: true) { color: var(--theme-accent-primary); } diff --git a/src/app/item-popup/Plug.m.scss b/src/app/item-popup/Plug.m.scss index eaf153bda4..12bd96d62f 100644 --- a/src/app/item-popup/Plug.m.scss +++ b/src/app/item-popup/Plug.m.scss @@ -80,6 +80,7 @@ .hasMenu { cursor: pointer; + @include interactive($hover: true, $focus: true) { outline: 1px solid var(--theme-accent-primary); } diff --git a/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss b/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss index b8404c67a2..357a179a12 100644 --- a/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss +++ b/src/app/loadout/loadout-edit/LoadoutEditSection.m.scss @@ -30,6 +30,7 @@ color: #999; padding: 4px; transition: all 150ms ease-out; + @include interactive($hover: true, $focus: true, $active: true) { color: var(--theme-text); } diff --git a/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss b/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss index ba3a45819e..877d712bed 100644 --- a/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss +++ b/src/app/loadout/loadout-edit/LoadoutEditSubclass.m.scss @@ -64,6 +64,7 @@ --item-size: 32px; color: #999; + @include interactive($hover: true, $focus: true) { color: white; opacity: 1; diff --git a/src/app/loadout/loadout-menu/LoadoutPopup.m.scss b/src/app/loadout/loadout-menu/LoadoutPopup.m.scss index a7a1c79090..7c2251efee 100644 --- a/src/app/loadout/loadout-menu/LoadoutPopup.m.scss +++ b/src/app/loadout/loadout-menu/LoadoutPopup.m.scss @@ -120,6 +120,7 @@ font-size: 15px; } } + @include interactive($hover: true) { background-color: var(--theme-accent-secondary); color: #222; @@ -166,6 +167,7 @@ .inGameLoadoutButton { composes: resetButton from '../../dim-ui/common.m.scss'; + @include interactive($hover: true, $focus: true) { outline: 2px solid var(--theme-accent-primary); } diff --git a/src/app/login/Login.m.scss b/src/app/login/Login.m.scss index 0ecea32f9c..641e69110f 100644 --- a/src/app/login/Login.m.scss +++ b/src/app/login/Login.m.scss @@ -86,6 +86,7 @@ background-color: var(--theme-accent-primary); color: var(--theme-text-invert); text-shadow: none; + @include interactive($hover: true) { transform: scale(1.05); } diff --git a/src/app/notifications/Notification.m.scss b/src/app/notifications/Notification.m.scss index 65e99cc6b9..fa8685a368 100644 --- a/src/app/notifications/Notification.m.scss +++ b/src/app/notifications/Notification.m.scss @@ -18,6 +18,7 @@ user-select: none; transition: transform 150ms ease-in-out; + @include interactive($hover: true) { transform: scale(1.02); } diff --git a/src/app/notifications/NotificationButton.m.scss b/src/app/notifications/NotificationButton.m.scss index 4b44a6e3f7..b50f09c4cc 100644 --- a/src/app/notifications/NotificationButton.m.scss +++ b/src/app/notifications/NotificationButton.m.scss @@ -10,6 +10,7 @@ display: block; width: 30%; cursor: pointer; + @include interactive($hover: true) { background-color: var(--theme-accent-secondary); color: #222; diff --git a/src/app/organizer/ItemTable.m.scss b/src/app/organizer/ItemTable.m.scss index fa8f03a35f..84cc0b6ccc 100644 --- a/src/app/organizer/ItemTable.m.scss +++ b/src/app/organizer/ItemTable.m.scss @@ -159,6 +159,7 @@ $content-cells: 5; > :global(.item) { --item-size: var(--icon-item-size) !important; height: var(--item-size); + @include interactive($hover: true) { outline: 1px solid var(--theme-item-polaroid-hover-border); cursor: pointer; diff --git a/src/app/records/Record.m.scss b/src/app/records/Record.m.scss index 8e5275f016..c7e01682d9 100644 --- a/src/app/records/Record.m.scss +++ b/src/app/records/Record.m.scss @@ -173,6 +173,7 @@ transition: transform 300ms ease-in-out; transform-origin: center 8px; opacity: 0.7; + @include interactive($hover: true) { transform: scale(1.5); } diff --git a/src/app/search/FilterHelp.m.scss b/src/app/search/FilterHelp.m.scss index 4468f0d2af..d94c380178 100644 --- a/src/app/search/FilterHelp.m.scss +++ b/src/app/search/FilterHelp.m.scss @@ -37,6 +37,7 @@ color: #eee; display: block; text-decoration: none; + @include interactive($hover: true) { text-decoration: underline; } diff --git a/src/app/shell/Header.m.scss b/src/app/shell/Header.m.scss index d9c5932d83..dc47743f9b 100644 --- a/src/app/shell/Header.m.scss +++ b/src/app/shell/Header.m.scss @@ -55,6 +55,7 @@ $header-height: 44px; @include phone-portrait { font-size: 24px; } + @include interactive($hover: true) { color: var(--theme-accent-primary); cursor: pointer; diff --git a/src/app/strip-sockets/StripSockets.m.scss b/src/app/strip-sockets/StripSockets.m.scss index 9b4ae16c09..c4bee870be 100644 --- a/src/app/strip-sockets/StripSockets.m.scss +++ b/src/app/strip-sockets/StripSockets.m.scss @@ -33,6 +33,7 @@ flex-direction: row; height: 100%; box-sizing: border-box; + @include interactive($hover: true) { background-color: rgba(255, 255, 255, 0.1); } From 649f93c229ebaa15ef2a125b86079bc61123a56f Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 26 Aug 2024 20:35:23 -0400 Subject: [PATCH 4/7] a few missing ones --- .../loadout-builder/loadout-builder.scss | 13 ++++++++-- src/app/dim-ui/dim-button.scss | 20 ++++++++++++---- .../loadout/ingame/EditInGameLoadout.m.scss | 16 +++++++++---- .../loadout/loadout-menu/LoadoutPopup.m.scss | 24 +++++++++++++++++-- src/app/organizer/ItemTypeSelector.m.scss | 10 ++++++-- src/app/progress/BountyGuide.m.scss | 4 ++-- 6 files changed, 71 insertions(+), 16 deletions(-) diff --git a/src/app/destiny1/loadout-builder/loadout-builder.scss b/src/app/destiny1/loadout-builder/loadout-builder.scss index c515b2cd52..badd2b458a 100644 --- a/src/app/destiny1/loadout-builder/loadout-builder.scss +++ b/src/app/destiny1/loadout-builder/loadout-builder.scss @@ -376,12 +376,21 @@ $and-color: #814bcf; cursor: pointer; } - & .perk:hover, + & .perk { + @include interactive($hover: true) { + background-color: $or-color; + } + } + & .active-perk-or { background-color: $or-color; } - &.shift-held .perk:hover, + &.shift-held .perk { + @include interactive($hover: true) { + background-color: $and-color; + } + } & .active-perk-and { background-color: $and-color; } diff --git a/src/app/dim-ui/dim-button.scss b/src/app/dim-ui/dim-button.scss index 5894e36e88..4b70ae6675 100644 --- a/src/app/dim-ui/dim-button.scss +++ b/src/app/dim-ui/dim-button.scss @@ -34,8 +34,14 @@ } } - &:hover, - &:active, + @include interactive($hover: true, $active: true) { + background-color: var(--theme-accent-primary) !important; + color: var(--theme-text-invert) !important; + img { + filter: invert(1) drop-shadow(0 0 1px black); + } + } + &.selected { background-color: var(--theme-accent-primary) !important; color: var(--theme-text-invert) !important; @@ -63,8 +69,14 @@ &[disabled] { opacity: 0.5; cursor: not-allowed; - &:hover, - &:active, + + @include interactive($hover: true, $active: true) { + background-color: var(--theme-button-bg) !important; + color: var(--theme-text) !important; + img { + filter: drop-shadow(0 0 1px black); + } + } &.selected { background-color: var(--theme-button-bg) !important; color: var(--theme-text) !important; diff --git a/src/app/loadout/ingame/EditInGameLoadout.m.scss b/src/app/loadout/ingame/EditInGameLoadout.m.scss index ee46294d8b..f46f312607 100644 --- a/src/app/loadout/ingame/EditInGameLoadout.m.scss +++ b/src/app/loadout/ingame/EditInGameLoadout.m.scss @@ -30,8 +30,15 @@ height: 48px; width: 48px; } - &:hover, - &:active, + + @include interactive($hover: true, $active: true) { + background-color: var(--theme-accent-primary); + color: var(--theme-text-invert); + > img { + filter: none !important; + } + } + &.checked { background-color: var(--theme-accent-primary); color: var(--theme-text-invert); @@ -43,8 +50,9 @@ padding: 2px; } &.hasLoadout { - &:hover, - &:active, + @include interactive($hover: true, $active: true) { + color: var(--theme-text) !important; + } &.checked { color: var(--theme-text) !important; } diff --git a/src/app/loadout/loadout-menu/LoadoutPopup.m.scss b/src/app/loadout/loadout-menu/LoadoutPopup.m.scss index 7c2251efee..0fe990ea60 100644 --- a/src/app/loadout/loadout-menu/LoadoutPopup.m.scss +++ b/src/app/loadout/loadout-menu/LoadoutPopup.m.scss @@ -75,8 +75,7 @@ } } - &:hover, - a:hover { + @include interactive($hover: true) { background-color: var(--theme-accent-primary); color: var(--theme-text-invert) !important; > span:first-child > :global(.app-icon) { @@ -95,6 +94,27 @@ } } + a { + @include interactive($hover: true) { + background-color: var(--theme-accent-primary); + color: var(--theme-text-invert) !important; + > span:first-child > :global(.app-icon) { + color: var(--theme-text-invert) !important; + } + > span:first-child > img:first-child, + .modificationIcon { + filter: none; + } + .fashionIcon { + filter: invert(1); + } + + .note { + color: var(--theme-text-invert); + } + } + } + > span:not(:first-child) { margin: 6px 4px 6px 4px; padding: 0 6px; diff --git a/src/app/organizer/ItemTypeSelector.m.scss b/src/app/organizer/ItemTypeSelector.m.scss index 805c57c655..adc5087968 100644 --- a/src/app/organizer/ItemTypeSelector.m.scss +++ b/src/app/organizer/ItemTypeSelector.m.scss @@ -26,8 +26,14 @@ > img { margin-left: 0 !important; } - &:hover, - &:active, + + @include interactive($hover: true, $active: true) { + background-color: var(--theme-accent-primary); + color: var(--theme-text-invert); + > img { + filter: none !important; + } + } &.checked { background-color: var(--theme-accent-primary); color: var(--theme-text-invert); diff --git a/src/app/progress/BountyGuide.m.scss b/src/app/progress/BountyGuide.m.scss index d9ada0a566..aca51eeef3 100644 --- a/src/app/progress/BountyGuide.m.scss +++ b/src/app/progress/BountyGuide.m.scss @@ -42,8 +42,8 @@ transition: transform 150ms ease-in-out; } - @media (hover: hover) { - &:hover :global(.app-icon) { + @include interactive($hover: true) { + :global(.app-icon) { transform: scale(1.3); } } From 60cbcc61ed3383e827c4acfa75d1223c84fd062c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Mon, 26 Aug 2024 20:45:47 -0400 Subject: [PATCH 5/7] lint --- .../loadout-builder/loadout-builder.scss | 2 - .../loadout/loadout-menu/LoadoutPopup.m.scss | 40 +++++++++---------- 2 files changed, 19 insertions(+), 23 deletions(-) diff --git a/src/app/destiny1/loadout-builder/loadout-builder.scss b/src/app/destiny1/loadout-builder/loadout-builder.scss index badd2b458a..b08b2b13e2 100644 --- a/src/app/destiny1/loadout-builder/loadout-builder.scss +++ b/src/app/destiny1/loadout-builder/loadout-builder.scss @@ -374,9 +374,7 @@ $and-color: #814bcf; padding-left: 3px; padding-right: 3px; cursor: pointer; - } - & .perk { @include interactive($hover: true) { background-color: $or-color; } diff --git a/src/app/loadout/loadout-menu/LoadoutPopup.m.scss b/src/app/loadout/loadout-menu/LoadoutPopup.m.scss index 0fe990ea60..ff48f0c47e 100644 --- a/src/app/loadout/loadout-menu/LoadoutPopup.m.scss +++ b/src/app/loadout/loadout-menu/LoadoutPopup.m.scss @@ -27,6 +27,25 @@ a { text-decoration: none; + + @include interactive($hover: true) { + background-color: var(--theme-accent-primary); + color: var(--theme-text-invert) !important; + > span:first-child > :global(.app-icon) { + color: var(--theme-text-invert) !important; + } + > span:first-child > img:first-child, + .modificationIcon { + filter: none; + } + .fashionIcon { + filter: invert(1); + } + + .note { + color: var(--theme-text-invert); + } + } } form { @@ -94,27 +113,6 @@ } } - a { - @include interactive($hover: true) { - background-color: var(--theme-accent-primary); - color: var(--theme-text-invert) !important; - > span:first-child > :global(.app-icon) { - color: var(--theme-text-invert) !important; - } - > span:first-child > img:first-child, - .modificationIcon { - filter: none; - } - .fashionIcon { - filter: invert(1); - } - - .note { - color: var(--theme-text-invert); - } - } - } - > span:not(:first-child) { margin: 6px 4px 6px 4px; padding: 0 6px; From 614622bb661b07c719ea1619fd727e5c547b787e Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 29 Aug 2024 20:27:06 -0400 Subject: [PATCH 6/7] fix: migrate remaining selectors --- src/app/dim-ui/dim-button.scss | 8 +++++--- src/app/records/Record.m.scss | 8 +++++--- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/app/dim-ui/dim-button.scss b/src/app/dim-ui/dim-button.scss index 4b70ae6675..4fe8d90091 100644 --- a/src/app/dim-ui/dim-button.scss +++ b/src/app/dim-ui/dim-button.scss @@ -55,9 +55,11 @@ .dontInvert { filter: invert(0) !important; - :hover &, - :active &, - .selected & { + @include interactive($hover: true, $active: true) { + filter: invert(0) drop-shadow(0 0 1px black) !important; + } + + .selected { filter: invert(0) drop-shadow(0 0 1px black) !important; } } diff --git a/src/app/records/Record.m.scss b/src/app/records/Record.m.scss index c7e01682d9..0e54ef6bef 100644 --- a/src/app/records/Record.m.scss +++ b/src/app/records/Record.m.scss @@ -191,9 +191,11 @@ opacity: 1; top: -10px; } - .triumphRecord:hover & { - display: block; - opacity: 0.7; + .triumphRecord { + @include interactive($hover: true) { + display: block; + opacity: 0.7; + } } } From 831d4f6fa7ca1ec463f07f5e0dac9f834318590d Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 29 Aug 2024 20:27:51 -0400 Subject: [PATCH 7/7] chore: update changelog --- docs/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index f21d2defc3..5ae6af9ba3 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,6 +1,7 @@ ## Next * Fix Organizer sorting behavior for notes, tags, and wishlist notes so that empty values sort along with other values. +* Hover state only applies on supported devices ## 8.34.1 (2024-08-27)