Merge pull request #456 from picturepan2/0.5.3 v0.5.3

0.5.3

9 files changed, 150 insertions, 27 deletions

diff --git a/docs/src/contents/_ad-c.pug b/docs/src/contents/_ad-c.pug
index f331444..79b3e2c 100644
--- a/docs/src/contents/_ad-c.pug
+++ b/docs/src/contents/_ad-c.pug
@@ -1,3 +1,3 @@
 block ad-carbons
   .docs-ad.docs-ad-sidebar.text-center
-    script#_carbonads_js(async="" type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio")
\ No newline at end of file
+    script#_carbonads_js(async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&placement=picturepan2githubio")
\ No newline at end of file
diff --git a/docs/src/contents/_ad-g.pug b/docs/src/contents/_ad-g.pug
index 675430b..c227ea8 100644
--- a/docs/src/contents/_ad-g.pug
+++ b/docs/src/contents/_ad-g.pug
@@ -1,7 +1,7 @@
 block ad-adsense
   .docs-ad
     .hide-md.text-center
-      script(async='', src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
+      script(async='', src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js')
       // GitHub-lg
       ins.adsbygoogle.mx-auto(style='display:inline-block;width:728px;height:90px', data-ad-client='ca-pub-2225124559530218', data-ad-slot='9894180784')
       script.
diff --git a/docs/src/contents/avatars.pug b/docs/src/contents/avatars.pug
index 4e345c6..f4e4d22 100644
--- a/docs/src/contents/avatars.pug
+++ b/docs/src/contents/avatars.pug
@@ -68,6 +68,8 @@ pre.code(data-lang='HTML')
         <img src="img/avatar-1.png" alt="...">
         <img src="img/avatar-5.png" class="avatar-icon" alt="...">
       </figure>
+
++docs-subheading('avatars-presence', 'Avatar presence')
         
 .docs-demo.columns
   .column.col-6.col-xs-12
diff --git a/docs/src/contents/carousels.pug b/docs/src/contents/carousels.pug
index c9c0045..5d09532 100644
--- a/docs/src/contents/carousels.pug
+++ b/docs/src/contents/carousels.pug
@@ -36,4 +36,43 @@ p Carousels are slideshows for cycling images. It is built in pure CSS.
         label.nav-item.text-hide.c-hand(for="slide-1") 1
         label.nav-item.text-hide.c-hand(for="slide-2") 2
         label.nav-item.text-hide.c-hand(for="slide-3") 3
-        label.nav-item.text-hide.c-hand(for="slide-4") 4
\ No newline at end of file
+        label.nav-item.text-hide.c-hand(for="slide-4") 4
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <div class="carousel">
+        <!-- carousel locator -->
+        <input class="carousel-locator" id="slide-1" type="radio" name="carousel-radio" hidden="" checked="">
+        <input class="carousel-locator" id="slide-2" type="radio" name="carousel-radio" hidden="">
+        <input class="carousel-locator" id="slide-3" type="radio" name="carousel-radio" hidden="">
+        <input class="carousel-locator" id="slide-4" type="radio" name="carousel-radio" hidden="">
+        
+        <!-- carousel container -->
+        <div class="carousel-container">
+          <!-- carousel item -->
+          <figure class="carousel-item">
+            <label class="item-prev btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-left"></i></label>
+            <label class="item-next btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite.jpg" alt="macOS Yosemite Wallpaper">
+          </figure>
+          <figure class="carousel-item">
+            <label class="item-prev btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-left"></i></label>
+            <label class="item-next btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-yosemite-2.jpg" alt="macOS Yosemite Wallpaper">
+          </figure>
+          <figure class="carousel-item">
+            <label class="item-prev btn btn-action btn-lg" for="slide-2"><i class="icon icon-arrow-left"></i></label>
+            <label class="item-next btn btn-action btn-lg" for="slide-4"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan.jpg" alt="macOS Yosemite Wallpaper">
+          </figure>
+          <figure class="carousel-item">
+            <label class="item-prev btn btn-action btn-lg" for="slide-3"><i class="icon icon-arrow-left"></i></label>
+            <label class="item-next btn btn-action btn-lg" for="slide-1"><i class="icon icon-arrow-right"></i></label><img class="img-responsive rounded" src="img/osx-el-capitan-2.jpg" alt="macOS Yosemite Wallpaper">
+          </figure>
+        </div>
+        <!-- carousel navigation -->
+        <div class="carousel-nav">
+          <label class="nav-item text-hide c-hand" for="slide-1">1</label>
+          <label class="nav-item text-hide c-hand" for="slide-2">2</label>
+          <label class="nav-item text-hide c-hand" for="slide-3">3</label>
+          <label class="nav-item text-hide c-hand" for="slide-4">4</label>
+        </div>
+      </div>
\ No newline at end of file
diff --git a/docs/src/contents/colors.pug b/docs/src/contents/colors.pug
index fad27c9..adede92 100644
--- a/docs/src/contents/colors.pug
+++ b/docs/src/contents/colors.pug
@@ -9,6 +9,8 @@ p Color utilities are used for changing colors for text, link and background.
     p
       span.text-secondary secondary color
     p
+      span.text-dark dark color
+    p
       span.text-gray gray color
     p
       span.text-light.bg-dark.p-1.rounded light color
@@ -24,6 +26,7 @@ pre.code(data-lang='HTML')
     :highlight(lang="html")
       <span class="text-primary">primary color</span>
       <span class="text-secondary">secondary color</span>
+      <span class="text-dark">dark color</span>
       <span class="text-gray">gray color</span>
       <span class="text-light">light color</span>
       <span class="text-success">success color</span>
@@ -37,6 +40,8 @@ pre.code(data-lang='HTML')
     p
       a.text-secondary.p-1(href="#colors") secondary link
     p
+      a.text-dark.p-1(href="#colors") dark link
+    p
       a.text-gray.p-1(href="#colors") gray link
     p
       a.text-light.bg-dark.p-1.rounded(href="#colors") light link
@@ -52,6 +57,7 @@ pre.code(data-lang='HTML')
     :highlight(lang="html")
       <a class="text-primary" href="#">primary color</a>
       <a class="text-secondary" href="#">secondary color</a>
+      <a class="text-dark" href="#">dark color</a>
       <a class="text-gray" href="#">gray color</a>
       <a class="text-light" href="#">light color</a>
       <a class="text-success" href="#">success color</a>
diff --git a/docs/src/contents/cursor.pug b/docs/src/contents/cursors.pug
index ed290b8..ed290b8 100644
--- a/docs/src/contents/cursor.pug
+++ b/docs/src/contents/cursors.pug
diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
index 75c096e..e812aef 100644
--- a/docs/src/contents/forms.pug
+++ b/docs/src/contents/forms.pug
@@ -140,8 +140,67 @@ pre.code(data-lang='HTML')
         </label>
       </div>
 
+.docs-demo.columns
+  .column
+    .form-group
+      label.form-checkbox
+        input#docs-demo-checkbox(type="checkbox")
+        i.form-icon
+        |  Select all
+
+script.
+  document.getElementById("docs-demo-checkbox").indeterminate = true;
+
 p
-  | You can use #[code :indeterminate] pseudo class for indeterminate state of checkboxes.
+  | You can change checkbox to indeterminate state by setting the #[code indeterminate] property of input checkboxes to #[code true].
+
++docs-subheading('forms-inline', 'Inline forms')
+
+.docs-demo.columns
+  .column.col-6.col-xs-12
+    form
+      .form-group
+        label.form-radio.form-inline
+          input(type="radio" name="gender" checked="")
+          i.form-icon
+          |  Male
+        label.form-radio.form-inline
+          input(type="radio" name="gender")
+          i.form-icon
+          |  Female
+      .form-group
+        label.form-checkbox.form-inline
+          input(type="checkbox")
+          i.form-icon
+          |  Checkbox 1
+        label.form-checkbox.form-inline
+          input(type="checkbox" checked="")
+          i.form-icon
+          |  Checkbox 2
+
+p
+  | You can add the #[code form-inline] class to the form components to make them inline in one row.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <div class="form-group">
+        <label class="form-radio form-inline">
+          <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
+        </label>
+        <label class="form-radio form-inline">
+          <input type="radio" name="gender"><i class="form-icon"></i> Female
+        </label>
+      </div>
+
+      <div class="form-group">
+        <label class="form-checkbox form-inline">
+          <input type="checkbox"><i class="form-icon"></i> Checkbox 1
+        </label>
+        <label class="form-checkbox form-inline">
+          <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
+        </label>
+      </div>
 
 +docs-subheading('forms-horizontal', 'Horizontal forms')
 
@@ -447,10 +506,6 @@ pre.code(data-lang='HTML')
 
 +docs-subheading('forms-validation', 'Form validation styles')
 
-p
-  | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements.
-  | Use the #[code form-input-hint] class to provide form validation success and error messages.
-
 .docs-demo.columns
   .column.col-9.col-sm-12
     fieldset
@@ -463,10 +518,6 @@ p
         label.form-label(for="input-example-18") Password
         input#input-example-18.form-input(type="password" placeholder="Password")
         p.form-input-hint Passwords must have at least 8 characters.
-      .form-group
-        label.form-label(for="input-example-21") Email
-        input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$")
-        p.form-input-hint The Email address is unavailable.
     fieldset
       legend Select
       .form-group
@@ -505,6 +556,10 @@ p
           i.form-icon
           |  Send me emails with news and tips
 
+p
+  | To use form validation styles, you can either add #[code is-success] or #[code is-error] class to the controls or add #[code has-success] or #[code has-error] class to parent elements.
+  | Use the #[code form-input-hint] class to provide form validation success and error messages.
+
 pre.code(data-lang='HTML')
   code
     :highlight(lang="html")
@@ -532,6 +587,27 @@ pre.code(data-lang='HTML')
         </div>
       </form>
 
+.docs-demo.columns
+  .column.col-9.col-sm-12
+    .form-group
+      label.form-label(for="input-example-21") Email
+      input#input-example-21.form-input(type="text" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$")
+    .form-group
+      label.form-label(for="input-example-22") Password
+      input#input-example-22.form-input(type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$")
+
+p
+  | You can use input #[code pattern] attribute to validate the value as well.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- pattern validation example for Email -->
+      <input class="form-input" type="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$">
+
+      <!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) -->
+      <input class="form-input" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$">
+
 +docs-subheading('forms-disabled', 'Form disabled styles')
 
 p 
diff --git a/docs/src/contents/panels.pug b/docs/src/contents/panels.pug
index fdf057e..a30d75c 100644
--- a/docs/src/contents/panels.pug
+++ b/docs/src/contents/panels.pug
@@ -22,21 +22,21 @@ p Panels are flexible view container with auto-expand content section.
       .panel-body
         .tile.tile-centered
           .tile-content
-            .tile-title E-mail
+            .tile-title.text-bold E-mail
             .tile-subtitle bruce.banner@hulk.com
           .tile-action
-            button.btn.btn-link.btn-action.btn-lg
+            button.btn.btn-link.btn-action.btn-lg.tooltip.tooltip-left(data-tooltip="Edit E-mail")
               i.icon.icon-edit
         .tile.tile-centered
           .tile-content
-            .tile-title Skype
+            .tile-title.text-bold Skype
             .tile-subtitle bruce.banner
           .tile-action
             button.btn.btn-link.btn-action.btn-lg
               i.icon.icon-edit
         .tile.tile-centered
           .tile-content
-            .tile-title Location
+            .tile-title.text-bold Location
             .tile-subtitle Dayton, Ohio
           .tile-action
             button.btn.btn-link.btn-action.btn-lg
@@ -53,7 +53,7 @@ p Panels are flexible view container with auto-expand content section.
             figure.avatar
               img(src="img/avatar-1.png" alt="Avatar")
           .tile-content
-            p.tile-title Thor Odinson
+            p.tile-title.text-bold Thor Odinson
             p.tile-subtitle
               | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
         .tile
@@ -61,13 +61,13 @@ p Panels are flexible view container with auto-expand content section.
             figure.avatar
               img(src="img/avatar-2.png" alt="Avatar")
           .tile-content
-            p.tile-title Bruce Banner
+            p.tile-title.text-bold Bruce Banner
             p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
         .tile
           .tile-icon
             figure.avatar(data-initial="TS")
           .tile-content
-            p.tile-title Tony Stark
+            p.tile-title.text-bold Tony Stark
             p.tile-subtitle
               | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
         .tile
@@ -75,14 +75,14 @@ p Panels are flexible view container with auto-expand content section.
             figure.avatar
               img(src="img/avatar-4.png" alt="Avatar")
           .tile-content
-            p.tile-title Steve Rogers
+            p.tile-title.text-bold Steve Rogers
             p.tile-subtitle The Strategic Homeland Intervention, Enforcement, and Logistics Division...
         .tile
           .tile-icon
             figure.avatar
               img(src="img/avatar-3.png" alt="Avatar")
           .tile-content
-            p.tile-title Natasha Romanoff
+            p.tile-title.text-bold Natasha Romanoff
             p.tile-subtitle
               | Earth's Mightiest Heroes joined forces to take on threats that were too big for any one hero to tackle...
       .panel-footer
diff --git a/docs/src/contents/shapes.pug b/docs/src/contents/shapes.pug
index 7abf513..c6afe85 100644
--- a/docs/src/contents/shapes.pug
+++ b/docs/src/contents/shapes.pug
@@ -2,16 +2,16 @@ p Shape utilities are used for change element shapes.
 
 .docs-demo.columns
   .column.col-6.text-center
-    .bg-primary.text-light.docs-shape.rounded.centered
-      | rounded
+    .bg-primary.text-light.docs-shape.s-rounded.centered
+      | s-rounded
   .column.col-6.text-center
-    .bg-primary.text-light.docs-shape.circle.centered
-      | circle
+    .bg-primary.text-light.docs-shape.s-circle.centered
+      | s-circle
 
 pre.code(data-lang='HTML')
   code
     :highlight(lang="html")
       <!-- rounded element -->
-      <div class="rounded"></div>
+      <div class="s-rounded"></div>
       <!-- circle element -->
-      <div class="circle"></div>
\ No newline at end of file
+      <div class="s-circle"></div>
\ No newline at end of file