From 0054169969d7013cc350fe4873d7301dbcc2f498 Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Wed, 2 Nov 2016 10:25:54 -0400
Subject: [PATCH] General cleanup and organization

---
 src/locales/de.json                           |  2 +-
 src/locales/en.default.json                   |  2 +-
 src/locales/es.json                           |  2 +-
 src/locales/fr.json                           |  2 +-
 src/locales/pt-BR.json                        |  2 +-
 src/locales/pt-PT.json                        |  2 +-
 src/scripts/slate/rte.js                      |  2 +-
 src/sections/header.liquid                    |  2 +-
 src/styles/global/icons.scss                  |  6 ++++
 src/styles/global/links-buttons.scss          |  8 ------
 src/styles/global/media.scss                  | 25 -----------------
 src/styles/global/rte.scss                    | 28 +++++++++++++++++++
 src/styles/global/slate-reset.scss            |  5 ++++
 src/styles/modules/password-template.scss     | 11 --------
 src/styles/modules/site-header.scss           |  4 ---
 .../settings/theme-settings.scss.liquid       |  8 ------
 .../{variables.scss => variables.scss.liquid} |  9 +++---
 src/styles/theme.scss                         |  5 +---
 src/templates/customers/addresses.liquid      |  2 +-
 19 files changed, 53 insertions(+), 74 deletions(-)
 delete mode 100644 src/styles/global/media.scss
 delete mode 100644 src/styles/modules/password-template.scss
 delete mode 100644 src/styles/settings/theme-settings.scss.liquid
 rename src/styles/settings/{variables.scss => variables.scss.liquid} (90%)

diff --git a/src/locales/de.json b/src/locales/de.json
index 49e0dd954..2996d679c 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -23,7 +23,7 @@
       "signup_form_email_placeholder": "Ihre E-Mail-Adresse",
       "signup_form_submit": "Abschicken",
       "signup_form_success": "Wir senden Ihnen eine E-Mail, kurz bevor wir eröffnen!",
-      "admin_link_html": "Sind Sie der Geschäftsinhaber? <a href=\"/admin\" class=\"text-link\">Melden Sie sich hier an</a>",
+      "admin_link_html": "Sind Sie der Geschäftsinhaber? <a href=\"/admin\">Melden Sie sich hier an</a>",
       "password_link": "Mit Passwort betreten",
       "powered_by_shopify_html": "Dieser Shop wird mit Hilfe von {{ shopify }} betrieben werden"
     },
diff --git a/src/locales/en.default.json b/src/locales/en.default.json
index 808204445..2f33799c2 100644
--- a/src/locales/en.default.json
+++ b/src/locales/en.default.json
@@ -23,7 +23,7 @@
       "signup_form_email_placeholder": "Your email",
       "signup_form_submit": "Submit",
       "signup_form_success": "We will send you an email right before we open!",
-      "admin_link_html": "Are you the store owner? <a href=\"/admin\" class=\"text-link\">Log in here</a>",
+      "admin_link_html": "Are you the store owner? <a href=\"/admin\">Log in here</a>",
       "password_link": "Enter using password",
       "powered_by_shopify_html": "This shop will be powered by {{ shopify }}"
     },
diff --git a/src/locales/es.json b/src/locales/es.json
index be07b709d..7c215ae70 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -23,7 +23,7 @@
       "signup_form_email_placeholder": "Tu dirección de correo electrónico",
       "signup_form_submit": "Enviar",
       "signup_form_success": "¡Te enviaremos un correo electrónico antes de inaugurar!",
-      "admin_link_html": "¿Eres el dueño de la tienda? <a href=\"/admin\" class=\"text-link\">Regístrate aquí</a>",
+      "admin_link_html": "¿Eres el dueño de la tienda? <a href=\"/admin\">Regístrate aquí</a>",
       "password_link": "Entrar usando contraseña",
       "powered_by_shopify_html": "Esta tienda estará impulsada por {{ shopify }}"
     },
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 6cb3426b2..a3899382b 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -23,7 +23,7 @@
       "signup_form_email_placeholder": "Votre courriel",
       "signup_form_submit": "Soumettre",
       "signup_form_success": "Nous vous ferons parvenir un courriel juste avant l'ouverture!",
-      "admin_link_html": "Êtes-vous le propriétaire de la boutique? <a href=\"/admin\" class=\"text-link\">Connectez-vous ici</a>.",
+      "admin_link_html": "Êtes-vous le propriétaire de la boutique? <a href=\"/admin\">Connectez-vous ici</a>.",
       "password_link": "Entrer avec un mot de passe",
       "powered_by_shopify_html": "Cette boutique sera propulsée par {{ shopify }}"
     },
diff --git a/src/locales/pt-BR.json b/src/locales/pt-BR.json
index 991e48659..9067eb28b 100644
--- a/src/locales/pt-BR.json
+++ b/src/locales/pt-BR.json
@@ -23,7 +23,7 @@
       "signup_form_email_placeholder": "Seu e-mail",
       "signup_form_submit": "Enviar",
       "signup_form_success": "Nós lhe enviaremos um e-mail logo antes de abrirmos!",
-      "admin_link_html": "Você é o dono da loja? <a href=\"/admin\" class=\"text-link\">Faça login aqui</a>",
+      "admin_link_html": "Você é o dono da loja? <a href=\"/admin\">Faça login aqui</a>",
       "password_link": "Entre usando a senha",
       "powered_by_shopify_html": "Esta loja será patrocinada por {{ shopify }}"
     },
diff --git a/src/locales/pt-PT.json b/src/locales/pt-PT.json
index 7d0d3031f..4dec0da75 100644
--- a/src/locales/pt-PT.json
+++ b/src/locales/pt-PT.json
@@ -23,7 +23,7 @@
       "signup_form_email_placeholder": "O seu email",
       "signup_form_submit": "Submeter",
       "signup_form_success": "Iremos enviar-lhe um email imediatamente antes de abrirmos!",
-      "admin_link_html": "É o dono da loja? <a href=\"/admin\" class=\"text-link\">Inicie sessão aqui</a>",
+      "admin_link_html": "É o dono da loja? <a href=\"/admin\">Inicie sessão aqui</a>",
       "password_link": "Entre usando a palavra-passe",
       "powered_by_shopify_html": "Esta loja será movida por {{ shopify }}"
     },
diff --git a/src/scripts/slate/rte.js b/src/scripts/slate/rte.js
index c6158d14f..08cbf600b 100644
--- a/src/scripts/slate/rte.js
+++ b/src/scripts/slate/rte.js
@@ -18,7 +18,7 @@ slate.rte = {
 
     $iframeVideo.each(function() {
       // Add wrapper to make video responsive
-      $(this).wrap('<div class="video-wrapper"></div>');
+      $(this).wrap('<div class="rte__video-wrapper"></div>');
     });
 
     $iframeReset.each(function() {
diff --git a/src/sections/header.liquid b/src/sections/header.liquid
index b3c0932ee..8323e00f9 100644
--- a/src/sections/header.liquid
+++ b/src/sections/header.liquid
@@ -18,7 +18,7 @@
         {% else %}
         <div class="h1" itemscope itemtype="http://schema.org/Organization">
           {% endif %}
-          <a href="/" itemprop="url" class="site-logo{% if section.settings.logo != blank %} site-logo--has-image{% endif %}">
+          <a href="/" itemprop="url" class="site-logo{% if section.settings.logo != blank %} site-header__logo-image{% endif %}">
             {% if section.settings.logo != blank %}
               {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
               <img src="{{ section.settings.logo | img_url: image_size }}"
diff --git a/src/styles/global/icons.scss b/src/styles/global/icons.scss
index 38cebf6a0..6907aa6fa 100644
--- a/src/styles/global/icons.scss
+++ b/src/styles/global/icons.scss
@@ -50,3 +50,9 @@ symbol {
   @include prefix('user-select', 'none', moz ms webkit spec);
   cursor: default;
 }
+
+/*================ Shopify icon on password page ================*/
+.icon-shopify-logo {
+  width: 1.5 * $font-size-base * 120 / 35;
+  height: 1.5 * $font-size-base;
+}
diff --git a/src/styles/global/links-buttons.scss b/src/styles/global/links-buttons.scss
index 964393f22..90fe24996 100644
--- a/src/styles/global/links-buttons.scss
+++ b/src/styles/global/links-buttons.scss
@@ -1,12 +1,4 @@
 /*================ Links & Buttons ================*/
-.text-link {
-  display: inline;
-  border: 0 none;
-  background: none;
-  padding: 0;
-  margin: 0;
-}
-
 .btn {
   @include prefix('user-select', 'none', moz ms webkit spec);
   @include prefix(appearance, none, webkit moz spec);
diff --git a/src/styles/global/media.scss b/src/styles/global/media.scss
deleted file mode 100644
index 154fd86b0..000000000
--- a/src/styles/global/media.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/*================ General media helpers ================*/
-img {
-  max-width: 100%;
-}
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-.video-wrapper {
-  position: relative;
-  overflow: hidden;
-  max-width: 100%;
-  padding-bottom: 56.25%;
-  height: 0;
-  height: auto;
-
-  iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
diff --git a/src/styles/global/rte.scss b/src/styles/global/rte.scss
index bf40e9687..dc8013d7b 100644
--- a/src/styles/global/rte.scss
+++ b/src/styles/global/rte.scss
@@ -13,6 +13,7 @@
     margin: 0 0 ($gutter / 2) $gutter;
   }
 
+  // Match the styles from RTE nested lists
   ul {
     list-style: disc outside;
 
@@ -43,3 +44,30 @@
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
+
+// This class is wrapped around YouTube/Vimeo embeds in the RTE
+// to make them responsive and prevent layout breaking
+.rte__video-wrapper {
+  position: relative;
+  overflow: hidden;
+  max-width: 100%;
+  padding-bottom: 56.25%;
+  height: 0;
+  height: auto;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// This class is wrapped around tables in the RTE
+// to prevent layout breaking with a scrollable parent
+.rte__table-wrapper {
+  max-width: 100%;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
diff --git a/src/styles/global/slate-reset.scss b/src/styles/global/slate-reset.scss
index 69eedb02b..a45af8210 100644
--- a/src/styles/global/slate-reset.scss
+++ b/src/styles/global/slate-reset.scss
@@ -18,6 +18,11 @@ a:focus {
   color: inherit;
 }
 
+img {
+  max-width: 100%;
+}
+
+/*================ Form element helpers ================*/
 form {
   margin: 0;
 }
diff --git a/src/styles/modules/password-template.scss b/src/styles/modules/password-template.scss
deleted file mode 100644
index 72fa26a89..000000000
--- a/src/styles/modules/password-template.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/*================ Password Template ================*/
-.icon-shopify-logo {
-  width: 1.5 * $font-size-base * 120 / 35;
-  height: 1.5 * $font-size-base;
-  vertical-align: middle;
-}
-
-.icon-lock {
-  width: 16px;
-  height: 16px;
-}
diff --git a/src/styles/modules/site-header.scss b/src/styles/modules/site-header.scss
index 98bbd7b5c..82e5c83fe 100644
--- a/src/styles/modules/site-header.scss
+++ b/src/styles/modules/site-header.scss
@@ -1,10 +1,6 @@
 /*================ Site Header ================*/
 .site-logo {
   display: block;
-}
-
-.site-logo--has-image {
-  max-width: $logo-max-width;
 
   img {
     display: block;
diff --git a/src/styles/settings/theme-settings.scss.liquid b/src/styles/settings/theme-settings.scss.liquid
deleted file mode 100644
index dd145f2e4..000000000
--- a/src/styles/settings/theme-settings.scss.liquid
+++ /dev/null
@@ -1,8 +0,0 @@
-/*========================================================================================
-  Liquid Variables
-    - All liquid variables abstracted in one place, so linting can be run everywhere else
-=========================================================================================*/
-$settings-color-primary: {{ settings.color_primary }};
-$settings-color-body-text: {{ settings.color_body_text }};
-$settings-font-size-base: {{ settings.type_base_size }};
-$settings-logo-max-width: {{ settings.logo_max_width | default: '450' | remove: 'px' | append: 'px'}};
diff --git a/src/styles/settings/variables.scss b/src/styles/settings/variables.scss.liquid
similarity index 90%
rename from src/styles/settings/variables.scss
rename to src/styles/settings/variables.scss.liquid
index cc177fff7..483a8545b 100644
--- a/src/styles/settings/variables.scss
+++ b/src/styles/settings/variables.scss.liquid
@@ -1,8 +1,8 @@
 /*================ Color Variables ================*/
-$color-primary: $settings-color-primary;
+$color-primary: {{ settings.color_primary }};
 
 // Text colors
-$color-body-text: $settings-color-body-text;
+$color-body-text: {{ settings.color_body_text }};
 
 // Backgrounds
 $color-body: #fff;
@@ -26,7 +26,7 @@ $font-stack-header: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-se
 $font-weight-header: $font-weight-bold;
 
 $font-stack-body: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$font-size-base: $settings-font-size-base; // Henseforth known as 1em
+$font-size-base: {{ settings.type_base_size }};
 
 /*============================================================================
   Grid Breakpoints and Class Names
@@ -63,7 +63,7 @@ $breakpoints: (
   Generate breakpoint-specific column widths and push classes
     - Default column widths: $breakpoint-has-widths: ($small, $medium-up);
     - Default is no push classes
-    - Will not work if `theme/grid.scss` is removed
+    - Will not work if `styles/global/grid.scss` is removed
 ==============================================================================*/
 $breakpoint-has-widths: ($small, $medium-up);
 $breakpoint-has-push: ();
@@ -71,7 +71,6 @@ $breakpoint-has-push: ();
 /*================ Sizing Variables ================*/
 $width-site: 1180px;
 $gutter: 30px;
-$logo-max-width: $settings-logo-max-width;
 
 /*================ Z-Index ================*/
 $z-index-dropdown: 2;
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 43f2f1bce..6bb66c2fa 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -7,8 +7,7 @@
 @import url('tools/mixins.scss');
 
 /*================ SETTINGS ================*/
-@import url('settings/theme-settings.scss.liquid');
-@import url('settings/variables.scss');
+@import url('settings/variables.scss.liquid');
 
 /*================ COMMON ================*/
 @import url('global/normalize.scss');
@@ -20,11 +19,9 @@
 @import url('global/rte.scss');
 @import url('global/responsive-tables.scss');
 @import url('global/links-buttons.scss');
-@import url('global/media.scss');
 @import url('global/forms.scss');
 @import url('global/blank-states.scss');
 
 /*================ MODULES ================*/
 @import url('modules/site-header.scss');
-@import url('modules/password-template.scss');
 @import url('modules/gift-card-template.scss');
diff --git a/src/templates/customers/addresses.liquid b/src/templates/customers/addresses.liquid
index b50fe2a55..bca5ea597 100644
--- a/src/templates/customers/addresses.liquid
+++ b/src/templates/customers/addresses.liquid
@@ -112,7 +112,7 @@
     </label>
 
     <input type="submit" class="btn" value="{{ 'customer.addresses.add' | t }}">
-    <button type="button" class="text-link address-new-toggle">
+    <button type="button" class="address-new-toggle">
       {{ 'customer.addresses.cancel' | t }}
     </button>