@gooddata/sdk-ui-dashboard 10.14.0-alpha.1 → 10.14.0-alpha.4

package/styles/scss/flexibleLayout.scss

@@ -0,0 +1,410 @@
+// (C) 2007-2024 GoodData Corporation
+@use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
+@use "@gooddata/sdk-ui-kit/styles/scss/typo-mixins";
+@use "@gooddata/sdk-ui-kit/styles/scss/typo";
+@use "variables";
+@use "zIndexes";
+@use "@gooddata/sdk-ui-kit/styles/scss/mixins";
+
+$gd-dashboards-section-title-color: var(--gd-dashboards-section-title-color, kit-variables.$gd-color-text);
+$gd-dashboards-section-title-lineColor: var(
+    --gd-dashboards-section-title-lineColor,
+    kit-variables.$gd-border-color
+);
+$gd-dashboards-section-description-color: var(
+    --gd-dashboards-section-description-color,
+    kit-variables.$gd-color-state-blank
+);
+
+.gd-fluidlayout-container {
+    width: 100%;
+
+    .visualization {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+    }
+
+    .dash-item {
+        max-width: 100%;
+        height: 100%;
+        max-height: 100%;
+        min-height: inherit;
+        flex-direction: column;
+    }
+
+    &.is-resizing {
+        cursor: col-resize;
+    }
+
+    &.is-row-resizing {
+        cursor: row-resize;
+    }
+}
+
+.gd-fluidlayout-layout {
+    width: 100%;
+}
+
+.gd-fluidlayout-column-container {
+    width: 100%;
+    height: 100%;
+
+    @media #{kit-variables.$xsmall-only} {
+        flex-direction: column;
+
+        &::after {
+            content: "";
+            position: absolute;
+            right: 10px;
+            bottom: 5px;
+            left: 10px;
+            height: 0;
+            border-bottom: 1px dashed kit-variables.$gd-color-disabled;
+        }
+
+        &.last::after {
+            display: none;
+        }
+    }
+}
+
+.gd-fluidlayout-column-container.custom-height {
+    .kpi {
+        min-height: 100%;
+    }
+
+    .gd-visualization-content {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.gd-fluidlayout-row {
+    position: relative;
+}
+
+.gd-fluidlayout-row-debug {
+    background-color: #fff;
+
+    &:nth-of-type(even) {
+        color: #f2f2f2;
+    }
+}
+
+.gd-fluid-layout-row-header {
+    padding-right: 20px;
+    padding-left: 20px;
+    text-align: center;
+
+    .gd-fluid-layout-row-header-container {
+        margin-top: 16px;
+    }
+
+    @media #{kit-variables.$medium-up} {
+        padding-right: 0;
+        padding-left: 0;
+        text-align: left;
+    }
+
+    .gd-row-header-view {
+        .title {
+            padding: 3px 5px;
+            white-space: pre-wrap;
+            overflow-wrap: break-word;
+        }
+
+        .description {
+            padding: 4px 5px 2px;
+        }
+    }
+
+    .gd-row-header-title-wrapper {
+        display: flex;
+
+        h2 {
+            color: $gd-dashboards-section-title-color;
+        }
+
+        &::before,
+        &::after {
+            content: "";
+            position: relative;
+            top: 16px;
+            flex: 1 1 auto;
+            height: 0;
+            border-top: 1px solid $gd-dashboards-section-title-lineColor;
+        }
+
+        &::before {
+            margin-right: 20px;
+        }
+
+        &::after {
+            margin-left: 20px;
+        }
+
+        @media #{kit-variables.$medium-up} {
+            &::before {
+                display: none;
+            }
+        }
+    }
+
+    .gd-row-header-description-wrapper {
+        overflow: hidden;
+    }
+
+    .title-align-center {
+        @media #{kit-variables.$medium-up} {
+            text-align: center;
+
+            &::before {
+                display: block;
+            }
+        }
+    }
+
+    .title-align-right {
+        @media #{kit-variables.$medium-up} {
+            text-align: right;
+
+            &::before {
+                display: block;
+            }
+
+            &::after {
+                display: none;
+            }
+        }
+    }
+
+    .title,
+    .gd-row-header-view .description {
+        @media #{kit-variables.$medium-up} {
+            max-width: 95%;
+        }
+    }
+
+    .title {
+        @include typo-mixins.gd-heading-2;
+
+        flex: 0 1 auto;
+        overflow: hidden;
+        color: $gd-dashboards-section-title-color;
+    }
+
+    .description {
+        white-space: pre-wrap;
+        overflow-wrap: break-word;
+        color: $gd-dashboards-section-description-color;
+
+        &.collapsible {
+            cursor: pointer;
+        }
+
+        &:hover {
+            .more-link {
+                color: kit-variables.$gd-color-link;
+            }
+
+            .underline {
+                text-decoration: none;
+            }
+        }
+    }
+
+    .more-link {
+        display: inline-block;
+        color: kit-variables.$gd-color-state-blank;
+
+        &::before {
+            vertical-align: top;
+            margin-left: 0.5em;
+            margin-right: 0.1em;
+            font-family: kit-variables.$gd-font-indigo;
+        }
+
+        &.active::before {
+            content: "\E612";
+        }
+
+        &.passive::before {
+            content: "\E613";
+        }
+    }
+
+    .underline {
+        text-decoration: underline;
+    }
+
+    .gd-editable-label-container {
+        font-size: 0;
+    }
+
+    .gd-editable-label {
+        display: inline-block;
+        overflow: hidden;
+        width: auto;
+        max-height: inherit;
+        padding: variables.$item-headline-padding-vertical 4px 0;
+
+        @include mixins.active-states {
+            border-color: variables.$editable-label-border;
+        }
+
+        &.is-editing {
+            width: 100%;
+            border-color: variables.$editable-label-border;
+        }
+
+        &.title {
+            min-width: 0;
+        }
+
+        &.description {
+            margin-top: 2px;
+            font-size: 14px;
+
+            @media #{kit-variables.$medium-up} {
+                max-width: 95%;
+            }
+        }
+
+        .description.gd-paragraph {
+            height: 21px;
+            padding-top: 1px;
+        }
+
+        &.placeholder {
+            color: kit-variables.$gd-color-state-blank;
+        }
+    }
+
+    .gd-layout-row-description-richtext {
+        white-space: initial;
+    }
+
+    .gd-editable-label-richtext {
+        padding: 0 5px;
+        margin-top: 3px;
+        border: 1px solid transparent;
+
+        textarea {
+            padding: 0;
+            font-size: 14px;
+            line-height: 19px;
+            color: var(--gd-palette-complementary-7, #6d7680);
+
+            &::placeholder {
+                color: var(--gd-palette-complementary-6, #94a1ad);
+            }
+        }
+
+        @include mixins.active-states {
+            border-color: variables.$editable-label-border;
+        }
+
+        &.is-editing {
+            border-color: variables.$editable-label-border;
+        }
+
+        .gd-editable-label-richtext-empty {
+            display: flex;
+            align-items: center;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 19px;
+        }
+    }
+}
+
+.gd-rich-text-content-view .gd-editable-label-richtext-empty {
+    color: var(--gd-palette-complementary-6, #94a1ad);
+}
+
+.gd-visualization-content {
+    &.relative {
+        // overwrite
+        // stylelint-disable-next-line declaration-no-important
+        position: relative !important;
+    }
+
+    &.absolute {
+        // overwrite
+        // stylelint-disable-next-line declaration-no-important
+        position: absolute !important;
+    }
+}
+
+.gd-fluidlayout-item-changed {
+    position: absolute;
+    z-index: zIndexes.$layout-fluidlayout-item-changed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+
+    &.none {
+        display: none;
+    }
+
+    &.added,
+    &.modified {
+        background: var(
+            --gd-dashboards-content-backgroundColor,
+            var(--gd-palette-complementary-0, rgba(255, 255, 255, 0.95))
+        );
+    }
+
+    .gd-fluidlayout-item-changed-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+    }
+    &.small .gd-fluidlayout-item-changed-content {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        max-height: 100%;
+    }
+
+    .gd-fluidlayout-item-changed-icon {
+        display: flex;
+        align-items: center;
+
+        svg {
+            max-height: 100%;
+        }
+    }
+    &.small .gd-fluidlayout-item-changed-icon {
+        svg {
+            top: -4px;
+            position: relative;
+        }
+    }
+    &.big .gd-fluidlayout-item-changed-icon {
+        // stylelint-disable-next-line declaration-no-important
+        height: auto !important;
+    }
+
+    .gd-fluidlayout-item-changed-info {
+        display: block;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+    }
+    .gd-button {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: var(--gd-palette-complementary-6, #94a1ad);
+    }
+}