@carbon/ibm-products 1.12.0 → 1.15.0

package/scss/components/Datagrid/styles/useSortableColumns.scss

@@ -0,0 +1,55 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2020
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+
+@import './variables';
+
+.#{$block-class}__sortableColumn {
+  .#{$carbon-prefix}--table-header-label .header-title {
+    display: inline-block;
+    width: auto;
+  }
+  .#{$carbon-prefix}--table-header-label {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .#{$carbon-prefix}--table-header-label button:focus,
+  .#{$carbon-prefix}--table-header-label button:active,
+  .#{$carbon-prefix}--table-header-label button:focus svg {
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    color: $text-01 !important;
+    /* stylelint-disable-next-line declaration-no-important */
+    outline: none !important;
+  }
+  .#{$carbon-prefix}--table-header-label button {
+    width: 100%;
+    min-width: 100%;
+    min-height: 0;
+    padding: 0;
+    border: none;
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
+    box-shadow: none;
+    /* stylelint-disable-next-line declaration-no-important */
+    color: $text-01 !important;
+    font: inherit;
+  }
+  .#{$carbon-prefix}--table-header-label button svg {
+    fill: $text-01;
+    visibility: hidden;
+  }
+}
+
+.#{$block-class}__sortableColumn:hover,
+.#{$block-class}__sortableColumn.#{$block-class}__isSorted {
+  .#{$carbon-prefix}--table-header-label svg {
+    visibility: visible;
+  }
+}

package/scss/components/Datagrid/styles/useStickyColumn.scss

@@ -0,0 +1,38 @@
+/*
+* Licensed Materials - Property of IBM
+* 5724-Q36
+* (c) Copyright IBM Corp. 2021
+* US Government Users Restricted Rights - Use, duplication or disclosure
+* restricted by GSA ADP Schedule Contract with IBM Corp.
+*/
+
+@import './variables';
+
+.#{$block-class}__right-sticky-column-cell {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  right: 0;
+  box-shadow: -2px 1px 3px $overlay-01;
+}
+
+.#{$block-class}__right-sticky-column-header {
+  /* stylelint-disable-next-line declaration-no-important */
+  position: sticky !important;
+  right: 0;
+  box-shadow: -2px 1px 3px $overlay-01;
+}
+
+.#{$block-class}__sticky-noShadow {
+  box-shadow: none;
+}
+
+.#{$block-class}__sticky-column-noShadow {
+  .#{$block-class}__right-sticky-column-cell {
+    box-shadow: none;
+  }
+}
+
+.#{$block-class}__right-sticky-column-offset-scroll {
+  /* stylelint-disable-next-line */
+  right: 6px !important; // offset the vertical scroll bar in the table body
+}

package/scss/components/ExportModal/_export-modal.scss

@@ -29,10 +29,6 @@
     padding-right: $spacing-05;
   }
 
-  .#{$block-class} .#{$carbon-prefix}--modal-close {
-    display: none;
-  }
-
   .#{$block-class}__body {
     padding-right: calc(20% - #{$spacing-05});
     margin-bottom: $spacing-05;

package/scss/components/HTTPErrors/_http-errors.scss

@@ -18,14 +18,15 @@
   $block-class: #{$pkg-prefix}--http-errors;
 
   .#{$block-class} .#{$block-class}__content {
-    @include carbon--breakpoint(sm) {
-      position: fixed;
-      z-index: 2;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -150%);
-    }
+    position: fixed;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -75%);
     @include carbon--breakpoint(md) {
+      transform: translate(-50%, -100%);
+    }
+    @include carbon--breakpoint(lg) {
       transform: translate(-50%, -50%);
     }
   }
@@ -54,15 +55,14 @@
     margin-bottom: $spacing-02;
   }
   .#{$block-class} .#{$block-class}__image {
-    @include carbon--breakpoint(sm) {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      width: 100%;
-      transform: translate(-50%, -40%);
-    }
-    @include carbon--breakpoint(md) {
-      transform: translate(-50%, -50%);
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    max-height: 100%;
+    @include carbon--breakpoint-down(md) {
+      left: 10%;
+      transform: scale(1.5);
     }
   }
 }

package/scss/components/PageHeader/_page-header.scss

@@ -356,6 +356,9 @@ $right-section-alt-width: 100% - $left-section-alt-width;
     .#{$block-class}__title-row {
       margin-top: 0;
       margin-bottom: 0;
+      transform: translateY(
+        $spacing-01
+      ); // position adjusted for editable title focus outline
 
       @include carbon--breakpoint-up('md') {
         flex-wrap: nowrap; /* assume enough space */
@@ -363,6 +366,7 @@ $right-section-alt-width: 100% - $left-section-alt-width;
 
       &.#{$block-class}__title-row--under-action-bar {
         margin-top: $spacing-05;
+        transform: translateY(0); // Not needed under action bar
       }
 
       + .#{$block-class}__last-row-buffer--active {

package/scss/components/Tearsheet/_tearsheet.scss

@@ -280,6 +280,10 @@
         background-color: $field-01;
       }
 
+      .#{$prefix}--select--inline .#{$prefix}--select-input {
+        background-color: transparent;
+      }
+
       // and restore the 'light' prop in case light fields are wanted
       .#{$prefix}--text-input--light,
       .#{$prefix}--text-area--light,

package/scss/components/_index.scss

@@ -44,3 +44,4 @@
 @import './OptionsTile/index';
 @import './InlineEdit/index';
 @import './DataSpreadsheet/index';
+@import './Datagrid/index';