Browse Source

Finish content loader images

pull/6294/merge
Jack 6 years ago
parent
commit
a0366085fc
3 changed files with 25 additions and 6 deletions
  1. 23
      src/definitions/elements/loader.less
  2. 2
      src/definitions/modules/search.less
  3. 6
      src/themes/default/elements/loader.variables

23
src/definitions/elements/loader.less

@ -187,8 +187,10 @@
} }
.ui.content.loader, .ui.content.loader,
.ui.content.loader > :before,
.ui.content.loader .image.header:after,
.ui.content.loader .line, .ui.content.loader .line,
.ui.content.loader .image.header:after {
.ui.content.loader .line:after {
background-color: @white; background-color: @white;
} }
@ -218,6 +220,11 @@
animation-delay: 0.4s; animation-delay: 0.4s;
} }
/* Image */
.ui.content.loader .image:not(.header) {
height: @contentImageHeight;
}
/* Lines */ /* Lines */
.ui.content.loader .line { .ui.content.loader .line {
position: relative; position: relative;
@ -308,9 +315,12 @@
} }
/* Paragraph */ /* Paragraph */
.ui.content.loader .paragraph + .paragraph .line:first-child,
.ui.content.loader .header + .paragraph .line:first-child {
height: @contentParagraphMarginTop;
.ui.content.loader .image:not(:first-child):before,
.ui.content.loader .paragraph:not(:first-child):before,
.ui.content.loader .header:not(:first-child):before {
height: @contentSpacing;
content: '';
display: block;
} }
/* Inverted Content Loader */ /* Inverted Content Loader */
@ -318,12 +328,15 @@
background-image: @contentInvertedLoadingGradient; background-image: @contentInvertedLoadingGradient;
} }
.ui.inverted.content.loader, .ui.inverted.content.loader,
.ui.inverted.content.loader > :before,
.ui.inverted.content.loader .image.header:after,
.ui.inverted.content.loader .line, .ui.inverted.content.loader .line,
.ui.inverted.content.loader .image.header:after {
.ui.inverted.content.loader .line:after {
background-color: @black; background-color: @black;
} }
/*------------------- /*-------------------
Text Text
--------------------*/ --------------------*/

2
src/definitions/modules/search.less

@ -72,6 +72,8 @@
left: 0%; left: 0%;
transform-origin: center top; transform-origin: center top;
white-space: normal; white-space: normal;
text-align: left;
text-transform: none;
background: @resultsBackground; background: @resultsBackground;

6
src/themes/default/elements/loader.variables

@ -30,12 +30,17 @@
@loaderTextColor: @textColor; @loaderTextColor: @textColor;
@invertedLoaderTextColor: @invertedTextColor; @invertedLoaderTextColor: @invertedTextColor;
@contentSpacing: 20px;
/* Content Loader Lines */ /* Content Loader Lines */
@contentLineMargin: 12px; @contentLineMargin: 12px;
@contentHeaderLineHeight: 9px; @contentHeaderLineHeight: 9px;
@contentLineHeight: 7px; @contentLineHeight: 7px;
@contentParagraphLineHeight: @contentLineHeight; @contentParagraphLineHeight: @contentLineHeight;
/* Image */
@contentImageHeight: 100px;
/* Header Image */ /* Header Image */
@contentImageWidth: 50px; @contentImageWidth: 50px;
@contentImageTextIndent: 10px; @contentImageTextIndent: 10px;
@ -43,7 +48,6 @@
/* Paragraph */ /* Paragraph */
@contentHeaderLineOneOutdent: 0px; @contentHeaderLineOneOutdent: 0px;
@contentHeaderLineTwoOutdent: 120px; @contentHeaderLineTwoOutdent: 120px;
@contentParagraphMarginTop: 20px;
@contentLineOneOutdent: 4rem; @contentLineOneOutdent: 4rem;
@contentLineTwoOutdent: 7rem; @contentLineTwoOutdent: 7rem;

Loading…
Cancel
Save