From 9a3079ba58ea54534160cabfc7b6227a77e2665e Mon Sep 17 00:00:00 2001
From: Jack <jacklukic@gmail.com>
Date: Sun, 9 Sep 2018 20:18:08 -0700
Subject: [PATCH] Make content loaders support image aspect ratios

---
 src/definitions/elements/loader.less         | 15 ++++++++++++++-
 src/themes/default/elements/loader.variables | 12 ++++++------
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/definitions/elements/loader.less b/src/definitions/elements/loader.less
index 0462bf926..8e8b0ad74 100755
--- a/src/definitions/elements/loader.less
+++ b/src/definitions/elements/loader.less
@@ -168,7 +168,7 @@
 
 /* Placeholder Paragraph */
 .ui.content.loader {
-  position: relative;
+  position: static;
   left: 0px;
   top: 0px;
   transform: none;
@@ -224,6 +224,19 @@
 .ui.content.loader .image:not(.header) {
   height: @contentImageHeight;
 }
+.ui.content.loader .square.image:not(.header) {
+  height: 0px;
+  overflow: hidden;
+  /* 1/1 aspect ratio */
+  padding-top: 100%;
+}
+.ui.content.loader .rectangular.image:not(.header) {
+  height: 0px;
+  overflow: hidden;
+  /* 4/3 aspect ratio */
+  padding-top: 75%;
+}
+
 
 /* Lines */
 .ui.content.loader .line {
diff --git a/src/themes/default/elements/loader.variables b/src/themes/default/elements/loader.variables
index 0d240ffb6..499266525 100644
--- a/src/themes/default/elements/loader.variables
+++ b/src/themes/default/elements/loader.variables
@@ -25,7 +25,7 @@
 --------------------*/
 
 /* Text */
-@contentLoaderMaxWidth: 30rem;
+@contentLoaderMaxWidth: 50rem;
 @textDistance: @relativeMini;
 @loaderTextColor: @textColor;
 @invertedLoaderTextColor: @invertedTextColor;
@@ -33,9 +33,9 @@
 @contentSpacing: 20px;
 
 /* Content Loader Lines */
-@contentLineMargin: 12px;
-@contentHeaderLineHeight: 9px;
-@contentLineHeight: 7px;
+@contentLineMargin: @12px;
+@contentHeaderLineHeight: @9px;
+@contentLineHeight: @7px;
 @contentParagraphLineHeight: @contentLineHeight;
 
 /* Image */
@@ -43,11 +43,11 @@
 
 /* Header Image */
 @contentImageWidth: 50px;
-@contentImageTextIndent: 10px;
+@contentImageTextIndent: @10px;
 
 /* Paragraph */
 @contentHeaderLineOneOutdent: 0px;
-@contentHeaderLineTwoOutdent: 120px;
+@contentHeaderLineTwoOutdent: 8rem;
 
 @contentLineOneOutdent: 4rem;
 @contentLineTwoOutdent: 7rem;