From b48d5fb9c1d58228748833966dd7af09bb2d6164 Mon Sep 17 00:00:00 2001 From: Steven Hancock Date: Fri, 23 Mar 2012 17:02:08 -0700 Subject: [PATCH] Refactor sass/scss stylesheets to use Rails asset helpers Now that sass-rails and the asset pipeline work, we should use the asset helpers Rails gives us rather than hard-coding url("/assets/filename.png") for loading assets from sass/scss stylesheets. --- app/assets/stylesheets/application.css.sass | 10 +++++----- app/assets/stylesheets/autocomplete.css.sass | 2 +- app/assets/stylesheets/mobile.css.scss | 20 +++++++++---------- app/assets/stylesheets/new-templates.css.scss | 4 ++-- app/assets/stylesheets/ui.css.sass | 8 ++++---- 5 files changed, 22 insertions(+), 22 deletions(-) diff --git a/app/assets/stylesheets/application.css.sass b/app/assets/stylesheets/application.css.sass index 06c94a0c8..b41af3712 100644 --- a/app/assets/stylesheets/application.css.sass +++ b/app/assets/stylesheets/application.css.sass @@ -165,7 +165,7 @@ header :background :color rgb(40,35,35) - :image url('/assets/header-bg.png') + :image image-url('header-bg.png') :z-index 1001 :padding 6px 0 @@ -1513,7 +1513,7 @@ ul#landing_nav #diaspora_description :background - :image url('/assets/ball.png') + :image image-url('ball.png') :repeat no-repeat :position top center @@ -1847,7 +1847,7 @@ ul#press_logos :background-color transparent .oembed - :background url('/assets/ajax-loader2.gif') no-repeat center center + :background image-url('ajax-loader2.gif') no-repeat center center :display inline-block :max-width 100% @@ -1856,7 +1856,7 @@ ul#press_logos :cursor pointer .video-overlay - :background url('/assets/video-overlay.png') no-repeat center center + :background image-url('video-overlay.png') no-repeat center center :position absolute :top 0 :left 0 @@ -2276,7 +2276,7 @@ ul.left_nav > a.aspect_selector :background - :image url("/assets/icons/check_yes_ok.png") + :image image-url("icons/check_yes_ok.png") :position 3px 50% :repeat no-repeat diff --git a/app/assets/stylesheets/autocomplete.css.sass b/app/assets/stylesheets/autocomplete.css.sass index d40518ef0..0ac0726af 100644 --- a/app/assets/stylesheets/autocomplete.css.sass +++ b/app/assets/stylesheets/autocomplete.css.sass @@ -41,7 +41,7 @@ :overflow hidden .ac_loading - :background white url('/assets/ajax-loader.gif') right center no-repeat + :background white image-url('ajax-loader.gif') right center no-repeat .ac_odd :background-color #fafafa diff --git a/app/assets/stylesheets/mobile.css.scss b/app/assets/stylesheets/mobile.css.scss index ea1b040fd..6531752fa 100644 --- a/app/assets/stylesheets/mobile.css.scss +++ b/app/assets/stylesheets/mobile.css.scss @@ -12,7 +12,7 @@ a { body { background: { - image: url('/assets/hatched-bg.jpg'); + image: image-url('hatched-bg.jpg'); position: fixed; /* scale background image down for iOS retina display */ size: 200px; @@ -276,7 +276,7 @@ body { @include box-shadow(0,1px,2px,#333); background: { - image: url("/assets/header-bg-long.jpg"); + image: image-url("header-bg-long.jpg"); } width: 100%; @@ -377,7 +377,7 @@ footer { right: 14px; } background: { - image: url("/assets/icons/arrow_down_small.png"); + image: image-url("icons/arrow_down_small.png"); position: center right; repeat: no-repeat; } @@ -460,28 +460,28 @@ footer { left: 5px; }; &.loading { - background-image: url("/assets/mobile-spinner.gif"); + background-image: image-url("mobile-spinner.gif"); } } .reshare_action { - background-image: url("/assets/icons/reshare_mobile.png"); + background-image: image-url("icons/reshare_mobile.png"); &.active { - background-image: url("/assets/icons/reshare_mobile_active.png"); + background-image: image-url("icons/reshare_mobile_active.png"); } } .like_action { - background-image: url("/assets/icons/heart_mobile_grey.png"); + background-image: image-url("icons/heart_mobile_grey.png"); &.active { - background-image: url("/assets/icons/heart_mobile_red.png"); + background-image: image-url("icons/heart_mobile_red.png"); } } .comment_action.image_link { - background-image: url("/assets/icons/pencil_mobile_grey_active.png"); + background-image: image-url("icons/pencil_mobile_grey_active.png"); &.inactive { - background-image: url("/assets/icons/pencil_mobile_grey.png"); + background-image: image-url("icons/pencil_mobile_grey.png"); } } diff --git a/app/assets/stylesheets/new-templates.css.scss b/app/assets/stylesheets/new-templates.css.scss index fe905e1d5..aff58a845 100644 --- a/app/assets/stylesheets/new-templates.css.scss +++ b/app/assets/stylesheets/new-templates.css.scss @@ -87,7 +87,7 @@ $pane-width: 420px; @mixin dark-hatched-bg() { background-color: #444; - background-image: url("/assets/hatched-bg-dark.png"); + background-image: image-url("hatched-bg-dark.png"); } @mixin photo-shadow() { @@ -515,7 +515,7 @@ body.idle { border-top: 1px solid #444; text-align: left; - background-image: url("../images/hatched-bg-dark.png"); + background-image: image-url("hatched-bg-dark.png"); } #new-post-comment-container { diff --git a/app/assets/stylesheets/ui.css.sass b/app/assets/stylesheets/ui.css.sass index a9a449a9c..34da95e4d 100644 --- a/app/assets/stylesheets/ui.css.sass +++ b/app/assets/stylesheets/ui.css.sass @@ -127,25 +127,25 @@ input.button &.selected :background - :image url('/assets/icons/check_yes_ok.png') + :image image-url('icons/check_yes_ok.png') :position 3px 1px :repeat no-repeat &.selected:hover :background - :image url('/assets/icons/check_yes_ok_white.png') + :image image-url('icons/check_yes_ok_white.png') /* bump top position up 1px to compensate for the 1px added top border */ :position 3px 0px &.loading :background - :image url('/assets/ajax-loader.gif') + :image image-url('ajax-loader.gif') :repeat no-repeat :position 4px 2px &.loading:hover :background - :image url('/assets/ajax-loader_inverted.gif') + :image image-url('ajax-loader_inverted.gif') /* bump top position up 1px to compensate for the 1px added top border */ :position 4px 1px