raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-04-04 07:09:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use question mark with tooltip directive

Browse Source 
Needs some css customization due to the use of a button element (instead of a basic span)
This commit is contained in:
Jean-Baptiste Bellet
2021-02-10 09:45:55 +01:00
parent 4be2b42fe1
commit e509925789
2 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml
View File

@@ -9,7 +9,10 @@
"price-breakdown-animation" => true}
{{ variant.price_with_fees | localizeCurrency }}
.variant-unit-price
%span.question-mark-icon
%question-mark-with-tooltip{"question-mark-with-tooltip" => "_",
"question-mark-with-tooltip-append-to-body" => "true",
"question-mark-with-tooltip-placement" => "top",
"question-mark-with-tooltip-animation" => true}
{{ variant.unit_price_price | localizeCurrency }} / {{ variant.unit_price_unit }}
.medium-2.large-2.columns.total-price

17
app/assets/stylesheets/darkswarm/question-mark-icon.scss
View File

@@ -1,6 +1,19 @@
.question-mark-icon {
position: relative;
top: 1px;
// Reset button element css attributes
padding: 0;
margin: 0;
width: 20px;
height: 20px;
background-color: transparent;
&:hover,
&:focus {
background-color: transparent;
}
&::before {
content: "?";
padding-left: 1px;
@@ -10,8 +23,8 @@
border-radius: 50%;
text-align: center;
background-color: $grey-075;
width: 18px;
height: 18px;
width: 20px;
height: 20px;
font-weight: bold;
font-size: 1rem;
}