// cf. "Resize" hook .no-user-select user-select: none .cache-toggle cursor: pointer .side-panel background-color: #fff padding: 0.3em width: 28% top: 3.7em position: fixed .list-group .list-group-item-heading display: inline-block width: 60px @include right-handed left: 70% .header float: right @include left-handed left: 2% .header float: left // @TODO: better side panel management .texts-sidepanel &__header padding: $card-spacer-y $card-spacer-x font-size: 20px @include right-handed float: right @include left-handed float: left &__body padding-left: $card-spacer-x padding-right: $card-spacer-x .document-layout__title font-size: 23px .document-layout__abstract__content max-height: 200px overflow-y: scroll font-size: 16px .simple-layout height: 100% .license padding-top: 10px .spinner position: absolute left: 50% top: 50% .table tr td color: #005a9aff .active font-weight: bold text-decoration: underline .ngrams-selector display: flex .ngrams-chooser padding: 3px .trash text-decoration: line-through .action-search margin: 10px .search-bar margin: 10px /* */ .join-button padding-bottom: 100px padding-top: 100px // Add pointer to Bootstrap Select select.form-control cursor: pointer #app width: 100% .router &__inner display: flex position: relative @include left-handed flex-direction: row-reverse @include right-handed flex-direction: row &__aside // @TODO: topbar width $offset-y: 56px $min-width: 280px flex-grow: 0 flex-shrink: 0 width: $min-width min-width: $min-width height: calc(100vh - #{ $offset-y }) z-index: z-index('main', 'sidebar') &__inner height: inherit width: inherit min-width: inherit position: fixed &__handle min-width: inherit width: inherit height: inherit position: fixed z-index: z-index('main', 'handlebar') pointer-events: none &__action $handle-width: 8px width: $handle-width height: inherit background: transparent cursor: col-resize position: absolute right: - #{ $handle-width / 2 } pointer-events: all &__body position: relative flex-grow: 1 flex-shrink: 1 .main-page $self: & $page-padding: space-x(3) space-x(4) $topbar-height: 56px // ~ unworthy empirical value (@TODO topbar height calculation) position: relative &__main-row display: flex &--with-y-tiles #{ $self }__main-route width: 60% #{ $self }__vertical-tiles width: 40% &--only-y-tiles // ensure minimum height, so that the border delimiting "main route" and // its "vertical tiles" will not end abruptly min-height: calc( 100vh - #{ $topbar-height }) // main route ~ main tile &__main-route padding: $page-padding width: 100% // optional vertical tiles ~ y axis column &__vertical-tiles display: flex flex-direction: column // optional horizontal tiles ~ x axis row &__horizontal-tiles display: flex flex-direction: row // dynamic width according to number of tiles @for $i from 1 through 10 &--#{ $i } .tile-block width: calc( 100% / #{ $i }) .tile-block $tile-padding: space-x(0.5) space-x(2) space-x(1.5) &__header display: flex @include right-handed justify-content: flex-end @include left-handed justify-content: flex-start &__body padding: $tile-padding .action-upload-button $spinner-size: 23px // @TODO use futur bootstrap button deferred status here $spinner-left-offset: -32px $spinner-top-offset: 6px position: relative &__spinner position: absolute width: $spinner-size height: $spinner-size left: $spinner-left-offset top: $spinner-top-offset .jitsi-iframe height: 70em // based on https://codeburst.io/how-to-pure-css-pie-charts-w-css-variables-38287aea161e .progress-pie background: rgba(51, 122, 183, 0.1) border-radius: 100% height: calc(var(--size, 14) * 1px) overflow: hidden position: relative width: calc(var(--size, 14) * 1px) .progress-pie-segment --a: calc(var(--over50, 0) * -100%) --b: calc((1 + var(--over50, 0)) * 100%) --degrees: calc((var(--offset, 0) / 100) * 360) -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b)) clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b)) height: 100% position: absolute transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg)) transform-origin: 50% 100% width: 100% z-index: calc(1 + var(--over50)) &:after, &:before background: var(--bg, rgb(51, 122, 183)) content: '' height: 100% position: absolute width: 100% &:before --degrees: calc((var(--value, 45) / 100) * 360) transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg)) transform-origin: 50% 0% &:after opacity: var(--over50, 0)