superdesk-ui-framework 2.4.21 → 3.0.0-rc12

package/app/styles/_modals.scss

@@ -2,9 +2,9 @@
 // ------
 
 // Recalculate z-index where appropriate
-$zindexDropdown: 1000;
-$zindexPopover: 1010;
-$zindexTooltip: 1040;
+$zindexDropdown: 2000;
+$zindexPopover: 2010;
+$zindexTooltip: 2040;
 $zindexModalBackdrop: 1045;
 $zindexModal: 1050;
 $nav-height: 48px;
@@ -25,15 +25,15 @@ $modal-fill-width: 100%;
 $modal-fullscreen-width: 100%;
 
 $modal-border-radius: $border-radius__base--large;
-$modal-line-color: var(--color-line__modal);
-$modal-bg-color: var(--color-bg__modal);
+$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 : $sd-base-increment * 2;
-$modal-box-shadow: 0 0 8px 2px hsla(0, 0%, 0%, 0.3);
+$modal-box-shadow: var(--sd-shadow__modal);
 
 
 // Map with all modal sizes
@@ -78,6 +78,8 @@ $modal-sizes: (
     padding: $modal-padding - $sd-base-increment $modal-padding;
     border-bottom: 1px solid $modal-line-color;
     min-height: $modal-header-height;
+    background-color: $modal-bg-color;
+    border-radius: $border-radius__base--large $border-radius__base--large 0 0;
 }
 @mixin modal-body() {
     background: $modal-bg-color;
@@ -87,9 +89,12 @@ $modal-sizes: (
 }
 @mixin modal-footer() {
     padding: $modal-padding - $sd-base-increment $modal-padding;
-    text-align: right; // right align buttons
+    text-align: end; // right align buttons
     border-top: 1px solid $modal-line-color;
     min-height: $modal-footer-height;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
     @include clearfix(); // clear it in case folks use .pull-* classes on buttons
 }
 
@@ -105,89 +110,7 @@ $modal-sizes: (
         max-width: map-get($modal-sizes, default);
         width: 100%;
     }
-    .modal__content {
-        @include modal-content();
-        flex: 0 0 100%;
-        .modal__header, .modal__footer {
-            flex: 0 0 auto;
-            width: 100%;            
-        }
-        .modal__header {
-            @include modal-header();
-            position: relative;
-            &--padding-20 {
-                padding: 10px 20px;
-            }
-            &--flex {
-                display: flex;
-                flex-direction: row;
-                align-items: center;
-                .modal__heading {
-                    flex-grow: 1;
-                    &--no-grow {
-                        flex-grow: 0;
-                    }
-                }
-            }
-        }
-        .modal__sliding-toolbar {
-            @include sliding-toolbar;
-            max-height: 5.4rem;
-        }
-        .modal__header-element-grow {
-            flex-grow: 1;
-        }
-        .modal__header-buttons {
-            display: flex;
-            align-content: center;
-            &--right {
-                justify-content: right;
-                .btn, .dropdown {
-                    margin: 0 0 0 1rem;
-                }
-            }
-            &--center {
-                justify-content: center;
-            }
-            &--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
-            &--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;
-                }
-            }
-            &--no-padding {
-                padding: 0;
-            }           
-        }
-        .modal__body-heading {
-            font-size: 1.8rem;
-            color: $sd-text;
-            font-weight: 400;
-            margin-bottom: 2rem;
-            line-height: 100%;
-            &--inactive {
-                color: scale-color($sd-text, $lightness: 60%)
-            }
-            .badge {
-                vertical-align: bottom;
-                margin-right: 0.6rem;
-            }
-        }
-    }
+
     // loop for different modal sizes
     @each $name, $value in $modal-sizes {
         // fill modal
@@ -292,36 +215,99 @@ $modal-sizes: (
             flex: 0 0 auto;
             padding: $modal-padding - .8rem $modal-padding;
             border-top: 1px solid $modal-line-color;
-            text-align: right;
+            text-align: end;
             min-height: $modal-footer-height;
         }
     }
     p {
         margin: 0 0 1em 0;
     }
-    &.modal--dark-ui {
-        .modal__content {
-            background-color: #333;
-            color: $white;
-            .modal__body-header {
-                background-color: #333;
-                color: $white;
-            }
-            .modal__body-content, .modal__body {
-                background-color: #444;
-                color: $white;  
+}
+.modal__content {
+    @include modal-content();
+    flex: 0 0 100%;
+    .modal__header, .modal__footer {
+        flex: 0 0 auto;
+        width: 100%;            
+    }
+    .modal__footer {
+        &> .btn + .btn {
+            margin-left: $sd-base-increment;
+        }
+    } 
+    .modal__header {
+        @include modal-header();
+        position: relative;
+        &--padding-20 {
+            padding: 10px 20px;
+        }
+        &--flex {
+            display: flex !important;
+            flex-direction: row !important;
+            align-items: center;
+            .modal__heading {
+                flex-grow: 1;
+                &--no-grow {
+                    flex-grow: 0;
+                }
             }
-            .modal__header {
-                border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+        }
+    }
+    .modal__sliding-toolbar {
+        @include sliding-toolbar;
+        max-height: 5.4rem;
+    }
+    .modal__header-element-grow {
+        flex-grow: 1;
+    }
+    .modal__header-buttons {
+        display: flex;
+        align-content: center;
+        &--right {
+            justify-content: right;
+            .btn, .dropdown {
+                margin: 0 0 0 1rem;
             }
-            .modal__footer {
-                border-top: 1px solid rgba(0, 0, 0, 0.12);
+        }
+        &--center {
+            justify-content: center;
+        }
+        &--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
+        &--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;
             }
-            .subnav {
-                background-color: #292929;
-                color: $white;
-                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 0 0 rgba(0, 0, 0, 0.3);
-            }  
+        }
+        &--no-padding {
+            padding: 0 !important;
+        }           
+    }
+    .modal__body-heading {
+        font-size: 1.8rem;
+        color: $sd-text;
+        font-weight: 400;
+        margin-bottom: 2rem;
+        line-height: 100%;
+        &--inactive {
+            color: $sd-text-light;
+        }
+        .badge {
+            vertical-align: bottom;
+            margin-right: 0.6rem;
         }
     }
 }
@@ -335,9 +321,9 @@ $modal-sizes: (
     border: 0;
     background: 0;
     padding: 0px 4px;
-    @include opacity(30);
+    opacity: 0.3;
     &:hover {
-        @include opacity(70);
+        opacity: 0.7;
         cursor: pointer;
     }
 }
@@ -348,14 +334,14 @@ $modal-sizes: (
 }
 .modal__header {
     .icn-btn {
-        @include opacity(30);
+        opacity: 0.3;
         transition: opacity 0.2s ease-in-out;
     }
     &:hover {
         .icn-btn {
-            @include opacity(75);
+            opacity: 0.75;
             &:hover {
-                @include opacity(100);
+                opacity: 1;
             }
         }
     }
@@ -364,6 +350,7 @@ $modal-sizes: (
     font-size: 18px;
     font-weight: 300;
     line-height: 27px;
+    color: var(--color-text-light);
 
 }
 
@@ -375,19 +362,22 @@ $modal-sizes: (
     bottom: 0;
     left: 0;
     z-index: $zindexModalBackdrop;
-    background-color: $black;
+    background-color: var(--sd-colour-bg--03);
     // Fade for backdrop
     &.fade { opacity: 0; }
 }
 .modal__backdrop,
 .modal__backdrop.fade.in {
-    @include opacity(30);
+    opacity: 0.5;
 }
 
 .modal--fullscreen {
     .modal__header, .modal__body {
         @include sd-padding('3', 'left');
     }
+    .modal__heading {
+        min-width: 12rem;
+    }
 }
 
 .dark-ui,
@@ -397,4 +387,4 @@ $modal-sizes: (
             --color-bg-00: hsla(0, 0%, 14%, 1);
         }
     }
-}
+}

package/app/styles/_normalize.scss

@@ -115,6 +115,7 @@ a {
 a:active,
 a:hover {
   outline-width: 0;
+  text-decoration: none;
 }
 
 /**
@@ -258,6 +259,10 @@ textarea {
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
 }
 
 /**

package/app/styles/_panel-info.scss

@@ -4,34 +4,39 @@
     box-shadow: none;
     padding: 5rem 0 0;
     text-align: center;
-    color: #888;
+    color: var(--color-text-light);
     &__icon {
-        display: block;
-        box-sizing: border-box;
-        padding-top: 1.6rem;
-        height: 9rem;
-        width: 9rem;
-        background-color: #fff;
-        border-radius: 50%;
+        height: 8rem;
+        width: 8rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: var(--sd-item__main-Bg);
+        border-radius: $border-radius__base--full;
         margin: 0 auto;
-        @include box-shadow(0, 0, 6px, 1px, rgba(0,0,0,.08));
+        box-shadow: 0 0 6px 1px hsla(0, 0%, 0%, 0.08);
         i {
             display: block;
-            width: 56px;
+            font-size: 4.8rem;
+            line-height: 1;
+            width: 48px;
             height: 48px;
-            opacity: .2;
-            margin: 14px auto 0;
-            font-size: 5.2rem;
+            opacity: .6;
+            margin: 0;
+            padding: 0;
         }
     }
     &__heading {
         font-size: 1.8rem;
         font-weight: 400;
-        margin: 12px 0 0;
-        line-height: 27px;
+        text-align: center;
+        margin: 1.2rem auto 0;
+        line-height: 1.2;
     }
     &__description {
-        margin: 4px 0 0;
+        font-size: 1.4rem;
         font-weight: 300;
+        margin: 0.4rem auto 0;
+        text-align: center;
     }
 }

package/app/styles/_popover.scss

@@ -1,8 +1,8 @@
 .sd-popover {
-    background: #333;
+    background: var(--sd-colour-bg--05);
     color: #fff;
     padding: 8px 12px 12px;
-    border-radius: 4px;
+    border-radius: $border-radius__base--medium;
     box-shadow: 0 3px 7px rgba(0,0,0,0.3);
     max-width: 320px !important;
 }

package/app/styles/_pr-superdesk-theme.scss

@@ -0,0 +1,4 @@
+@import 'primereact/pr-general.scss';
+@import 'primereact/pr-autocomplete.scss';
+@import 'primereact/pr-dropdown.scss';
+@import 'primereact/pr-datepicker.scss';

package/app/styles/_publisher-styles.scss

@@ -0,0 +1,182 @@
+
+
+// Dashboard content header
+
+.dashboard-content-header {
+    display: flex;
+    padding: 1.5rem;
+}
+
+.big-number-block {
+    display: flex;
+    color: $grayNeutral;
+
+    &__number {
+        font-size: 3.6rem;
+        font-weight: 300;
+        line-height: 100%;
+        letter-spacing: -.02em;
+    }
+    &__text {
+        margin: 0 1rem;
+        line-height: 120%;
+        font-weight: 300;
+    }
+
+    &--grow {
+        flex-grow: 1;
+    }
+    &--center {
+        align-items: center;
+    }
+}
+
+.dashboard-thumbnail-block {
+    display: flex;
+
+    &__image {
+        border: 1px solid #d6d6d6;
+    }
+    &__meta {
+        padding: 0 1rem;
+        display: flex;
+        flex-direction: column;
+    }
+    &__label {
+        font-size: 1.2rem;
+        color: $grayLight;
+    }
+    &__heading {
+        display: flex;
+        font-weight: 700;
+        padding: .3rem 0;
+
+        i {
+            margin-right: .5rem;
+        }
+    }
+    &__link {
+        color: $sd-colour-interactive;
+        text-decoration: none;
+        border-bottom: 1px dotted $sd-colour-interactive;
+        &:hover {
+            border-bottom: 1px solid $sd-colour-interactive;
+            text-decoration: none;
+            color: $sd-colour-interactive;
+        }
+    }
+}
+
+// Panel border
+.panel-border-left {
+    border-right: 0;
+    border-left: 2px solid rgba(0, 0, 0, 0.4);
+}
+.panel-border-right {
+    border-left: 0;
+    border-right: 2px solid rgba(0, 0, 0, 0.4);
+}
+
+// Overlay block
+
+.sd-overlay-block {
+    position: relative;
+    
+    img {
+        width: 100%;
+    }
+    
+    &__overlay {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        background-color: rgba(0, 0, 0, 0.5);
+        transition: 0.2s linear opacity;   
+        opacity: 0;
+        color: #fff;
+    }
+
+    &:hover {
+        .sd-overlay-block__overlay {
+            opacity: 1;
+        }
+    }
+
+    &__overlay-action-group {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        flex-grow: 1;        
+    }
+
+    &__overlay-action {
+        flex-grow: 0;
+        flex-shrink: 0;
+        color: #fff;
+        width: 5.6rem;
+        height: 5.6rem;
+        border: 2px solid rgba(255, 255, 255, 0.5);
+        border-radius: $border-radius__base--full;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        transition: 0.2s linear all;
+        cursor: pointer;
+        text-decoration: none;
+        background-color: transparent;
+    
+        i {
+            color: #fff;
+            height: 2.4rem;
+            width: 2.4rem;
+            font-size: 2.4rem;
+            line-height: 1;
+            opacity: 0.5;
+            transition: 0.2s linear all;
+        }
+
+        &:hover {
+            border-color: white;
+            background-color: rgba(0, 0, 0, 0.4);
+            text-decoration: none;
+
+            i {
+                opacity: 1;
+            }
+        }
+        + .sd-overlay-block__overlay-action {
+            margin-left: 2rem;
+        }
+    }
+    .sd-overlay-block__overlay-message {
+        display: none;
+        margin-top: 1rem;
+        color: $grayText;
+    }
+
+    &--no-image {
+        height: 160px;
+        border: 2px dashed $grayDark;
+
+        .sd-overlay-block__overlay {
+            opacity: 1;
+        }
+        img {
+            display: none;
+        }
+        .sd-overlay-block__overlay-action-group {
+            flex-direction: column;
+        }
+        .sd-overlay-block__overlay-message {
+            display: block;
+        }
+    }
+}

package/app/styles/_reboot.scss

@@ -9,6 +9,7 @@
 // Reset box sizing
 * {
   box-sizing: border-box;
+  text-align: start;
 }
 // Set box-sizing globally to handle padding and border widths