Updated cards from tuesch changes. Incorporated InteractionMapper memory leak fix.
This commit is contained in:
@@ -0,0 +1,474 @@
|
||||
@import '_mixins.scss';
|
||||
@import '_variables.scss';
|
||||
@import '_essentials.scss';
|
||||
@import '_overrides.scss';
|
||||
@import '_icons.scss';
|
||||
|
||||
/**
|
||||
* The card.scss is responsible for styling the top level of the card.
|
||||
*
|
||||
* + Info-Card
|
||||
* ++ Header
|
||||
* +++ Thubnail
|
||||
* +++ Overview
|
||||
* ++ Subcards-Container
|
||||
* +++ n * Subcards
|
||||
*/
|
||||
|
||||
.info-card {
|
||||
font-family: $font-family;
|
||||
color: white;
|
||||
background-color: #333;
|
||||
box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
|
||||
border-radius: 3px;
|
||||
|
||||
.ui {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 10px;
|
||||
z-index: 11;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.speech {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
// SIZE
|
||||
|
||||
$border: 16px;
|
||||
border-radius: 3px;
|
||||
|
||||
top: -$border/2;
|
||||
left: -$border/2;
|
||||
width: calc(100% + #{$border});
|
||||
height: calc(100% + #{$border});
|
||||
|
||||
// BACKGROUND
|
||||
|
||||
box-shadow: 0 0 15px #008bd2;
|
||||
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
#008bd2,
|
||||
#008bd2 20px,
|
||||
#33a2db 20px,
|
||||
#33a2db 40px
|
||||
);
|
||||
|
||||
// ANIMATION
|
||||
background-size: 56px 56px; /* This is unique for this background, need to find a pattern and develop a formula */
|
||||
background-position-x: 0%;
|
||||
-webkit-animation: 'slide' 20s infinite linear forwards;
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
&.speech-plugin-is-reading {
|
||||
.speech.button:before {
|
||||
content: 'stop';
|
||||
}
|
||||
|
||||
&:before {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes 'slide' {
|
||||
0% {
|
||||
background-position-x: 0%;
|
||||
}
|
||||
100% {
|
||||
background-position-x: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.img-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
z-index: 200;
|
||||
|
||||
//padding: $default-space;
|
||||
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
// padding: $default-space;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
z-index: 200;
|
||||
position: absolute;
|
||||
top: $default-space;
|
||||
right: $default-space;
|
||||
|
||||
> * {
|
||||
margin-right: $default-space / 3;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
// display: inline-block;
|
||||
color: $link-color;
|
||||
|
||||
&:hover {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mainview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
//Inherits from info-card
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $regular-font-size;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 35%;
|
||||
color: $white;
|
||||
background: linear-gradient(to top, $gray-dark, $gray 200%);
|
||||
padding: $default-space * 3;
|
||||
padding-bottom: $default-space;
|
||||
border-radius: inherit;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-gap: 20px;
|
||||
|
||||
//box-shadow: $near-hover-box-shadow;
|
||||
z-index: 1;
|
||||
|
||||
h1 {
|
||||
-webkit-margin-before: 0;
|
||||
font-size: $title-font-size;
|
||||
font-weight: 500;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.overview {
|
||||
// margin-left: $default-space;
|
||||
padding: 0 $default-space;
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-column-start:2;
|
||||
//justify-content: flex-end;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p.misc {
|
||||
font-size: $regular-font-size;
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
opacity: 0.5;
|
||||
margin-bottom: 0.641em;
|
||||
|
||||
// // Added an icon before the build date.
|
||||
// // Just for testing.
|
||||
// &:before {
|
||||
// opacity: 0.5;
|
||||
// position: relative;
|
||||
// top: 5px;
|
||||
// margin-right: 10px;
|
||||
// font-style: normal;
|
||||
// content: "build";
|
||||
// font: {
|
||||
// family: $material-icons-font-family;
|
||||
// };
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail-wrapper {
|
||||
overflow: hidden;
|
||||
border-radius: $default-radius;
|
||||
|
||||
&:before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// z-index: 1;
|
||||
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
// Discuss: I added this for the thumbnail zoom icon
|
||||
// explicitly. I got rid of the .zoomicon class, because
|
||||
// everything was a zoomicon.
|
||||
// Now every icon is just an icon. The icons directly on the
|
||||
// subcards are card-icons.
|
||||
//
|
||||
// But a name for icons that can be on content elements of any
|
||||
// card page is yet to be found. (e.g. zoomables).
|
||||
.button {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*
|
||||
This mixin selects the elements of $selector
|
||||
and adjust the style it there are n children of this selector
|
||||
inside the parent.
|
||||
*/
|
||||
@mixin childCountIs($selector, $n) {
|
||||
// #{$var} just prints the string to css.
|
||||
#{$selector}:first-child:nth-last-child(#{$n}),
|
||||
#{$selector}:first-child:nth-last-child(#{$n}) ~ #{$selector} {
|
||||
// @content prints the content to the mixin.
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
.subcards-container {
|
||||
// flex: 1;
|
||||
background-color: $gray-dark;
|
||||
height: 65%;
|
||||
|
||||
// We should use css-grids instead of flexbox here:
|
||||
// https://www.w3.org/TR/css-grid-1/
|
||||
//"Unlike Flexible Box Layout, which is single-axis–oriented,
|
||||
// Grid Layout is optimized for 2-dimensional layouts:
|
||||
// those in which alignment of content is desired in both dimensions."
|
||||
display: grid;
|
||||
|
||||
// Not sure why, but 1fr does not behave in the rows as expected:
|
||||
// Expectation: All space is available and therefore 1fr means
|
||||
// Half of the space available.
|
||||
grid-auto-rows: 1fr;
|
||||
grid-gap: $default-space;
|
||||
padding: $default-space * 3;
|
||||
padding-top: $default-space;
|
||||
|
||||
// The fr stands for fraction and should be preferably used with css grids.
|
||||
grid-template-columns: repeat(9, 1fr);
|
||||
grid-template-areas: '. tl tl tl . tr tr tr .' '. bl bl bl . br br br .';
|
||||
|
||||
@include childCountIs('.subcard-wrapper', 5) {
|
||||
&:nth-child(4) {
|
||||
grid-area: bl;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
grid-area: br;
|
||||
}
|
||||
}
|
||||
|
||||
@include childCountIs('.subcard-wrapper', 4) {
|
||||
&:first-child {
|
||||
grid-area: tl;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
grid-area: tr;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
grid-area: bl;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
grid-area: br;
|
||||
}
|
||||
}
|
||||
|
||||
@include childCountIs('.subcard-wrapper', 3) {
|
||||
&:first-child {
|
||||
grid-area: tl;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
grid-area: tr;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
grid-row: 2;
|
||||
grid-column: 4 / 7;
|
||||
}
|
||||
}
|
||||
|
||||
.subcard-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> div {
|
||||
width: auto;
|
||||
grid-column: span 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-icon,
|
||||
.zoomable-icon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.speech-only-text {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
border: 3px solid $white;
|
||||
box-shadow: $near-hover-shadow;
|
||||
-webkit-margin-before: 0;
|
||||
-webkit-margin-after: 0;
|
||||
-webkit-margin-start: 0;
|
||||
-webkit-margin-end: 0;
|
||||
}
|
||||
|
||||
figure .icon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-radius: $default-radius 0 0 0;
|
||||
}
|
||||
|
||||
.view-button.icon {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 26px 26px;
|
||||
margin: -23px -13px;
|
||||
|
||||
// padding: $default-space/2 $default-space;
|
||||
|
||||
&.inverted {
|
||||
// background-color: transparent;
|
||||
|
||||
&:before {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
color: $gray-dark;
|
||||
font-size: $large-font-size;
|
||||
text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
color: $black;
|
||||
background-color: $white;
|
||||
pointer-events: none;
|
||||
|
||||
&.button {
|
||||
pointer-events: all;
|
||||
border-radius: $default-radius;
|
||||
|
||||
&.corner-button {
|
||||
border-radius: 0;
|
||||
|
||||
&.bottom-right {
|
||||
border-top-left-radius: $default-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inverted {
|
||||
color: $white;
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
&.transparent-background {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $white;
|
||||
background-color: $link-color;
|
||||
}
|
||||
|
||||
&:before {
|
||||
// This is a nice feature of SASS
|
||||
// It lets you split attributes into
|
||||
// namespaces.
|
||||
//
|
||||
// font-family:#, font-weight:#, font-size:#
|
||||
// ==> font {family: #, weight: #, size: # }
|
||||
font: {
|
||||
family: $material-icons-font-family;
|
||||
size: 36px;
|
||||
}
|
||||
|
||||
@include beforeClass('.info') {
|
||||
content: 'info_outline';
|
||||
}
|
||||
|
||||
@include beforeClass('.close') {
|
||||
content: 'close';
|
||||
}
|
||||
|
||||
@include beforeClass('.zoom') {
|
||||
content: 'search';
|
||||
}
|
||||
|
||||
@include beforeClass('.speech') {
|
||||
content: 'record_voice_over';
|
||||
}
|
||||
|
||||
@include beforeClass('.language') {
|
||||
content: 'language';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-card.debug {
|
||||
.view-button {
|
||||
background-color: rgba(255, 0, 0, 0.5) !important;
|
||||
|
||||
&.disabled {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user