@eui/styles 17.0.0-next.2 → 17.0.0-next.21

package/src/styles/10-media/_module-print.scss

@@ -2,21 +2,22 @@
  * eUI Corporate Print Stylesheet
  * Based on HTML5 Boilerplate v6.x | https://html5boilerplate.com/
  *                   Bootstrap 4.x | https://getbootstrap.com/
- *                 eUI 3.x 7.x 9.x | http://eui.ecdevops.eu
+ *                eUI all versions | http://eui.ecdevops.eu
  * See also: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
  *
  * @history:
-*               28-04-2022 EUI-5888 - Page with columns content display fix
- *              07-10-2020 EUI-3459 - Alignments on Bootstrap removal
- *              05-06-2020 EUI-2930 + See \src\styles\04-vendors\libs-overrides\bootstrap\_variables.scss
- *              20-02-2019 MWP-994
- *              18-02-2019 MWP-995
- *              13-12-2018 MWP-865
- *              23-08-2018 MWP-414
- *              20-06-2018 EUI-383
- *              15-06-2018 MWP-298
- *              07-06-2018 UXATEC-1508 (initial release)
- */
+ *      20-10-2023 EUI-8258 - Removed all legacy ux references & align to new App-Shell (page) structure
+ *      28-04-2022 EUI-5888 - Page with columns content display fix
+ *      07-10-2020 EUI-3459 - Alignments on Bootstrap removal
+ *      05-06-2020 EUI-2930 + See \src\styles\04-vendors\libs-overrides\bootstrap\_variables.scss
+ *      20-02-2019 MWP-994
+ *      18-02-2019 MWP-995
+ *      13-12-2018 MWP-865
+ *      23-08-2018 MWP-414
+ *      20-06-2018 EUI-383
+ *      15-06-2018 MWP-298
+ *      07-06-2018 UXATEC-1508 (initial release)
+*/
 
 $debug: false;
 $print-page-size: auto !default;  // EUI-2930: fix page layout orientation (portrait or landscape)
@@ -35,17 +36,13 @@ $print-body-min-width: map-get($ecl-base-breakpoints, 'l') !default;
     // Remove links
     a,
     a:visited {
-        text-decoration: none;
+        text-decoration: none !important;
 
         &:not(.btn) {
-            text-decoration: none;
+            text-decoration: none !important;
         }
     }
 
-    // a[href]::after {
-    //     content: " (" attr(href) ")";
-    // }
-
     abbr[title]::after {
         content: " (" attr(title) ")";
     }
@@ -62,13 +59,13 @@ $print-body-min-width: map-get($ecl-base-breakpoints, 'l') !default;
 
     pre,
     blockquote {
-        border: none;
-        page-break-inside: avoid;
+        border: none !important;
+        page-break-inside: avoid !important;
     }
 
     // Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
     thead {
-        display: table-header-group;    // h5bp.com/t
+        display: table-header-group !important;    // h5bp.com/t
     }
 
     //----------------------------------------
@@ -117,126 +114,19 @@ $print-body-min-width: map-get($ecl-base-breakpoints, 'l') !default;
         page-break-after: avoid !important;
     }
 
-    // Always start new sections & articles on a new page
-    // section,
-    // article {
-    //     page-break-before: always !important;
-    // }
-
     // Prevent elements from being split up
-    // ul,  // Attention! This sets ux-panels to a new page
     tr,
     img,
     pre,
     blockquote,
-    figure,
-    // table,   // MWP-995
-    .ux-layout-page-header-wrapper,
-    // .ux-panel-item,  // do not select!
-    .ux-panel-header,
-    .ux-progress-circle-wrapper,
-    .ux-badge-group {
+    figure {
         page-break-inside: avoid !important;
     }
 
-    //----------------------
-    // BOOTSTRAP SPECIFIC
-    //----------------------
-    .badge {
-        border: none !important;
-    }
-
-    .container {
-        width: auto;    // Workaround for Safari v8+which uses fixed-width
-    }
-
-    .navbar {
-        display: none !important;
-    }
-
-    .btn,
-    .dropup > .btn {
-        > .caret {
-            border-top-color: #000 !important;
-        }
-    }
-
-    .label {
-        border: 1px solid #000;
-    }
-
-    .table {
-        border-collapse: collapse !important;
-
-        td,
-        th {
-            background-color: #fff !important;
-        }
-    }
-
-    .table-bordered {
-        th,
-        td {
-            border: 1px solid #ddd !important;
-        }
-    }
-
-    .table-responsive {
-        overflow: hidden !important;
-    }
-
     //------------------------
     // eUI COMPONENTS & MISC
     //------------------------
 
-    // Show border
-    .btn.btn-secondary,
-    .ux-panel-item {
-        background-color: #fff !important;
-        border: 1px solid #999 !important;
-        box-shadow: none !important;
-    }
-
-    // ux-modal
-    .modal,
-    .ux-modal__body,
-    .ux-modal__content,
-    .modal-open .modal {
-        overflow: hidden !important;
-    }
-
-    // Modal title customization
-    .modal-title.ux-modal__header-title {
-        color: #004494;
-        font-family: "eui-bold", "Helvetica Neue", Helvetica, sans-serif;
-        font-size: 1.5rem;
-        font-weight: normal;
-        overflow: visible;  // show all text visible (disable ellipsis)
-    }
-
-    .modal,
-    .ux-modal__dialog,
-    .ux-modal--full-screen .ux-modal__content {
-        background: #fff !important;
-        // height: 100% !important;
-        height: auto !important;    // 100vh;
-        margin: 0 !important;
-        overflow: hidden !important;
-        padding: 0;
-        visibility: visible !important;
-        width: 100% !important;
-    }
-
-    // PrimeNG Data Grids - MWP-994
-    .ui-table-scrollable-body,
-    .ui-datatable-scrollable-body {
-        overflow: hidden !important;
-    }
-
-    //----------------------
-    // DISPLAY
-    //----------------------
-
     // Watermark: add every top page content (QR code, logo, etc.)
     // #app-wrapper::after {
     //     content: url(https://chart.googleapis.com/chart?cht=qr&amp;chs=150x150&amp;chl=<?=$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"] ?>&amp;choe=UTF-8);
@@ -246,60 +136,19 @@ $print-body-min-width: map-get($ecl-base-breakpoints, 'l') !default;
     // }
 
     // Elements to hide
-    #app-header,
-    #app-footer,
-    .ux-layout-header,
-    .ux-layout-nav-bar,
-    .ux-layout-page-header__actions,
-    .sidebar,
-    .ux-modal__footer--custom-alignment,
-    .modal-header .close,
-    .overlay-panel,
-    .ux-overlay,
-    .ux-layout-footer,
-    .ux-layout-footer-action-bar-wrapper,
-    .ux-growl,
-    .ux-block-document,
-    // .ux-button,  // MWP-994, MWP-994 buttons especially button icons should be displayed/printed
-    .ux-layout-page-header__actions-icons__item,
-    .ux-popover,
-    .ux-a-toolbar-filter-trigger,
     .d-print-none,
-    .fixed-action-btn,
-    .ux-carousel-items__arrow,
-    .ux-carousel-items__summary-indicators,
-    .ux-carousel-items__summary-indicators-item,
-    .ux-app-shell__header,
-    .ux-app-shell__sidebar,
-    .ux-app-shell__nav-bar,
-    .ux-app-shell__feedback,
-    .ux-app-shell__footer,
-    .ux-button-floating,
+    .eui-overlay,
+    .eui-growl,
+    .eui-block-content,
+    .eui-block-document,
+    .eui-popover,
+    .eui-button-fixed
     .eui-button-floating,
     .eui-u-hidden-desktop-down {
         display: none !important;
         visibility: hidden !important;
     }
 
-    // Keep the Breadcrumb from the navbar
-    .ux-app-shell__nav-bar {
-        background-color: #fff !important;
-
-        .ux-app-shell__nav-bar-actions {
-            display: none !important;
-            visibility: hidden !important;
-        }
-
-        .ux-app-shell__nav-bar-breadcrumb .ux-layout-breadcrumbs .ux-layout-breadcrumbs__item a {
-            color: #000 !important;
-
-            > span {
-                color: #000 !important;
-                overflow: visible;
-            }
-        }
-    }
-
     // Removing Multimedia elements
     iframe {
         display: none !important;
@@ -321,9 +170,7 @@ $print-body-min-width: map-get($ecl-base-breakpoints, 'l') !default;
     }
 
     // Visible elements
-    #printSection,
-    .ux-layout-page-header__title,
-    .ux-layout-page-header__sub-title {
+    #printSection {
         visibility: visible !important;
     }
 
@@ -340,12 +187,7 @@ $print-body-min-width: map-get($ecl-base-breakpoints, 'l') !default;
     .d-print-table-row,
     .d-print-table-cell,
     .d-print-flex,
-    .d-print-inline-flex,
-    .ui-datatable,
-    .ui-datatable-tablewrapper,
-    .ui-datatable--no-borders,
-    .ui-datatable--scrollable,
-    .ui-datatable-scrollable-view {
+    .d-print-inline-flex {
         background-color: #fff !important;
         display: block !important;
         float: none !important;
@@ -355,135 +197,64 @@ $print-body-min-width: map-get($ecl-base-breakpoints, 'l') !default;
         position: static !important;
         width: 100% !important;
 
+        & .eui-u-flex,
         & .flex-container,
-        & .d-flex,
-        & .row {
+        & .d-flex
+        & .row 
+        {
             display: flex !important;
         }
     }
 
-    // Fix margin when Sidebar is off (no margins, no paddings)
-    #main-content {
-        margin: 0 !important;
-        padding: 0 !important;
-    }
-
     // Avoid last page to be cut (sometimes still bugged on Chrome)
-    body,
-    #main,
-    .ux-app-shell__main-content {
+    body {
         background-color: #fff !important;
         display: block !important;
-    }
-
-    // Elements to not truncate (remove ellipsis)
-    .ux-layout-page-header-wrapper,
-    .ux-layout-page-header,
-    .ux-layout-page-header__sub-title,
-    .page-sub-title,
-    .modal-title.ux-modal__header-title {
-        display: block !important;
         margin: 0 !important;
-        overflow: visible !important;
-        // padding: 0 !important;   // do not touch original padding
-        page-break-inside: avoid !important;
-        text-overflow: clip;    // removes ellipsis truncation if any
-        @if ($debug) {
-            border: 1px dashed lime;
-        }
-    }
-
-    // ux-panels
-    .ux-panel-item {
-        background-color: #fff !important;
-        border: 1px solid #999 !important;
-        box-shadow: none !important;
-
-        &::after {
-            content: ' ';
-            @if ($debug) {
-                border-top: 1px dashed magenta;
-            }
-        }
-    }
-
-    .ux-panel-content {
-        background-color: #fff !important;
-        display: block !important;
-        height: auto !important;
-
-        // Print scrollable content (MWP-414)
-        &--fixed-height,
-        &--fixed-height-scrollable {
-            height: auto !important;
-            overflow-y: visible !important;
-            width: 100% !important;
-
-            &[style] {
-                height: auto !important;
-                max-height: 100% !important;
-            }
-        }
-
-        // Do not Print panel content when collapsed (MWP-994)
-        &[hidden] {
-            display: none !important;
-            height: 0 !important;
-            visibility: hidden !important;
-        }
-
-        &::after {
-            content: '';
-            @if ($debug) {
-                border: 1px dashed blue;
-            }
-        }
+        padding: 0 !important;
     }
 
-    // Landing page
-    .ux-t-landing-page {
-        & .masthead,
-        & .bg-primary,
-        > section * {
-            background: #fff !important;
-            color: #000 !important;
-        }
-
-        hr.light {
-            border-color: black !important;
-        }
-    }
+    // DISABLED - For elements to not truncate (remove ellipsis) use this:
+    //     display: block !important;
+    //     margin: 0 !important;
+    //     overflow: visible !important;
+    //     // padding: 0 !important;   // do not touch original padding
+    //     page-break-inside: avoid !important;
+    //     text-overflow: clip;    // removes ellipsis truncation if any
+    // }
 
     // Miscellaneous
-    * .text-white,
-    * .text-faded {
+    * .eui-u-color-white,
+    * .eui-u-color-grey-0 {
         color: #000 !important;
     }
 
     // REACTIVE FORMS
-    .ux-form-group {
+    .eui-input-group {
+        align-items: flex-start !important;
         display: flex !important;
-        flex-direction: row !important;
-
-        &.ux-form-group--vertical {
-            flex-direction: column !important;
-        }
+        flex-direction: column !important;
+    }
 
-        @media (orientation: portrait) {
-            .ux-form-group__label-wrapper.col-form-label {
-                text-align: left !important;
-            }
-        }
+    .row.eui-input-group {
+        align-items: center !important;
+        display: flex !important;
+        flex-direction: row !important;
 
-        @media (orientation: landscape) {
-            .ux-form-group__label-wrapper.col-form-label {
-                text-align: right !important;
-            }
+        > * {
+            box-sizing: border-box !important;
+            flex-shrink: 0 !important;
+            width: auto !important;
+            max-width: unset !important;
+            padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
+            padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
+            margin-top: var(--bs-gutter-y) !important;
         }
     }
 
-    // SHELL NEXT (eUI 10+)
+    // APP-SHELL NEXT (eUI 10+)
     .eui-app-main {
+        background: var(--eui-base-color-white) !important;
         margin-left: 0 !important;
         width: 100% !important;
 
@@ -496,7 +267,6 @@ $print-body-min-width: map-get($ecl-base-breakpoints, 'l') !default;
         }
     }
 
-    app-floating-content,
     .cdk-overlay-container,
     .eui-app-sidebar,
     .eui-clearable-input-wrapper__clear {

package/src/styles/99-utilities/_module.scss

@@ -1 +1 @@
-@import '@eui/styles-base/src/styles/99-utilities/module-all';
+@import '@eui/styles-base/src/styles/99-utilities/module';

package/src/styles/999-showcase/_component-demo-exports.scss

@@ -33,6 +33,7 @@
         position: relative;
         width: 100%;
         @include eui-scrollbars(6px);
+        // @include eui-accessible-focus();
 
         pre {
             color: #cc367b;
@@ -44,6 +45,7 @@
             overflow: initial;
             white-space: pre;
             word-wrap: break-word;
+            // @include eui-accessible-focus();
 
             > * {
                 align-items: center;

package/src/styles/999-showcase/_module.scss

@@ -1,6 +1,7 @@
-@import '@eui/styles-base/src/styles/eui-base-showcase-exports';
+@import '@eui/styles-base/src/styles/999-showcase-exports/module';
 
 @import 'prism-theme';
+@import 'prism-dracula';
 @import 'component-demo-exports';
 @import 'docpage-navigation';
 @import 'specific-typography'; // v15 transfered from shared