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     height: 5rem;
  12     display: inline-block;
  13     float: right;
  14     img { height: inherit;}
  15 }
  16
  17 input-text {
  18
  19     alert {@include ibz-input-alert(darkblue, rgba(200, 200, 200, 0.6))};
  20
  21     input {
  22         margin-bottom: .5rem !important;
  23     }
  24
  25     label {
  26         margin-top: 1rem !important;
  27     }
  28
  29     .required {
  30         color: blue;
  31         float: right;
  32         color: lightskyblue;
  33     }
  34     .required.valid {
  35         color: green;
  36     }
  37
  38     .required.invalid {
  39         color: plum;
  40     }
  41
  42     .status-untouch {
  43         border-color: rgba(200, 200, 200, 0.6) !important;
  44         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(200, 200, 200, 0.6) !important;
  45         color: #696969 !important;
  46     }
  47
  48     input:focus {
  49         border-color: rgba(82,168,236,0.8) ;
  50         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82,168,236,0.8) !important;
  51         transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  52         color: darkslateblue !important;
  53         @extend shadow-transition;
  54     }
  55
  56     .status-valid {
  57         border-color: rgba(154, 205, 50, 0.6)!important;
  58         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(154, 205, 50, 0.6)!important;
  59         @extend shadow-transition;
  60     }
  61
  62     .status-invalid {
  63         border-color: rgba(154, 17, 69, 0.6);
  64         box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(154, 17, 69, 0.6)!important;
  65         color: rgb(154, 17, 69);
  66         @extend shadow-transition;
  67     }
  68
  69 }