afm-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     @include ibz-button(grey,1rem)
  12     float: right;
  13     height  : 3rem;
  14     margin: 0.5rem;
  15
  16     i { font-size: 2rem}
  17
  18     .ibz-range-slider {
  19         height: 10% !important;
  20         border-radius: 5px;
  21         background-color: lightgrey !important;
  22
  23         .range-slider-handle {
  24             width: 10% !important;
  25             height: 100% !important;
  26             margin-top: .2rem;
  27             background-color: purple !important;
  28         }
  29
  30         .range-slider-active-segment {
  31             height: 80% !important;
  32             background-color: lightgreen;
  33         }
  34     }
  35
  36 }
  37
  38 input-text {
  39
  40     alert {@include ibz-input-alert(darkblue, rgba(200, 200, 200, 0.6))};
  41
  42     input {
  43         margin-bottom: .5rem !important;
  44     }
  45
  46     label {
  47         margin-top: 1rem !important;
  48     }
  49
  50     .required {
  51         color: blue;
  52         float: right;
  53         color: lightskyblue;
  54     }
  55     .required.valid {
  56         color: green;
  57     }
  58
  59     .required.invalid {
  60         color: plum;
  61     }
  62
  63     .status-untouch {
  64         border-color: rgba(200, 200, 200, 0.6) !important;
  65         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(200, 200, 200, 0.6) !important;
  66         color: #696969 !important;
  67     }
  68
  69     input:focus {
  70         border-color: rgba(82,168,236,0.8) ;
  71         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82,168,236,0.8) !important;
  72         transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  73         color: darkslateblue !important;
  74         @extend shadow-transition;
  75     }
  76
  77     .status-valid {
  78         border-color: rgba(154, 205, 50, 0.6)!important;
  79         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(154, 205, 50, 0.6)!important;
  80         @extend shadow-transition;
  81     }
  82
  83     .status-invalid {
  84         border-color: rgba(154, 17, 69, 0.6);
  85         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(154, 17, 69, 0.6)!important;
  86         color: rgb(154, 17, 69);
  87         @extend shadow-transition;
  88     }
  89
  90 }