Fix node-sass not able to import variables

Some updates for RadListView page
Update CHANGELOG
Up the version

CHANGELOG.md

@@ -1,3 +1,14 @@
+<a name="2.0.22 beta"></a>
+## [2.0.22 beta](https://github.com/NativeScript/theme/compare/v2.0.21...v2.0.22) (2019-09-26)
+
+### Fixes
+
+* Added a workaround for node-sass still not getting updated to 3.6.x - to be able to import variables
+as listed in the README
+* Fix large border-radius not applied in iOS, up the small to 4pt (to differ from Android defaults) (thanks @kulikala)
+* Remove the default Image margin - not needed and confusing
+* Sync app and app-compat, some housekeeping
+
 <a name="2.0.21 beta"></a>
 ## [2.0.21 beta](https://github.com/NativeScript/theme/compare/v2.0.20...v2.0.21) (2019-09-21)
 

app/pages/radlistview.xml

@@ -10,7 +10,7 @@
       <TabViewItem.view>
         <rlv:RadListView items="{{ sampleItems }}" selectionBehavior="Press">
           <rlv:RadListView.itemTemplate>
-            <StackLayout>
+            <StackLayout class="-separator">
               <Label text="{{ title }}"/>
             </StackLayout>
           </rlv:RadListView.itemTemplate>
@@ -19,7 +19,7 @@
     </TabViewItem>
     <TabViewItem title="Thumbs">
       <TabViewItem.view>
-        <rlv:RadListView items="{{ sampleItems }}">
+        <rlv:RadListView class="-single-line-image" items="{{ sampleItems }}">
           <rlv:RadListView.itemTemplate>
             <GridLayout rows="*" columns="auto, *" class="-separator">
               <Image row="0" col="0" src="{{ image }}" class="thumb img-circle" />
@@ -31,13 +31,13 @@
     </TabViewItem>
     <TabViewItem title="Multi-line">
     <TabViewItem.view>
-      <rlv:RadListView items="{{ sampleItems }}">
+      <rlv:RadListView class="-two-lines-image" items="{{ sampleItems }}">
         <rlv:RadListView.itemTemplate>
           <GridLayout rows="auto" columns="auto, *" class="-separator">
             <Image row="0" col="0" src="{{ imagealt }}" class="thumb img-rounded" />
             <StackLayout row="0" col="1" >
-              <Label text="{{ title }}" class="list-group-item-heading" />
-              <Label text="{{ content }}" textWrap="true"  class="list-group-item-text" />
+              <Label text="{{ title }}" />
+              <Label text="{{ content }}" textWrap="true" />
             </StackLayout>
           </GridLayout>
         </rlv:RadListView.itemTemplate>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-theme-core",
-  "version": "2.0.21",
+  "version": "2.0.22",
   "description": "Telerik NativeScript Core Theme",
   "author": "Telerik <[email protected]>",
   "homepage": "https://www.nativescript.org",
@@ -28,7 +28,7 @@
     "nativescript-themes": "2.0.1",
     "nativescript-ui-autocomplete": "5.1.1",
     "nativescript-ui-sidedrawer": "7.0.2",
-    "nativescript-ui-dataform": "5.1.0",
+    "nativescript-ui-dataform": "5.1.1",
     "nativescript-ui-listview": "7.1.0",
     "tns-core-modules": "6.1.1"
   },

src/scss/_variables.scss

@@ -0,0 +1,2 @@
+// Workaround for node-sass still not getting updated to 3.6.x
+@import "./variables/index";

src/scss/core/colors/_dark.scss

@@ -55,7 +55,7 @@ $dark-colors: map-merge($dark-colors, (
     background-dark-accent: mix(transparent, dark(accent), 85%),
 
     item-active-color: mix(dark(primary), dark(background), 40%),
-    item-active-background: dark(accent),
+    item-active-background: dark(background-dark-accent),
 
     btn-color: dark(primary)
 ));

src/scss/core/colors/_light.scss

@@ -46,7 +46,7 @@ $light-colors: map-merge($light-colors, (
     background-dark-accent: mix(transparent, light(accent), 85%),
 
     item-active-color: mix(light(primary), light(background), 40%),
-    item-active-background: light(accent),
+    item-active-background: light(background-dark-accent),
 
     btn-color: light(primary)
 ));

src/scss/mixins/components/_list-view.scss

@@ -19,7 +19,6 @@
 
             Image {
                 stretch: aspectFit;
-                margin-bottom: 0;
             }
         }