[#111] Variabalize style, extend compatibility

README.md

@@ -100,7 +100,14 @@ $('#beverages').beverages({
 
 ### Compatibility
 
-This plugin was written to be compatible with the latest two versions of each browser. Since this was primarily developed for my own private use and I have up-to-date browsers, I discarded the need for backward compatibility. Let me know if you need it and we'll see what can be done.
+This plugin was written to be compatible with:
+
+- the latest two versions of each major browsers;
+- any browser representing more than .5% of usage worldwide;
+- Internet Explorer from version 8;
+- the latest [ESR](https://www.mozilla.org/en-US/firefox/organizations/) version of Firefox.
+
+Since this was primarily developed for my own use and I have up-to-date browsers, I did not however test the backwards compatibility. Please let me know if you notice any bug.
 
 ## Contribute/fork
 

postcss.config.js

@@ -1,5 +1,5 @@
 module.exports = {
     plugins: [
-        require('autoprefixer')({ /* ...options */ })
+        require('autoprefixer')({browsers: ['last 2 versions', '> .5%', 'Firefox ESR', 'ie >= 8']})
     ]
 };

src/scss/_mixins.scss

@@ -1,5 +1,5 @@
 @mixin clearfix() {
-  &::after {
+  &:after {
     content: "";
     display: table;
     clear: both;

src/scss/_variables.scss

@@ -9,12 +9,21 @@ $base-green: #3b7;
 $base-blue: #7bd;
 
 $border-color: shade($base-white, 20%);
+
 $button-border-color: $border-color;
 $button-bg-color: shade($base-white, 5%);
 $button-bg-active-color: $button-border-color;
 $button-padding-x: 8px;
 $button-padding-y: 2px;
 $button-margin-x: 5px;
+$button-font-size: 16px;
+$button-line-height: 1.6;
+
+$tooltip-color:shade($base-white, 80%);
+$tooltip-opacity: .85;
+$tooltip-font-size: 14px;
+$tooltip-line-height: 1.2;
+$tooltip-width: 160px;
 
 $bev-icon-back-color: #666;
 

src/scss/styles/_buttons.scss

@@ -14,6 +14,8 @@ button, .toggle input[type=checkbox]:empty ~ label {
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
+  font-size: $button-font-size;
+  line-height: $button-line-height;
   cursor: pointer;
   user-select: none;
   transition: all .2s ease-in-out;
@@ -61,7 +63,7 @@ button, .toggle input[type=checkbox]:empty ~ label {
     border-right: none;
   }
 
-  // IE7/8 fallback
+  // IE8 fallback
   .toggle > input[type=checkbox] ~ label {
     margin-right: 5px;
   }

src/scss/styles/_tooltips.scss

@@ -40,30 +40,30 @@
 
   //* Base styles for the tooltip's content area */
   &:after {
+    //box-sizing: content-box;
     z-index: 1000;
     padding: 8px;
-    width: 160px;
-    background-color: #000;
-    background-color: hsla(0, 0%, 20%, 0.9);
-    color: #fff;
+    width: $tooltip-width;
+    background-color: $tooltip-color; // IE8 fallback
+    background-color: transparentize($tooltip-color, 1 - $tooltip-opacity);
+    color: $base-white;
     content: attr(data-tooltip);
-    font-size: 14px;
-    line-height: 1.2;
+    font-size: $tooltip-font-size;
+    line-height: $tooltip-line-height;
   }
 
   //* Bottom tooltips only */
   &:before, &:after {
     top: 100%;
-    bottom: auto;
     left: 50%;
   }
 
   &:before {
     margin-top: -12px;
     margin-bottom: 0;
     border-top-color: transparent;
-    border-bottom-color: #000;
-    border-bottom-color: hsla(0, 0%, 20%, 0.9);
+    border-bottom-color: $tooltip-color; // IE8 fallback
+    border-bottom-color: transparentize($tooltip-color, 1 - $tooltip-opacity);
   }
 
   &:focus, &:hover {
@@ -74,6 +74,6 @@
 
   // Horizontally align top/bottom tooltips
   &:after {
-    margin-left: -80px;
+    margin-left: -($tooltip-width / 2);
   }
 }