andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Update CSS variable architecture

Browse source
This commit is contained in:
schmelczerandras 2020-08-30 14:06:21 +02:00
parent d77aabf966
commit 7e75685b0e
39 changed files with 585 additions and 1952 deletions
Download patch file Download diff file Expand all files Collapse all files

206
src/page/timeline/timeline-element/timeline-element.scss
View file

@ -1,14 +1,14 @@
@use '../../../style/include' as *;
@use '../../../style/mixins' as *;
@mixin q-dependent-line-container($vars, $q) {
@mixin q-dependent-line-container($q) {
.line {
height: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);
height: calc(#{$q} - var(--icon-size) / 2);
&:before {
height: calc(100% - #{$q} - #{map_get($vars, $icon-size)} / 2);
height: calc(100% - #{$q} - var(--icon-size) / 2);
}
&:after {
top: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);
top: calc(#{$q} - var(--icon-size) / 2);
}
}
.date {
@ -16,123 +16,117 @@
}
}
@include responsive() using ($vars) {
section.timeline-element {
display: flex;
width: map_get($vars, $body-width);
margin: auto;
section.timeline-element {
display: flex;
width: var(--body-width);
margin: auto;
.line-container {
position: relative;
@include q-dependent-line-container(33%);
min-width: 160px;
.line {
border-left: var(--line-width) solid var(--accent-color);
&:before,
&:after {
content: '';
position: absolute;
}
&:before {
left: 0;
bottom: 0;
border-left: var(--line-width) solid var(--accent-color);
}
&:after {
@include square(var(--icon-size));
border-radius: 1000px;
border: var(--line-width) solid var(--accent-color);
left: calc(-1 * var(--icon-size) / 2 + var(--line-width) / 2);
}
}
.date {
@include special-text-font();
position: absolute;
transform-origin: left center;
transform: rotate(30deg) translateX(calc(var(--icon-size) / 2 + 6px))
translateY(-10%);
padding-right: var(--normal-margin);
}
}
@include on-large-screen {
&:not(:first-of-type) .card {
margin-top: var(--large-margin);
}
}
@include on-small-screen {
flex-direction: column;
align-items: center;
.line-container {
position: relative;
@include q-dependent-line-container($vars, 33%);
min-width: 160px;
.line {
border-left: map_get($vars, $line-width) solid
map_get($vars, $accent-color);
&:before,
&:after {
content: '';
position: absolute;
}
&:before {
left: 0;
bottom: 0;
border-left: map_get($vars, $line-width) solid
map_get($vars, $accent-color);
}
&:after {
@include square(map_get($vars, $icon-size));
border-radius: 1000px;
border: map_get($vars, $line-width) solid
map_get($vars, $accent-color);
left: -1 * map_get($vars, $icon-size) / 2 +
map_get($vars, $line-width) / 2;
}
}
@include q-dependent-line-container(50%);
height: 150px;
width: 50%;
.date {
@include special-text-font($vars);
position: absolute;
transform-origin: left center;
transform: rotate(30deg)
translateX(map_get($vars, $icon-size) / 2 + 6px) translateY(-10%);
padding-right: map_get($vars, $normal-margin);
transform: translateX(calc(var(--icon-size) / 2 + 12px))
translateY(-10%);
}
}
}
@include on-large-screen {
&:not(:first-of-type) .card {
margin-top: map_get($vars, $large-margin);
}
.card {
@include card-base();
border-radius: var(--border-radius);
background-color: var(--card-color);
& > *:not(:first-child) {
margin-top: var(--line-height);
}
@include on-small-screen {
flex-direction: column;
align-items: center;
.line-container {
@include q-dependent-line-container($vars, 50%);
height: 150px;
width: 50%;
.date {
transform: translateX(map_get($vars, $icon-size) / 2 + 12px)
translateY(-10%);
}
}
.content {
margin-top: 0;
}
.card {
@include card-base($vars);
border-radius: map_get($vars, $border-radius);
background-color: map_get($vars, $card-color);
h2 {
@include sub-title-font();
}
& > *:not(:first-child) {
margin-top: map_get($vars, $line-height);
& > p {
font-style: italic;
text-align: center;
}
.more {
overflow: hidden;
height: 0;
transition: height var(--transition-time);
}
.buttons {
position: relative;
margin-top: var(--line-height);
.show-more,
.show-less {
transition: opacity var(--transition-time);
}
.content {
margin-top: 0;
.show-more {
opacity: 1;
}
h2 {
@include sub-title-font($vars);
}
& > p {
font-style: italic;
text-align: center;
}
.more {
overflow: hidden;
height: 0;
transition: height map_get($vars, $transition-time);
}
.buttons {
position: relative;
margin-top: map_get($vars, $line-height);
.show-more,
.show-less {
transition: opacity map_get($vars, $transition-time);
}
.show-more {
opacity: 1;
}
.show-less {
@include absolute-center();
opacity: 0;
visibility: hidden;
}
.show-less {
@include absolute-center();
opacity: 0;
visibility: hidden;
}
}
}

2
src/page/timeline/timeline.html.ts
View file

@ -2,5 +2,5 @@ import { html } from '../../framework/model/misc';
import './timeline.scss';
export const generate = (): html => `
<div id="timeline"></div> <!-- IE11 doesn't know <main> -->
<div id="timeline"></div>
`;

14
src/page/timeline/timeline.scss
View file

@ -1,12 +1,10 @@
@use '../../style/include' as *;
@use '../../style/mixins' as *;
@include responsive() using ($vars) {
div#timeline {
@include on-large-screen {
// workaround for IE
& > :first-child {
margin-top: map_get($vars, $large-margin);
}
div#timeline {
@include on-large-screen {
// workaround for IE
& > :first-child {
margin-top: var(--large-margin);
}
}
}