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

package/app/styles/_modals.scss

@@ -0,0 +1,452 @@
+@use "sass:map";
+@use "mixins";
+@use "variables/colors";
+@use "variables/dimensions";
+
+// MODALS
+
+// Recalculate z-index where appropriate
+$zindexDropdown: 2000;
+$zindexPopover: 2010;
+$zindexTooltip: 2040;
+$zindexModalBackdrop: 1045;
+$zindexModal: 1050;
+$nav-height: 48px;
+
+.modal-open {
+    overflow: hidden;
+    .dropdown__menu {  z-index: $zindexDropdown + $zindexModal; }
+    .dropdown.open  { *z-index: $zindexDropdown + $zindexModal; }
+    .popover        {  z-index: $zindexPopover  + $zindexModal; }
+    .tooltip        {  z-index: $zindexTooltip  + $zindexModal; }
+}
+
+// Variables
+$modal-base-width : 480px;
+$modal-large-width : 680px;
+$modal-x-large-width : 1000px;
+$modal-fill-width: 100%;
+$modal-fullscreen-width: 100%;
+
+$modal-border-radius: dimensions.$border-radius__base--large;
+$modal-line-color: var(--sd-colour-line--x-light);
+$modal-bg-color: var(--color-modal-Bg);
+
+$modal-header-height : $nav-height;
+$modal-footer-height : 48px;
+$modal-subnav-height : $nav-height;
+
+$modal-padding : dimensions.$sd-base-increment * 2;
+$modal-box-shadow: var(--sd-shadow__modal);
+
+// Map with all modal sizes
+$modal-sizes: (
+  default: $modal-base-width,
+  large: $modal-large-width,
+  x-large: $modal-x-large-width,
+  fill: $modal-fill-width,
+  fullscreen: $modal-fullscreen-width,
+) !default;
+
+@mixin modal-base(
+    $align-items: flex-start,
+    $space-around: 40px
+) {
+    position: fixed;
+    inset-inline-start: $space-around;
+    inset-inline-end: $space-around;
+    inset-block-start: $space-around;
+    inset-block-end: $space-around;
+    align-items: $align-items;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: $zindexModal;
+    display: none;
+}
+
+@mixin modal-dialog() {
+    display: flex;
+    max-height: 100%;
+    flex: 0 1 auto;
+    margin: 0 auto;
+}
+
+@mixin modal-content() {
+    background-color: $modal-bg-color;
+    display: flex;
+    flex-direction: column;
+    margin: 10px 0;
+    border-radius: $modal-border-radius;
+    box-shadow: $modal-box-shadow;
+}
+
+@mixin modal-header() {
+    padding: $modal-padding - dimensions.$sd-base-increment $modal-padding;
+    border-block-end: 1px solid $modal-line-color;
+    min-height: $modal-header-height;
+    background-color: $modal-bg-color;
+    border-radius: dimensions.$border-radius__base--large dimensions.$border-radius__base--large 0 0;
+}
+
+@mixin modal-body() {
+    background: $modal-bg-color;
+    overflow-y: auto;
+    padding: $modal-padding;
+    position: relative;
+}
+
+@mixin modal-footer() {
+    @include mixins.clearfix(); // clear it in case folks use .pull-* classes on buttons
+    padding: $modal-padding - dimensions.$sd-base-increment $modal-padding;
+    text-align: end; // right align buttons
+    border-block-start: 1px solid $modal-line-color;
+    min-height: $modal-footer-height;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+// Base modal calculation, with different sizes
+.modal {
+    @include modal-base;
+
+    &.in {
+        display: flex !important;
+    }
+
+    // default size, no class needed
+    .modal__dialog {
+        @include modal-dialog();
+        max-width: map.get($modal-sizes, default);
+        width: 100%;
+    }
+
+    // loop for different modal sizes
+    @each $name, $value in $modal-sizes {
+        // fill modal
+        @if $name == fill {
+            &--#{$name} {
+                @include modal-base(flex-start, 30px);
+                align-items: initial;
+                flex-direction: initial;
+                padding: 10px;
+
+                .modal__content {
+                    margin: 0 !important;
+                }
+
+                .modal__body {
+                    flex: 1 1 auto !important;
+                }
+            }
+        }
+
+        // fullscreen modal (preview article dialog)
+        @if $name == fullscreen {
+            &--#{$name} {
+                @include modal-base(flex-start, 0px);
+
+                .modal__dialog {
+                    width: 100%;
+                    height: 100%;
+                }
+
+                .modal__content {
+                    @include mixins.border-radius(0);
+                    flex: 0 0 100%;
+                    margin: 0;
+                }
+
+                .modal__body {
+                    max-height: none;
+                    flex: 1 1 auto !important;
+                    display: flex;
+                    flex-direction: column;
+                }
+            }
+        }
+
+        // all other sizes from $modal-sizes except default one
+        @if $name != default {
+            &--#{$name} {
+                .modal__dialog {
+                   max-width: $value;
+                }
+
+                .modal__body {
+                    max-width: $value !important;
+                }
+            }
+        }
+    }
+
+    // modifier, change body to white background
+    // &.modal--white {
+    //     .modal__body {
+    //         background: $white !important;
+    //     }
+    // }
+    // fix for calling a modal from another modal
+
+    &.modal--double {
+        z-index: 1060;
+
+        &+.modal__backdrop {
+            z-index: 1055;
+        }
+    }
+
+    // modal with tabs and footer inside body
+    &.modal--tabs {
+        .modal__body {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            padding: 0;
+            background: transparent;
+
+            // fix for modal with form
+            > form {
+                display: flex;
+                flex-direction: column;
+            }
+        }
+
+        .modal__body-header {
+            height: 48px;
+            width: 100%;
+            border-block-end: 1px solid $modal-line-color;
+            padding: 0;
+        }
+
+        .modal__body-header--add-padding {
+            padding: 1rem 2rem; // useful if we use body header for something else but tabs
+            height: auto;
+            min-height: 48px;
+        }
+
+        .modal__body-header--flex {
+            display: flex;
+            align-items: center;
+        }
+
+        .modal__body-content {
+            flex: 1 1 auto;
+            width: 100%;
+            overflow-y: auto;
+            padding: $modal-padding;
+            min-height: 60px;
+        }
+
+        .modal__body-footer {
+            flex: 0 0 auto;
+            padding: $modal-padding - .8rem $modal-padding;
+            border-block-start: 1px solid $modal-line-color;
+            text-align: end;
+            min-height: $modal-footer-height;
+            display: flex;
+        }
+    }
+
+    p {
+        margin: 0 0 1em 0;
+    }
+}
+
+.modal__content {
+    @include modal-content();
+    flex: 0 0 100%;
+
+    .modal__header, .modal__footer {
+        flex: 0 0 auto;
+        width: 100%;
+    }
+
+    .modal__footer {
+        &> .btn + .btn {
+            margin-inline-start: dimensions.$sd-base-increment;
+        }
+    }
+
+    .modal__header {
+        @include modal-header();
+        position: relative;
+    }
+
+    .modal__header--padding-20 {
+        padding: 10px 20px;
+    }
+
+    .modal__header--flex {
+        display: flex !important;
+        flex-direction: row !important;
+        align-items: center;
+
+        .modal__heading {
+            flex-grow: 1;
+        }
+
+        .modal__heading--no-grow {
+            flex-grow: 0;
+        }
+    }
+
+    .modal__sliding-toolbar {
+        @include mixins.sliding-toolbar;
+        max-height: 5.4rem;
+    }
+
+    .modal__header-element-grow {
+        flex-grow: 1;
+    }
+
+    .modal__header-buttons {
+        display: flex;
+        align-content: center;
+    }
+
+    .modal__header-buttons--right {
+        justify-content: flex-end;
+
+        .btn, .dropdown {
+            margin: 0 0 0 1rem;
+        }
+    }
+
+    .modal__header-buttons--center {
+        justify-content: center;
+    }
+
+    .modal__header-buttons--grow {
+        flex-grow: 1;
+    }
+
+    .modal__footer {
+        @include modal-footer();
+    }
+
+    .modal__body {
+        @include modal-body();
+        flex: 0 1 auto;
+        width: 100%;
+        max-width: $modal-base-width;
+        // modifier to add min height, if needed
+    }
+
+    .modal__body--add-min-height {
+        min-height: 300px;
+
+        // we reset this value if the screen height is lower than 500px
+        @media (max-height: 500px) {
+            min-height: auto;
+        }
+    }
+
+    .modal__body--no-padding {
+        padding: 0 !important;
+    }
+
+    .modal__body-heading {
+        font-size: 1.8rem;
+        color: colors.$sd-text;
+        font-weight: 400;
+        margin-block-end: 2rem;
+        line-height: 100%;
+
+        .badge {
+            vertical-align: bottom;
+            margin-inline-end: 0.6rem;
+        }
+    }
+
+    .modal__body-heading--inactive {
+        color: colors.$sd-text-light;
+    }
+}
+
+.modal__content {
+    .subnav {
+        flex-shrink: 0;
+    }
+}
+
+.modal__close {
+    margin: 2px -6px 0;
+    border: 0;
+    background: 0;
+    padding: 0px 4px;
+    opacity: 0.3;
+
+    &:hover {
+        opacity: 0.7;
+        cursor: pointer;
+    }
+}
+
+.modal__header--flex {
+    .icn-btn {
+        margin-inline-end: - dimensions.$sd-base-increment;
+    }
+}
+
+.modal__header {
+    .icn-btn {
+        opacity: 0.3;
+        transition: opacity 0.2s ease-in-out;
+    }
+
+    &:hover {
+        .icn-btn {
+            opacity: 0.75;
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.modal__heading {
+    font-size: 18px;
+    font-weight: 300;
+    line-height: 27px;
+    color: var(--color-text-muted);
+}
+
+// Background
+.modal__backdrop {
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    z-index: $zindexModalBackdrop;
+    background-color: var(--sd-colour-bg--03);
+
+    // Fade for backdrop
+    &.fade { opacity: 0; }
+}
+
+.modal__backdrop,
+.modal__backdrop.fade.in {
+    opacity: 0.5;
+}
+
+.modal--fullscreen {
+    .modal__header, .modal__body {
+        padding-inline-start: var(--space--3);
+    }
+
+    .modal__heading {
+        min-width: 12rem;
+    }
+}
+
+.dark-ui,
+[data-theme="dark-ui"] {
+    .modal__content {
+        .side-panel {
+            --color-bg-00: hsla(0, 0%, 14%, 1);
+        }
+    }
+}