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

package/app/styles/components/_sd-dropzone.scss

@@ -0,0 +1,134 @@
+@use "../variables/dimensions";
+@use "../variables/typography";
+
+$iconSize-large: 3.6rem;
+$iconSize-small: 2.4rem;
+
+.sd-dropzone__drop-target {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--b-radius--medium);
+    min-height: dimensions.$sd-base-increment * 9;
+    width: 100%;
+    padding: dimensions.$sd-base-increment * 3;
+    gap: dimensions.$sd-base-increment * 1;
+    transition: all 0.2s ease;
+    background-color: var(--sd-colour-bg-translucent--10);
+
+    &.sd-dropzone__drop-target--ondragover {
+        background-color: var(--sd-colour-interactive--alpha-10);
+
+        .sd-dropzone__target-border {
+            inset: 4px;
+            border-color: var(--sd-colour-interactive);
+        }
+
+        .sd-dropzone__icon {
+            opacity: 1;
+            color: var(--sd-colour-interactive);
+        }
+    }
+
+    &:hover {
+        background-color: var(--sd-colour-interactive--alpha-10);
+        cursor: pointer;
+
+        .sd-dropzone__target-border {
+            border-color: var(--sd-colour-interactive--alpha-30);
+        }
+    }
+
+    &:active {
+        background-color: var(--sd-colour-interactive--alpha-20);
+
+        .sd-dropzone__target-border {
+            border-color: var(--sd-colour-interactive);
+        }
+    }
+}
+
+.sd-dropzone__drop-target--height-l {
+    min-height: var(--width__container--xx-small);
+}
+
+.sd-dropzone__target-border {
+    position: absolute;
+    inset: 2px;
+    border: 2px dashed var(--sd-colour-line--medium);
+    border-radius: var(--b-radius--medium);
+    transition: all 0.3s ease;
+    z-index: 0;
+}
+
+.sd-dropzone__icon {
+    width: 5.6rem;
+    height: 5.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: hsla(0, 0%, 100%, 0.5);
+    border-radius: var(--b-radius--full);
+
+    [class^="big-icon--"],
+    [class*=" big-icon--"] {
+        margin-block-start: -4px;
+        width: $iconSize-large;
+        height: $iconSize-large;
+        font-size: $iconSize-large;
+        line-height: $iconSize-large;
+        opacity: 0.5;
+    }
+}
+
+.sd-dropzone__icon--small {
+    width: 4rem;
+    height: 4rem;
+
+    [class^="big-icon--"],
+    [class*=" big-icon--"] {
+        width: $iconSize-small;
+        height: $iconSize-small;
+        font-size: $iconSize-small;
+        line-height: $iconSize-small;
+        opacity: 0.5;
+    }
+}
+
+.sd-dropzone__action {
+    margin: 0 auto;
+}
+
+.sd-dropzone__heading {
+    text-align: center;
+    max-width: 400px;
+    margin: 0 auto;
+    font-size: 1.8rem;
+    font-weight: 700;
+    font-family: typography.$baseFontFamilySerif;
+    color: var(--color-text-muted);
+}
+
+.sd-dropzone__description {
+    opacity: 0.7;
+    text-align: center;
+    max-width: 320px;
+    margin: 0 auto;
+    font-size: 1.4rem;
+    position: relative;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.sd-dropzone__input {
+    opacity: 0;
+    position: absolute;
+    inset: 2px;
+    z-index: 1;
+    
+    &:hover {
+        cursor: pointer;
+    }
+}

package/app/styles/components/_sd-editor-popup.scss

@@ -0,0 +1,106 @@
+@use "../mixins";
+@use "../variables/colors";
+
+$editor-popup-padding: 1.6rem;
+
+.editor-popup {
+    display: none;
+    position: fixed;
+}
+
+.editor-popup--open {
+    display: inline-block;
+    z-index: 1040; // higher than top/bottom bars, lower than modals
+}
+
+.editor-popup--annotation {
+    border-block-start: 3px solid colors.$annotation-color;
+}
+
+.editor-popup--comment {
+    border-block-start: 3px solid colors.$comment-color;
+}
+
+.editor-popup__main {
+    display: flex;
+    color: var(--color-text);
+    width: 32rem;
+    max-height: 100%;
+
+    &.editor-popup__main--floating {
+        background-color: var(--color-dropdown-menu-Bg);
+        z-index: 2;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 3px 1px -2px rgba(0, 0, 0, 0.1);
+    }
+}
+
+// header 
+.editor-popup__header {
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    padding: $editor-popup-padding;
+    padding-block-end: 1rem;
+}
+
+.editor-popup__author-name {
+    @include mixins.text-overflow;
+    display: block;
+    margin: 0 0 0.2rem;
+    font-weight: 500;
+    line-height: 100%;
+}
+
+.editor-popup__time {
+    font-size: 1.1rem;
+    font-weight: 400;
+}
+
+.editor-popup__header-text {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: hidden;
+}
+
+.editor-popup__header-tools {
+    margin:  -2rem -1rem 0 0.4rem;
+
+    .icn-btn {
+      opacity: 0.2;  
+    }
+
+    &:hover {
+        .icn-btn {
+            opacity: 1;  
+          }
+    }
+}
+
+// content
+.editor-popup__content-block {
+    padding: $editor-popup-padding;
+    position: relative;
+
+    p + p {
+        margin-block-start: 1rem;
+    }
+}
+
+.editor-popup__content-block--scrollable {
+    max-height: 20rem;
+}
+
+.editor-popup__info-bar {
+    margin-block-end: 0.4rem;
+}
+
+.editor-popup__header + .editor-popup__content-block {
+    padding-block-start: 0;
+}
+
+.editor-popup__secondary-content {
+    background-color: hsla(214, 13%, 48%, 0.05);
+    border-block-start: 1px solid var(--sd-colour-line--light);
+}