summaryrefslogtreecommitdiffstats
path: root/catalog-ui/app/styles/form-elements.less
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/app/styles/form-elements.less')
-rw-r--r--catalog-ui/app/styles/form-elements.less199
1 files changed, 199 insertions, 0 deletions
diff --git a/catalog-ui/app/styles/form-elements.less b/catalog-ui/app/styles/form-elements.less
new file mode 100644
index 0000000000..9f8146d3f5
--- /dev/null
+++ b/catalog-ui/app/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;
+ }
+}