Adding less for bootstrap v3 (#5)

* Adding less for bootstrap v3

Author: andreivictor

Gruntfile.js

@@ -1,6 +1,7 @@
 module.exports = function(grunt) {
   const projectMap = require('./grunt/project-map.js');
   const sassConfig = require('./grunt/sass');
+  const lessConfig = require('./grunt/less');
   const eslintConfig = require('./grunt/eslint');
   const copyConfig = require('./grunt/copy');
   const uglifyConfig = require('./grunt/uglify');
@@ -20,6 +21,7 @@ module.exports = function(grunt) {
       filename : 'bootstrap-tooltip-custom-class'
     },
     sass: sassConfig,
+    less: lessConfig,
     eslint: eslintConfig,
     copy: copyConfig,
     uglify: uglifyConfig,
@@ -28,6 +30,7 @@ module.exports = function(grunt) {
   });
 
   grunt.loadNpmTasks('grunt-sass');
+  grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-clean');

README.md

@@ -32,7 +32,18 @@ Include `bootstrap-tooltip-custom-class.css` in your project or use the `.scss`
 Use the mixin `tooltip-custom` to create styles for your custom tooltip:
 ````sass
 .tooltip-custom {
-  @include tooltip-custom(#f2653c);
+  @include tooltip-custom(#f2653c, #fff);
+}
+````
+
+#### Less (only for Bootstrap v3):
+```less
+@import "bootstrap-tooltip-custom-class.less";
+```
+Use the mixin `tooltip-custom`:
+````less
+.tooltip-custom {
+  .tooltip-custom(#f2653c, #fff);
 }
 ````
 

bootstrap-v3/package-lock.json

@@ -0,0 +1,3 @@
+@import "variables.less";
+@import "mixin.less";
+@import "tooltips.less";

bootstrap-v3/src/less/bootstrap-tooltip-custom-class.less

@@ -0,0 +1,2 @@
+@import "../../node_modules/bootstrap/less/variables.less";
+@import "bootstrap-tooltip-custom-class.less";

bootstrap-v3/src/less/main.less

@@ -0,0 +1,28 @@
+//== Tooltip Custom Mixin
+//
+//##
+
+.tooltip-custom(@bg-color, @color) {
+
+  .tooltip-inner {
+    background-color: @bg-color;
+    color: @color;
+  }
+
+  &.top .tooltip-arrow {
+    border-top-color: @bg-color;
+  }
+
+  &.right .tooltip-arrow {
+    border-right-color: @bg-color;
+  }
+
+  &.left .tooltip-arrow {
+    border-left-color: @bg-color;
+  }
+
+  &.bottom .tooltip-arrow {
+    border-bottom-color: @bg-color;
+  }
+
+}

bootstrap-v3/src/less/mixin.less

@@ -0,0 +1,23 @@
+//== Styles for predefined Tooltip Custom Classes
+//
+//##
+
+.tooltip-primary {
+  .tooltip-custom(@tooltip-primary-bg, @tooltip-color);
+}
+
+.tooltip-success {
+  .tooltip-custom(@tooltip-success-bg, @tooltip-color);
+}
+
+.tooltip-info {
+  .tooltip-custom(@tooltip-info-bg, @tooltip-color);
+}
+
+.tooltip-warning {
+  .tooltip-custom(@tooltip-warning-bg, @tooltip-color);
+}
+
+.tooltip-danger {
+  .tooltip-custom(@tooltip-danger-bg, @tooltip-color);
+}

bootstrap-v3/src/less/tooltips.less

@@ -0,0 +1,15 @@
+//== Define Bootstrap variables for Tooltips
+//
+//##
+
+//
+// Tooltip primary background color
+@tooltip-primary-bg:        @brand-primary;
+// Tooltip success background color
+@tooltip-success-bg:        @brand-success;
+// Tooltip info background color
+@tooltip-info-bg:           @brand-info;
+// Tooltip warning background color
+@tooltip-warning-bg:        @brand-warning;
+// Tooltip danger background color
+@tooltip-danger-bg:         @brand-danger;

bootstrap-v3/src/less/variables.less

@@ -0,0 +1,9 @@
+let config = {
+    v3: {
+        files: {
+            'bootstrap-v3/dist/css/<%= meta.filename %>.less.css': 'bootstrap-v3/src/less/main.less'
+        }
+    }
+};
+
+module.exports = config;