1 files changed, 199 insertions, 0 deletions
diff --git a/catalog-ui/src/assets/styles/form-elements.less b/catalog-ui/src/assets/styles/form-elements.less
new file mode 100644
index 0000000000..9f8146d3f5
--- /dev/null
+++ b/catalog-ui/src/assets/styles/form-elements.less
@@ -0,0 +1,199 @@
+// ---------------------------------------------------------------------------------------------------
+// Form
+// ---------------------------------------------------------------------------------------------------
+.w-sdc-form {
+    padding: 0;
+
+    .w-sdc-form-actions-container {
+        margin: 20px auto; // -10px;
+        width: 100%; // 320px;
+    }
+
+    .w-sdc-form-columns-wrapper {
+
+        display: flex;
+        justify-content: space-between;
+
+        .w-sdc-form-column {
+             width: 100%;
+             margin: 0;
+             padding: 0 6% 0 0;
+            text-align: left;
+
+            &:last-child {
+                padding: 0;
+            }
+         }
+
+    }
+
+    .i-sdc-form-item {
+        margin-bottom: 10px;
+        position: relative;
+        text-align: left;
+
+        &.error {
+            input[type="text"],
+            input[type="url"],
+            input[type="number"],
+            input[type="password"],
+            select,
+            textarea {
+                .h_1;
+                border-color: @main_color_g;
+                outline: none;
+                box-sizing: border-box;
+
+                &:hover {
+                    .h_1;
+                    border-color: @main_color_g;
+                }
+            }
+            label {
+                .m_14_m;
+            }
+        }
+
+        label {
+            .m_14_m;
+            margin: 0 0 2px 0;
+            padding: 0;
+            display: block;
+
+            &.required::before {
+                color: #f33;
+                content: '*';
+                margin: 0 4px 0 0;
+            }
+        }
+
+        input[type="text"],
+        input[type="url"],
+        input[type="number"],
+        input[type="password"],
+        select,
+        textarea {
+            .m_14_r;
+            background-color: @main_color_p;
+            .border-radius(2px);
+            margin: 0;
+            padding: 0;
+            border: solid 1px @main_color_o;
+            height: 30px;
+            width: 100%;
+            display: block;
+
+            &::-webkit-input-placeholder { font-style: italic; } /* Safari, Chrome and Opera */
+            &:-moz-placeholder { font-style: italic; } /* Firefox 18- */
+            &::-moz-placeholder { font-style: italic; } /* Firefox 19+ */
+            &:-ms-input-placeholder { font-style: italic; } /* IE 10+ */
+            &:-ms-input-placeholder { font-style: italic; } /* Edge */
+
+            &:disabled {
+                opacity: 0.4;
+            }
+            &.view-mode {
+                opacity: 1;
+                border: solid 1px @main_color_o;
+                background-color: #f8f8f8 !important;
+                pointer-events: none;
+                cursor: auto;
+            }
+
+        }
+
+        input[type="text"],
+        input[type="url"],
+        input[type="number"],
+        input[type="password"]  { padding: 4px 10px;}
+        select                  { padding: 4px 7px;}
+        textarea                { padding: 6px 10px;}
+
+        select {
+            optgroup {
+                color: @color_a;
+                option {
+                    color: @color_b;
+                }
+
+            }
+        }
+
+        textarea {
+            min-height: 110px;
+            resize: none;
+        }
+
+    }
+
+    .i-sdc-form-item-error-icon {
+        .sprite;
+        .exclamation-mark-red-icon;
+        width: 13px;
+        height: 11px;
+        position: absolute;
+
+        .i-sdc-form-item-error-message {
+            .bg_h;
+            .c_3;
+            cursor: default;
+            position: absolute;
+            top: -10px;
+            left: -8px;
+            height: 30px;
+            padding: 6px 10px 6px 30px;
+            z-index: 999;
+            text-align: left;
+            .border-radius-top-right(4px);
+            .border-radius-bottom-right(4px);
+            .box-shadow(0px 1px 1px 0px rgba(24, 24, 25, 0.43));
+
+            &:before {
+                .arrow(5px, @color_h);
+            }
+
+            span {
+                white-space: nowrap;
+            }
+
+            span.error {
+                .sprite;
+                .exclamation-mark-red-icon;
+                position: absolute;
+                top: 9px;
+                left: 8px;
+            }
+
+            span.ok {
+                .c_3;
+                .hand;
+                position: absolute;
+                right: 10px;
+                text-decoration: underline;
+            }
+
+            .i-sdc-form-item-error-icon-open {
+                .sprite;
+                .exclamation-mark-white-icon;
+                width: 13px;
+                height: 11px;
+                position: absolute;
+                top: 9px;
+                left: 8px;
+            }
+
+        }
+
+    }
+
+    .input-error {
+        .q_12_m;
+        text-align: left;
+    }
+
+    .input-error-file-upload {
+        .input-error;
+        margin-top: -10px;
+        margin-bottom: 10px;
+    }
+}