fixed input

ONSdigital · Sep 18, 2024 · a1cbf4e · a1cbf4e
1 parent 36f4354
commit a1cbf4e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 18 deletions.
diff --git a/lib/render-example.js b/lib/render-example.js
@@ -16,7 +16,7 @@ export default function renderExample(templatePath, nunjucksEnvironment) {
                 {% extends 'layout/_template.njk' %}
 
                 {% block body %}
-                    <div class="ons-u-p-l">
+                    <div class="ons-u-p-xl">
                         ${data.body}
                     </div>
                 {% endblock %}

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -105,12 +105,12 @@ $button-shadow-size: 3px;
     // Small buttons
     &--small,
     &--mobile {
-        font-size: 0.9rem;
+        @extend .ons-u-fs-s;
     }
 
     &--small & {
         &__inner {
-            padding: 0.5em 0.7em;
+            padding: 0.625rem 0.75rem 0.6875rem;
             .ons-icon {
                 height: 16px;
                 width: 16px;
@@ -121,7 +121,7 @@ $button-shadow-size: 3px;
     &--small.ons-btn--ghost &,
     &--mobile & {
         &__inner {
-            padding: 0.5em 0.7em;
+            padding: 0.625rem 0.75rem 0.6875rem;
         }
     }
 

diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
@@ -21,7 +21,7 @@
     }
     &__main {
         background: var(--ons-color-header);
-        padding: 0.56rem 0;
+        padding: 0.5rem 0;
 
         &--border {
             border-bottom: 3px solid var(--ons-color-header);

diff --git a/src/scss/vars/_forms.scss b/src/scss/vars/_forms.scss
@@ -1,19 +1,17 @@
-@import '../helpers/functions';
-
-$input-radius: 3px;
-$input-padding-vertical: 0.39rem;
-$input-padding-horizontal: 0.5rem;
-$input-width: 20rem;
-$input-border-width: 1px;
+$input-radius: 3px; // unchanged
+$input-padding-vertical: 0.438rem; // adjusted from 0.39rem
+$input-padding-horizontal: 0.563rem; // adjusted from 0.5rem
+$input-width: 22.5rem; // adjusted from 20rem
+$input-border-width: 1px; // unchanged
 $input-widths: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 20, 30, 40, 50;
 // Widest character (capital W) is 1.0065rem wide
-$char-max-width: 0.9rem;
-// Widest number (4) is 0.54rem  wide
-$num-max-width: 0.54rem;
+$char-max-width: 1.013rem; // adjusted from 0.9rem
+// Widest number (4) is 0.607rem wide
+$num-max-width: 0.607rem; // adjusted from 0.54rem
 // Not the width of a space, the width of the space between characters with no spaces between
-$char-space-width: 0.029rem;
+$char-space-width: 0.033rem; // adjusted from 0.029rem
 // Space width
-$nbsp-width: 0.256rem;
+$nbsp-width: 0.288rem; // adjusted from 0.256rem
 
 @mixin input-width($class-name, $char-width: $char-max-width) {
     @each $width in $input-widths {
@@ -35,7 +33,7 @@ $nbsp-width: 0.256rem;
 }
 
 @function input-width-calc($chars: 1, $char-width: $char-max-width, $spaces: 0, $num-chars: 0) {
-    // Space between characters is 0.029rem wide
+    // Space between characters is 0.033rem wide
     // Extra 2 pixels are to prevent clipping when the cursor is visible (2px is needed for iOS)
 
     $padding-width: $input-padding-horizontal * 2;