raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix vertical alignment using flex

Browse Source 
- Firefox displayed the icon above the legend
 - Use `display: flex;` and `align-items: center;` to vertical align icon and text
This commit is contained in:
Jean-Baptiste Bellet
2021-03-01 16:37:27 +01:00
parent 36573701dc
commit d6cf69df34
5 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@
"price-breakdown-placement" => "bottom",
"price-breakdown-animation" => true}
{{ variant.price_with_fees | localizeCurrency }}
.variant-unit-price
.unit-price.variant-unit-price
%question-mark-with-tooltip{"question-mark-with-tooltip" => "_",
"question-mark-with-tooltip-append-to-body" => "true",
"question-mark-with-tooltip-placement" => "top",

4
app/assets/stylesheets/darkswarm/_shop-product-rows.scss
View File

@@ -67,8 +67,10 @@
.variant-unit-price {
color: $grey-700;
font-size: 0.9rem;
font-size: 0.85rem;
margin-top: 15px;
position: relative;
left: -1px;
}
// Total price

1
app/assets/stylesheets/darkswarm/cart-dropdown.scss
View File

@@ -55,7 +55,6 @@
.unit-price {
justify-content: flex-end;
align-items: baseline;
}
}

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

@@ -1,12 +1,20 @@
.unit-price {
display: flex;
align-items: center;
}
.question-mark-icon {
position: relative;
top: 6px;
right: 1px;
background-image: image-url("question-mark-icon.svg");
background-size: cover;
background-repeat: no-repeat;
// Reset button element css attributes
padding: 0;
margin: 0;
width: 20px;
min-width: 20px;
height: 20px;
background-color: transparent;

2
app/views/shared/menu/_cart_sidebar.html.haml
View File

@@ -24,7 +24,7 @@
%td
.total-price.text-right {{ line_item.total_price | localizeCurrency }}
- if feature? :unit_price, spree_current_user
.flex.unit-price
.unit-price
%div{:style => "margin-right: 5px"}
%question-mark-with-tooltip{"question-mark-with-tooltip" => "_",
"question-mark-with-tooltip-append-to-body" => "true",