summaryrefslogtreecommitdiffstats
path: root/afb-client/app/Frontend/widgets/FormInput/FormInput.scss
diff options
context:
space:
mode:
authorFulup Ar Foll <fulup@iot.bzh>2015-12-16 17:15:43 +0100
committerFulup Ar Foll <fulup@iot.bzh>2015-12-16 17:15:43 +0100
commit475508baa9f0b21087eb85048d51af342aa09692 (patch)
treef3e944401efc59c68110f54fcea7f569e928a42f /afb-client/app/Frontend/widgets/FormInput/FormInput.scss
parentf7e443f996dceb928a047d06e45f59579f1fbc0e (diff)
Add the app!!!
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;
+ }
+
+}