add no support detection

#63

Author: soumak77

js/angular/components/common/common.js

@@ -9,6 +9,7 @@
     .directive('baSwipeClose', baSwipeClose)
     .directive('baHardToggle', baHardToggle)
     .directive('baCloseAll', baCloseAll)
+    .directive('baNoSupport', baNoSupport)
   ;
 
   baClose.$inject = ['BaseAppsApi'];
@@ -247,4 +248,21 @@
       return false;
     }
   }
+
+  baNoSupport.$inject = ['$window'];
+
+  function baNoSupport($window) {
+    var directive = {
+      restrict: 'A',
+      link: link
+    };
+
+    return directive;
+
+    function link(scope, element, attrs) {
+      if (!$window.Modernizr || $window.Modernizr.flexbox) {
+        element.remove();
+      }
+    }
+  }
 })();

scss/_includes.scss

@@ -13,6 +13,7 @@ $include-css: (
   button: true,
   button-group: true,
   card: true,
+  compatibility: true,
   coloring: true,
   extras: true,
   forms: true,

scss/base.scss

@@ -30,6 +30,7 @@
 "components/button",
 "components/button-group",
 "components/card",
+"components/compatibility",
 "components/extras",
 "components/forms",
 "components/grid",

scss/components/_compatibility.scss

@@ -0,0 +1,58 @@
+////
+/// @group compatibility
+////
+
+/// @type Color
+$nosupport-overlay: #000000 !default;
+
+/// @type Color
+$nosupport-background: $alert-color !default;
+
+/// @type Color
+$nosupport-color: isitlight($nosupport-background) !default;
+
+/// @type Number
+$nosupport-top: 15% !default;
+
+/// @type Number
+$nosupport-width: 50% !default;
+
+/// @type List
+$nosupport-font: Arial, Helvetica, sans-serif !important !default;
+
+@include exports(compatibility) {
+  div[ba-no-support] {
+  	position: absolute;
+  	top: 0;
+  	left: 0;
+  	height: 100%;
+  	width: 100%;
+  	z-index: 10000;
+  	background: $nosupport-overlay; /* fallback */
+  	background: rgba($nosupport-overlay, 0.75);
+
+  	div {
+      background: $nosupport-background;
+      color: $nosupport-color;
+      width: $nosupport-width;
+      top: $nosupport-top;
+      padding: 1%;
+      position: absolute;
+      left: 50%;
+      margin: 0 0 0 (-$nosupport-width/2); /* add negative left margin for half the width to center the div */
+      cursor: default;
+      z-index: 10001;
+      border-radius: 4px;
+      box-shadow: 0 0 5px rgba($nosupport-overlay, 0.9);
+
+  		a {
+  			color: $nosupport-color;
+  			font-weight: bold;
+  		}
+
+  		p, a {
+  			font-family: $nosupport-font;
+  		}
+  	}
+  }
+}