wishthis/node_modules/fomantic-ui/dist/components/placeholder.css

235 lines
4.8 KiB
CSS
Raw Normal View History

2022-01-13 13:00:31 +00:00
/*!
* # Fomantic-UI 2.9.3 - Placeholder
2023-08-17 09:47:40 +00:00
* https://github.com/fomantic/Fomantic-UI/
2022-01-13 13:00:31 +00:00
*
*
* Released under the MIT license
2023-08-17 09:47:40 +00:00
* https://opensource.org/licenses/MIT
2022-01-13 13:00:31 +00:00
*
*/
2023-08-17 09:47:40 +00:00
/* -------------------
2022-01-13 13:00:31 +00:00
Content
2023-08-17 09:47:40 +00:00
-------------------- */
2022-01-13 13:00:31 +00:00
.ui.placeholder {
position: static;
overflow: hidden;
2023-08-17 09:47:40 +00:00
animation: placeholderShimmer 2s linear;
animation-iteration-count: infinite;
background-color: #fff;
2022-01-13 13:00:31 +00:00
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.08) 0, rgba(0, 0, 0, 0.15) 15%, rgba(0, 0, 0, 0.08) 30%);
background-size: 1200px 100%;
max-width: 30rem;
}
@keyframes placeholderShimmer {
0% {
background-position: -1200px 0;
}
100% {
background-position: 1200px 0;
}
}
.ui.placeholder + .ui.placeholder {
margin-top: 2rem;
}
.ui.placeholder + .ui.placeholder {
2023-08-17 09:47:40 +00:00
animation-delay: 0.15s;
2022-01-13 13:00:31 +00:00
}
.ui.placeholder + .ui.placeholder + .ui.placeholder {
2023-08-17 09:47:40 +00:00
animation-delay: 0.3s;
2022-01-13 13:00:31 +00:00
}
.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
2023-08-17 09:47:40 +00:00
animation-delay: 0.45s;
2022-01-13 13:00:31 +00:00
}
.ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
2023-08-17 09:47:40 +00:00
animation-delay: 0.6s;
2022-01-13 13:00:31 +00:00
}
.ui.placeholder,
2022-06-08 10:36:39 +00:00
.ui.placeholder > ::before,
.ui.placeholder .image.header::after,
2022-01-13 13:00:31 +00:00
.ui.placeholder .line,
2022-06-08 10:36:39 +00:00
.ui.placeholder .line::after {
2023-08-17 09:47:40 +00:00
background-color: #fff;
2022-01-13 13:00:31 +00:00
}
.ui.placeholder.hidden {
display: none;
}
/* Image */
.ui.placeholder .image:not(.header):not(.ui):not(.icon) {
height: 100px;
}
.ui.placeholder .square.image:not(.header) {
height: 0;
overflow: hidden;
/* 1/1 aspect ratio */
padding-top: 100%;
}
.ui.placeholder .rectangular.image:not(.header) {
height: 0;
overflow: hidden;
/* 4/3 aspect ratio */
padding-top: 75%;
}
/* Lines */
.ui.placeholder .line {
position: relative;
height: 0.85714286em;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .line::before,
.ui.placeholder .line::after {
2022-01-13 13:00:31 +00:00
top: 100%;
position: absolute;
2023-08-17 09:47:40 +00:00
content: "";
2022-01-13 13:00:31 +00:00
background-color: inherit;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .line::before {
2022-01-13 13:00:31 +00:00
left: 0;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .line::after {
2022-01-13 13:00:31 +00:00
right: 0;
}
/* Any Lines */
.ui.placeholder .line {
margin-bottom: 0.5em;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .line::before,
.ui.placeholder .line::after {
2022-01-13 13:00:31 +00:00
height: 0.5em;
}
.ui.placeholder .line:not(:first-child) {
margin-top: 0.5em;
}
/* Line Outdent */
2022-06-08 10:36:39 +00:00
.ui.placeholder .line:nth-child(1)::after {
2022-01-13 13:00:31 +00:00
width: 0;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .line:nth-child(2)::after {
2022-01-13 13:00:31 +00:00
width: 50%;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .line:nth-child(3)::after {
2022-01-13 13:00:31 +00:00
width: 10%;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .line:nth-child(4)::after {
2022-01-13 13:00:31 +00:00
width: 35%;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .line:nth-child(5)::after {
2022-01-13 13:00:31 +00:00
width: 65%;
}
/* Header Image + 2 Lines */
.ui.placeholder .header {
position: relative;
overflow: hidden;
}
2023-08-17 09:47:40 +00:00
/* Header Line 1 & 2 */
2022-01-13 13:00:31 +00:00
.ui.placeholder .header .line {
margin-bottom: 0.64285714em;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .header .line::before,
.ui.placeholder .header .line::after {
2022-01-13 13:00:31 +00:00
height: 0.64285714em;
}
.ui.placeholder .header .line:not(:first-child) {
margin-top: 0.64285714em;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .header .line::after {
2022-01-13 13:00:31 +00:00
width: 20%;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .header .line:nth-child(2)::after {
2022-01-13 13:00:31 +00:00
width: 60%;
}
2023-08-17 09:47:40 +00:00
2022-01-13 13:00:31 +00:00
/* Image Header */
.ui.placeholder .image.header .line {
margin-left: 3em;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .image.header .line::before {
2022-01-13 13:00:31 +00:00
width: 0.71428571rem;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .image.header::after {
2022-01-13 13:00:31 +00:00
display: block;
height: 0.85714286em;
2023-08-17 09:47:40 +00:00
content: "";
2022-01-13 13:00:31 +00:00
margin-left: 3em;
}
/* Spacing */
.ui.placeholder .image .line:first-child,
.ui.placeholder .paragraph .line:first-child,
.ui.placeholder .header .line:first-child {
height: 0.01px;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .image:not(:first-child)::before,
.ui.placeholder .paragraph:not(:first-child)::before,
.ui.placeholder .header:not(:first-child)::before {
2022-01-13 13:00:31 +00:00
height: 1.42857143em;
2023-08-17 09:47:40 +00:00
content: "";
2022-01-13 13:00:31 +00:00
display: block;
}
/* Inverted Content Loader */
.ui.inverted.placeholder {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.14) 15%, rgba(255, 255, 255, 0.08) 30%);
}
.ui.inverted.placeholder,
2022-06-08 10:36:39 +00:00
.ui.inverted.placeholder > ::before,
.ui.inverted.placeholder .image.header::after,
2022-01-13 13:00:31 +00:00
.ui.inverted.placeholder .line,
2022-06-08 10:36:39 +00:00
.ui.inverted.placeholder .line::after {
2023-08-17 09:47:40 +00:00
background-color: #1b1c1d;
2022-01-13 13:00:31 +00:00
}
/*******************************
Variations
*******************************/
2023-08-17 09:47:40 +00:00
/* -------------------
2022-01-13 13:00:31 +00:00
Sizes
2023-08-17 09:47:40 +00:00
-------------------- */
2022-06-08 10:36:39 +00:00
.ui.placeholder .full.line.line.line::after {
2022-01-13 13:00:31 +00:00
width: 0;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .very.long.line.line.line::after {
2022-01-13 13:00:31 +00:00
width: 10%;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .long.line.line.line::after {
2022-01-13 13:00:31 +00:00
width: 35%;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .medium.line.line.line::after {
2022-01-13 13:00:31 +00:00
width: 50%;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .short.line.line.line::after {
2022-01-13 13:00:31 +00:00
width: 65%;
}
2022-06-08 10:36:39 +00:00
.ui.placeholder .very.short.line.line.line::after {
2022-01-13 13:00:31 +00:00
width: 80%;
}
2023-08-17 09:47:40 +00:00
/* -------------------
Fluid
-------------------- */
2022-01-13 13:00:31 +00:00
.ui.fluid.placeholder {
max-width: none;
}
/*******************************
Theme Overrides
*******************************/
2023-08-17 09:47:40 +00:00
/*******************************
Site Overrides
*******************************/