iwmlib/lib/card/test/example/_theme/sass/card.scss

475 lines
10 KiB
SCSS
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@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-axisoriented,
// 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);
}
}
}