upgaded to bootstrap 4.0.0

kol-ton · Feb 14, 2018 · 40f2247 · 40f2247
1 parent 2429df2
commit 40f2247
Show file tree

Hide file tree

Showing 11 changed files with 6,667 additions and 75 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,5 +1,9 @@
 # Release History
 
+## 1.0.5
+
+* Upgraded to Bootstrap 4.0.0
+
 ## 1.0.4
 
 * Fixed error

diff --git a/README.md b/README.md
@@ -6,16 +6,16 @@ The *buttons* is a simple Bootstrap 4 component that extend your default Bootstr
 
 See demo here => https://haubek.github.io
 
-### Bower install
+### NPM install
 
 ```
-bower install bootstrap4c-buttons
+npm install bootstrap4c-buttons
 ```
 
 ### CSS
 
 ```
-<link href="path/to/component-buttons.css" rel="stylesheet">
+<link href="path/to/component-buttons.min.css" rel="stylesheet">
 ```
 
 ### HTML5 markup
@@ -27,7 +27,7 @@ bower install bootstrap4c-buttons
 ```
 
 ```
-<div class="btn-group btn-group-pill" data-toggle="buttons">
+<div class="btn-group btn-group-toggle btn-group-pill" data-toggle="buttons">
   <label class="btn btn-outline-secondary btn-switch-on active">
     <input type="radio" name="options" id="on" autocomplete="off" checked> On
   </label>

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "bootstrap4c-buttons",
   "description": "Bootstrap 4 Component - Buttons",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "license": "MIT",
   "authors": [
     { "name": "Martin Haubek", "email": "[email protected]", "homepage": "https://haubek.github.io" }

diff --git a/dist/css/component-buttons.css b/dist/css/component-buttons.css
@@ -3,146 +3,170 @@
  *
  *
  * Bootstrap 4 Component - Buttons
- * Version: 1.0.3
+ * Version: 1.0.5
  * Copyright (c) 2017 Martin Haubek
  *
  *
  *
  */
 .btn-xs {
-  padding: 0.125rem 0.25rem;
+  padding: 0.0625rem -0.125rem;
   font-size: 0.75rem;
   line-height: 1.25;
   border-radius: 0.0625rem; }
 
 .btn-white {
-  color: black;
+  color: #212529;
   background-color: white;
   border-color: white; }
   .btn-white:hover {
-    color: black;
-    background-color: #e6e6e6;
-    border-color: #e0e0e0; }
+    color: #212529;
+    background-color: #ccc;
+    border-color: #e6e6e6; }
   .btn-white:focus, .btn-white.focus {
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); }
   .btn-white.disabled, .btn-white:disabled {
+    color: #212529;
     background-color: white;
     border-color: white; }
-  .btn-white:active, .btn-white.active,
+  .btn-white:not(:disabled):not(.disabled):active, .btn-white:not(:disabled):not(.disabled).active,
   .show > .btn-white.dropdown-toggle {
-    color: black;
+    color: #212529;
     background-color: #e6e6e6;
-    background-image: none;
-    border-color: #e0e0e0; }
+    border-color: #dfdfdf; }
+    .btn-white:not(:disabled):not(.disabled):active:focus, .btn-white:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-white.dropdown-toggle:focus {
+      box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); }
 
 .btn-outline-white {
   color: white;
-  background-image: none;
   background-color: transparent;
+  background-image: none;
   border-color: white; }
   .btn-outline-white:hover {
-    color: #fff;
+    color: #212529;
     background-color: white;
     border-color: white; }
   .btn-outline-white:focus, .btn-outline-white.focus {
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); }
   .btn-outline-white.disabled, .btn-outline-white:disabled {
     color: white;
     background-color: transparent; }
-  .btn-outline-white:active, .btn-outline-white.active,
+  .btn-outline-white:not(:disabled):not(.disabled):active, .btn-outline-white:not(:disabled):not(.disabled).active,
   .show > .btn-outline-white.dropdown-toggle {
-    color: #fff;
+    color: #212529;
     background-color: white;
     border-color: white; }
+    .btn-outline-white:not(:disabled):not(.disabled):active:focus, .btn-outline-white:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-outline-white.dropdown-toggle:focus {
+      box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5); }
   .btn-outline-white:hover {
     color: black; }
 
 .btn-pill {
   border-radius: 10rem; }
 
 .btn-switch-on.active, .btn-switch-on:active, .btn-switch-on:focus, .btn-switch-on:hover {
-  background-color: #5cb85c !important;
+  background-color: #28a745 !important;
   color: white !important; }
 
 .btn-switch-pause.active, .btn-switch-pause:active, .btn-switch-pause:focus, .btn-switch-pause:hover {
-  background-color: #f0ad4e !important;
+  background-color: #ffc107 !important;
   color: white !important; }
 
 .btn-switch-off.active, .btn-switch-off:active, .btn-switch-off:focus, .btn-switch-off:hover {
-  background-color: #d9534f !important;
+  background-color: #dc3545 !important;
   color: white !important; }
 
 .btn-outline-switch-on.active, .btn-outline-switch-on:active, .btn-outline-switch-on:focus, .btn-outline-switch-on:hover {
-  color: #5cb85c;
-  background-image: none;
+  color: #28a745;
   background-color: transparent;
-  border-color: #5cb85c; }
+  background-image: none;
+  border-color: #28a745; }
   .btn-outline-switch-on.active:hover, .btn-outline-switch-on:active:hover, .btn-outline-switch-on:focus:hover, .btn-outline-switch-on:hover:hover {
     color: #fff;
-    background-color: #5cb85c;
-    border-color: #5cb85c; }
+    background-color: #28a745;
+    border-color: #28a745; }
   .btn-outline-switch-on.active:focus, .btn-outline-switch-on.active.focus, .btn-outline-switch-on:active:focus, .btn-outline-switch-on:active.focus, .btn-outline-switch-on:focus:focus, .btn-outline-switch-on:focus.focus, .btn-outline-switch-on:hover:focus, .btn-outline-switch-on:hover.focus {
-    box-shadow: 0 0 0 2px rgba(92, 184, 92, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); }
   .btn-outline-switch-on.active.disabled, .btn-outline-switch-on.active:disabled, .btn-outline-switch-on:active.disabled, .btn-outline-switch-on:active:disabled, .btn-outline-switch-on:focus.disabled, .btn-outline-switch-on:focus:disabled, .btn-outline-switch-on:hover.disabled, .btn-outline-switch-on:hover:disabled {
-    color: #5cb85c;
+    color: #28a745;
     background-color: transparent; }
-  .btn-outline-switch-on.active:active, .btn-outline-switch-on.active.active,
-  .show > .btn-outline-switch-on.active.dropdown-toggle, .btn-outline-switch-on:active:active, .btn-outline-switch-on:active.active,
-  .show > .btn-outline-switch-on:active.dropdown-toggle, .btn-outline-switch-on:focus:active, .btn-outline-switch-on:focus.active,
-  .show > .btn-outline-switch-on:focus.dropdown-toggle, .btn-outline-switch-on:hover:active, .btn-outline-switch-on:hover.active,
+  .btn-outline-switch-on.active:not(:disabled):not(.disabled):active, .btn-outline-switch-on.active:not(:disabled):not(.disabled).active,
+  .show > .btn-outline-switch-on.active.dropdown-toggle, .btn-outline-switch-on:active:not(:disabled):not(.disabled):active, .btn-outline-switch-on:active:not(:disabled):not(.disabled).active,
+  .show > .btn-outline-switch-on:active.dropdown-toggle, .btn-outline-switch-on:focus:not(:disabled):not(.disabled):active, .btn-outline-switch-on:focus:not(:disabled):not(.disabled).active,
+  .show > .btn-outline-switch-on:focus.dropdown-toggle, .btn-outline-switch-on:hover:not(:disabled):not(.disabled):active, .btn-outline-switch-on:hover:not(:disabled):not(.disabled).active,
   .show > .btn-outline-switch-on:hover.dropdown-toggle {
     color: #fff;
-    background-color: #5cb85c;
-    border-color: #5cb85c; }
+    background-color: #28a745;
+    border-color: #28a745; }
+    .btn-outline-switch-on.active:not(:disabled):not(.disabled):active:focus, .btn-outline-switch-on.active:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-outline-switch-on.active.dropdown-toggle:focus, .btn-outline-switch-on:active:not(:disabled):not(.disabled):active:focus, .btn-outline-switch-on:active:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-outline-switch-on:active.dropdown-toggle:focus, .btn-outline-switch-on:focus:not(:disabled):not(.disabled):active:focus, .btn-outline-switch-on:focus:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-outline-switch-on:focus.dropdown-toggle:focus, .btn-outline-switch-on:hover:not(:disabled):not(.disabled):active:focus, .btn-outline-switch-on:hover:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-outline-switch-on:hover.dropdown-toggle:focus {
+      box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5); }
 
 .btn-outline-switch-pause.active, .btn-outline-switch-pause:active, .btn-outline-switch-pause:focus, .btn-outline-switch-pause:hover {
-  color: #f0ad4e;
-  background-image: none;
+  color: #ffc107;
   background-color: transparent;
-  border-color: #f0ad4e; }
+  background-image: none;
+  border-color: #ffc107; }
   .btn-outline-switch-pause.active:hover, .btn-outline-switch-pause:active:hover, .btn-outline-switch-pause:focus:hover, .btn-outline-switch-pause:hover:hover {
-    color: #fff;
-    background-color: #f0ad4e;
-    border-color: #f0ad4e; }
+    color: #212529;
+    background-color: #ffc107;
+    border-color: #ffc107; }
   .btn-outline-switch-pause.active:focus, .btn-outline-switch-pause.active.focus, .btn-outline-switch-pause:active:focus, .btn-outline-switch-pause:active.focus, .btn-outline-switch-pause:focus:focus, .btn-outline-switch-pause:focus.focus, .btn-outline-switch-pause:hover:focus, .btn-outline-switch-pause:hover.focus {
-    box-shadow: 0 0 0 2px rgba(240, 173, 78, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); }
   .btn-outline-switch-pause.active.disabled, .btn-outline-switch-pause.active:disabled, .btn-outline-switch-pause:active.disabled, .btn-outline-switch-pause:active:disabled, .btn-outline-switch-pause:focus.disabled, .btn-outline-switch-pause:focus:disabled, .btn-outline-switch-pause:hover.disabled, .btn-outline-switch-pause:hover:disabled {
-    color: #f0ad4e;
+    color: #ffc107;
     background-color: transparent; }
-  .btn-outline-switch-pause.active:active, .btn-outline-switch-pause.active.active,
-  .show > .btn-outline-switch-pause.active.dropdown-toggle, .btn-outline-switch-pause:active:active, .btn-outline-switch-pause:active.active,
-  .show > .btn-outline-switch-pause:active.dropdown-toggle, .btn-outline-switch-pause:focus:active, .btn-outline-switch-pause:focus.active,
-  .show > .btn-outline-switch-pause:focus.dropdown-toggle, .btn-outline-switch-pause:hover:active, .btn-outline-switch-pause:hover.active,
+  .btn-outline-switch-pause.active:not(:disabled):not(.disabled):active, .btn-outline-switch-pause.active:not(:disabled):not(.disabled).active,
+  .show > .btn-outline-switch-pause.active.dropdown-toggle, .btn-outline-switch-pause:active:not(:disabled):not(.disabled):active, .btn-outline-switch-pause:active:not(:disabled):not(.disabled).active,
+  .show > .btn-outline-switch-pause:active.dropdown-toggle, .btn-outline-switch-pause:focus:not(:disabled):not(.disabled):active, .btn-outline-switch-pause:focus:not(:disabled):not(.disabled).active,
+  .show > .btn-outline-switch-pause:focus.dropdown-toggle, .btn-outline-switch-pause:hover:not(:disabled):not(.disabled):active, .btn-outline-switch-pause:hover:not(:disabled):not(.disabled).active,
   .show > .btn-outline-switch-pause:hover.dropdown-toggle {
-    color: #fff;
-    background-color: #f0ad4e;
-    border-color: #f0ad4e; }
+    color: #212529;
+    background-color: #ffc107;
+    border-color: #ffc107; }
+    .btn-outline-switch-pause.active:not(:disabled):not(.disabled):active:focus, .btn-outline-switch-pause.active:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-outline-switch-pause.active.dropdown-toggle:focus, .btn-outline-switch-pause:active:not(:disabled):not(.disabled):active:focus, .btn-outline-switch-pause:active:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-outline-switch-pause:active.dropdown-toggle:focus, .btn-outline-switch-pause:focus:not(:disabled):not(.disabled):active:focus, .btn-outline-switch-pause:focus:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-outline-switch-pause:focus.dropdown-toggle:focus, .btn-outline-switch-pause:hover:not(:disabled):not(.disabled):active:focus, .btn-outline-switch-pause:hover:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-outline-switch-pause:hover.dropdown-toggle:focus {
+      box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5); }
 
 .btn-outline-switch-off.active, .btn-outline-switch-off:active, .btn-outline-switch-off:focus, .btn-outline-switch-off:hover {
-  color: #d9534f;
-  background-image: none;
+  color: #dc3545;
   background-color: transparent;
-  border-color: #d9534f; }
+  background-image: none;
+  border-color: #dc3545; }
   .btn-outline-switch-off.active:hover, .btn-outline-switch-off:active:hover, .btn-outline-switch-off:focus:hover, .btn-outline-switch-off:hover:hover {
     color: #fff;
-    background-color: #d9534f;
-    border-color: #d9534f; }
+    background-color: #dc3545;
+    border-color: #dc3545; }
   .btn-outline-switch-off.active:focus, .btn-outline-switch-off.active.focus, .btn-outline-switch-off:active:focus, .btn-outline-switch-off:active.focus, .btn-outline-switch-off:focus:focus, .btn-outline-switch-off:focus.focus, .btn-outline-switch-off:hover:focus, .btn-outline-switch-off:hover.focus {
-    box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); }
   .btn-outline-switch-off.active.disabled, .btn-outline-switch-off.active:disabled, .btn-outline-switch-off:active.disabled, .btn-outline-switch-off:active:disabled, .btn-outline-switch-off:focus.disabled, .btn-outline-switch-off:focus:disabled, .btn-outline-switch-off:hover.disabled, .btn-outline-switch-off:hover:disabled {
-    color: #d9534f;
+    color: #dc3545;
     background-color: transparent; }
-  .btn-outline-switch-off.active:active, .btn-outline-switch-off.active.active,
-  .show > .btn-outline-switch-off.active.dropdown-toggle, .btn-outline-switch-off:active:active, .btn-outline-switch-off:active.active,
-  .show > .btn-outline-switch-off:active.dropdown-toggle, .btn-outline-switch-off:focus:active, .btn-outline-switch-off:focus.active,
-  .show > .btn-outline-switch-off:focus.dropdown-toggle, .btn-outline-switch-off:hover:active, .btn-outline-switch-off:hover.active,
+  .btn-outline-switch-off.active:not(:disabled):not(.disabled):active, .btn-outline-switch-off.active:not(:disabled):not(.disabled).active,
+  .show > .btn-outline-switch-off.active.dropdown-toggle, .btn-outline-switch-off:active:not(:disabled):not(.disabled):active, .btn-outline-switch-off:active:not(:disabled):not(.disabled).active,
+  .show > .btn-outline-switch-off:active.dropdown-toggle, .btn-outline-switch-off:focus:not(:disabled):not(.disabled):active, .btn-outline-switch-off:focus:not(:disabled):not(.disabled).active,
+  .show > .btn-outline-switch-off:focus.dropdown-toggle, .btn-outline-switch-off:hover:not(:disabled):not(.disabled):active, .btn-outline-switch-off:hover:not(:disabled):not(.disabled).active,
   .show > .btn-outline-switch-off:hover.dropdown-toggle {
     color: #fff;
-    background-color: #d9534f;
-    border-color: #d9534f; }
+    background-color: #dc3545;
+    border-color: #dc3545; }
+    .btn-outline-switch-off.active:not(:disabled):not(.disabled):active:focus, .btn-outline-switch-off.active:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-outline-switch-off.active.dropdown-toggle:focus, .btn-outline-switch-off:active:not(:disabled):not(.disabled):active:focus, .btn-outline-switch-off:active:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-outline-switch-off:active.dropdown-toggle:focus, .btn-outline-switch-off:focus:not(:disabled):not(.disabled):active:focus, .btn-outline-switch-off:focus:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-outline-switch-off:focus.dropdown-toggle:focus, .btn-outline-switch-off:hover:not(:disabled):not(.disabled):active:focus, .btn-outline-switch-off:hover:not(:disabled):not(.disabled).active:focus,
+    .show > .btn-outline-switch-off:hover.dropdown-toggle:focus {
+      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5); }
 
 .btn-group-xs > .btn {
-  padding: 0.125rem 0.25rem;
+  padding: 0.0625rem -0.125rem;
   font-size: 0.75rem;
   line-height: 1.25;
   border-radius: 0.0625rem; }