Use new Rails 4 #image-url SCSS helper

Paths should be relative. For example an image under `/app/assets/images/home/banner.jpg` should be: `image-url("home/banner.jpg")`
This commit is contained in:
Matt-Yorkley
2020-06-16 17:48:07 +02:00
parent c370ab04d7
commit c07476e22c
9 changed files with 17 additions and 17 deletions

View File

@@ -7,7 +7,7 @@
@include fullbg;
background-color: black;
background-image: url("/assets/home/tagline-bg.jpg");
background-image: image-url("home/tagline-bg.jpg");
background-repeat: no-repeat;
background-position: center center;
margin-bottom: 2em;

View File

@@ -62,7 +62,7 @@ ordercycle {
}
select {
background-image: url('/assets/white-caret.svg');
background-image: image-url('white-caret.svg');
background-size: 30px auto;
background-position-x: 102%;
}
@@ -147,7 +147,7 @@ shop ordercycle {
select {
background-color: $white;
background-image: url('/assets/black-caret.svg');
background-image: image-url('black-caret.svg');
color: $grey-500;
font-style: italic;
}

View File

@@ -4,7 +4,7 @@
products {
product {
.taxon-flag {
background: transparent url("/assets/flag.svg") top center no-repeat;
background: transparent image-url("flag.svg") top center no-repeat;
background-size: 34px 39px;
min-height: 40px;
width: 34px;

View File

@@ -50,7 +50,7 @@ footer {
width: 100%;
border: 1px solid rgba($dark-grey, 0.35);
background-image: url("/assets/tile-wide.png");
background-image: image-url("tile-wide.png");
background-position: center center;
background-color: #bbb;
padding: 12px 0 8px 0;

View File

@@ -42,7 +42,7 @@
}
#stats.pane {
background-image: url("/assets/home/background-blurred-oranges.jpg");
background-image: image-url("home/background-blurred-oranges.jpg");
background-position: center center;
background-color: $ofn-grey;
@@ -94,7 +94,7 @@
}
.home-icon-box {
background-image: url("/assets/ofn-o.png");
background-image: image-url("ofn-o.png");
background-position: center center;
background-repeat: no-repeat;
background-size: auto 100%;
@@ -121,15 +121,15 @@
background-size: auto 100%;
&.search {
background-image: url("/assets/icon-mask-magnifier.png");
background-image: image-url("icon-mask-magnifier.png");
}
&.shop {
background-image: url("/assets/icon-mask-apple.png");
background-image: image-url("icon-mask-apple.png");
}
&.pick-up-delivery {
background-image: url("/assets/icon-mask-truck.png");
background-image: image-url("icon-mask-truck.png");
}
}
}

View File

@@ -13,7 +13,7 @@
@include fullbg;
background-color: $ofn-grey;
background-image: url("/assets/home/home.jpg");
background-image: image-url("home/home.jpg");
position: fixed;
left: 0;
right: 0;

View File

@@ -5,7 +5,7 @@
// Generic \\
@mixin tiledPane {
background-image: url("/assets/tile-wide.png");
background-image: image-url("tile-wide.png");
background-color: $brand-colour;
background-position: center center;
@@ -236,7 +236,7 @@
@mixin producersbg {
background-color: lighten($clr-turquoise, 68%);
background-image: url("/assets/producers.svg");
background-image: image-url("producers.svg");
background-position: center 50px;
background-repeat: no-repeat;
background-size: 922px 763px;
@@ -244,13 +244,13 @@
@mixin hubsbg {
background-color: $brand-colour;
background-image: url("/assets/hubs-bg.jpg");
background-image: image-url("hubs-bg.jpg");
background-position: center center;
}
@mixin groupsbg {
background-color: lighten($clr-brick, 56%);
background-image: url("/assets/groups.svg");
background-image: image-url("groups.svg");
background-position: center 50px;
background-repeat: no-repeat;
background-size: 922px 922px;

View File

@@ -14,7 +14,7 @@ $page-alert-height: 55px;
border-left: none;
border-right: none;
background-color: #bbb;
background-image: url("/assets/tile-wide.png");
background-image: image-url("tile-wide.png");
background-position: center center;
padding: 12px 0 8px 0;
margin: 0;

View File

@@ -32,7 +32,7 @@
padding: 0 2.25em 0 2.75em;
width: 100%;
min-width: 0;
background: $white url("/assets/icn-search-grey.png") 1em center no-repeat;
background: $white image-url("icn-search-grey.png") 1em center no-repeat;
font-size: 1rem; // avoid zoom on iphone, see issue #4535
&::placeholder {