form elements UI fixes

js/tabler.js

@@ -42,8 +42,17 @@ $(document).ready(function () {
 		return false;
 	});
 
-	// $('[data-toggle="tooltip"]').tooltip();
+	$('[data-toggle="tooltip"]').tooltip();
-	// $('[data-toggle="popover"]').popover();
+
+	/*
+	Popover
+	 */
+	var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
+	var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+		return new bootstrap.Popover(popoverTriggerEl, {
+			autoHide: true
+		})
+	});
 
 	/*
 	  CountUp

pages/_docs/form-elements.md

@@ -66,7 +66,7 @@ bootstrap-link: components/forms/
 ### Textarea
 {% example %}
 <div class="mb-2">
-   <label class="form-label">Textarea <span class="float-right text-muted">56/100</span></label>
+   <label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
    <textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
 </div>
 {% endexample %}

pages/_includes/forms/form-elements-1.html

@@ -20,7 +20,7 @@
           value="Well, how'd you become king, then?" readonly>
 </div>
 <div class="mb-3">
-   <label class="form-label">Textarea <span class="float-right text-muted">56/100</span></label>
+   <label class="form-label">Textarea <span class="form-label-description">56/100</span></label>
    <textarea class="form-control" name="example-textarea-input" rows="6" placeholder="Content..">Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!</textarea>
 </div>
 
@@ -60,7 +60,7 @@
          <input type="text" class="form-control" placeholder="Search for&hellip;">
       </div>
       <div class="col-auto align-self-center">
-         <span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>">?</span>
+         <span class="form-help" data-toggle="popover" data-placement="top" data-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href='#'>USP ZIP codes lookup tools</a></p>" data-html="true">?</span>
       </div>
    </div>
 </div>

scss/_variables.scss

@@ -46,8 +46,11 @@ $cyan: #17a2b8 !default;
 $black: #000000 !default;
 $white: #ffffff !default;
 
-$text-muted: $gray-700 !default;
+$body-bg: $light !default;
-$border-color: $gray-400 !default;
+$body-color: $dark !default;
+
+$text-muted: mix($body-color, #fff, 64%) !default;
+$border-color: rgba($body-color, .16) !default;
 $hover-bg: $gray-200 !default;
 $active-bg: rgba($blue, .06) !default;
 
@@ -58,9 +61,6 @@ $info: $azure !default;
 $warning: $yellow !default;
 $danger: $red !default;
 
-$body-bg: $light !default;
-$body-color: $dark !default;
-
 $social-colors: (
   "facebook": #3b5998,
   "twitter": #1da1f2,
@@ -264,6 +264,9 @@ $navbar-bg: $white !default;
 $navbar-height: 3.5rem !default;
 $navbar-border-color: $border-color !default;
 
+//popover
+$popover-border-color: $border-color !default;
+
 //nav
 //$nav-link-padding-y: 1rem !default;
 
@@ -333,7 +336,9 @@ $form-check-padding-left: $form-check-input-width + .5rem !default;
 $form-check-input-bg: $white !default;
 $form-check-input-border: 1px solid $border-color !default;
 $form-check-input-border-radius: $border-radius !default;
-$form-check-input-checked-bg-size: .75rem !default;
+$form-check-input-checked-bg-size: .8rem !default;
+
+$form-check-input-checked-border-color: $border-color !default;
 
 $form-switch-width: 1.75rem !default;
 $form-switch-padding-left: $form-switch-width + .5rem !default;
@@ -360,8 +365,6 @@ $payment-sizes: (
   "xl": 4rem
 ) !default;
 
-
-
 $enable-social-colors: true !default;
 $enable-ghost-buttons: true !default;
 $enable-extra-colors: true !default;

scss/tabler.scss

@@ -42,6 +42,7 @@
 @import "ui/nav";
 @import "ui/stars";
 @import "ui/pagination";
+@import "ui/popovers";
 @import "ui/progress";
 @import "ui/ribbons";
 @import "ui/stamps";

scss/ui/_forms.scss

@@ -4,6 +4,9 @@ textarea {
   }
 }
 
+/**
+Form label
+ */
 .form-label {
   font-size: $h4-font-size;
   font-weight: $font-weight-bold;
@@ -11,6 +14,17 @@ textarea {
   margin-bottom: .5rem;
 }
 
+.form-label-description {
+  float: right;
+  font-weight: $font-weight-normal;
+  color: $text-muted;
+  line-height: $line-height-base * (100%/$small-font-size);
+  font-size: $small-font-size ;
+}
+
+/**
+Form control
+ */
 .form-control {
   &:-webkit-autofill {
     box-shadow: 0 0 0 1000px #fff inset;
@@ -53,17 +67,19 @@ textarea {
 Form help
  */
 .form-help {
-  display: inline-block;
+  display: inline-flex;
-  width: 1rem;
+  font-weight: 600;
-  height: 1rem;
+  align-items: center;
-  font-size: $h5-font-size;
+  justify-content: center;
-  line-height: 1rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  font-size: .75rem;
   color: $text-muted;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  background: $gray-100;
+  background: $gray-200;
   border-radius: 50%;
   transition: .3s background-color, .3s color;
 
@@ -73,3 +89,24 @@ Form help
     background: $primary;
   }
 }
+
+/**
+Form switch
+ */
+.form-check-input {
+  color: $form-check-input-checked-bg-color;
+
+  &:checked {
+    background-color: currentColor;
+  }
+}
+
+.form-check .form-check-input:not(:checked) ~ .form-check-label {
+  color: $text-muted;
+}
+
+/**
+Input group
+ */
+.input-group-prepend .input-group-text { border-right: 0; }
+.input-group-append .input-group-text { border-left: 0; }

scss/ui/_popovers.scss

@@ -0,0 +1,2 @@
+.popover {
+}