Try making Button sizing with padding instead of height

bundyo · bundyo · commit 36306b716421 · 2019-10-22T17:55:28.000+03:00
diff --git a/app-compat/pages/buttons.xml b/app-compat/pages/buttons.xml
@@ -13,7 +13,7 @@
             <Button text="btn btn-primary btn-ruby" class="btn btn-primary btn-ruby"/>
             <Button class="btn btn-primary">
                 <FormattedString>
-                    <Span text="{{ 'fa-twitter' | fonticon }}" class="fa nt-icon"/>
+                    <Span text="{{ 'fa-twitter' | fonticon }}" class="fa"/>
                     <Span text=" btn btn-primary with icon"/>
                 </FormattedString>
             </Button>
diff --git a/app/app-vars.css b/app/app-vars.css
@@ -7,3 +7,8 @@
 .test-variable {
     background: var(--color-grey-light);
 }
+
+.ns-root Button {
+  //font-size: 42;
+}
+
diff --git a/app/pages/buttons.xml b/app/pages/buttons.xml
@@ -12,7 +12,7 @@
             <Button text="Button.-primary.-ruby" class="-primary -ruby"/>
             <Button class="-primary">
                 <FormattedString>
-                    <Span text="{{ 'fa-twitter' | fonticon }}" class="fa nt-icon"/>
+                    <Span text="{{ 'fa-twitter' | fonticon }}" class="fa"/>
                     <Span text=" Button.-primary with icon"/>
                 </FormattedString>
             </Button>
diff --git a/src/index.js b/src/index.js
@@ -126,7 +126,7 @@ const rootModalTrap = {
 app.on(app.displayedEvent, () => {
     const root = app.getRootView();
 
-    // Bail out if no root view or root classes already set (pre 6.1).
+    // Bail out if no root view or root classes already set (since 6.1).
     if (!root || root.cssClasses.has("ns-root")) {
         // Add ns-{platform}-{sdkVersion} classes
         if (root) {
diff --git a/src/scss/mixins/_buttons.scss b/src/scss/mixins/_buttons.scss
@@ -5,15 +5,17 @@
 }
 
 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
-  padding: $padding-y $padding-x $padding-y $padding-x;
+  padding-top: $padding-y;
+  padding-left: $padding-x;
+  padding-bottom: $padding-y;
+  padding-right: $padding-x;
   font-size: $font-size;
 
   @include border-radius($border-radius);
 }
 
 @mixin button-base($padding-y, $padding-x, $margin-y, $margin-x, $font-size, $border-radius, $min-width, $height) {
   min-width: $min-width;
-  height: $height;
 
   @include button-size($padding-y, $padding-x, $font-size, $border-radius);
   @include button-margin($margin-y, $margin-x);
diff --git a/src/scss/mixins/components/_button.scss b/src/scss/mixins/components/_button.scss
@@ -4,43 +4,53 @@
     #{$selectors} {
         text-transform: none;
         border-color: transparent;
+        min-height: 36;
+        min-width: 100;
 
         @include button-base(const(btn-padding-y), const(btn-padding-x), const(btn-margin-y), const(btn-margin-x), const(btn-font-size), const(btn-radius), const(btn-min-width), const(btn-height));
 
         .ns-ios & {
-            height: const(btn-height) - 12;
             border-width: 0;
         }
 
         .ns-android & {
+            padding-top: const(btn-padding-y) + 3;
+            padding-bottom: const(btn-padding-y) + 3;
+
             margin: const(btn-margin-y) - 4 const(btn-margin-x) - 4;
         }
 
         @if $enable-rounded {
-            height: const(btn-height) - 12;
             border-width: const(border-width);
             border-color: transparent;
 
             .ns-android & {
+                padding-top: const(btn-padding-y) - 3;
+                padding-bottom: const(btn-padding-y) - 3;
+
                 margin: const(btn-margin-y) const(btn-margin-x);
             }
         }
 
         #{if($compat, '&-outline', '&.-outline')} {
-            height: const(btn-height) - 12;
             border-width: const(border-width);
 
             .ns-android & {
+                padding-top: const(btn-padding-y) - 3;
+                padding-bottom: const(btn-padding-y) - 3;
+
                 margin: const(btn-margin-y) const(btn-margin-x);
             }
         }
 
         #{if($compat, '&-rounded-sm', '&.-rounded-sm')},
         #{if($compat, '&-rounded-lg', '&.-rounded-lg')} {
-            height: const(btn-height) - 12;
             border-radius: const(border-radius-sm);
 
             .ns-android & {
+                padding-top: const(btn-padding-y) - 3;
+                padding-bottom: const(btn-padding-y) - 3;
+
                 margin: const(btn-margin-y) const(btn-margin-x);
             }
         }
diff --git a/src/scss/mixins/components/_forms.scss b/src/scss/mixins/components/_forms.scss
@@ -42,7 +42,6 @@
             horizontal-align: center;
 
             Button {
-                width: 50%;
                 margin: 5;
             }
         }
diff --git a/src/scss/variables/_index.scss b/src/scss/variables/_index.scss
@@ -23,7 +23,7 @@ $btn-font-size: $font-size + 2 !default;
 $btn-min-width: 64 !default;
 $btn-height: 52 !default;
 $btn-padding-x: 5 !default;
-$btn-padding-y: 0 !default;
+$btn-padding-y: 10 !default;
 $btn-margin-x: 16 !default;
 $btn-margin-y: 8 !default;
 $btn-radius: 0 !default;

Original file line number	Diff line number	Diff line change
`@@ -7,3 +7,8 @@`
`7`	`7`	`.test-variable {`
`8`	`8`	`background: var(--color-grey-light);`
`9`	`9`	`}`
	`10`	`+`
	`11`	`+.ns-root Button {`
	`12`	`+ //font-size: 42;`
	`13`	`+}`
	`14`	`+`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,6 @@`
`42`	`42`	`horizontal-align: center;`
`43`	`43`
`44`	`44`	`Button {`
`45`		`- width: 50%;`
`46`	`45`	`margin: 5;`
`47`	`46`	`}`
`48`	`47`	`}`