feat(fn): introduce Step Input [ci visual] (#3056)

src/fn/fn-nested-button.scss

@@ -13,6 +13,7 @@ $block: #{$fn-namespace}-nested-button;
   background: transparent;
 
   [class*='sap-icon'] {
+    width: 100%;
     height: 1.125rem;
     font-size: 0.75rem;
     line-height: 1.125rem;

src/fn/fn-step-input.scss

@@ -0,0 +1,56 @@
+@import "./fn-settings";
+
+$block: #{$fn-namespace}-step-input;
+
+.#{$block} {
+  @include fn-flex();
+
+  width: 8rem;
+
+  button {
+    z-index: 6;
+    top: 0.4375rem;
+    position: absolute;
+
+    &:first-child {
+      @include fn-set-position-left(0.25rem);
+    }
+
+    &:last-child {
+      @include fn-set-position-right(0.25rem);
+    }
+  }
+
+  .#{$block}__text-field {
+    @include fn-set-paddings-x-equal(1.625rem);
+
+    text-align: right;
+    -moz-appearance: textfield;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    @include fn-rtl() {
+      text-align: left;
+    }
+
+    &.is-display {
+      @include fn-set-paddings-x-equal(0);
+
+      text-align: unset;
+    }
+  }
+
+  &.is-display {
+    button {
+      display: none;
+    }
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+}

src/fn/fundamental-next.scss

@@ -16,6 +16,7 @@
 @import "./fn-select";
 @import "./fn-shell";
 @import "./fn-slider";
+@import "./fn-step-input";
 @import "./fn-switch";
 @import "./fn-tabs";
 @import "./fn-tag";