From 5cb2194f5e6541caf29aabbb579635c9a9a1baae Mon Sep 17 00:00:00 2001 From: Paul Mackay Date: Tue, 10 Jan 2017 11:39:17 +0000 Subject: [PATCH 1/6] #1027: Add sitemap.xml generation --- app/controllers/sitemap_controller.rb | 11 +++++++++++ app/views/sitemap/index.xml.haml | 18 ++++++++++++++++++ config/routes.rb | 2 ++ spec/features/consumer/sitemap_spec.rb | 12 ++++++++++++ 4 files changed, 43 insertions(+) create mode 100644 app/controllers/sitemap_controller.rb create mode 100644 app/views/sitemap/index.xml.haml create mode 100644 spec/features/consumer/sitemap_spec.rb diff --git a/app/controllers/sitemap_controller.rb b/app/controllers/sitemap_controller.rb new file mode 100644 index 0000000000..f5ce44ceca --- /dev/null +++ b/app/controllers/sitemap_controller.rb @@ -0,0 +1,11 @@ +class SitemapController < ApplicationController + layout nil + + def index + headers['Content-Type'] = 'application/xml' + @pages = ['shops', 'map', 'producers', 'groups'] + @enterprises = Enterprise.is_hub + @groups = EnterpriseGroup.all + respond_to :xml + end +end diff --git a/app/views/sitemap/index.xml.haml b/app/views/sitemap/index.xml.haml new file mode 100644 index 0000000000..3c07cc6ebc --- /dev/null +++ b/app/views/sitemap/index.xml.haml @@ -0,0 +1,18 @@ +!!! XML +%urlset{xmlns: "http://www.sitemaps.org/schemas/sitemap/0.9"} + - for page in @pages + %url + %loc= root_url + page + %changefreq monthly + + - for enterprise in @enterprises + %url + %loc= enterprise_shop_url(enterprise) + %lastmod= enterprise.updated_at.strftime('%Y-%m-%d') + %changefreq weekly + + - for group in @groups + %url + %loc= group_url(group) + %lastmod= enterprise.updated_at.strftime('%Y-%m-%d') + %changefreq yearly diff --git a/config/routes.rb b/config/routes.rb index 69319ae84a..607e6308a2 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -169,6 +169,8 @@ Openfoodnetwork::Application.routes.draw do end end + get 'sitemap.xml', to: 'sitemap#index', defaults: { format: 'xml' } + # Mount Spree's routes mount Spree::Core::Engine, :at => '/' diff --git a/spec/features/consumer/sitemap_spec.rb b/spec/features/consumer/sitemap_spec.rb new file mode 100644 index 0000000000..6ec913de32 --- /dev/null +++ b/spec/features/consumer/sitemap_spec.rb @@ -0,0 +1,12 @@ +require 'spec_helper' + +feature 'sitemap' do + let(:enterprise) { create(:distributor_enterprise) } + let!(:group) { create(:enterprise_group, enterprises: [enterprise], on_front_page: true) } + + it "renders sitemap" do + visit '/sitemap.xml' + expect(page).to have_content enterprise_shop_url(enterprise) + expect(page).to have_content group_url(group) + end +end From fc400741b4491d2041ba30d32c0727563fedf2ac Mon Sep 17 00:00:00 2001 From: Paul Mackay Date: Tue, 10 Jan 2017 11:44:57 +0000 Subject: [PATCH 2/6] Remove lastmod for groups --- app/views/sitemap/index.xml.haml | 1 - 1 file changed, 1 deletion(-) diff --git a/app/views/sitemap/index.xml.haml b/app/views/sitemap/index.xml.haml index 3c07cc6ebc..f961b75899 100644 --- a/app/views/sitemap/index.xml.haml +++ b/app/views/sitemap/index.xml.haml @@ -14,5 +14,4 @@ - for group in @groups %url %loc= group_url(group) - %lastmod= enterprise.updated_at.strftime('%Y-%m-%d') %changefreq yearly From d80f080af55997aa2ddfb5ddcda7326f5ac7de1b Mon Sep 17 00:00:00 2001 From: Paul Mackay Date: Thu, 12 Jan 2017 10:18:30 +0000 Subject: [PATCH 3/6] #1027: Use url helpers for basic pages Set groups change frequency to monthly. --- app/controllers/sitemap_controller.rb | 2 +- app/views/sitemap/index.xml.haml | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/controllers/sitemap_controller.rb b/app/controllers/sitemap_controller.rb index f5ce44ceca..103b6e93ee 100644 --- a/app/controllers/sitemap_controller.rb +++ b/app/controllers/sitemap_controller.rb @@ -3,7 +3,7 @@ class SitemapController < ApplicationController def index headers['Content-Type'] = 'application/xml' - @pages = ['shops', 'map', 'producers', 'groups'] + @page_urls = [shops_url, map_url, producers_url, groups_url] @enterprises = Enterprise.is_hub @groups = EnterpriseGroup.all respond_to :xml diff --git a/app/views/sitemap/index.xml.haml b/app/views/sitemap/index.xml.haml index f961b75899..dac6032a15 100644 --- a/app/views/sitemap/index.xml.haml +++ b/app/views/sitemap/index.xml.haml @@ -1,8 +1,8 @@ !!! XML %urlset{xmlns: "http://www.sitemaps.org/schemas/sitemap/0.9"} - - for page in @pages + - for page_url in @page_urls %url - %loc= root_url + page + %loc= page_url %changefreq monthly - for enterprise in @enterprises @@ -14,4 +14,4 @@ - for group in @groups %url %loc= group_url(group) - %changefreq yearly + %changefreq monthly From 651626eb4ffd220f0a2d71cb2f0e8f56b20c541e Mon Sep 17 00:00:00 2001 From: Paul Mackay Date: Sat, 14 Jan 2017 11:47:21 +0000 Subject: [PATCH 4/6] #1365: Remove /test dir as it is not used --- test/fixtures/.gitkeep | 0 test/functional/.gitkeep | 0 test/integration/.gitkeep | 0 test/performance/browsing_test.rb | 12 ------------ test/test_helper.rb | 13 ------------- test/unit/.gitkeep | 0 6 files changed, 25 deletions(-) delete mode 100644 test/fixtures/.gitkeep delete mode 100644 test/functional/.gitkeep delete mode 100644 test/integration/.gitkeep delete mode 100644 test/performance/browsing_test.rb delete mode 100644 test/test_helper.rb delete mode 100644 test/unit/.gitkeep diff --git a/test/fixtures/.gitkeep b/test/fixtures/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/test/functional/.gitkeep b/test/functional/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/test/integration/.gitkeep b/test/integration/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/test/performance/browsing_test.rb b/test/performance/browsing_test.rb deleted file mode 100644 index 3fea27b916..0000000000 --- a/test/performance/browsing_test.rb +++ /dev/null @@ -1,12 +0,0 @@ -require 'test_helper' -require 'rails/performance_test_help' - -class BrowsingTest < ActionDispatch::PerformanceTest - # Refer to the documentation for all available options - # self.profile_options = { :runs => 5, :metrics => [:wall_time, :memory] - # :output => 'tmp/performance', :formats => [:flat] } - - def test_homepage - get '/' - end -end diff --git a/test/test_helper.rb b/test/test_helper.rb deleted file mode 100644 index 7d57a78563..0000000000 --- a/test/test_helper.rb +++ /dev/null @@ -1,13 +0,0 @@ -ENV["RAILS_ENV"] = "test" -require_relative '../config/environment' -require 'rails/test_help' - -class ActiveSupport::TestCase - # Setup all fixtures in test/fixtures/*.(yml|csv) for all tests in alphabetical order. - # - # Note: You'll currently still have to declare fixtures explicitly in integration tests - # -- they do not yet inherit this setting - fixtures :all - - # Add more helper methods to be used by all tests here... -end diff --git a/test/unit/.gitkeep b/test/unit/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 From 02e5ba4dfdefc2500289884a036d6c3c8fc580df Mon Sep 17 00:00:00 2001 From: Paul Mackay Date: Sun, 15 Jan 2017 12:11:53 +0000 Subject: [PATCH 5/6] Convert .sass files to .scss format --- app/assets/stylesheets/admin/alert.css.sass | 15 - app/assets/stylesheets/admin/alert.css.scss | 24 + ...nimations.css.sass => animations.css.scss} | 34 +- .../admin/change_type_form.css.sass | 72 --- .../admin/change_type_form.css.scss | 103 +++++ .../admin/components/save_bar.sass | 14 - .../admin/components/save_bar.scss | 19 + .../admin/components/trial_progess_bar.sass | 9 - .../admin/components/trial_progess_bar.scss | 10 + .../admin/dashboard-single-ent.css.sass | 33 -- .../admin/dashboard-single-ent.css.scss | 45 ++ .../stylesheets/admin/dashboard_item.css.sass | 159 ------- .../stylesheets/admin/dashboard_item.css.scss | 239 ++++++++++ .../stylesheets/admin/relationships.css.sass | 23 - .../stylesheets/admin/relationships.css.scss | 31 ++ .../stylesheets/admin/side_menu.css.sass | 18 - .../stylesheets/admin/side_menu.css.scss | 29 ++ .../stylesheets/admin/sidebar-item.css.sass | 77 ---- .../stylesheets/admin/sidebar-item.css.scss | 121 ++++++ .../admin/variant_overrides.css.sass | 6 - .../admin/variant_overrides.css.scss | 8 + app/assets/stylesheets/admin/welcome.css.sass | 16 - app/assets/stylesheets/admin/welcome.css.scss | 24 + .../darkswarm/_shop-filters.css.sass | 125 ------ .../darkswarm/_shop-filters.css.scss | 173 ++++++++ .../darkswarm/_shop-inputs.css.sass | 85 ---- .../darkswarm/_shop-inputs.css.scss | 102 +++++ .../darkswarm/_shop-modals.css.sass | 6 - .../darkswarm/_shop-modals.css.scss | 9 + .../darkswarm/_shop-popovers.css.sass | 112 ----- .../darkswarm/_shop-popovers.css.scss | 152 +++++++ .../darkswarm/_shop-product-rows.css.sass | 123 ------ .../darkswarm/_shop-product-rows.css.scss | 182 ++++++++ .../darkswarm/_shop-product-thumb.css.sass | 59 --- .../darkswarm/_shop-product-thumb.css.scss | 81 ++++ .../darkswarm/_shop-taxon-flag.css.sass | 31 -- .../darkswarm/_shop-taxon-flag.css.scss | 45 ++ .../stylesheets/darkswarm/account.css.sass | 70 --- .../stylesheets/darkswarm/account.css.scss | 106 +++++ .../darkswarm/active_table.css.sass | 114 ----- .../darkswarm/active_table.css.scss | 160 +++++++ .../darkswarm/active_table_search.css.sass | 117 ----- .../darkswarm/active_table_search.css.scss | 164 +++++++ .../{angular.css.sass => angular.css.scss} | 5 +- .../stylesheets/darkswarm/animations.sass | 217 --------- .../stylesheets/darkswarm/animations.scss | 271 ++++++++++++ .../stylesheets/darkswarm/big-input.sass | 93 ---- .../stylesheets/darkswarm/big-input.scss | 127 ++++++ .../stylesheets/darkswarm/branding.css.sass | 38 -- .../stylesheets/darkswarm/branding.css.scss | 37 ++ app/assets/stylesheets/darkswarm/footer.sass | 78 ---- app/assets/stylesheets/darkswarm/footer.scss | 127 ++++++ .../stylesheets/darkswarm/forms.css.sass | 5 - .../stylesheets/darkswarm/forms.css.scss | 6 + .../stylesheets/darkswarm/groups.css.sass | 108 ----- .../stylesheets/darkswarm/groups.css.scss | 169 ++++++++ .../stylesheets/darkswarm/header.css.sass | 21 - .../stylesheets/darkswarm/header.css.scss | 31 ++ .../stylesheets/darkswarm/home_panes.css.sass | 156 ------- .../stylesheets/darkswarm/home_panes.css.scss | 225 ++++++++++ .../darkswarm/home_tagline.css.sass | 33 -- .../darkswarm/home_tagline.css.scss | 47 ++ .../stylesheets/darkswarm/hub_node.css.sass | 168 ------- .../stylesheets/darkswarm/hub_node.css.scss | 255 +++++++++++ .../stylesheets/darkswarm/hubs.css.sass | 13 - .../stylesheets/darkswarm/hubs.css.scss | 18 + .../stylesheets/darkswarm/ie_warning.sass | 32 -- .../stylesheets/darkswarm/ie_warning.scss | 40 ++ .../stylesheets/darkswarm/images.css.sass | 47 -- .../stylesheets/darkswarm/images.css.scss | 58 +++ .../stylesheets/darkswarm/lists.css.sass | 7 - .../stylesheets/darkswarm/lists.css.scss | 9 + app/assets/stylesheets/darkswarm/loading.sass | 83 ---- app/assets/stylesheets/darkswarm/loading.scss | 106 +++++ app/assets/stylesheets/darkswarm/map.css.sass | 50 --- app/assets/stylesheets/darkswarm/map.css.scss | 64 +++ .../stylesheets/darkswarm/menu.css.sass | 137 ------ .../stylesheets/darkswarm/menu.css.scss | 186 ++++++++ app/assets/stylesheets/darkswarm/mixins.sass | 192 -------- app/assets/stylesheets/darkswarm/mixins.scss | 253 +++++++++++ .../darkswarm/modal-enterprises.css.sass | 165 ------- .../darkswarm/modal-enterprises.css.scss | 212 +++++++++ .../darkswarm/modal-login.css.sass | 13 - .../darkswarm/modal-login.css.scss | 13 + .../stylesheets/darkswarm/modals.css.sass | 54 --- .../stylesheets/darkswarm/modals.css.scss | 64 +++ .../stylesheets/darkswarm/overrides.css.sass | 2 - .../stylesheets/darkswarm/overrides.css.scss | 3 + .../stylesheets/darkswarm/page_alert.css.sass | 58 --- .../stylesheets/darkswarm/page_alert.css.scss | 77 ++++ .../darkswarm/producer_node.css.sass | 97 ----- .../darkswarm/producer_node.css.scss | 145 +++++++ .../stylesheets/darkswarm/producers.css.sass | 14 - .../stylesheets/darkswarm/producers.css.scss | 24 + .../darkswarm/product_table.css.sass | 4 - .../darkswarm/product_table.css.scss | 6 + .../darkswarm/registration.css.sass | 161 ------- .../darkswarm/registration.css.scss | 239 ++++++++++ .../stylesheets/darkswarm/shop.css.sass | 111 ----- .../stylesheets/darkswarm/shop.css.scss | 146 +++++++ .../darkswarm/shopping-cart.css.sass | 70 --- .../darkswarm/shopping-cart.css.scss | 98 +++++ .../stylesheets/darkswarm/sidebar.css.sass | 31 -- .../stylesheets/darkswarm/sidebar.css.scss | 41 ++ .../stylesheets/darkswarm/signup.css.sass | 119 ----- .../stylesheets/darkswarm/signup.css.scss | 188 ++++++++ .../stylesheets/darkswarm/tables.css.sass | 7 - .../stylesheets/darkswarm/tables.css.scss | 10 + .../stylesheets/darkswarm/tabs.css.sass | 110 ----- .../stylesheets/darkswarm/tabs.css.scss | 161 +++++++ .../stylesheets/darkswarm/taxons.css.sass | 52 --- .../stylesheets/darkswarm/taxons.css.scss | 81 ++++ .../stylesheets/darkswarm/typography.css.sass | 125 ------ .../stylesheets/darkswarm/typography.css.scss | 167 +++++++ app/assets/stylesheets/darkswarm/ui.css.sass | 97 ----- app/assets/stylesheets/darkswarm/ui.css.scss | 128 ++++++ .../stylesheets/darkswarm/variables.css.sass | 32 -- .../stylesheets/darkswarm/variables.css.scss | 31 ++ app/assets/stylesheets/mail/email.css.sass | 312 ------------- app/assets/stylesheets/mail/email.css.scss | 410 ++++++++++++++++++ 120 files changed, 6123 insertions(+), 4412 deletions(-) delete mode 100644 app/assets/stylesheets/admin/alert.css.sass create mode 100644 app/assets/stylesheets/admin/alert.css.scss rename app/assets/stylesheets/admin/{animations.css.sass => animations.css.scss} (56%) delete mode 100644 app/assets/stylesheets/admin/change_type_form.css.sass create mode 100644 app/assets/stylesheets/admin/change_type_form.css.scss delete mode 100644 app/assets/stylesheets/admin/components/save_bar.sass create mode 100644 app/assets/stylesheets/admin/components/save_bar.scss delete mode 100644 app/assets/stylesheets/admin/components/trial_progess_bar.sass create mode 100644 app/assets/stylesheets/admin/components/trial_progess_bar.scss delete mode 100644 app/assets/stylesheets/admin/dashboard-single-ent.css.sass create mode 100644 app/assets/stylesheets/admin/dashboard-single-ent.css.scss delete mode 100644 app/assets/stylesheets/admin/dashboard_item.css.sass create mode 100644 app/assets/stylesheets/admin/dashboard_item.css.scss delete mode 100644 app/assets/stylesheets/admin/relationships.css.sass create mode 100644 app/assets/stylesheets/admin/relationships.css.scss delete mode 100644 app/assets/stylesheets/admin/side_menu.css.sass create mode 100644 app/assets/stylesheets/admin/side_menu.css.scss delete mode 100644 app/assets/stylesheets/admin/sidebar-item.css.sass create mode 100644 app/assets/stylesheets/admin/sidebar-item.css.scss delete mode 100644 app/assets/stylesheets/admin/variant_overrides.css.sass create mode 100644 app/assets/stylesheets/admin/variant_overrides.css.scss delete mode 100644 app/assets/stylesheets/admin/welcome.css.sass create mode 100644 app/assets/stylesheets/admin/welcome.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/_shop-filters.css.sass create mode 100644 app/assets/stylesheets/darkswarm/_shop-filters.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/_shop-inputs.css.sass create mode 100644 app/assets/stylesheets/darkswarm/_shop-inputs.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/_shop-modals.css.sass create mode 100644 app/assets/stylesheets/darkswarm/_shop-modals.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/_shop-popovers.css.sass create mode 100644 app/assets/stylesheets/darkswarm/_shop-popovers.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/_shop-product-rows.css.sass create mode 100644 app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/_shop-product-thumb.css.sass create mode 100644 app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.sass create mode 100644 app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/account.css.sass create mode 100644 app/assets/stylesheets/darkswarm/account.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/active_table.css.sass create mode 100644 app/assets/stylesheets/darkswarm/active_table.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/active_table_search.css.sass create mode 100644 app/assets/stylesheets/darkswarm/active_table_search.css.scss rename app/assets/stylesheets/darkswarm/{angular.css.sass => angular.css.scss} (71%) delete mode 100644 app/assets/stylesheets/darkswarm/animations.sass create mode 100644 app/assets/stylesheets/darkswarm/animations.scss delete mode 100644 app/assets/stylesheets/darkswarm/big-input.sass create mode 100644 app/assets/stylesheets/darkswarm/big-input.scss delete mode 100644 app/assets/stylesheets/darkswarm/branding.css.sass create mode 100644 app/assets/stylesheets/darkswarm/branding.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/footer.sass create mode 100644 app/assets/stylesheets/darkswarm/footer.scss delete mode 100644 app/assets/stylesheets/darkswarm/forms.css.sass create mode 100644 app/assets/stylesheets/darkswarm/forms.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/groups.css.sass create mode 100644 app/assets/stylesheets/darkswarm/groups.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/header.css.sass create mode 100644 app/assets/stylesheets/darkswarm/header.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/home_panes.css.sass create mode 100644 app/assets/stylesheets/darkswarm/home_panes.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/home_tagline.css.sass create mode 100644 app/assets/stylesheets/darkswarm/home_tagline.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/hub_node.css.sass create mode 100644 app/assets/stylesheets/darkswarm/hub_node.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/hubs.css.sass create mode 100644 app/assets/stylesheets/darkswarm/hubs.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/ie_warning.sass create mode 100644 app/assets/stylesheets/darkswarm/ie_warning.scss delete mode 100644 app/assets/stylesheets/darkswarm/images.css.sass create mode 100644 app/assets/stylesheets/darkswarm/images.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/lists.css.sass create mode 100644 app/assets/stylesheets/darkswarm/lists.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/loading.sass create mode 100644 app/assets/stylesheets/darkswarm/loading.scss delete mode 100644 app/assets/stylesheets/darkswarm/map.css.sass create mode 100644 app/assets/stylesheets/darkswarm/map.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/menu.css.sass create mode 100644 app/assets/stylesheets/darkswarm/menu.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/mixins.sass create mode 100644 app/assets/stylesheets/darkswarm/mixins.scss delete mode 100644 app/assets/stylesheets/darkswarm/modal-enterprises.css.sass create mode 100644 app/assets/stylesheets/darkswarm/modal-enterprises.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/modal-login.css.sass create mode 100644 app/assets/stylesheets/darkswarm/modal-login.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/modals.css.sass create mode 100644 app/assets/stylesheets/darkswarm/modals.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/overrides.css.sass create mode 100644 app/assets/stylesheets/darkswarm/overrides.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/page_alert.css.sass create mode 100644 app/assets/stylesheets/darkswarm/page_alert.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/producer_node.css.sass create mode 100644 app/assets/stylesheets/darkswarm/producer_node.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/producers.css.sass create mode 100644 app/assets/stylesheets/darkswarm/producers.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/product_table.css.sass create mode 100644 app/assets/stylesheets/darkswarm/product_table.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/registration.css.sass create mode 100644 app/assets/stylesheets/darkswarm/registration.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/shop.css.sass create mode 100644 app/assets/stylesheets/darkswarm/shop.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/shopping-cart.css.sass create mode 100644 app/assets/stylesheets/darkswarm/shopping-cart.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/sidebar.css.sass create mode 100644 app/assets/stylesheets/darkswarm/sidebar.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/signup.css.sass create mode 100644 app/assets/stylesheets/darkswarm/signup.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/tables.css.sass create mode 100644 app/assets/stylesheets/darkswarm/tables.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/tabs.css.sass create mode 100644 app/assets/stylesheets/darkswarm/tabs.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/taxons.css.sass create mode 100644 app/assets/stylesheets/darkswarm/taxons.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/typography.css.sass create mode 100644 app/assets/stylesheets/darkswarm/typography.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/ui.css.sass create mode 100644 app/assets/stylesheets/darkswarm/ui.css.scss delete mode 100644 app/assets/stylesheets/darkswarm/variables.css.sass create mode 100644 app/assets/stylesheets/darkswarm/variables.css.scss delete mode 100644 app/assets/stylesheets/mail/email.css.sass create mode 100644 app/assets/stylesheets/mail/email.css.scss diff --git a/app/assets/stylesheets/admin/alert.css.sass b/app/assets/stylesheets/admin/alert.css.sass deleted file mode 100644 index d86cb38f55..0000000000 --- a/app/assets/stylesheets/admin/alert.css.sass +++ /dev/null @@ -1,15 +0,0 @@ -.alert - border: 3px solid #919191 - border-radius: 6px - margin-bottom: 20px - color: #919191 - padding: 5px 10px - h6 - color: #919191 - .message - font-weight: bold - &:hover - border-color: #DA5354 - color: #DA5354 - h6 - color: #DA5354 diff --git a/app/assets/stylesheets/admin/alert.css.scss b/app/assets/stylesheets/admin/alert.css.scss new file mode 100644 index 0000000000..b516867a96 --- /dev/null +++ b/app/assets/stylesheets/admin/alert.css.scss @@ -0,0 +1,24 @@ +.alert { + border: 3px solid #919191; + border-radius: 6px; + margin-bottom: 20px; + color: #919191; + padding: 5px 10px; + + h6 { + color: #919191; + } + + .message { + font-weight: bold; + } + + &:hover { + border-color: #DA5354; + color: #DA5354; + + h6 { + color: #DA5354; + } + } +} diff --git a/app/assets/stylesheets/admin/animations.css.sass b/app/assets/stylesheets/admin/animations.css.scss similarity index 56% rename from app/assets/stylesheets/admin/animations.css.sass rename to app/assets/stylesheets/admin/animations.css.scss index 88284c7487..bbc766ecfd 100644 --- a/app/assets/stylesheets/admin/animations.css.sass +++ b/app/assets/stylesheets/admin/animations.css.scss @@ -1,10 +1,14 @@ -@-webkit-keyframes slideInUp - 0% - -webkit-transform: translateY(20px) - transform: translateY(20px) - 100% - -webkit-transform: translateY(0) - transform: translateY(0) +@-webkit-keyframes slideInUp { + 0% { + -webkit-transform: translateY(20px); + transform: translateY(20px); + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} // @-webkit-keyframes slideOutDown // 0% @@ -14,13 +18,14 @@ // -webkit-transform: translateY(20px) // transform: translateY(20px) -.animate-show - -webkit-animation-name: slideInUp - animation-name: slideInUp - -webkit-animation-duration: 0.3s - animation-duration: 0.3s - -webkit-animation-fill-mode: both - animation-fill-mode: both +.animate-show { + -webkit-animation-name: slideInUp; + animation-name: slideInUp; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + // line-height: 20px // opacity: 1 @@ -33,3 +38,4 @@ // animation-fill-mode: both // // line-height: 20px // // opacity: 1 +} diff --git a/app/assets/stylesheets/admin/change_type_form.css.sass b/app/assets/stylesheets/admin/change_type_form.css.sass deleted file mode 100644 index bf67f89696..0000000000 --- a/app/assets/stylesheets/admin/change_type_form.css.sass +++ /dev/null @@ -1,72 +0,0 @@ -@import ../darkswarm/branding -@import ../darkswarm/mixins - -#change_type - section - margin: 2em 0 0 0 - &, & * - color: #5498da - - .description - background-color: #eff5fc - margin-top: -2em - padding: 4em 2em 2em 1em - @media all and (max-width: 786px) - margin-bottom: 2em - - .admin-cta - border: 1px solid #5498da - @include border-radius(3px) - text-align: center - padding: 1em - - .error - display: block - color: #f57e80 - border: 1px solid #f57e80 - background-color: #fde6e7 - @include border-radius(3px) - margin-bottom: 1em - padding: 0.5em - - a.selector - position: relative - border: 2px solid black - text-align: center - width: 100% - cursor: pointer - &, & * - color: white - &:after, &:before - top: 100% - left: 50% - border: solid transparent - content: " " - height: 0 - width: 0 - position: absolute - pointer-events: none - &:after - border-color: rgba(136, 183, 213, 0) - border-top-color: #5498da - border-width: 12px - margin-left: -12px - &:hover - &:after - border-top-color: #9fc820 - &:before - border-color: rgba(84, 152, 218, 0) - border-top-color: black - border-width: 15px - margin-left: -15px - .bottom - background: repeating-linear-gradient(60deg, rgba(84, 152, 218, 0), rgba(84, 152, 218, 0) 5px, rgba(255, 255, 255, 0.25) 5px, rgba(255, 255, 255, 0.25) 10px) - margin-top: 1em - margin-left: -15px - margin-right: -15px - padding: 5px - text-transform: uppercase - &.selected - background-color: black - &:after, &:hover &:after - border-top-color: black \ No newline at end of file diff --git a/app/assets/stylesheets/admin/change_type_form.css.scss b/app/assets/stylesheets/admin/change_type_form.css.scss new file mode 100644 index 0000000000..0153d701e8 --- /dev/null +++ b/app/assets/stylesheets/admin/change_type_form.css.scss @@ -0,0 +1,103 @@ +@import "../darkswarm/branding"; +@import "../darkswarm/mixins"; + +#change_type { + section { + margin: 2em 0 0 0; + + &, & * { + color: #5498da; + } + } + + .description { + background-color: #eff5fc; + margin-top: -2em; + padding: 4em 2em 2em 1em; + + @media all and (max-width: 786px) { + margin-bottom: 2em; + } + } + + .admin-cta { + border: 1px solid #5498da; + + @include border-radius(3px); + + text-align: center; + padding: 1em; + } + + .error { + display: block; + color: #f57e80; + border: 1px solid #f57e80; + background-color: #fde6e7; + + @include border-radius(3px); + + margin-bottom: 1em; + padding: 0.5em; + } + + a.selector { + position: relative; + border: 2px solid black; + text-align: center; + width: 100%; + cursor: pointer; + + &, & * { + color: white; + } + + &:after, &:before { + top: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + &:after { + border-color: rgba(136, 183, 213, 0); + border-top-color: #5498da; + border-width: 12px; + margin-left: -12px; + } + + &:hover { + &:after { + border-top-color: #9fc820; + } + } + + &:before { + border-color: rgba(84, 152, 218, 0); + border-top-color: black; + border-width: 15px; + margin-left: -15px; + } + + .bottom { + background: repeating-linear-gradient(60deg, rgba(84, 152, 218, 0), rgba(84, 152, 218, 0) 5px, rgba(255, 255, 255, 0.25) 5px, rgba(255, 255, 255, 0.25) 10px); + margin-top: 1em; + margin-left: -15px; + margin-right: -15px; + padding: 5px; + text-transform: uppercase; + } + + &.selected { + background-color: black; + + &:after, &:hover &:after { + border-top-color: black; + } + } + } +} diff --git a/app/assets/stylesheets/admin/components/save_bar.sass b/app/assets/stylesheets/admin/components/save_bar.sass deleted file mode 100644 index f453c5ddfc..0000000000 --- a/app/assets/stylesheets/admin/components/save_bar.sass +++ /dev/null @@ -1,14 +0,0 @@ -#save-bar - position: fixed - width: 100% - z-index: 100 - bottom: 0px - left: 0 - padding: 8px 8px - font-weight: bold - background-color: #eff5fc - color: #5498da - h5 - color: #5498da - input - margin-right: 5px diff --git a/app/assets/stylesheets/admin/components/save_bar.scss b/app/assets/stylesheets/admin/components/save_bar.scss new file mode 100644 index 0000000000..4b63a50bc8 --- /dev/null +++ b/app/assets/stylesheets/admin/components/save_bar.scss @@ -0,0 +1,19 @@ +#save-bar { + position: fixed; + width: 100%; + z-index: 100; + bottom: 0px; + left: 0; + padding: 8px 8px; + font-weight: bold; + background-color: #eff5fc; + color: #5498da; + + h5 { + color: #5498da; + } + + input { + margin-right: 5px; + } +} diff --git a/app/assets/stylesheets/admin/components/trial_progess_bar.sass b/app/assets/stylesheets/admin/components/trial_progess_bar.sass deleted file mode 100644 index cb6a648273..0000000000 --- a/app/assets/stylesheets/admin/components/trial_progess_bar.sass +++ /dev/null @@ -1,9 +0,0 @@ -#trial_progress_bar - position: fixed - left: 0px - bottom: 0px - width: 100vw - padding: 8px 10px - font-weight: bold - background-color: #5498da - color: white diff --git a/app/assets/stylesheets/admin/components/trial_progess_bar.scss b/app/assets/stylesheets/admin/components/trial_progess_bar.scss new file mode 100644 index 0000000000..049c1f1f3d --- /dev/null +++ b/app/assets/stylesheets/admin/components/trial_progess_bar.scss @@ -0,0 +1,10 @@ +#trial_progress_bar { + position: fixed; + left: 0px; + bottom: 0px; + width: 100vw; + padding: 8px 10px; + font-weight: bold; + background-color: #5498da; + color: white; +} diff --git a/app/assets/stylesheets/admin/dashboard-single-ent.css.sass b/app/assets/stylesheets/admin/dashboard-single-ent.css.sass deleted file mode 100644 index 567999b43d..0000000000 --- a/app/assets/stylesheets/admin/dashboard-single-ent.css.sass +++ /dev/null @@ -1,33 +0,0 @@ -@import ../darkswarm/mixins - -.alert-box - position: relative - display: block - background-color: #eff5dc - border: 1px solid #9fc820 - color: #666 - margin-top: 1em - margin-bottom: 1em - @include border-radius(3px) - transition: opacity 300ms ease-out - padding: 0.77778em 1.33333em 0.77778em 0.77778em - a.close - position: absolute - right: 5px - top: 0px - font-size: 1.5em - - -.dashboard_item.single-ent - .header - padding: 0.77778em 1.33333em 0.77778em 0.77778em - height: auto !important - .list - .button.bottom - width: 100% - -.button.big - width: 100% - font-size: 1rem - @include border-radius(25px) - padding: 15px \ No newline at end of file diff --git a/app/assets/stylesheets/admin/dashboard-single-ent.css.scss b/app/assets/stylesheets/admin/dashboard-single-ent.css.scss new file mode 100644 index 0000000000..b9aca09481 --- /dev/null +++ b/app/assets/stylesheets/admin/dashboard-single-ent.css.scss @@ -0,0 +1,45 @@ +@import "../darkswarm/mixins"; + +.alert-box { + position: relative; + display: block; + background-color: #eff5dc; + border: 1px solid #9fc820; + color: #666; + margin-top: 1em; + margin-bottom: 1em; + + @include border-radius(3px); + + transition: opacity 300ms ease-out; + padding: 0.77778em 1.33333em 0.77778em 0.77778em; + + a.close { + position: absolute; + right: 5px; + top: 0px; + font-size: 1.5em; + } +} + +.dashboard_item.single-ent { + .header { + padding: 0.77778em 1.33333em 0.77778em 0.77778em; + height: auto !important; + } + + .list { + .button.bottom { + width: 100%; + } + } +} + +.button.big { + width: 100%; + font-size: 1rem; + + @include border-radius(25px); + + padding: 15px; +} diff --git a/app/assets/stylesheets/admin/dashboard_item.css.sass b/app/assets/stylesheets/admin/dashboard_item.css.sass deleted file mode 100644 index 4bb4855660..0000000000 --- a/app/assets/stylesheets/admin/dashboard_item.css.sass +++ /dev/null @@ -1,159 +0,0 @@ -div.dashboard_item - margin-bottom: 30px - - .centered - text-align: center - - .text-icon - margin-top: 8px - display: block - font-size: 16px - font-weight: bold - color: #fff - padding: 0px 6px - border-radius: 10px - &.green - background-color: #9fc820 - &.red - background-color: #DA5354 - &.orange - background-color: #DA7F52 - - div.header - height: 50px - border-radius: 6px 6px 0px 0px - border: 1px solid #5498da - position: relative - - a[ofn-with-tip] - position: absolute - right: 5px - bottom: 5px - - &.red - border-color: #DA5354 - border-width: 3px - h3 - color: #DA5354 - - &.orange - border-color: #DA7F52 - border-width: 3px - h3 - color: #DA7F52 - - h3.alpha - height: 100% - padding: 10px 5px 0px 3% - - a - border-radius: 0px 4px 0px 0px - margin-left: 8px - height: 100% - padding: 15px 2px 0px 2px - - .tabs - height: 30px - border: solid #5498da - border-width: 0px 0px 1px 0px - margin-top: 3px - div.dashboard_tab - cursor: pointer - height: 30px - color: #fff - background-color: #5498da - padding: 5px 5px 0px 5px - text-align: center - font-weight: bold - border: solid #5498da - border-width: 1px 1px 0px 1px - &:hover - background-color: #9fc820 - &.selected - color: #5498da - background-color: #fff - - .list - max-height: 250px - overflow-y: auto - overflow-x: hidden - - .list-title - border: solid #5498da - border-width: 0px 1px 0px 1px - span - font-size: 105% - padding: 10px 0px - font-weight: bold - span.alpha - padding: 10px 2px 10px 5% - - .list-item - border: solid #5498da - border-width: 0px 1px 0px 1px - height: 38px - span.alpha - font-weight: bold - margin-left: -3px - padding: 10px 2px 0px 5% - span.omega - padding-right: 13px - margin-right: -3px - text-align: right - .icon-arrow-right - padding-top: 6px - font-size: 20px - .icon-warning-sign - color: #DA7F52 - font-size: 30px - .icon-remove-sign - color: #DA5354 - font-size: 30px - .icon-ok-sign - color: #9fc820 - font-size: 30px - &.orange - color: #DA7F52 - border: solid #DA7F52 - &.red - color: #DA5354 - border: solid #DA5354 - &.orange, &.red - border-width: 0px 3px 0px 3px - &.even - background-color: #fff - &.odd - background-color: #eff5fc - &.even, &.odd - &:hover - color: #ffffff - background-color: #9fc820 - .icon-arrow-right - color: #fff - .icon-remove-sign - color: #fff - .icon-warning-sign - color: #fff - .icon-ok-sign - color: #fff - .text-icon - &.green - color: #9fc820 - background-color: #fff - - a.button - color: #fff - font-size: 110% - font-weight: bold - text-align: center - &.orange - background-color: #DA7F52 - &.blue - background-color: #5498da - &.red - background-color: #DA5354 - &:hover - background-color: #9fc820 - &.bottom - border-radius: 0px 0px 6px 6px - padding: 15px 15px diff --git a/app/assets/stylesheets/admin/dashboard_item.css.scss b/app/assets/stylesheets/admin/dashboard_item.css.scss new file mode 100644 index 0000000000..f314500031 --- /dev/null +++ b/app/assets/stylesheets/admin/dashboard_item.css.scss @@ -0,0 +1,239 @@ +div.dashboard_item { + margin-bottom: 30px; + + .centered { + text-align: center; + } + + .text-icon { + margin-top: 8px; + display: block; + font-size: 16px; + font-weight: bold; + color: #fff; + padding: 0px 6px; + border-radius: 10px; + + &.green { + background-color: #9fc820; + } + + &.red { + background-color: #DA5354; + } + + &.orange { + background-color: #DA7F52; + } + } + + div.header { + height: 50px; + border-radius: 6px 6px 0px 0px; + border: 1px solid #5498da; + position: relative; + + a[ofn-with-tip] { + position: absolute; + right: 5px; + bottom: 5px; + } + + &.red { + border-color: #DA5354; + border-width: 3px; + + h3 { + color: #DA5354; + } + } + + &.orange { + border-color: #DA7F52; + border-width: 3px; + + h3 { + color: #DA7F52; + } + } + + h3.alpha { + height: 100%; + padding: 10px 5px 0px 3%; + } + + a { + border-radius: 0px 4px 0px 0px; + margin-left: 8px; + height: 100%; + padding: 15px 2px 0px 2px; + } + } + + .tabs { + height: 30px; + border: solid #5498da; + border-width: 0px 0px 1px 0px; + margin-top: 3px; + + div.dashboard_tab { + cursor: pointer; + height: 30px; + color: #fff; + background-color: #5498da; + padding: 5px 5px 0px 5px; + text-align: center; + font-weight: bold; + border: solid #5498da; + border-width: 1px 1px 0px 1px; + + &:hover { + background-color: #9fc820; + } + + &.selected { + color: #5498da; + background-color: #fff; + } + } + } + + .list { + max-height: 250px; + overflow-y: auto; + overflow-x: hidden; + } + + .list-title { + border: solid #5498da; + border-width: 0px 1px 0px 1px; + + span { + font-size: 105%; + padding: 10px 0px; + font-weight: bold; + } + + span.alpha { + padding: 10px 2px 10px 5%; + } + } + + .list-item { + border: solid #5498da; + border-width: 0px 1px 0px 1px; + height: 38px; + + span.alpha { + font-weight: bold; + margin-left: -3px; + padding: 10px 2px 0px 5%; + } + + span.omega { + padding-right: 13px; + margin-right: -3px; + text-align: right; + } + + .icon-arrow-right { + padding-top: 6px; + font-size: 20px; + } + + .icon-warning-sign { + color: #DA7F52; + font-size: 30px; + } + + .icon-remove-sign { + color: #DA5354; + font-size: 30px; + } + + .icon-ok-sign { + color: #9fc820; + font-size: 30px; + } + + &.orange { + color: #DA7F52; + border: solid #DA7F52; + } + + &.red { + color: #DA5354; + border: solid #DA5354; + } + + &.orange, &.red { + border-width: 0px 3px 0px 3px; + } + + &.even { + background-color: #fff; + } + + &.odd { + background-color: #eff5fc; + } + + &.even, &.odd { + &:hover { + color: #ffffff; + background-color: #9fc820; + + .icon-arrow-right { + color: #fff; + } + + .icon-remove-sign { + color: #fff; + } + + .icon-warning-sign { + color: #fff; + } + + .icon-ok-sign { + color: #fff; + } + + .text-icon { + &.green { + color: #9fc820; + background-color: #fff; + } + } + } + } + } + + a.button { + color: #fff; + font-size: 110%; + font-weight: bold; + text-align: center; + + &.orange { + background-color: #DA7F52; + } + + &.blue { + background-color: #5498da; + } + + &.red { + background-color: #DA5354; + } + + &:hover { + background-color: #9fc820; + } + + &.bottom { + border-radius: 0px 0px 6px 6px; + padding: 15px 15px; + } + } +} diff --git a/app/assets/stylesheets/admin/relationships.css.sass b/app/assets/stylesheets/admin/relationships.css.sass deleted file mode 100644 index a5b8879125..0000000000 --- a/app/assets/stylesheets/admin/relationships.css.sass +++ /dev/null @@ -1,23 +0,0 @@ -// TODO: Provide -moz- and -o- directives -@-webkit-keyframes alert-flash - 0% - background-color: #f9f1ae - - 100% - background-color: #fff - - -table#enterprise-relationships, table#enterprise-roles - ul - list-style-type: none - - th.actions, td.actions - width: 16% - .errors - color: #f00 - - tr.ng-enter - -webkit-animation-name: alert-flash - -webkit-animation-duration: 1200ms - -webkit-animation-iteration-count: 1 - -webkit-animation-timing-function: ease-in-out diff --git a/app/assets/stylesheets/admin/relationships.css.scss b/app/assets/stylesheets/admin/relationships.css.scss new file mode 100644 index 0000000000..103da85e47 --- /dev/null +++ b/app/assets/stylesheets/admin/relationships.css.scss @@ -0,0 +1,31 @@ +// TODO: Provide -moz- and -o- directives +@-webkit-keyframes alert-flash { + 0% { + background-color: #f9f1ae; + } + + 100% { + background-color: #fff; + } +} + +table#enterprise-relationships, table#enterprise-roles { + ul { + list-style-type: none; + } + + th.actions, td.actions { + width: 16%; + + .errors { + color: #f00; + } + } + + tr.ng-enter { + -webkit-animation-name: alert-flash; + -webkit-animation-duration: 1200ms; + -webkit-animation-iteration-count: 1; + -webkit-animation-timing-function: ease-in-out; + } +} diff --git a/app/assets/stylesheets/admin/side_menu.css.sass b/app/assets/stylesheets/admin/side_menu.css.sass deleted file mode 100644 index c218cfbcf0..0000000000 --- a/app/assets/stylesheets/admin/side_menu.css.sass +++ /dev/null @@ -1,18 +0,0 @@ -.side_menu - border-right: 2px solid #f6f6f6 - border-top: 2px solid #f6f6f6 - .menu_item - display: block - padding: 8px 15px - font-size: 120% - cursor: pointer - text-transform: uppercase - &:nth-child(odd) - background-color: #ebf3fb - &:nth-child(even) - background-color: #ffffff - &:hover - background-color: #eaf0f5 - &.selected - background-color: #5498da - color: #ffffff diff --git a/app/assets/stylesheets/admin/side_menu.css.scss b/app/assets/stylesheets/admin/side_menu.css.scss new file mode 100644 index 0000000000..921b9dee52 --- /dev/null +++ b/app/assets/stylesheets/admin/side_menu.css.scss @@ -0,0 +1,29 @@ +.side_menu { + border-right: 2px solid #f6f6f6; + border-top: 2px solid #f6f6f6; + + .menu_item { + display: block; + padding: 8px 15px; + font-size: 120%; + cursor: pointer; + text-transform: uppercase; + + &:nth-child(odd) { + background-color: #ebf3fb; + } + + &:nth-child(even) { + background-color: #ffffff; + } + + &:hover { + background-color: #eaf0f5; + } + + &.selected { + background-color: #5498da; + color: #ffffff; + } + } +} diff --git a/app/assets/stylesheets/admin/sidebar-item.css.sass b/app/assets/stylesheets/admin/sidebar-item.css.sass deleted file mode 100644 index d25d43ab29..0000000000 --- a/app/assets/stylesheets/admin/sidebar-item.css.sass +++ /dev/null @@ -1,77 +0,0 @@ -div.sidebar_item - margin-bottom: 30px - - .centered - text-align: center - - div.header - font-size: 105% - color: #fff - padding: 10px 0px - position: relative - &.blue - background-color: #5498da - &.red - background-color: #DA5354 - - .list - max-height: 400px - overflow-y: auto - overflow-x: hidden - &.red - color: #DA5354 - .list-item - border: solid #DA5354 - border-width: 0px 3px 0px 3px - a.alpha, span.alpha - margin-left: -3px - &.odd - background-color: #fcf6ef - &:hover - background-color: #9fc820 - a - color: #DA5354 - - .list-item - .icon-arrow-right - padding-top: 6px - font-size: 20px - border: solid #5498da - border-width: 0px 1px 0px 1px - a.alpha, span.alpha - font-weight: bold - margin-left: -1px - padding: 10px 2px 10px 5% - overflow: hidden - text-overflow: ellipsis - span.omega - padding: 8px 18px 8px 0px - margin-right: -3px - text-align: right - .icon-remove-sign - color: #DA5354 - font-size: 18px - &.even - background-color: #fff - &.odd - background-color: #eff5fc - &.even, &.odd - &:hover - color: #ffffff - background-color: #9fc820 - a - color: #ffffff - - a.button - color: #fff - padding: 15px 15px - font-weight: bold - text-align: center - border-radius: 0px - &.blue - background-color: #5498da - &.red - background-color: #DA5354 - &:hover - background-color: #9fc820 - diff --git a/app/assets/stylesheets/admin/sidebar-item.css.scss b/app/assets/stylesheets/admin/sidebar-item.css.scss new file mode 100644 index 0000000000..a3baa7b6e0 --- /dev/null +++ b/app/assets/stylesheets/admin/sidebar-item.css.scss @@ -0,0 +1,121 @@ +div.sidebar_item { + margin-bottom: 30px; + + .centered { + text-align: center; + } + + div.header { + font-size: 105%; + color: #fff; + padding: 10px 0px; + position: relative; + + &.blue { + background-color: #5498da; + } + + &.red { + background-color: #DA5354; + } + } + + .list { + max-height: 400px; + overflow-y: auto; + overflow-x: hidden; + + &.red { + color: #DA5354; + + .list-item { + border: solid #DA5354; + border-width: 0px 3px 0px 3px; + + a.alpha, span.alpha { + margin-left: -3px; + } + + &.odd { + background-color: #fcf6ef; + + &:hover { + background-color: #9fc820; + } + } + } + + a { + color: #DA5354; + } + } + } + + .list-item { + .icon-arrow-right { + padding-top: 6px; + font-size: 20px; + } + + border: solid #5498da; + border-width: 0px 1px 0px 1px; + + a.alpha, span.alpha { + font-weight: bold; + margin-left: -1px; + padding: 10px 2px 10px 5%; + overflow: hidden; + text-overflow: ellipsis; + } + + span.omega { + padding: 8px 18px 8px 0px; + margin-right: -3px; + text-align: right; + } + + .icon-remove-sign { + color: #DA5354; + font-size: 18px; + } + + &.even { + background-color: #fff; + } + + &.odd { + background-color: #eff5fc; + } + + &.even, &.odd { + &:hover { + color: #ffffff; + background-color: #9fc820; + + a { + color: #ffffff; + } + } + } + } + + a.button { + color: #fff; + padding: 15px 15px; + font-weight: bold; + text-align: center; + border-radius: 0px; + + &.blue { + background-color: #5498da; + } + + &.red { + background-color: #DA5354; + } + + &:hover { + background-color: #9fc820; + } + } +} diff --git a/app/assets/stylesheets/admin/variant_overrides.css.sass b/app/assets/stylesheets/admin/variant_overrides.css.sass deleted file mode 100644 index 0488c1d56b..0000000000 --- a/app/assets/stylesheets/admin/variant_overrides.css.sass +++ /dev/null @@ -1,6 +0,0 @@ -.variant-override-unit - float: right - font-style: italic - -button.hide:hover - background-color: #DA5354 diff --git a/app/assets/stylesheets/admin/variant_overrides.css.scss b/app/assets/stylesheets/admin/variant_overrides.css.scss new file mode 100644 index 0000000000..d4e3e4aaac --- /dev/null +++ b/app/assets/stylesheets/admin/variant_overrides.css.scss @@ -0,0 +1,8 @@ +.variant-override-unit { + float: right; + font-style: italic; +} + +button.hide:hover { + background-color: #DA5354; +} diff --git a/app/assets/stylesheets/admin/welcome.css.sass b/app/assets/stylesheets/admin/welcome.css.sass deleted file mode 100644 index 5d14fc1436..0000000000 --- a/app/assets/stylesheets/admin/welcome.css.sass +++ /dev/null @@ -1,16 +0,0 @@ -@import ../darkswarm/mixins - -#welcome_page - header - text-align: center - padding: 4em 2em - @include fullbg - background-image: url('/assets/home/tagline-bg.jpg') - background-repeat: no-repeat - background-position: center center - margin-bottom: 2em - p - text-transform: uppercase - font-weight: 300 - &, & * - color: white diff --git a/app/assets/stylesheets/admin/welcome.css.scss b/app/assets/stylesheets/admin/welcome.css.scss new file mode 100644 index 0000000000..fe31a07396 --- /dev/null +++ b/app/assets/stylesheets/admin/welcome.css.scss @@ -0,0 +1,24 @@ +@import "../darkswarm/mixins"; + +#welcome_page { + header { + text-align: center; + padding: 4em 2em; + + @include fullbg; + + background-image: url("/assets/home/tagline-bg.jpg"); + background-repeat: no-repeat; + background-position: center center; + margin-bottom: 2em; + + p { + text-transform: uppercase; + font-weight: 300; + } + + &, & * { + color: white; + } + } +} diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.css.sass b/app/assets/stylesheets/darkswarm/_shop-filters.css.sass deleted file mode 100644 index 07fea7a0b1..0000000000 --- a/app/assets/stylesheets/darkswarm/_shop-filters.css.sass +++ /dev/null @@ -1,125 +0,0 @@ -@import mixins -@import branding -@import big-input -@import animations - -@mixin filter-selector($base-clr, $border-clr, $hover-clr) - &.inline-block, ul.inline-block - display: inline-block - - li - display: inline-block - @include border-radius(0) - padding: 0 - margin: 0 0 0.25rem 0.25rem - &:hover, &:focus - background: transparent - &.active - box-shadow: none - - a, a.button - display: block - padding-top: 0.5rem - @include border-radius(0.5em) - border: 1px solid $border-clr - padding: 0.5em 0.625em - font-size: 0.875em - color: $base-clr - font-size: 0.75em - background: white - margin: 0 - i - padding-left: 0.25rem - - render-svg - &, & svg - width: 1rem - height: 1rem - float: left - padding-right: 0.25rem - path - @include csstrans - fill: $base-clr - - &:hover, &:focus - border-color: $hover-clr - color: $hover-clr - render-svg - svg - path - fill: $hover-clr - - &.disabled - opacity: 0.6 - - &:hover, &:focus - border-color: $border-clr - color: $base-clr - render-svg - svg - path - fill: $base-clr - - - &.active, &.active:hover, &.active:focus - border: 1px solid $base-clr - background: $base-clr - color: white - render-svg - svg - path - fill: white - - -// Alert when search, taxon, filter is triggered - -.alert-box.search-alert - background-color: $clr-yellow-light - border-color: $clr-yellow-light - color: #777 - font-size: 0.75rem - padding: 0.5rem 0.75rem - - span.applied-properties - color: #333 - - span.applied-taxons - color: $clr-blue - - span.applied-search - color: $clr-brick - - span.filter-label - opacity: 0.75 - -// singleLineSelectors directive provides a drop-down that can overlap -// content. Ensure that the dropdown appears above the content. -.filter-row - position: relative - z-index: 90 - -.filter-shopfront - &.taxon-selectors, &.property-selectors - background: transparent - - single-line-selectors - overflow-x: hidden - white-space: nowrap - - .f-dropdown - overflow-x: auto - white-space: normal - - ul - margin: 0 - display: inline-block - ul, ul li - list-style: none - - // Shopfront taxons - &.taxon-selectors - @include filter-selector($clr-blue, $clr-blue-light, $clr-blue-bright) - - // Shopfront properties - &.property-selectors - @include filter-selector(#666, #ccc, #777) diff --git a/app/assets/stylesheets/darkswarm/_shop-filters.css.scss b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss new file mode 100644 index 0000000000..16bca77cbc --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-filters.css.scss @@ -0,0 +1,173 @@ +@import "mixins"; +@import "branding"; +@import "big-input"; +@import "animations"; + +@mixin filter-selector($base-clr, $border-clr, $hover-clr) { + &.inline-block, ul.inline-block { + display: inline-block; + } + + li { + display: inline-block; + + @include border-radius(0); + + padding: 0; + margin: 0 0 0.25rem 0.25rem; + + &:hover, &:focus { + background: transparent; + } + + &.active { + box-shadow: none; + } + + a, a.button { + display: block; + padding-top: 0.5rem; + + @include border-radius(0.5em); + + border: 1px solid $border-clr; + padding: 0.5em 0.625em; + font-size: 0.875em; + color: $base-clr; + font-size: 0.75em; + background: white; + margin: 0; + + i { + padding-left: 0.25rem; + } + + render-svg { + &, & svg { + width: 1rem; + height: 1rem; + float: left; + padding-right: 0.25rem; + + path { + @include csstrans; + + fill: $base-clr; + } + } + } + + &:hover, &:focus { + border-color: $hover-clr; + color: $hover-clr; + + render-svg { + svg { + path { + fill: $hover-clr; + } + } + } + } + + &.disabled { + opacity: 0.6; + + &:hover, &:focus { + border-color: $border-clr; + color: $base-clr; + + render-svg { + svg { + path { + fill: $base-clr; + } + } + } + } + } + + &.active, &.active:hover, &.active:focus { + border: 1px solid $base-clr; + background: $base-clr; + color: white; + + render-svg { + svg { + path { + fill: white; + } + } + } + } + } + } +} + +// Alert when search, taxon, filter is triggered + +.alert-box.search-alert { + background-color: $clr-yellow-light; + border-color: $clr-yellow-light; + color: #777; + font-size: 0.75rem; + padding: 0.5rem 0.75rem; + + span.applied-properties { + color: #333; + } + + span.applied-taxons { + color: $clr-blue; + } + + span.applied-search { + color: $clr-brick; + } + + span.filter-label { + opacity: 0.75; + } +} + +// singleLineSelectors directive provides a drop-down that can overlap +// content. Ensure that the dropdown appears above the content. +.filter-row { + position: relative; + z-index: 90; +} + +.filter-shopfront { + &.taxon-selectors, &.property-selectors { + background: transparent; + + single-line-selectors { + overflow-x: hidden; + white-space: nowrap; + + .f-dropdown { + overflow-x: auto; + white-space: normal; + } + } + + ul { + margin: 0; + display: inline-block; + } + + ul, ul li { + list-style: none; + } + } + + // Shopfront taxons + &.taxon-selectors { + @include filter-selector($clr-blue, $clr-blue-light, $clr-blue-bright); + } + + // Shopfront properties + &.property-selectors { + @include filter-selector(#666, #ccc, #777); + } +} diff --git a/app/assets/stylesheets/darkswarm/_shop-inputs.css.sass b/app/assets/stylesheets/darkswarm/_shop-inputs.css.sass deleted file mode 100644 index b191913020..0000000000 --- a/app/assets/stylesheets/darkswarm/_shop-inputs.css.sass +++ /dev/null @@ -1,85 +0,0 @@ -@import mixins -@import variables -@import branding -@import big-input - - -.darkswarm - // #search - @include placeholder(rgba(0,0,0,0.4), #777) - - input#search - @include medium-input(rgba(0,0,0,0.3), #777, $clr-brick) - - // ordering - product - - input - @include border-radius(0) - @include csstrans - margin: 0 - width: 10rem - display: inline - @include box-shadow(none) - border-color: #b3b3b3 - text-align: right - - @media all and (max-width: 1024px) - width: 8rem - - @media all and (max-width: 768px) - width: 7rem - - @media all and (max-width: 640px) - float: left !important - font-size: 0.75rem - padding-left: 0.25rem - padding-right: 0.25rem - - @media all and (max-width: 480px) - width: 5.8rem - - &:hover - @include box-shadow(none) - border-color: #888 - background-color: #fafafa - - &:active, &:focus, &.active - @include box-shadow(none) - background-color: #f9f4b9 - border-color: #666 - - - // BULK - - input.bulk - width: 5rem - - @media all and (max-width: 1024px) - width: 4rem - - @media all and (max-width: 768px) - width: 3.5rem - - @media all and (max-width: 480px) - width: 2.8rem - - input.bulk.first - border-right: 0 - - input.bulk.second - border-left: 0 - - .bulk-input-container - float: right - - @media all and (max-width: 640px) - float: left !important - - .bulk-input - float: left - - - - - diff --git a/app/assets/stylesheets/darkswarm/_shop-inputs.css.scss b/app/assets/stylesheets/darkswarm/_shop-inputs.css.scss new file mode 100644 index 0000000000..55f3309477 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-inputs.css.scss @@ -0,0 +1,102 @@ +@import "mixins"; +@import "variables"; +@import "branding"; +@import "big-input"; + +.darkswarm { + // #search + @include placeholder(rgba(0, 0, 0, 0.4), #777); + + input#search { + @include medium-input(rgba(0, 0, 0, 0.3), #777, $clr-brick); + } + + // ordering + product { + input { + @include border-radius(0); + + @include csstrans; + + margin: 0; + width: 10rem; + display: inline; + + @include box-shadow(none); + + border-color: #b3b3b3; + text-align: right; + + @media all and (max-width: 1024px) { + width: 8rem; + } + + @media all and (max-width: 768px) { + width: 7rem; + } + + @media all and (max-width: 640px) { + float: left !important; + font-size: 0.75rem; + padding-left: 0.25rem; + padding-right: 0.25rem; + } + + @media all and (max-width: 480px) { + width: 5.8rem; + } + + &:hover { + @include box-shadow(none); + + border-color: #888; + background-color: #fafafa; + } + + &:active, &:focus, &.active { + @include box-shadow(none); + + background-color: #f9f4b9; + border-color: #666; + } + } + + // BULK + + input.bulk { + width: 5rem; + + @media all and (max-width: 1024px) { + width: 4rem; + } + + @media all and (max-width: 768px) { + width: 3.5rem; + } + + @media all and (max-width: 480px) { + width: 2.8rem; + } + } + + input.bulk.first { + border-right: 0; + } + + input.bulk.second { + border-left: 0; + } + + .bulk-input-container { + float: right; + + @media all and (max-width: 640px) { + float: left !important; + } + + .bulk-input { + float: left; + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/_shop-modals.css.sass b/app/assets/stylesheets/darkswarm/_shop-modals.css.sass deleted file mode 100644 index 405c1bc701..0000000000 --- a/app/assets/stylesheets/darkswarm/_shop-modals.css.sass +++ /dev/null @@ -1,6 +0,0 @@ - -.product-header - h1, h2, h3, h4, h5, h6 - margin: 0 - hr - margin: 0.5em 0 \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/_shop-modals.css.scss b/app/assets/stylesheets/darkswarm/_shop-modals.css.scss new file mode 100644 index 0000000000..6215e22c9f --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-modals.css.scss @@ -0,0 +1,9 @@ +.product-header { + h1, h2, h3, h4, h5, h6 { + margin: 0; + } + + hr { + margin: 0.5em 0; + } +} diff --git a/app/assets/stylesheets/darkswarm/_shop-popovers.css.sass b/app/assets/stylesheets/darkswarm/_shop-popovers.css.sass deleted file mode 100644 index 38b77dd756..0000000000 --- a/app/assets/stylesheets/darkswarm/_shop-popovers.css.sass +++ /dev/null @@ -1,112 +0,0 @@ -@import mixins -@import branding - -// .darkswarm -// product - -ordercycle - .joyride-tip-guide - background-color: $clr-brick - .joyride-nub.right - border-color: $clr-brick !important - border-top-color: transparent !important - border-right-color: transparent !important - border-bottom-color: transparent !important - p - margin: 0 - font-weight: 700 - -// Pop over -// Foundation overrides -.joyride-tip-guide.price_breakdown - // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS - background-color: #999 - color: #1f1f1f - margin-left: -8px - @include box-shadow(0 1px 2px 0 rgba(0,0,0,0.7)) - - .joyride-content-wrapper - padding: 1.125rem 1.25rem 1.5rem - padding: 1rem - margin: 1% - width: 98% - background-color: white - - h1, h2, h3, h4, h5, h6 - color: #1f1f1f - - .joyride-nub.right - top: 38px - border-color: #999 !important - border-top-color: transparent !important - border-right-color: transparent !important - border-bottom-color: transparent !important - - .progress - background-color: #13bf85 - padding: 0 - border: none - color: white - font-size: 0.75rem - font-style: oblique - line-height: 1 - height: auto - .right - padding: 0.5rem 0.25rem 0 0 - .meter - background-color: #0b8c61 - padding: 0.5rem 0.25rem - border-right: 1px solid #539f92 - - .expanded - ul, li - list-style: none - margin: 0 - font-size: 0.875rem - li - background-color: #13bf85 - padding: 0 0.25rem - margin-bottom: 2px - color: white - li.cost - background-color: #0b8c61 - li:last-child - margin-bottom: 0.75rem - - -button.graph-button - // z-index: 9999999 - border: 1px solid transparent - padding: 0 - margin: 0 - display: inline - background-color: rgba(255,255,255,0.5) - padding: 4px - @include box-shadow(none) - @include border-radius(999rem) - &:before - @include icon-font - content: '\e639' - color: #999 - &:focus - border: 1px solid #e0e0e0 - background-color: rgba(255,255,255,1) - &:before - color: #666 - &:hover, &:active - background-color: rgba(255,255,255,1) - border: 1px solid transparent - &:before - color: $clr-brick-bright - @media all and (max-width: 768px) - // Hide for small - display: none - -button.graph-button.open - border: 1px solid transparent - background-color: $clr-brick-bright - &:before - content: '\e608' - color: white - - diff --git a/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss b/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss new file mode 100644 index 0000000000..92bfa84a30 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss @@ -0,0 +1,152 @@ +@import "mixins"; +@import "branding"; + +// .darkswarm +// product + +ordercycle { + .joyride-tip-guide { + background-color: $clr-brick; + + .joyride-nub.right { + border-color: $clr-brick !important; + border-top-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + } + + p { + margin: 0; + font-weight: 700; + } + } +} + +// Pop over +// Foundation overrides +.joyride-tip-guide.price_breakdown { + // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS + background-color: #999; + color: #1f1f1f; + margin-left: -8px; + + @include box-shadow(0 1px 2px 0 rgba(0, 0, 0, 0.7)); + + .joyride-content-wrapper { + padding: 1.125rem 1.25rem 1.5rem; + padding: 1rem; + margin: 1%; + width: 98%; + background-color: white; + } + + h1, h2, h3, h4, h5, h6 { + color: #1f1f1f; + } + + .joyride-nub.right { + top: 38px; + border-color: #999 !important; + border-top-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + } + + .progress { + background-color: #13bf85; + padding: 0; + border: none; + color: white; + font-size: 0.75rem; + font-style: oblique; + line-height: 1; + height: auto; + + .right { + padding: 0.5rem 0.25rem 0 0; + } + + .meter { + background-color: #0b8c61; + padding: 0.5rem 0.25rem; + border-right: 1px solid #539f92; + } + } + + .expanded { + ul, li { + list-style: none; + margin: 0; + font-size: 0.875rem; + } + + li { + background-color: #13bf85; + padding: 0 0.25rem; + margin-bottom: 2px; + color: white; + } + + li.cost { + background-color: #0b8c61; + } + + li:last-child { + margin-bottom: 0.75rem; + } + } +} + +button.graph-button { + // z-index: 9999999 + border: 1px solid transparent; + padding: 0; + margin: 0; + display: inline; + background-color: rgba(255, 255, 255, 0.5); + padding: 4px; + + @include box-shadow(none); + + @include border-radius(999rem); + + &:before { + @include icon-font; + + content: ""; + color: #999; + } + + &:focus { + border: 1px solid #e0e0e0; + background-color: rgba(255, 255, 255, 1); + + &:before { + color: #666; + } + } + + &:hover, &:active { + background-color: rgba(255, 255, 255, 1); + border: 1px solid transparent; + + &:before { + color: $clr-brick-bright; + } + } + + @media all and (max-width: 768px) { + // Hide for small + display: none; + } +} + +button.graph-button.open { + border: 1px solid transparent; + background-color: $clr-brick-bright; + + &:before { + content: ""; + color: white; + } +} diff --git a/app/assets/stylesheets/darkswarm/_shop-product-rows.css.sass b/app/assets/stylesheets/darkswarm/_shop-product-rows.css.sass deleted file mode 100644 index c0e4fb27aa..0000000000 --- a/app/assets/stylesheets/darkswarm/_shop-product-rows.css.sass +++ /dev/null @@ -1,123 +0,0 @@ -@import branding.css.sass -@import animations.sass - -.darkswarm - products - product - // GENERAL LAYOUT - .row - .columns - padding-top: 0em - padding-bottom: 0em - display: table - line-height: 1.1 - // outline: 1px solid red - - @media all and (max-width: 768px) - font-size: 0.875rem - - @media all and (max-width: 640px) - font-size: 0.75rem - - .table-cell - display: table-cell - vertical-align: middle - height: 37px - - // ROW VARIANTS - .row.variants - margin-left: 0 - margin-right: 0 - background-color: #ECECEC - &:hover, &:focus, &:active - background-color: $clr-brick-light - &:nth-of-type(even) - background-color: #f9f9f9 - &:hover, &:focus, &:active - background-color: $clr-brick-ultra-light - - &.out-of-stock - opacity: 0.2 - - // Variant name - .variant-name - padding-left: 7.9375rem - @media all and (max-width: 768px) - padding-left: 4.9375rem - - .variant-name - @media all and (max-width: 640px) - background: #333 - color: white - padding-left: 0.9375rem - font-weight: bold - .table-cell - height: 27px - - // Variant unit - .variant-unit - padding-left: 0rem - padding-right: 0rem - color: #888 - font-size: 0.875rem - overflow: hidden - - @media all and (max-width: 768px) - font-size: 0.75rem - - // Variant price - .variant-price - padding-left: 0.25rem - padding-right: 0.25rem - @media all and (max-width: 640px) - text-align: right - - // Total price - .total-price - padding-left: 0rem - color: $disabled-med - .filled - color: $med-drk-grey - @media all and (max-width: 640px) - background: #777 - color: $disabled-med - .filled - color: white - .table-cell - height: 27px - - // ROW SUMMARY - .row.summary - margin-left: 0 - margin-right: 0 - background: #fff - - .columns - padding-top: 1em - padding-bottom: 1em - line-height: 1 - - @media all and (max-width: 768px) - padding-top: 0.65rem - padding-bottom: 0.65rem - - .summary-header - padding-left: 7.9375rem - @media all and (max-width: 768px) - padding-left: 4.9375rem - @media all and (max-width: 640px) - padding-left: 0.9375rem - small - font-size: 80% - h3 - font-size: 1.5rem - margin: 0 - h3 a - color: #222 - i - @include csstrans - font-size: 0.6em - &:hover, &:focus, &:active - color: $clr-brick - i - font-size: 0.8em diff --git a/app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss b/app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss new file mode 100644 index 0000000000..d98457cd73 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-product-rows.css.scss @@ -0,0 +1,182 @@ +@import "branding"; +@import "animations"; + +.darkswarm { + products { + product { + // GENERAL LAYOUT + .row { + .columns { + padding-top: 0em; + padding-bottom: 0em; + display: table; + line-height: 1.1; + + // outline: 1px solid red + + @media all and (max-width: 768px) { + font-size: 0.875rem; + } + + @media all and (max-width: 640px) { + font-size: 0.75rem; + } + } + + .table-cell { + display: table-cell; + vertical-align: middle; + height: 37px; + } + } + + // ROW VARIANTS + .row.variants { + margin-left: 0; + margin-right: 0; + background-color: #ECECEC; + + &:hover, &:focus, &:active { + background-color: $clr-brick-light; + } + + &:nth-of-type(even) { + background-color: #f9f9f9; + + &:hover, &:focus, &:active { + background-color: $clr-brick-ultra-light; + } + } + + &.out-of-stock { + opacity: 0.2; + } + + // Variant name + .variant-name { + padding-left: 7.9375rem; + + @media all and (max-width: 768px) { + padding-left: 4.9375rem; + } + } + + .variant-name { + @media all and (max-width: 640px) { + background: #333; + color: white; + padding-left: 0.9375rem; + font-weight: bold; + + .table-cell { + height: 27px; + } + } + } + + // Variant unit + .variant-unit { + padding-left: 0rem; + padding-right: 0rem; + color: #888; + font-size: 0.875rem; + overflow: hidden; + + @media all and (max-width: 768px) { + font-size: 0.75rem; + } + } + + // Variant price + .variant-price { + padding-left: 0.25rem; + padding-right: 0.25rem; + + @media all and (max-width: 640px) { + text-align: right; + } + } + + // Total price + .total-price { + padding-left: 0rem; + color: $disabled-med; + + .filled { + color: $med-drk-grey; + } + + @media all and (max-width: 640px) { + background: #777; + color: $disabled-med; + + .filled { + color: white; + } + + .table-cell { + height: 27px; + } + } + } + } + + // ROW SUMMARY + .row.summary { + margin-left: 0; + margin-right: 0; + background: #fff; + + .columns { + padding-top: 1em; + padding-bottom: 1em; + line-height: 1; + + @media all and (max-width: 768px) { + padding-top: 0.65rem; + padding-bottom: 0.65rem; + } + } + + .summary-header { + padding-left: 7.9375rem; + + @media all and (max-width: 768px) { + padding-left: 4.9375rem; + } + + @media all and (max-width: 640px) { + padding-left: 0.9375rem; + } + + small { + font-size: 80%; + } + + h3 { + font-size: 1.5rem; + margin: 0; + } + + h3 a { + color: #222; + + i { + @include csstrans; + + font-size: 0.6em; + } + + &:hover, &:focus, &:active { + color: $clr-brick; + + i { + font-size: 0.8em; + } + } + } + } + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.sass b/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.sass deleted file mode 100644 index 701e8005b0..0000000000 --- a/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.sass +++ /dev/null @@ -1,59 +0,0 @@ -@import branding -@import animations.sass - -.darkswarm - products - product - .product-thumb - @include csstrans - position: absolute - top: 2px - left: 0px - width: 7rem - height: 7rem - float: left - display: block - z-index: 1 - background-color: white - overflow: hidden - i - @include csstrans - transition-delay: 150ms - position: absolute - left: 45% - top: 45% - z-index: 99999 - color: white - font-size: 1rem - opacity: 0 - img - @include csstrans - opacity: 1 - @include transform-scale(scale(1)) - - &:hover, &:focus, &:active - background-color: $clr-brick - i - left: 32% - top: 30% - font-size: 3rem - opacity: 1 - img - opacity: 0.5 - @include transform-scale(scale(1.1)) - - @media all and (max-width: 768px) - top: 2px - width: 4rem - height: 4rem - &:hover, &:focus, &:active - i - left: 30% - top: 30% - font-size: 2rem - @media all and (max-width: 640px) - display: none - width: 0rem - height: 0rem - - diff --git a/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss b/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss new file mode 100644 index 0000000000..8a75467c9c --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-product-thumb.css.scss @@ -0,0 +1,81 @@ +@import "branding"; +@import "animations"; + +.darkswarm { + products { + product { + .product-thumb { + @include csstrans; + + position: absolute; + top: 2px; + left: 0px; + width: 7rem; + height: 7rem; + float: left; + display: block; + z-index: 1; + background-color: white; + overflow: hidden; + + i { + @include csstrans; + + transition-delay: 150ms; + position: absolute; + left: 45%; + top: 45%; + z-index: 99999; + color: white; + font-size: 1rem; + opacity: 0; + } + + img { + @include csstrans; + + opacity: 1; + + @include transform-scale(scale(1)); + } + + &:hover, &:focus, &:active { + background-color: $clr-brick; + + i { + left: 32%; + top: 30%; + font-size: 3rem; + opacity: 1; + } + + img { + opacity: 0.5; + + @include transform-scale(scale(1.1)); + } + } + + @media all and (max-width: 768px) { + top: 2px; + width: 4rem; + height: 4rem; + + &:hover, &:focus, &:active { + i { + left: 30%; + top: 30%; + font-size: 2rem; + } + } + } + + @media all and (max-width: 640px) { + display: none; + width: 0rem; + height: 0rem; + } + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.sass b/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.sass deleted file mode 100644 index 7a6b04cbc2..0000000000 --- a/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.sass +++ /dev/null @@ -1,31 +0,0 @@ -.darkswarm - products - product - .taxon-flag - background: transparent url("/assets/flag.svg") top center no-repeat - background-size: 34px 39px - min-height: 40px - width: 34px - margin-top: -1.1rem - padding-top: 0.25rem - z-index: 999999 - @media all and (max-width: 480px) - background-size: 28px 32px - min-height: 32px - width: 28px - - render-svg - svg - width: 24px - height: 24px - path - fill: #999 - - @media all and (max-width: 768px) - margin-top: -0.85rem - - @media all and (max-width: 480px) - render-svg - svg - width: 18px - height: 18px diff --git a/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss b/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss new file mode 100644 index 0000000000..6a2c993600 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss @@ -0,0 +1,45 @@ +.darkswarm { + products { + product { + .taxon-flag { + background: transparent url("/assets/flag.svg") top center no-repeat; + background-size: 34px 39px; + min-height: 40px; + width: 34px; + margin-top: -1.1rem; + padding-top: 0.25rem; + z-index: 999999; + + @media all and (max-width: 480px) { + background-size: 28px 32px; + min-height: 32px; + width: 28px; + } + + render-svg { + svg { + width: 24px; + height: 24px; + + path { + fill: #999; + } + } + } + + @media all and (max-width: 768px) { + margin-top: -0.85rem; + } + + @media all and (max-width: 480px) { + render-svg { + svg { + width: 18px; + height: 18px; + } + } + } + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/account.css.sass b/app/assets/stylesheets/darkswarm/account.css.sass deleted file mode 100644 index 0f3de5af57..0000000000 --- a/app/assets/stylesheets/darkswarm/account.css.sass +++ /dev/null @@ -1,70 +0,0 @@ -@import branding -@import mixins - -.orders - @include sidepaddingSm - @include panepadding - padding-top: 10px - - h3 - padding-top: 2em - - a - color: $clr-brick - &:hover, &:active, &:focus - color: $clr-brick-med-bright - - img - display: block - width: 80px - height: auto - - i.ofn-i_059-producer, i.ofn-i_060-producer-reversed - font-size: 3rem - display: inline-block - margin-right: 0.25rem - float: left - color: $clr-turquoise - - .credit - color: green - - .debit - color: $clr-brick - - .invalid - color: $ofn-grey - .credit - color: $ofn-grey - .debit - color: $ofn-grey - - .distributor-balance.paid - visibility: hidden - - .transaction-group - - - table - border-radius: 0.5em 0.5em 0 0 - tr:nth-of-type(even) - background: transparent // clear previous - tbody.odd - tr - background-color: #f9f9f9 - border: none - // Column widths for order table - .order1 - width: 20% - .order2 - width: 20% - .order3 - width: 20% - .order4 - width: 10% - .order5 - width: 10% - .order6 - width: 10% - .order7 - width: 10% diff --git a/app/assets/stylesheets/darkswarm/account.css.scss b/app/assets/stylesheets/darkswarm/account.css.scss new file mode 100644 index 0000000000..0d44ea1eaa --- /dev/null +++ b/app/assets/stylesheets/darkswarm/account.css.scss @@ -0,0 +1,106 @@ +@import "branding"; +@import "mixins"; + +.orders { + @include sidepaddingSm; + + @include panepadding; + + padding-top: 10px; + + h3 { + padding-top: 2em; + } + + a { + color: $clr-brick; + + &:hover, &:active, &:focus { + color: $clr-brick-med-bright; + } + } + + img { + display: block; + width: 80px; + height: auto; + } + + i.ofn-i_059-producer, i.ofn-i_060-producer-reversed { + font-size: 3rem; + display: inline-block; + margin-right: 0.25rem; + float: left; + color: $clr-turquoise; + } + + .credit { + color: green; + } + + .debit { + color: $clr-brick; + } + + .invalid { + color: $ofn-grey; + + .credit { + color: $ofn-grey; + } + + .debit { + color: $ofn-grey; + } + } + + .distributor-balance.paid { + visibility: hidden; + } + + .transaction-group {} + + table { + border-radius: 0.5em 0.5em 0 0; + + tr:nth-of-type(even) { + background: transparent; + } + + tbody.odd { + tr { + background-color: #f9f9f9; + border: none; + } + } + } + + // Column widths for order table + .order1 { + width: 20%; + } + + .order2 { + width: 20%; + } + + .order3 { + width: 20%; + } + + .order4 { + width: 10%; + } + + .order5 { + width: 10%; + } + + .order6 { + width: 10%; + } + + .order7 { + width: 10%; + } +} diff --git a/app/assets/stylesheets/darkswarm/active_table.css.sass b/app/assets/stylesheets/darkswarm/active_table.css.sass deleted file mode 100644 index b8280d22ca..0000000000 --- a/app/assets/stylesheets/darkswarm/active_table.css.sass +++ /dev/null @@ -1,114 +0,0 @@ -@import branding -@import mixins -@import "compass/css3/user-interface" - - -.no-results - font-size: 1.875rem - -.active_table - margin: 2em 0em - @include user-select(none) - .active_table_row - display: block - cursor: pointer - &:first-child - padding: 1rem 0 - -.active_table .active_table_node - margin-top: 0.25rem - display: block - border: 0 - - @media all and (max-width: 640px) - margin-bottom: 1rem - - //Generic text link style - a:hover, a:active, a:focus - color: $dark-grey - span - text-decoration: underline - - span.margin-top - margin-top: 0.5rem - display: inline-block - - // Generic text resize - @media all and (max-width: 640px) - &, & * - font-size: 0.875rem - fat > div label - &, & * - font-size: 0.75rem - - // Inherits from active_table - .active_table_row - border: 1px solid transparent - @include border-radius(0.5em) - - // Foundation overrides - margin-left: 0 - margin-right: 0 - - &, & > a.row - display: block - - .active_table_row.link - border: 0 - - &.open - // .active_table_row:nth-child(2) - - .active_table_row - border-left: 1px solid $disabled-bright - border-right: 1px solid $disabled-bright - border-top: 0 - border-bottom: 0 - @include border-radius(0) - - .active_table_row:first-child - border-top: 1px solid $disabled-bright - color: $dark-grey - @include border-radius-mixed(0.5em, 0.5em, 0, 0) - &:hover, &:active, &:focus - // color: $dark-grey - - .active_table_row:last-child - border-bottom: 1px solid $disabled-bright - @include border-radius-mixed(0, 0, 0.5em, 0.5em) - - - //Open row sections - .fat > div - border-top: 1px solid #aaa - @media all and (max-width: 640px) - margin-top: 1em - - ul, ol - font-size: 0.875rem - - [class*="block-grid-"] > li - padding-bottom: 0.25rem !important - - label - text-transform: uppercase - font-size: 0.75rem - margin-top: 0.25rem - margin-bottom: 0.25rem - color: #777 - - p.trans-sentence - text-transform: capitalize - - &.closed - &:hover, &:active, &:focus - .active_table_row.closed - border: 1px solid $disabled-bright - - &.current - &.closed - &, & * - color: $dark-grey - &.open - .active_table_row:first-child - color: $dark-grey diff --git a/app/assets/stylesheets/darkswarm/active_table.css.scss b/app/assets/stylesheets/darkswarm/active_table.css.scss new file mode 100644 index 0000000000..e343eb07d9 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/active_table.css.scss @@ -0,0 +1,160 @@ +@import "branding"; +@import "mixins"; +@import "compass/css3/user-interface"; + +.no-results { + font-size: 1.875rem; +} + +.active_table { + margin: 2em 0em; + + @include user-select(none); + + .active_table_row { + display: block; + cursor: pointer; + + &:first-child { + padding: 1rem 0; + } + } +} + +.active_table .active_table_node { + margin-top: 0.25rem; + display: block; + border: 0; + + @media all and (max-width: 640px) { + margin-bottom: 1rem; + } + + //Generic text link style + a:hover, a:active, a:focus { + color: $dark-grey; + + span { + text-decoration: underline; + } + } + + span.margin-top { + margin-top: 0.5rem; + display: inline-block; + } + + // Generic text resize + @media all and (max-width: 640px) { + &, & * { + font-size: 0.875rem; + } + + fat > div label { + &, & * { + font-size: 0.75rem; + } + } + } + + // Inherits from active_table + .active_table_row { + border: 1px solid transparent; + + @include border-radius(0.5em); + + // Foundation overrides + margin-left: 0; + margin-right: 0; + + &, & > a.row { + display: block; + } + } + + .active_table_row.link { + border: 0; + } + + &.open { + // .active_table_row:nth-child(2) + + .active_table_row { + border-left: 1px solid $disabled-bright; + border-right: 1px solid $disabled-bright; + border-top: 0; + border-bottom: 0; + + @include border-radius(0); + } + + .active_table_row:first-child { + border-top: 1px solid $disabled-bright; + color: $dark-grey; + + @include border-radius-mixed(0.5em, 0.5em, 0, 0); + + &:hover, &:active, &:focus { + // color: $dark-grey + + } + } + + .active_table_row:last-child { + border-bottom: 1px solid $disabled-bright; + + @include border-radius-mixed(0, 0, 0.5em, 0.5em); + } + + //Open row sections + .fat > div { + border-top: 1px solid #aaa; + + @media all and (max-width: 640px) { + margin-top: 1em; + } + + ul, ol { + font-size: 0.875rem; + } + + [class*="block-grid-"] > li { + padding-bottom: 0.25rem !important; + } + + label { + text-transform: uppercase; + font-size: 0.75rem; + margin-top: 0.25rem; + margin-bottom: 0.25rem; + color: #777; + } + } + + p.trans-sentence { + text-transform: capitalize; + } + } + + &.closed { + &:hover, &:active, &:focus { + .active_table_row.closed { + border: 1px solid $disabled-bright; + } + } + } + + &.current { + &.closed { + &, & * { + color: $dark-grey; + } + } + + &.open { + .active_table_row:first-child { + color: $dark-grey; + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/active_table_search.css.sass b/app/assets/stylesheets/darkswarm/active_table_search.css.sass deleted file mode 100644 index 49981895d0..0000000000 --- a/app/assets/stylesheets/darkswarm/active_table_search.css.sass +++ /dev/null @@ -1,117 +0,0 @@ -@import mixins -@import branding -@import big-input -@import animations - -// Filter-box -.row .row.filter-box - margin-left: 0 - margin-right: 0 - -.row.filter-box:first-child - border: 1px solid $clr-blue-light - @include border-radius(0.25em) - margin-top: 2px - @media all and (max-width: 640px) - margin-bottom: 1em - -.row.filter-box.clear-filters - background: transparent - margin-top: 1em - -products .filter-box - background: #f7f7f7 - -.filter-box - background: rgba(245,245,245,0.6) - .tdhead - padding: 0.25rem 0.5rem - margin-top: 0.9rem - color: $clr-blue - border-bottom: 1px solid $clr-blue-light - - // OVERRIDES - [class*="block-grid-"] - margin: 0 0 0.5rem 0 - [class*="block-grid-"] > li - padding-bottom: 0.5rem !important - - li - @include border-radius(12px) - padding-top: 0.5rem - margin-bottom: 0.25rem - &:hover, &:focus - background: rgba(255,255,255,0.25) - li.active - background: white - @include box-shadow(inset 0 1px 3px 0 rgba(143,48,29,0.5)) - - li.active a - color: $clr-brick - render-svg - svg - path - fill: $clr-brick - &:hover, &:focus - border-color: $clr-brick-bright - - li a - @include csstrans - display: table - table-layout: fixed - text-transform: capitalize - overflow: visible - line-height: 1 - color: $med-drk-grey - font-size: 0.875rem - span - display: table-cell - vertical-align: middle - text-align: left - i - display: block - font-size: 1.5rem - margin: 0 0.2rem 0 0 - - &:hover, &:focus - color: $clr-brick-bright - - render-svg - svg - path - fill: $clr-brick-bright - - &:active, &.active - color: $clr-brick - render-svg - svg - path - fill: $clr-brick - - render-svg - display: block - width: 1.5rem - height: 1.5rem - margin: 0 0.2rem 0 0 - padding: 0 - svg - width: 1.5rem - height: 1.5rem - path - fill: #666 - -.button.filterbtn - margin-bottom: 0 !important - min-width: 160px - -#active-table-search - position: relative - @include placeholder(rgba(0,0,0,0.4), #777) - input[type="text"] - @include big-input(rgba(0,0,0,0.3), #777, $clr-brick) - - - - - - diff --git a/app/assets/stylesheets/darkswarm/active_table_search.css.scss b/app/assets/stylesheets/darkswarm/active_table_search.css.scss new file mode 100644 index 0000000000..4159126538 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/active_table_search.css.scss @@ -0,0 +1,164 @@ +@import "mixins"; +@import "branding"; +@import "big-input"; +@import "animations"; + +// Filter-box +.row .row.filter-box { + margin-left: 0; + margin-right: 0; +} + +.row.filter-box:first-child { + border: 1px solid $clr-blue-light; + + @include border-radius(0.25em); + + margin-top: 2px; + + @media all and (max-width: 640px) { + margin-bottom: 1em; + } +} + +.row.filter-box.clear-filters { + background: transparent; + margin-top: 1em; +} + +products .filter-box { + background: #f7f7f7; +} + +.filter-box { + background: rgba(245, 245, 245, 0.6); + + .tdhead { + padding: 0.25rem 0.5rem; + margin-top: 0.9rem; + color: $clr-blue; + border-bottom: 1px solid $clr-blue-light; + } + + // OVERRIDES + [class*="block-grid-"] { + margin: 0 0 0.5rem 0; + } + + [class*="block-grid-"] > li { + padding-bottom: 0.5rem !important; + } + + li { + @include border-radius(12px); + + padding-top: 0.5rem; + margin-bottom: 0.25rem; + + &:hover, &:focus { + background: rgba(255, 255, 255, 0.25); + } + } + + li.active { + background: white; + + @include box-shadow(inset 0 1px 3px 0 rgba(143, 48, 29, 0.5)); + } + + li.active a { + color: $clr-brick; + + render-svg { + svg { + path { + fill: $clr-brick; + } + } + } + + &:hover, &:focus { + border-color: $clr-brick-bright; + } + } + + li a { + @include csstrans; + + display: table; + table-layout: fixed; + text-transform: capitalize; + overflow: visible; + line-height: 1; + color: $med-drk-grey; + font-size: 0.875rem; + + span { + display: table-cell; + vertical-align: middle; + text-align: left; + } + + i { + display: block; + font-size: 1.5rem; + margin: 0 0.2rem 0 0; + } + + &:hover, &:focus { + color: $clr-brick-bright; + + render-svg { + svg { + path { + fill: $clr-brick-bright; + } + } + } + } + + &:active, &.active { + color: $clr-brick; + + render-svg { + svg { + path { + fill: $clr-brick; + } + } + } + } + + render-svg { + display: block; + width: 1.5rem; + height: 1.5rem; + margin: 0 0.2rem 0 0; + padding: 0; + + svg { + width: 1.5rem; + height: 1.5rem; + + path { + fill: #666; + } + } + } + } +} + +.button.filterbtn { + margin-bottom: 0 !important; + min-width: 160px; +} + +#active-table-search { + position: relative; + + @include placeholder(rgba(0, 0, 0, 0.4), #777); + + input[type="text"] { + @include big-input(rgba(0, 0, 0, 0.3), #777, $clr-brick); + } +} diff --git a/app/assets/stylesheets/darkswarm/angular.css.sass b/app/assets/stylesheets/darkswarm/angular.css.scss similarity index 71% rename from app/assets/stylesheets/darkswarm/angular.css.sass rename to app/assets/stylesheets/darkswarm/angular.css.scss index 0430dd1390..bbb1d61c40 100644 --- a/app/assets/stylesheets/darkswarm/angular.css.sass +++ b/app/assets/stylesheets/darkswarm/angular.css.scss @@ -1,3 +1,4 @@ // https://docs.angularjs.org/api/ng/directive/ngCloak -[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak - display: none !important +[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { + display: none !important; +} diff --git a/app/assets/stylesheets/darkswarm/animations.sass b/app/assets/stylesheets/darkswarm/animations.sass deleted file mode 100644 index d452b69d39..0000000000 --- a/app/assets/stylesheets/darkswarm/animations.sass +++ /dev/null @@ -1,217 +0,0 @@ -@import mixins - -// ANIMATION FUNCTIONS - - -// -@-webkit-keyframes slideInDown - 0% - opacity: 0 - -webkit-transform: translateY(-20px) - transform: translateY(-20px) - 100% - -webkit-transform: translateY(0) - transform: translateY(0) - -@keyframes slideInDown - 0% - opacity: 0 - -webkit-transform: translateY(-20px) - -ms-transform: translateY(-20px) - transform: translateY(-20px) - 100% - -webkit-transform: translateY(0) - -ms-transform: translateY(0) - transform: translateY(0) - - - -@-webkit-keyframes slideOutUp - 0% - -webkit-transform: translateY(0) - transform: translateY(0) - 100% - opacity: 0 - -webkit-transform: translateY(-20px) - transform: translateY(-20px) - - -@keyframes slideOutUp - 0% - -webkit-transform: translateY(0) - -ms-transform: translateY(0) - transform: translateY(0) - -@-webkit-keyframes fadeIn - 0% - opacity: 0 - 100% - opacity: 1 - - -@keyframes fadeIn - 0% - opacity: 0 - 100% - opacity: 1 - -@-webkit-keyframes spin - 0% - -webkit-transform: rotate(0deg) - transform: rotate(0deg) - 100% - -webkit-transform: rotate(359deg) - transform: rotate(359deg) -@keyframes spin - 0% - -webkit-transform: rotate(0deg) - transform: rotate(0deg) - 100% - -webkit-transform: rotate(359deg) - transform: rotate(359deg) - -// ANIMATION CLASSES - -.fade - opacity: 0 - -webkit-transition: opacity .15s linear - transition: opacity .15s linear - -.fade.in - opacity: 1 - -.reveal-modal.fade - -webkit-transition: -webkit-transform .2s ease-out - -moz-transition: -moz-transform .2s ease-out - -o-transition: -o-transform .2s ease-out - transition: transform .2s ease-out - -webkit-transform: translate(0, -25%) - -ms-transform: translate(0, -25%) - transform: translate(0, -25%) - -.reveal-modal.in - -webkit-transform: translate(0, 0) - -ms-transform: translate(0, 0) - transform: translate(0, 0) - -.reveal-modal-bg.fade - filter: alpha(opacity = 0) - opacity: 0 - -.reveal-modal-bg.in - filter: alpha(opacity = 50) - opacity: .5 - - -.animate-repeat - &.ng-move, &.ng-enter, &.ng-leave - -webkit-transition: all 300ms linear - transition: all 300ms linear - - &.ng-leave - opacity: 1 - &.ng-leave-active - opacity: 0 - - &.ng-enter - opacity: 0 - &.ng-enter-active - opacity: 1 - -product.animate-repeat - &.ng-leave - border-color: rgba(153, 153, 153, 1) - &.ng-leave-active - border-color: rgba(153, 153, 153, 0) - - &.ng-enter - border-color: rgba(153, 153, 153, 0) - &.ng-enter-active - border-color: rgba(153, 153, 153, 1) - -.animate-show - -webkit-animation-name: slideInDown - animation-name: slideInDown - -webkit-animation-duration: 0.5s - animation-duration: 0.5s - -webkit-animation-fill-mode: both - animation-fill-mode: both - // line-height: 20px - // opacity: 1 - -.animate-show.ng-hide-add, -.animate-show.ng-hide-remove - // display: block !important - -.animate-show.ng-hide - -webkit-animation-name: slideOutUp - animation-name: slideOutUp - -webkit-animation-duration: 0.15s - animation-duration: 0.15s - -webkit-animation-fill-mode: both - animation-fill-mode: both - // line-height: 0 - // opacity: 0 - // padding: 0 10px - -.row.animate-show ~ .row - -webkit-animation-name: fadeIn - animation-name: fadeIn - -webkit-animation-duration: 0.5s - animation-duration: 0.5s - -webkit-animation-fill-mode: both - animation-fill-mode: both - -// - -.animate-slide - max-height: 500px - opacity: 1 !important - -webkit-transition: all 300ms ease-in-out - -moz-transition: all 300ms ease-in-out - -o-transition: all 300ms ease-in-out - transition: all 300ms ease-in-out - - &.ng-hide - overflow: hidden - max-height: 0 - opacity: 0 !important - - // &.ng-hide-add-active, &.ng-hide-remove-active - - &.ng-hide-add, &.ng-hide-remove - /* IMPORTANT: this needs to be here to make it visible during the animation - since the .ng-hide class is already on the element rendering - it as hidden. */ - display: block !important - - -.animate-show - opacity: 1 !important - -webkit-transition: all 300ms ease-in-out - -moz-transition: all 300ms ease-in-out - -o-transition: all 300ms ease-in-out - transition: all 300ms ease-in-out - - &.ng-hide - opacity: 0 !important - - // &.ng-hide-add-active, &.ng-hide-remove-active - - &.ng-hide-add, &.ng-hide-remove - /* IMPORTANT: this needs to be here to make it visible during the animation - since the .ng-hide class is already on the element rendering - it as hidden. */ - display: block !important - - - - - -@mixin csstrans - -webkit-transition: all 300ms ease - -moz-transition: all 300ms ease - -ms-transition: all 300ms ease - -o-transition: all 300ms ease - transition: all 300ms ease - -webkit-transform-style: preserve-3d diff --git a/app/assets/stylesheets/darkswarm/animations.scss b/app/assets/stylesheets/darkswarm/animations.scss new file mode 100644 index 0000000000..f9c7c1967f --- /dev/null +++ b/app/assets/stylesheets/darkswarm/animations.scss @@ -0,0 +1,271 @@ +@import "mixins"; + +// ANIMATION FUNCTIONS + +// +@-webkit-keyframes slideInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } + + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes slideInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + -ms-transform: translateY(-20px); + transform: translateY(-20px); + } + + 100% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} + +@-webkit-keyframes slideOutUp { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 100% { + opacity: 0; + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } +} + +@keyframes slideOutUp { + 0% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } +} + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} + +@keyframes spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} + +// ANIMATION CLASSES + +.fade { + opacity: 0; + -webkit-transition: opacity 0.15s linear; + transition: opacity 0.15s linear; +} + +.fade.in { + opacity: 1; +} + +.reveal-modal.fade { + -webkit-transition: -webkit-transform 0.2s ease-out; + -moz-transition: -moz-transform 0.2s ease-out; + -o-transition: -o-transform 0.2s ease-out; + transition: transform 0.2s ease-out; + -webkit-transform: translate(0, -25%); + -ms-transform: translate(0, -25%); + transform: translate(0, -25%); +} + +.reveal-modal.in { + -webkit-transform: translate(0, 0); + -ms-transform: translate(0, 0); + transform: translate(0, 0); +} + +.reveal-modal-bg.fade { + filter: alpha(opacity = 0); + opacity: 0; +} + +.reveal-modal-bg.in { + filter: alpha(opacity = 50); + opacity: 0.5; +} + +.animate-repeat { + &.ng-move, &.ng-enter, &.ng-leave { + -webkit-transition: all 300ms linear; + transition: all 300ms linear; + } + + &.ng-leave { + opacity: 1; + + &.ng-leave-active { + opacity: 0; + } + } + + &.ng-enter { + opacity: 0; + + &.ng-enter-active { + opacity: 1; + } + } +} + +product.animate-repeat { + &.ng-leave { + border-color: rgba(153, 153, 153, 1); + + &.ng-leave-active { + border-color: rgba(153, 153, 153, 0); + } + } + + &.ng-enter { + border-color: rgba(153, 153, 153, 0); + + &.ng-enter-active { + border-color: rgba(153, 153, 153, 1); + } + } +} + +.animate-show { + -webkit-animation-name: slideInDown; + animation-name: slideInDown; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + + // line-height: 20px + // opacity: 1 +} + +.animate-show.ng-hide-add, +.animate-show.ng-hide-remove { + // display: block !important +} + +.animate-show.ng-hide { + -webkit-animation-name: slideOutUp; + animation-name: slideOutUp; + -webkit-animation-duration: 0.15s; + animation-duration: 0.15s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + + // line-height: 0 + // opacity: 0 + // padding: 0 10px +} + +.row.animate-show ~ .row { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +// + +.animate-slide { + max-height: 500px; + opacity: 1 !important; + -webkit-transition: all 300ms ease-in-out; + -moz-transition: all 300ms ease-in-out; + -o-transition: all 300ms ease-in-out; + transition: all 300ms ease-in-out; + + &.ng-hide { + overflow: hidden; + max-height: 0; + opacity: 0 !important; + } + + // &.ng-hide-add-active, &.ng-hide-remove-active + + &.ng-hide-add, &.ng-hide-remove { + /* IMPORTANT: this needs to be here to make it visible during the animation + * since the .ng-hide class is already on the element rendering + * it as hidden. */ + display: block !important; + } +} + +.animate-show { + opacity: 1 !important; + -webkit-transition: all 300ms ease-in-out; + -moz-transition: all 300ms ease-in-out; + -o-transition: all 300ms ease-in-out; + transition: all 300ms ease-in-out; + + &.ng-hide { + opacity: 0 !important; + } + + // &.ng-hide-add-active, &.ng-hide-remove-active + + &.ng-hide-add, &.ng-hide-remove { + /* IMPORTANT: this needs to be here to make it visible during the animation + * since the .ng-hide class is already on the element rendering + * it as hidden. */ + display: block !important; + } +} + +@mixin csstrans { + -webkit-transition: all 300ms ease; + -moz-transition: all 300ms ease; + -ms-transition: all 300ms ease; + -o-transition: all 300ms ease; + transition: all 300ms ease; + -webkit-transform-style: preserve-3d; +} diff --git a/app/assets/stylesheets/darkswarm/big-input.sass b/app/assets/stylesheets/darkswarm/big-input.sass deleted file mode 100644 index 0660fda460..0000000000 --- a/app/assets/stylesheets/darkswarm/big-input.sass +++ /dev/null @@ -1,93 +0,0 @@ -@import typography -@import branding -@import animations -@import mixins - -//Big search used in active table search \\ - -@mixin big-input($input, $inputhvr, $inputactv) - @include headingFont - @include csstrans - @include border-radius(0.5rem) - background: rgba(255,255,255,0.1) - border: 2px solid $input - font-size: 2rem - box-shadow: 0 - padding: 0.5rem 1rem - height: auto - width: 100% - margin-bottom: 0.5rem - box-shadow: none - color: $inputactv - @media all and (max-width: 640px) - font-size: 1.25rem - - &:hover - @include box-shadow(0 1px 1px 0 rgba(255,255,255,0.25)) - border: 2px solid $inputhvr - color: $inputactv - - &:active, &:focus, &.active - border: 2px solid $inputactv - color: $inputactv - background: white - background: rgba(255,255,255,0.5) - text-shadow: 0 0 10px #ffffff - padding: 1rem - letter-spacing: 0.02rem - outline: none - -@mixin big-input-static - outline: 0 - &:active, &:focus, &.active - padding: 0.75rem 1rem 0.35rem 1rem - letter-spacing: 0 - -@mixin medium-input($input, $inputhvr, $inputactv) - @include headingFont - @include csstrans - @include border-radius(0.5rem) - background: rgba(255,255,255,0.1) - border: 2px solid $input - font-size: 0.875rem - box-shadow: 0 - padding: 0.5rem 0.625rem 0.375rem - height: auto - width: 100% - margin-bottom: 0.5rem - box-shadow: none - color: $inputactv - - &:hover - @include box-shadow(0 1px 1px 0 rgba(255,255,255,0.25)) - border: 2px solid $inputhvr - color: $inputactv - - &:active, &:focus, &.active - border: 2px solid $inputactv - color: $inputactv - background: white - background: rgba(255,255,255,0.5) - text-shadow: 0 0 10px #ffffff - outline: none - -@mixin placeholder($placeholder, $placeholderhvr) - ::-webkit-input-placeholder - color: $placeholder - :-moz-placeholder - color: $placeholder - ::-moz-placeholder - color: $placeholder - :-ms-input-placeholder - color: $placeholder - - &:hover - ::-webkit-input-placeholder - color: $placeholderhvr - :-moz-placeholder - color: $placeholderhvr - ::-moz-placeholder - color: $placeholderhvr - :-ms-input-placeholder - color: $placeholderhvr - diff --git a/app/assets/stylesheets/darkswarm/big-input.scss b/app/assets/stylesheets/darkswarm/big-input.scss new file mode 100644 index 0000000000..7b9ecdac8d --- /dev/null +++ b/app/assets/stylesheets/darkswarm/big-input.scss @@ -0,0 +1,127 @@ +@import "typography"; +@import "branding"; +@import "animations"; +@import "mixins"; + +//Big search used in active table search \\ + +@mixin big-input($input, $inputhvr, $inputactv) { + @include headingFont; + + @include csstrans; + + @include border-radius(0.5rem); + + background: rgba(255, 255, 255, 0.1); + border: 2px solid $input; + font-size: 2rem; + box-shadow: 0; + padding: 0.5rem 1rem; + height: auto; + width: 100%; + margin-bottom: 0.5rem; + box-shadow: none; + color: $inputactv; + + @media all and (max-width: 640px) { + font-size: 1.25rem; + } + + &:hover { + @include box-shadow(0 1px 1px 0 rgba(255, 255, 255, 0.25)); + + border: 2px solid $inputhvr; + color: $inputactv; + } + + &:active, &:focus, &.active { + border: 2px solid $inputactv; + color: $inputactv; + background: white; + background: rgba(255, 255, 255, 0.5); + text-shadow: 0 0 10px #ffffff; + padding: 1rem; + letter-spacing: 0.02rem; + outline: none; + } +} + +@mixin big-input-static { + outline: 0; + + &:active, &:focus, &.active { + padding: 0.75rem 1rem 0.35rem 1rem; + letter-spacing: 0; + } +} + +@mixin medium-input($input, $inputhvr, $inputactv) { + @include headingFont; + + @include csstrans; + + @include border-radius(0.5rem); + + background: rgba(255, 255, 255, 0.1); + border: 2px solid $input; + font-size: 0.875rem; + box-shadow: 0; + padding: 0.5rem 0.625rem 0.375rem; + height: auto; + width: 100%; + margin-bottom: 0.5rem; + box-shadow: none; + color: $inputactv; + + &:hover { + @include box-shadow(0 1px 1px 0 rgba(255, 255, 255, 0.25)); + + border: 2px solid $inputhvr; + color: $inputactv; + } + + &:active, &:focus, &.active { + border: 2px solid $inputactv; + color: $inputactv; + background: white; + background: rgba(255, 255, 255, 0.5); + text-shadow: 0 0 10px #ffffff; + outline: none; + } +} + +@mixin placeholder($placeholder, $placeholderhvr) { + ::-webkit-input-placeholder { + color: $placeholder; + } + + -moz-placeholder: { + color: $placeholder; + }; + + ::-moz-placeholder { + color: $placeholder; + } + + -ms-input-placeholder: { + color: $placeholder; + }; + + &:hover { + ::-webkit-input-placeholder { + color: $placeholderhvr; + } + + -moz-placeholder: { + color: $placeholderhvr; + }; + + ::-moz-placeholder { + color: $placeholderhvr; + } + + -ms-input-placeholder: { + color: $placeholderhvr; + }; + } +} diff --git a/app/assets/stylesheets/darkswarm/branding.css.sass b/app/assets/stylesheets/darkswarm/branding.css.sass deleted file mode 100644 index 76614599cf..0000000000 --- a/app/assets/stylesheets/darkswarm/branding.css.sass +++ /dev/null @@ -1,38 +0,0 @@ -$ofn-brand: #f27052 -// e.g. australia, uk, norway specific color - -$ofn-grey: #808184 - - -// old colors: - -$clr-brick: #c1122b -$clr-brick-light: #f5e6e7 -$clr-brick-light-trans: rgba(245, 230, 231, 0.9) -$clr-brick-ultra-light: #faf5f6 -$clr-brick-bright: #eb4c46 -$clr-brick-med-bright: #e5a2a0 -$clr-brick-light-bright: #f5c4c9 - -$clr-turquoise: #0b8c61 -$clr-turquoise-light: #ceefe4 -$clr-turquoise-ultra-light: #e8f9f4 -$clr-turquoise-bright: #23a877 - -$clr-blue: #0096ad -$clr-blue-light: #85d9e5 -$clr-blue-bright: #14b6cc - -$clr-yellow-light: #faf6c7 - -$disabled-light: #e5e5e5 -$disabled-bright: #ccc -$disabled-med: #b3b3b3 -$disabled-dark: #999 -$disabled-v-dark: #808080 -$med-grey: #666 -$med-drk-grey: #444 -$dark-grey: #333 -$light-grey: #ddd -$black: #000 - diff --git a/app/assets/stylesheets/darkswarm/branding.css.scss b/app/assets/stylesheets/darkswarm/branding.css.scss new file mode 100644 index 0000000000..c9a68b513b --- /dev/null +++ b/app/assets/stylesheets/darkswarm/branding.css.scss @@ -0,0 +1,37 @@ +$ofn-brand: #f27052; + +// e.g. australia, uk, norway specific color + +$ofn-grey: #808184; + +// old colors: + +$clr-brick: #c1122b; +$clr-brick-light: #f5e6e7; +$clr-brick-light-trans: rgba(245, 230, 231, 0.9); +$clr-brick-ultra-light: #faf5f6; +$clr-brick-bright: #eb4c46; +$clr-brick-med-bright: #e5a2a0; +$clr-brick-light-bright: #f5c4c9; + +$clr-turquoise: #0b8c61; +$clr-turquoise-light: #ceefe4; +$clr-turquoise-ultra-light: #e8f9f4; +$clr-turquoise-bright: #23a877; + +$clr-blue: #0096ad; +$clr-blue-light: #85d9e5; +$clr-blue-bright: #14b6cc; + +$clr-yellow-light: #faf6c7; + +$disabled-light: #e5e5e5; +$disabled-bright: #ccc; +$disabled-med: #b3b3b3; +$disabled-dark: #999; +$disabled-v-dark: #808080; +$med-grey: #666; +$med-drk-grey: #444; +$dark-grey: #333; +$light-grey: #ddd; +$black: #000; diff --git a/app/assets/stylesheets/darkswarm/footer.sass b/app/assets/stylesheets/darkswarm/footer.sass deleted file mode 100644 index 80681cedfb..0000000000 --- a/app/assets/stylesheets/darkswarm/footer.sass +++ /dev/null @@ -1,78 +0,0 @@ -@import branding -@import mixins -@import animations - -footer - .row - p a - font-size: 0.875rem - a, a * - @include csstrans - color: white - &:hover, &:active, &:focus - color: rgba(white, 1) - text-decoration: underline - - .footer-global - background-color: $ofn-grey - padding-top: 60px - padding-bottom: 40px - .logo - width: 200px - height: 200px - background: $ofn-grey - @include border-radius(120px) - margin: -140px auto 0 auto - img - margin-top: 36px - - .alert-box - background-color: transparent - border: none - padding: 0 - .alert-cta - @include csstrans - width: 100% - border: 1px solid rgba($dark-grey, 0.35) - background-image: url("/assets/tile-wide.png") - background-position: center center - background-color: #bbb - padding: 12px 0 8px 0 - display: block - &, & * - @include csstrans - color: #333 - strong - letter-spacing: 0.5px - a:hover, a:active, a:focus - text-decoration: none - border-color: white - &, & * - color: rgba(white, 1) - .row - &, p, h1, h2, h3, h4, h5, h6 - color: $disabled-bright - - .footer-local - background: lighten($dark-grey, 3%) - @include panepadding - .row - &, p, h1, h2, h3, h4, h5, h6 - color: $disabled-med - p.secure-icon i - font-size: 10rem - color: rgba(white, 0.1) - p.secure-text - color: rgba($disabled-med, 0.35) - .social-icons - margin-bottom: 0.25rem - margin-top: 0.75rem - a - i - font-size: 1.5rem - color: white - &:hover, &:active, &:focus - text-decoration: none - i - color: lighten($dark-grey, 60%) - text-shadow: 2px 2px 0 black diff --git a/app/assets/stylesheets/darkswarm/footer.scss b/app/assets/stylesheets/darkswarm/footer.scss new file mode 100644 index 0000000000..56176a1b4d --- /dev/null +++ b/app/assets/stylesheets/darkswarm/footer.scss @@ -0,0 +1,127 @@ +@import "branding"; +@import "mixins"; +@import "animations"; + +footer { + .row { + p a { + font-size: 0.875rem; + } + + a, a * { + @include csstrans; + + color: white; + + &:hover, &:active, &:focus { + color: rgba(white, 1); + text-decoration: underline; + } + } + } + + .footer-global { + background-color: $ofn-grey; + padding-top: 60px; + padding-bottom: 40px; + + .logo { + width: 200px; + height: 200px; + background: $ofn-grey; + + @include border-radius(120px); + + margin: (-140px) auto 0 auto; + + img { + margin-top: 36px; + } + } + + .alert-box { + background-color: transparent; + border: none; + padding: 0; + + .alert-cta { + @include csstrans; + + width: 100%; + border: 1px solid rgba($dark-grey, 0.35); + background-image: url("/assets/tile-wide.png"); + background-position: center center; + background-color: #bbb; + padding: 12px 0 8px 0; + display: block; + + &, & * { + @include csstrans; + + color: #333; + } + + strong { + letter-spacing: 0.5px; + } + + a:hover, a:active, a:focus { + text-decoration: none; + border-color: white; + + &, & * { + color: rgba(white, 1); + } + } + } + } + + .row { + &, p, h1, h2, h3, h4, h5, h6 { + color: $disabled-bright; + } + } + } + + .footer-local { + background: lighten($dark-grey, 3%); + + @include panepadding; + + .row { + &, p, h1, h2, h3, h4, h5, h6 { + color: $disabled-med; + } + + p.secure-icon i { + font-size: 10rem; + color: rgba(white, 0.1); + } + + p.secure-text { + color: rgba($disabled-med, 0.35); + } + + .social-icons { + margin-bottom: 0.25rem; + margin-top: 0.75rem; + + a { + i { + font-size: 1.5rem; + color: white; + } + + &:hover, &:active, &:focus { + text-decoration: none; + + i { + color: lighten($dark-grey, 60%); + text-shadow: 2px 2px 0 black; + } + } + } + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/forms.css.sass b/app/assets/stylesheets/darkswarm/forms.css.sass deleted file mode 100644 index 7047159601..0000000000 --- a/app/assets/stylesheets/darkswarm/forms.css.sass +++ /dev/null @@ -1,5 +0,0 @@ -@import mixins -@import branding - -fieldset - border: 0 \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/forms.css.scss b/app/assets/stylesheets/darkswarm/forms.css.scss new file mode 100644 index 0000000000..9ca7f6f391 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/forms.css.scss @@ -0,0 +1,6 @@ +@import "mixins"; +@import "branding"; + +fieldset { + border: 0; +} diff --git a/app/assets/stylesheets/darkswarm/groups.css.sass b/app/assets/stylesheets/darkswarm/groups.css.sass deleted file mode 100644 index 7243112b67..0000000000 --- a/app/assets/stylesheets/darkswarm/groups.css.sass +++ /dev/null @@ -1,108 +0,0 @@ -@import branding -@import mixins -@import typography - -// Search page -#groups - @include groupsbg - @include sidepaddingSm - @include panepadding - h1, p.text - font-weight: 300 - h1 - font-size: 350% - a > .group-name - &:hover, &:focus, &:active - text-decoration: underline - - .groups-icons - text-align: right - a - font-size: 1.5em - - .groups-header - border: 2px solid $clr-brick-light-bright - @include border-radius-mixed(0.5em, 0.5em, 0, 0) - margin: -1rem 0 1rem - padding: 1rem 0.9375rem - @media screen and (min-width: 640px) - border: 0 none - @include border-radius(0) - margin: 0 - padding: 0 - -.group - padding-bottom: 0.5em - .row div - font-size: 110% - .row a - vertical-align: middle - .ofn-i_035-groups - font-size: 120% - vertical-align: middle - -// Individual Page -#group-page - .group-logo, .group-header - text-align: center - .group-logo - padding-bottom: 1em - max-height: 200px - .group-name - border-bottom: 1px solid #ccc - @media screen and (min-width: 768px) - .group-logo, .group-header - text-align: left - .group-logo - max-height: 120px - float: left - padding-right: 1em - background-color: white - - // Tabs - .tabs dd a // Mobile first - padding: 0.25rem 0.45rem 0rem - font-size: 0.75rem - border: none - margin-bottom: -2px - margin-right: 2px - text-transform: capitalize - @include headingFont - @include border-radius(1em 0.25em 0 0) - @include gradient($disabled-light, $disabled-bright) - @media screen and (min-width: 768px) - .tabs dd a - padding: 0.5rem 1rem 0.25em - font-size: 0.875rem - @include border-radius(1.5em 0.25em 0 0) - @media screen and (min-width: 1024px) - .tabs dd a - padding: 0.75rem 1.5rem 0.5em - font-size: 1rem - @include border-radius(2em 0.25em 0 0) - .tabs dd.active a - @include gradient(white, white) - margin-bottom: -1px - border-top: 1px solid $light-grey - border-left: 1px solid $light-grey - border-right: 1px solid $light-grey - border-bottom: 0 - .tabs-content - border-top: 1px solid $light-grey - border-left: 1px solid $light-grey - border-right: 1px solid $light-grey - border-bottom: 1px solid $light-grey - padding: 1.5em - - // Producers tab - .producers - background-image: none - background-color: initial - .active_table .active_table_node a.is_distributor, .active_table .active_table_node a.is_distributor i.ofn-i_059-producer - color: $clr-turquoise - padding: 0 - // Hubs tab - .hubs - background-image: none - padding-top: 0 - padding-bottom: 0 diff --git a/app/assets/stylesheets/darkswarm/groups.css.scss b/app/assets/stylesheets/darkswarm/groups.css.scss new file mode 100644 index 0000000000..b6ba8087c7 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/groups.css.scss @@ -0,0 +1,169 @@ +@import "branding"; +@import "mixins"; +@import "typography"; + +// Search page +#groups { + @include groupsbg; + + @include sidepaddingSm; + + @include panepadding; + + h1, p.text { + font-weight: 300; + } + + h1 { + font-size: 350%; + } + + a > .group-name { + &:hover, &:focus, &:active { + text-decoration: underline; + } + } + + .groups-icons { + text-align: right; + + a { + font-size: 1.5em; + } + } + + .groups-header { + border: 2px solid $clr-brick-light-bright; + + @include border-radius-mixed(0.5em, 0.5em, 0, 0); + + margin: (-1rem) 0 1rem; + padding: 1rem 0.9375rem; + + @media screen and (min-width: 640px) { + border: 0 none; + + @include border-radius(0); + + margin: 0; + padding: 0; + } + } +} + +.group { + padding-bottom: 0.5em; + + .row div { + font-size: 110%; + } + + .row a { + vertical-align: middle; + } + + .ofn-i_035-groups { + font-size: 120%; + vertical-align: middle; + } +} + +// Individual Page +#group-page { + .group-logo, .group-header { + text-align: center; + } + + .group-logo { + padding-bottom: 1em; + max-height: 200px; + } + + .group-name { + border-bottom: 1px solid #ccc; + } + + @media screen and (min-width: 768px) { + .group-logo, .group-header { + text-align: left; + } + + .group-logo { + max-height: 120px; + float: left; + padding-right: 1em; + background-color: white; + } + } + + // Tabs + .tabs dd a { + padding: 0.25rem 0.45rem 0rem; + font-size: 0.75rem; + border: none; + margin-bottom: -2px; + margin-right: 2px; + text-transform: capitalize; + + @include headingFont; + + @include border-radius(1em 0.25em 0 0); + + @include gradient($disabled-light, $disabled-bright); + } + + @media screen and (min-width: 768px) { + .tabs dd a { + padding: 0.5rem 1rem 0.25em; + font-size: 0.875rem; + + @include border-radius(1.5em 0.25em 0 0); + } + } + + @media screen and (min-width: 1024px) { + .tabs dd a { + padding: 0.75rem 1.5rem 0.5em; + font-size: 1rem; + + @include border-radius(2em 0.25em 0 0); + } + } + + .tabs dd.active a { + @include gradient(white, white); + + margin-bottom: -1px; + border-top: 1px solid $light-grey; + border-left: 1px solid $light-grey; + border-right: 1px solid $light-grey; + border-bottom: 0; + } + + .tabs-content { + border-top: 1px solid $light-grey; + border-left: 1px solid $light-grey; + border-right: 1px solid $light-grey; + border-bottom: 1px solid $light-grey; + padding: 1.5em; + } + + // Producers tab + .producers { + background-image: none; + background-color: initial; + + .active_table .active_table_node a.is_distributor, .active_table .active_table_node a.is_distributor i.ofn-i_059-producer { + color: $clr-turquoise; + } + + padding: 0; + } + + // Hubs tab + .hubs { + background-image: none; + padding-top: 0; + padding-bottom: 0; + } +} diff --git a/app/assets/stylesheets/darkswarm/header.css.sass b/app/assets/stylesheets/darkswarm/header.css.sass deleted file mode 100644 index 523afca824..0000000000 --- a/app/assets/stylesheets/darkswarm/header.css.sass +++ /dev/null @@ -1,21 +0,0 @@ -@import variables - -nav.top-bar - margin-bottom: 0px - a.icon - &:hover - text-decoration: none - height: $topbar-height - color: white - i - font-size: 29px - line-height: $topbar-height - span - font-size: 13px - display: inline-block - line-height: $topbar-height - height: $topbar-height - vertical-align: top - -body > section[role='main'] - padding: 0px diff --git a/app/assets/stylesheets/darkswarm/header.css.scss b/app/assets/stylesheets/darkswarm/header.css.scss new file mode 100644 index 0000000000..6d04b31f0f --- /dev/null +++ b/app/assets/stylesheets/darkswarm/header.css.scss @@ -0,0 +1,31 @@ +@import "variables"; + +nav.top-bar { + margin-bottom: 0px; + + a.icon { + &:hover { + text-decoration: none; + } + + height: $topbar-height; + color: white; + + i { + font-size: 29px; + line-height: $topbar-height; + } + + span { + font-size: 13px; + display: inline-block; + line-height: $topbar-height; + height: $topbar-height; + vertical-align: top; + } + } +} + +body > section[role='main'] { + padding: 0px; +} diff --git a/app/assets/stylesheets/darkswarm/home_panes.css.sass b/app/assets/stylesheets/darkswarm/home_panes.css.sass deleted file mode 100644 index 4bb9c19aa6..0000000000 --- a/app/assets/stylesheets/darkswarm/home_panes.css.sass +++ /dev/null @@ -1,156 +0,0 @@ -@import branding -@import mixins -@import typography -@import animations -@import variables - -// Styling for big panes on homepage \\ -#panes - .pane - .row - @include panepadding - padding-top: 75px - padding-bottom: 75px - &.header - padding-bottom: 0 - &.content - padding-top: 0 - - -// Background styles \\ -#system.pane - background-color: white - -#brand-story.pane, #cta.pane, #shops.pane, #sell.pane - @include tiledPane - -#connect.pane - @include groupsbg - -#learn.pane - @include hubsbg - -#stats.pane - background-image: url("/assets/home/background-blurred-oranges.jpg") - background-position: center center - background-color: $ofn-grey - @include fullbg - @include paneWhiteText - - -// Content styles \\ -#brand-story.pane - .row - h2 - font-weight: 300 - font-size: 88px - p - @include bodyFont - font-size: 1.5rem - font-weight: 300 - @media all and (max-width: 768px) - h2 - font-size: 52px - p - font-size: 1.3rem - - a.text-vbig i - font-size: 75px - -#system.pane - .row .row - padding-bottom: 0 - @media all and (max-width: 640px) - .row .row - padding: 0 - - .home-icon-box - background-image: url("/assets/ofn-o.png") - background-position: center center - background-repeat: no-repeat - background-size: auto 100% - padding: 3rem 0 - text-align: center - margin-top: 2rem - @media all and (min-width: 642px) - margin-top: 0 - i - font-size: 4rem - a - display: block - width: 64px - height: 64px - margin: 0 auto - background-color: $brand-colour - background-position: center center - background-repeat: no-repeat - background-size: auto 100% - &.search - background-image: url("/assets/icon-mask-magnifier.png") - &.shop - background-image: url("/assets/icon-mask-apple.png") - &.pick-up-delivery - background-image: url("/assets/icon-mask-truck.png") - - h2 - font-size: 70px - font-weight: 300 - color: $brand-colour - @media all and (max-width: 640px) - font-size: 45px - - .home-icon-box-bottom - margin-top: 1rem - width: 100% - padding-left: 1rem - padding-right: 1rem - @media all and (min-width: 480px) - padding-left: 3rem - padding-right: 3rem - @media all and (min-width: 642px) - padding-left: 1rem - padding-right: 1rem - h4 - color: $brand-colour - border-bottom: 2px solid lighten($brand-colour, 20%) - text-align: center - padding: 1rem 0 - margin: 1.5rem 0 - -#cta.pane, #stats.pane - h2 - font-weight: 300 - font-size: 45px - margin-bottom: 2rem - @media all and (max-width: 830px) - font-size: 35px - -#stats.pane - .row.header - padding-bottom: 2rem - - h4 - font-weight: 300 - text-transform: uppercase - margin: 1.5rem 0 - display: inline-block - strong - display: block - font-weight: normal - font-size: 75px - -#shops.pane - @include paneWhiteText - h2 - margin-bottom: 2rem - font-size: 4.4rem - font-weight: 300 - -#shops-signup.pane - background-color: $brand-colour - -#sell-detail.pane - margin: 50px 0 - .row - padding-top: 25px - padding-bottom: 25px diff --git a/app/assets/stylesheets/darkswarm/home_panes.css.scss b/app/assets/stylesheets/darkswarm/home_panes.css.scss new file mode 100644 index 0000000000..92053189e2 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/home_panes.css.scss @@ -0,0 +1,225 @@ +@import "branding"; +@import "mixins"; +@import "typography"; +@import "animations"; +@import "variables"; + +// Styling for big panes on homepage \\ +#panes { + .pane { + .row { + @include panepadding; + + padding-top: 75px; + padding-bottom: 75px; + + &.header { + padding-bottom: 0; + } + + &.content { + padding-top: 0; + } + } + } +} + +// Background styles \\ +#system.pane { + background-color: white; +} + +#brand-story.pane, #cta.pane, #shops.pane, #sell.pane { + @include tiledPane; +} + +#connect.pane { + @include groupsbg; +} + +#learn.pane { + @include hubsbg; +} + +#stats.pane { + background-image: url("/assets/home/background-blurred-oranges.jpg"); + background-position: center center; + background-color: $ofn-grey; + + @include fullbg; + + @include paneWhiteText; +} + +// Content styles \\ +#brand-story.pane { + .row { + h2 { + font-weight: 300; + font-size: 88px; + } + + p { + @include bodyFont; + + font-size: 1.5rem; + font-weight: 300; + } + + @media all and (max-width: 768px) { + h2 { + font-size: 52px; + } + + p { + font-size: 1.3rem; + } + } + } + + a.text-vbig i { + font-size: 75px; + } +} + +#system.pane { + .row .row { + padding-bottom: 0; + } + + @media all and (max-width: 640px) { + .row .row { + padding: 0; + } + } + + .home-icon-box { + background-image: url("/assets/ofn-o.png"); + background-position: center center; + background-repeat: no-repeat; + background-size: auto 100%; + padding: 3rem 0; + text-align: center; + margin-top: 2rem; + + @media all and (min-width: 642px) { + margin-top: 0; + } + + i { + font-size: 4rem; + } + + a { + display: block; + width: 64px; + height: 64px; + margin: 0 auto; + background-color: $brand-colour; + background-position: center center; + background-repeat: no-repeat; + background-size: auto 100%; + + &.search { + background-image: url("/assets/icon-mask-magnifier.png"); + } + + &.shop { + background-image: url("/assets/icon-mask-apple.png"); + } + + &.pick-up-delivery { + background-image: url("/assets/icon-mask-truck.png"); + } + } + } + + h2 { + font-size: 70px; + font-weight: 300; + color: $brand-colour; + + @media all and (max-width: 640px) { + font-size: 45px; + } + } + + .home-icon-box-bottom { + margin-top: 1rem; + width: 100%; + padding-left: 1rem; + padding-right: 1rem; + + @media all and (min-width: 480px) { + padding-left: 3rem; + padding-right: 3rem; + } + + @media all and (min-width: 642px) { + padding-left: 1rem; + padding-right: 1rem; + } + + h4 { + color: $brand-colour; + border-bottom: 2px solid lighten($brand-colour, 20%); + text-align: center; + padding: 1rem 0; + margin: 1.5rem 0; + } + } +} + +#cta.pane, #stats.pane { + h2 { + font-weight: 300; + font-size: 45px; + margin-bottom: 2rem; + + @media all and (max-width: 830px) { + font-size: 35px; + } + } +} + +#stats.pane { + .row.header { + padding-bottom: 2rem; + } + + h4 { + font-weight: 300; + text-transform: uppercase; + margin: 1.5rem 0; + display: inline-block; + + strong { + display: block; + font-weight: normal; + font-size: 75px; + } + } +} + +#shops.pane { + @include paneWhiteText; + + h2 { + margin-bottom: 2rem; + font-size: 4.4rem; + font-weight: 300; + } +} + +#shops-signup.pane { + background-color: $brand-colour; +} + +#sell-detail.pane { + margin: 50px 0; + + .row { + padding-top: 25px; + padding-bottom: 25px; + } +} diff --git a/app/assets/stylesheets/darkswarm/home_tagline.css.sass b/app/assets/stylesheets/darkswarm/home_tagline.css.sass deleted file mode 100644 index fadaae70b0..0000000000 --- a/app/assets/stylesheets/darkswarm/home_tagline.css.sass +++ /dev/null @@ -1,33 +0,0 @@ -@import branding -@import mixins -@import variables - -// Styling for brand intro / tagline on homepage - -#tagline - width: 100% - &:before - content: "" - @include fullbg - background-color: $ofn-grey - background-image: url("/assets/home/home.jpg") - position: fixed - left: 0 - right: 0 - bottom: 0 - z-index: -1 - width: 100% - height: 100% - - h1 - margin-top: 2rem - @media all and (min-width: 768px) - margin-top: 10rem - img - max-width: 45% - @media all and (min-height: 500px) - max-width: 80% - - margin-bottom: 2rem - @media all and (min-width: 768px) - margin-bottom: 5rem diff --git a/app/assets/stylesheets/darkswarm/home_tagline.css.scss b/app/assets/stylesheets/darkswarm/home_tagline.css.scss new file mode 100644 index 0000000000..b278f79e25 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/home_tagline.css.scss @@ -0,0 +1,47 @@ +@import "branding"; +@import "mixins"; +@import "variables"; + +// Styling for brand intro / tagline on homepage + +#tagline { + width: 100%; + + &:before { + content: ""; + + @include fullbg; + + background-color: $ofn-grey; + background-image: url("/assets/home/home.jpg"); + position: fixed; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + width: 100%; + height: 100%; + } + + h1 { + margin-top: 2rem; + + @media all and (min-width: 768px) { + margin-top: 10rem; + } + + img { + max-width: 45%; + + @media all and (min-height: 500px) { + max-width: 80%; + } + + margin-bottom: 2rem; + + @media all and (min-width: 768px) { + margin-bottom: 5rem; + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/hub_node.css.sass b/app/assets/stylesheets/darkswarm/hub_node.css.sass deleted file mode 100644 index 4d175681f2..0000000000 --- a/app/assets/stylesheets/darkswarm/hub_node.css.sass +++ /dev/null @@ -1,168 +0,0 @@ -@import branding -@import mixins - -.hubs - .active_table .active_table_node - - //Prevents ugly overflows on hub title - .columns.skinny-head - white-space: nowrap - overflow-x: hidden - overflow-y: visible - - //Generic text link style - a, a * - color: $clr-brick - &:hover, &:active, &:focus - color: $clr-brick-bright - - //Hub and Producer icons - i.ofn-i_063-hub, i.ofn-i_064-hub-reversed, i.ofn-i_059-producer, i.ofn-i_060-producer-reversed - font-size: 2rem - display: inline-block - margin-right: 0.25rem - float: left - - //Closed & Open column - .open_closed - i - font-size: 2rem - float: right - margin-left: 0.5rem - - //Hub Link - @media all and (max-width: 640px) - a.hub - display: block - - //Hub Name - span.hub-name-listing - font-weight: 700 - &:after - content: ">>" - display: inline-block - margin-left: 5px - - //CLOSED row - &.closed - .active_table_row - border: 1px solid transparent - @media all and (max-width: 640px) - border-color: $clr-brick-light - &:hover, &:active, &:focus - border-color: $clr-brick-light-bright - - //OPEN row - &.open - .active_table_row, .active_table_row:first-child, .active_table_row:last-child - border-color: $clr-brick-light-bright - - &.open, &.closed - @media all and (max-width: 640px) - .active_table_row:first-child .skinny-head - background-color: $clr-brick-light - @include border-radius-mixed(0.5em, 0.5em, 0, 0) - margin-top: -1rem - margin-bottom: 1rem - padding-top: 1rem - padding-bottom: 1rem - label - margin-top: 1rem - - //Padding second row - &.open - .active_table_row:nth-child(2) - padding-bottom: 0.75rem - - - .producers-list - li.more-producers-link - .less - display: none - a:hover - text-decoration: underline - li.additional-producer - display: none - &.show-more-producers - li.additional-producer - display: block - li.more-producers-link - .more - display: none - .less - display: block - - //CURRENT hub (shows selected hub) - &.current - //overwrites active_table - &.closed, &.open - a, a * - color: $clr-brick - .active_table_row - border-color: $clr-brick - .active_table_row:first-child, .active_table_row:last-child - background-color: $clr-brick-light-trans - opacity: 1 - &:hover, &:focus, &:active - opacity: 0.9 - border-color: $clr-brick-bright - @media all and (max-width: 640px) - .active_table_row:first-child .skinny-head - background-color: rgba(255,255,255,0.85) - - - //INACTIVE - closed hub - &.inactive - &.closed, &.open - &, & * - color: $disabled-med - a, a * - color: $disabled-dark - &.closed - .active_table_row, .active_table_row:first-child, .active_table_row:last-child - &:hover, &:active, &:focus - border-color: $disabled-bright - &.open - .active_table_row, .active_table_row:first-child, .active_table_row:last-child - // border-color: $disabled-bright - &, &:hover, &:active, &:focus - border-color: $disabled-bright - - &.closed, &.open - - // & Current hub - &.current - .active_table_row, .active_table_row:first-child, .active_table_row:last-child - a, a * - color: $med-grey - border-color: $disabled-dark - background-color: rgba(220,220,220,0.5) - &:hover, &:focus, &:active - border-color: $disabled-dark - - // Small devices - @media all and (max-width: 640px) - .active_table_row:first-child .skinny-head - background-color: $disabled-bright - - // Small devices - @media all and (max-width: 640px) - .active_table_row, .active_table_row:first-child, .active_table_row:last-child - border-color: $disabled-bright - background-color: transparent - &:hover, &:focus, &:active - border-color: $disabled-bright - opacity: 0.85 - .active_table_row:first-child .skinny-head - background-color: $disabled-light - - //Is Profile - profile node - &.inactive.is_profile - &.closed, &.open - .active_table_row - &:hover, &:active, &:focus - border-color: transparent - cursor: auto - @media all and (max-width: 640px) - border-color: transparent - diff --git a/app/assets/stylesheets/darkswarm/hub_node.css.scss b/app/assets/stylesheets/darkswarm/hub_node.css.scss new file mode 100644 index 0000000000..5df4f68b01 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/hub_node.css.scss @@ -0,0 +1,255 @@ +@import "branding"; +@import "mixins"; + +.hubs { + .active_table .active_table_node { + //Prevents ugly overflows on hub title + .columns.skinny-head { + white-space: nowrap; + overflow-x: hidden; + overflow-y: visible; + } + + //Generic text link style + a, a * { + color: $clr-brick; + + &:hover, &:active, &:focus { + color: $clr-brick-bright; + } + } + + //Hub and Producer icons + i.ofn-i_063-hub, i.ofn-i_064-hub-reversed, i.ofn-i_059-producer, i.ofn-i_060-producer-reversed { + font-size: 2rem; + display: inline-block; + margin-right: 0.25rem; + float: left; + } + + //Closed & Open column + .open_closed { + i { + font-size: 2rem; + float: right; + margin-left: 0.5rem; + } + } + + //Hub Link + @media all and (max-width: 640px) { + a.hub { + display: block; + } + } + + //Hub Name + span.hub-name-listing { + font-weight: 700; + + &:after { + content: ">>"; + display: inline-block; + margin-left: 5px; + } + } + + //CLOSED row + &.closed { + .active_table_row { + border: 1px solid transparent; + + @media all and (max-width: 640px) { + border-color: $clr-brick-light; + } + + &:hover, &:active, &:focus { + border-color: $clr-brick-light-bright; + } + } + } + + //OPEN row + &.open { + .active_table_row, .active_table_row:first-child, .active_table_row:last-child { + border-color: $clr-brick-light-bright; + } + } + + &.open, &.closed { + @media all and (max-width: 640px) { + .active_table_row:first-child .skinny-head { + background-color: $clr-brick-light; + + @include border-radius-mixed(0.5em, 0.5em, 0, 0); + + margin-top: -1rem; + margin-bottom: 1rem; + padding-top: 1rem; + padding-bottom: 1rem; + } + + label { + margin-top: 1rem; + } + } + } + + //Padding second row + &.open { + .active_table_row:nth-child(2) { + padding-bottom: 0.75rem; + } + } + + .producers-list { + li.more-producers-link { + .less { + display: none; + } + + a:hover { + text-decoration: underline; + } + } + + li.additional-producer { + display: none; + } + + &.show-more-producers { + li.additional-producer { + display: block; + } + + li.more-producers-link { + .more { + display: none; + } + + .less { + display: block; + } + } + } + } + + //CURRENT hub (shows selected hub) + &.current { + //overwrites active_table + &.closed, &.open { + a, a * { + color: $clr-brick; + } + + .active_table_row { + border-color: $clr-brick; + } + + .active_table_row:first-child, .active_table_row:last-child { + background-color: $clr-brick-light-trans; + opacity: 1; + + &:hover, &:focus, &:active { + opacity: 0.9; + border-color: $clr-brick-bright; + } + } + + @media all and (max-width: 640px) { + .active_table_row:first-child .skinny-head { + background-color: rgba(255, 255, 255, 0.85); + } + } + } + } + + //INACTIVE - closed hub + &.inactive { + &.closed, &.open { + &, & * { + color: $disabled-med; + } + + a, a * { + color: $disabled-dark; + } + } + + &.closed { + .active_table_row, .active_table_row:first-child, .active_table_row:last-child { + &:hover, &:active, &:focus { + border-color: $disabled-bright; + } + } + } + + &.open { + .active_table_row, .active_table_row:first-child, .active_table_row:last-child { + // border-color: $disabled-bright + &, &:hover, &:active, &:focus { + border-color: $disabled-bright; + } + } + } + + &.closed, &.open { + // & Current hub + &.current { + .active_table_row, .active_table_row:first-child, .active_table_row:last-child { + a, a * { + color: $med-grey; + } + + border-color: $disabled-dark; + background-color: rgba(220, 220, 220, 0.5); + + &:hover, &:focus, &:active { + border-color: $disabled-dark; + } + } + + // Small devices + @media all and (max-width: 640px) { + .active_table_row:first-child .skinny-head { + background-color: $disabled-bright; + } + } + } + + // Small devices + @media all and (max-width: 640px) { + .active_table_row, .active_table_row:first-child, .active_table_row:last-child { + border-color: $disabled-bright; + background-color: transparent; + + &:hover, &:focus, &:active { + border-color: $disabled-bright; + opacity: 0.85; + } + } + + .active_table_row:first-child .skinny-head { + background-color: $disabled-light; + } + } + } + } + + //Is Profile - profile node + &.inactive.is_profile { + &.closed, &.open { + .active_table_row { + &:hover, &:active, &:focus { + border-color: transparent; + cursor: auto; + } + + @media all and (max-width: 640px) { + border-color: transparent; + } + } + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/hubs.css.sass b/app/assets/stylesheets/darkswarm/hubs.css.sass deleted file mode 100644 index 5946d6ee77..0000000000 --- a/app/assets/stylesheets/darkswarm/hubs.css.sass +++ /dev/null @@ -1,13 +0,0 @@ -@import branding -@import mixins - -#hubs - background-color: lighten($ofn-grey, 43%) - @include panepadding - @include sidepaddingSm - - .name-matches, .distance-matches - margin-top: 4em - - .more-controls - text-align: center diff --git a/app/assets/stylesheets/darkswarm/hubs.css.scss b/app/assets/stylesheets/darkswarm/hubs.css.scss new file mode 100644 index 0000000000..9845ce9ad8 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/hubs.css.scss @@ -0,0 +1,18 @@ +@import "branding"; +@import "mixins"; + +#hubs { + background-color: lighten($ofn-grey, 43%); + + @include panepadding; + + @include sidepaddingSm; + + .name-matches, .distance-matches { + margin-top: 4em; + } + + .more-controls { + text-align: center; + } +} diff --git a/app/assets/stylesheets/darkswarm/ie_warning.sass b/app/assets/stylesheets/darkswarm/ie_warning.sass deleted file mode 100644 index ede86a3083..0000000000 --- a/app/assets/stylesheets/darkswarm/ie_warning.sass +++ /dev/null @@ -1,32 +0,0 @@ -#ie-warning - margin-bottom: 0 - padding-bottom: 2rem - .ie-msg - background: rgba(255,255,255,0.15) - padding: 0.5rem - margin-bottom: 1rem - margin-top: 1rem - .browserbtn - text-align: center - margin-bottom: 1rem - a - color: white - font-size: 1rem - filter: alpha(opacity=70) - opacity: 0.7 - &:hover, &:active, &:focus - filter: alpha(opacity=100) - opacity: 1 - - a.browserlogo - display: block - width: 100% - i - font-size: 5rem - color: white - text-align: center - display: block - - - - diff --git a/app/assets/stylesheets/darkswarm/ie_warning.scss b/app/assets/stylesheets/darkswarm/ie_warning.scss new file mode 100644 index 0000000000..0ed3940734 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/ie_warning.scss @@ -0,0 +1,40 @@ +#ie-warning { + margin-bottom: 0; + padding-bottom: 2rem; + + .ie-msg { + background: rgba(255, 255, 255, 0.15); + padding: 0.5rem; + margin-bottom: 1rem; + margin-top: 1rem; + } + + .browserbtn { + text-align: center; + margin-bottom: 1rem; + + a { + color: white; + font-size: 1rem; + filter: alpha(opacity = 70); + opacity: 0.7; + + &:hover, &:active, &:focus { + filter: alpha(opacity = 100); + opacity: 1; + } + } + + a.browserlogo { + display: block; + width: 100%; + } + } + + i { + font-size: 5rem; + color: white; + text-align: center; + display: block; + } +} diff --git a/app/assets/stylesheets/darkswarm/images.css.sass b/app/assets/stylesheets/darkswarm/images.css.sass deleted file mode 100644 index b89cbb21fc..0000000000 --- a/app/assets/stylesheets/darkswarm/images.css.sass +++ /dev/null @@ -1,47 +0,0 @@ -@import mixins -@import variables -@import branding - -.product-img - padding: 5px - margin-bottom: 10px - outline: 1px solid #ccc - @include box-shadow(0 1px 2px 1px rgba(0,0,0,0.15)) - // placeholder for when no product images - &.placeholder - opacity: 0.35 - @media all and (max-width: 1024px) - display: none - -.hero-img - outline: 1px solid $disabled-bright - border-color: transparent - @include box-shadow(none) - width: 100% - min-height: 80px - height: inherit - max-height: 260px - overflow: hidden - @media all and (max-width: 640px) - min-height: 68px - -.hero-img-small - background-color: #333 - width: 100% - // min-height: 60px - height: inherit - overflow: hidden - margin: 0 0 1rem 0 !important - -.producer-logo - max-width: 220px - -@media only screen and (max-width: 1024px) - .product-img - margin-top: 2em - margin-bottom: 1em - - - - - diff --git a/app/assets/stylesheets/darkswarm/images.css.scss b/app/assets/stylesheets/darkswarm/images.css.scss new file mode 100644 index 0000000000..2a9f931f6e --- /dev/null +++ b/app/assets/stylesheets/darkswarm/images.css.scss @@ -0,0 +1,58 @@ +@import "mixins"; +@import "variables"; +@import "branding"; + +.product-img { + padding: 5px; + margin-bottom: 10px; + outline: 1px solid #ccc; + + @include box-shadow(0 1px 2px 1px rgba(0, 0, 0, 0.15)); + + // placeholder for when no product images + &.placeholder { + opacity: 0.35; + + @media all and (max-width: 1024px) { + display: none; + } + } +} + +.hero-img { + outline: 1px solid $disabled-bright; + border-color: transparent; + + @include box-shadow(none); + + width: 100%; + min-height: 80px; + height: inherit; + max-height: 260px; + overflow: hidden; + + @media all and (max-width: 640px) { + min-height: 68px; + } +} + +.hero-img-small { + background-color: #333; + width: 100%; + + // min-height: 60px + height: inherit; + overflow: hidden; + margin: 0 0 1rem 0 !important; +} + +.producer-logo { + max-width: 220px; +} + +@media only screen and (max-width: 1024px) { + .product-img { + margin-top: 2em; + margin-bottom: 1em; + } +} diff --git a/app/assets/stylesheets/darkswarm/lists.css.sass b/app/assets/stylesheets/darkswarm/lists.css.sass deleted file mode 100644 index 244d0dd862..0000000000 --- a/app/assets/stylesheets/darkswarm/lists.css.sass +++ /dev/null @@ -1,7 +0,0 @@ - -body ol - list-style-type: none - margin-left: 0em - padding-top: 1em - li - margin-left: 0 diff --git a/app/assets/stylesheets/darkswarm/lists.css.scss b/app/assets/stylesheets/darkswarm/lists.css.scss new file mode 100644 index 0000000000..51d54744ca --- /dev/null +++ b/app/assets/stylesheets/darkswarm/lists.css.scss @@ -0,0 +1,9 @@ +body ol { + list-style-type: none; + margin-left: 0em; + padding-top: 1em; + + li { + margin-left: 0; + } +} diff --git a/app/assets/stylesheets/darkswarm/loading.sass b/app/assets/stylesheets/darkswarm/loading.sass deleted file mode 100644 index d2950f07fd..0000000000 --- a/app/assets/stylesheets/darkswarm/loading.sass +++ /dev/null @@ -1,83 +0,0 @@ -@import "compass/css3/user-interface" - -#loading - .reveal-modal-bg - z-index: 101 - background: rgba(0, 0, 0, 0.85) - #message - width: 100% - text-align: center - position: absolute - z-index: 102 - margin: auto - top: 0 - left: 0 - bottom: 0 - right: 0 - @include user-select(none) - h1 - -webkit-animation: blurFadeIn 0.8s ease-in-out 0s - color: white - font-size: 1.15rem - position: fixed - text-align: center - left: 0 - right: 0 - margin: 0 auto - top: 55% - width: 100% - overflow: visible - - .loader - position: fixed - margin: 0 auto - left: 0 - right: 0 - top: 50% - margin-top: -30px - width: 60px - height: 60px - list-style: none - - li - background-color: #FFFFFF - width: 10px - height: 10px - float: right - margin-right: 5px - box-shadow: 0px 100px 20px rgba(0, 0, 0, 0.2) - - li:first-child - -webkit-animation: loadbars 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) infinite 0s - - li:nth-child(2) - -webkit-animation: loadbars 0.6s ease-in-out infinite -0.2s - - li:nth-child(3) - -webkit-animation: loadbars 0.6s ease-in-out infinite -0.4s - -@-webkit-keyframes blurFadeIn - 0% - opacity: 0 - text-shadow: 0px 0px 10px #fff - -webkit-transform: scale(1.3) - 50% - opacity: 0.5 - text-shadow: 0px 0px 5px #fff - -webkit-transform: scale(1.1) - 100% - opacity: 1 - text-shadow: 0px 0px 0px #fff - -webkit-transform: scale(1) - -@-webkit-keyframes 'loadbars' - 0% - height: 10px - margin-top: 25px - 50% - height: 50px - margin-top: 0px - 100% - height: 10px - margin-top: 25px - diff --git a/app/assets/stylesheets/darkswarm/loading.scss b/app/assets/stylesheets/darkswarm/loading.scss new file mode 100644 index 0000000000..32a3d6b9b4 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/loading.scss @@ -0,0 +1,106 @@ +@import "compass/css3/user-interface"; + +#loading { + .reveal-modal-bg { + z-index: 101; + background: rgba(0, 0, 0, 0.85); + } + + #message { + width: 100%; + text-align: center; + position: absolute; + z-index: 102; + margin: auto; + top: 0; + left: 0; + bottom: 0; + right: 0; + + @include user-select(none); + + h1 { + -webkit-animation: blurFadeIn 0.8s ease-in-out 0s; + color: white; + font-size: 1.15rem; + position: fixed; + text-align: center; + left: 0; + right: 0; + margin: 0 auto; + top: 55%; + width: 100%; + overflow: visible; + } + } + + .loader { + position: fixed; + margin: 0 auto; + left: 0; + right: 0; + top: 50%; + margin-top: -30px; + width: 60px; + height: 60px; + list-style: none; + + li { + background-color: #FFFFFF; + width: 10px; + height: 10px; + float: right; + margin-right: 5px; + box-shadow: 0px 100px 20px rgba(0, 0, 0, 0.2); + } + + li:first-child { + -webkit-animation: loadbars 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) infinite 0s; + } + + li:nth-child(2) { + -webkit-animation: loadbars 0.6s ease-in-out infinite -0.2s; + } + + li:nth-child(3) { + -webkit-animation: loadbars 0.6s ease-in-out infinite -0.4s; + } + } +} + +@-webkit-keyframes blurFadeIn { + 0% { + opacity: 0; + text-shadow: 0px 0px 10px #fff; + -webkit-transform: scale(1.3); + } + + 50% { + opacity: 0.5; + text-shadow: 0px 0px 5px #fff; + -webkit-transform: scale(1.1); + } + + 100% { + opacity: 1; + text-shadow: 0px 0px 0px #fff; + -webkit-transform: scale(1); + } +} + +@-webkit-keyframes 'loadbars' { + 0% { + height: 10px; + margin-top: 25px; + } + + 50% { + height: 50px; + margin-top: 0px; + } + + 100% { + height: 10px; + margin-top: 25px; + } +} diff --git a/app/assets/stylesheets/darkswarm/map.css.sass b/app/assets/stylesheets/darkswarm/map.css.sass deleted file mode 100644 index e2a25d61c9..0000000000 --- a/app/assets/stylesheets/darkswarm/map.css.sass +++ /dev/null @@ -1,50 +0,0 @@ -// Place all the styles related to the map controller here. -// They will automatically be included in application.css. -// You can use Sass (SCSS) here: http://sass-lang.com/ -@import big-input - -.map-container - width: 100% - map, .angular-google-map-container, google-map, .angular-google-map - display: block - height: 100% - width: 100% - - // https://github.com/zurb/foundation/issues/112 - img - max-width: none - height: auto - - #pac-input - @include big-input(#888, #333, $clr-brick) - @include big-input-static - font-size: 1.5rem - background: rgba(255,255,255,0.85) - width: 50% - margin-top: 1.2rem - margin-left: 1rem - @media all and (max-width: 768px) - width: 80% - &:active, &:focus, &.active - background: rgba(255,255,255, 1) - -.map-footer - position: fixed - z-index: 2 - width: 100% - height: 23px - left: 80px - right: 0 - bottom: 6px - margin: 0 - padding: 6px - font-size: 14px - font-weight: bold - text-shadow: 2px 2px #aaa - color: #fff - - a, a:hover, a:active, a:focus - color: #fff - - @media all and (max-width: 1025px) - left: 0px \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/map.css.scss b/app/assets/stylesheets/darkswarm/map.css.scss new file mode 100644 index 0000000000..d880b3025b --- /dev/null +++ b/app/assets/stylesheets/darkswarm/map.css.scss @@ -0,0 +1,64 @@ +// Place all the styles related to the map controller here. +// They will automatically be included in application.css. +// You can use Sass (SCSS) here: http://sass-lang.com/ +@import "big-input"; + +.map-container { + width: 100%; + + map, .angular-google-map-container, google-map, .angular-google-map { + display: block; + height: 100%; + width: 100%; + } + + // https://github.com/zurb/foundation/issues/112 + img { + max-width: none; + height: auto; + } + + #pac-input { + @include big-input(#888, #333, $clr-brick); + + @include big-input-static; + + font-size: 1.5rem; + background: rgba(255, 255, 255, 0.85); + width: 50%; + margin-top: 1.2rem; + margin-left: 1rem; + + @media all and (max-width: 768px) { + width: 80%; + } + + &:active, &:focus, &.active { + background: rgba(255, 255, 255, 1); + } + } +} + +.map-footer { + position: fixed; + z-index: 2; + width: 100%; + height: 23px; + left: 80px; + right: 0; + bottom: 6px; + margin: 0; + padding: 6px; + font-size: 14px; + font-weight: bold; + text-shadow: 2px 2px #aaa; + color: #fff; + + a, a:hover, a:active, a:focus { + color: #fff; + } + + @media all and (max-width: 1025px) { + left: 0px; + } +} diff --git a/app/assets/stylesheets/darkswarm/menu.css.sass b/app/assets/stylesheets/darkswarm/menu.css.sass deleted file mode 100644 index 41b86f72ff..0000000000 --- a/app/assets/stylesheets/darkswarm/menu.css.sass +++ /dev/null @@ -1,137 +0,0 @@ -@import compass -@import branding -@import mixins -@import typography -@import variables - - -nav - @include textpress - text-shadow: none - - // Create center style for nav ul (foundation provides left and right) - text-align: center - .top-bar-section - // Avoid menu items blocking logo - li:not(.has-form), li:not(.has-form) a:not(.button), li:not(.has-form) a:not(.button):hover - background-color: transparent - - ul.center - display: inline-block - // By default, we center between the left and right uls, but we want to be centered - // relative to the whole page. The difference in width between the other uls is 74px, - // so we offset by that amount here. - margin-left: -74px - - .joyride-tip-guide .button - text-shadow: none - - // Default overrides - big menu - .top-bar-section .has-dropdown > a - padding-right: $topbar-height / 3 !important - - i.ofn-i_022-cog - font-size: 24px - line-height: $topbar-height - - .top-bar-section .has-dropdown > a:after - display: none - - .top-bar-section ul li > a - font-size: 0.75rem - height: $topbar-height - opacity: 0.8 - &:hover, &:focus, &:active - opacity: 1 - @include transition(all 0.3s ease-in-out) - - .top-bar-section ul li.ofn-logo > a - display: table-cell - vertical-align: middle - opacity: 1 - - .nav-branded - color: $brand-colour - span - font-size: 13px - .nav-primary - @include headingFont - font-size: 0.875rem - font-weight: 300 - ul .nav-primary - text-transform: uppercase - ul.dropdown - border: 1px solid $smoke - border-top: none - - -// Mobile Menu - -.tab-bar - background-color: white - -.off-canvas-wrap.move-right .tab-bar .menu-icon - @include box-shadow(inset 0 0 6px 2px rgba(0,0,0,0.5)) - -.off-canvas-wrap .tab-bar .menu-icon - @include box-shadow(none) - -.off-canvas-wrap.move-right .tab-bar .menu-icon span - -moz-box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666 - -webkit-box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666 - box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666 - -.tab-bar .menu-icon span::after - box-shadow: 0 0 0 1px black, 0 7px 0 1px black, 0 14px 0 1px black - -.tab-bar .ofn-logo - padding: 9px 0 0 9px - -.left-off-canvas-menu - background-color: white - -.off-canvas-wrap.move-right ul.off-canvas-list - font-size: 0.875rem - - .li-menu - @include headingFont - font-size: 1rem - a - color: rgba(0, 0, 0, 0.9) - li a - color: rgba(0, 0, 0, 0.9) - &:hover - background-color: transparent - color: $brand-colour - @include transition(all 0.3s ease-in-out) - -.off-canvas-wrap.move-right ul.off-canvas-list i - font-size: 1.5rem - margin-right: 0.25rem - - - -// Responsive - -@media screen and (max-width: 1450px) - nav .top-bar-section - ul li a, .has-dropdown > a - padding: 0 $topbar-height / 8 !important - - ul.center - margin-left: -24px - - -@media screen and (min-width: 1025px) - body.off-canvas - // padding required to placehold for fixed menu bar - padding-top: $topbar-height - - -@media screen and (max-width: 1025px) - body.off-canvas - // padding required to placehold for fixed menu bar - padding-top: 0 - section.right - .nav-branded - padding: 0 1em diff --git a/app/assets/stylesheets/darkswarm/menu.css.scss b/app/assets/stylesheets/darkswarm/menu.css.scss new file mode 100644 index 0000000000..801ccb57a4 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/menu.css.scss @@ -0,0 +1,186 @@ +@import "compass"; +@import "branding"; +@import "mixins"; +@import "typography"; +@import "variables"; + +nav { + @include textpress; + + text-shadow: none; + + // Create center style for nav ul (foundation provides left and right) + text-align: center; + + .top-bar-section { + // Avoid menu items blocking logo + li:not(.has-form), li:not(.has-form) a:not(.button), li:not(.has-form) a:not(.button):hover { + background-color: transparent; + } + + ul.center { + display: inline-block; + + // By default, we center between the left and right uls, but we want to be centered + // relative to the whole page. The difference in width between the other uls is 74px, + // so we offset by that amount here. + margin-left: -74px; + } + } + + .joyride-tip-guide .button { + text-shadow: none; + } + + // Default overrides - big menu + .top-bar-section .has-dropdown > a { + padding-right: ($topbar-height / 3) !important; + + i.ofn-i_022-cog { + font-size: 24px; + line-height: $topbar-height; + } + } + + .top-bar-section .has-dropdown > a:after { + display: none; + } + + .top-bar-section ul li > a { + font-size: 0.75rem; + height: $topbar-height; + opacity: 0.8; + + &:hover, &:focus, &:active { + opacity: 1; + } + + @include transition(all 0.3s ease-in-out); + } + + .top-bar-section ul li.ofn-logo > a { + display: table-cell; + vertical-align: middle; + opacity: 1; + } + + .nav-branded { + color: $brand-colour; + + span { + font-size: 13px; + } + } + + .nav-primary { + @include headingFont; + + font-size: 0.875rem; + font-weight: 300; + } + + ul .nav-primary { + text-transform: uppercase; + } + + ul.dropdown { + border: 1px solid $smoke; + border-top: none; + } +} + +// Mobile Menu + +.tab-bar { + background-color: white; +} + +.off-canvas-wrap.move-right .tab-bar .menu-icon { + @include box-shadow(inset 0 0 6px 2px rgba(0, 0, 0, 0.5)); +} + +.off-canvas-wrap .tab-bar .menu-icon { + @include box-shadow(none); +} + +.off-canvas-wrap.move-right .tab-bar .menu-icon span { + -moz-box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666; + -webkit-box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666; + box-shadow: 0 0px 0 1px #666, 0 7px 0 1px #666, 0 14px 0 1px #666; +} + +.tab-bar .menu-icon span::after { + box-shadow: 0 0 0 1px black, 0 7px 0 1px black, 0 14px 0 1px black; +} + +.tab-bar .ofn-logo { + padding: 9px 0 0 9px; +} + +.left-off-canvas-menu { + background-color: white; +} + +.off-canvas-wrap.move-right ul.off-canvas-list { + font-size: 0.875rem; + + .li-menu { + @include headingFont; + + font-size: 1rem; + + a { + color: rgba(0, 0, 0, 0.9); + } + } + + li a { + color: rgba(0, 0, 0, 0.9); + + &:hover { + background-color: transparent; + color: $brand-colour; + } + + @include transition(all 0.3s ease-in-out); + } +} + +.off-canvas-wrap.move-right ul.off-canvas-list i { + font-size: 1.5rem; + margin-right: 0.25rem; +} + +// Responsive + +@media screen and (max-width: 1450px) { + nav .top-bar-section { + ul li a, .has-dropdown > a { + padding: 0 ($topbar-height / 8) !important; + } + + ul.center { + margin-left: -24px; + } + } +} + +@media screen and (min-width: 1025px) { + body.off-canvas { + // padding required to placehold for fixed menu bar + padding-top: $topbar-height; + } +} + +@media screen and (max-width: 1025px) { + body.off-canvas { + // padding required to placehold for fixed menu bar + padding-top: 0; + } + + section.right { + .nav-branded { + padding: 0 1em; + } + } +} diff --git a/app/assets/stylesheets/darkswarm/mixins.sass b/app/assets/stylesheets/darkswarm/mixins.sass deleted file mode 100644 index d35c5aa1a7..0000000000 --- a/app/assets/stylesheets/darkswarm/mixins.sass +++ /dev/null @@ -1,192 +0,0 @@ -// Note this mixin file is used in ADMIN and FRONTEND - -@import branding - - -// Generic \\ - -@mixin tiledPane - background-image: url("/assets/tile-wide.png") - background-color: $brand-colour - background-position: center center - @include paneWhiteText - -@mixin panepadding - padding-top: 100px - padding-bottom: 100px - -@mixin paneWhiteText - &, & * - color: white - -@mixin sidepaddingSm - padding-left: 10px - padding-right: 10px - @media all and (min-width: 768px) - padding-left: 20px - padding-right: 20px - @media all and (min-width: 1024px) - padding-left: 50px - padding-right: 50px - @media all and (min-width: 1200px) - padding-left: 100px - padding-right: 100px - -@mixin sidepaddingBg - padding-left: 20px - padding-right: 20px - @media all and (min-width: 768px) - padding-left: 40px - padding-right: 40px - @media all and (min-width: 1024px) - padding-left: 100px - padding-right: 100px - @media all and (min-width: 1200px) - padding-left: 200px - padding-right: 200px - -@mixin disabled - color: $disabled-bright - -@mixin box-shadow($box-shadow) - -moz-box-shadow: $box-shadow - -webkit-box-shadow: $box-shadow - box-shadow: $box-shadow - -@mixin elipse-shadow($elipse-shadow) - content: "" - position: absolute - z-index: -1 - -webkit-box-shadow: $elipse-shadow - box-shadow: $elipse-shadow - bottom: -12% - left: 10% - right: 10% - width: 80% - height: 10% - -moz-border-radius: 100% - border-radius: 100% - -@mixin border-radius($border-radius) - -webkit-border-radius: $border-radius - border-radius: $border-radius - -@mixin border-radius-mixed($border-radius-TL, $border-radius-TR, $border-radius-BR, $border-radius-BL) - -webkit-border-radius: $border-radius-TL $border-radius-TR $border-radius-BR $border-radius-BL - border-radius: $border-radius-TL $border-radius-TR $border-radius-BR $border-radius-BL - -@mixin transform-translate($translate) - -ms-transform: $translate - -webkit-transform: $translate - transform: $translate - -@mixin transform-scale($scale) - -moz-transform: $scale - -webkit-transform: $scale - -o-transform: $scale - -ms-transform: $scale - transform: $scale - -// Typography \\ - -@mixin textpress - text-shadow: 0 -1px 1px #111111, 0 1px 2px #222222 - -@mixin textsoftpress - text-shadow: 0 0 3px rgba(0,0,0,0.35) - -// TO USE icon-font -// Assign to :before or :after element -// Assign content: "string" - -@mixin icon-font - font-family: "OFN" - display: inline-block - font-weight: normal - font-style: normal - font-variant: normal - text-transform: none - - -// Background options \\ - -@mixin darkbg - background-color: $clr-brick - &, & * - color: white - a - color: $clr-brick-ultra-light - &:hover - text-decoration: none - color: $clr-brick-light - -@mixin lightbg - background-color: $clr-brick-light - &, & * - color: black - a - color: $clr-brick - &:hover - text-decoration: none - color: $clr-brick-bright - -@mixin turqbg - background-color: $clr-turquoise-light - &, & * - color: $clr-turquoise - a - color: $clr-turquoise - &:hover - text-decoration: none - color: $clr-turquoise-bright - -@mixin fullbg - background-position: center center - background-repeat: no-repeat - -webkit-background-size: cover - -moz-background-size: cover - -o-background-size: cover - background-size: cover - -@mixin fullwidthbg - background-position: center top - background-repeat: no-repeat - background-size: 100% auto - -@mixin gradient($gradient-clr1, $gradient-clr2) - background: $gradient-clr1 - // Old browsers - background: -moz-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%) - // FF3.6+ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $gradient-clr1), color-stop(100%, $gradient-clr2)) - // Chrome,Safari4+ - background: -webkit-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%) - // Chrome10+,Safari5.1+ - background: -o-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%) - // Opera 11.10+ - background: -ms-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%) - // IE10+ - background: linear-gradient(to bottom, $gradient-clr1 0%, $gradient-clr2 100%) - // W3C - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-clr1', endColorstr='$gradient-clr2',GradientType=0 ) - // IE6-8 - - -@mixin producersbg - background-color: lighten($clr-turquoise, 68%) - background-image: url("/assets/producers.svg") - background-position: center 50px - background-repeat: no-repeat - background-size: 922px 763px - -@mixin hubsbg - background-color: $brand-colour - background-image: url("/assets/hubs-bg.jpg") - background-position: center center - -@mixin groupsbg - background-color: lighten($clr-brick, 56%) - background-image: url("/assets/groups.svg") - background-position: center 50px - background-repeat: no-repeat - background-size: 922px 922px diff --git a/app/assets/stylesheets/darkswarm/mixins.scss b/app/assets/stylesheets/darkswarm/mixins.scss new file mode 100644 index 0000000000..a473a014bf --- /dev/null +++ b/app/assets/stylesheets/darkswarm/mixins.scss @@ -0,0 +1,253 @@ +// Note this mixin file is used in ADMIN and FRONTEND + +@import "branding"; + +// Generic \\ + +@mixin tiledPane { + background-image: url("/assets/tile-wide.png"); + background-color: $brand-colour; + background-position: center center; + + @include paneWhiteText; +} + +@mixin panepadding { + padding-top: 100px; + padding-bottom: 100px; +} + +@mixin paneWhiteText { + &, & * { + color: white; + } +} + +@mixin sidepaddingSm { + padding-left: 10px; + padding-right: 10px; + + @media all and (min-width: 768px) { + padding-left: 20px; + padding-right: 20px; + } + + @media all and (min-width: 1024px) { + padding-left: 50px; + padding-right: 50px; + } + + @media all and (min-width: 1200px) { + padding-left: 100px; + padding-right: 100px; + } +} + +@mixin sidepaddingBg { + padding-left: 20px; + padding-right: 20px; + + @media all and (min-width: 768px) { + padding-left: 40px; + padding-right: 40px; + } + + @media all and (min-width: 1024px) { + padding-left: 100px; + padding-right: 100px; + } + + @media all and (min-width: 1200px) { + padding-left: 200px; + padding-right: 200px; + } +} + +@mixin disabled { + color: $disabled-bright; +} + +@mixin box-shadow($box-shadow) { + -moz-box-shadow: $box-shadow; + -webkit-box-shadow: $box-shadow; + box-shadow: $box-shadow; +} + +@mixin elipse-shadow($elipse-shadow) { + content: ""; + position: absolute; + z-index: -1; + -webkit-box-shadow: $elipse-shadow; + box-shadow: $elipse-shadow; + bottom: -12%; + left: 10%; + right: 10%; + width: 80%; + height: 10%; + -moz-border-radius: 100%; + border-radius: 100%; +} + +@mixin border-radius($border-radius) { + -webkit-border-radius: $border-radius; + border-radius: $border-radius; +} + +@mixin border-radius-mixed($border-radius-TL, $border-radius-TR, $border-radius-BR, $border-radius-BL) { + -webkit-border-radius: $border-radius-TL $border-radius-TR $border-radius-BR $border-radius-BL; + border-radius: $border-radius-TL $border-radius-TR $border-radius-BR $border-radius-BL; +} + +@mixin transform-translate($translate) { + -ms-transform: $translate; + -webkit-transform: $translate; + transform: $translate; +} + +@mixin transform-scale($scale) { + -moz-transform: $scale; + -webkit-transform: $scale; + -o-transform: $scale; + -ms-transform: $scale; + transform: $scale; +} + +// Typography \\ + +@mixin textpress { + text-shadow: 0 -1px 1px #111111, 0 1px 2px #222222; +} + +@mixin textsoftpress { + text-shadow: 0 0 3px rgba(0, 0, 0, 0.35); +} + +// TO USE icon-font +// Assign to :before or :after element +// Assign content: "string" + +@mixin icon-font { + font-family: "OFN"; + display: inline-block; + font-weight: normal; + font-style: normal; + font-variant: normal; + text-transform: none; +} + +// Background options \\ + +@mixin darkbg { + background-color: $clr-brick; + + &, & * { + color: white; + } + + a { + color: $clr-brick-ultra-light; + + &:hover { + text-decoration: none; + color: $clr-brick-light; + } + } +} + +@mixin lightbg { + background-color: $clr-brick-light; + + &, & * { + color: black; + } + + a { + color: $clr-brick; + + &:hover { + text-decoration: none; + color: $clr-brick-bright; + } + } +} + +@mixin turqbg { + background-color: $clr-turquoise-light; + + &, & * { + color: $clr-turquoise; + } + + a { + color: $clr-turquoise; + + &:hover { + text-decoration: none; + color: $clr-turquoise-bright; + } + } +} + +@mixin fullbg { + background-position: center center; + background-repeat: no-repeat; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; +} + +@mixin fullwidthbg { + background-position: center top; + background-repeat: no-repeat; + background-size: 100% auto; +} + +@mixin gradient($gradient-clr1, $gradient-clr2) { + background: $gradient-clr1; + + // Old browsers + background: -moz-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%); + + // FF3.6+ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $gradient-clr1), color-stop(100%, $gradient-clr2)); + + // Chrome,Safari4+ + background: -webkit-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%); + + // Chrome10+,Safari5.1+ + background: -o-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%); + + // Opera 11.10+ + background: -ms-linear-gradient(top, $gradient-clr1 0%, $gradient-clr2 100%); + + // IE10+ + background: linear-gradient(to bottom, $gradient-clr1 0%, $gradient-clr2 100%); + + // W3C + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$gradient-clr1', endColorstr='$gradient-clr2',GradientType=0 ); + + // IE6-8 +} + +@mixin producersbg { + background-color: lighten($clr-turquoise, 68%); + background-image: url("/assets/producers.svg"); + background-position: center 50px; + background-repeat: no-repeat; + background-size: 922px 763px; +} + +@mixin hubsbg { + background-color: $brand-colour; + background-image: url("/assets/hubs-bg.jpg"); + background-position: center center; +} + +@mixin groupsbg { + background-color: lighten($clr-brick, 56%); + background-image: url("/assets/groups.svg"); + background-position: center 50px; + background-repeat: no-repeat; + background-size: 922px 922px; +} diff --git a/app/assets/stylesheets/darkswarm/modal-enterprises.css.sass b/app/assets/stylesheets/darkswarm/modal-enterprises.css.sass deleted file mode 100644 index e4724a13f5..0000000000 --- a/app/assets/stylesheets/darkswarm/modal-enterprises.css.sass +++ /dev/null @@ -1,165 +0,0 @@ -@import branding -@import mixins - - -// Generic styles for use - -.modal-centered - text-align: center - p - margin-bottom: 0 - -.modal-header, p.modal-header - text-align: center - text-transform: uppercase - font-size: 1rem - font-weight: 400 - color: $disabled-dark - border-bottom: 1px solid $light-grey - margin-top: 0.75rem - margin-bottom: 0.5rem - -// Enterprise promo image and text - -.highlight - position: relative - -.highlight-top - padding-top: 0.75rem - padding-bottom: 0.75rem - background-color: rgba(255,255,255,0.65) - position: absolute - bottom: 0 - width: 100% - border: 0 - outline: 0 - @media only screen and (max-width: 640px) - padding-top: 0.5rem - padding-bottom: 0.35rem - - h3, p - margin-top: 0 - margin-bottom: 0 - padding-bottom: 0 - line-height: 1 - - h3 > i - color: $clr-brick - - p - line-height: 2.4 - @media all and (max-width: 640px) - line-height: 1.4 - - h3 a:hover span - border-bottom: 1px solid $clr-brick-bright - - .is_producer - &, & * - color: $clr-turquoise - - -// ABOUT Enterprise - -.about-container - min-height: 20px - margin-bottom: 0.5rem - overflow-x: hidden - border-bottom: 1px solid $light-grey - @include box-shadow(0 2px 2px -2px $light-grey) - - .enterprise-logo, img - float: left - margin-right: 2rem - margin-bottom: 0.5rem - max-width: 180px - max-height: 180px - -// CONTACT Enterprise - -.contact-container - a:hover - text-decoration: underline - -// FOLLOW Enterprise - -.follow-icons - // text-align: center - span - display: inline-block - margin: 0 0.25rem 0.75rem 0.25rem - i - font-size: 2rem - a - color: #999 - &:hover, &:active, &:focus - color: #666 - - -// CALL TO ACTION - hub click throughs - -.cta-container - background-color: #ececec - padding-top: 0.75rem - - label - text-transform: uppercase - font-size: 0.875rem - margin-bottom: 0.75rem - 5rem - color: $dark-grey - - label.right - color: $disabled-dark - span - text-transform: capitalize - - .cta-hub - margin-right: 2rem - margin-top: 0rem - margin-bottom: 0.75rem - display: inline-block - - &.secondary - color: $disabled-dark - - &.primary - color: $clr-brick - - i.ofn-i_033-open-sign, i.ofn-i_032-closed-sign - margin-right: 0.1rem - font-size: 2rem - padding: 0.15rem 0.25rem 0.35rem 0.25rem - float: left - - .hub-name - margin-top: 0.75rem - margin-bottom: 0.2rem - font-weight: 400 - display: inline-block - border-bottom: 1px solid transparent - .button-address - margin-top: 0.5rem - margin-bottom: 0.2rem - margin-left: 0.1rem - text-transform: uppercase - font-weight: 300 - font-style: italic - font-size: 0.75rem - display: inline-block - border-bottom: 1px solid transparent - @media all and (max-width: 640px) - display: none - - &:hover, &:focus, &:active - &.secondary - color: #666 - .hub-name, .button-address - border-bottom: 1px solid #999 - &.primary - color: $clr-brick-bright - .hub-name, .button-address - border-bottom: 1px solid $clr-brick-bright - - - diff --git a/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss b/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss new file mode 100644 index 0000000000..7b37c46955 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/modal-enterprises.css.scss @@ -0,0 +1,212 @@ +@import "branding"; +@import "mixins"; + +// Generic styles for use + +.modal-centered { + text-align: center; + + p { + margin-bottom: 0; + } +} + +.modal-header, p.modal-header { + text-align: center; + text-transform: uppercase; + font-size: 1rem; + font-weight: 400; + color: $disabled-dark; + border-bottom: 1px solid $light-grey; + margin-top: 0.75rem; + margin-bottom: 0.5rem; +} + +// Enterprise promo image and text + +.highlight { + position: relative; +} + +.highlight-top { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + background-color: rgba(255, 255, 255, 0.65); + position: absolute; + bottom: 0; + width: 100%; + border: 0; + outline: 0; + + @media only screen and (max-width: 640px) { + padding-top: 0.5rem; + padding-bottom: 0.35rem; + } + + h3, p { + margin-top: 0; + margin-bottom: 0; + padding-bottom: 0; + line-height: 1; + } + + h3 > i { + color: $clr-brick; + } + + p { + line-height: 2.4; + + @media all and (max-width: 640px) { + line-height: 1.4; + } + } + + h3 a:hover span { + border-bottom: 1px solid $clr-brick-bright; + } + + .is_producer { + &, & * { + color: $clr-turquoise; + } + } +} + +// ABOUT Enterprise + +.about-container { + min-height: 20px; + margin-bottom: 0.5rem; + overflow-x: hidden; + border-bottom: 1px solid $light-grey; + + @include box-shadow(0 2px 2px -2px $light-grey); + + .enterprise-logo, img { + float: left; + margin-right: 2rem; + margin-bottom: 0.5rem; + max-width: 180px; + max-height: 180px; + } +} + +// CONTACT Enterprise + +.contact-container { + a:hover { + text-decoration: underline; + } +} + +// FOLLOW Enterprise + +.follow-icons { + // text-align: center + span { + display: inline-block; + margin: 0 0.25rem 0.75rem 0.25rem; + } + + i { + font-size: 2rem; + } + + a { + color: #999; + + &:hover, &:active, &:focus { + color: #666; + } + } +} + +// CALL TO ACTION - hub click throughs + +.cta-container { + background-color: #ececec; + padding-top: 0.75rem; + + label { + text-transform: uppercase; + font-size: 0.875rem; + margin-bottom: 0.75rem; + + 5rem {} + + color: $dark-grey; + } + + label.right { + color: $disabled-dark; + + span { + text-transform: capitalize; + } + } + + .cta-hub { + margin-right: 2rem; + margin-top: 0rem; + margin-bottom: 0.75rem; + display: inline-block; + + &.secondary { + color: $disabled-dark; + } + + &.primary { + color: $clr-brick; + } + + i.ofn-i_033-open-sign, i.ofn-i_032-closed-sign { + margin-right: 0.1rem; + font-size: 2rem; + padding: 0.15rem 0.25rem 0.35rem 0.25rem; + float: left; + } + + .hub-name { + margin-top: 0.75rem; + margin-bottom: 0.2rem; + font-weight: 400; + display: inline-block; + border-bottom: 1px solid transparent; + } + + .button-address { + margin-top: 0.5rem; + margin-bottom: 0.2rem; + margin-left: 0.1rem; + text-transform: uppercase; + font-weight: 300; + font-style: italic; + font-size: 0.75rem; + display: inline-block; + border-bottom: 1px solid transparent; + + @media all and (max-width: 640px) { + display: none; + } + } + + &:hover, &:focus, &:active { + &.secondary { + color: #666; + + .hub-name, .button-address { + border-bottom: 1px solid #999; + } + } + + &.primary { + color: $clr-brick-bright; + + .hub-name, .button-address { + border-bottom: 1px solid $clr-brick-bright; + } + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/modal-login.css.sass b/app/assets/stylesheets/darkswarm/modal-login.css.sass deleted file mode 100644 index 61108145bb..0000000000 --- a/app/assets/stylesheets/darkswarm/modal-login.css.sass +++ /dev/null @@ -1,13 +0,0 @@ - -// Styling for login modal to style tabs -.reveal-modal.login-modal - border-bottom-color: #efefef - -.login-modal - background: #efefef - .tabs-content - background: #fff - padding-top: 10px - - - \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/modal-login.css.scss b/app/assets/stylesheets/darkswarm/modal-login.css.scss new file mode 100644 index 0000000000..4b87a7d1d9 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/modal-login.css.scss @@ -0,0 +1,13 @@ +// Styling for login modal to style tabs +.reveal-modal.login-modal { + border-bottom-color: #efefef; +} + +.login-modal { + background: #efefef; + + .tabs-content { + background: #fff; + padding-top: 10px; + } +} diff --git a/app/assets/stylesheets/darkswarm/modals.css.sass b/app/assets/stylesheets/darkswarm/modals.css.sass deleted file mode 100644 index 5844a8b600..0000000000 --- a/app/assets/stylesheets/darkswarm/modals.css.sass +++ /dev/null @@ -1,54 +0,0 @@ -@import branding -@import mixins - -dialog, .reveal-modal - border: none - outline: none - padding: 30px 20px 0 20px - border-bottom: 30px solid white - overflow-y: scroll - overflow-x: hidden - min-height: 260px - // Not working yet - want a nice gradient shadow when there is overflow - needs JS too - // &:after - // @include elipse-shadow(0 0 40px rgba(0, 0, 0, 0.8)) - - - // Reveal.js break point: - // @media only screen and (max-width: 40.063em) - - // Small - when modal IS full screen - @media only screen and (max-width: 640px) - max-height: initial - // This is needed to make the height not the height of whole content page - min-height: 100% - position: absolute !important - top: 0 - left: 0 - - // Medium and up - when modal IS NOT full screen - @media only screen and (min-width: 641px) - top: 10% - max-height: 80% - -.reveal-modal-bg - background-color: rgba(0,0,0,0.85) - position: fixed - -dialog .close-reveal-modal, .reveal-modal .close-reveal-modal - right: 0.25rem - top: 0.25rem - background-color: rgba(205,205,205,0.65) - text-shadow: none - font-size: 2rem - padding: 0.45rem - color: #666 - z-index: 9999999 - @include border-radius(999999rem) - &:hover, &:active, &:focus - background-color: rgba(205,205,205,1) - color: #333 - -// Prevent body from scrolling when a modal is open -body.modal-open - overflow: hidden diff --git a/app/assets/stylesheets/darkswarm/modals.css.scss b/app/assets/stylesheets/darkswarm/modals.css.scss new file mode 100644 index 0000000000..122d840f2a --- /dev/null +++ b/app/assets/stylesheets/darkswarm/modals.css.scss @@ -0,0 +1,64 @@ +@import "branding"; +@import "mixins"; + +dialog, .reveal-modal { + border: none; + outline: none; + padding: 30px 20px 0 20px; + border-bottom: 30px solid white; + overflow-y: scroll; + overflow-x: hidden; + min-height: 260px; + + // Not working yet - want a nice gradient shadow when there is overflow - needs JS too + // &:after + // @include elipse-shadow(0 0 40px rgba(0, 0, 0, 0.8)) + + // Reveal.js break point: + // @media only screen and (max-width: 40.063em) + + // Small - when modal IS full screen + @media only screen and (max-width: 640px) { + max-height: initial; + + // This is needed to make the height not the height of whole content page + min-height: 100%; + position: absolute !important; + top: 0; + left: 0; + } + + // Medium and up - when modal IS NOT full screen + @media only screen and (min-width: 641px) { + top: 10%; + max-height: 80%; + } +} + +.reveal-modal-bg { + background-color: rgba(0, 0, 0, 0.85); + position: fixed; +} + +dialog .close-reveal-modal, .reveal-modal .close-reveal-modal { + right: 0.25rem; + top: 0.25rem; + background-color: rgba(205, 205, 205, 0.65); + text-shadow: none; + font-size: 2rem; + padding: 0.45rem; + color: #666; + z-index: 9999999; + + @include border-radius(999999rem); + + &:hover, &:active, &:focus { + background-color: rgba(205, 205, 205, 1); + color: #333; + } +} + +// Prevent body from scrolling when a modal is open +body.modal-open { + overflow: hidden; +} diff --git a/app/assets/stylesheets/darkswarm/overrides.css.sass b/app/assets/stylesheets/darkswarm/overrides.css.sass deleted file mode 100644 index fcec6b455d..0000000000 --- a/app/assets/stylesheets/darkswarm/overrides.css.sass +++ /dev/null @@ -1,2 +0,0 @@ -.row - max-width: 74em diff --git a/app/assets/stylesheets/darkswarm/overrides.css.scss b/app/assets/stylesheets/darkswarm/overrides.css.scss new file mode 100644 index 0000000000..ccad1b5d35 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/overrides.css.scss @@ -0,0 +1,3 @@ +.row { + max-width: 74em; +} diff --git a/app/assets/stylesheets/darkswarm/page_alert.css.sass b/app/assets/stylesheets/darkswarm/page_alert.css.sass deleted file mode 100644 index 7e66d35518..0000000000 --- a/app/assets/stylesheets/darkswarm/page_alert.css.sass +++ /dev/null @@ -1,58 +0,0 @@ -@import branding -@import animations -@import "compass/css3/transition" - -// Basic style \\ -.page-alert - .alert-box - height: 55px - overflow: hidden - border: 1px solid rgba($dark-grey, 0.35) - border-left: none - border-right: none - background-color: #bbb - background-image: url("/assets/tile-wide.png") - background-position: center center - padding: 12px 0 8px 0 - margin: 0 - - h6 - @media all and (max-width: 480px) - font-size: 10px - line-height: 24px - - .alert-cta - &, & * - @include csstrans - color: #333 - strong - letter-spacing: 0.5px - a:hover, a:active, a:focus - &, & * - text-decoration: none - color: white - - -// Show-hide animation \\ -.off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed, nav.tab-bar - @include transition(all, 1000ms, ease-in-out) - - &.move-down - margin-top: 55px - @include transition(all, 1000ms, ease-in-out) - - -.off-canvas-wrap .inner-wrap .page-alert.fixed - top: -55px - z-index: 1 - // TODO: Compass to disable transition - -moz-transition: none - -webkit-transition: none - -o-transition: color 0 ease-in - transition: none - -.off-canvas-wrap.move-right .inner-wrap.move-down - .page-alert - top: -55px * 2 - .left-off-canvas-menu - top: -55px diff --git a/app/assets/stylesheets/darkswarm/page_alert.css.scss b/app/assets/stylesheets/darkswarm/page_alert.css.scss new file mode 100644 index 0000000000..e7bdcd53a6 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/page_alert.css.scss @@ -0,0 +1,77 @@ +@import "branding"; +@import "animations"; +@import "compass/css3/transition"; + +// Basic style \\ +.page-alert { + .alert-box { + height: 55px; + overflow: hidden; + border: 1px solid rgba($dark-grey, 0.35); + border-left: none; + border-right: none; + background-color: #bbb; + background-image: url("/assets/tile-wide.png"); + background-position: center center; + padding: 12px 0 8px 0; + margin: 0; + + h6 { + @media all and (max-width: 480px) { + font-size: 10px; + line-height: 24px; + } + } + + .alert-cta { + &, & * { + @include csstrans; + + color: #333; + } + + strong { + letter-spacing: 0.5px; + } + + a:hover, a:active, a:focus { + &, & * { + text-decoration: none; + color: white; + } + } + } + } +} + +// Show-hide animation \\ +.off-canvas-wrap .inner-wrap, .off-canvas-wrap .inner-wrap .fixed, nav.tab-bar { + @include transition(all, 1000ms, ease-in-out); + + &.move-down { + margin-top: 55px; + + @include transition(all, 1000ms, ease-in-out); + } +} + +.off-canvas-wrap .inner-wrap .page-alert.fixed { + top: -55px; + z-index: 1; + + // TODO: Compass to disable transition + -moz-transition: none; + -webkit-transition: none; + -o-transition: color 0 ease-in; + transition: none; +} + +.off-canvas-wrap.move-right .inner-wrap.move-down { + .page-alert { + top: -55px * 2; + } + + .left-off-canvas-menu { + top: -55px; + } +} diff --git a/app/assets/stylesheets/darkswarm/producer_node.css.sass b/app/assets/stylesheets/darkswarm/producer_node.css.sass deleted file mode 100644 index 24eb0467c2..0000000000 --- a/app/assets/stylesheets/darkswarm/producer_node.css.sass +++ /dev/null @@ -1,97 +0,0 @@ -@import branding -@import mixins - -.producers - .active_table .active_table_node - - // Header row - @media all and (max-width: 640px) - .skinny-head - background-color: $clr-turquoise-light - @include border-radius-mixed(0.5em, 0.5em, 0, 0) - margin-top: -1rem - margin-bottom: 1rem - padding-top: 1rem - padding-bottom: 1rem - .follow-icons - &, & * - font-size: 1.5rem - - - // Producer icons - i.ofn-i_059-producer, i.ofn-i_060-producer-reversed - font-size: 2rem - display: inline-block - margin-right: 0.25rem - float: left - color: $clr-turquoise - - a - &:hover, &:active, &:focus - color: $clr-turquoise-bright - span - text-decoration: underline - - &.is_distributor, &.is_distributor i.ofn-i_059-producer, &.is_distributor i.ofn-i_060-producer-reversed - color: $clr-brick - &:hover, &:active, &:focus - color: $clr-brick-bright - - a.cta-hub - &:hover, &:focus, &:active - &.secondary - color: #666 - .hub-name, .button-address - border-bottom: 1px solid #999 - &.primary - color: $clr-brick-bright - .hub-name, .button-address - border-bottom: 1px solid $clr-brick-bright - - p.word-wrap - margin-bottom: 0 - &:last-child - margin-bottom: 1rem - - .fat-taxons - background-color: $clr-turquoise-light - - .fat-properties - background-color: $clr-turquoise-ultra-light - border: 1px solid $clr-turquoise-light - - .producer-name - color: $clr-turquoise - - //Open row - &.open - .active_table_row - border-left: 1px solid $clr-turquoise-bright - border-right: 1px solid $clr-turquoise-bright - background-color: rgba(206,239,228,0.4) - .cta-container - background: none - .columns img - padding: 1rem 0 - max-height: 160px - width: auto - &.left - padding: 0.25rem 1rem 0.25rem 0 - &.right - padding: 0.25rem 0.5rem 0.25rem 2rem - - .active_table_row:first-child - border-top: 1px solid $clr-turquoise-bright - - .active_table_row:last-child - border-bottom: 1px solid $clr-turquoise-bright - cursor: auto - - //Closed row - &.closed - .active_table_row.closed - border: 1px solid transparent - @media all and (max-width: 640px) - border-color: $clr-turquoise-light - &:hover, &:active, &:focus - border-color: $clr-turquoise diff --git a/app/assets/stylesheets/darkswarm/producer_node.css.scss b/app/assets/stylesheets/darkswarm/producer_node.css.scss new file mode 100644 index 0000000000..921d8df544 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/producer_node.css.scss @@ -0,0 +1,145 @@ +@import "branding"; +@import "mixins"; + +.producers { + .active_table .active_table_node { + // Header row + @media all and (max-width: 640px) { + .skinny-head { + background-color: $clr-turquoise-light; + + @include border-radius-mixed(0.5em, 0.5em, 0, 0); + + margin-top: -1rem; + margin-bottom: 1rem; + padding-top: 1rem; + padding-bottom: 1rem; + } + + .follow-icons { + &, & * { + font-size: 1.5rem; + } + } + } + + // Producer icons + i.ofn-i_059-producer, i.ofn-i_060-producer-reversed { + font-size: 2rem; + display: inline-block; + margin-right: 0.25rem; + float: left; + color: $clr-turquoise; + } + + a { + &:hover, &:active, &:focus { + color: $clr-turquoise-bright; + + span { + text-decoration: underline; + } + } + + &.is_distributor, &.is_distributor i.ofn-i_059-producer, &.is_distributor i.ofn-i_060-producer-reversed { + color: $clr-brick; + + &:hover, &:active, &:focus { + color: $clr-brick-bright; + } + } + } + + a.cta-hub { + &:hover, &:focus, &:active { + &.secondary { + color: #666; + + .hub-name, .button-address { + border-bottom: 1px solid #999; + } + } + + &.primary { + color: $clr-brick-bright; + + .hub-name, .button-address { + border-bottom: 1px solid $clr-brick-bright; + } + } + } + } + + p.word-wrap { + margin-bottom: 0; + + &:last-child { + margin-bottom: 1rem; + } + } + + .fat-taxons { + background-color: $clr-turquoise-light; + } + + .fat-properties { + background-color: $clr-turquoise-ultra-light; + border: 1px solid $clr-turquoise-light; + } + + .producer-name { + color: $clr-turquoise; + } + + //Open row + &.open { + .active_table_row { + border-left: 1px solid $clr-turquoise-bright; + border-right: 1px solid $clr-turquoise-bright; + background-color: rgba(206, 239, 228, 0.4); + + .cta-container { + background: none; + } + + .columns img { + padding: 1rem 0; + max-height: 160px; + width: auto; + + &.left { + padding: 0.25rem 1rem 0.25rem 0; + } + + &.right { + padding: 0.25rem 0.5rem 0.25rem 2rem; + } + } + } + + .active_table_row:first-child { + border-top: 1px solid $clr-turquoise-bright; + } + + .active_table_row:last-child { + border-bottom: 1px solid $clr-turquoise-bright; + cursor: auto; + } + } + + //Closed row + &.closed { + .active_table_row.closed { + border: 1px solid transparent; + + @media all and (max-width: 640px) { + border-color: $clr-turquoise-light; + } + + &:hover, &:active, &:focus { + border-color: $clr-turquoise; + } + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/producers.css.sass b/app/assets/stylesheets/darkswarm/producers.css.sass deleted file mode 100644 index caa31f224d..0000000000 --- a/app/assets/stylesheets/darkswarm/producers.css.sass +++ /dev/null @@ -1,14 +0,0 @@ -@import branding -@import mixins - -.producers - @include producersbg - @include sidepaddingSm - @include panepadding - a - color: $clr-turquoise - &:hover, &:active, &:focus - color: $clr-turquoise-bright - a.button.primary - &:hover, &:active, &:focus - color: white diff --git a/app/assets/stylesheets/darkswarm/producers.css.scss b/app/assets/stylesheets/darkswarm/producers.css.scss new file mode 100644 index 0000000000..e1a8c7a21b --- /dev/null +++ b/app/assets/stylesheets/darkswarm/producers.css.scss @@ -0,0 +1,24 @@ +@import "branding"; +@import "mixins"; + +.producers { + @include producersbg; + + @include sidepaddingSm; + + @include panepadding; + + a { + color: $clr-turquoise; + + &:hover, &:active, &:focus { + color: $clr-turquoise-bright; + } + } + + a.button.primary { + &:hover, &:active, &:focus { + color: white; + } + } +} diff --git a/app/assets/stylesheets/darkswarm/product_table.css.sass b/app/assets/stylesheets/darkswarm/product_table.css.sass deleted file mode 100644 index 9b0a7b4598..0000000000 --- a/app/assets/stylesheets/darkswarm/product_table.css.sass +++ /dev/null @@ -1,4 +0,0 @@ -.product_table - .row - border: 1px solid black - padding: 8px inherit diff --git a/app/assets/stylesheets/darkswarm/product_table.css.scss b/app/assets/stylesheets/darkswarm/product_table.css.scss new file mode 100644 index 0000000000..1d98464d4d --- /dev/null +++ b/app/assets/stylesheets/darkswarm/product_table.css.scss @@ -0,0 +1,6 @@ +.product_table { + .row { + border: 1px solid black; + padding: 8px inherit; + } +} diff --git a/app/assets/stylesheets/darkswarm/registration.css.sass b/app/assets/stylesheets/darkswarm/registration.css.sass deleted file mode 100644 index ba56701600..0000000000 --- a/app/assets/stylesheets/darkswarm/registration.css.sass +++ /dev/null @@ -1,161 +0,0 @@ -@import branding -@import mixins - -#registration-modal - header - text-align: center - @media all and (max-width: 64em) - text-align: left - .container - background-color: #ffffff - - i - font-size: 150% - - .field - margin-bottom: 1em - - .chunky - padding: 8px - font-size: 1rem - margin: 0 - width: 100% - - label.indent-checkbox - display: block - padding-left: 20px - text-indent: -17px - input - margin: 0px - - label - margin-bottom: 3px - - ol, ul, p - font-size: 0.875rem - ol, ul - padding: 0 - margin: 0 - ol - list-style-type: decimal - - .highlight-box - background: white - padding: 1rem 1.2rem - @media all and (max-width: 64em) - margin-top: 1rem - - #progress-bar - margin-bottom: 15px - .item - font-size: 0.75rem - padding: 10px 0px - text-transform: uppercase - text-align: center - background-color: $clr-blue - border: 2px solid $clr-blue - color: #fff - .item.active - background-color: $disabled-light - border: 2px solid $clr-blue - color: $clr-blue - font-weight: 700 - @include box-shadow(inset 0 0 1px 0 #fff) - - - .image-select - label - font-size: 18px - padding: 21px 0px - #logo-select - display: none - - #image-over - font-size: 18px - padding: 41px 0px - border: 3px dashed #494949 - text-align: center - font-weight: bold - color: #494949 - &.nv-file-over - background-color: #78cd91 - - #or - text-align: center - font-weight: bold - font-size: 18px - padding: 21px 0px - &.horizontal - padding: 41px 0px - - #image-placeholder - font-size: 18px - font-weight: bold - color: #373737 - background-color: #f1f1f1 - text-align: center - border: 3px dashed #494949 - margin-left: auto - margin-right: auto - .spinner - width: 100px - &.logo - .message - padding-top: 6em - .loading - padding-top: 4em - width: 306px - height: 306px - &.promo - .message - padding-top: 4em - .loading - padding-top: 1em - width: 726px - height: 166px - - -#registration-type - #enterprise-types - a.btnpanel - display: block - padding: 1rem - margin-bottom: 1rem - background-color: #efefef - color: black - text-align: center - border: 1px solid transparent - i - font-size: 3rem - h4 - margin-top: 1rem - - &:hover - background-color: #fff - - &#producer-panel:hover - border: 1px solid $clr-turquoise - &, & * - color: $clr-turquoise - - &#hub-panel:hover, &#both-panel:hover - border: 1px solid $clr-brick - &, & * - color: $clr-brick - - &.selected - &, & * - color: #fff - &#hub-panel, &#both-panel - background-color: $clr-brick-bright - &:hover - &, & * - color: white - &#producer-panel - background-color: $clr-turquoise-bright - &:hover - &, & * - color: white - p - clear: both - font-size: 0.875rem diff --git a/app/assets/stylesheets/darkswarm/registration.css.scss b/app/assets/stylesheets/darkswarm/registration.css.scss new file mode 100644 index 0000000000..1f80038f18 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/registration.css.scss @@ -0,0 +1,239 @@ +@import "branding"; +@import "mixins"; + +#registration-modal { + header { + text-align: center; + + @media all and (max-width: 64em) { + text-align: left; + } + } + + .container { + background-color: #ffffff; + } + + i { + font-size: 150%; + } + + .field { + margin-bottom: 1em; + } + + .chunky { + padding: 8px; + font-size: 1rem; + margin: 0; + width: 100%; + } + + label.indent-checkbox { + display: block; + padding-left: 20px; + text-indent: -17px; + + input { + margin: 0px; + } + } + + label { + margin-bottom: 3px; + } + + ol, ul, p { + font-size: 0.875rem; + } + + ol, ul { + padding: 0; + margin: 0; + } + + ol { + list-style-type: decimal; + } + + .highlight-box { + background: white; + padding: 1rem 1.2rem; + + @media all and (max-width: 64em) { + margin-top: 1rem; + } + } + + #progress-bar { + margin-bottom: 15px; + + .item { + font-size: 0.75rem; + padding: 10px 0px; + text-transform: uppercase; + text-align: center; + background-color: $clr-blue; + border: 2px solid $clr-blue; + color: #fff; + } + + .item.active { + background-color: $disabled-light; + border: 2px solid $clr-blue; + color: $clr-blue; + font-weight: 700; + + @include box-shadow(inset 0 0 1px 0 #fff); + } + } + + .image-select { + label { + font-size: 18px; + padding: 21px 0px; + } + + #logo-select { + display: none; + } + } + + #image-over { + font-size: 18px; + padding: 41px 0px; + border: 3px dashed #494949; + text-align: center; + font-weight: bold; + color: #494949; + + &.nv-file-over { + background-color: #78cd91; + } + } + + #or { + text-align: center; + font-weight: bold; + font-size: 18px; + padding: 21px 0px; + + &.horizontal { + padding: 41px 0px; + } + } + + #image-placeholder { + font-size: 18px; + font-weight: bold; + color: #373737; + background-color: #f1f1f1; + text-align: center; + border: 3px dashed #494949; + margin-left: auto; + margin-right: auto; + + .spinner { + width: 100px; + } + + &.logo { + .message { + padding-top: 6em; + } + + .loading { + padding-top: 4em; + } + + width: 306px; + height: 306px; + } + + &.promo { + .message { + padding-top: 4em; + } + + .loading { + padding-top: 1em; + } + + width: 726px; + height: 166px; + } + } +} + +#registration-type { + #enterprise-types { + a.btnpanel { + display: block; + padding: 1rem; + margin-bottom: 1rem; + background-color: #efefef; + color: black; + text-align: center; + border: 1px solid transparent; + + i { + font-size: 3rem; + } + + h4 { + margin-top: 1rem; + } + + &:hover { + background-color: #fff; + } + + &#producer-panel:hover { + border: 1px solid $clr-turquoise; + + &, & * { + color: $clr-turquoise; + } + } + + &#hub-panel:hover, &#both-panel:hover { + border: 1px solid $clr-brick; + + &, & * { + color: $clr-brick; + } + } + + &.selected { + &, & * { + color: #fff; + } + + &#hub-panel, &#both-panel { + background-color: $clr-brick-bright; + + &:hover { + &, & * { + color: white; + } + } + } + + &#producer-panel { + background-color: $clr-turquoise-bright; + + &:hover { + &, & * { + color: white; + } + } + } + } + + p { + clear: both; + font-size: 0.875rem; + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/shop.css.sass b/app/assets/stylesheets/darkswarm/shop.css.sass deleted file mode 100644 index 5cfcef46b8..0000000000 --- a/app/assets/stylesheets/darkswarm/shop.css.sass +++ /dev/null @@ -1,111 +0,0 @@ -@import mixins -@import animations -@import variables -@import branding -@import big-input - -// Shop partials -@import shop-inputs -@import shop-navigation -@import shop-product-rows -@import shop-taxon-flag -@import shop-popovers - -.darkswarm - products - display: block - padding-top: 20px - @media all and (max-width: 768px) - input.button.right - float: left - - @media all and (max-width: 480px) - .add_to_cart - margin-top: 2rem - - form - input.small.button.primary.right.add_to_cart - &.dirty - padding-left: 3.2rem - i.cart-spinner - position: absolute - top: 14px - right: 146px - color: white - font-size: 1.2em - // Necessary to be below Z index of cart popover: - z-index: 98 - -webkit-animation: spin 2s infinite linear - animation: spin 2s infinite linear - - product - @include csstrans - border-bottom: 1px solid #e5e5e5 - border-top: 1px solid #e5e5e5 - padding-bottom: 1px - margin-bottom: 20px !important - position: relative - display: block - color: $med-drk-grey - - &:hover, &:focus, &:active - border-bottom: 1px solid $clr-brick-med-bright - border-top: 1px solid $clr-brick-med-bright - - // BULK - .bulk-buy - font-size: 0.875rem - @media all and (max-width: 768px) - font-size: 0.75rem - - .bulk-buy, .bulk-buy i - color: #888 - - .inline - display: inline - - .spinner - width: 100px - margin-bottom: 20px - - // ICONS - i - font-size: 0.75em - padding-right: 0.9375rem - @media all and (max-width: 640px) - padding-right: 0.25rem - - i.ofn-i_056-bulk - font-size: 1rem - padding-right: 0rem - - i.ofn-i_036-producers - padding-left: 0.2rem - padding-right: 0rem - font-size: 0.8rem - - .alert-box.shopfront-message - border: 2px solid $clr-turquoise - border-radius: 5px - background-color: $clr-turquoise-light - color: $clr-turquoise - a - color: #0096ad - &:hover, &:focus, &:active - text-decoration: none - color: #4aadbd - - - .shopfront_closed_message, .shopfront_hidden_message - padding: 15px - border-radius: 5px - - .shopfront_closed_message - border: 2px solid #eb4c46 - - .shopfront_closed_message - margin: 2em 0em - - .shopfront_hidden_message - border: 2px solid #db4 - margin: 2em 0em diff --git a/app/assets/stylesheets/darkswarm/shop.css.scss b/app/assets/stylesheets/darkswarm/shop.css.scss new file mode 100644 index 0000000000..33ccbb31e7 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/shop.css.scss @@ -0,0 +1,146 @@ +@import "mixins"; +@import "animations"; +@import "variables"; +@import "branding"; +@import "big-input"; + +// Shop partials +@import "shop-inputs"; +@import "shop-navigation"; +@import "shop-product-rows"; +@import "shop-taxon-flag"; +@import "shop-popovers"; + +.darkswarm { + products { + display: block; + padding-top: 20px; + + @media all and (max-width: 768px) { + input.button.right { + float: left; + } + } + + @media all and (max-width: 480px) { + .add_to_cart { + margin-top: 2rem; + } + } + + form { + input.small.button.primary.right.add_to_cart { + &.dirty { + padding-left: 3.2rem; + } + } + + i.cart-spinner { + position: absolute; + top: 14px; + right: 146px; + color: white; + font-size: 1.2em; + + // Necessary to be below Z index of cart popover: + z-index: 98; + -webkit-animation: spin 2s infinite linear; + animation: spin 2s infinite linear; + } + } + + product { + @include csstrans; + + border-bottom: 1px solid #e5e5e5; + border-top: 1px solid #e5e5e5; + padding-bottom: 1px; + margin-bottom: 20px !important; + position: relative; + display: block; + color: $med-drk-grey; + + &:hover, &:focus, &:active { + border-bottom: 1px solid $clr-brick-med-bright; + border-top: 1px solid $clr-brick-med-bright; + } + + // BULK + .bulk-buy { + font-size: 0.875rem; + + @media all and (max-width: 768px) { + font-size: 0.75rem; + } + } + + .bulk-buy, .bulk-buy i { + color: #888; + } + + .inline { + display: inline; + } + + .spinner { + width: 100px; + margin-bottom: 20px; + } + + // ICONS + i { + font-size: 0.75em; + padding-right: 0.9375rem; + + @media all and (max-width: 640px) { + padding-right: 0.25rem; + } + } + + i.ofn-i_056-bulk { + font-size: 1rem; + padding-right: 0rem; + } + + i.ofn-i_036-producers { + padding-left: 0.2rem; + padding-right: 0rem; + font-size: 0.8rem; + } + } + } + + .alert-box.shopfront-message { + border: 2px solid $clr-turquoise; + border-radius: 5px; + background-color: $clr-turquoise-light; + color: $clr-turquoise; + + a { + color: #0096ad; + + &:hover, &:focus, &:active { + text-decoration: none; + color: #4aadbd; + } + } + } + + .shopfront_closed_message, .shopfront_hidden_message { + padding: 15px; + border-radius: 5px; + } + + .shopfront_closed_message { + border: 2px solid #eb4c46; + } + + .shopfront_closed_message { + margin: 2em 0em; + } + + .shopfront_hidden_message { + border: 2px solid #db4; + margin: 2em 0em; + } +} diff --git a/app/assets/stylesheets/darkswarm/shopping-cart.css.sass b/app/assets/stylesheets/darkswarm/shopping-cart.css.sass deleted file mode 100644 index 6fd48e0970..0000000000 --- a/app/assets/stylesheets/darkswarm/shopping-cart.css.sass +++ /dev/null @@ -1,70 +0,0 @@ -@import mixins -@import branding -@import "compass/css3/user-interface" - -.cart - @include user-select(none) - .cart-span, .cart-span a - display: inline-block - .cart-span - float: left - .joyride-tip-guide - display: block - right: 10px - top: 55px - width: 480px - - @media screen and (min-width: 641px) - overflow-y: auto - max-height: calc(95vh - 55px) - - @media screen and (max-width: 640px) - width: 96% - - .joyride-nub - right: 22px !important - left: auto - - table - width: 100% - border: none - border-spacing: 0px - margin-bottom: 5px - - tr.total-cart - color: #fff - background-color: #424242 - td - color: #fff - tr.product-cart - background-color: #333333 - border-top: 1px solid #424242 - td - padding: 4px 12px - color: #fff - .buttons - margin-bottom: 0.1em - .button - height: auto - top: 0px - -// Shopping cart -#cart-detail - .cart-item-delete - a.delete - font-size: 1.125em - -.item-thumb-image - display: none - @media screen and (min-width: 640px) - display: inline-block - float: left - padding-right: 0.5em - width: 36px - height: 36px - - - -#edit-cart - button, .button - margin: 0 diff --git a/app/assets/stylesheets/darkswarm/shopping-cart.css.scss b/app/assets/stylesheets/darkswarm/shopping-cart.css.scss new file mode 100644 index 0000000000..25ed0ba930 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/shopping-cart.css.scss @@ -0,0 +1,98 @@ +@import "mixins"; +@import "branding"; +@import "compass/css3/user-interface"; + +.cart { + @include user-select(none); + + .cart-span, .cart-span a { + display: inline-block; + } + + .cart-span { + float: left; + } + + .joyride-tip-guide { + display: block; + right: 10px; + top: 55px; + width: 480px; + + @media screen and (min-width: 641px) { + overflow-y: auto; + max-height: calc(95vh - 55px); + } + + @media screen and (max-width: 640px) { + width: 96%; + } + + .joyride-nub { + right: 22px !important; + left: auto; + } + + table { + width: 100%; + border: none; + border-spacing: 0px; + margin-bottom: 5px; + + tr.total-cart { + color: #fff; + background-color: #424242; + + td { + color: #fff; + } + } + + tr.product-cart { + background-color: #333333; + border-top: 1px solid #424242; + + td { + padding: 4px 12px; + color: #fff; + } + } + } + + .buttons { + margin-bottom: 0.1em; + + .button { + height: auto; + top: 0px; + } + } + } +} + +// Shopping cart +#cart-detail { + .cart-item-delete { + a.delete { + font-size: 1.125em; + } + } +} + +.item-thumb-image { + display: none; + + @media screen and (min-width: 640px) { + display: inline-block; + float: left; + padding-right: 0.5em; + width: 36px; + height: 36px; + } +} + +#edit-cart { + button, .button { + margin: 0; + } +} diff --git a/app/assets/stylesheets/darkswarm/sidebar.css.sass b/app/assets/stylesheets/darkswarm/sidebar.css.sass deleted file mode 100644 index 4addd035dc..0000000000 --- a/app/assets/stylesheets/darkswarm/sidebar.css.sass +++ /dev/null @@ -1,31 +0,0 @@ -// OMG -// We can't import foundation components? -// See https://github.com/zurb/foundation/issues/3855#issuecomment-30372252 - -@import "variables" -@import "components/global" -@import "components/buttons" -@import "components/panels" - - -#sidebar - margin-top: 1.875em - $bg: #222 - $padding: emCalc(20) - $adjust: true - $adjust: true - @include panel($bg, $padding, $adjust) - .content - background: white - - .tabs dd a - padding: 0.5em 1em - - #account - dl - @include clearfix - dt, dd - display: inline-block - - p > strong - display: block diff --git a/app/assets/stylesheets/darkswarm/sidebar.css.scss b/app/assets/stylesheets/darkswarm/sidebar.css.scss new file mode 100644 index 0000000000..18718062da --- /dev/null +++ b/app/assets/stylesheets/darkswarm/sidebar.css.scss @@ -0,0 +1,41 @@ +// OMG +// We can't import foundation components? +// See https://github.com/zurb/foundation/issues/3855#issuecomment-30372252 + +@import "variables"; +@import "components/global"; +@import "components/buttons"; +@import "components/panels"; + +#sidebar { + margin-top: 1.875em; + + $bg: #222; + $padding: emCalc(20); + $adjust: true; + $adjust: true; + + @include panel($bg, $padding, $adjust); + + .content { + background: white; + } + + .tabs dd a { + padding: 0.5em 1em; + } + + #account { + dl { + @include clearfix; + } + + dt, dd { + display: inline-block; + } + + p > strong { + display: block; + } + } +} diff --git a/app/assets/stylesheets/darkswarm/signup.css.sass b/app/assets/stylesheets/darkswarm/signup.css.sass deleted file mode 100644 index 12c01d0325..0000000000 --- a/app/assets/stylesheets/darkswarm/signup.css.sass +++ /dev/null @@ -1,119 +0,0 @@ -@import branding -@import mixins -@import typography -@import animations -@import variables - - -#producer-signup.pane, #shops-signup.pane - @include tiledPane - - h2 - margin-bottom: 2rem - font-size: 4.4rem - font-weight: 300 - -#producer-details.pane, #hub-details.pane, .groups-details.pane - background-color: lighten($ofn-grey, 44%) - - -#producer-case-studies, #shops-case-studies - @include hubsbg - padding-top: 100px - padding-bottom: 100px - -webkit-filter: brightness(1.1) - filter: brightness(1.1) - h2 - color: $brand-colour - font-size: 3rem - .case-study - background-color: rgba(255, 255, 255, 0.5) - padding: 1rem - margin-top: 2rem - text-align: center - .case-study-img - background-color: white - margin-bottom: 1rem - @media all and (min-width: 768px) - float: right - margin-left: 2rem - @media all and (min-width: 640px) - text-align: left - h4, a - color: $brand-colour - a - &, & * - @include csstrans - opacity: 1 - &:hover, &:focus, &:active - &, & * - opacity: 0.75 - - -// Signup tables \\ -table.signup-table - width: 100% - border: 0 - -table.signup-table.hubs-table, table.signup-table.producers-table - tr - td - background-color: white - border-bottom: 1px solid rgba($ofn-grey, 0.3) - td:nth-child(2) - background-color: lighten($ofn-grey, 46%) - td:nth-child(3) - background-color: lighten($ofn-grey, 41%) - td:last-child - &, & i - color: $brand-colour - border-bottom: 1px solid rgba($brand-colour, 0.3) - background-color: lighten($brand-colour, 48%) - thead - background-color: transparent - tr - td - border-bottom: 1px solid transparent - td:nth-child(1) - background-color: transparent - td:nth-child(2) - background: lighten($ofn-grey, 44%) - td:nth-child(3) - background: lighten($ofn-grey, 38%) - td:last-child - &, & * - color: white - background: $brand-colour - h5 - text-transform: uppercase - color: $ofn-grey - font-weight: 400 - font-size: 0.875rem - margin-bottom: 0.25em - - tfoot - background-color: transparent - tr - td - border-bottom: 1px solid transparent - td:nth-child(1) - background-color: transparent - td:nth-child(2) - background: lighten($ofn-grey, 44%) - td:nth-child(3) - background: lighten($ofn-grey, 38%) - td:last-child - &, & * - color: white - background: $brand-colour - h2 - .text-small - text-transform: uppercase - display: inline-block - font-weight: 400 - line-height: 1.5 - @include headingFont - -// Detail \\ -.enterprise-type-flowchart - float: right diff --git a/app/assets/stylesheets/darkswarm/signup.css.scss b/app/assets/stylesheets/darkswarm/signup.css.scss new file mode 100644 index 0000000000..206d7d6656 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/signup.css.scss @@ -0,0 +1,188 @@ +@import "branding"; +@import "mixins"; +@import "typography"; +@import "animations"; +@import "variables"; + +#producer-signup.pane, #shops-signup.pane { + @include tiledPane; + + h2 { + margin-bottom: 2rem; + font-size: 4.4rem; + font-weight: 300; + } +} + +#producer-details.pane, #hub-details.pane, .groups-details.pane { + background-color: lighten($ofn-grey, 44%); +} + +#producer-case-studies, #shops-case-studies { + @include hubsbg; + + padding-top: 100px; + padding-bottom: 100px; + -webkit-filter: brightness(1.1); + filter: brightness(1.1); + + h2 { + color: $brand-colour; + font-size: 3rem; + } + + .case-study { + background-color: rgba(255, 255, 255, 0.5); + padding: 1rem; + margin-top: 2rem; + text-align: center; + + .case-study-img { + background-color: white; + margin-bottom: 1rem; + + @media all and (min-width: 768px) { + float: right; + margin-left: 2rem; + } + } + + @media all and (min-width: 640px) { + text-align: left; + } + + h4, a { + color: $brand-colour; + } + + a { + &, & * { + @include csstrans; + + opacity: 1; + } + + &:hover, &:focus, &:active { + &, & * { + opacity: 0.75; + } + } + } + } +} + +// Signup tables \\ +table.signup-table { + width: 100%; + border: 0; +} + +table.signup-table.hubs-table, table.signup-table.producers-table { + tr { + td { + background-color: white; + border-bottom: 1px solid rgba($ofn-grey, 0.3); + } + + td:nth-child(2) { + background-color: lighten($ofn-grey, 46%); + } + + td:nth-child(3) { + background-color: lighten($ofn-grey, 41%); + } + + td:last-child { + &, & i { + color: $brand-colour; + } + + border-bottom: 1px solid rgba($brand-colour, 0.3); + background-color: lighten($brand-colour, 48%); + } + } + + thead { + background-color: transparent; + + tr { + td { + border-bottom: 1px solid transparent; + } + + td:nth-child(1) { + background-color: transparent; + } + + td:nth-child(2) { + background: lighten($ofn-grey, 44%); + } + + td:nth-child(3) { + background: lighten($ofn-grey, 38%); + } + + td:last-child { + &, & * { + color: white; + } + + background: $brand-colour; + } + } + + h5 { + text-transform: uppercase; + color: $ofn-grey; + font-weight: 400; + font-size: 0.875rem; + margin-bottom: 0.25em; + } + } + + tfoot { + background-color: transparent; + + tr { + td { + border-bottom: 1px solid transparent; + } + + td:nth-child(1) { + background-color: transparent; + } + + td:nth-child(2) { + background: lighten($ofn-grey, 44%); + } + + td:nth-child(3) { + background: lighten($ofn-grey, 38%); + } + + td:last-child { + &, & * { + color: white; + } + + background: $brand-colour; + } + } + + h2 { + .text-small { + text-transform: uppercase; + display: inline-block; + font-weight: 400; + line-height: 1.5; + + @include headingFont; + } + } + } +} + +// Detail \\ +.enterprise-type-flowchart { + float: right; +} diff --git a/app/assets/stylesheets/darkswarm/tables.css.sass b/app/assets/stylesheets/darkswarm/tables.css.sass deleted file mode 100644 index 885eec815a..0000000000 --- a/app/assets/stylesheets/darkswarm/tables.css.sass +++ /dev/null @@ -1,7 +0,0 @@ -table - thead tr, tbody tr - th, td - box-sizing: border-box - padding-left: 12px - padding-right: 12px - overflow: hidden diff --git a/app/assets/stylesheets/darkswarm/tables.css.scss b/app/assets/stylesheets/darkswarm/tables.css.scss new file mode 100644 index 0000000000..b2632d52f1 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/tables.css.scss @@ -0,0 +1,10 @@ +table { + thead tr, tbody tr { + th, td { + box-sizing: border-box; + padding-left: 12px; + padding-right: 12px; + overflow: hidden; + } + } +} diff --git a/app/assets/stylesheets/darkswarm/tabs.css.sass b/app/assets/stylesheets/darkswarm/tabs.css.sass deleted file mode 100644 index 12134a19e1..0000000000 --- a/app/assets/stylesheets/darkswarm/tabs.css.sass +++ /dev/null @@ -1,110 +0,0 @@ -@import typography -@import mixins -@import branding - -// Foundation overrides -#tabs .tabs-content > .content p - max-width: 100% !important - -.tabs-content > .content - padding-top: 0 !important - -// Tabs styling - -#tabs - background: url("/assets/gray_jean.png") top left repeat - @include box-shadow(inset 0 2px 3px 0 rgba(0,0,0,0.15)) - display: block - color: $dark-grey - .header - text-align: center - text-transform: uppercase - color: $dark-grey - border-bottom: 1px solid $disabled-dark - margin-top: 0.75rem - margin-bottom: 0.75rem - padding-bottom: 0.25rem - font-size: 0.875rem - - .panel - border-color: $clr-brick-bright - background-color: rgba(255, 255, 255, 0) - - dl dd - - text-align: center - @media all and (max-width: 640px) - text-align: left - - a - @include headingFont - background: transparent - text-transform: uppercase - line-height: 1 - font-size: 0.875em - text-shadow: 0 -1px 1px #ffffff - padding: 1em - border: none - &:hover, &:focus, &:active - color: $clr-brick-bright - &, &:hover - background: none - - @media all and (max-width: 640px) - padding: 0.35em 0 0.65em 0 - text-shadow: none - - // inactive nav link - dl - dd - border-top: 4px solid transparent - - a:after - padding-left: 8px - content: "\e633" - visibility: hidden - @include icon-font - @media all and (max-width: 640px) - content: "\e633" - dd:hover - a:after - visibility: visible - - // active nav link - - dl - dd.active - border-top: 4px solid $clr-brick - @media all and (max-width: 640px) - border-top: 4px solid transparent - background-color: $clr-brick - a - color: $clr-brick - @media all and (max-width: 640px) - color: white - a:after - content: "\e634" - visibility: visible - @include icon-font - @media all and (max-width: 640px) - content: "\e633" - - // content revealed in accordion - - .tabs-content - margin-bottom: 0 - & > .content - background: none - border: none - img - margin: 0px 0px 0px 40px - p - max-width: 555px - @media all and (max-width: 768px) - height: auto !important - ul - list-style-type: none - padding-left: none - .panel - padding-bottom: 1.25em - diff --git a/app/assets/stylesheets/darkswarm/tabs.css.scss b/app/assets/stylesheets/darkswarm/tabs.css.scss new file mode 100644 index 0000000000..55b55f1189 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/tabs.css.scss @@ -0,0 +1,161 @@ +@import "typography"; +@import "mixins"; +@import "branding"; + +// Foundation overrides +#tabs .tabs-content > .content p { + max-width: 100% !important; +} + +.tabs-content > .content { + padding-top: 0 !important; +} + +// Tabs styling + +#tabs { + background: url("/assets/gray_jean.png") top left repeat; + + @include box-shadow(inset 0 2px 3px 0 rgba(0, 0, 0, 0.15)); + + display: block; + color: $dark-grey; + + .header { + text-align: center; + text-transform: uppercase; + color: $dark-grey; + border-bottom: 1px solid $disabled-dark; + margin-top: 0.75rem; + margin-bottom: 0.75rem; + padding-bottom: 0.25rem; + font-size: 0.875rem; + } + + .panel { + border-color: $clr-brick-bright; + background-color: rgba(255, 255, 255, 0); + } + + dl dd { + text-align: center; + + @media all and (max-width: 640px) { + text-align: left; + } + + a { + @include headingFont; + + background: transparent; + text-transform: uppercase; + line-height: 1; + font-size: 0.875em; + text-shadow: 0 -1px 1px #ffffff; + padding: 1em; + border: none; + + &:hover, &:focus, &:active { + color: $clr-brick-bright; + } + + &, &:hover { + background: none; + } + + @media all and (max-width: 640px) { + padding: 0.35em 0 0.65em 0; + text-shadow: none; + } + } + } + + // inactive nav link + dl { + dd { + border-top: 4px solid transparent; + + a:after { + padding-left: 8px; + content: ""; + visibility: hidden; + + @include icon-font; + + @media all and (max-width: 640px) { + content: ""; + } + } + } + + dd:hover { + a:after { + visibility: visible; + } + } + } + + // active nav link + + dl { + dd.active { + border-top: 4px solid $clr-brick; + + @media all and (max-width: 640px) { + border-top: 4px solid transparent; + background-color: $clr-brick; + } + + a { + color: $clr-brick; + + @media all and (max-width: 640px) { + color: white; + } + } + + a:after { + content: ""; + visibility: visible; + + @include icon-font; + + @media all and (max-width: 640px) { + content: ""; + } + } + } + } + + // content revealed in accordion + + .tabs-content { + margin-bottom: 0; + + & > .content { + background: none; + border: none; + + img { + margin: 0px 0px 0px 40px; + } + + p { + max-width: 555px; + + @media all and (max-width: 768px) { + height: auto !important; + } + } + + ul { + list-style-type: none; + padding-left: none; + } + + .panel { + padding-bottom: 1.25em; + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/taxons.css.sass b/app/assets/stylesheets/darkswarm/taxons.css.sass deleted file mode 100644 index 1d1e5b652f..0000000000 --- a/app/assets/stylesheets/darkswarm/taxons.css.sass +++ /dev/null @@ -1,52 +0,0 @@ -@import branding -@import mixins - -.fat-taxons, .fat-properties - display: inline-block - line-height: 1 - margin-right: 0.5rem - margin-bottom: 0.35rem - text-transform: capitalize - font-weight: 300 - font-size: 0.875rem - background: rgba(215,215,215,0.5) - color: #555 - @include border-radius(3px) - padding: 0.25rem 0.5rem 0.35rem 0.35rem - render-svg - svg - width: 16px - height: 16px - path - fill: #555 - &, & * - display: inline-block - color: #555 - -.inactive - .fat-taxons - render-svg - svg - path - fill: $disabled-dark - -.product-header - render-svg - svg - width: 32px - height: 32px - path - fill: black - @media all and (max-width: 640px) - render-svg - svg - width: 24px - height: 24px - -.summary-header - render-svg - svg - width: 18px - height: 18px - path - fill: $clr-brick \ No newline at end of file diff --git a/app/assets/stylesheets/darkswarm/taxons.css.scss b/app/assets/stylesheets/darkswarm/taxons.css.scss new file mode 100644 index 0000000000..a5db89b324 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/taxons.css.scss @@ -0,0 +1,81 @@ +@import "branding"; +@import "mixins"; + +.fat-taxons, .fat-properties { + display: inline-block; + line-height: 1; + margin-right: 0.5rem; + margin-bottom: 0.35rem; + text-transform: capitalize; + font-weight: 300; + font-size: 0.875rem; + background: rgba(215, 215, 215, 0.5); + color: #555; + + @include border-radius(3px); + + padding: 0.25rem 0.5rem 0.35rem 0.35rem; + + render-svg { + svg { + width: 16px; + height: 16px; + + path { + fill: #555; + } + } + } + + &, & * { + display: inline-block; + color: #555; + } +} + +.inactive { + .fat-taxons { + render-svg {} + + svg { + path { + fill: $disabled-dark; + } + } + } +} + +.product-header { + render-svg { + svg { + width: 32px; + height: 32px; + + path { + fill: black; + } + } + } + + @media all and (max-width: 640px) { + render-svg { + svg { + width: 24px; + height: 24px; + } + } + } +} + +.summary-header { + render-svg { + svg { + width: 18px; + height: 18px; + + path { + fill: $clr-brick; + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/typography.css.sass b/app/assets/stylesheets/darkswarm/typography.css.sass deleted file mode 100644 index 8c151db832..0000000000 --- a/app/assets/stylesheets/darkswarm/typography.css.sass +++ /dev/null @@ -1,125 +0,0 @@ -@import branding - -@mixin headingFont - font-family: 'Oswald', sans-serif - -@mixin bodyFont - font-family: 'Roboto', Arial, sans-serif - -$headingFont: 'Oswald' -$bodyFont: 'Roboto' - -body - @include bodyFont - font-weight: 400 -a - color: $clr-brick - &:hover, &:focus, &:active - text-decoration: none - color: $clr-brick-bright - -.text-vbig - font-size: 2rem - font-weight: 300 - -.text-big - font-size: 1.5rem - font-weight: 300 - -small, .small - font-size: 0.75rem - -.text-small - font-size: 0.875rem - margin-bottom: 0.5rem - font-family: $bodyFont - &, & * - font-size: 0.875rem - -.text-normal - font-weight: 400 - font-family: $bodyFont - -.text-skinny - font-weight: 300 - font-family: $bodyFont - -.word-wrap - word-wrap: break-word - -.pre-wrap - white-space: pre-wrap - -.pre-line - white-space: pre-line - -.light - color: #999 - display: inline - -.center - text-align: center - -.turquoise - color: $clr-turquoise - -.brick - color: $clr-brick - -.hr-light - border-color: rgba(#ddd, 0.25) - -h1, h2, h3, h4, h5, h6 - @include headingFont - padding: 0px - -.inline-header - display: inline-block - margin: 0px - -ul.bullet-list, ul.check-list - margin: 0 0 0 1.25em !important - li - list-style: none - line-height: 1.5 - height: inherit - li:before - content: "\e609" - font-family: "OFN" - margin-left: -1.25em - display: inline-block - font-weight: normal - font-style: normal - font-variant: normal - text-transform: none - -ul.check-list - li:before - content: "\e632" - -.light-grey - color: #666666 - -.pad - padding: 1em - -.pad-top - padding-top: 1em - -.not-bold - font-weight: normal - -.footer-pad - padding-bottom: 100px - - -// These selectors match the default Foundation selectors -// For clean overriden magic -table tr th, table tr td - color: #333333 -table thead tr th, table thead tr td, table tfoot tr th, table tfoot tr td - color: #333333 - -span.email - direction: rtl - unicode-bidi: bidi-override diff --git a/app/assets/stylesheets/darkswarm/typography.css.scss b/app/assets/stylesheets/darkswarm/typography.css.scss new file mode 100644 index 0000000000..0ac7cbb673 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/typography.css.scss @@ -0,0 +1,167 @@ +@import "branding"; + +@mixin headingFont { + font-family: "Oswald", sans-serif; +} + +@mixin bodyFont { + font-family: "Roboto", Arial, sans-serif; +} + +$headingFont: "Oswald"; +$bodyFont: "Roboto"; + +body { + @include bodyFont; + + font-weight: 400; +} + +a { + color: $clr-brick; + + &:hover, &:focus, &:active { + text-decoration: none; + color: $clr-brick-bright; + } +} + +.text-vbig { + font-size: 2rem; + font-weight: 300; +} + +.text-big { + font-size: 1.5rem; + font-weight: 300; +} + +small, .small { + font-size: 0.75rem; +} + +.text-small { + font-size: 0.875rem; + margin-bottom: 0.5rem; + font-family: $bodyFont; + + &, & * { + font-size: 0.875rem; + } +} + +.text-normal { + font-weight: 400; + font-family: $bodyFont; +} + +.text-skinny { + font-weight: 300; + font-family: $bodyFont; +} + +.word-wrap { + word-wrap: break-word; +} + +.pre-wrap { + white-space: pre-wrap; +} + +.pre-line { + white-space: pre-line; +} + +.light { + color: #999; + display: inline; +} + +.center { + text-align: center; +} + +.turquoise { + color: $clr-turquoise; +} + +.brick { + color: $clr-brick; +} + +.hr-light { + border-color: rgba(#ddd, 0.25); +} + +h1, h2, h3, h4, h5, h6 { + @include headingFont; + + padding: 0px; +} + +.inline-header { + display: inline-block; + margin: 0px; +} + +ul.bullet-list, ul.check-list { + margin: 0 0 0 1.25em !important; + + li { + list-style: none; + line-height: 1.5; + height: inherit; + } + + li:before { + content: ""; + font-family: "OFN"; + margin-left: -1.25em; + display: inline-block; + font-weight: normal; + font-style: normal; + font-variant: normal; + text-transform: none; + } +} + +ul.check-list { + li:before { + content: ""; + } +} + +.light-grey { + color: #666666; +} + +.pad { + padding: 1em; +} + +.pad-top { + padding-top: 1em; +} + +.not-bold { + font-weight: normal; +} + +.footer-pad { + padding-bottom: 100px; +} + +// These selectors match the default Foundation selectors +// For clean overriden magic +table tr th, table tr td { + color: #333333; +} + +table thead tr th, table thead tr td, table tfoot tr th, table tfoot tr td { + color: #333333; +} + +span.email { + direction: rtl; + unicode-bidi: bidi-override; +} diff --git a/app/assets/stylesheets/darkswarm/ui.css.sass b/app/assets/stylesheets/darkswarm/ui.css.sass deleted file mode 100644 index 5c049a2bba..0000000000 --- a/app/assets/stylesheets/darkswarm/ui.css.sass +++ /dev/null @@ -1,97 +0,0 @@ -@import foundation/components/buttons -@import branding -@import mixins -@import typography - -// Button class extensions - -.neutral-btn - @include button - @include border-radius(0.5em) - font-family: $bodyFont - background-color: transparent - border: 2px solid rgba(200, 200, 200, 1) - color: #999 - -.neutral-btn:hover, .neutral-btn:active, .neutral-btn:focus - background-color: rgba(200, 200, 200, 0.2) - border: 2px solid rgba(200, 200, 200, 0.8) - -.neutral-btn.dark - border-color: #000 - color: #000 - -.neutral-btn.dark:hover, .neutral-btn.dark:active, .neutral-btn.dark:focus - background-color: rgba(0, 0, 0, 0.1) - border: 2px solid rgba(0, 0, 0, 0.8) - text-shadow: 0 1px 0 #fff - -.neutral-btn.light - border-color: #fff - color: #fff - -.neutral-btn.light:hover, .neutral-btn.light:active, .neutral-btn.light:focus - background-color: rgba(255, 255, 255, 0.2) - border: 2px solid rgba(255, 255, 255, 0.8) - text-shadow: 0 1px 0 rgba(0,0,0,0.2) - -.neutral-btn.turquoise - border-color: $clr-turquoise - color: $clr-turquoise - -.neutral-btn.turquoise:hover, .neutral-btn.turquoise:active, .neutral-btn.turquoise:focus - background-color: rgba(0, 0, 0, 0.1) - // text-shadow: 0 1px 0 #fff - -// Rewrite foundation's .primary button style - -.button, button - @include border-radius(0.5em) - outline: none // Turn off blue highlight on chrome - -.button.primary, button.primary - font-family: $bodyFont - background: $clr-brick - color: white - -.button.primary:hover, .button.primary:active, .button.primary:focus, button.primary:hover, button.primary:active, button.primary:focus - background: $clr-brick-bright - text-shadow: 0 1px 0 $clr-brick - -button.success, .button.success - background: #0096ad - -.button.success:hover, .button.success:active, .button.success:focus, button.success:hover, button.success:active, button.success:focus - background: #14b6cc - -.button.help-btn - @include border-radius(999999px) - &.tiny - padding: 0rem - margin: 0 - float: right - i - font-size: 1.25rem - -.profile-checkbox - display: inline-block - label - margin: 0 0.2rem - float: right - -// Transparent button -.button.transparent - @include headingFont - font-size: 20px - text-transform: uppercase - background: rgba(0, 0, 0, 0.3) - border: 3px solid #fff - text-shadow: none - &:hover - background: rgba(0, 0, 0, 0.6) - color: #fff - -// Responsive -@media screen and (min-width: 768px) - [role="main"] - padding: 0 diff --git a/app/assets/stylesheets/darkswarm/ui.css.scss b/app/assets/stylesheets/darkswarm/ui.css.scss new file mode 100644 index 0000000000..1d1b9e166a --- /dev/null +++ b/app/assets/stylesheets/darkswarm/ui.css.scss @@ -0,0 +1,128 @@ +@import "foundation/components/buttons"; +@import "branding"; +@import "mixins"; +@import "typography"; + +// Button class extensions + +.neutral-btn { + @include button; + + @include border-radius(0.5em); + + font-family: $bodyFont; + background-color: transparent; + border: 2px solid rgba(200, 200, 200, 1); + color: #999; +} + +.neutral-btn:hover, .neutral-btn:active, .neutral-btn:focus { + background-color: rgba(200, 200, 200, 0.2); + border: 2px solid rgba(200, 200, 200, 0.8); +} + +.neutral-btn.dark { + border-color: #000; + color: #000; +} + +.neutral-btn.dark:hover, .neutral-btn.dark:active, .neutral-btn.dark:focus { + background-color: rgba(0, 0, 0, 0.1); + border: 2px solid rgba(0, 0, 0, 0.8); + text-shadow: 0 1px 0 #fff; +} + +.neutral-btn.light { + border-color: #fff; + color: #fff; +} + +.neutral-btn.light:hover, .neutral-btn.light:active, .neutral-btn.light:focus { + background-color: rgba(255, 255, 255, 0.2); + border: 2px solid rgba(255, 255, 255, 0.8); + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); +} + +.neutral-btn.turquoise { + border-color: $clr-turquoise; + color: $clr-turquoise; +} + +.neutral-btn.turquoise:hover, .neutral-btn.turquoise:active, .neutral-btn.turquoise:focus { + background-color: rgba(0, 0, 0, 0.1); + + // text-shadow: 0 1px 0 #fff +} + +// Rewrite foundation's .primary button style + +.button, button { + @include border-radius(0.5em); + + outline: none; +} + +.button.primary, button.primary { + font-family: $bodyFont; + background: $clr-brick; + color: white; +} + +.button.primary:hover, .button.primary:active, .button.primary:focus, button.primary:hover, button.primary:active, button.primary:focus { + background: $clr-brick-bright; + text-shadow: 0 1px 0 $clr-brick; +} + +button.success, .button.success { + background: #0096ad; +} + +.button.success:hover, .button.success:active, .button.success:focus, button.success:hover, button.success:active, button.success:focus { + background: #14b6cc; +} + +.button.help-btn { + @include border-radius(999999px); + + &.tiny { + padding: 0rem; + margin: 0; + float: right; + } + + i { + font-size: 1.25rem; + } +} + +.profile-checkbox { + display: inline-block; + + label { + margin: 0 0.2rem; + float: right; + } +} + +// Transparent button +.button.transparent { + @include headingFont; + + font-size: 20px; + text-transform: uppercase; + background: rgba(0, 0, 0, 0.3); + border: 3px solid #fff; + text-shadow: none; + + &:hover { + background: rgba(0, 0, 0, 0.6); + color: #fff; + } +} + +// Responsive +@media screen and (min-width: 768px) { + [role="main"] { + padding: 0; + } +} diff --git a/app/assets/stylesheets/darkswarm/variables.css.sass b/app/assets/stylesheets/darkswarm/variables.css.sass deleted file mode 100644 index ea87d11fc4..0000000000 --- a/app/assets/stylesheets/darkswarm/variables.css.sass +++ /dev/null @@ -1,32 +0,0 @@ -@import "foundation/functions" -@import "foundation/components/global" - -// Brand guide colours: -// International: #81c26e -// Australia: #f35746 -// Africa: #f35e32 -// South Africa: #f9a72b -// Norway: #4b83cc -// Scandanavia: #0c8bbc -// UK: #e6373f - -$brand-colour: #f27052 - - -// Topbar -$topbar-height: rem-calc(75) -$topbar-link-padding: $topbar-height / 3 - -$topbar-bg: $white -$topbar-bg-color: $topbar-bg - -$topbar-link-color: $black -$topbar-link-color-hover: $brand-colour -$topbar-link-color-active: $black -$topbar-link-color-active-hover: $white -$topbar-link-bg-hover: $white - -$topbar-dropdown-link-color: $black -$topbar-dropdown-bg: $white -$topbar-dropdown-link-bg: $white -$topbar-dropdown-link-bg-hover: $white diff --git a/app/assets/stylesheets/darkswarm/variables.css.scss b/app/assets/stylesheets/darkswarm/variables.css.scss new file mode 100644 index 0000000000..12d77f0d09 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/variables.css.scss @@ -0,0 +1,31 @@ +@import "foundation/functions"; +@import "foundation/components/global"; + +// Brand guide colours: +// International: #81c26e +// Australia: #f35746 +// Africa: #f35e32 +// South Africa: #f9a72b +// Norway: #4b83cc +// Scandanavia: #0c8bbc +// UK: #e6373f + +$brand-colour: #f27052; + +// Topbar +$topbar-height: rem-calc(75); +$topbar-link-padding: $topbar-height / 3; + +$topbar-bg: $white; +$topbar-bg-color: $topbar-bg; + +$topbar-link-color: $black; +$topbar-link-color-hover: $brand-colour; +$topbar-link-color-active: $black; +$topbar-link-color-active-hover: $white; +$topbar-link-bg-hover: $white; + +$topbar-dropdown-link-color: $black; +$topbar-dropdown-bg: $white; +$topbar-dropdown-link-bg: $white; +$topbar-dropdown-link-bg-hover: $white; diff --git a/app/assets/stylesheets/mail/email.css.sass b/app/assets/stylesheets/mail/email.css.sass deleted file mode 100644 index e9eabd4edb..0000000000 --- a/app/assets/stylesheets/mail/email.css.sass +++ /dev/null @@ -1,312 +0,0 @@ -/* ------------------------------------- - * GLOBAL - *------------------------------------- - -* - margin: 0 - padding: 0 - font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif - -img - max-width: 100% - -.collapse - margin: 0 - padding: 0 - -body - -webkit-font-smoothing: antialiased - -webkit-text-size-adjust: none - width: 100%!important - height: 100% - -/* ------------------------------------- - * ELEMENTS - *------------------------------------- - -a - color: #0096ad - -.btn - text-decoration: none - color: #FFF - background-color: #666 - padding: 10px 16px - font-weight: bold - margin-right: 10px - text-align: center - cursor: pointer - display: inline-block - -p.callout - padding: 15px - background-color: #e1f0f5 - margin-bottom: 15px - -.callout a - font-weight: bold - color: #0096ad - -table.social - background-color: #ebebeb - &.white-bg - background-color: white!important - border: 1px solid #ebebeb - -table.order-summary - border-collapse: separate - border-spacing: 0px 10px - tbody tr td - padding-left: 5px - padding-right: 5px - thead tr th - background-color: #f2f2f2 - border-bottom: 1px solid black - padding-left: 5px - padding-right: 5px - h4 - margin-top: 15px - tfoot - tr:first-child td - border-top: 1px solid black - padding-top: 5px - tr td - padding-left: 5px - padding-right: 5px - -.text-right - text-align: right - -.social .soc-btn - padding: 3px 7px - font-size: 12px - margin-bottom: 10px - text-decoration: none - color: #FFF - font-weight: bold - display: block - text-align: center - -a - &.fb - background-color: #3B5998!important - &.tw - background-color: #1daced!important - &.gp - background-color: #DB4A39!important - &.li - background-color: #0073b2!important - &.ms - background-color: #000!important - -.sidebar .soc-btn - display: block - width: 100% - -img.float-right - float: right - display: block - -/* ------------------------------------- - * HEADER - *------------------------------------- - -table.head-wrap - width: 100% - -.header.container table td - &.logo - padding: 15px - &.label - padding: 15px - padding-left: 0px - -/* ------------------------------------- - * BODY - *------------------------------------- - -table - &.body-wrap - width: 100% - &.footer-wrap - width: 100% - clear: both!important - -/* ------------------------------------- - * FOOTER - *------------------------------------- - -.footer-wrap .container td.content p - border-top: 1px solid rgb(215, 215, 215) - padding-top: 15px - font-size: 10px - font-weight: bold - -/* ------------------------------------- - * TYPOGRAPHY - *------------------------------------- - -h1, h2, h3, h4, h5, h6 - font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif - line-height: 1.1 - margin-bottom: 15px - color: #000 - -h1 small, h2 small, h3 small, h4 small, h5 small, h6 small - font-size: 60% - color: #6f6f6f - line-height: 0 - text-transform: none - -h1 - font-weight: 200 - font-size: 44px - -h2 - font-weight: 200 - font-size: 37px - -h3 - font-weight: 500 - font-size: 27px - -h4 - font-weight: 500 - font-size: 23px - -h5 - font-weight: 900 - font-size: 17px - -h6 - font-weight: 900 - font-size: 14px - text-transform: uppercase - color: #999 - -.collapse - margin: 0!important - -p, ul - margin-bottom: 10px - font-weight: normal - font-size: 14px - line-height: 1.6 - -p - &.lead - font-size: 17px - &.last - margin-bottom: 0px - -ul - li - margin-left: 5px - list-style-position: inside - &.sidebar - background: #ebebeb - display: block - list-style-type: none - li - display: block - margin: 0 - a - text-decoration: none - color: #666 - padding: 10px 16px - /* font-weight:bold; - margin-right: 10px - /* text-align:center; - cursor: pointer - border-bottom: 1px solid #777777 - border-top: 1px solid #FFFFFF - display: block - margin: 0 - &.last - border-bottom-width: 0px - h1, h2, h3, h4, h5, h6, p - margin-bottom: 0!important - -/* ------------------------------------- - * SIDEBAR - *------------------------------------- - -/* --------------------------------------------------- - * RESPONSIVENESS - * Nuke it from orbit. It's the only way to be sure. - *------------------------------------------------------ - -/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something - -.container - display: block!important - max-width: 600px!important - margin: 0 auto!important - /* makes it centered - clear: both!important - -/* This should also be a block element, so that it will fill 100% of the .container - -.content - padding: 15px - max-width: 600px - margin: 0 auto - display: block - table - width: 100% - -/* Let's make sure tables in the content area are 100% wide - -/* Odds and ends - -.column - width: 300px - float: left - tr td - padding: 15px - -.pad - tr td - padding: 15px - -.column-wrap - padding: 0!important - margin: 0 auto - max-width: 600px!important - -.column table - width: 100% - -.social .column - width: 280px - min-width: 279px - float: left - -/* Be sure to place a .clear element after each set of columns, just to be safe - -.clear - display: block - clear: both - -/* ------------------------------------------- - * PHONE - * For clients that support media queries. - * Nothing fancy. - *-------------------------------------------- -@media only screen and (max-width: 600px) - a[class="btn"] - display: block!important - margin-bottom: 10px!important - background-image: none!important - margin-right: 0!important - div[class="column"] - width: auto!important - float: none!important - table.social div[class="column"] - width: auto!important - img.float-right - float: none!important - -.inline-header - display: inline-block - margin: 0px diff --git a/app/assets/stylesheets/mail/email.css.scss b/app/assets/stylesheets/mail/email.css.scss new file mode 100644 index 0000000000..0b2f641b4f --- /dev/null +++ b/app/assets/stylesheets/mail/email.css.scss @@ -0,0 +1,410 @@ +/* ------------------------------------- + * GLOBAL + *------------------------------------- */ + +* { + margin: 0; + padding: 0; + font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; +} + +img { + max-width: 100%; +} + +.collapse { + margin: 0; + padding: 0; +} + +body { + -webkit-font-smoothing: antialiased; + -webkit-text-size-adjust: none; + width: 100% !important; + height: 100%; +} + +/* ------------------------------------- + * ELEMENTS + *------------------------------------- */ + +a { + color: #0096ad; +} + +.btn { + text-decoration: none; + color: #FFF; + background-color: #666; + padding: 10px 16px; + font-weight: bold; + margin-right: 10px; + text-align: center; + cursor: pointer; + display: inline-block; +} + +p.callout { + padding: 15px; + background-color: #e1f0f5; + margin-bottom: 15px; +} + +.callout a { + font-weight: bold; + color: #0096ad; +} + +table.social { + background-color: #ebebeb; + + &.white-bg { + background-color: white !important; + border: 1px solid #ebebeb; + } +} + +table.order-summary { + border-collapse: separate; + border-spacing: 0px 10px; + + tbody tr td { + padding-left: 5px; + padding-right: 5px; + } + + thead tr th { + background-color: #f2f2f2; + border-bottom: 1px solid black; + padding-left: 5px; + padding-right: 5px; + + h4 { + margin-top: 15px; + } + } + + tfoot { + tr:first-child td { + border-top: 1px solid black; + padding-top: 5px; + } + + tr td { + padding-left: 5px; + padding-right: 5px; + } + } +} + +.text-right { + text-align: right; +} + +.social .soc-btn { + padding: 3px 7px; + font-size: 12px; + margin-bottom: 10px; + text-decoration: none; + color: #FFF; + font-weight: bold; + display: block; + text-align: center; +} + +a { + &.fb { + background-color: #3B5998 !important; + } + + &.tw { + background-color: #1daced !important; + } + + &.gp { + background-color: #DB4A39 !important; + } + + &.li { + background-color: #0073b2 !important; + } + + &.ms { + background-color: #000 !important; + } +} + +.sidebar .soc-btn { + display: block; + width: 100%; +} + +img.float-right { + float: right; + display: block; +} + +/* ------------------------------------- + * HEADER + *------------------------------------- */ + +table.head-wrap { + width: 100%; +} + +.header.container table td { + &.logo { + padding: 15px; + } + + &.label { + padding: 15px; + padding-left: 0px; + } +} + +/* ------------------------------------- + * BODY + *------------------------------------- */ + +table { + &.body-wrap { + width: 100%; + } + + &.footer-wrap { + width: 100%; + clear: both !important; + } +} + +/* ------------------------------------- + * FOOTER + *------------------------------------- */ + +.footer-wrap .container td.content p { + border-top: 1px solid rgb(215, 215, 215); + padding-top: 15px; + font-size: 10px; + font-weight: bold; +} + +/* ------------------------------------- + * TYPOGRAPHY + *------------------------------------- */ + +h1, h2, h3, h4, h5, h6 { + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + line-height: 1.1; + margin-bottom: 15px; + color: #000; +} + +h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { + font-size: 60%; + color: #6f6f6f; + line-height: 0; + text-transform: none; +} + +h1 { + font-weight: 200; + font-size: 44px; +} + +h2 { + font-weight: 200; + font-size: 37px; +} + +h3 { + font-weight: 500; + font-size: 27px; +} + +h4 { + font-weight: 500; + font-size: 23px; +} + +h5 { + font-weight: 900; + font-size: 17px; +} + +h6 { + font-weight: 900; + font-size: 14px; + text-transform: uppercase; + color: #999; +} + +.collapse { + margin: 0 !important; +} + +p, ul { + margin-bottom: 10px; + font-weight: normal; + font-size: 14px; + line-height: 1.6; +} + +p { + &.lead { + font-size: 17px; + } + + &.last { + margin-bottom: 0px; + } +} + +ul { + li { + margin-left: 5px; + list-style-position: inside; + } + + &.sidebar { + background: #ebebeb; + display: block; + list-style-type: none; + + li { + display: block; + margin: 0; + + a { + text-decoration: none; + color: #666; + padding: 10px 16px; + + /* font-weight:bold; */ + margin-right: 10px; + + /* text-align:center; */ + cursor: pointer; + border-bottom: 1px solid #777777; + border-top: 1px solid #FFFFFF; + display: block; + margin: 0; + + &.last { + border-bottom-width: 0px; + } + + h1, h2, h3, h4, h5, h6, p { + margin-bottom: 0 !important; + } + } + } + } +} + +/* ------------------------------------- + * SIDEBAR + *------------------------------------- */ + +/* --------------------------------------------------- + * RESPONSIVENESS + * Nuke it from orbit. It's the only way to be sure. + *------------------------------------------------------ */ + +/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ + +.container { + display: block !important; + max-width: 600px !important; + margin: 0 auto !important; + + /* makes it centered */ + clear: both !important; +} + +/* This should also be a block element, so that it will fill 100% of the .container */ + +.content { + padding: 15px; + max-width: 600px; + margin: 0 auto; + display: block; + + table { + width: 100%; + } +} + +/* Let's make sure tables in the content area are 100% wide */ + +/* Odds and ends */ + +.column { + width: 300px; + float: left; + + tr td { + padding: 15px; + } +} + +.pad { + tr td { + padding: 15px; + } +} + +.column-wrap { + padding: 0 !important; + margin: 0 auto; + max-width: 600px !important; +} + +.column table { + width: 100%; +} + +.social .column { + width: 280px; + min-width: 279px; + float: left; +} + +/* Be sure to place a .clear element after each set of columns, just to be safe */ + +.clear { + display: block; + clear: both; +} + +/* ------------------------------------------- + * PHONE + * For clients that support media queries. + * Nothing fancy. + *-------------------------------------------- */ +@media only screen and (max-width: 600px) { + a[class="btn"] { + display: block !important; + margin-bottom: 10px !important; + background-image: none !important; + margin-right: 0 !important; + } + + div[class="column"] { + width: auto !important; + float: none !important; + } + + table.social div[class="column"] { + width: auto !important; + } + + img.float-right { + float: none !important; + } +} + +.inline-header { + display: inline-block; + margin: 0px; +} From 017916b1933e4d6cd0b09acbca6bb8c87d7b1eb4 Mon Sep 17 00:00:00 2001 From: Rob Harrington Date: Thu, 5 Jan 2017 12:17:24 +1100 Subject: [PATCH 6/6] Enterprise distributing_products scope uses INNER JOINS instead of OUTER JOINS --- app/models/enterprise.rb | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/app/models/enterprise.rb b/app/models/enterprise.rb index 840477185f..e9acbd51f6 100644 --- a/app/models/enterprise.rb +++ b/app/models/enterprise.rb @@ -163,10 +163,18 @@ class Enterprise < ActiveRecord::Base } scope :distributing_products, lambda { |products| - with_distributed_products_outer.with_order_cycles_and_exchange_variants_outer. - where('product_distributions.product_id IN (?) OR spree_variants.product_id IN (?)', products, products). - select('DISTINCT enterprises.*') + # TODO: remove this when we pull out product distributions + pds = joins("INNER JOIN product_distributions ON product_distributions.distributor_id = enterprises.id"). + where("product_distributions.product_id IN (?)", products).select('DISTINCT enterprises.id') + + exs = joins("INNER JOIN exchanges ON (exchanges.receiver_id = enterprises.id AND exchanges.incoming = 'f')"). + joins('INNER JOIN exchange_variants ON (exchange_variants.exchange_id = exchanges.id)'). + joins('INNER JOIN spree_variants ON (spree_variants.id = exchange_variants.variant_id)'). + where('spree_variants.product_id IN (?)', products).select('DISTINCT enterprises.id') + + where(id: pds | exs) } + scope :managed_by, lambda { |user| if user.has_spree_role?('admin') scoped