@carbon/styles 1.15.0 → 1.16.0-rc.0

package/scss/components/fluid-select/_fluid-select.scss

@@ -0,0 +1,158 @@
+//
+// Copyright IBM Corp. 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+//-----------------------------
+// Fluid Select
+//-----------------------------
+@use '../../config' as *;
+@use '../../motion' as *;
+@use '../../spacing' as *;
+@use '../../theme' as *;
+@use '../../utilities/convert' as *;
+@use '../../utilities/focus-outline' as *;
+@use '../select';
+
+@mixin fluid-select {
+  .#{$prefix}--select--fluid .#{$prefix}--select {
+    position: relative;
+    height: 100%;
+    background: $field;
+    transition: background-color $duration-fast-01 motion(standard, productive),
+      outline $duration-fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--select--fluid .#{$prefix}--label {
+    position: absolute;
+    z-index: 1;
+    top: rem(13px);
+    left: $spacing-05;
+    display: flex;
+    height: rem(16px);
+    align-items: center;
+    margin: 0;
+  }
+
+  .#{$prefix}--select--fluid .#{$prefix}--select-input {
+    min-height: rem(64px);
+    padding: rem(32px) $spacing-05 rem(13px);
+    outline: none;
+  }
+
+  .#{$prefix}--select--fluid .#{$prefix}--select__arrow {
+    top: auto;
+    bottom: 1rem;
+    height: 1rem;
+  }
+
+  .#{$prefix}--select--fluid .#{$prefix}--select__divider {
+    display: none;
+    transition: border-color $duration-fast-01 motion(standard, productive);
+  }
+
+  // Invalid + Warn states
+  .#{$prefix}--select--fluid .#{$prefix}--select--invalid {
+    @include focus-outline('invalid');
+
+    outline-offset: 0;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--invalid
+    .#{$prefix}--select__divider,
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--warning
+    .#{$prefix}--select__divider {
+    display: block;
+    width: calc(100% - 2rem);
+    border: none;
+    border-bottom: 1px solid $border-subtle;
+    margin: 0 1rem;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--select-input,
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--warning
+    .#{$prefix}--select-input {
+    border-bottom: 1px solid transparent;
+  }
+
+  .#{$prefix}--select--fluid .#{$prefix}--select--warning {
+    border-bottom: 1px solid $border-strong;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select-input__wrapper[data-invalid]
+    .#{$prefix}--select-input:not(:focus),
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--warning
+    .#{$prefix}--select-input:not(:focus) {
+    outline: none;
+  }
+
+  .#{$prefix}--select--fluid .#{$prefix}--form-requirement {
+    padding: $spacing-03 rem(40px) $spacing-03 $spacing-05;
+    margin: 0;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select-input__wrapper[data-invalid]:hover
+    + .#{$prefix}--select__divider,
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--warning
+    .#{$prefix}--select-input__wrapper:hover
+    + .#{$prefix}--select__divider {
+    border-color: transparent;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--invalid
+    .#{$prefix}--select__invalid-icon,
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--warning
+    .#{$prefix}--select__invalid-icon {
+    top: rem(73px);
+    right: $spacing-05;
+    pointer-events: none;
+  }
+
+  // Focus styles
+  .#{$prefix}--select--fluid .#{$prefix}--select--fluid--focus {
+    @include focus-outline('outline');
+
+    outline-offset: 0;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--fluid--focus
+    .#{$prefix}--select-input,
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--fluid--focus.#{$prefix}--select--warning {
+    border-bottom: 1px solid transparent;
+  }
+
+  // Disabled state
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--disabled
+    .#{$prefix}--toggletip-label {
+    color: $text-disabled;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--disabled
+    .#{$prefix}--toggletip-button {
+    pointer-events: none;
+  }
+
+  .#{$prefix}--select--fluid
+    .#{$prefix}--select--disabled
+    .#{$prefix}--toggletip-button
+    svg {
+    fill: $icon-disabled;
+  }
+}

package/scss/components/fluid-select/_index.scss

@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward 'fluid-select';
+@use 'fluid-select';
+
+@include fluid-select.fluid-select;

package/scss/components/number-input/_number-input.scss

@@ -51,7 +51,7 @@
     border-radius: 0;
     color: $text-primary;
     font-family: font-family('mono');
-    font-weight: 300;
+    font-weight: 400;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
 

package/scss/components/overflow-menu/_overflow-menu.scss

@@ -313,7 +313,7 @@
   .#{$prefix}--overflow-menu-options__option--disabled
     .#{$prefix}--overflow-menu-options__btn {
     color: $text-disabled;
-    pointer-events: none;
+    cursor: not-allowed;
 
     &:hover,
     &:active,