catalog-ui/src/assets/styles/form-elements.less

   1 // ---------------------------------------------------------------------------------------------------
   2 // Form
   3 // ---------------------------------------------------------------------------------------------------
   4 .w-sdc-form {
   5     padding: 0;
   6
   7     .w-sdc-form-actions-container {
   8         margin: 20px auto; // -10px;
   9         width: 100%; // 320px;
  10     }
  11
  12     .w-sdc-form-columns-wrapper {
  13
  14         display: flex;
  15         justify-content: space-between;
  16
  17         .w-sdc-form-column {
  18              width: 100%;
  19              margin: 0;
  20              padding: 0 6% 0 0;
  21             text-align: left;
  22
  23             &:last-child {
  24                 padding: 0;
  25             }
  26          }
  27
  28     }
  29
  30     .i-sdc-form-item {
  31         margin-bottom: 10px;
  32         position: relative;
  33         text-align: left;
  34
  35         &.error {
  36             input[type="text"],
  37             input[type="url"],
  38             input[type="number"],
  39             input[type="password"],
  40             select,
  41             textarea {
  42                 .h_1;
  43                 border-color: @main_color_g;
  44                 outline: none;
  45                 box-sizing: border-box;
  46
  47                 &:hover {
  48                     .h_1;
  49                     border-color: @main_color_g;
  50                 }
  51             }
  52             label {
  53                 .m_14_m;
  54             }
  55         }
  56
  57         label {
  58             .m_14_m;
  59             margin: 0 0 2px 0;
  60             padding: 0;
  61             display: block;
  62
  63             &.required::before {
  64                 color: #f33;
  65                 content: '*';
  66                 margin: 0 4px 0 0;
  67             }
  68         }
  69
  70         input[type="text"],
  71         input[type="url"],
  72         input[type="number"],
  73         input[type="password"],
  74         select,
  75         textarea {
  76             .m_14_r;
  77             background-color: @main_color_p;
  78             .border-radius(2px);
  79             margin: 0;
  80             padding: 0;
  81             border: solid 1px @main_color_o;
  82             height: 30px;
  83             width: 100%;
  84             display: block;
  85
  86             &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */
  87             &:-moz-placeholder { font-style: italic; } /* Firefox 18- */
  88             &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */
  89             &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */
  90             &:-ms-input-placeholder { font-style: italic; } /* Edge */
  91
  92             &:disabled {
  93                 opacity: 0.4;
  94             }
  95             &.view-mode {
  96                 opacity: 1;
  97                 border: solid 1px @main_color_o;
  98                 background-color: #f8f8f8 !important;
  99                 pointer-events: none;
 100                 cursor: auto;
 101             }
 102
 103         }
 104
 105         input[type="text"],
 106         input[type="url"],
 107         input[type="number"],
 108         input[type="password"]  { padding: 4px 10px;}
 109         select                  { padding: 4px 0px;}
 110         textarea                { padding: 6px 10px;}
 111
 112         select {
 113             optgroup {
 114                 color: @color_a;
 115                 option {
 116                     color: @color_b;
 117                 }
 118
 119             }
 120         }
 121
 122         textarea {
 123             min-height: 110px;
 124             resize: none;
 125         }
 126
 127     }
 128
 129     .i-sdc-form-item-error-icon {
 130         .sprite;
 131         .exclamation-mark-red-icon;
 132         width: 13px;
 133         height: 11px;
 134         position: absolute;
 135
 136         .i-sdc-form-item-error-message {
 137             .bg_h;
 138             .c_3;
 139             cursor: default;
 140             position: absolute;
 141             top: -10px;
 142             left: -8px;
 143             height: 30px;
 144             padding: 6px 10px 6px 30px;
 145             z-index: 999;
 146             text-align: left;
 147             .border-radius-top-right(4px);
 148             .border-radius-bottom-right(4px);
 149             .box-shadow(0px 1px 1px 0px rgba(24, 24, 25, 0.43));
 150
 151             &:before {
 152                 .arrow(5px, @color_h);
 153             }
 154
 155             span {
 156                 white-space: nowrap;
 157             }
 158
 159             span.error {
 160                 .sprite;
 161                 .exclamation-mark-red-icon;
 162                 position: absolute;
 163                 top: 9px;
 164                 left: 8px;
 165             }
 166
 167             span.ok {
 168                 .c_3;
 169                 .hand;
 170                 position: absolute;
 171                 right: 10px;
 172                 text-decoration: underline;
 173             }
 174
 175             .i-sdc-form-item-error-icon-open {
 176                 .sprite;
 177                 .exclamation-mark-white-icon;
 178                 width: 13px;
 179                 height: 11px;
 180                 position: absolute;
 181                 top: 9px;
 182                 left: 8px;
 183             }
 184
 185         }
 186
 187     }
 188
 189     .input-error {
 190         .q_12_m;
 191         text-align: left;
 192     }
 193
 194     .input-error-file-upload {
 195         .input-error;
 196         margin-top: -10px;
 197         margin-bottom: 10px;
 198     }
 199 }