From 99ea4a63e09cc7511ecf2a6f4d88aecdf08c984f Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 11 Sep 2023 15:29:09 +0200 Subject: [PATCH 1/3] No need to have a button: not conflicting with button styles --- .../templates/shared/question_mark_with_tooltip_icon.html.haml | 2 +- app/webpacker/css/shared/question-mark-icon.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/assets/javascripts/templates/shared/question_mark_with_tooltip_icon.html.haml b/app/assets/javascripts/templates/shared/question_mark_with_tooltip_icon.html.haml index 18ea4c771d..72dafdcc59 100644 --- a/app/assets/javascripts/templates/shared/question_mark_with_tooltip_icon.html.haml +++ b/app/assets/javascripts/templates/shared/question_mark_with_tooltip_icon.html.haml @@ -1 +1 @@ -%button.question-mark-icon{"ng-class" => "{open: tt_isOpen}", type: 'button'} +.question-mark-icon{"ng-class" => "{open: tt_isOpen}", type: 'button'} diff --git a/app/webpacker/css/shared/question-mark-icon.scss b/app/webpacker/css/shared/question-mark-icon.scss index c468d93b1a..e8720d207c 100644 --- a/app/webpacker/css/shared/question-mark-icon.scss +++ b/app/webpacker/css/shared/question-mark-icon.scss @@ -10,6 +10,7 @@ background-size: cover; background-repeat: no-repeat; border-radius: 50%; + cursor: pointer; // Reset button element css attributes padding: 0; From 75751f07b84be183199ab35e1015b118641c43c4 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 11 Sep 2023 15:31:30 +0200 Subject: [PATCH 2/3] Move question-mark-icon into admin_style_v3 context --- app/webpacker/css/admin_v3/all.scss | 2 +- .../admin_v3/shared/question-mark-icon.scss | 98 +++++++++++++++++++ 2 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 app/webpacker/css/admin_v3/shared/question-mark-icon.scss diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss index b6a12acf66..ab285437bf 100644 --- a/app/webpacker/css/admin_v3/all.scss +++ b/app/webpacker/css/admin_v3/all.scss @@ -121,7 +121,7 @@ @import "../admin/variant_overrides"; @import "../admin/welcome"; -@import "../shared/question-mark-icon"; +@import "shared/question-mark-icon"; @import "../admin/question-mark-tooltip"; @import "~tom-select/src/scss/tom-select.default"; diff --git a/app/webpacker/css/admin_v3/shared/question-mark-icon.scss b/app/webpacker/css/admin_v3/shared/question-mark-icon.scss new file mode 100644 index 0000000000..cac93249dd --- /dev/null +++ b/app/webpacker/css/admin_v3/shared/question-mark-icon.scss @@ -0,0 +1,98 @@ +.unit-price { + display: flex; + align-items: center; +} + +.question-mark-icon { + background-image: url("../images/question-mark-icon.svg"); + background-size: cover; + background-repeat: no-repeat; + border-radius: 50%; + cursor: pointer; + + // Reset button element css attributes + padding: 0; + margin: 0; + width: 20px; + min-width: 20px; + height: 20px; + background-color: transparent; + + &:hover, + &:focus { + background-color: transparent; + } + + &.open { + background-image: none; + background-color: $teal-500; + + &:focus { + outline: 0; + } + + &::before { + @include icon-font; + content: ""; + color: $white; + vertical-align: super; + } + } +} + +// Question mark icon into a field +.field .question-mark-icon { + width: 15px; + min-width: 15px; + height: 15px; + margin-left: 2px; +} + +.joyride-tip-guide.question-mark-tooltip { + width: 16rem; + max-width: 65%; + // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS + margin-left: -7.4rem; + margin-top: -0.1rem; + background-color: transparent; + z-index: $modal-zIndex + 1; + + .background { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + cursor: pointer; + } + + .joyride-content-wrapper { + background-color: $dynamic-blue; + padding: $padding-small; + border-radius: $radius-small; + color: $white; + width: 100%; + font-size: 0.8rem; + } + + .joyride-nub.bottom { + // Need to rewrite all with !important as it's marked as !important in the original file + border-color: $dynamic-blue !important; + border-bottom-color: transparent !important; + border-left-color: transparent !important; + border-right-color: transparent !important; + left: 7.4rem; + z-index: -1; + } + + &.cart-sidebar { + // Small size (used in the cart sidebar) + width: 13rem; + margin-left: -10.4rem; + + .joyride-nub.bottom { + left: 10.4rem; + } + } +} From edc6ac801deda7c3b94a624230f6f74866d64d28 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 11 Sep 2023 15:44:08 +0200 Subject: [PATCH 3/3] Use the right colors for the question mark icon tooltip in admin style v3 --- app/webpacker/css/admin_v3/shared/question-mark-icon.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/webpacker/css/admin_v3/shared/question-mark-icon.scss b/app/webpacker/css/admin_v3/shared/question-mark-icon.scss index cac93249dd..9e9d40c893 100644 --- a/app/webpacker/css/admin_v3/shared/question-mark-icon.scss +++ b/app/webpacker/css/admin_v3/shared/question-mark-icon.scss @@ -25,7 +25,7 @@ &.open { background-image: none; - background-color: $teal-500; + background-color: $orient; &:focus { outline: 0; @@ -68,7 +68,7 @@ } .joyride-content-wrapper { - background-color: $dynamic-blue; + background-color: $orient; padding: $padding-small; border-radius: $radius-small; color: $white; @@ -78,7 +78,7 @@ .joyride-nub.bottom { // Need to rewrite all with !important as it's marked as !important in the original file - border-color: $dynamic-blue !important; + border-color: $orient !important; border-bottom-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important;