Resolved the select dropdown issue, Separate scss variables and update information for the custom scrollbar npm package.

Author: sunil-digicorp

components/data-table/README.md

@@ -53,8 +53,7 @@ See [the Releases section of our GitHub project](https://github.com/digicorp/pro
 
 ## License
 
-Propeller v1.1.0 (http://propeller.in)
-© 2016-2017 [Digicorp Information Systems Pvt. Ltd.](https://www.digi-corp.com/)
+Code and documentation copyright 2016-2018 [Digicorp Information Systems Pvt. Ltd.](https://www.digi-corp.com/)
 Licensed under [MIT](https://github.com/digicorp/propeller/blob/master/LICENSE)
 
 

components/data-table/changelog.md

@@ -0,0 +1,20 @@
+#Change Log
+All notable changes to this project will be documented in this file.
+`Propeller` adheres to [Semantic Versioning](http://semver.org/).
+
+--- 
+
+## [1.2.0] (05/03/2018)
+Released on Thursday, March 05, 2018. All issues associated with this milestone can be found using this [filter](https://github.com/digicorp/propeller/issues).
+
+#### Highlights
+* Added Sass variables and maps and functions to make customizing Data Table theming easier.
+* Fixed background color issue in custom-select class in Data Table.
+
+#### Added
+###### SCSS
+* [#79](https://github.com/digicorp/propeller/commit/5fdf64671f28f8437795dccee95024af1896c9b4): Added Sass variables and maps and functions to make customizing Data Table theming easier.
+
+#### Removed
+###### CSS
+* [#79](https://github.com/digicorp/propeller/commit/5fdf64671f28f8437795dccee95024af1896c9b4): Removed unnecessary images from the custom-select class in Data Table.

components/data-table/css/pmd-datatable.css

@@ -1,5 +1,5 @@
 /*!
- * Propeller v1.3.0 (http://propeller.in)
+ * Propeller v1.2.0 (http://propeller.in)
  * Copyright 2016-2018 Digicorp, Inc.
  * Licensed under MIT (http://propeller.in/LICENSE)
 */
@@ -188,6 +188,7 @@ table.dataTable {
 			padding: 0;
 			border-radius: 0;
 			height: 24px;
+			line-height: 24px;
 		}		
 	}
 	// Propeller DataTable Pagination
@@ -390,18 +391,21 @@ div.dataTables_wrapper {
 }
 .pmd-card-inverse {
 	.custom-select {
-		background: #373a3c;
+		background: transparent;
 		&::after {
-			color: #fff;
+			color: $custom-select-inverse-color;
 		}
 	};
 	div.dataTables_length {
 		select {
-			color: #fff;
+			color: $custom-select-inverse-color;
+			option {
+				color: $custom-select-option-inverse-color;
+			}
 		}
 	}
 	.custom-select-info {
-		background-color: #313131;
+		background-color: $custom-select-inverse-bg;
 		height: 64px;
 		position: absolute;
 		top: 0;
@@ -413,7 +417,10 @@ div.dataTables_wrapper {
 	table.dataTable {
 		> tbody > tr {
 			&.child {
-				background-color: #313131;
+				background-color: $child-table-inverse-bg;
+				&::hover{
+					background-color: $child-table-inverse-bg;
+				}
 			}
 		}
 	}

components/data-table/css/pmd-datatable.css.map

@@ -1,6 +1,6 @@
 {
   "name": "propellerkit-datatables",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Propeller’s data tables refers to a matrix of information, like an excel spreadsheet with columns, rows, and data. We have used Bootstrap Data table as base and customized it by applying material design principles to it.",
   "homepage": "http://propeller.in/",
   "author": "Digicorp, Inc",
@@ -15,7 +15,9 @@
   },
   "keywords": [
    "css",
+   "scss",
    "js",
+   "material design",
    "mobile-first",
    "responsive",
    "front-end",

components/data-table/css/pmd-datatable.scss

@@ -0,0 +1 @@
+@import "mixins/border-radius";

components/data-table/package.json

@@ -0,0 +1,35 @@
+// Fonts
+$font-family-sans-serif:       		Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-monospace:        		"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base:             		$font-family-sans-serif !default;
+$black: 							#000000 !default;
+$white:  							#ffffff !default;
+
+// Checkbox
+$checkbox-border-width:				0.125rem !default;
+$checkbox-border-radius:			0.125rem !default;
+$checkbox-border-color:				rgba($black,.54) !default;
+$checkbox-check-size:				0.125rem !default;
+$checkbox-check-color:				#ffffff !default;
+$checkbox-checked-bg:				#4285f4 !default;
+
+// Datatable
+$datatable-control-bg:				#ffffff !default;
+$datatable-control-color:			#31b131 !default;
+
+$datatable-checkbox-border-color:	$checkbox-border-color !default;
+$datatable-checkbox-border-radius:	$checkbox-border-radius !default;
+$datatable-checkbox-border-width: 	$checkbox-border-width !default;
+$datatable-checkbox-check-color:	$checkbox-check-color !default;
+$datatable-checkbox-check-size:		$checkbox-check-size !default;
+$datatable-checkbox-checked-bg:		$checkbox-checked-bg !default;
+$datatable-checkbox-checked-border-color: $datatable-checkbox-checked-bg !default;
+
+$datatable-active-bg:			    #edf4fd !default;
+$datatable-dark-active-bg:			#313131 !default;
+$datatable-dark-checkbox-border-color: rgba($white,.54);
+
+$custom-select-inverse-bg:			rgba($black, .84) !default;
+$custom-select-inverse-color:		$white !default;
+$child-table-inverse-bg:			rgba($black, .84) !default;
+$custom-select-option-inverse-color:rgba($black, .84) !default;	

components/data-table/scss/_mixins.scss

@@ -0,0 +1,25 @@
+// Single side border-radius
+
+@mixin border-radius($radius: $border-radius) {
+    border-radius: $radius;
+}
+
+@mixin border-top-radius($radius) {
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+    border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
+}
+
+@mixin border-bottom-radius($radius) {
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
+}
+
+@mixin border-left-radius($radius) {
+    border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
+}