Enhancement - More metro components

app/less/metro-bootstrap.less

@@ -71,4 +71,6 @@
 @import "radio.less";
 @import "labels.less";
 @import "modals.less";
-@import "navbar-side.less";
+@import "navbar-side.less";
+@import "switcher.less";
+@import "slider.less";

app/less/slider.less

@@ -0,0 +1,50 @@
+@import "variables.less";
+.metro-slider {
+  width: 100%;
+  max-width: 300px;
+  margin: 20px 0;
+
+  .slider-range {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 6px;
+    background: @slider-secondary-color;
+    outline: none;
+    border-radius: 5px;
+    transition: background 0.3s;
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: @slider-thumb-size;
+      height: @slider-thumb-size;
+      background: @slider-primary-color;
+      border: 2px solid @slider-accent-color;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: background 0.3s, transform 0.3s;
+    }
+
+    &::-moz-range-thumb {
+      width: @slider-thumb-size;
+      height: @slider-thumb-size;
+      background: @slider-primary-color;
+      border: 2px solid @slider-accent-color;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: background 0.3s, transform 0.3s;
+    }
+
+    &:hover::-webkit-slider-thumb,
+    &:hover::-moz-range-thumb {
+      background: darken(@slider-primary-color, 10%);
+      transform: scale(1.1);
+    }
+
+    &:active::-webkit-slider-thumb,
+    &:active::-moz-range-thumb {
+      background: lighten(@slider-primary-color, 10%);
+      transform: scale(1.15);
+    }
+  }
+}

app/less/switcher.less

@@ -0,0 +1,49 @@
+@import "variables.less";
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 30px;
+
+  .switch-checkbox {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .switch-label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    cursor: pointer;
+    background-color: @secondary-color;
+    border-radius: 15px;
+    transition: background-color 0.3s;
+
+    .switch-inner {
+      display: none;
+    }
+
+    .switch-slider {
+      position: absolute;
+      height: 26px;
+      width: 26px;
+      top: 2px;
+      left: 2px;
+      border-radius: 50%;
+      background-color: @accent-color;
+      transition: all 0.3s;
+    }
+  }
+
+  .switch-checkbox:checked + .switch-label {
+    background-color: @primary-color;
+
+    .switch-slider {
+      transform: translateX(30px);
+    }
+  }
+}

app/less/tiles.less

@@ -15,6 +15,7 @@
     z-index: 1;
     border: @tile-border @tile-border-bg solid;
     color: @tile-text-color;
+    position: relative;
 
 	h1, h2, h3, h4, h5, h6 { 
 		color: @tile-text-color;
@@ -43,6 +44,18 @@
     }
 
 	a:hover { text-decoration: none; }
+    .text-left{
+        position: absolute;
+        bottom: 5px;
+        left: 5px;
+        color:@gray-light
+    }
+    .text-right{
+        position: absolute;
+        bottom: 5px;
+        right: 5px;
+        color:@gray-light
+    }
 
 }
 
@@ -257,4 +270,14 @@ color:#ffffff;
 {
     height: 310px;
     width: 310px;
+}
+.tile.tile-full{
+    width: 100%;
+    height:100%
+}
+.tile.tile-h-full{
+    height: 100%;
+}
+.tile.tile-w-full{
+    width: 100%;
 }

app/less/variables.less

@@ -164,3 +164,15 @@
 
 @state-danger-bg:                @brand-danger;
 @state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
+
+//Switcher
+// -------------------------
+@primary-color: #00a2ed; // Metro Blue Color
+@secondary-color: #e6e6e6; // Light Gray
+@accent-color: #fff; // White
+@slider-primary-color: #00a2ed; // Metro Blue Color
+//Slider
+// -------------------------
+@slider-secondary-color: #e6e6e6; // Light Gray
+@slider-accent-color: #fff; // White
+@slider-thumb-size: 20px; // Size of the thumb button

dist/css/metro-bootstrap.css

@@ -6252,6 +6252,7 @@ button.close {
   z-index: 1;
   border: 4px #FFFFFF solid;
   color: #FFFFFF;
+  position: relative;
 }
 .tile h1,
 .tile h2,
@@ -6291,6 +6292,18 @@ button.close {
 .tile a:hover {
   text-decoration: none;
 }
+.tile .text-left {
+  position: absolute;
+  bottom: 5px;
+  left: 5px;
+  color: #D3D3D3;
+}
+.tile .text-right {
+  position: absolute;
+  bottom: 5px;
+  right: 5px;
+  color: #D3D3D3;
+}
 .tile img {
   border: 0;
 }
@@ -6455,6 +6468,16 @@ a.fa-links:focus {
   height: 310px;
   width: 310px;
 }
+.tile.tile-full {
+  width: 100%;
+  height: 100%;
+}
+.tile.tile-h-full {
+  height: 100%;
+}
+.tile.tile-w-full {
+  width: 100%;
+}
 .alert {
   border: none;
   color: white;
@@ -6653,3 +6676,88 @@ a.fa-links:focus {
     display: none;
   }
 }
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 30px;
+}
+.switch .switch-checkbox {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.switch .switch-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  cursor: pointer;
+  background-color: #e6e6e6;
+  border-radius: 15px;
+  transition: background-color 0.3s;
+}
+.switch .switch-label .switch-inner {
+  display: none;
+}
+.switch .switch-label .switch-slider {
+  position: absolute;
+  height: 26px;
+  width: 26px;
+  top: 2px;
+  left: 2px;
+  border-radius: 50%;
+  background-color: #fff;
+  transition: all 0.3s;
+}
+.switch .switch-checkbox:checked + .switch-label {
+  background-color: #00a2ed;
+}
+.switch .switch-checkbox:checked + .switch-label .switch-slider {
+  transform: translateX(30px);
+}
+.metro-slider {
+  width: 100%;
+  max-width: 300px;
+  margin: 20px 0;
+}
+.metro-slider .slider-range {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 6px;
+  background: #e6e6e6;
+  outline: none;
+  border-radius: 5px;
+  transition: background 0.3s;
+}
+.metro-slider .slider-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  background: #00a2ed;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background 0.3s, transform 0.3s;
+}
+.metro-slider .slider-range::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  background: #00a2ed;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background 0.3s, transform 0.3s;
+}
+.metro-slider .slider-range:hover::-webkit-slider-thumb,
+.metro-slider .slider-range:hover::-moz-range-thumb {
+  background: #007fba;
+  transform: scale(1.1);
+}
+.metro-slider .slider-range:active::-webkit-slider-thumb,
+.metro-slider .slider-range:active::-moz-range-thumb {
+  background: #21b9ff;
+  transform: scale(1.15);
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "metro-bootstrap",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "main": "./dist/css/metro-bootstrap.css",
   "keywords": ["Bootstrap", "UI", "Metro"],
   "author": "TalksLab",