| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- /**
- * placeholder-loading v0.2.6
- * Author: Zalog (https://www.zalog.ro/)
- * License: MIT
- **/
- .ph-item {
- direction: ltr;
- position: relative;
- display: flex;
- flex-wrap: wrap;
- padding: 30px 15px 15px;
- overflow: hidden;
- margin-bottom: 30px;
- background-color:transparent #fff;
- border: 0px solid #e6e6e6;
- border-radius: 2px
- }
- .ph-item,
- .ph-item *,
- .ph-item :after,
- .ph-item :before {
- box-sizing: border-box
- }
- .ph-item:before {
- content: " ";
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 50%;
- z-index: 1;
- width: 500%;
- margin-left: -250%;
- -webkit-animation: phAnimation .8s linear infinite;
- animation: phAnimation .8s linear infinite;
- background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 46%, hsla(0, 0%, 100%, .35) 50%, hsla(0, 0%, 100%, 0) 54%) 50% 50%
- }
- .ph-item>* {
- flex: 1 1 auto;
- display: flex;
- flex-flow: column;
- padding-right: 15px;
- padding-left: 15px
- }
- .ph-row {
- display: flex;
- flex-wrap: wrap;
- margin-bottom: 7.5px
- }
- .ph-row div {
- height: 10px;
- margin-bottom: 7.5px;
- background-color: #ced4da;
- border-radius: 2px;
- }
- .ph-row .big,
- .ph-row.big div {
- height: 20px;
- margin-bottom: 15px
- }
- .ph-row .empty {
- background-color: hsla(0, 0%, 100%, 0)
- }
- .ph-col-2 {
- flex: 0 0 16.66667%
- }
- .ph-col-4 {
- flex: 0 0 33.33333%
- }
- .ph-col-6 {
- flex: 0 0 50%
- }
- .ph-col-8 {
- flex: 0 0 66.66667%
- }
- .ph-col-10 {
- flex: 0 0 83.33333%
- }
- .ph-col-12 {
- flex: 0 0 100%
- }
- .ph-avatar {
- position: relative;
- width: 100%;
- min-width: 60px;
- background-color: #ced4da;
- margin-bottom: 15px;
- border-radius: 50%;
- overflow: hidden
- }
- .ph-avatar:before {
- content: " ";
- display: block;
- padding-top: 100%
- }
- .ph-picture {
- width: 100%;
- height: 120px;
- background-color: #ced4da;
- margin-bottom: 15px;
- border-radius: 2px;
- }
- .ph-button {
- width: 50%;
- height: 50px;
- background-color: #ced4da;
- margin-bottom: 10px;
- border-radius: 2px;
- }
- @-webkit-keyframes phAnimation {
- 0% {
- transform: translate3d(-30%, 0, 0)
- }
- to {
- transform: translate3d(30%, 0, 0)
- }
- }
- @keyframes phAnimation {
- 0% {
- transform: translate3d(-30%, 0, 0)
- }
- to {
- transform: translate3d(30%, 0, 0)
- }
- }
|