Initial OpenECOMP Portal commit

[portal.git] / ecomp-portal-FE / client / app / styles / form.less

diff --git a/ecomp-portal-FE/client/app/styles/form.less b/ecomp-portal-FE/client/app/styles/form.less
new file mode 100644 (file)
index 0000000..4c4e8c3
--- /dev/null
+++ b/ecomp-portal-FE/client/app/styles/form.less
@@ -0,0 +1,189 @@
+/*-
+ * ================================================================================
+ * eCOMP Portal
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ================================================================================
+ */
+ .form {
+    input, textarea, label , .multiple {
+        .a14r;
+    }
+    input, textarea , .multiple {
+        &:focus {
+            outline: none;
+            border: 1px solid @a;
+        }
+        border: 1px solid @a;
+        padding: 8px;
+        &:disabled {
+            border: 1px solid @s;
+            .bg_l;
+        }
+        &.ng-invalid.ng-touched {
+            border: 1px solid @err;
+            box-shadow: 0 0 2.55px 0.45px rgba(218,31,61,.5);
+            &:focus {
+                border: 1px solid @a;
+            }
+        }
+    }
+    input[type=number] {
+        -moz-appearance:textfield;
+    }
+    textarea {
+        min-height: 148px;
+        max-width: @input-max-width;
+    }
+    .flex-group {
+        display: flex;
+        justify-content: space-between;
+    }
+    .form-group {
+        margin: 0 0 18px;
+        position: relative;
+    }
+    .checkbox {
+        label {
+            cursor: pointer;
+        }
+    }
+    label {
+        margin: 0 0 3px;
+        display: block;
+    }
+    .text {
+        width: 100%;
+        display: block;
+    }
+    .short {
+        width: 104px;
+    }
+    .multiple{
+        padding: 0;
+    }
+    .error {
+        color: @f;
+        background: @err;
+        border-radius: 0 5px 5px 0;
+        font-size: 12px;
+        line-height: 20px;
+        text-align: center;
+        width: 100%;
+        position: absolute;
+        top: 18px;
+        margin-left: 75%;
+        z-index: 100;
+        height: 33px;
+        padding: 8px;
+        box-shadow: 0 0 2.55px 0.45px rgba(218,31,61,.5);
+        &:before {
+            content: '';
+            width: 0;
+            height: 0;
+            position: absolute;
+            left: -9px;
+            top: 7px;
+            border-top: 9px solid transparent;
+            border-bottom: 9px solid transparent;
+            border-right: 9px solid @err;
+        }
+    }
+}
+
+.required:before {
+    color: red;
+    margin-right: 2px;
+    content:  "* ";
+    position: absolute;
+    top: 28px;
+    left: -10px;
+}
+
+.custom-input-field{
+    padding-left: 6px;
+    padding-top: 0;
+
+    height: 30px;
+    line-height: 30px;
+    width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 0;
+    position: relative;
+    padding-bottom: 0px;
+
+}
+.custom-select-field{
+    padding-left: 6px;
+    padding-top: 0;
+
+    height: 30px;
+    line-height: 30px;
+    width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 0;
+    position: relative;
+}
+
+.dropdown-container{
+    height:40px;
+    // float:left;
+    position:relative;
+}
+
+.select-input,
+.multiple-select,
+.right_arrow_down{
+    position:absolute;
+    height: 100%;
+    width:100%;
+    top: 0px;
+}
+
+.right_arrow_down{
+    pointer-events:none;
+    top: -1px;
+    left:432px;
+    float:right;
+    width:16px;
+    background: url('../assets/images/sprite.png') bottom right no-repeat;
+    height:30px;
+    background-size: 100% 90%;
+    z-index:10;
+}
+
+.custom-select-wrap{
+    width: 100%;
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+}
+.custom-select-wrap::after{
+    content: '';
+    .arrow_down;
+    display: block;
+    position: absolute;
+    top: 12px;
+    right: 10px;
+    z-index: 999;
+}
+
+select{
+    -webkit-appearance:none;
+    -moz-appearance:none;
+    appearance:none;
+    text-indent: 0.01px;
+    text-overflow: '';
+}
\ No newline at end of file