♻️ Refactored some blocks
This commit is contained in:
parent
125bf37f2d
commit
ca68d1a5b0
|
@ -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 * {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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 => {
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue