Updated Bootstrap example styling

Author: bjorn2404

Gruntfile.js

@@ -107,7 +107,7 @@ module.exports = function (grunt) {
 			},
 			src      : {
 				files  : ['src/**/*'],
-				tasks  : ['less', 'sass', 'concat', 'uglify', 'usebanner', 'cssmin', 'handlebars'],
+				tasks  : ['less', 'sass', 'concat', 'uglify', 'usebanner', 'cssmin'],
 				options: {
 					spawn     : false,
 					livereload: true
@@ -134,7 +134,7 @@ module.exports = function (grunt) {
 	grunt.loadNpmTasks('grunt-contrib-handlebars');
 
 	// Build
-	grunt.registerTask('build', ['less', 'sass', 'concat', 'uglify', 'usebanner', 'cssmin', 'handlebars']);
+	grunt.registerTask('build', ['less', 'sass', 'concat', 'uglify', 'usebanner', 'cssmin']);
 
 	//Watch src build
 	grunt.registerTask('watchsrc', ['watch:src']);

dist/assets/css/bootstrap-example.css

@@ -15,6 +15,16 @@
 }
 .bh-sl-container {
   color: #333333;
+  /* Avoid image issues with Google Maps and CSS resets */
+  /* Avoid issues with Google Maps and CSS frameworks */
+}
+.bh-sl-container img {
+  max-width: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+}
+.bh-sl-container > * {
+  box-sizing: content-box !important;
 }
 .bh-sl-container .jumbotron {
   padding-top: 30px;
@@ -61,7 +71,7 @@
   margin-top: 27px;
 }
 .bh-sl-container .bh-sl-map-container a {
-  color: #e76737;
+  color: #005293;
   text-decoration: none;
 }
 .bh-sl-container .bh-sl-map-container a:hover,
@@ -71,6 +81,7 @@
 .bh-sl-container .bh-sl-loc-list {
   height: 530px;
   overflow-x: auto;
+  font-size: 13px;
 }
 .bh-sl-container .bh-sl-loc-list ul {
   display: block;
@@ -94,13 +105,13 @@
 .bh-sl-container .bh-sl-loc-list .list-label {
   float: left;
   margin: 10px 0 0 6px;
-  padding: 2px 3px;
-  width: 10%;
-  max-width: 25px;
+  padding: 4px;
+  width: 29px;
   text-align: center;
-  background: #451400;
+  background: #00192d;
   color: #ffffff;
   font-weight: bold;
+  border-radius: 15px;
 }
 .bh-sl-container .bh-sl-loc-list .list-details {
   float: left;
@@ -116,10 +127,10 @@
   color: #8e8e8e;
 }
 .bh-sl-container .bh-sl-loc-list .list-focus {
-  border: 1px solid rgba(150, 31, 23, 0.4);
-  -moz-box-shadow: 0 0 8px rgba(150, 31, 23, 0.4);
-  -webkit-box-shadow: 0 0 8px rgba(150, 31, 23, 0.4);
-  box-shadow: 0 0 8px rgba(150, 31, 23, 0.4);
+  border: 1px solid rgba(0, 82, 147, 0.4);
+  -moz-box-shadow: 0 0 8px rgba(0, 82, 147, 0.4);
+  -webkit-box-shadow: 0 0 8px rgba(0, 82, 147, 0.4);
+  box-shadow: 0 0 8px rgba(0, 100, 180, 0.4);
   transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
 }
 .bh-sl-container .bh-sl-loc-list .bh-sl-close-directions-container {
@@ -133,11 +144,10 @@
 }
 .bh-sl-container .bh-sl-loc-list .bh-sl-noresults-title {
   font-weight: bold;
-  color: #ae2118;
 }
 .bh-sl-container .loc-name {
   /* Picked up by both list and infowindows */
-  color: #ae2118;
+  font-size: 15px;
   font-weight: bold;
 }
 .bh-sl-container .bh-sl-map {
@@ -157,8 +167,7 @@
   padding: 10px;
   cursor: pointer;
   font: bold 14px Arial, Helvetica, sans-serif;
-  color: #ae2118;
-  text-decoration: underline;
+  color: #005293;
 }
 .bh-sl-container .bh-sl-pagination-container ol .bh-sl-current {
   color: #333333;
@@ -168,8 +177,8 @@
 /* Modal window */
 .bh-sl-overlay {
   position: fixed;
-  left: 0px;
-  top: 0px;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
   z-index: 10000;
@@ -182,28 +191,58 @@
   /* width divided by 2 */
   margin-top: 60px;
   width: 920px;
-  height: 590px;
+  height: 620px;
   z-index: 10010;
   background: #ffffff;
   border-radius: 10px;
   box-shadow: 0 0 10px #656565;
 }
+.bh-sl-overlay .bh-sl-modal-window .bh-sl-map-container {
+  margin-top: 50px;
+  /* increase map container margin */
+}
 .bh-sl-overlay .bh-sl-modal-window .bh-sl-modal-content {
   float: left;
   padding: 0 22px;
   /* there's already a margin on the top of the map-container div */
 }
 .bh-sl-overlay .bh-sl-modal-window .bh-sl-close-icon {
-  top: -6px;
-  right: -6px;
+  top: 13px;
+  right: 22px;
 }
 .bh-sl-close-icon {
   position: absolute;
-  width: 18px;
-  height: 18px;
   cursor: pointer;
-  background: #2c2c2c url(../img/close-icon.png) 3px 3px no-repeat;
-  border: 1px solid #000000;
-  border-radius: 3px;
-  box-shadow: 0 0 3px #656565;
+  height: 24px;
+  width: 24px;
+}
+.bh-sl-close-icon:after,
+.bh-sl-close-icon:before {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  bottom: 0;
+  left: 50%;
+  background: #cccccc;
+  content: '';
+  display: block;
+  height: 24px;
+  margin: -3px 0 0 -1px;
+  width: 3px;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+.bh-sl-close-icon:hover:after,
+.bh-sl-close-icon:hover:before {
+  background: #b3b3b3;
+}
+.bh-sl-close-icon:before {
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg);
 }

dist/assets/css/bootstrap-example.min.css

@@ -22,7 +22,15 @@
   margin-left: 20px;
   width: 875px;
   font: normal 14px/20px Arial, Helvetica, sans-serif;
-  color: #555555; }
+  color: #555555;
+  /* Avoid image issues with Google Maps and CSS resets */
+  /* Avoid issues with Google Maps and CSS frameworks */ }
+  .bh-sl-container img {
+    max-width: none !important;
+    border-radius: 0 !important;
+    box-shadow: none !important; }
+  .bh-sl-container > * {
+    box-sizing: content-box !important; }
   .bh-sl-container .bh-sl-form-container {
     clear: left;
     float: left;