addons/isl/src/Drawers.cssblame
View source
b69ab311/**
b69ab312 * Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab313 *
b69ab314 * This source code is licensed under the MIT license found in the
b69ab315 * LICENSE file in the root directory of this source tree.
b69ab316 */
b69ab317
b69ab318.drawers {
b69ab319 display: flex;
b69ab3110 flex-direction: column;
b69ab3111 overflow: hidden;
b69ab3112 width: 100%;
b69ab3113 height: 100%;
b69ab3114
b69ab3115 --drag-handle-size: 7px;
b69ab3116 --drawer-label-size: calc(2 * var(--halfpad) + 1ch);
b69ab3117 --min-pane-width: 50px;
b69ab3118}
b69ab3119.drawers-horizontal {
b69ab3120 display: flex;
b69ab3121 flex-direction: row;
b69ab3122 overflow: hidden;
b69ab3123 width: 100%;
b69ab3124 height: 100%;
b69ab3125}
b69ab3126
b69ab3127/* actual content takes all the size minus label and resize handle and 1px of border on each side */
b69ab3128.drawer-left > div:nth-child(3),
b69ab3129.drawer-right > div:nth-child(3) {
b69ab3130 width: calc(100% - var(--drawer-label-size) - var(--drag-handle-size) - var(--pad) - 2px);
b69ab3131}
b69ab3132.drawer-top > div:nth-child(3),
b69ab3133.drawer-bottom > div:nth-child(3) {
b69ab3134 height: calc(100% - var(--drawer-label-size) - var(--drag-handle-size) - var(--pad) - 2px);
b69ab3135}
b69ab3136
b69ab3137.drawer-main-content {
b69ab3138 overflow-y: auto;
b69ab3139 display: flex;
b69ab3140 flex-direction: column;
b69ab3141 flex-grow: 1;
b69ab3142 width: 100%;
b69ab3143}
b69ab3144
b69ab3145.drawer {
b69ab3146 display: flex;
b69ab3147 flex: none;
b69ab3148 overflow-y: auto;
b69ab3149 justify-content: flex-end;
b69ab3150}
b69ab3151
b69ab3152.drawer.drawer-top {
b69ab3153 flex-direction: column-reverse;
b69ab3154}
b69ab3155.drawer.drawer-left {
b69ab3156 flex-direction: row-reverse;
b69ab3157}
b69ab3158.drawer.drawer-bottom {
b69ab3159 flex-direction: column;
b69ab3160}
b69ab3161.drawer.drawer-right {
b69ab3162 flex-direction: row;
b69ab3163}
b69ab3164.drawer-expanded.drawer-top,
b69ab3165.drawer-expanded.drawer-bottom {
b69ab3166 min-height: calc(var(--pad) + var(--drag-handle-size) + var(--drawer-label-size));
b69ab3167}
b69ab3168
b69ab3169.drawer-expanded.drawer-right,
b69ab3170.drawer-expanded.drawer-left {
b69ab3171 min-width: calc(var(--pad) + var(--drag-handle-size) + var(--drawer-label-size));
b69ab3172}
b69ab3173
b69ab3174.drawer.drawer-expanded.drawer-left {
b69ab3175 min-width: var(--min-pane-width);
b69ab3176 max-width: calc((100vw / var(--zoom)) - var(--min-pane-width));
b69ab3177}
b69ab3178.drawer.drawer-expanded.drawer-top {
b69ab3179 min-height: var(--min-pane-width);
b69ab3180 max-height: calc((100vw / var(--zoom)) - var(--min-pane-width));
b69ab3181}
b69ab3182
b69ab3183.drawer .resizable-drag-handle {
b69ab3184 border: 1px solid var(--panel-view-border);
b69ab3185 user-select: none;
b69ab3186}
b69ab3187
b69ab3188.drawer-top .resizable-drag-handle,
b69ab3189.drawer-bottom .resizable-drag-handle {
b69ab3190 min-height: calc(var(--drag-handle-size) - (2 * 1px)); /* 2px for border */
b69ab3191 width: 100%;
b69ab3192 border-left-width: 0;
b69ab3193 border-right-width: 0;
b69ab3194 cursor: ns-resize;
b69ab3195}
b69ab3196
b69ab3197.drawer-left .resizable-drag-handle,
b69ab3198.drawer-right .resizable-drag-handle {
b69ab3199 min-width: calc(var(--drag-handle-size) - (2 * 1px)); /* 2px for border */
b69ab31100 height: 100%;
b69ab31101 border-top-width: 0;
b69ab31102 border-bottom-width: 0;
b69ab31103 cursor: ew-resize;
b69ab31104}
b69ab31105
b69ab31106.drawer .resizable-drag-handle:hover,
b69ab31107.drawer .resizable-drag-handle.resizing {
b69ab31108 background-color: var(--focus-border);
b69ab31109 border-color: var(--focus-border);
b69ab31110 transition:
b69ab31111 background-color 0s 300ms,
b69ab31112 border-color 0s 300ms;
b69ab31113}
b69ab31114
b69ab31115.drawer-label {
b69ab31116 font-weight: bold;
b69ab31117 display: flex;
b69ab31118 align-items: center;
b69ab31119 justify-content: center;
b69ab31120 border: 0px solid var(--panel-view-border);
b69ab31121 cursor: pointer;
b69ab31122 padding: var(--halfpad);
b69ab31123 gap: var(--halfpad);
b69ab31124}
b69ab31125.drawer-label:hover {
b69ab31126 background-color: var(--list-hover-background);
b69ab31127}
b69ab31128
b69ab31129.drawer-left .drawer-label {
b69ab31130 border-left-width: 1px;
b69ab31131}
b69ab31132.drawer-right .drawer-label {
b69ab31133 border-right-width: 1px;
b69ab31134}
b69ab31135.drawer-top .drawer-label {
b69ab31136 border-bottom-width: 1px;
b69ab31137}
b69ab31138.drawer-bottom .drawer-label {
b69ab31139 border-top-width: 1px;
b69ab31140}
b69ab31141
b69ab31142.drawer-left .drawer-label,
b69ab31143.drawer-right .drawer-label {
b69ab31144 width: var(--drawer-label-size);
b69ab31145}
b69ab31146.drawer-top .drawer-label,
b69ab31147.drawer-bottom .drawer-label {
b69ab31148 height: var(--drawer-label-size);
b69ab31149}
b69ab31150
b69ab31151.drawer-left .drawer-label,
b69ab31152.drawer-right .drawer-label {
b69ab31153 writing-mode: vertical-lr;
b69ab31154 transform: rotate(180deg);
b69ab31155}