199 lines
4.3 KiB
SCSS
199 lines
4.3 KiB
SCSS
@use 'sass:math';
|
|
|
|
/******************************* GRID VIEW */
|
|
.l-grid-view {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
overflow: auto;
|
|
height: 100%;
|
|
|
|
&__item {
|
|
flex: 0 0 auto;
|
|
+ .l-grid-view__item { margin-top: $interiorMargin; }
|
|
}
|
|
|
|
body.desktop & {
|
|
flex-flow: row wrap;
|
|
align-content: flex-start;
|
|
|
|
&__item {
|
|
height: $gridItemDesk;
|
|
width: $gridItemDesk;
|
|
margin: 0 $interiorMargin $interiorMargin 0;
|
|
}
|
|
}
|
|
|
|
body.mobile & {
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
[class*='l-overlay'] & {
|
|
// When this view is in an overlay, prevent navigation
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
/******************************* GRID ITEMS */
|
|
.c-grid-item {
|
|
// Mobile-first
|
|
@include button($bg: $colorItemBg, $fg: $colorItemFg);
|
|
cursor: pointer;
|
|
display: flex;
|
|
padding: $interiorMarginLg;
|
|
|
|
&__type-icon {
|
|
filter: $colorKeyFilter;
|
|
flex: 0 0 $gridItemMobile;
|
|
font-size: floor(math.div($gridItemMobile, 2));
|
|
margin-right: $interiorMarginLg;
|
|
}
|
|
|
|
&.is-alias {
|
|
// Object is an alias to an original.
|
|
[class*='__type-icon'] {
|
|
@include isAlias();
|
|
}
|
|
}
|
|
|
|
&.is-status--notebook-default {
|
|
.is-status__indicator {
|
|
display: block;
|
|
|
|
&:before {
|
|
color: $colorFilter;
|
|
content: $glyph-icon-notebook-page;
|
|
font-family: symbolsfont;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-status--current {
|
|
.is-status__indicator {
|
|
display: block;
|
|
|
|
&:before {
|
|
color: $colorFilter;
|
|
content: $glyph-icon-asterisk;
|
|
font-family: symbolsfont;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-status--draft {
|
|
.is-status__indicator {
|
|
display: block;
|
|
|
|
&:before {
|
|
color: $colorStatusAlert;
|
|
content: $glyph-icon-draft;
|
|
font-family: symbolsfont;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[class*='is-status--missing'],
|
|
&[class*='is-status--suspect']{
|
|
[class*='__type-icon'],
|
|
[class*='__details'] {
|
|
opacity: $opacityMissing;
|
|
}
|
|
}
|
|
|
|
&__details {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
&__name {
|
|
@include ellipsize();
|
|
color: $colorItemFg;
|
|
font-size: 1.2em;
|
|
font-weight: 400;
|
|
margin-bottom: $interiorMarginSm;
|
|
}
|
|
|
|
&__metadata {
|
|
color: $colorItemFgDetails;
|
|
font-size: 0.9em;
|
|
|
|
body.mobile & {
|
|
[class*='__item-count'] {
|
|
&:before {
|
|
content: ' - ';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__controls {
|
|
color: $colorItemFgDetails;
|
|
flex: 0 0 64px;
|
|
font-size: 1.2em;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
> * + * {
|
|
margin-left: $interiorMargin;
|
|
}
|
|
}
|
|
|
|
body.desktop & {
|
|
$transOutMs: 300ms;
|
|
flex-flow: column nowrap;
|
|
transition: $transOutMs ease-in-out;
|
|
|
|
&:hover {
|
|
filter: $filterItemHoverFg;
|
|
transition: $transIn;
|
|
|
|
.c-grid-item__type-icon {
|
|
transform: scale(1.1);
|
|
transition: $transInBounce;
|
|
}
|
|
}
|
|
|
|
> * {
|
|
margin: 0; // Reset from mobile
|
|
}
|
|
|
|
&__controls {
|
|
align-items: baseline;
|
|
flex: 0 0 auto;
|
|
order: 1;
|
|
.c-info-button,
|
|
.c-pointer-icon { display: none; }
|
|
}
|
|
|
|
&__type-icon {
|
|
flex: 1 1 auto;
|
|
font-size: floor(math.div($gridItemDesk, 3));
|
|
margin: $interiorMargin 22.5% $interiorMargin * 3 22.5%;
|
|
order: 2;
|
|
transform-origin: center;
|
|
transition: all $transOutMs ease-in-out;
|
|
}
|
|
|
|
&__details {
|
|
flex: 0 0 auto;
|
|
justify-content: flex-end;
|
|
order: 3;
|
|
}
|
|
|
|
&__metadata {
|
|
display: flex;
|
|
|
|
&__type {
|
|
flex: 1 1 auto;
|
|
@include ellipsize();
|
|
}
|
|
|
|
&__item-count {
|
|
opacity: 0.7;
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
}
|
|
}
|