102 lines
2.2 KiB
SCSS
102 lines
2.2 KiB
SCSS
|
@use '../core/style/list-common';
|
||
|
|
@use '../core/style/layout-common';
|
||
|
|
@use '../core/tokens/m2/mat/grid-list' as tokens-mat-grid-list;
|
||
|
|
@use '../core/tokens/token-utils';
|
||
|
|
|
||
|
|
|
||
|
|
// height of tile header or footer if it has one line
|
||
|
|
$one-line-height: 48px;
|
||
|
|
// height of tile header or footer if it has two lines
|
||
|
|
$two-line-height: 68px;
|
||
|
|
// side padding for text in tile headers and footers
|
||
|
|
$text-padding: 16px;
|
||
|
|
|
||
|
|
.mat-grid-list {
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-grid-tile {
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
// Headers & footers
|
||
|
|
.mat-grid-tile-header,
|
||
|
|
.mat-grid-tile-footer {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
height: $one-line-height;
|
||
|
|
color: #fff;
|
||
|
|
background: rgba(0, 0, 0, 0.38);
|
||
|
|
overflow: hidden;
|
||
|
|
padding: 0 $text-padding;
|
||
|
|
|
||
|
|
// Positioning
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
|
||
|
|
@include list-common.normalize-text();
|
||
|
|
|
||
|
|
&.mat-2-line {
|
||
|
|
height: $two-line-height;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-grid-list-text {
|
||
|
|
@include list-common.wrapper-base();
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-grid-tile-header {
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-grid-tile-footer {
|
||
|
|
bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-grid-avatar {
|
||
|
|
padding-right: $text-padding;
|
||
|
|
|
||
|
|
[dir='rtl'] & {
|
||
|
|
padding-right: 0;
|
||
|
|
padding-left: $text-padding;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:empty {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-grid-tile-header {
|
||
|
|
@include token-utils.use-tokens(
|
||
|
|
tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) {
|
||
|
|
$secondary-token-name: token-utils.get-token-variable(tile-header-secondary-text-size);
|
||
|
|
@include token-utils.create-token-slot(font-size, tile-header-primary-text-size);
|
||
|
|
@include list-common.base(#{$secondary-token-name});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-grid-tile-footer {
|
||
|
|
@include token-utils.use-tokens(
|
||
|
|
tokens-mat-grid-list.$prefix, tokens-mat-grid-list.get-token-slots()) {
|
||
|
|
$secondary-token-name: token-utils.get-token-variable(tile-footer-secondary-text-size);
|
||
|
|
@include token-utils.create-token-slot(font-size, tile-footer-primary-text-size);
|
||
|
|
@include list-common.base(#{$secondary-token-name});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.mat-grid-tile-content {
|
||
|
|
@include layout-common.fill;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
}
|