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

package/app/styles/_simple-list.scss

@@ -0,0 +1,158 @@
+@use "variables/colors";
+@use "variables/dimensions";
+
+// Simple lists
+
+//colors
+$simple-list-border-color: colors.$neutral-border-color;
+
+.simple-list {
+    padding: 0 0 dimensions.$sd-base-increment * 3;
+    align-self: stretch;
+
+    .simple-list__item {
+        padding: var(--space--1) 0;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--gap-1);
+        color: var(--color-text);
+
+        [class^="icon-"], [class*=" icon-"] {
+            flex-grow: 0;
+            flex-shrink: 0;
+        }
+        &.simple-list__item--gap-none {
+            gap: 0;
+        }
+        &.simple-list__item--gap-small {
+            gap: var(--gap-0-5);
+        }
+        &.simple-list__item--gap-medium {
+            gap: var(--gap-1);
+        }
+        &.simple-list__item--gap-large {
+            gap: var(--gap-1-5);
+        }
+    }
+
+    .simple-list__item--stacked {
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+
+        .simple-list__item-data {
+            text-align: start;
+        }
+
+        .simple-list__item-label {
+            padding: 0 0 0.6rem 0;
+        }
+    }
+
+    .simple-list__item--justify-flex-start {
+        justify-content: flex-start;
+    }
+
+    .simple-list__item--justify-flex-end {
+        justify-content: flex-end;
+    }
+
+    .simple-list__item--justify-center {
+        justify-content: center;
+    }
+
+    .simple-list__item--justify-space-between {
+        justify-content: space-between;
+    }
+
+    .simple-list__item-label {
+        flex-grow: 0;
+        font-size: 1.1rem;
+        line-height: 100%;
+        text-transform: uppercase;
+        padding-inline-end: 1rem;
+        margin: 0;
+        color: inherit;
+        opacity: 0.65;
+        font-weight: 500;
+    }
+
+    .simple-list__item-data {
+        flex-grow: 1;
+        text-align: end;
+    }
+
+    [class^="icon-"], [class*=" icon-"] {
+        vertical-align: middle;
+    }
+}
+
+.simple-list--dotted {
+    .simple-list__item {
+        padding: var(--space--1) 0;
+        border-block-end: 1px dotted $simple-list-border-color;
+
+        &:first-child {
+            border-block-start: 1px dotted $simple-list-border-color;
+        }
+    }
+
+    &.simple-list--no-border-b {
+        .simple-list__item {
+            &:last-child {
+                border-block-end: none;
+            }
+        }
+    }
+
+    &.simple-list--no-border-t {
+        .simple-list__item {
+            &:first-child {
+                border-block-start: none;
+            }
+        }
+    }
+}
+.simple-list--comfortable {
+    .simple-list__item {
+        padding: 1.2rem 0;
+    }
+}
+
+.simple-list--comfortable {
+    .simple-list__item {
+        padding: var(--space--1-5) 0;
+    }
+}
+
+.simple-list--loose {
+    .simple-list__item {
+        padding: var(--space--2) 0;
+    }
+}
+
+
+.simple-list--no-padding {
+    padding: 0 0 2rem 0;
+}
+
+.simple-list--no-padding-b {
+    padding-block-end: 0;
+}
+
+.simple-list--fixedW-x-small {
+    width: var(--width__container--x-small);
+}
+
+.simple-list--fixedW-small {
+    width: var(--width__container--small);
+}
+
+.simple-list--fixedW-medium {
+    width: var(--width__container--medium);
+}
+
+.simple-list--fixedW-large {
+    width: var(--width__container--large);
+}

package/app/styles/_spinner.scss

@@ -0,0 +1,47 @@
+.sd-spinner {
+    z-index: 1;
+    width: var(--spinner-size);
+    height: var(--spinner-size);
+
+    &.sd-spinner--mini {
+        --spinner-size: 1.8rem;
+    }
+    &.sd-spinner--small {
+        --spinner-size: 2.4rem;
+    }
+    &.sd-spinner--medium {
+        --spinner-size: 3.2rem;
+    }
+    &.sd-spinner--large {
+        --spinner-size: 4.8rem;
+    }
+}
+
+@keyframes rotate {
+    100% {
+        transform:rotate(360deg);
+    }
+}
+@keyframes dash-new {
+    0% {
+        stroke-dasharray: 0 150;
+        stroke-dashoffset: 0;
+    }
+    47.5% {
+        stroke-dasharray: 42 150;
+        stroke-dashoffset: -16;
+    }
+    95%,100% {
+        stroke-dasharray: 42 150;
+        stroke-dashoffset: -59;
+    }
+}
+
+.sd-spinner__path {
+    transform-origin:center;
+    animation: rotate 2s linear infinite;
+}
+.sd-spinner__path circle {
+    stroke-linecap: round;
+    animation: dash-new 1.5s ease-in-out infinite;
+}

package/app/styles/_table-list.scss

@@ -0,0 +1,385 @@
+@use "variables/colors";
+@use "variables/dimensions";
+
+// Boxed lists
+// Simpler version of the list item.
+
+.table-list {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    overflow: hidden !important;
+    padding: 1px;
+    //gap: $sd-base-increment * 1.5;
+}
+
+.table-list--comfortable {
+    gap: dimensions.$sd-base-increment * 2;
+}
+
+.table-list--contained {
+    gap: 0;
+}
+
+.table-list--read-only {
+    pointer-events: none;
+    cursor: default;
+}
+
+$table-list-palette: colors.$sd-basic-palette;
+
+.table-list__item {
+    display: grid;
+    align-items: center;
+    grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
+    position: relative;
+    flex-direction: row;
+    padding: dimensions.$sd-base-increment;
+    min-height: 4.2rem;
+    border-radius: var(--b-radius--medium);
+    background-color: var(--sd-item__main-Bg);
+    border: 1px solid var(--sd-colour-line--light);
+    transition: all 0.2s ease-in-out;
+    inset-inline-start: 0;
+
+    &.table-list__item--selected.table-list__item--clickable {
+        &:hover {
+            box-shadow: var(--sd-shadow__item--selected-thin);
+        }
+    }
+
+    &:hover {
+        .table-list__slide-in-actions,
+        .table-list__actions--slide-in {
+            padding-inline-start: 0.6rem;
+            width: auto;
+            max-width: 56px;
+            overflow: visible;
+            opacity: 1;
+            transition: all ease-in 0.1s;
+
+            .icn-btn {
+                opacity: 0.4;
+
+                &:hover {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+}
+
+.table-list__item--margin {
+    margin-block-end: dimensions.$sd-base-increment;
+}
+
+.table-list__item--selected {
+    box-shadow: var(--sd-shadow__item--selected-thin);
+}
+
+.table-list__item--clickable {
+    &:hover {
+        cursor: pointer;
+        border: 1px solid var(--sd-colour-line--strong);
+        box-shadow: 0 1px 4px 0 hsla(0, 0%, 0%, 0.1);
+    }
+
+    &:active {
+        border-color: var(--sd-colour-interactive);
+    }
+}
+
+.table-list__item--draggable {
+    &::after {
+        content: "";
+        width: 20px;
+        position: absolute;
+        inset-block: -1px;
+        inset-inline-start: 0px;
+        background-image: url(../img/dots.svg);
+        background-repeat: no-repeat;
+        background-position: center center;
+        z-index: 2;
+        border-radius: var(--b-radius--small);
+        opacity: 0;
+    }
+
+    &:hover {
+        border-left-width: 16px;
+
+        &::after {
+            inset-inline-start: -18px;
+            opacity: 0.65;
+            cursor: grab;
+        }
+    }
+
+    &:active {
+        border-color: var(--sd-colour-interactive);
+        cursor: grabbing;
+
+        &::after {
+            opacity: 1 !important;
+            cursor: grabbing;
+        }
+    }
+}
+
+.table-list__item--locked {
+    border-color: hsla(350, 70%, 60%, 0.75);
+    border-left-color: hsla(350, 70%, 60%, 0.75) !important;
+}
+
+.table-list__item--disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.table-list__add-item {
+    display: grid;
+    align-items: center;
+    //grid-template-columns: [contentCol] 1fr [actionsVisible] auto [actionsHidden] auto;
+    position: relative;
+    flex-direction: row;
+    padding: 8px;
+    min-height: 4.2rem;
+    border-radius: var(--b-radius--medium);
+    background-color: transparent;
+    border: 1px dashed var(--sd-colour-line--medium);
+    transition: all 0.2s ease-in-out;
+    inset-inline-start: 0;
+}
+
+.table-list__add-item--container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.table-list__item-border {
+    width: 6px;
+    background-color: var(--sd-colour-panel-bg--100);
+    z-index: 2;
+    position: absolute;
+    inset-block: 3px;
+    inset-inline-start: 3px;
+    border-radius: 2px;
+}
+
+.table-list__item-content {
+    grid-column: contentCol;
+    grid-row: mainRow;
+    display: grid;
+    grid-template-columns: [columnLeft] 180px [columncenter] 1fr [columnRight] auto;
+    padding: 0 0.2rem 0 0.8rem;
+    overflow: hidden;
+    position: relative;
+    align-items: center;
+    gap:8px;
+}
+
+.table-list__item-border {
+    width: 6px;
+    background-color: var(--sd-colour-panel-bg--100);
+    z-index: 2;
+    position: absolute;
+    inset-block: 3px;
+    inset-inline-start: 3px;
+    border-radius: 2px;
+}
+
+.table-list__item-content-block {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.table-list__item-content-block--center {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    font-size: 14px;
+    font-weight: 500;
+
+    span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 100%;
+    }
+}
+
+.table-list__slide-in-actions,
+.table-list__static-actions,
+.table-list__actions--slide-in,
+.table-list__actions--static {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    flex-grow: 0;
+    gap: 2px;
+}
+
+.table-list__slide-in-actions,
+.table-list__actions--slide-in {
+    grid-column: actionsHidden;
+    grid-row: mainRow;
+    width: 0;
+    max-width: 0;
+    overflow: hidden;
+    opacity: 0;
+    transition: all ease-in-out 0.2s;
+
+    .icn-btn {
+        flex: 0 0 auto;
+        opacity: 0;
+        transition: all ease-in-out 0.2s;
+    }
+}
+
+.table-list__static-actions,
+.table-list__actions--static  {
+    grid-column: actionsVisible;
+    grid-row: mainRow;
+
+    .icn-btn {
+        opacity: 0.4;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+.table-list__item {
+    &.table-list__item--align-center {
+        .table-list__item-content {
+            justify-content: center;
+        }
+        
+    }
+}
+
+.table-list__add-bar-container {
+    min-height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    &:hover {
+        .table-list__add-bar  {
+            opacity: 1;
+            height: 32px;
+            transform: scale(1);
+        }
+
+        &::after {
+            opacity: 1;
+        }
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        height: 11px;
+        width: 100%;
+        border-radius: var(--b-radius--full);
+        background-color: hsla(0, 0%, 100%, 0.2);
+        border: 5px solid var(--sd-colour-interactive--alpha-30);
+        opacity: 0;
+        transition: all ease 0.3s;
+    }
+}
+
+.table-list__add-bar {
+    height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: all ease 0.3s;
+    z-index: 2;
+    padding: 2px;
+    border-radius: var(--b-radius--full);
+    background-color: var(--sd-colour-panel-bg--000);
+    transform: scale(0.5);
+}
+
+.side-panel__content-block {
+    .table-list__item-content {
+        grid-template-columns: [columnLeft] 140px [columncenter] 1fr [columnRight] auto;
+    }
+}
+
+.table-list--gap-s {
+    gap: dimensions.$sd-base-increment;
+}
+
+.table-list__item--draggable {
+    &.table-list__item--drag-handles-always {
+        border-left-width: 16px;
+        border-left-color: var(--sd-colour-line--medium);
+
+        &::after {
+            content: "";
+            width: 20px;
+            position: absolute;
+            inset-block: -1px;
+            inset-inline-start: -18px;
+            background-image: url(../img/dots.svg);
+            background-repeat: no-repeat;
+            background-position: center center;
+            z-index: 2;
+            border-radius: var(--b-radius--small);
+            opacity: 0.85;
+        }
+
+        &:hover {
+            border-left-color: var(--sd-colour-line--strong);
+
+            &::after {
+                cursor: grab;
+            }
+        }
+
+        &:active {
+            border-color: var(--sd-colour-interactive);
+            cursor: grabbing;
+
+            &::after {
+                opacity: 1 !important;
+                cursor: grabbing;
+            }
+        }
+    }
+
+    &.table-list__item--drag-handles-none {
+        border-left-width: 1px;
+
+        &::after {
+            content: "";
+            width: 0;
+            opacity: 0;
+        }
+
+        &:hover {
+            border-left-color: var(--sd-colour-line--strong);
+
+            &::after {
+                cursor: grab;
+            }
+        }
+
+        &:active {
+            border-color: var(--sd-colour-interactive);
+            cursor: grabbing;
+            
+            &::after {
+                opacity: 1 !important;
+                cursor: grabbing;
+            }
+        }
+    }
+}