From eac0153dc32d4491ebd7f09999485244fa6901b1 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Tue, 6 Apr 2021 16:53:25 +0530 Subject: [PATCH] v0.11.5 Added new components 'scroll-tab-header' and 'scroll-tab-panels' --- components.js | 223 +++++++++++++++++++++++++++++++++++++++++++++ css/main.css | 128 +++++++++++++------------- css/main.min.css | 2 +- css/main.scss | 112 ++++++++++++----------- index.html | 232 +++++++++++++++++++++++------------------------ 5 files changed, 457 insertions(+), 240 deletions(-) diff --git a/components.js b/components.js index 7677df0..a14c1b7 100644 --- a/components.js +++ b/components.js @@ -3631,3 +3631,226 @@ customElements.define('sm-tab-panels', class extends HTMLElement { }) } }) + + +const scrollTabHeader = document.createElement('template') +scrollTabHeader.innerHTML = ` + +
+ +
+` +customElements.define('scroll-tab-header', class extends HTMLElement{ + constructor(){ + super() + this.shadow = this.attachShadow({ + mode: 'open' + }) + this.shadow.append(scrollTabHeader.content.cloneNode(true)) + this.tabHeader = this.shadow.querySelector('.tab-header') + this.tabHeaderSlot = this.shadow.querySelector('slot') + this.targetPanelGroup + this._assignedElements + this.activeTab + } + + fireEvent = (panelIndex) => { + this.dispatchEvent(new CustomEvent('changePanel', { + bubbles: true, + composed: true, + detail: { + panelIndex, + targetPanelGroup: this.targetPanelGroup + } + })) + } + + changeActiveTab = (tabIndex, fire = false) => { + if (this.activeTab) + this.activeTab.removeAttribute('active') + console.log(this._assignedElements, tabIndex) + this._assignedElements[tabIndex].setAttribute('active', '') + if(fire) + this.fireEvent(tabIndex) + this.activeTab = this._assignedElements[tabIndex] + } + + handleClick = (e) => { + if (e.target.closest('[data-index]') && this.activeTab !== e.target.closest('[data-index]')) { + this.changeActiveTab(e.target.closest('[data-index]').dataset.index, true) + } + } + + handleTabChange = (e) => { + if(this._assignedElements[e.detail.tabIndex] !== this.activeTab) + this.changeActiveTab(e.detail.tabIndex) + } + + connectedCallback() { + if (!this.dataset.target) return; + + this.targetPanelGroup = this.dataset.target + + this.tabHeaderSlot.addEventListener('slotchange', e => { + this._assignedElements = this.tabHeaderSlot.assignedElements() + this._assignedElements.forEach((elem, index) => { + elem.setAttribute('data-index', index) + if (elem.hasAttribute('active')) { + this.changeActiveTab(elem.dataset.index, true) + } + }) + }) + this.tabHeader.addEventListener('click', this.handleClick) + document.addEventListener('changeTab', this.handleTabChange) + } + disconnectedCallbakc() { + this.tabHeader.removeEventListener('click', this.handleClick) + } +}) + +const scrollTabPanels = document.createElement('template') +scrollTabPanels.innerHTML = ` + +
+ +
+` +customElements.define('scroll-tab-panels', class extends HTMLElement { + constructor() { + super() + this.shadow = this.attachShadow({ + mode: 'open' + }) + this.shadow.append(scrollTabPanels.content.cloneNode(true)) + this.tabPanels = this.shadow.querySelector('.tab-panels') + this.tabPanelsSlot = this.shadow.querySelector('slot') + this._assignedElements + this.activePanel + this.debounceTimeout + } + + fireEvent = (tabIndex) => { + this.dispatchEvent(new CustomEvent('changeTab', { + bubbles: true, + composed: true, + detail: { + tabIndex + } + })) + } + + handlePanelChange = (e) => { + if (e.detail.targetPanelGroup === this.id) { + this.tabPanels.scrollTo({ + top: (this._assignedElements[e.detail.panelIndex].getBoundingClientRect().top - this.tabPanels.getBoundingClientRect().top + this.tabPanels.scrollTop), + behavior: 'smooth' + }) + } + } + + connectedCallback() { + const panelObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + if (this.debounceTimeout) { + clearTimeout(this.debounceTimeout) + } + this.debounceTimeout = setTimeout(() => { + this.fireEvent(entry.target.dataset.index) + }, 300); + } + }) + }, + { + threshold: 0.8, + root: this.tabPanels + }) + this.tabPanels.addEventListener('slotchange', e => { + this._assignedElements = this.tabPanelsSlot.assignedElements() + console.log(this._assignedElements) + this._assignedElements.forEach((elem, index) => { + elem.setAttribute('data-index', index) + if (elem.hasAttribute('active')) { + this.activePanel = elem + this.fireEvent(elem.dataset.index) + } + panelObserver.observe(elem) + }) + }) + document.addEventListener('changePanel', this.handlePanelChange) + } + + disconnectedCallback() { + document.removeEventListener('changePanel', this.handlePanelChange) + } +}) \ No newline at end of file diff --git a/css/main.css b/css/main.css index cc027c1..2636a23 100644 --- a/css/main.css +++ b/css/main.css @@ -18,11 +18,6 @@ body { height: calc(100%); font-size: clamp(1rem, 1.2vmax, 3rem); background: rgba(var(--text-color), 0.06); - display: grid; - grid-template-columns: 1rem 1fr 1rem; -} -body > * { - grid-column: 2/3; } body[data-theme=dark] { @@ -42,12 +37,6 @@ body[data-theme=dark] .outlet-preview sm-carousel { border-top: dashed 0.5rem rgba(var(--foreground-color), 0.7); } -/* .font-mono{ - font-family: 'Roboto Mono', sans-serif; -} -.font-slab{ - font-family: 'Roboto slab', sans-serif; -} */ .full-bleed { grid-column: 1/4; } @@ -452,7 +441,12 @@ ul { .page { position: relative; - padding: 0 1rem; + display: grid; + grid-template-columns: 1rem 1fr 1rem; + padding-bottom: 3rem; +} +.page > * { + grid-column: 2/3; } .tag { @@ -465,9 +459,6 @@ ul { } #home_page { - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; overflow-y: auto; max-height: calc(100vh - 5rem); padding: 0; @@ -482,54 +473,16 @@ ul { height: 40vh; z-index: 5; grid-template-columns: 2rem 1fr; + grid-column: 1/2; } .line-map { height: 100%; } -.line-map__track { - height: 1rem; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.line-map__circle, -.line-map__disc { +.line-map__circle { position: absolute; border-radius: 1rem; - z-index: 1; -} - -.line-map__disc { - height: 0.5rem; - width: 0.5rem; - -webkit-transition: -webkit-transform 0.3s; - transition: -webkit-transform 0.3s; - transition: transform 0.3s; - transition: transform 0.3s, -webkit-transform 0.3s; - background: rgba(var(--text-color), 1); -} - -.line-map__line { - height: 0.1rem; - width: 100%; - background: rgba(var(--text-color), 0.8); -} - -.room-button { - font-weight: 500; - font-size: 1.4rem; - opacity: 0.6; - -webkit-transition: opacity 0.3s; - transition: opacity 0.3s; -} -.room-button--active { - opacity: 1; -} - -.line-map__circle { width: 1rem; height: 1rem; margin-top: -0.5rem; @@ -539,6 +492,7 @@ ul { transition: -webkit-transform 0.1s linear; transition: transform 0.1s linear; transition: transform 0.1s linear, -webkit-transform 0.1s linear; + z-index: 5; } .line-map__bar { @@ -575,6 +529,7 @@ ul { } .floor-circle { + position: absolute; height: 0.6rem; width: 0.6rem; background: rgba(var(--text-color), 1); @@ -603,6 +558,11 @@ ul { width: 100%; } +.big-icon { + height: 2rem; + width: 2rem; +} + #floor_1__outlets { margin: 1rem 0; gap: 1rem; @@ -711,20 +671,54 @@ sm-carousel { -ms-flex-align: center; align-items: center; color: var(--accent-color); - margin-bottom: 0.3rem; + margin-bottom: 0.5rem; + font-size: 1rem; } -.outlet-label::after { - content: ""; - height: 0.1rem; - width: 2rem; - background: var(--accent-color); - margin-left: 0.3rem; +.outlet-label .icon { + fill: var(--accent-color); + margin-right: 0.5rem; } -sm-tab-header { - padding: 0.3rem; - border-radius: 0.3rem; +scroll-tab-header, +scroll-tab-panels { + --border-radius: 0.5rem; +} + +scroll-tab-header { + --padding: 0.5rem; + margin-right: 1.5rem; + --background: rgba(var(--text-color), 0.04); +} + +scroll-tab-panels { + --height: max(24rem, 50vh); + --gap: 4rem; + --background: transparent; +} + +.grid-2 { + grid-template-columns: auto 1fr; +} + +.room-button { + font-weight: 500; + font-size: 1.1rem; + opacity: 0.6; + -webkit-transition: opacity 0.3s; + transition: opacity 0.3s; + padding: 0.6rem 0.8rem; +} +.room-button:not(:last-of-type) { + margin-bottom: 0.5rem; +} +.room-button[active] { background: rgba(var(--text-color), 0.06); + opacity: 1; + border-radius: 0.3rem; + color: var(--accent-color); +} +.room-button[active] .icon { + fill: var(--accent-color); } table { @@ -823,7 +817,7 @@ table { } } @media only screen and (min-width: 640px) { - body { + .page { grid-template-columns: 1fr 90vw 1fr; } @@ -865,7 +859,7 @@ table { } } @media only screen and (min-width: 1280px) { - body { + .page { grid-template-columns: 1fr 80vw 1fr; } diff --git a/css/main.min.css b/css/main.min.css index 43e1548..e4a6c12 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}body{--accent-color: #1042e9;--light-shade: rgba(var(--text-color), 0.06);--text-color: 17, 17, 17;--text-color-light: 100, 100, 100;--foreground-color: 255, 255, 255;--background-color: #efefef;--error-color: red;color:rgba(var(--text-color), 1);height:calc(100%);font-size:clamp(1rem, 1.2vmax, 3rem);background:rgba(var(--text-color), 0.06);display:grid;grid-template-columns:1rem 1fr 1rem}body>*{grid-column:2/3}body[data-theme=dark]{--accent-color:#2fb3ff;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--foreground-color: 20, 20, 20;--error-color: rgb(255, 106, 106);background:rgba(var(--foreground-color), 1)}body[data-theme=dark] .outlet-preview{background:rgba(var(--text-color), 0.02);-webkit-box-shadow:rgba(0,0,0,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px}body[data-theme=dark] .outlet-preview sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 0.7)}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{max-width:60ch;line-height:1.5}img{-o-object-fit:cover;object-fit:cover}button{position:relative;overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:none;cursor:pointer;outline:none;color:inherit;font-weight:500;-webkit-tap-highlight-color:transparent}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{background:var(--accent-color);color:rgba(var(--foreground-color), 1)}.button--primary .icon{fill:rgba(var(--foreground-color), 1)}button:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea{--border-radius: 0.2rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.2rem}sm-tab-header{-ms-flex-item-align:start;align-self:flex-start}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-3{grid-template-columns:repeat(auto-fill, minmax(6rem, 1fr))}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.pos-relative{position:relative}.align-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{-webkit-transform:none !important;transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;-webkit-transform:scale(0);transform:scale(0);background:rgba(var(--text-color), 0.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.9)}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-0.5rem}.button__label{font-size:1rem}.button__icon{height:1.1rem;width:1.1rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.color-0-9{color:rgba(var(--text-color), 0.9)}.color-0-8{color:rgba(var(--text-color), 0.8)}.color-0-7{color:rgba(var(--text-color), 0.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.popup__header__close{padding:.5rem;cursor:pointer}#elevator_button_panel{gap:1rem;grid-template-columns:repeat(3, 1fr)}.floor__button{padding:1rem;height:4rem;width:4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:.5rem;font-size:1.5rem;font-weight:900;background:rgba(var(--text-color), 0.06)}.floor__button--active{background:rgba(var(--text-color), 0.2);-webkit-box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3, 1fr)}#elevator_button{justify-self:flex-start}#main_logo{justify-self:center}#main_header__logo{height:1.8rem;width:1.8rem}#theme_switcher{justify-self:flex-end}.page{position:relative;padding:0 1rem}.tag{background:var(--accent-color);padding:.4rem .6rem}.common-padding{padding:0 1rem}#home_page{-webkit-box-flex:1;-ms-flex:1;flex:1;overflow-y:auto;max-height:calc(100vh - 5rem);padding:0;grid-template-columns:2rem 1fr}#floor_line_map{position:relative;position:-webkit-sticky;position:sticky;top:1rem;height:40vh;z-index:5;grid-template-columns:2rem 1fr}.line-map{height:100%}.line-map__track{height:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.line-map__circle,.line-map__disc{position:absolute;border-radius:1rem;z-index:1}.line-map__disc{height:.5rem;width:.5rem;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s;background:rgba(var(--text-color), 1)}.line-map__line{height:.1rem;width:100%;background:rgba(var(--text-color), 0.8)}.room-button{font-weight:500;font-size:1.4rem;opacity:.6;-webkit-transition:opacity .3s;transition:opacity .3s}.room-button--active{opacity:1}.line-map__circle{width:1rem;height:1rem;margin-top:-0.5rem;background:rgba(var(--foreground-color), 1);border:solid .2rem rgba(var(--text-color), 1);-webkit-transition:-webkit-transform .1s linear;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear, -webkit-transform .1s linear}.line-map__bar{width:.1rem;height:100%;background:rgba(var(--text-color), 0.4)}.floor-label{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;left:.7rem;margin-top:-0.9rem;padding-bottom:1rem;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.floor-label--active{opacity:1}.floor-label--active .floor-title{-webkit-box-shadow:0 0 .5rem rgba(0,0,0,.2);box-shadow:0 0 .5rem rgba(0,0,0,.2)}.floor-circle{height:.6rem;width:.6rem;background:rgba(var(--text-color), 1);border-radius:1rem}.floor-title{font-size:.9rem;white-space:nowrap;padding:.4rem .6rem;margin-left:.5rem;border-radius:.2rem;background:rgba(var(--foreground-color), 1);-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s}#floor_container{width:calc(100% - 1rem)}.floor{padding-bottom:3rem;width:100%}#floor_1__outlets{margin:1rem 0;gap:1rem;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr))}.outlet-preview{padding-top:2rem;background:rgba(var(--foreground-color), 1);border-radius:.3rem;-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s;-webkit-box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px}.outlet-preview sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 1)}.outlet__title{font-weight:900;text-transform:capitalize}.outlet__description{color:rgba(var(--text-color), 0.8)}.label{position:relative;font-size:.8rem;color:var(--accent-color);margin-bottom:.3rem}sm-carousel{position:relative;height:100%;background:rgba(var(--text-color), 0.06);padding-bottom:4rem;padding-top:1.5rem;--arrow-left: 1.5rem;--arrow-right: 1.5rem;--arrow-fill: rgba(var(--text-color), 1);--arrow-background: transparent;--arrow-box-shadow: none;--arrow-bottom: -3.5rem;--indicator-bottom: -2.5rem}.bit-bond-series__row,.bob-fund__row,.investor-card{min-width:100%}.investor-card{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr}.investor-card--small{grid-template-areas:"img ." "para para"}.investor-card--small .investor__image{width:4rem;height:4rem;border-radius:50%}.investor-card--big{grid-template-areas:"img ." "img para"}.investor__image{grid-area:img;width:8rem;border-radius:.5rem}.investor__bio{font-size:.9rem;margin-top:.5rem}.investor__contribution-container{grid-area:para}.outlet-hero-section{margin-top:6rem}.outlet-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--accent-color);margin-bottom:.3rem}.outlet-label::after{content:"";height:.1rem;width:2rem;background:var(--accent-color);margin-left:.3rem}sm-tab-header{padding:.3rem;border-radius:.3rem;background:rgba(var(--text-color), 0.06)}table{border-collapse:collapse;width:-webkit-max-content;width:-moz-max-content;width:max-content}.tr{margin:.5rem}.tr:nth-of-type(even){background:rgba(var(--text-color), 0.1)}.td{padding:.6rem .8rem;white-space:nowrap}#ico_page__carousel{width:min(32rem, 100%)}.phase{grid-template-columns:4rem 1fr}.phase:not(:last-of-type) .phase__description{padding-bottom:1.5rem}.phase:last-of-type .progress-bar__line{height:0}.progress-bar__circle,.progress-bar__line{position:absolute;margin-top:1rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-bar__circle{padding:.4rem;background:rgba(var(--foreground-color), 1);border:solid rgba(var(--text-color), 1) .1rem;border-radius:50%;z-index:1}.progress-bar__line{height:100%;width:.1rem;background:rgba(var(--text-color), 0.9)}.phase__date{margin-top:.3rem}.phase__description{margin-top:1rem}@media only screen and (max-width: 640px){.hide-on-mobile{display:none}.floor-label{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s}.floor-label .floor-title{opacity:0;-webkit-transform:translateX(-1rem);transform:translateX(-1rem);-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s}.floor-label--active{opacity:1}.floor-label--active .floor-title{opacity:1;-webkit-box-shadow:0 0 .5rem rgba(0,0,0,.2);box-shadow:0 0 .5rem rgba(0,0,0,.2);-webkit-transform:none;transform:none}}@media only screen and (min-width: 640px){body{grid-template-columns:1fr 90vw 1fr}.h1{font-size:4rem}.h2{font-size:2.5rem}.h3{font-size:1.5rem}.h4{font-size:1.1rem}#main_header{padding:1.5rem 2rem}.common-padding{padding:0 2rem}#home_page{grid-template-columns:8rem 1fr}.outlet-preview{padding-top:3rem}#elevator_sections{gap:3rem;grid-template-columns:auto 1fr}}@media only screen and (min-width: 1280px){body{grid-template-columns:1fr 80vw 1fr}#elevator_popup{--width: min(100%, 54rem) }}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}body[data-theme=dark] .outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px}.outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px}.page-link{cursor:pointer;-webkit-transition:color .3s;transition:color .3s}.page-link:hover{color:var(--accent-color)}.page-link:hover .icon{fill:var(--accent-color)}.floor__button:hover{background:rgba(var(--text-color), 0.2)}} \ No newline at end of file +*{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:"Roboto",sans-serif}body{--accent-color: #1042e9;--light-shade: rgba(var(--text-color), 0.06);--text-color: 17, 17, 17;--text-color-light: 100, 100, 100;--foreground-color: 255, 255, 255;--background-color: #efefef;--error-color: red;color:rgba(var(--text-color), 1);height:calc(100%);font-size:clamp(1rem, 1.2vmax, 3rem);background:rgba(var(--text-color), 0.06)}body[data-theme=dark]{--accent-color:#2fb3ff;--text-color: 240, 240, 240;--text-color-light: 170, 170, 170;--foreground-color: 20, 20, 20;--error-color: rgb(255, 106, 106);background:rgba(var(--foreground-color), 1)}body[data-theme=dark] .outlet-preview{background:rgba(var(--text-color), 0.02);-webkit-box-shadow:rgba(0,0,0,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.3) 0px 2px 5px -1px,rgba(0,0,0,.4) 0px 1px 3px -1px}body[data-theme=dark] .outlet-preview sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 0.7)}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}p{max-width:60ch;line-height:1.5}img{-o-object-fit:cover;object-fit:cover}button{position:relative;overflow:hidden;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:none;cursor:pointer;outline:none;color:inherit;font-weight:500;-webkit-tap-highlight-color:transparent}.button{border-radius:.2rem;padding:.5rem .6rem}.button--primary{background:var(--accent-color);color:rgba(var(--foreground-color), 1)}.button--primary .icon{fill:rgba(var(--foreground-color), 1)}button:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-input,sm-textarea{--border-radius: 0.2rem;--background: rgba(var(--text-color), 0.06)}sm-button{--border-radius: 0.2rem}sm-tab-header{-ms-flex-item-align:start;align-self:flex-start}ul{list-style:none}.flex{display:-webkit-box;display:-ms-flexbox;display:flex}.grid{display:grid}.grid-3{grid-template-columns:repeat(auto-fill, minmax(6rem, 1fr))}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.pos-relative{position:relative}.align-start{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.text-center{text-align:center}.justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}.justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.justify-right{margin-left:auto}.align-self-center{-ms-flex-item-align:center;align-self:center}.justify-self-center{justify-self:center}.direction-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.w-100{width:100%}.margin-top-1-5{margin-top:1.5rem}.margin-bottom-0-5r{margin-bottom:.5rem}.margin-bottom-1r{margin-bottom:1rem}.margin-bottom-1-5r{margin-bottom:1.5rem}.margin-bottom-2r{margin-bottom:2rem}.margin-bottom-3r{margin-bottom:3rem}.margin-bottom-4r{margin-bottom:4rem}.margin-left-0-5{margin-left:.5rem}.margin-right-0-5{margin-right:.5rem}.hide{opacity:0;pointer-events:none}.hide-completely{display:none !important}.no-transformations{-webkit-transform:none !important;transform:none !important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ripple{position:absolute;border-radius:50%;-webkit-transform:scale(0);transform:scale(0);background:rgba(var(--text-color), 0.16);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color), 0.9)}.icon-only{height:2.6rem;width:2.6rem;padding:.6rem}.close-icon{padding:.3rem}.close-button{left:-0.5rem}.button__label{font-size:1rem}.button__icon{height:1.1rem;width:1.1rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.color-0-9{color:rgba(var(--text-color), 0.9)}.color-0-8{color:rgba(var(--text-color), 0.8)}.color-0-7{color:rgba(var(--text-color), 0.7)}.weight-400{font-weight:400}.weight-500{font-weight:500}.weight-700{font-weight:700}.weight-900{font-weight:900}.popup__header{padding:.5rem 1.5rem 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.popup__header__close{padding:.5rem;cursor:pointer}#elevator_button_panel{gap:1rem;grid-template-columns:repeat(3, 1fr)}.floor__button{padding:1rem;height:4rem;width:4rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;border-radius:.5rem;font-size:1.5rem;font-weight:900;background:rgba(var(--text-color), 0.06)}.floor__button--active{background:rgba(var(--text-color), 0.2);-webkit-box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset;box-shadow:0 0 0 .4rem rgba(var(--text-color), 1) inset}#main_header{position:relative;padding:1rem;grid-template-columns:repeat(3, 1fr)}#elevator_button{justify-self:flex-start}#main_logo{justify-self:center}#main_header__logo{height:1.8rem;width:1.8rem}#theme_switcher{justify-self:flex-end}.page{position:relative;display:grid;grid-template-columns:1rem 1fr 1rem;padding-bottom:3rem}.page>*{grid-column:2/3}.tag{background:var(--accent-color);padding:.4rem .6rem}.common-padding{padding:0 1rem}#home_page{overflow-y:auto;max-height:calc(100vh - 5rem);padding:0;grid-template-columns:2rem 1fr}#floor_line_map{position:relative;position:-webkit-sticky;position:sticky;top:1rem;height:40vh;z-index:5;grid-template-columns:2rem 1fr;grid-column:1/2}.line-map{height:100%}.line-map__circle{position:absolute;border-radius:1rem;width:1rem;height:1rem;margin-top:-0.5rem;background:rgba(var(--foreground-color), 1);border:solid .2rem rgba(var(--text-color), 1);-webkit-transition:-webkit-transform .1s linear;transition:-webkit-transform .1s linear;transition:transform .1s linear;transition:transform .1s linear, -webkit-transform .1s linear;z-index:5}.line-map__bar{width:.1rem;height:100%;background:rgba(var(--text-color), 0.4)}.floor-label{position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;left:.7rem;margin-top:-0.9rem;padding-bottom:1rem;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:.5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.floor-label--active{opacity:1}.floor-label--active .floor-title{-webkit-box-shadow:0 0 .5rem rgba(0,0,0,.2);box-shadow:0 0 .5rem rgba(0,0,0,.2)}.floor-circle{position:absolute;height:.6rem;width:.6rem;background:rgba(var(--text-color), 1);border-radius:1rem}.floor-title{font-size:.9rem;white-space:nowrap;padding:.4rem .6rem;margin-left:.5rem;border-radius:.2rem;background:rgba(var(--foreground-color), 1);-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s}#floor_container{width:calc(100% - 1rem)}.floor{padding-bottom:3rem;width:100%}.big-icon{height:2rem;width:2rem}#floor_1__outlets{margin:1rem 0;gap:1rem;grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr))}.outlet-preview{padding-top:2rem;background:rgba(var(--foreground-color), 1);border-radius:.3rem;-webkit-transition:-webkit-box-shadow .3s;transition:-webkit-box-shadow .3s;transition:box-shadow .3s;transition:box-shadow .3s, -webkit-box-shadow .3s;-webkit-box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px;box-shadow:rgba(0,0,0,.2) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px}.outlet-preview sm-carousel{border-top:dashed .5rem rgba(var(--foreground-color), 1)}.outlet__title{font-weight:900;text-transform:capitalize}.outlet__description{color:rgba(var(--text-color), 0.8)}.label{position:relative;font-size:.8rem;color:var(--accent-color);margin-bottom:.3rem}sm-carousel{position:relative;height:100%;background:rgba(var(--text-color), 0.06);padding-bottom:4rem;padding-top:1.5rem;--arrow-left: 1.5rem;--arrow-right: 1.5rem;--arrow-fill: rgba(var(--text-color), 1);--arrow-background: transparent;--arrow-box-shadow: none;--arrow-bottom: -3.5rem;--indicator-bottom: -2.5rem}.bit-bond-series__row,.bob-fund__row,.investor-card{min-width:100%}.investor-card{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr}.investor-card--small{grid-template-areas:"img ." "para para"}.investor-card--small .investor__image{width:4rem;height:4rem;border-radius:50%}.investor-card--big{grid-template-areas:"img ." "img para"}.investor__image{grid-area:img;width:8rem;border-radius:.5rem}.investor__bio{font-size:.9rem;margin-top:.5rem}.investor__contribution-container{grid-area:para}.outlet-hero-section{margin-top:6rem}.outlet-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--accent-color);margin-bottom:.5rem;font-size:1rem}.outlet-label .icon{fill:var(--accent-color);margin-right:.5rem}scroll-tab-header,scroll-tab-panels{--border-radius: 0.5rem}scroll-tab-header{--padding: 0.5rem;margin-right:1.5rem;--background: rgba(var(--text-color), 0.04)}scroll-tab-panels{--height: max(24rem, 50vh);--gap: 4rem;--background: transparent}.grid-2{grid-template-columns:auto 1fr}.room-button{font-weight:500;font-size:1.1rem;opacity:.6;-webkit-transition:opacity .3s;transition:opacity .3s;padding:.6rem .8rem}.room-button:not(:last-of-type){margin-bottom:.5rem}.room-button[active]{background:rgba(var(--text-color), 0.06);opacity:1;border-radius:.3rem;color:var(--accent-color)}.room-button[active] .icon{fill:var(--accent-color)}table{border-collapse:collapse;width:-webkit-max-content;width:-moz-max-content;width:max-content}.tr{margin:.5rem}.tr:nth-of-type(even){background:rgba(var(--text-color), 0.1)}.td{padding:.6rem .8rem;white-space:nowrap}#ico_page__carousel{width:min(32rem, 100%)}.phase{grid-template-columns:4rem 1fr}.phase:not(:last-of-type) .phase__description{padding-bottom:1.5rem}.phase:last-of-type .progress-bar__line{height:0}.progress-bar__circle,.progress-bar__line{position:absolute;margin-top:1rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.progress-bar__circle{padding:.4rem;background:rgba(var(--foreground-color), 1);border:solid rgba(var(--text-color), 1) .1rem;border-radius:50%;z-index:1}.progress-bar__line{height:100%;width:.1rem;background:rgba(var(--text-color), 0.9)}.phase__date{margin-top:.3rem}.phase__description{margin-top:1rem}@media only screen and (max-width: 640px){.hide-on-mobile{display:none}.floor-label{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s}.floor-label .floor-title{opacity:0;-webkit-transform:translateX(-1rem);transform:translateX(-1rem);-webkit-transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s}.floor-label--active{opacity:1}.floor-label--active .floor-title{opacity:1;-webkit-box-shadow:0 0 .5rem rgba(0,0,0,.2);box-shadow:0 0 .5rem rgba(0,0,0,.2);-webkit-transform:none;transform:none}}@media only screen and (min-width: 640px){.page{grid-template-columns:1fr 90vw 1fr}.h1{font-size:4rem}.h2{font-size:2.5rem}.h3{font-size:1.5rem}.h4{font-size:1.1rem}#main_header{padding:1.5rem 2rem}.common-padding{padding:0 2rem}#home_page{grid-template-columns:8rem 1fr}.outlet-preview{padding-top:3rem}#elevator_sections{gap:3rem;grid-template-columns:auto 1fr}}@media only screen and (min-width: 1280px){.page{grid-template-columns:1fr 80vw 1fr}#elevator_popup{--width: min(100%, 54rem) }}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}body[data-theme=dark] .outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.3) 0px 48px 100px 0px}.outlet-preview:hover{z-index:1;-webkit-box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px;box-shadow:rgba(0,0,0,.15) 0px 48px 100px 0px}.page-link{cursor:pointer;-webkit-transition:color .3s;transition:color .3s}.page-link:hover{color:var(--accent-color)}.page-link:hover .icon{fill:var(--accent-color)}.floor__button:hover{background:rgba(var(--text-color), 0.2)}} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index c85bcd8..880be12 100644 --- a/css/main.scss +++ b/css/main.scss @@ -18,11 +18,6 @@ body { height: calc(100%); font-size: clamp(1rem, 1.2vmax, 3rem); background: rgba(var(--text-color), 0.06); - display: grid; - grid-template-columns: 1rem 1fr 1rem; - & > * { - grid-column: 2/3; - } } body[data-theme='dark']{ --accent-color:#2fb3ff; @@ -39,12 +34,6 @@ body[data-theme='dark']{ } } } -/* .font-mono{ - font-family: 'Roboto Mono', sans-serif; -} -.font-slab{ - font-family: 'Roboto slab', sans-serif; -} */ .full-bleed{ grid-column: 1/4; @@ -358,7 +347,12 @@ ul{ .page{ position: relative; - padding: 0 1rem; + display: grid; + grid-template-columns: 1rem 1fr 1rem; + padding-bottom: 3rem; + & > * { + grid-column: 2/3; + } } .tag{ @@ -371,7 +365,6 @@ ul{ } #home_page{ - flex: 1; overflow-y: auto; max-height: calc(100vh - 5rem); padding: 0; @@ -385,47 +378,21 @@ ul{ height: 40vh; z-index: 5; grid-template-columns: 2rem 1fr; + grid-column: 1/2; } .line-map{ height: 100%; } -.line-map__track{ - height: 1rem; - align-items: center; -} -.line-map__circle, -.line-map__disc{ +.line-map__circle{ position: absolute; border-radius: 1rem; - z-index: 1; -} -.line-map__disc{ - height: 0.5rem; - width: 0.5rem; - transition: transform 0.3s; - background: rgba(var(--text-color), 1); -} -.line-map__line{ - height: 0.1rem; - width: 100%; - background: rgba(var(--text-color), 0.8); -} -.room-button{ - font-weight: 500; - font-size: 1.4rem; - opacity: 0.6; - transition: opacity 0.3s; - &--active{ - opacity: 1; - } -} -.line-map__circle{ width: 1rem; height: 1rem; margin-top: -0.5rem; background: rgba(var(--foreground-color), 1); border: solid 0.2rem rgba(var(--text-color), 1); transition: transform 0.1s linear; + z-index: 5; } .line-map__bar{ width: 0.1rem; @@ -451,6 +418,7 @@ ul{ } } .floor-circle{ + position: absolute; height: 0.6rem; width: 0.6rem; background: rgba(var(--text-color), 1); @@ -475,6 +443,11 @@ ul{ width: 100%; } +.big-icon{ + height: 2rem; + width: 2rem; +} + #floor_1__outlets{ margin: 1rem 0; gap: 1rem; @@ -571,21 +544,50 @@ sm-carousel{ display: flex; align-items: center; color: var(--accent-color); - margin-bottom: 0.3rem; - &::after{ - content: ''; - height: 0.1rem; - width: 2rem; - background: var(--accent-color); - margin-left: 0.3rem; + margin-bottom: 0.5rem; + font-size: 1rem; + .icon{ + fill: var(--accent-color); + margin-right: 0.5rem; } } +scroll-tab-header, +scroll-tab-panels{ + --border-radius: 0.5rem; +} +scroll-tab-header{ + --padding: 0.5rem; + margin-right: 1.5rem; + --background: rgba(var(--text-color), 0.04); +} +scroll-tab-panels{ + --height: max(24rem, 50vh); + --gap: 4rem; + --background: transparent; +} +.grid-2{ + grid-template-columns: auto 1fr; +} +.room-button{ + font-weight: 500; + font-size: 1.1rem; + opacity: 0.6; + transition: opacity 0.3s; + padding: 0.6rem 0.8rem; + &:not(:last-of-type){ + margin-bottom: 0.5rem; + } + &[active]{ + background: rgba(var(--text-color), 0.06); + opacity: 1; + border-radius: 0.3rem; + color: var(--accent-color); + .icon{ + fill: var(--accent-color); + } + } -sm-tab-header{ - padding: 0.3rem; - border-radius: 0.3rem; - background: rgba(var(--text-color), 0.06); } table{ @@ -670,7 +672,7 @@ table{ } } @media only screen and (min-width: 640px) { - body{ + .page{ grid-template-columns: 1fr 90vw 1fr; } .h1{ @@ -703,7 +705,7 @@ table{ } } @media only screen and (min-width: 1280px) { - body{ + .page{ grid-template-columns: 1fr 80vw 1fr; } #elevator_popup{ diff --git a/index.html b/index.html index b1bfdb9..956130d 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ - +