From 8b33ae6392fc09b0df78f6cebfa671881245a743 Mon Sep 17 00:00:00 2001 From: lublagg Date: Wed, 31 Jan 2024 20:12:46 -0500 Subject: [PATCH] Add hover style to units and frequency toggles. --- src/components/attribute-selector.scss | 5 ++ src/components/date-range/date-range.scss | 65 ++--------------------- 2 files changed, 10 insertions(+), 60 deletions(-) diff --git a/src/components/attribute-selector.scss b/src/components/attribute-selector.scss index 8ffea65..871e274 100644 --- a/src/components/attribute-selector.scss +++ b/src/components/attribute-selector.scss @@ -40,6 +40,11 @@ font-weight: 500; color: #a2a2a2; cursor: pointer; + &:hover { + border-color: rgba(114, 191, 202, 0.25); + background-color: rgba(0, 144, 164, 0.32); + color: #177991; + } &.left { border-radius: 15px 0 0 15px; margin-right: 2px; diff --git a/src/components/date-range/date-range.scss b/src/components/date-range/date-range.scss index 8447197..444c665 100644 --- a/src/components/date-range/date-range.scss +++ b/src/components/date-range/date-range.scss @@ -50,7 +50,11 @@ &.monthly { border-radius: 0 15px 15px 0; } - + &:hover { + border-color: rgba(114, 191, 202, 0.25); + background-color: rgba(0, 144, 164, 0.32); + color: #177991; + } &.selected{ border: solid 1px rgba(114, 191, 202, 0.25); background-color: rgba(114, 191, 202, 0.25); @@ -77,63 +81,4 @@ background-color: #fff; } } - .warning-modal { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - background-color: rgba(0,0,0,0.5); - .warning-container { - width: 340px; - top: 20px; - position: absolute; - left: calc(50% - 170px); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: white; - border-radius: 6px; - .warning-header { - background-color: #ffbf00; - font-weight: bold; - display: flex; - align-items: center; - width: 100%; - border-radius: 6px 6px 0px 0px; - .warning-title { - margin: 0 auto; - } - .warning-exit { - cursor: pointer; - align-self: flex-end; - padding: 5px; - } - } - .warning-body { - padding: 10px; - } - .warning-footer { - display: flex; - flex-direction: row; - justify-content: flex-end; - width: 340px; - padding: 10px; - box-sizing: border-box; - border-radius: 0px 0px 6px 6px; - .warning-button { - cursor: pointer; - border: 1px solid black; - background-color: white; - width: 82px; - height: 30px; - border-radius: 3px; - &:hover { - background-color: $teal-medium; - } - } - } - } - } }