First commit.

.editorconfig

@@ -0,0 +1,11 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitignore

@@ -0,0 +1,5 @@
+Thumbs.db
+.DS_Store
+/node_modules/
+npm-debug.log
+test.html

HISTORY.md

@@ -0,0 +1,5 @@
+# Release History
+
+## 1.0.0
+
+* First release

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Martin Haubek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,2 +1,49 @@
-# bootstrap4c-buttons
-Bootstrap 4 Component - Buttons
+# Bootstrap4C
+
+### buttons
+
+The *buttons* is a simple Bootstrap 4 component that extend your default Bootstrap buttons classes. The component is 100% CSS, no JavaScript.
+
+See demo here => https://haubek.github.io
+
+### Bower install
+
+```
+bower install bootstrap4c-buttons
+```
+
+### CSS
+
+```
+<link href="path/to/component-buttons.css" rel="stylesheet">
+```
+
+### HTML5 markup
+
+```
+<button type="button" class="btn btn-primary btn-pill">I'm a pill button</button>
+<button type="button" class="btn btn-white">I'm a white button</button>
+<button type="button" class="btn btn-outline-white">I'm a white outline button</button>
+```
+
+```
+<div class="btn-group 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>
+  <label class="btn btn-outline-secondary btn-switch-off">
+    <input type="radio" name="options" id="off" autocomplete="off"> Off
+  </label>
+</div>
+```
+
+```
+<div class="btn-toolbar btn-toolbar-row" role="toolbar" aria-label="A11Y">
+  <div class="btn-group btn-group-xs-6 btn-group-md-reset" role="group" aria-label="A11Y">
+    <button type="button" class="btn btn-primary btn-block">Save</button>
+  </div>
+  <div class="btn-group btn-group-xs-6 btn-group-md-reset" role="group" aria-label="A11Y">
+    <button type="button" class="btn btn-secondary btn-block">Cancel</button>
+  </div>
+</div>
+```

bower.json

@@ -0,0 +1,25 @@
+{
+  "name": "bootstrap4c-buttons",
+  "description": "Bootstrap 4 Component - Buttons",
+  "version": "1.0.0",
+  "license": "MIT",
+  "authors": [
+    { "name": "Martin Haubek", "email": "[email protected]", "homepage": "https://haubek.github.io" }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/haubek/bootstrap4c-buttons"
+  },
+  "main": [
+    "dist/css/bootstrap4c-buttons.css"
+  ],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {},
+  "devDependencies": {}
+}

dist/css/component-buttons.css

@@ -0,0 +1,218 @@
+/*
+ *
+ *
+ *
+ * Bootstrap 4 Component - Buttons
+ * Version: 1.0.0
+ * Copyright (c) 2017 Martin Haubek
+ *
+ *
+ *
+ */
+.btn-white {
+  color: black;
+  background-color: white;
+  border-color: white; }
+  .btn-white:hover {
+    color: black;
+    background-color: #e6e6e6;
+    border-color: #e0e0e0; }
+  .btn-white:focus, .btn-white.focus {
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
+  .btn-white.disabled, .btn-white:disabled {
+    background-color: white;
+    border-color: white; }
+  .btn-white:active, .btn-white.active,
+  .show > .btn-white.dropdown-toggle {
+    color: black;
+    background-color: #e6e6e6;
+    background-image: none;
+    border-color: #e0e0e0; }
+
+.btn-outline-white {
+  color: white;
+  background-image: none;
+  background-color: transparent;
+  border-color: white; }
+  .btn-outline-white:hover {
+    color: #fff;
+    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); }
+  .btn-outline-white.disabled, .btn-outline-white:disabled {
+    color: white;
+    background-color: transparent; }
+  .btn-outline-white:active, .btn-outline-white.active,
+  .show > .btn-outline-white.dropdown-toggle {
+    color: #fff;
+    background-color: white;
+    border-color: white; }
+  .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;
+  color: white !important; }
+
+.btn-switch-off.active, .btn-switch-off:active, .btn-switch-off:focus, .btn-switch-off:hover {
+  background-color: #d9534f !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;
+  background-color: transparent;
+  border-color: #5cb85c; }
+  .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; }
+  .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); }
+  .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;
+    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,
+  .show > .btn-outline-switch-on:hover.dropdown-toggle {
+    color: #fff;
+    background-color: #5cb85c;
+    border-color: #5cb85c; }
+
+.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;
+  background-color: transparent;
+  border-color: #d9534f; }
+  .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; }
+  .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); }
+  .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;
+    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,
+  .show > .btn-outline-switch-off:hover.dropdown-toggle {
+    color: #fff;
+    background-color: #d9534f;
+    border-color: #d9534f; }
+
+.btn-group-xs > .btn {
+  padding: 0.125rem 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1.25;
+  border-radius: 0.0625rem; }
+
+.btn-group-pill .btn:first-child {
+  border-top-left-radius: 5rem;
+  border-bottom-left-radius: 5rem; }
+
+.btn-group-pill .btn:last-child {
+  border-top-right-radius: 5rem;
+  border-bottom-right-radius: 5rem; }
+
+.btn-group-condensed .btn {
+  padding-right: .5rem;
+  padding-left: .5rem; }
+
+.btn-toolbar-xs {
+  height: 1.5rem;
+  margin: 0; }
+  .btn-toolbar-xs > .btn-group {
+    margin-right: .125rem;
+    margin-left: .125rem; }
+    .btn-toolbar-xs > .btn-group:first-of-type {
+      margin-left: 0; }
+    .btn-toolbar-xs > .btn-group:last-of-type {
+      margin-right: 0; }
+  .btn-toolbar-xs.btn-toolbar-offset {
+    margin-top: -1.5rem; }
+
+.btn-toolbar-sm {
+  height: 1.85rem;
+  margin: 0; }
+  .btn-toolbar-sm.btn-toolbar-offset {
+    margin-top: -2rem; }
+
+.btn-toolbar-row {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  margin-left: -.125rem;
+  margin-right: -.125rem; }
+  @media (min-width: 0) {
+    .btn-toolbar-row .btn-group-xs-3 {
+      -ms-flex: 0 0 25%;
+          flex: 0 0 25%;
+      max-width: 25%;
+      position: relative;
+      margin: 0;
+      padding-left: .125rem;
+      padding-right: .125rem; }
+    .btn-toolbar-row .btn-group-xs-4 {
+      -ms-flex: 0 0 33.33333%;
+          flex: 0 0 33.33333%;
+      max-width: 33.33333%;
+      position: relative;
+      margin: 0;
+      padding-left: .125rem;
+      padding-right: .125rem; }
+    .btn-toolbar-row .btn-group-xs-6 {
+      -ms-flex: 0 0 50%;
+          flex: 0 0 50%;
+      max-width: 50%;
+      position: relative;
+      margin: 0;
+      padding-left: .125rem;
+      padding-right: .125rem; }
+    .btn-toolbar-row .btn-group-xs-12 {
+      -ms-flex: 0 0 100%;
+          flex: 0 0 100%;
+      max-width: 100%;
+      position: relative;
+      margin: 0;
+      padding-left: .125rem;
+      padding-right: .125rem; } }
+  @media (min-width: 576px) {
+    .btn-toolbar-row .btn-group-sm-3 {
+      -ms-flex: 0 0 25%;
+          flex: 0 0 25%;
+      max-width: 25%;
+      position: relative;
+      margin: 0;
+      padding-left: .125rem;
+      padding-right: .125rem; }
+    .btn-toolbar-row .btn-group-sm-4 {
+      -ms-flex: 0 0 33.33333%;
+          flex: 0 0 33.33333%;
+      max-width: 33.33333%;
+      position: relative;
+      margin: 0;
+      padding-left: .125rem;
+      padding-right: .125rem; } }
+  @media (min-width: 768px) {
+    .btn-toolbar-row .btn-group-md-reset {
+      -ms-flex: inherit;
+          flex: inherit;
+      max-width: inherit; }
+      .btn-toolbar-row .btn-group-md-reset.pull-xs-right {
+        margin-left: auto; } }
+  @media (min-width: 992px) {
+    .btn-toolbar-row .btn-group-lg-reset {
+      -ms-flex: inherit;
+          flex: inherit;
+      max-width: inherit; }
+      .btn-toolbar-row .btn-group-lg-reset.pull-xs-right {
+        margin-left: auto; } }

gulpfile.js

@@ -0,0 +1,22 @@
+// gulp + gulp plug-ins
+var gulp                = require('gulp');
+var plumber             = require('gulp-plumber');
+var autoprefixer        = require('gulp-autoprefixer');
+var sass                = require('gulp-sass');
+var rename              = require("gulp-rename");
+var cleanCSS            = require('gulp-clean-css');
+var stripCssComments    = require('gulp-strip-css-comments');
+
+// build
+gulp.task('build', function() {
+  gulp.src(['./src/scss/build.scss'])
+    .pipe(plumber())
+    .pipe(sass())
+    .pipe(autoprefixer({browsers: ['last 2 versions']}))
+    .pipe(rename("component-buttons.css"))
+    .pipe(gulp.dest('./dist/css/'))
+    .pipe(cleanCSS({compatibility: '*'}))
+    .pipe(stripCssComments({all: true}))
+    .pipe(rename("component-buttons.min.css"))
+    .pipe(gulp.dest('./dist/css/'));
+});