[royale-asjs] branch develop updated: jewel-tabbar: when scrolling, fix hiding scrollbar on iOS devices that was not working as expected

[carlosrovira]

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 159f99b  jewel-tabbar: when scrolling, fix hiding scrollbar on iOS 
devices that was not working as expected
159f99b is described below

commit 159f99b190efb1e1f4f4638fd76ebdef8676c5b8
Author: Carlos Rovira <carlosrov...@apache.org>
AuthorDate: Wed Apr 24 18:17:08 2019 +0200

    jewel-tabbar: when scrolling, fix hiding scrollbar on iOS devices that was 
not working as expected
---
 frameworks/projects/Jewel/src/main/resources/defaults.css  |  9 ++++++++-
 .../projects/Jewel/src/main/sass/components/_tabbar.sass   | 14 ++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css 
b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 69bc93a..06c1d71 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3487,7 +3487,13 @@ j|Snackbar {
   scrollbar-width: none;
 }
 .jewel.tabbar::-webkit-scrollbar {
-  display: none;
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  background-color: transparent;
+}
+.jewel.tabbar::-webkit-scrollbar-thumb {
+  display: none !important;
 }
 .jewel.tabbar > .content {
   display: flex;
@@ -3510,6 +3516,7 @@ j|TabBar {
 }
 
 .jewel.tabbarbutton {
+  margin: 0;
   padding: 0 24px;
   position: relative;
   display: flex;
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass 
b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
index 2234c48..708e6c3 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_tabbar.sass
@@ -31,7 +31,13 @@
         -ms-overflow-style: none  // IE 10+
         scrollbar-width: none  // Firefox
         &::-webkit-scrollbar 
-            display: none  // Safari and Chrome
+            display: none !important // Safari and Chrome
+            width: 0 !important
+            height: 0 !important
+            background-color: transparent
+
+        &::-webkit-scrollbar-thumb
+            display: none !important
 
         > .content
             display: flex
@@ -54,16 +60,16 @@ j|TabBar
     IDataProviderItemRendererMapper: 
ClassReference("org.apache.royale.jewel.beads.itemRenderers.DataItemRendererFactoryForCollectionView")
 
 // Jewel TabBarButtonItemRenderer
-// $tabbarbutton-margin: 0 !default
+$tabbarbutton-margin: 0 !default
 $tabbarbutton-padding: 0 24px !default
-$tabbarbutton-margin-height: 48px
+// $tabbarbutton-margin-height: 48px
 
 // TabBarButtonItemRenderer variables
 .jewel
     &.tabbarbutton
         // height: $tabbarbutton-margin-height
         // min-height: $tabbarbutton-margin-height
-        // margin: $tabbarbutton-margin
+        margin: $tabbarbutton-margin
         padding: $tabbarbutton-padding
         
         position: relative