Improve docs code examples

2 files changed, 18 insertions, 4 deletions

diff --git a/docs/src/contents/forms.pug b/docs/src/contents/forms.pug
index 75c096e..51cc8f8 100644
--- a/docs/src/contents/forms.pug
+++ b/docs/src/contents/forms.pug
@@ -140,8 +140,19 @@ 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-horizontal', 'Horizontal forms')
 
diff --git a/docs/src/scss/docs.scss b/docs/src/scss/docs.scss
index 715196f..9de8074 100644
--- a/docs/src/scss/docs.scss
+++ b/docs/src/scss/docs.scss
@@ -202,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%);
@@ -293,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;