loader inputs

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

@@ -2,7 +2,6 @@
 {% include parts/input-color.html %}
 {% include parts/input-colorpicker.html %}
 
-
 <div class="mb-3">
    <label class="form-label">Validation States</label>
    <input type="text" class="form-control is-valid mb-3" placeholder="Valid State..">
@@ -11,8 +10,7 @@
 </div>
 
 <div class="mb-3">
-	<label class="form-label">Lite validation States</label>
+	<label class="form-label">Subtle validation States</label>
 	<input type="text" class="form-control is-valid is-valid-lite mb-3" placeholder="Valid State..">
 	<input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..">
-	<div class="invalid-feedback">Invalid feedback</div>
-</div>
+</div>
\ No newline at end of file

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

+<label class="form-label">Form fieldset</label>
 {% include parts/form-fieldset.html %}
 
 {% include parts/input-selectgroups.html %}

pages/_includes/parts/input-icon.html

 <div class="mb-3">
 	<label class="form-label">Icon input</label>
 	{% include ui/form/input-icon.html class="mb-3" %}
-	{% include ui/form/input-icon.html class="mb-3" prepend=true placeholder="Username" %}
+	{% include ui/form/input-icon.html class="mb-3" icon="user" prepend=true placeholder="Username" %}
 </div>
+
+<div class="mb-3">
+	<label class="form-label">Loader input</label>
+	{% include ui/form/input-icon.html loader=true class="mb-3" %}
+	{% include ui/form/input-icon.html loader=true class="mb-3" icon="user" prepend=true placeholder="Username" %}
+</div>
\ No newline at end of file

pages/_includes/ui/form/input-icon.html

-{% assign icon = include.icon | default: 'search' %}
 {% capture addon %}
-<span class="input-icon-addon">
-	{% include ui/icon.html icon=icon %}
-</span>
+	{% if include.loader %}
+		<span class="input-icon-addon">
+			{% include ui/spinner.html class="text-muted" size="sm" %}
+		</span>
+	{% else %}
+		{% assign icon = include.icon | default: 'search' %}
+		<span class="input-icon-addon">
+			{% include ui/icon.html icon=icon %}
+		</span>
+	{% endif %}
 {% endcapture %}
 
 <div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">

pages/_includes/ui/spinner.html

 {% assign elem = include.element | default: 'div' %}
-<{{ elem }} class="spinner-{{ include.type | default: 'border' }}{% if include.color %} text-{{ include.color }}{% endif %}{% if include['size'] %} spinner-{{ include.type | default: 'border' }}-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="status">
-   <span class="sr-only">loading&hellip;</span>
-</{{ elem }}>
+<{{ elem }} class="spinner-{{ include.type | default: 'border' }}{% if include.color %} text-{{ include.color }}{% endif %}{% if include['size'] %} spinner-{{ include.type | default: 'border' }}-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="status"></{{ elem }}>

scss/_variables.scss

@@ -51,8 +51,8 @@ $white: #ffffff !default;
 $body-bg: $light !default;
 $body-color: $dark !default;
 
-$text-muted: mix($body-color, #fff, 70%) !default;
-$border-color: rgba(mix($body-color, #fff, 70%), .24) !default;
+$text-muted: mix($body-color, #fff, 64%) !default;
+$border-color: rgba(mix($body-color, #fff, 64%), .24) !default;
 
 $hover-bg: $light-white !default;
 $active-bg: rgba($blue, .06) !default;
@@ -344,8 +344,10 @@ $steps-color-inactive: #f3f5f5 !default;
 //spinner
 $spinner-width: 1.5rem !default;
 $spinner-height: 1.5rem !default;
+$spinner-width-sm: 1rem !default;
+$spinner-height-sm: 1rem !default;
 $spinner-border-width: 2px !default;
-$spinner-border-width-sm: 2px !default;
+$spinner-border-width-sm: 1px !default;
 
 //tables
 $table-head-border-color: $border-color !default;

scss/ui/_forms.scss

@@ -177,3 +177,12 @@ Input group
     transition: $input-transition;
   }
 }
+
+
+/**
+Upload files
+ */
+.form-file-button {
+  margin-left: 0;
+  border-left: 0;
+}
\ No newline at end of file

scss/ui/forms/_validation.scss

 %validation-lite {
   border-color: $border-color;
-
 }
 
 @each $state, $data in $form-validation-states {