Fix the not properly distributed custom ActionBar title and iOS buttons

Fix the iOS landscape custom ActionBar items displacement Return the thumb/-thumb classes for Listview (Playground compatibility) Make the outline button borders use accent color
NativeScript · Oct 16, 2019 · cb11bb2 · cb11bb2
1 parent d64ac3f
commit cb11bb2
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/src/scss/mixins/components/_action-bar.scss b/src/scss/mixins/components/_action-bar.scss
@@ -4,6 +4,17 @@
     #{$selectors} {
         font-size: const(btn-font-size);
 
+        @at-root .ns-ios & {
+            margin-left: 20;
+            vertical-align: stretch;
+            horizontal-align: stretch;
+        }
+
+        @at-root .ns-landscape.ns-ios & {
+            margin-left: 100;
+            padding: 0 5;
+        }
+
         #{$item-selectors} {
             android-elevation: 0;
             font-size: const(font-size);
@@ -45,7 +56,7 @@
             }
         }
 
-        > Label {
+        @at-root .ns-android & > Label {
             width: 100%;
         }
 
@@ -56,8 +67,8 @@
         }
 
         > GridLayout {
-            padding: 0 4;
             width: 100%;
+            height: 100%;
 
             > StackLayout {
                 padding: 0;
@@ -73,9 +84,13 @@
                 horizontal-align: right;
             }
 
-            @at-root .ns-android & Button {
-                padding: 12 16;
-                margin: 0;
+            @at-root .ns-android & {
+                padding: 0 4;
+
+                Button {
+                    padding: 12 16;
+                    margin: 0;
+                }
             }
         }
     }

diff --git a/src/scss/mixins/components/_button.scss b/src/scss/mixins/components/_button.scss
@@ -291,7 +291,7 @@
             #{if($compat, '&-outline', '&.-outline')}  {
                 @include colorize(
                     $background-color: background,
-                    $contrasted-border-color: accent background 20%
+                    $border-color: accent
                 );
 
                 #{if($compat, '&.btn-active, &:active', '&:active, &.-active')} {

diff --git a/src/scss/mixins/components/_list-view.scss b/src/scss/mixins/components/_list-view.scss
@@ -21,14 +21,14 @@
             }
         }
 
-        @if $compat {
-            .thumb {
-                stretch: fill;
-                width: 40;
-                height: 40;
-                margin-right: 16;
-            }
+        .thumb#{if($compat, '', ', .-thumb')} {
+            stretch: fill;
+            width: 40;
+            height: 40;
+            margin-right: 16;
+        }
 
+        @if $compat {
             .list-group-item-heading {
                 margin-bottom: 5;
             }