superdesk-ui-framework 7.0.0-dev-hg0 → 7.0.0-dev-hg2

package/app/styles/grids/_layout-grid.scss

@@ -0,0 +1,176 @@
+@use "sass:math";
+@use "../variables/dimensions";
+
+// Layout Grid with columns
+
+$layout-grid-columns: 12;
+$layout-grid-gutter: 1rem;
+$layout-grid-gap: 1rem;
+$layout-grid-gap-small: .4rem; // alternative small gap
+
+// map for media breakpoints, 'small' is mandatory and reserved as mobile first
+$layout-grid-media: (
+    xsmall: 0,
+    // 0px, mobile first
+    small: 40em,
+    // 640px
+    medium: 60em,
+    // 960px
+    large: 64em,
+    // 1024px
+    xlarge: 75em,
+    // 1200px
+    xxlarge: 90em // 1440px
+);
+
+@mixin grid {
+    display: flex;
+    align-items: stretch;
+    justify-content: flex-start;
+    padding: 0 $layout-grid-gutter;
+    flex-wrap: wrap;
+}
+
+@mixin layout-grid-columns {
+    @for $i from 1 through $layout-grid-columns {
+        &--col-#{$i} {
+            $col-width: math.div($i, $layout-grid-columns) * 100%;
+            flex: 0 0 $col-width;
+            max-width: $col-width;
+        }
+    }
+}
+
+@mixin layout-grid-responsive {
+    @for $i from 1 through $layout-grid-columns {
+        &-#{$i} {
+            $col-width: math.div($i, $layout-grid-columns) * 100%;
+            flex: 0 0 $col-width;
+            min-width: $col-width;
+        }
+    }
+}
+
+@mixin layout-grid-responsive-boxed {
+    @for $i from 1 through $layout-grid-columns {
+        &-#{$i} {
+            $box-col-width: calc(#{math.div($i, $layout-grid-columns) * 100%} - #{$layout-grid-gap * 2});
+            flex: 0 0 $box-col-width;
+            min-width: $box-col-width;
+        }
+    }
+}
+
+@mixin layout-grid-responsive-boxed-small {
+    @for $i from 1 through $layout-grid-columns {
+        &-#{$i} {
+            $box-col-width: calc(#{math.div($i, $layout-grid-columns) * 100%} - #{$layout-grid-gap-small * 2});
+            flex: 0 0 $box-col-width;
+            min-width: $box-col-width;
+        }
+    }
+}
+
+.grid {
+    @include grid;
+
+    .grid__item {
+        flex: 1 1 auto;
+        padding: 0 $layout-grid-gutter;
+
+        &.grid__item {
+            @include layout-grid-columns;
+        }
+
+        &>.grid {
+            margin-inline-start: -$layout-grid-gutter;
+            margin-inline-end: -$layout-grid-gutter;
+            padding: 0;
+        }
+    }
+
+    &+.grid {
+        margin-block-start: 1rem;
+    }
+}
+
+.grid--padding-fix {
+    margin-inline-start: -$layout-grid-gutter;
+    margin-inline-end: -$layout-grid-gutter;
+    padding: 0;
+}
+
+.grid--margin {
+    margin-block-start: $layout-grid-gutter;
+    margin-block-end: $layout-grid-gutter;
+}
+
+.grid--wrap {
+    flex-wrap: wrap;
+}
+
+.grid--boxed {
+    margin-inline-start: -$layout-grid-gap;
+    margin-inline-end: -$layout-grid-gap;
+
+    .grid__item {
+        margin: $layout-grid-gap;
+        padding: 0;
+    }
+}
+
+.grid--boxed-styled {
+    .grid__item {
+        background-color: white;
+        border-radius: dimensions.$border-radius__base--x-small;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
+    }
+}
+
+.grid--boxed-small {
+    margin-inline-start: -$layout-grid-gap-small;
+    margin-inline-end: -$layout-grid-gap-small;
+
+    .grid__item {
+        margin: $layout-grid-gap-small;
+        padding: 0;
+    }
+}
+
+.grid--boxed-small-styled {
+    .grid__item {
+        background-color: white;
+        border-radius: dimensions.$border-radius__base--x-small;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
+    }
+}
+
+// Media queries
+@each $name,
+$value in $layout-grid-media {
+    @media only screen and (min-width: $value) {
+        .grid {
+            .grid__item {
+                &.gi-#{$name} {
+                    @include layout-grid-responsive;
+                }
+            }
+        }
+
+        .grid--boxed {
+            .grid__item {
+                &.gi-#{$name} {
+                    @include layout-grid-responsive-boxed;
+                }
+            }
+        }
+
+        .grid--boxed-small {
+            .grid__item {
+                &.gi-#{$name} {
+                    @include layout-grid-responsive-boxed-small;
+                }
+            }
+        }
+    }
+}

package/app/styles/grids/_sd-kanban-list.scss

@@ -0,0 +1,92 @@
+@use "../variables/colors";
+
+$background-main: colors.$sd-background;
+
+.sd-kanban-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: 1rem;
+    padding-block-end: 0;
+    height: 100%;
+
+    ::-webkit-scrollbar {
+        border-inline-start: 4px solid transparent !important;
+        border-inline-end: 1px solid transparent !important;
+        width: 6px !important;
+        background: transparent !important;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: transparent !important;
+        border-inline-start: 3px solid transparent !important;
+
+        &:hover {
+            background: rgba(0,0,0,.05) !important;
+        }
+    }
+
+    ::-webkit-scrollbar-thumb {
+        border-inline-start: 3px solid transparent !important;
+    }
+}
+.sd-kanban-list__board {
+    flex: 1 1 0;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+    margin: 0 1rem;
+    height: 100%;
+    min-width: 20rem;
+
+    .sd-list-item-group {
+        margin: 0;
+    }
+}
+
+.sd-kanban-list__board--wide {
+    min-width: 36rem;
+}
+
+.sd-kanban-list__board-header {
+    grid-column: 1/2;
+    grid-row: 1/2;
+    z-index: 1;
+    position: relative;
+    min-height: 2.4rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-block-end: 4px solid var(--sd-colour-bg--09);
+    padding: 0 0 0.4rem 0;
+    margin: 0 0.1rem;
+
+    .sd-list-header {
+        margin: 0 !important;
+        flex-grow: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        width: 100%;
+    }
+
+    .sd-list-header__name {
+        flex-grow: 1;
+    }
+}
+
+.sd-kanban-list__board-content {
+    grid-column: 1/2;
+    grid-row: 2/3;
+    z-index: 1;
+    overflow: auto;
+    padding: 0.6rem 0.3rem 0.6rem 0.3rem;
+}
+
+[class^="--dark-ui"],
+[class*="--dark-ui"],
+.dark-ui {
+    .sd-kanban-list__board-header {
+        border-block-end: 4px solid rgba(86, 110, 119, 1) !important;
+    }
+}

package/app/styles/index.js

@@ -0,0 +1 @@
+import './app.scss';