diff --git a/src/assets/styles/common-skeleton.scss b/src/assets/styles/common-skeleton.scss new file mode 100644 index 0000000..4714db1 --- /dev/null +++ b/src/assets/styles/common-skeleton.scss @@ -0,0 +1,58 @@ +/* sk-w-${n} (in pixels) */ + +$skeleton-widths: (12, 40, 56, 60, 70, 110, 200, 250, 340); +@each $w in $skeleton-widths { + .sk-w-#{$w} { + max-width: #{$w}px; + } +} + +.sk-w-12 { + border-radius: 6px; +} + +/* sk-h-${n} */ + +$skeleton-heights: (6, 8, 12, 20, 24); +@each $h in $skeleton-heights { + .sk-h-#{$h} { + height: #{$h}px; + } +} + +.sk-line, +.sk-square, +.sk-circle, +.sk-rhombus { + background-color: var(--iqser-grey-4); +} + +.sk-line { + border-radius: 12px; + width: 100%; +} + +.sk-square { + min-width: 16px; + height: 16px; +} + +.sk-rhombus { + min-width: 16px; + height: 16px; + transform: rotate(45deg) scale(0.707); +} + +.sk-circle { + border-radius: 50%; + + &.w-24 { + width: 24px; + height: 24px; + } + + &.w-16 { + width: 16px; + height: 16px; + } +} diff --git a/src/assets/styles/common-styles.scss b/src/assets/styles/common-styles.scss index b610a60..32e302f 100644 --- a/src/assets/styles/common-styles.scss +++ b/src/assets/styles/common-styles.scss @@ -29,3 +29,4 @@ @use 'common-side-nav'; @use 'common-radio'; @use 'common-color-picker'; +@use 'common-skeleton'; diff --git a/src/assets/styles/common-tables.scss b/src/assets/styles/common-tables.scss index e44af7a..d50da06 100644 --- a/src/assets/styles/common-tables.scss +++ b/src/assets/styles/common-tables.scss @@ -13,3 +13,38 @@ margin-right: 10px; } } + +.header-item { + background-color: var(--iqser-btn-bg); + height: 50px; + display: flex; + align-items: center; + z-index: 1; + border-bottom: 1px solid var(--iqser-separator); + box-sizing: border-box; + padding: 0 24px; + + .header-title { + display: flex; + align-items: center; + gap: 12px; + } + + &.selection-enabled { + padding: 0 24px 0 10px; + } + + > *:not(:last-child) { + margin-right: 10px; + } + + .actions { + display: flex; + align-items: center; + justify-content: flex-end; + + > *:not(:last-child) { + margin-right: 16px; + } + } +} diff --git a/src/assets/styles/common-utilities.scss b/src/assets/styles/common-utilities.scss index efa6c76..955c96b 100644 --- a/src/assets/styles/common-utilities.scss +++ b/src/assets/styles/common-utilities.scss @@ -42,23 +42,3 @@ $sides: (top, bottom, left, right); flex: #{$n}; } } - -/* SKELETON LINES */ - -/* sk-w-${n} (in pixels) */ - -$skeleton-widths: (12, 110, 200, 250, 340); -@each $w in $skeleton-widths { - .sk-w-#{$w} { - max-width: #{$w}px; - } -} - -/* sk-h-${n} */ - -$skeleton-heights: (6, 8, 12, 20, 24); -@each $h in $skeleton-heights { - .sk-h-#{$h} { - height: #{$h}px; - } -} diff --git a/src/lib/listing/table-header/table-header.component.scss b/src/lib/listing/table-header/table-header.component.scss index 400617e..ee5eb97 100644 --- a/src/lib/listing/table-header/table-header.component.scss +++ b/src/lib/listing/table-header/table-header.component.scss @@ -7,37 +7,3 @@ } } -.header-item { - background-color: var(--iqser-btn-bg); - height: 50px; - display: flex; - align-items: center; - z-index: 1; - border-bottom: 1px solid var(--iqser-separator); - box-sizing: border-box; - padding: 0 24px; - - .header-title { - display: flex; - align-items: center; - gap: 12px; - } - - &.selection-enabled { - padding: 0 24px 0 10px; - } - - > *:not(:last-child) { - margin-right: 10px; - } - - .actions { - display: flex; - align-items: center; - justify-content: flex-end; - - > *:not(:last-child) { - margin-right: 16px; - } - } -} diff --git a/src/lib/services/composite-route.guard.ts b/src/lib/services/composite-route.guard.ts index f102b82..1e9039a 100644 --- a/src/lib/services/composite-route.guard.ts +++ b/src/lib/services/composite-route.guard.ts @@ -43,7 +43,13 @@ export class CompositeRouteGuard implements CanActivate { } #preChecks(route: ActivatedRouteSnapshot): void { - const skeleton = route.data['skeleton']; + let skeleton: string | null = route.data['skeleton']; + let currentRoute = route; + while (!skeleton && currentRoute.firstChild) { + currentRoute = currentRoute.firstChild; + skeleton = currentRoute.data['skeleton']; + } + if (skeleton) { this._skeletonService.setType(skeleton); } else { diff --git a/src/lib/skeleton/skeleton/skeleton.component.scss b/src/lib/skeleton/skeleton/skeleton.component.scss index 187e4e4..b32d9ef 100644 --- a/src/lib/skeleton/skeleton/skeleton.component.scss +++ b/src/lib/skeleton/skeleton/skeleton.component.scss @@ -1,5 +1,5 @@ :host { position: absolute; width: 100vw; - z-index: 2; + z-index: 1100; }