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

475 lines
10 KiB
SCSS
Raw Permalink Normal View History

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