cartodb-4.42/assets/stylesheets/deep-insights/widgets/_canvas.scss
2024-04-06 05:25:13 +00:00

119 lines
2.2 KiB
SCSS

// Canvas for widgets
// --------------------------------------------------
.CDB-Widget-canvas {
position: relative;
width: $desktopLayout;
min-width: $desktopLayout;
max-width: $desktopLayout;
border-radius: $baseSize / 2;
}
.CDB-Widget-canvasInner {
display: flex;
position: relative;
top: 0;
right: 0;
bottom: 0;
flex-direction: column;
width: 100%;
height: 100%;
overflow-x: visible;
overflow-y: auto;
border-radius: $baseSize / 2;
}
.CDB-Widget-canvas,
.CDB-Widget-canvas.CDB-Widget-canvas--withMenu {
margin-left: 8px;
}
.CDB-Widget-canvasShadow {
display: none;
position: absolute;
z-index: 1;
right: 0;
left: 0;
height: 60px;
pointer-events: none;
}
.CDB-Widget-canvasShadow--top {
@include background-gradient(#FFF, rgba(255, 255, 255, 0));
top: 0;
border-top-left-radius: $baseSize / 2;
border-top-right-radius: $baseSize / 2;
}
.CDB-Widget-canvasShadow--bottom {
@include background-gradient(rgba(255, 255, 255, 0), #FFF);
bottom: 0;
border-bottom-right-radius: $baseSize / 2;
border-bottom-left-radius: $baseSize / 2;
}
.CDB-Widget-canvasShadow.is-visible {
display: block;
}
.CDB-Widget-canvas .ps-scrollbar-y-rail {
z-index: 3;
}
.CDB-Widget-canvas .ps-scrollbar-x-rail {
z-index: 3;
}
@media (max-width: $sMedia-max-embed) {
.CDB-Widget-canvas {
width: $mobileLayout;
min-width: $mobileLayout;
max-width: $mobileLayout;
}
}
@media (max-width: $sMedia-l) {
.CDB-Map-canvas {
display: flex;
flex: 2;
}
.CDB-LayerWidgets-canvas {
display: flex;
position: relative;
flex-wrap: nowrap;
}
.CDB-Widget-canvas .simplebar-content {
display: flex;
flex-wrap: nowrap;
}
.CDB-Widget-canvasShadow.is-visible {
display: none;
}
.CDB-Widget-canvas,
.CDB-Widget-canvas.CDB-Widget-canvas--withMenu {
order: 3;
width: 100%;
min-width: 100%;
max-width: 100%;
margin-left: 0;
border-radius: 0;
background: #FFF;
}
}
@media (max-width: $sMedia-l) and (orientation: portrait) {
.CDB-Widget-canvasInner {
flex-direction: column;
}
}
@media (min-width: $sMedia-l + 1px) and (max-width: $sMedia-xl) {
.CDB-Widget-canvas.CDB-Widget-canvas--withMenu {
height: calc(100% - 30px);
}
}