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

Enhance line

Browse source
This commit is contained in:
Schmelczer András 2020-01-09 09:45:22 +01:00
parent aa0906405c
commit b1fd2f372f
9 changed files with 96 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/page/theme-switcher/theme-switcher.ts
View file

@ -11,7 +11,7 @@ import { EventBroadcaster } from '../../framework/event-broadcaster';
import {
turnOffAnimations,
turnOnAnimations,
} from '../../framework/helper/animations';
} from '../../framework/helper/animations/animations';
export class PageThemeSwitcher extends PageElement {
private static readonly LOCAL_STORAGE_KEY = 'dark-mode';

3
src/page/timeline/timeline-element/timeline-element.html.ts
View file

@ -9,7 +9,8 @@ export const generate = (
showLess: string
): html => `
<section class="timeline-element">
<div class="line">
<div class="line-container">
<div class="line"></div>
<p class="date">${date}</p>
</div>
<div class="card">

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

@ -1,33 +1,66 @@
@import '../../../style/mixins';
@import '../../../style/vars';
@mixin q-dependent-line-container($vars, $q) {
.line {
height: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);
&:before {
height: calc(100% - #{$q} - #{map_get($vars, $icon-size)} / 2);
}
&:after {
top: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);
}
}
.date {
top: calc(#{$q} - 0.5ch);
}
}
@include responsive() using ($vars) {
.timeline-element {
display: flex;
width: map_get($vars, $body-width);
margin: auto;
.line {
.line-container {
position: relative;
border-left: map_get($vars, $line-width) solid
map_get($vars, $accent-color);
@include q-dependent-line-container($vars, 33%);
min-width: 160px;
&:before {
content: '';
@include square(map_get($vars, $icon-size));
box-sizing: content-box;
position: absolute;
left: calc(
-0.5 * #{map_get($vars, $icon-size)} -
(1.5 * #{map_get($vars, $line-width)})
);
border: map_get($vars, $line-width) solid map_get($vars, $accent-color);
border-radius: 100%;
background: map_get($vars, $background);
.line {
border-left: map_get($vars, $line-width) solid
map_get($vars, $accent-color);
&:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: map_get($vars, $line-width) solid
map_get($vars, $accent-color);
}
&:after {
content: '';
@include square(map_get($vars, $icon-size));
border-radius: 1000px;
border: map_get($vars, $line-width) solid
map_get($vars, $accent-color);
position: absolute;
left: -1 * map_get($vars, $icon-size) / 2 +
map_get($vars, $line-width) / 2;
}
}
.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);
}
}
@ -35,42 +68,20 @@
&:not(:first-of-type) .card {
margin-top: map_get($vars, $large-margin);
}
.line {
&:before {
top: calc(33% - #{map_get($vars, $icon-size)} / 2);
}
.date {
position: relative;
top: calc(33% + #{map_get($vars, $icon-size)} / 2 + 1ch);
transform: rotate(30deg);
margin: 0 map_get($vars, $normal-margin) 0
calc(#{map_get($vars, $line-width)} + 1ex);
width: 100px;
}
}
}
@include on-small-screen {
flex-direction: column;
align-items: center;
&:before {
top: calc(50% - #{map_get($vars, $icon-size)} / 2);
}
.line {
@include center-children();
justify-content: flex-start;
.line-container {
@include q-dependent-line-container($vars, 50%);
height: 150px;
width: 50%;
.date {
margin-left: calc(
#{map_get($vars, $icon-size)} / 2 + #{map_get($vars, $small-margin)}
);
width: 200px;
transform: translateX(map_get($vars, $icon-size) / 2 + 12px)
translateY(-10%);
}
}
}