@carbon/styles 1.37.0 → 1.38.0-rc.0

package/scss/components/date-picker/_date-picker.scss

@@ -59,7 +59,7 @@
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple
     .#{$prefix}--date-picker__input,
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple .#{$prefix}--label {
-    width: convert.to-rem(120px);
+    inline-size: convert.to-rem(120px);
   }
 
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple
@@ -68,19 +68,19 @@
     .#{$prefix}--date-picker-input__wrapper--warn {
     .#{$prefix}--date-picker__input,
     ~ .#{$prefix}--form-requirement {
-      width: convert.to-rem(152px);
+      inline-size: convert.to-rem(152px);
     }
   }
 
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple.#{$prefix}--date-picker--short {
     .#{$prefix}--date-picker__input {
-      width: 5.7rem;
+      inline-size: 5.7rem;
     }
   }
 
   .#{$prefix}--date-picker.#{$prefix}--date-picker--single
     .#{$prefix}--date-picker__input {
-    width: convert.to-rem(288px);
+    inline-size: convert.to-rem(288px);
   }
 
   .#{$prefix}--date-picker
@@ -95,11 +95,11 @@
 
     position: relative;
     display: block;
-    height: convert.to-rem(40px);
     padding: 0 $spacing-05;
     border: none;
-    border-bottom: 1px solid $border-strong;
     background-color: $field;
+    block-size: convert.to-rem(40px);
+    border-block-end: 1px solid $border-strong;
     color: $text-primary;
     transition: $duration-fast-01 motion(standard, productive) all;
 
@@ -109,8 +109,8 @@
     }
 
     &:disabled {
-      border-bottom: 1px solid transparent;
       background-color: $field;
+      border-block-end: 1px solid transparent;
       color: $text-disabled;
       cursor: not-allowed;
     }
@@ -120,7 +120,7 @@
     }
 
     &:disabled:hover {
-      border-bottom: 1px solid transparent;
+      border-block-end: 1px solid transparent;
     }
 
     &::placeholder {
@@ -130,20 +130,20 @@
 
   // Size variant styles
   .#{$prefix}--date-picker__input--lg {
-    height: convert.to-rem(48px);
+    block-size: convert.to-rem(48px);
   }
 
   .#{$prefix}--date-picker__input--sm {
-    height: convert.to-rem(32px);
+    block-size: convert.to-rem(32px);
   }
 
   .#{$prefix}--date-picker__icon {
     position: absolute;
     z-index: 1;
-    // vertically center icon within parent container on IE11
-    top: 50%;
-    right: 1rem;
     fill: $icon-primary;
+    // vertically center icon within parent container on IE11
+    inset-block-start: 50%;
+    inset-inline-end: 1rem;
     pointer-events: none;
     transform: translateY(-50%);
   }
@@ -168,7 +168,7 @@
   }
 
   .#{$prefix}--date-picker__icon ~ .#{$prefix}--date-picker__input {
-    padding-right: $spacing-09;
+    padding-inline-end: $spacing-09;
   }
 
   .#{$prefix}--date-picker__input:disabled ~ .#{$prefix}--date-picker__icon {
@@ -178,12 +178,12 @@
 
   .#{$prefix}--date-picker--range
     > .#{$prefix}--date-picker-container:first-child {
-    margin-right: convert.to-rem(1px);
+    margin-inline-end: convert.to-rem(1px);
   }
 
   .#{$prefix}--date-picker--range .#{$prefix}--date-picker-container,
   .#{$prefix}--date-picker--range .#{$prefix}--date-picker__input {
-    width: convert.to-rem(143.5px);
+    inline-size: convert.to-rem(143.5px);
   }
 
   // Skeleton State
@@ -191,7 +191,7 @@
   .#{$prefix}--date-picker__input.#{$prefix}--skeleton {
     @include skeleton;
 
-    width: 100%;
+    inline-size: 100%;
 
     &::placeholder {
       color: transparent;
@@ -201,8 +201,9 @@
   .#{$prefix}--date-picker.#{$prefix}--skeleton .#{$prefix}--label {
     @include skeleton;
 
-    width: convert.to-rem(75px);
-    height: convert.to-rem(14px);
+    block-size: convert.to-rem(14px);
+
+    inline-size: convert.to-rem(75px);
   }
 
   // Windows HCM fix
@@ -213,8 +214,8 @@
 
   // readonly
   .#{$prefix}--date-picker__input[readonly] {
-    border-bottom-color: $border-subtle;
     background: transparent;
+    border-block-end-color: $border-subtle;
     cursor: text;
   }
 

package/scss/components/date-picker/_flatpickr.scss

@@ -92,14 +92,14 @@
   .flatpickr-calendar {
     position: absolute;
     overflow: hidden;
-    width: convert.to-rem(315px);
-    max-height: 0;
     box-sizing: border-box;
     padding: 0;
     border: 0;
     animation: none;
     border-radius: 0;
     direction: ltr;
+    inline-size: convert.to-rem(315px);
+    max-block-size: 0;
     opacity: 0;
     text-align: center;
     touch-action: manipulation;
@@ -110,7 +110,7 @@
   .flatpickr-calendar.open,
   .flatpickr-calendar.inline {
     overflow: visible;
-    max-height: convert.to-rem(640px);
+    max-block-size: convert.to-rem(640px);
     opacity: 1;
     visibility: inherit;
   }
@@ -121,15 +121,15 @@
     z-index: 99999;
     display: flex;
     overflow: hidden;
-    width: convert.to-rem(288px);
-    height: convert.to-rem(336px);
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: $spacing-02 $spacing-02 $spacing-03 $spacing-02;
     border: none;
-    margin-top: convert.to-rem(-2px);
     background-color: $layer-01;
+    block-size: convert.to-rem(336px);
+    inline-size: convert.to-rem(288px);
+    margin-block-start: convert.to-rem(-2px);
 
     &:focus {
       @include focus-outline('border');
@@ -146,13 +146,13 @@
 
   .flatpickr-calendar.inline {
     position: relative;
-    top: convert.to-rem(2px);
     display: block;
+    inset-block-start: convert.to-rem(2px);
   }
 
   .flatpickr-calendar.static {
     position: absolute;
-    top: calc(100% + 2px);
+    inset-block-start: calc(100% + 2px);
   }
 
   .flatpickr-calendar.static.open {
@@ -161,36 +161,36 @@
   }
 
   .flatpickr-calendar.hasWeeks {
-    width: auto;
+    inline-size: auto;
   }
 
   .dayContainer {
     display: flex;
-    height: convert.to-rem(246px);
     flex-wrap: wrap;
     justify-content: space-around;
     padding: 0;
+    block-size: convert.to-rem(246px);
     outline: 0;
   }
 
   .flatpickr-calendar .hasWeeks .dayContainer,
   .flatpickr-calendar .hasTime .dayContainer {
-    border-bottom: 0;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border-block-end: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
   }
 
   .flatpickr-calendar .hasWeeks .dayContainer {
-    border-left: 0;
+    border-inline-start: 0;
   }
 
   .flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
-    height: convert.to-rem(40px);
-    border-top: 1px solid #e6e6e6;
+    block-size: convert.to-rem(40px);
+    border-block-start: 1px solid #e6e6e6;
   }
 
   .flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
-    height: auto;
+    block-size: auto;
   }
 
   .flatpickr-calendar:focus {
@@ -199,17 +199,17 @@
 
   .flatpickr-months {
     display: flex;
-    width: 100%;
     justify-content: space-between;
+    inline-size: 100%;
   }
 
   .flatpickr-month {
     @include type-style('heading-compact-01');
 
     display: flex;
-    height: convert.to-rem(40px);
     align-items: center;
     background-color: transparent;
+    block-size: convert.to-rem(40px);
     color: $text-primary;
     line-height: 1;
     text-align: center;
@@ -219,13 +219,13 @@
   .flatpickr-next-month {
     z-index: 3;
     display: flex;
-    width: convert.to-rem(40px);
-    height: convert.to-rem(40px);
     align-items: center;
     justify-content: center;
     padding: 0;
+    block-size: convert.to-rem(40px);
     cursor: pointer;
     fill: $icon-primary;
+    inline-size: convert.to-rem(40px);
     line-height: 16px;
     text-decoration: none;
     transform: scale(1, 1) #{'/*rtl: scale(-1,1)*/'};
@@ -258,15 +258,15 @@
     @include type-style('heading-compact-01');
 
     display: flex;
-    height: convert.to-rem(28px);
     align-items: center;
     justify-content: center;
+    block-size: convert.to-rem(28px);
     text-align: center;
   }
 
   .flatpickr-current-month .cur-month {
-    margin-right: $spacing-02;
-    margin-left: $spacing-02;
+    margin-inline-end: $spacing-02;
+    margin-inline-start: $spacing-02;
 
     &:hover {
       background-color: $layer-hover;
@@ -275,7 +275,7 @@
 
   .numInputWrapper {
     position: relative;
-    width: convert.to-rem(60px);
+    inline-size: convert.to-rem(60px);
 
     &:hover {
       background-color: $background-hover;
@@ -284,7 +284,6 @@
 
   .numInputWrapper .numInput {
     display: inline-block;
-    width: 100%;
     padding: $spacing-02;
     border: none;
     margin: 0;
@@ -296,6 +295,7 @@
     font-family: inherit;
     font-size: inherit;
     font-weight: 600;
+    inline-size: 100%;
 
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
@@ -317,60 +317,60 @@
   }
 
   .numInputWrapper .arrowUp {
-    top: convert.to-rem(4px);
-    border-bottom: 0;
+    border-block-end: 0;
+    inset-block-start: convert.to-rem(4px);
 
     &::after {
-      border-bottom: convert.to-rem(4px) solid $icon-primary;
+      border-block-end: convert.to-rem(4px) solid $icon-primary;
     }
   }
 
   .numInputWrapper .arrowDown {
-    top: convert.to-rem(11px);
+    inset-block-start: convert.to-rem(11px);
 
     &::after {
-      border-top: convert.to-rem(4px) solid $icon-primary;
+      border-block-start: convert.to-rem(4px) solid $icon-primary;
     }
   }
 
   .numInputWrapper .arrowUp,
   .numInputWrapper .arrowDown {
     position: absolute;
-    left: 2.6rem;
-    width: convert.to-rem(12px);
-    height: 50%;
     padding: 0 convert.to-rem(4px) 0 convert.to-rem(2px);
     border: none;
+    block-size: 50%;
     cursor: pointer;
+    inline-size: convert.to-rem(12px);
+    inset-inline-start: 2.6rem;
     line-height: 50%;
     opacity: 0;
 
     &::after {
       position: absolute;
-      top: 33%;
       display: block;
-      border-right: convert.to-rem(4px) solid transparent;
-      border-left: convert.to-rem(4px) solid transparent;
+      border-inline-end: convert.to-rem(4px) solid transparent;
+      border-inline-start: convert.to-rem(4px) solid transparent;
       content: '';
+      inset-block-start: 33%;
     }
 
     &:hover::after {
-      border-top-color: $button-primary;
-      border-bottom-color: $button-primary;
+      border-block-end-color: $button-primary;
+      border-block-start-color: $button-primary;
     }
 
     &:active::after {
-      border-top-color: $border-interactive;
-      border-bottom-color: $border-interactive;
+      border-block-end-color: $border-interactive;
+      border-block-start-color: $border-interactive;
     }
   }
 
   .numInput[disabled] ~ .arrowUp::after {
-    border-bottom-color: $text-disabled;
+    border-block-end-color: $text-disabled;
   }
 
   .numInput[disabled] ~ .arrowDown::after {
-    border-top-color: $text-disabled;
+    border-block-start-color: $text-disabled;
   }
 
   .numInputWrapper:hover .arrowUp,
@@ -385,13 +385,13 @@
 
   .flatpickr-weekdays {
     display: flex;
-    height: convert.to-rem(40px);
     align-items: center;
+    block-size: convert.to-rem(40px);
   }
 
   .flatpickr-weekdaycontainer {
     display: flex;
-    width: 100%;
+    inline-size: 100%;
   }
 
   .flatpickr-weekday {
@@ -436,12 +436,12 @@
     @include type-style('body-compact-01');
 
     display: flex;
-    width: convert.to-rem(40px);
-    height: convert.to-rem(40px);
     align-items: center;
     justify-content: center;
+    block-size: convert.to-rem(40px);
     color: $text-primary;
     cursor: pointer;
+    inline-size: convert.to-rem(40px);
     transition: all $duration-fast-01 motion(standard, productive);
 
     &:hover {
@@ -467,13 +467,13 @@
 
     &::after {
       position: absolute;
-      bottom: convert.to-rem(7px);
-      left: 50%;
       display: block;
-      width: convert.to-rem(4px);
-      height: convert.to-rem(4px);
       background-color: $link-primary;
+      block-size: convert.to-rem(4px);
       content: '';
+      inline-size: convert.to-rem(4px);
+      inset-block-end: convert.to-rem(7px);
+      inset-inline-start: 50%;
       transform: translateX(-50%);
     }
   }