Browse Source
Move content loader to new component, placeholder. Modify placeholder segment to be 'empty segment'
placeholder
Move content loader to new component, placeholder. Modify placeholder segment to be 'empty segment'
placeholder
Jack
6 years ago
31 changed files with 648 additions and 361 deletions
Split View
Diff Options
-
39dist/components/dimmer.js
-
2dist/components/dimmer.min.js
-
31dist/components/dropdown.js
-
2dist/components/dropdown.min.js
-
1dist/components/flag.css
-
2dist/components/flag.min.css
-
6dist/components/icon.css
-
2dist/components/icon.min.css
-
26dist/components/label.css
-
2dist/components/label.min.css
-
2dist/components/list.css
-
2dist/components/list.min.css
-
95dist/components/modal.js
-
2dist/components/modal.min.js
-
19dist/components/popup.js
-
2dist/components/popup.min.js
-
35dist/semantic.css
-
184dist/semantic.js
-
8dist/semantic.min.css
-
2dist/semantic.min.js
-
189src/definitions/elements/loader.less
-
213src/definitions/elements/placeholder.less
-
38src/definitions/elements/segment.less
-
1src/theme.config.example
-
39src/themes/default/elements/loader.variables
-
3src/themes/default/elements/placeholder.overrides
-
49src/themes/default/elements/placeholder.variables
-
10src/themes/default/elements/segment.variables
-
1tasks/config/admin/release.js
-
1tasks/config/defaults.js
-
1tasks/config/project/install.js
2
dist/components/dimmer.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
dist/components/dropdown.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
dist/components/flag.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
dist/components/icon.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
dist/components/label.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
dist/components/list.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
dist/components/modal.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
dist/components/popup.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
8
dist/semantic.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
dist/semantic.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,213 @@ |
|||
/*! |
|||
* # Semantic UI - Loader |
|||
* http://github.com/semantic-org/semantic-ui/ |
|||
* |
|||
* |
|||
* Released under the MIT license |
|||
* http://opensource.org/licenses/MIT |
|||
* |
|||
*/ |
|||
/******************************* |
|||
Theme |
|||
*******************************/ |
|||
|
|||
@type : 'element'; |
|||
@element : 'placeholder'; |
|||
|
|||
@import (multiple) '../../theme.config'; |
|||
|
|||
/*------------------- |
|||
Content |
|||
--------------------*/ |
|||
|
|||
.ui.placeholder { |
|||
position: static; |
|||
left: 0px; |
|||
top: 0px; |
|||
transform: none; |
|||
margin: 0em; |
|||
will-change: background-position, transform; |
|||
overflow: hidden; |
|||
backface-visibility: hidden; |
|||
animation: placeholderShimmer @placeholderLoadingAnimationDuration linear; |
|||
animation-iteration-count: infinite; |
|||
background-color: @white; |
|||
background-image: @placeholderLoadingGradient; |
|||
background-size: @placeholderLoadingGradientWidth 100%; |
|||
max-width: @placeholderMaxWidth; |
|||
} |
|||
|
|||
@keyframes placeholderShimmer{ |
|||
0% { |
|||
background-position: -@placeholderLoadingGradientWidth 0 |
|||
} |
|||
100% { |
|||
background-position: @placeholderLoadingGradientWidth 0 |
|||
} |
|||
} |
|||
|
|||
.ui.placeholder, |
|||
.ui.placeholder > :before, |
|||
.ui.placeholder .image.header:after, |
|||
.ui.placeholder .line, |
|||
.ui.placeholder .line:after { |
|||
background-color: @white; |
|||
} |
|||
|
|||
/* Image */ |
|||
.ui.placeholder .image:not(.header) { |
|||
height: @placeholderImageHeight; |
|||
} |
|||
.ui.placeholder .square.image:not(.header) { |
|||
height: 0px; |
|||
overflow: hidden; |
|||
/* 1/1 aspect ratio */ |
|||
padding-top: 100%; |
|||
} |
|||
.ui.placeholder .rectangular.image:not(.header) { |
|||
height: 0px; |
|||
overflow: hidden; |
|||
/* 4/3 aspect ratio */ |
|||
padding-top: 75%; |
|||
} |
|||
|
|||
|
|||
/* Lines */ |
|||
.ui.placeholder .line { |
|||
position: relative; |
|||
height: @placeholderLineMargin; |
|||
} |
|||
.ui.placeholder .line:before, |
|||
.ui.placeholder .line:after { |
|||
top: 100%; |
|||
position: absolute; |
|||
content: ''; |
|||
background-color: inherit; |
|||
} |
|||
.ui.placeholder .line:before { |
|||
left: 0px; |
|||
} |
|||
.ui.placeholder .line:after { |
|||
right: 0px; |
|||
} |
|||
|
|||
/* Any Lines */ |
|||
.ui.placeholder .line { |
|||
margin-bottom: @placeholderLineHeight; |
|||
} |
|||
.ui.placeholder .line:before, |
|||
.ui.placeholder .line:after { |
|||
height: @placeholderLineHeight; |
|||
} |
|||
.ui.placeholder .line:not(:first-child) { |
|||
margin-top: @placeholderLineHeight; |
|||
} |
|||
|
|||
/* Header Image + 2 Lines */ |
|||
.ui.placeholder .header { |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/* Line Outdent */ |
|||
.ui.placeholder .line:nth-child(1):after { |
|||
width: @placeholderLineOneOutdent; |
|||
} |
|||
.ui.placeholder .line:nth-child(2):after { |
|||
width: @placeholderLineTwoOutdent; |
|||
} |
|||
.ui.placeholder .line:nth-child(3):after { |
|||
width: @placeholderLineThreeOutdent; |
|||
} |
|||
.ui.placeholder .line:nth-child(4):after { |
|||
width: @placeholderLineFourOutdent; |
|||
} |
|||
.ui.placeholder .line:nth-child(5):after { |
|||
width: @placeholderLineFiveOutdent; |
|||
} |
|||
|
|||
/* Header Line 1 & 2*/ |
|||
.ui.placeholder .header .line { |
|||
margin-bottom: @placeholderHeaderLineHeight; |
|||
} |
|||
.ui.placeholder .header .line:before, |
|||
.ui.placeholder .header .line:after { |
|||
height: @placeholderHeaderLineHeight; |
|||
} |
|||
.ui.placeholder .header .line:not(:first-child) { |
|||
margin-top: @placeholderHeaderLineHeight; |
|||
} |
|||
.ui.placeholder .header .line:after { |
|||
width: @placeholderHeaderLineOneOutdent; |
|||
} |
|||
.ui.placeholder .header .line:nth-child(2):after { |
|||
width: @placeholderHeaderLineTwoOutdent; |
|||
} |
|||
|
|||
/* Image Header */ |
|||
.ui.placeholder .image.header .line { |
|||
margin-left: @placeholderImageWidth; |
|||
} |
|||
.ui.placeholder .image.header .line:before { |
|||
width: @placeholderImageTextIndent; |
|||
} |
|||
.ui.placeholder .image.header:after { |
|||
display: block; |
|||
height: @placeholderLineMargin; |
|||
content: ''; |
|||
margin-left: @placeholderImageWidth; |
|||
} |
|||
|
|||
/* Spacing */ |
|||
.ui.placeholder .image .line:first-child, |
|||
.ui.placeholder .paragraph .line:first-child, |
|||
.ui.placeholder .header .line:first-child { |
|||
height: 0.01px; |
|||
} |
|||
.ui.placeholder .image:not(:first-child):before, |
|||
.ui.placeholder .paragraph:not(:first-child):before, |
|||
.ui.placeholder .header:not(:first-child):before { |
|||
height: @placeholderSpacing; |
|||
content: ''; |
|||
display: block; |
|||
} |
|||
|
|||
/* Inverted Content Loader */ |
|||
.ui.inverted.placeholder { |
|||
background-image: @placeholderInvertedLoadingGradient; |
|||
} |
|||
.ui.inverted.placeholder, |
|||
.ui.inverted.placeholder > :before, |
|||
.ui.inverted.placeholder .image.header:after, |
|||
.ui.inverted.placeholder .line, |
|||
.ui.inverted.placeholder .line:after { |
|||
background-color: @black; |
|||
} |
|||
|
|||
/******************************* |
|||
Variations |
|||
*******************************/ |
|||
|
|||
|
|||
/*------------------- |
|||
Sizes |
|||
--------------------*/ |
|||
|
|||
.ui.placeholder .full.line.line.line:after { |
|||
width: @placeholderFullLineOutdent; |
|||
} |
|||
.ui.placeholder .very.long.line.line.line:after { |
|||
width: @placeholderVeryLongLineOutdent; |
|||
} |
|||
.ui.placeholder .long.line.line.line:after { |
|||
width: @placeholderLongLineOutdent; |
|||
} |
|||
.ui.placeholder .medium.line.line.line:after { |
|||
width: @placeholderMediumLineOutdent; |
|||
} |
|||
.ui.placeholder .short.line.line.line:after { |
|||
width: @placeholderShortLineOutdent; |
|||
} |
|||
.ui.placeholder .very.short.line.line.line:after { |
|||
width: @placeholderVeryShortLineOutdent; |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
/******************************* |
|||
Theme Overrides |
|||
*******************************/ |
|||
@ -0,0 +1,49 @@ |
|||
@placeholderMaxWidth: 50rem; |
|||
|
|||
/* Key Content Sizing */ |
|||
@placeholderLineMargin: @relative12px; |
|||
@placeholderHeaderLineHeight: @relative9px; |
|||
@placeholderLineHeight: @relative7px; |
|||
@placeholderParagraphLineHeight: @placeholderLineHeight; |
|||
|
|||
@placeholderSpacing: @relative20px; |
|||
|
|||
/* Image */ |
|||
@placeholderImageHeight: 100px; |
|||
|
|||
/* Header Image */ |
|||
@placeholderImageWidth: 3em; |
|||
@placeholderImageTextIndent: @10px; |
|||
|
|||
/* Paragraph */ |
|||
@placeholderHeaderLineOneOutdent: 40%; |
|||
@placeholderHeaderLineTwoOutdent: 20%; |
|||
|
|||
@placeholderLineOneOutdent: @placeholderLongLineOutdent; |
|||
@placeholderLineTwoOutdent: @placeholderShortLineOutdent; |
|||
@placeholderLineThreeOutdent: @placeholderMediumLineOutdent; |
|||
@placeholderLineFourOutdent: @placeholderVeryShortLineOutdent; |
|||
@placeholderLineFiveOutdent: @placeholderShortLineOutdent; |
|||
|
|||
|
|||
/* Glow Gradient */ |
|||
@placeholderLoadingAnimationDuration: 2s; |
|||
@placeholderLoadingGradientWidth: 1200px; |
|||
@placeholderLoadingGradient: linear-gradient(to right, |
|||
#EEEEEE 0%, |
|||
#DDDDDD 15%, |
|||
#EEEEEE 30% |
|||
); |
|||
@placeholderInvertedLoadingGradient: linear-gradient(to right, |
|||
#222222 0%, |
|||
#333333 15%, |
|||
#222222 30% |
|||
); |
|||
|
|||
/* Variations */ |
|||
@placeholderFullLineOutdent: 0%; |
|||
@placeholderVeryLongLineOutdent: 10%; |
|||
@placeholderLongLineOutdent: 35%; |
|||
@placeholderMediumLineOutdent: 50%; |
|||
@placeholderShortLineOutdent: 65%; |
|||
@placeholderVeryShortLineOutdent: 80%; |
|||
Write
Preview
Loading…
Cancel
Save