1
0
Fork 0

♻️ Refactored some blocks

This commit is contained in:
Maxim Lebedev 2021-07-15 14:51:12 +05:00
parent 125bf37f2d
commit ca68d1a5b0
Signed by: toby3d
GPG Key ID: 1F14E25B7C119FC5
9 changed files with 31 additions and 47 deletions

View File

@ -1,8 +1,8 @@
.box {
padding: var(--box-padding);
border-width: var(--border-thin);
border-style: solid;
border-color: currentColor;
border-style: solid;
border-width: var(--border-thin);
padding: var(--box-padding);
}
.box * {

View File

@ -1,15 +1,7 @@
.cluster {
overflow: visible;
}
.cluster > * {
align-items: var(--cluster-align);
display: flex;
flex-wrap: wrap;
gap: var(--cluster-space);
justify-content: var(--cluster-justify);
align-items: var(--cluster-align);
margin: calc(var(--cluster-space) / 2 * -1);
}
.cluster > * > * {
margin: calc(var(--cluster-space) / 2);
}

View File

@ -6,19 +6,19 @@
}
.cover > * {
margin-top: var(--cover-space);
margin-bottom: var(--cover-space);
margin-top: var(--cover-space);
}
.cover > :first-child:not(.cover__main) {
.cover > :first-child:not(.cover__center) {
margin-top: 0;
}
.cover > :last-child:not(.cover__main) {
.cover > :last-child:not(.cover__center) {
margin-bottom: 0;
}
.cover > .cover__main {
margin-top: auto;
.cover > .cover__center {
margin-bottom: auto;
margin-top: auto;
}

View File

@ -10,10 +10,10 @@
display: inline-flex;
}
.with-icon.icon_side_left > .icon {
.with-icon.icon_side_left .icon {
margin-inline-end: var(--icon-space);
}
.with-icon.icon_side_right > .icon {
.with-icon.icon_side_right .icon {
margin-inline-start: var(--icon-space);
}

View File

@ -3,6 +3,7 @@
height: var(--reel-height);
overflow-x: auto;
overflow-y: hidden;
scrollbar-color: var(--thumb-color) var(--track-color);
}
.reel::-webkit-scrollbar {

View File

@ -1,26 +1,25 @@
.sidebar {
overflow: visible;
}
.sidebar > * {
align-items: stretch;
display: flex;
flex-wrap: wrap;
margin: calc(var(--sidebar-space) / 2 * -1);
}
.sidebar > * > * {
flex-basis: var(--sidebar-side-width);
flex-grow: 1;
margin: calc(var(--sidebar-space) / 2);
gap: var(--sidebar-space);
}
.sidebar_no-stretch > * {
align-items: flex-start;
}
.sidebar_side_left > * > :last-child,
.sidebar_side_right > * > :first-child {
.sidebar > :first-child,
.sidebar.sidebar_side_left > :first-child,
.sidebar.sidebar_side_right > :last-child {
flex-basis: var(--sidebar-side-width);
flex-grow: 1;
}
.sidebar > :last-child,
.sidebar.sidebar_side_left > :last-child,
.sidebar.sidebar_side_right > :first-child {
flex-basis: 0;
flex-grow: 999;
min-width: calc(var(--sidebar-content-min) - var(--sidebar-space));
min-width: var(--sidebar-content-min);
}

View File

@ -1,18 +1,10 @@
.switcher > * {
display: flex;
flex-wrap: wrap;
margin: calc((var(--switcher-space) / 2) * -1);
gap: var(--switcher-space);
}
.switcher > * > * {
flex-basis: calc((var(--switcher-threshold) - (100% - var(--switcher-space))) * 999);
.switcher > * {
flex-grow: 1;
margin: calc(var(--switcher-space) / 2);
}
.switcher_limit_2 > * > :nth-last-child(n+3),
.switcher_limit_2 > * > :nth-last-child(n+3) ~ *,
.switcher_limit_3 > * > :nth-last-child(n+4),
.switcher_limit_3 > * > :nth-last-child(n+4) ~ * {
flex-basis: 100%;
flex-basis: calc(( var(--switcher-threshold) - 100%) * 999);
}

View File

@ -1,5 +1,5 @@
(function() {
const className = 'cover';
const className = 'js-cover';
const covers = Array.from(document.querySelectorAll(`.${className}`));
const toggleVisibleData = (entries, observer) => {
entries.forEach(entry => {

View File

@ -1,5 +1,5 @@
(function() {
const className = 'reel';
const className = 'js-reel';
const reels = Array.from(document.querySelectorAll(`.${className}`));
const toggleOverflowClass = (elem) => {
elem.classList.toggle('js-reel_overflowing', elem.scrollWidth > elem.clientWidth);