Merge pull request #38 from marxjmoura/v0.7.1

v0.7.1

CHANGELOG.md

@@ -1,3 +1,15 @@
+## [v0.7.1](https://github.com/marxjmoura/admin4b/releases/tag/v0.7.1) (2018-03-17)
+### Bug fixes
+- Fix check mark for small and large radio buttons
+- Fix cross-browser border radius for some components
+- Fix toggle switch cursor on hover
+### Features
+- Change JSON attribute color in code highlight
+- Increase opacity of spinner backdrop
+- Cross-browser for display flex
+- Code refactoring for sidebar colors
+- Form responsiveness in documentation
+
 ## [v0.7.0](https://github.com/marxjmoura/admin4b/releases/tag/v0.7.0) (2018-03-13)
 ### Breaking changes
 - The text of radio button must to be stay outside of `.check-mark` (just like checkbox and switcher)

docs/index.html

@@ -176,6 +176,7 @@ <h4>
     <div id="css-setup" class="sidebar-nav-group collapse">
       <pre><code class="html">&lt;!-- link to Bootstrap CSS --&gt;
 &lt;!-- link to Font Awesome CSS --&gt;
+&lt;!-- link to Simple Line Icons CSS --&gt;
 &lt;link rel="stylesheet" href="admin4b.min.css"&gt;
 </code></pre>
     </div>

docs/pages/components/toggle-switch.html

@@ -283,27 +283,21 @@ <h3>Disabled state</h3>
     When adding the disabled boolean attribute to the <code>input</code> element, the appearance changes to reflect this state.
   </p>
   <div class="form-group">
-    <label class="switch switch-to-primary">
+    <label class="switch switch-danger">
       <input type="checkbox" checked disabled/>
       <span class="switch-slider"></span>
-    </label>
-    <label class="switch">
-      <input type="checkbox" disabled/>
-      <span class="switch-slider"></span>
+      <span class="ml-2">You can't change</span>
     </label>
   </div>
   <div class="source-code">
     <a href="#toggle-switch-disabled" data-toggle="collapse">
       <i class="fa fa-code"></i> Source code
     </a>
     <div id="toggle-switch-disabled" class="collapse">
-      <pre><code class="html">&lt;label class="switch switch-to-primary"&gt;
+      <pre><code class="html">&lt;label class="switch switch-danger"&gt;
   &lt;input type="checkbox" checked disabled/&gt;
   &lt;span class="switch-slider"&gt;&lt;/span&gt;
-&lt;/label&gt;
-&lt;label class="switch"&gt;
-  &lt;input type="checkbox" disabled/&gt;
-  &lt;span class="switch-slider"&gt;&lt;/span&gt;
+  &lt;span class="ml-2"&gt;You can't change&lt;/span&gt;
 &lt;/label&gt;
 </code></pre>
     </div>

docs/pages/forms/basic-form.html

@@ -160,21 +160,21 @@ <h3>
     Example
   </h3>
   <div class="row">
-    <div class="col col-md-4 col-lg-4">
+    <div class="col-12 col-md-4 col-lg-4">
       <div class="form-group has-error">
         <label>Name</label>
         <input type="text" class="form-control">
         <small class="text-danger">Field name is required.</small>
       </div>
     </div>
-    <div class="col col-md-4 col-lg-4">
+    <div class="col-12 col-md-4 col-lg-4">
       <div class="form-group has-error">
         <label>Email</label>
         <input type="text" class="form-control">
         <small class="text-danger">Field email is invalid.</small>
       </div>
     </div>
-    <div class="col col-md-4 col-lg-4">
+    <div class="col-12 col-md-4 col-lg-4">
       <div class="form-group">
         <label>
           Company <small class="text-secondary">(optional)</small>

gulpfile.js

@@ -1,10 +1,10 @@
-var gulp = require('gulp');
-var concat = require('gulp-concat');
-var fileinclude = require('gulp-file-include');
-var htmlextend = require('gulp-html-extend')
-var rename = require("gulp-rename");
-var sass = require('gulp-sass');
-var uglify = require('gulp-uglify');
+const gulp = require('gulp');
+const concat = require('gulp-concat');
+const fileinclude = require('gulp-file-include');
+const htmlextend = require('gulp-html-extend')
+const rename = require("gulp-rename");
+const sass = require('gulp-sass');
+const uglify = require('gulp-uglify');
 
 gulp.task('build-sass', () => {
     gulp.src('src/scss/*.scss')

package.json

@@ -1,7 +1,7 @@
 {
   "name": "admin4b",
   "title": "Admin 4B",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "homepage": "https://marxjmoura.github.io/admin4b",
   "author": "Marx JMoura",
   "license": "MIT",

src/html/includes/code-examples/components/toggle-switch/toggle-switch-disabled.html

@@ -1,8 +1,5 @@
-<label class="switch switch-to-primary">
+<label class="switch switch-danger">
   <input type="checkbox" checked disabled/>
   <span class="switch-slider"></span>
-</label>
-<label class="switch">
-  <input type="checkbox" disabled/>
-  <span class="switch-slider"></span>
+  <span class="ml-2">You can't change</span>
 </label>

src/html/includes/code-examples/get-started/css-setup.html

@@ -1,3 +1,4 @@
 <!-- link to Bootstrap CSS -->
 <!-- link to Font Awesome CSS -->
+<!-- link to Simple Line Icons CSS -->
 <link rel="stylesheet" href="admin4b.min.css">

src/html/pages/components/toggle-switch.html

@@ -126,13 +126,10 @@ <h3>Disabled state</h3>
     When adding the disabled boolean attribute to the <code>input</code> element, the appearance changes to reflect this state.
   </p>
   <div class="form-group">
-    <label class="switch switch-to-primary">
+    <label class="switch switch-danger">
       <input type="checkbox" checked disabled/>
       <span class="switch-slider"></span>
-    </label>
-    <label class="switch">
-      <input type="checkbox" disabled/>
-      <span class="switch-slider"></span>
+      <span class="ml-2">You can't change</span>
     </label>
   </div>
   <div class="source-code">

src/html/pages/forms/basic-form.html

@@ -22,21 +22,21 @@ <h3>
     Example
   </h3>
   <div class="row">
-    <div class="col col-md-4 col-lg-4">
+    <div class="col-12 col-md-4 col-lg-4">
       <div class="form-group has-error">
         <label>Name</label>
         <input type="text" class="form-control">
         <small class="text-danger">Field name is required.</small>
       </div>
     </div>
-    <div class="col col-md-4 col-lg-4">
+    <div class="col-12 col-md-4 col-lg-4">
       <div class="form-group has-error">
         <label>Email</label>
         <input type="text" class="form-control">
         <small class="text-danger">Field email is invalid.</small>
       </div>
     </div>
-    <div class="col col-md-4 col-lg-4">
+    <div class="col-12 col-md-4 col-lg-4">
       <div class="form-group">
         <label>
           Company <small class="text-secondary">(optional)</small>

src/scss/admin4b-highlight.scss

@@ -1,6 +1,6 @@
 @import 'utilities/cross-browser';
 
-@import 'palette/highlight';
+@import 'palette/highlight-colors';
 
 @import 'highlight/css';
 @import 'highlight/html';

src/scss/admin4b.scss

@@ -7,6 +7,7 @@
 @import 'layout/app';
 @import 'layout/sidebar/animations/sidebar-fade';
 @import 'layout/sidebar/animations/sidebar-slide-left';
+@import 'layout/sidebar/colors/sidebar-color';
 @import 'layout/sidebar/colors/sidebar-dark';
 @import 'layout/sidebar/colors/sidebar-light';
 @import 'layout/sidebar/sidebar-toggle';

src/scss/components/_callout.scss

@@ -5,7 +5,7 @@
   margin-bottom: 1.25rem;
   border: .0625rem solid #eee;
   border-left-width: .25rem;
-  border-radius: .25rem;
+  @include crossbrowser-border-radius(.25rem);
 
   h4
   {
@@ -22,7 +22,7 @@
 
   code
   {
-    border-radius: .25rem;
+    @include crossbrowser-border-radius(.25rem);
   }
 
   & + .callout

src/scss/components/_checkbox.scss

@@ -27,9 +27,9 @@
 
 label.checkbox
 {
-  align-items: center;
-  display: inline-flex;
   margin-bottom: 0;
+  @include crossbrowser-align-items(center);
+  @include crossbrowser-display-inline-flex();
   @include crossbrowser-user-select(none);
 
   input[type=checkbox]

src/scss/components/_label.scss

@@ -57,8 +57,8 @@ label
     line-height: 1.5;
     color: $bscolors-gray-600;
     border: .0625rem solid transparent;
-    border-radius: .25rem;
     transition: all .1s ease-in-out;
+    @include crossbrowser-border-radius(.25rem);
   }
 
   input