summaryrefslogtreecommitdiffstats
path: root/afb-client/app/Frontend/widgets/FormInput/FormInput.scss
diff options
context:
space:
mode:
Diffstat (limited to 'afb-client/app/Frontend/widgets/FormInput/FormInput.scss')
-rw-r--r--afb-client/app/Frontend/widgets/FormInput/FormInput.scss69
1 files changed, 69 insertions, 0 deletions
diff --git a/afb-client/app/Frontend/widgets/FormInput/FormInput.scss b/afb-client/app/Frontend/widgets/FormInput/FormInput.scss
new file mode 100644
index 0000000..37519fd
--- /dev/null
+++ b/afb-client/app/Frontend/widgets/FormInput/FormInput.scss
@@ -0,0 +1,69 @@
+/*
+ Sample of style overload for a specific widget
+
+ Note: this SCSS is injected with main HTML page, it scope should be reduce
+ to a specific widget or it value will be propagated at a global level.
+*/
+
+@import "app/ibz-mixins";
+
+upload-file {
+ height: 5rem;
+ display: inline-block;
+ float: right;
+ img { height: inherit;}
+}
+
+input-text {
+
+ alert {@include ibz-input-alert(darkblue, rgba(200, 200, 200, 0.6))};
+
+ input {
+ margin-bottom: .5rem !important;
+ }
+
+ label {
+ margin-top: 1rem !important;
+ }
+
+ .required {
+ color: blue;
+ float: right;
+ color: lightskyblue;
+ }
+ .required.valid {
+ color: green;
+ }
+
+ .required.invalid {
+ color: plum;
+ }
+
+ .status-untouch {
+ border-color: rgba(200, 200, 200, 0.6) !important;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(200, 200, 200, 0.6) !important;
+ color: #696969 !important;
+ }
+
+ input:focus {
+ border-color: rgba(82,168,236,0.8) ;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82,168,236,0.8) !important;
+ transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+ color: darkslateblue !important;
+ @extend shadow-transition;
+ }
+
+ .status-valid {
+ border-color: rgba(154, 205, 50, 0.6)!important;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(154, 205, 50, 0.6)!important;
+ @extend shadow-transition;
+ }
+
+ .status-invalid {
+ border-color: rgba(154, 17, 69, 0.6);
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(154, 17, 69, 0.6)!important;
+ color: rgb(154, 17, 69);
+ @extend shadow-transition;
+ }
+
+}