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;