diff options
author | Fulup Ar Foll <fulup@iot.bzh> | 2016-01-25 14:37:32 +0100 |
---|---|---|
committer | Fulup Ar Foll <fulup@iot.bzh> | 2016-01-25 14:37:32 +0100 |
commit | 3ebdce373e134b70b129154d8033c1c628847a6c (patch) | |
tree | 76d84a1b1e6e6b474c7eecad2ea098ba0de69300 /afm-client/app/Frontend/widgets/FormInput/FormInput.scss | |
parent | 8d03b8c581ce64192e9d265597d262b59826cffd (diff) |
First version
Diffstat (limited to 'afm-client/app/Frontend/widgets/FormInput/FormInput.scss')
-rw-r--r-- | afm-client/app/Frontend/widgets/FormInput/FormInput.scss | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/afm-client/app/Frontend/widgets/FormInput/FormInput.scss b/afm-client/app/Frontend/widgets/FormInput/FormInput.scss new file mode 100644 index 0000000..528ddfd --- /dev/null +++ b/afm-client/app/Frontend/widgets/FormInput/FormInput.scss @@ -0,0 +1,90 @@ +/* + 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 { + @include ibz-button(grey,1rem) + float: right; + height : 3rem; + margin: 0.5rem; + + i { font-size: 2rem} + + .ibz-range-slider { + height: 10% !important; + border-radius: 5px; + background-color: lightgrey !important; + + .range-slider-handle { + width: 10% !important; + height: 100% !important; + margin-top: .2rem; + background-color: purple !important; + } + + .range-slider-active-segment { + height: 80% !important; + background-color: lightgreen; + } + } + +} + +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; + } + +} |