afb-client/app/Frontend/widgets/FormInput/FormInput.scss

   1 /*
   2     Sample of style overload for a specific widget
   3
   4     Note: this SCSS is injected with main HTML page, it scope should be reduce
   5     to a specific widget or it value will be propagated at a global level.
   6 */
   7
   8 @import "app/ibz-mixins";
   9
  10 .upload-file {
  11     display: inline-block;
  12     float: right;
  13     height : 5rem;
  14     width  : 5rem;
  15     margin: 0.5rem;
  16
  17     img { height: inherit;}
  18
  19     .ibz-range-slider {
  20         height: 10% !important;
  21         border-radius: 5px;
  22         background-color: lightgrey !important;
  23
  24         .range-slider-handle {
  25             width: 10% !important;
  26             height: 100% !important;
  27             margin-top: .2rem;
  28             background-color: purple !important;
  29         }
  30
  31         .range-slider-active-segment {
  32             height: 80% !important;
  33             background-color: lightgreen;
  34         }
  35     }
  36
  37 }
  38
  39 input-text {
  40
  41     alert {@include ibz-input-alert(darkblue, rgba(200, 200, 200, 0.6))};
  42
  43     input {
  44         margin-bottom: .5rem !important;
  45     }
  46
  47     label {
  48         margin-top: 1rem !important;
  49     }
  50
  51     .required {
  52         color: blue;
  53         float: right;
  54         color: lightskyblue;
  55     }
  56     .required.valid {
  57         color: green;
  58     }
  59
  60     .required.invalid {
  61         color: plum;
  62     }
  63
  64     .status-untouch {
  65         border-color: rgba(200, 200, 200, 0.6) !important;
  66         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(200, 200, 200, 0.6) !important;
  67         color: #696969 !important;
  68     }
  69
  70     input:focus {
  71         border-color: rgba(82,168,236,0.8) ;
  72         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82,168,236,0.8) !important;
  73         transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  74         color: darkslateblue !important;
  75         @extend shadow-transition;
  76     }
  77
  78     .status-valid {
  79         border-color: rgba(154, 205, 50, 0.6)!important;
  80         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(154, 205, 50, 0.6)!important;
  81         @extend shadow-transition;
  82     }
  83
  84     .status-invalid {
  85         border-color: rgba(154, 17, 69, 0.6);
  86         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(154, 17, 69, 0.6)!important;
  87         color: rgb(154, 17, 69);
  88         @extend shadow-transition;
  89     }
  90
  91 }