mirror of
https://github.com/openfoodfoundation/openfoodnetwork
synced 2026-01-24 20:36:49 +00:00
e8de76dc46
As before, move imported css to partials to avoid duplication. And use mixin and variable to handle tooltip styling
107 lines
2.0 KiB
SCSS
107 lines
2.0 KiB
SCSS
@import "variables/variables";
|
|
|
|
.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;
|
|
}
|
|
|
|
@mixin joyride-content {
|
|
background-color: $dynamic-blue;
|
|
padding: $padding-small;
|
|
border-radius: $radius-small;
|
|
color: $white;
|
|
width: 100%;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
$joyride-width: 16rem;
|
|
|
|
.joyride-tip-guide.question-mark-tooltip {
|
|
width: $joyride-width;
|
|
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 {
|
|
@include joyride-content;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|