d3c61a4c56
Squashed commit of the following: commit d76e32cd99e2e823142f4410e66c66df5e096041 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Oct 28 10:28:02 2021 +0200 Move styles to own library commit 85f0a5788ebdd7309499b1b623f4ac1046f45811 Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Thu Oct 28 10:09:23 2021 +0200 double quotes in html commit eeb600cd631e3478c136795a8109e8927546b14b Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Oct 27 16:42:48 2021 +0200 UI library with copy of digi-ng's skeleton commit 11a24c0eef173e6b2f087eca5e96063036e6394b Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Oct 27 16:06:43 2021 +0200 Update .eslintrc.json commit 3c4b2e4823dbd8e9ca8dd332966bd10ac0fc098f Author: Daniel Appelgren <daniel.appelgren@arbetsformedlingen.se> Date: Wed Oct 27 15:08:32 2021 +0200 add nx library
92 lines
2.3 KiB
SCSS
92 lines
2.3 KiB
SCSS
@import 'variables/gutters';
|
|
@import 'variables/breakpoints';
|
|
|
|
$typography__margin--text: u(6);
|
|
$animation__duration--sweep: 4s;
|
|
$ui__color--gray-10: #f5f5f5;
|
|
$ui__color--gray-20: #efefef;
|
|
$ui__color--gray-30: #d1d1d1;
|
|
$ui__color--skeleton-text: linear-gradient(
|
|
to left,
|
|
$ui__color--gray-20,
|
|
$ui__color--gray-20 40%,
|
|
$ui__color--gray-10 50%,
|
|
$ui__color--gray-20 60%,
|
|
$ui__color--gray-20
|
|
);
|
|
$ui__color--skeleton-head: linear-gradient(
|
|
to left,
|
|
$ui__color--gray-30,
|
|
$ui__color--gray-30 40%,
|
|
$ui__color--gray-20 50%,
|
|
$ui__color--gray-30 60%,
|
|
$ui__color--gray-30
|
|
);
|
|
$skeleton__top--height: 2.5rem;
|
|
$skeleton__top--height-desktop: 4.5rem;
|
|
$skeleton__header--height: 1rem + 0.46875rem;
|
|
$skeleton__header--height-desktop: 2rem + 0.3125rem;
|
|
|
|
:host {
|
|
|
|
.ui-skeleton__top {
|
|
animation: ui-skeleton__animation $animation__duration--sweep infinite;
|
|
height: $skeleton__top--height;
|
|
background: $ui__color--skeleton-text;
|
|
background-size: 400%;
|
|
width: 25%;
|
|
margin-bottom: var(--digi--layout--gutter--m);
|
|
|
|
@media (min-width: $digi--layout--breakpoint--l) {
|
|
height: $skeleton__top--height-desktop;
|
|
width: 20%;
|
|
margin-bottom: $digi--layout--gutter--l;
|
|
}
|
|
}
|
|
|
|
.ui-skeleton__header {
|
|
animation: ui-skeleton__animation $animation__duration--sweep infinite;
|
|
background: $ui__color--skeleton-head;
|
|
background-size: 400%;
|
|
width: 33%;
|
|
height: $skeleton__header--height;
|
|
margin-bottom: var(----digi--layout--gutter--s);
|
|
|
|
@media (min-width: $digi--layout--breakpoint--l) {
|
|
height: $skeleton__header--height-desktop;
|
|
margin-bottom: $digi--layout--gutter--l;
|
|
width: 90%;
|
|
}
|
|
}
|
|
|
|
.ui-skeleton__line {
|
|
animation: ui-skeleton__animation $animation__duration--sweep 0.5s infinite;
|
|
background: $ui__color--skeleton-text;
|
|
background-size: 400%;
|
|
margin-bottom: var(--digi--layout--gutter--xs);
|
|
height: var(--digi--typography--font-size);
|
|
}
|
|
|
|
|
|
.ui-skeleton__line--last {
|
|
width: 75%;
|
|
margin-bottom: var(--digi--layout--gutter);
|
|
}
|
|
|
|
.ui-skeleton__text {
|
|
|
|
font-weight: var(--digi--typography--font-weight--semibold);
|
|
margin-bottom: $typography__margin--text / 2;
|
|
}
|
|
}
|
|
|
|
@keyframes ui-skeleton__animation {
|
|
0% {
|
|
background-position-x: 100%;
|
|
}
|
|
|
|
100% {
|
|
background-position-x: 0%;
|
|
}
|
|
}
|