From 42ef0f6bdaacde43b4a74583aa7eb88ec16e0441 Mon Sep 17 00:00:00 2001
From: codecalm <codecalm@gmail.com>
Date: Fri, 24 Jan 2020 23:48:25 +0100
Subject: [PATCH] loader inputs

---
 pages/_includes/forms/form-elements-3.html |  6 ++----
 pages/_includes/forms/form-elements-4.html |  1 +
 pages/_includes/parts/input-icon.html      |  8 +++++++-
 pages/_includes/ui/form/input-icon.html    | 14 ++++++++++----
 pages/_includes/ui/spinner.html            |  4 +---
 scss/_variables.scss                       |  8 +++++---
 scss/ui/_forms.scss                        |  9 +++++++++
 scss/ui/forms/_validation.scss             |  1 -
 8 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/pages/_includes/forms/form-elements-3.html b/pages/_includes/forms/form-elements-3.html
index 093d3d50..c2610a43 100644
--- a/pages/_includes/forms/form-elements-3.html
+++ b/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
diff --git a/pages/_includes/forms/form-elements-4.html b/pages/_includes/forms/form-elements-4.html
index 21ed6c7d..0e5e71e3 100644
--- a/pages/_includes/forms/form-elements-4.html
+++ b/pages/_includes/forms/form-elements-4.html
@@ -1,3 +1,4 @@
+<label class="form-label">Form fieldset</label>
 {% include parts/form-fieldset.html %}
 
 {% include parts/input-selectgroups.html %}
diff --git a/pages/_includes/parts/input-icon.html b/pages/_includes/parts/input-icon.html
index 7c269176..443755d4 100644
--- a/pages/_includes/parts/input-icon.html
+++ b/pages/_includes/parts/input-icon.html
@@ -1,5 +1,11 @@
 <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
diff --git a/pages/_includes/ui/form/input-icon.html b/pages/_includes/ui/form/input-icon.html
index c6ddee84..8e9b410a 100644
--- a/pages/_includes/ui/form/input-icon.html
+++ b/pages/_includes/ui/form/input-icon.html
@@ -1,8 +1,14 @@
-{% 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 %}">
diff --git a/pages/_includes/ui/spinner.html b/pages/_includes/ui/spinner.html
index 54e03ca1..73d8b112 100644
--- a/pages/_includes/ui/spinner.html
+++ b/pages/_includes/ui/spinner.html
@@ -1,4 +1,2 @@
 {% 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 }}>
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 404ded7b..5f28b253 100644
--- a/scss/_variables.scss
+++ b/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;
diff --git a/scss/ui/_forms.scss b/scss/ui/_forms.scss
index 3741b639..815dd0dc 100644
--- a/scss/ui/_forms.scss
+++ b/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
diff --git a/scss/ui/forms/_validation.scss b/scss/ui/forms/_validation.scss
index e32f2421..414e376b 100644
--- a/scss/ui/forms/_validation.scss
+++ b/scss/ui/forms/_validation.scss
@@ -1,6 +1,5 @@
 %validation-lite {
   border-color: $border-color;
-
 }
 
 @each $state, $data in $form-validation-states {
-- 
GitLab