Convert less to use bootstrap variables and mixins

.gitignore

@@ -1,3 +1,4 @@
 nbproject
 node_modules
+bower_components
 /vendor/

dist/css/bootstrap-dialog.css

@@ -24,17 +24,13 @@
 .bootstrap-dialog .bootstrap-dialog-close-button {
   font-size: 20px;
   float: right;
-  filter: alpha(opacity=90);
-  -moz-opacity: 0.9;
-  -khtml-opacity: 0.9;
   opacity: 0.9;
+  filter: alpha(opacity=90);
 }
 .bootstrap-dialog .bootstrap-dialog-close-button:hover {
   cursor: pointer;
-  filter: alpha(opacity=100);
-  -moz-opacity: 1;
-  -khtml-opacity: 1;
   opacity: 1;
+  filter: alpha(opacity=100);
 }
 .bootstrap-dialog.type-default .modal-header {
   background-color: #fff;
@@ -46,7 +42,7 @@
   background-color: #5bc0de;
 }
 .bootstrap-dialog.type-primary .modal-header {
-  background-color: #428bca;
+  background-color: #337ab7;
 }
 .bootstrap-dialog.type-success .modal-header {
   background-color: #5cb85c;

dist/less/bootstrap-dialog.less

@@ -1,138 +0,0 @@
-.bootstrap-dialog {
-
-    .modal-header {
-        border-top-left-radius: 4px;
-        border-top-right-radius: 4px;
-    }
-    .bootstrap-dialog-title {
-        color: #fff;
-        display: inline-block;
-        font-size: 16px;
-    }
-    .bootstrap-dialog-message {
-        font-size: 14px;
-    }
-    .bootstrap-dialog-button-icon {
-        margin-right: 3px;
-    }
-    .bootstrap-dialog-close-button {
-        font-size: 20px;
-        float: right;
-        filter:alpha(opacity=90);
-        -moz-opacity:0.9;
-        -khtml-opacity: 0.9;
-        opacity: 0.9;
-        &:hover {
-            cursor: pointer;
-            filter: alpha(opacity=100);
-            -moz-opacity: 1;
-            -khtml-opacity: 1;
-            opacity: 1;
-        }
-    }
-
-    /* dialog types */
-    &.type-default {
-        .modal-header {
-            background-color: #fff;
-        }
-        .bootstrap-dialog-title {
-            color: #333;
-        }
-    }
-
-    &.type-info {
-        .modal-header {
-            background-color: #5bc0de;
-        }
-    }
-
-    &.type-primary {
-        .modal-header {
-            background-color: #428bca;
-        }
-    }
-
-    &.type-success {
-        .modal-header {
-            background-color: #5cb85c;
-        }
-    }
-
-    &.type-warning {
-        .modal-header {
-            background-color: #f0ad4e;
-        }
-    }
-
-    &.type-danger {
-        .modal-header {
-            background-color: #d9534f;
-        }
-    }
-
-    &.size-large {
-        .bootstrap-dialog-title {
-            font-size: 24px;
-        }
-        .bootstrap-dialog-close-button {
-            font-size: 30px;
-        }
-        .bootstrap-dialog-message {
-            font-size: 18px;
-        }
-    }
-
-    /**
-     * Icon animation
-     * Copied from font-awesome: http://fontawesome.io/
-     **/
-    .icon-spin {
-        display: inline-block;
-        -moz-animation: spin 2s infinite linear;
-        -o-animation: spin 2s infinite linear;
-        -webkit-animation: spin 2s infinite linear;
-        animation: spin 2s infinite linear;
-    }
-    @-moz-keyframes spin {
-        0% {
-            -moz-transform: rotate(0deg);
-        }
-        100% {
-            -moz-transform: rotate(359deg);
-        }
-    }
-    @-webkit-keyframes spin {
-        0% {
-            -webkit-transform: rotate(0deg);
-        }
-        100% {
-            -webkit-transform: rotate(359deg);
-        }
-    }
-    @-o-keyframes spin {
-        0% {
-            -o-transform: rotate(0deg);
-        }
-        100% {
-            -o-transform: rotate(359deg);
-        }
-    }
-    @-ms-keyframes spin {
-        0% {
-            -ms-transform: rotate(0deg);
-        }
-        100% {
-            -ms-transform: rotate(359deg);
-        }
-    }
-    @keyframes spin {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(359deg);
-        }
-    }
-    /** End of icon animation **/
-}

gulpfile.js

@@ -10,15 +10,19 @@ var gulp = require("gulp"),
   notify = require("gulp-notify"),
   clean = require("gulp-clean"),
   rename = require("gulp-rename"),
+  concat = require("gulp-concat"),
   uglify = require("gulp-uglify");
 
+var less_src = [
+  "node_modules/bootstrap/less/variables.less", 
+  "node_modules/bootstrap/less/mixins/*.less",
+  "src/less/bootstrap-dialog.less"
+];
 
 gulp.task("less", function() {
-  gulp.src("src/less/bootstrap-dialog.less")
-    .pipe(gulp.dest("dist/less"))
-    .pipe(less({
-      paths: [path.join(__dirname, "less", "includes")]
-    }))
+  gulp.src(less_src)
+    .pipe(concat("bootstrap-dialog.less"))
+    .pipe(less())
     .pipe(gulp.dest("dist/css"))
     .pipe(gulp.dest("src/css"))
     .pipe(rename("bootstrap-dialog.min.css"))

package.json

@@ -24,9 +24,11 @@
   },
   "homepage": "http://nakupanda.github.io/bootstrap3-dialog",
   "devDependencies": {
+    "bootstrap": ">=3.1.0",
     "eslint": ">=0.6.2",
     "gulp": ">=3.8.1",
     "gulp-clean": ">=0.3.0",
+    "gulp-concat": "^2.5.2",
     "gulp-eslint": ">=0.1.7",
     "gulp-less": ">=1.2.3",
     "gulp-minify-css": "^0.3.4",

src/css/bootstrap-dialog.css

@@ -24,17 +24,13 @@
 .bootstrap-dialog .bootstrap-dialog-close-button {
   font-size: 20px;
   float: right;
-  filter: alpha(opacity=90);
-  -moz-opacity: 0.9;
-  -khtml-opacity: 0.9;
   opacity: 0.9;
+  filter: alpha(opacity=90);
 }
 .bootstrap-dialog .bootstrap-dialog-close-button:hover {
   cursor: pointer;
-  filter: alpha(opacity=100);
-  -moz-opacity: 1;
-  -khtml-opacity: 1;
   opacity: 1;
+  filter: alpha(opacity=100);
 }
 .bootstrap-dialog.type-default .modal-header {
   background-color: #fff;
@@ -46,7 +42,7 @@
   background-color: #5bc0de;
 }
 .bootstrap-dialog.type-primary .modal-header {
-  background-color: #428bca;
+  background-color: #337ab7;
 }
 .bootstrap-dialog.type-success .modal-header {
   background-color: #5cb85c;

src/less/bootstrap-dialog.less

@@ -18,23 +18,17 @@
     .bootstrap-dialog-close-button {
         font-size: 20px;
         float: right;
-        filter:alpha(opacity=90);
-        -moz-opacity:0.9;
-        -khtml-opacity: 0.9;
-        opacity: 0.9;
+        .opacity(0.9);
         &:hover {
             cursor: pointer;
-            filter: alpha(opacity=100);
-            -moz-opacity: 1;
-            -khtml-opacity: 1;
-            opacity: 1;
+            .opacity(1.0);
         }
     }
 
     /* dialog types */
     &.type-default {
         .modal-header {
-            background-color: #fff;
+            background-color: @modal-content-bg;
         }
         .bootstrap-dialog-title {
             color: #333;
@@ -43,31 +37,31 @@
 
     &.type-info {
         .modal-header {
-            background-color: #5bc0de;
+            background-color: @brand-info;
         }
     }
 
     &.type-primary {
         .modal-header {
-            background-color: #428bca;
+            background-color: @brand-primary;
         }
     }
 
     &.type-success {
         .modal-header {
-            background-color: #5cb85c;
+            background-color: @brand-success;
         }
     }
 
     &.type-warning {
         .modal-header {
-            background-color: #f0ad4e;
+            background-color: @brand-warning;
         }
     }
 
     &.type-danger {
         .modal-header {
-            background-color: #d9534f;
+            background-color: @brand-danger;
         }
     }