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

0.5.3

13 files changed, 200 insertions, 89 deletions

diff --git a/docs/src/_docs-layout.pug b/docs/src/_docs-layout.pug
index 864e458..872b3e6 100644
--- a/docs/src/_docs-layout.pug
+++ b/docs/src/_docs-layout.pug
@@ -9,7 +9,7 @@ block content
       a.btn.btn-primary(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
     #sidebar.docs-sidebar.off-canvas-sidebar
       .docs-brand
-        a.docs-logo(href='/')
+        a.docs-logo(href='index.html')
           img(src='img/spectre-logo.svg' alt='Spectre.css CSS Framework')
           h2 SPECTRE
       .docs-nav
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
diff --git a/docs/src/index.pug b/docs/src/index.pug
index 75b28ba..58de518 100644
--- a/docs/src/index.pug
+++ b/docs/src/index.pug
@@ -9,13 +9,7 @@ block content
           h2 SPECTRE
       h1 Spectre.css
       h2
-        | A 
-        u Lightweight
-        | , 
-        u Responsive
-        |  and 
-        u Modern
-        |  CSS Framework 
+        | A #[u Lightweight], #[u Responsive] and #[u Modern] CSS Framework
       p
         a.btn.btn-primary.btn-lg.mr-2(href='getting-started.html') Docs
         a.btn.btn-primary.btn-lg(href='https://github.com/picturepan2/spectre' target='_blank') GitHub
@@ -41,9 +35,9 @@ block content
               span.card-title Modern
             .card-body
               | Elegantly designed and developed elements and components
-      .columns
-        .column.col-12
-          include contents/_ad-g.pug
+  
+  .section.section-ads.bg-gray
+    include contents/_ad-g.pug
 
   .section.section-features.bg-primary.text-light.text-center
     .container.grid-lg
@@ -84,6 +78,8 @@ block content
               | Spectre Docs experience has been completely rewritten and improved.
             .card-footer
               a.btn.btn-primary(href='getting-started.html') Explore
-  footer.section.section-footer
+  .section.section-ads.bg-gray
     include contents/_ad-c.pug
+
+  footer.section.section-footer
     include _footer.pug
\ No newline at end of file
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index fae8152..9de8074 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -148,47 +148,6 @@
     padding-top: 1rem;
   }
 
-  .docs-ad {
-    background: $bg-color;
-    border-radius: $border-radius;
-    display: block;
-    margin: 2rem 0;
-    padding: $layout-spacing;
-    position: relative;
-
-    &::before {
-      color: $gray-color;
-      content: "AD";
-      font-size: $font-size-sm;
-      position: absolute;
-      right: $layout-spacing;
-      top: $unit-h;
-    }
-
-    &.docs-ad-sidebar {
-      &::before {
-        content: none;
-      }
-    }
-  }
-
-  .carbon-wrap {
-    .carbon-img {
-      display: block;
-    }
-
-    .carbon-text {
-      color: $gray-color-dark;
-      display: block;
-      font-size: $font-size-sm;
-    }
-  }
-
-  .carbon-poweredby {
-    color: $gray-color;
-    font-size: $font-size-sm;
-  }
-
   .column {
     padding: $layout-spacing;
   }
@@ -243,18 +202,21 @@
     .hljs-comment {
       color: $gray-color;
     }
+
     .hljs-title,
     .hljs-class,
     .hljs-string {
       color: $primary-color;
     }
+
+    .hljs-name,
     .hljs-attribute,
     .hljs-variable,
     .hljs-keyword,
     .hljs-built_in {
       color: $code-color;
-      
     }
+
     .hljs-value,
     .hljs-hexcolor {
       color: lighten($body-font-color, 10%);
@@ -334,13 +296,13 @@
     }
   
     img {
-      display: inline;
+      display: inline-block;
       height: auto;
       width: 1.6rem;
     }
   
     h2 {
-      display: inline;
+      display: inline-block;
       font-size: .8rem;
       font-weight: 700;
       line-height: 1.5rem;
@@ -360,11 +322,35 @@
   }
 }
 
-.btn {
-  .feather {
-    height: 1rem;
+.docs-ad {
+  background: $bg-color;
+  border-radius: $border-radius;
+  display: block;
+  margin: 2rem 0;
+  padding: $layout-spacing;
+  position: relative;
+
+  ins {
+    line-height: 1;
     vertical-align: middle;
   }
+
+  .carbon-wrap {
+    .carbon-img {
+      display: block;
+    }
+  
+    .carbon-text {
+      color: $gray-color-dark;
+      display: block;
+      font-size: $font-size-sm;
+    }
+  }
+  
+  .carbon-poweredby {
+    color: $gray-color;
+    font-size: $font-size-sm;
+  }
 }
 
 /* Spectre Homepage style */
@@ -385,6 +371,10 @@
   }
 }
 
+.section-ads {
+  padding: 1rem .5rem;
+}
+
 .section-updates {
   padding: 4.5rem .5rem 3.5rem .5rem;
 
@@ -420,6 +410,7 @@
   h1 {
     color: $body-font-color;
     font-size: 1.6rem;
+    font-weight: 600;
     margin-bottom: 1.5rem;
   }
 
@@ -445,7 +436,8 @@
 
     .card-title {
       color: $primary-color;
-      font-size: .9rem;
+      font-size: 1rem;
+      font-weight: 700;
       margin-bottom: 0;
     }
   }
diff --git a/docs/src/utilities.pug b/docs/src/utilities.pug
index 4263420..8af2055 100644
--- a/docs/src/utilities.pug
+++ b/docs/src/utilities.pug
@@ -12,8 +12,8 @@ block docs-content
     include contents/colors.pug
     
   //- Cursor
-  +docs-heading('cursor', 'Cursor utilities')
-    include contents/cursor.pug
+  +docs-heading('cursors', 'Cursor utilities')
+    include contents/cursors.pug
 
   //- Display
   +docs-heading('display', 'Display utilities')