vcomply-design-system 1.0.0

package/css-build/less/forms/forms.less

@@ -0,0 +1,386 @@
+@import url('../mixin/mixin.less');
+
+.vx-form-group {
+    display      : block;
+    position     : relative;
+    margin-bottom: 16px;
+
+    .select {
+        position: relative;
+
+        select {
+            -webkit-appearance: none;
+            -moz-appearance   : none;
+            appearance        : none;
+            background-color  : transparent;
+            margin            : 0;
+            width             : 100%;
+            font-family       : inherit;
+            font-size         :12px;
+            cursor            : pointer;
+            line-height       : inherit;
+            z-index           : 1;
+
+            &:disabled {
+                background: @greyMain;
+                cursor    : not-allowed;
+            }
+        }
+
+        &:after {
+            content     : "";
+            border-top  : 5px solid @darkText;
+            border-right: 5px solid transparent;
+            border-left : 5px solid transparent;
+            position    : absolute;
+            right       : 20px;
+            top         : calc(50% - 2px);
+        }
+
+        input {
+            cursor: pointer;
+        }
+    }
+
+    label.vx-control-panel {
+        color         : @darkText;
+        font-size     : 11px;
+        font-weight   : 500;
+        line-height   : 16px;
+        margin-bottom : 8px;
+        display       : block;
+        text-transform: uppercase;
+        width         : 100%;
+        margin-top    : 4px;
+
+        span.required {
+            color: #EB2424;
+        }
+    }
+
+    input[type=text] {
+        height       : 40px;
+        border-radius: 4px;
+        border       : 1px solid #DBDBDB;
+        background   : @white;
+        outline      : none;
+        padding      : 8px 12px;
+        line-height  : 20px;
+        font-size    : 13px;
+        color        : @lightText;
+        font-weight  : 400;
+        transition   : all 0.2s ease-in-out;
+        width        : 100%;
+
+        &:focus {
+            border-color: @primaryBlue;
+            box-shadow  : 0 0 5px rgba(30, 93, 211, 0.27);
+        }
+
+        &.error {
+            border-color : @error;
+            color        : @error;
+            margin-bottom: 4px;
+
+            &:focus {
+                box-shadow: 0 0 5px rgba(211, 30, 30, 0.27)
+            }
+        }
+
+        &:disabled {
+            background: @greyMain;
+            cursor    : not-allowed;
+        }
+    }
+
+    input[type=file] {
+        height       : 40px;
+        border-radius: 4px;
+        border       : 1px solid #DBDBDB;
+        background   : @white;
+        outline      : none;
+        padding      : 9px 16px;
+        line-height  : 20px;
+        font-size    :12px;
+        color        : @lightText;
+        font-weight  : 400;
+        transition   : all 0.2s ease-in-out;
+        width        : 100%;
+
+        &.error {
+            border-color : @error;
+            color        : @error;
+            margin-bottom: 4px;
+
+            &:focus {
+                box-shadow: 0 0 5px rgba(211, 30, 30, 0.27)
+            }
+        }
+
+        &:disabled {
+            background: @greyMain;
+            cursor    : not-allowed;
+        }
+    }
+
+    select {
+        height       : 40px;
+        border-radius: 4px;
+        border       : 1px solid #DBDBDB;
+        background   : @white;
+        outline      : none;
+        padding      : 8px 16px;
+        line-height  : 20px;
+        font-size    :12px;
+        color        : @lightText;
+        font-weight  : 400;
+        transition   : all 0.2s ease-in-out;
+        width        : 100%;
+
+        &:focus {
+            border-color: @primaryBlue;
+            box-shadow  : 0 0 5px rgba(30, 93, 211, 0.27);
+        }
+
+        &.error {
+            border-color : @error;
+            color        : @error;
+            margin-bottom: 4px;
+
+            &:focus {
+                box-shadow: 0 0 5px rgba(211, 30, 30, 0.27)
+            }
+        }
+    }
+
+    &.lg {
+        label.vx-control-panel {
+            font-size: 16px;
+        }
+
+        input[type=text] {
+            height     : 48px;
+            line-height: 28px;
+            font-size  : 16px;
+        }
+
+        select {
+            height     : 48px;
+            line-height: 28px;
+            font-size  : 16px;
+        }
+
+        input[type=file] {
+            height     : 48px;
+            line-height: 28px;
+            font-size  : 16px;
+            padding    : 9px 16px;
+        }
+    }
+
+    &.sm {
+        label.vx-control-panel {
+            font-size: 10px;
+        }
+
+        input[type=text] {
+            height     : 32px;
+            line-height:12px;
+            font-size  :12px;
+        }
+
+        select {
+            height     : 32px;
+            line-height:12px;
+            font-size  :12px;
+        }
+
+        input[type=file] {
+            height     : 32px;
+            line-height:12px;
+            font-size  :12px;
+            padding    : 5px 16px;
+        }
+    }
+
+    .select-list {
+        position  : absolute;
+        background: @white;
+        box-shadow: 0 0 5px rgb(30, 93, 211, 0.27);
+        top       : 100%;
+        right     : 0;
+        left      : 0;
+        z-index   : 2;
+
+        .vx-radio-group {
+            label.vx-radio-item {
+                width  : 100%;
+                padding:12px 16px;
+
+                &:hover {
+                    background: @greyLight;
+                }
+            }
+        }
+    }
+
+    .checkbox-group {
+        display: block;
+        padding: 0;
+        margin : 0;
+
+        li {
+            list-style: none;
+            display   : block;
+            padding   : 4px 8px;
+        }
+
+        &.ver {
+            display  : flex;
+            flex-wrap: wrap;
+
+            li {
+                width: auto;
+            }
+        }
+    }
+    .selected {
+        height         : 40px;
+        border-radius  : 4px;
+        border         : 1px solid #F1F1F1;
+        background     : #FBFBFB;
+        outline        : none;
+        padding        : 8px;
+        line-height    : 20px;
+        font-size      : 14px;
+        color          : #747576;
+        font-weight    : 400;
+        transition     : all 0.2s ease-in-out;
+        width          : 100%;
+        display        : flex;
+        align-items    : center;
+        position       : relative;
+        justify-content: space-between;
+
+        .chip-container {
+            display    : flex;
+            width      : calc(100% - 52px);
+            align-items: center;
+
+            span {
+                &.chip {
+                    background   : #FFFFFF;
+                    border-radius: 2px;
+                    box-shadow   : 0px 0px 3px #1E5DD31A;
+                    height       : 24px;
+                    padding      : 0 8px;
+                    color        : #1E5DD3;
+                    font-size    : 12px;
+                    display      : block;
+                    width        : auto;
+                    max-width    : 100%;
+                    font-weight  : 400;
+                    white-space  : nowrap;
+                    overflow     : hidden;
+                    text-overflow: ellipsis;
+                    line-height  : 24px;
+
+                    i {
+                        font-weight : 400;
+                        margin-right: 8px;
+                        cursor      : pointer;
+                        font-size   : 10px;
+                    }
+
+                    &+span.chip {
+                        margin-left: 4px;
+                    }
+                }
+            }
+        }
+
+        button.count {
+            background   : #1E5DD3;
+            border-radius: 2px;
+            height       : 24px;
+            padding      : 2px 8px;
+            border       : 1px solid #1E5DD3;
+            cursor       : pointer;
+            outline      : none;
+            color        : #FFFFFF;
+            font         : 13px;
+            font-weight  : 500;
+            margin-left  : 4px;
+            line-height  : 20px;
+        }
+
+        button.edit {
+            border        : 1px solid #F1F1F1;
+            border-radius : 2px;
+            background    : #FFFFFF;
+            outline       : none;
+            cursor        : pointer;
+            display       : block;
+            height        : 24px;
+            padding       : 0 5px 0 4px;
+            font-size     : 11px;
+            font-weight   : 500;
+            color         : #1E5DD3;
+            text-transform: uppercase;
+
+            i {
+                font-weight : 400;
+                font-size   : 8px;
+                margin-right: 4px;
+            }
+        }
+
+        .workflow-label {
+            min-width   : 92px;
+            padding     : 4px;
+            text-align  : center;
+            margin-left : -8px;
+            margin-right: 8px;
+            border-right: 1px solid #F1F1F1;
+
+            p {
+                margin        : 0;
+                display       : block;
+                text-transform: uppercase;
+
+                &.title {
+                    font-size  : 9px;
+                    line-height: 12px;
+                    color      : #161B2F;
+                    font-weight: 500;
+                }
+
+                &.description {
+                    font-size  : 11px;
+                    line-height: 16px;
+                    color      : #161B2F;
+                    font-weight: 600;
+                }
+            }
+        }
+
+    }
+    .custom-filed {
+        position: relative;
+        input {
+            padding-right: 24px;
+        }
+        button.remove {
+            position: absolute;
+            z-index: 1;
+            top: calc(50% - 4px);
+            right: 12px;
+            font-size: 8px;
+            color: @vColor;
+            padding: 0;
+            margin: 0;
+            background: transparent;
+            border: none;
+        }
+    }
+}

package/css-build/less/forms/index.less

@@ -0,0 +1,5 @@
+@import url('./check-box.less');
+@import url('./forms.less');
+@import url('./radio.less');
+@import url('./range-slider.less');
+@import url('./switch.less');

package/css-build/less/forms/radio.less

@@ -0,0 +1,139 @@
+label {
+	max-width: 600px;
+
+	&.vx-radio-item {
+		display    : inline-flex;
+		align-items: center;
+		cursor     : pointer;
+		margin     : 0;
+		padding    : 0 10px 0 0;
+		max-width  : 100%;
+
+		&.readonly {
+			pointer-events: none;
+		}
+
+		span {
+			display    : inline-flex;
+			align-items: center;
+
+			&.radio {
+				background   : #fff;
+				height       : 16px;
+				width        : 16px;
+				border-radius: 50%;
+				border       : 1px solid #DBDBDB;
+				position     : relative;
+				padding      : 5px;
+				margin-top   : 0px;
+
+				.inner {
+					height       : 10px;
+					width        : 10px;
+					border-radius: 50%;
+					background   : #FFFFFF;
+					display      : none;
+				}
+			}
+
+			&.value {
+				color      : #4E4E4E;
+				font-size  : 14px;
+				line-height: 16px;
+				font-weight: 400;
+				margin-left: 10px;
+				max-width  : calc(100% - 26px);
+
+				&:empty {
+					display: none;
+				}
+			}
+		}
+
+		svg {
+			display   : none;
+			margin-top: 0px;
+		}
+
+		input[type=radio] {
+			display: none;
+
+			&:checked+span {
+				&.radio {
+					display: none;
+				}
+			}
+
+			&:checked~svg {
+				display: block;
+			}
+
+			&:disabled~* {
+				opacity: .7;
+			}
+		}
+	}
+}
+
+.vx-radio-group {
+	display: flex;
+	&.ver {
+		display: block;
+		label.vx-radio-item {
+			display: flex;
+			padding: 8px 12px;
+		}
+	}
+}
+
+.radiomark {
+	width            : 16px;
+	height           : 16px;
+	border-radius    : 50%;
+	stroke-width     : 4;
+	stroke           : #fff;
+	stroke-miterlimit: 10;
+	box-shadow       : inset 0px 0px 0px #34AA44;
+	animation        : fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
+}
+
+.radiomark__circle {
+	stroke-dasharray : 166;
+	stroke-dashoffset: 166;
+	stroke-width     : 2;
+	stroke-miterlimit: 10;
+	stroke           : #34AA44;
+	fill             : none;
+	animation        : stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+}
+
+.radiomark__check {
+	stroke-dasharray : 100;
+	stroke-dashoffset: 100;
+	stroke-width     : 10;
+	animation        : stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
+}
+
+@keyframes stroke {
+	100% {
+		stroke-dashoffset: 0;
+	}
+}
+
+@keyframes scale {
+
+	0%,
+	100% {
+		transform: none;
+	}
+
+	50% {
+		transform: scale3d(1.1, 1.1, 1);
+	}
+}
+
+@keyframes fill {
+	100% {
+		box-shadow: inset 0px 0px 0px 30px #34AA44;
+	}
+}

package/css-build/less/forms/range-slider.less

@@ -0,0 +1,69 @@
+@import url('../mixin/mixin.less');
+@import url('../color/color.less');
+
+.vx-slider {
+    -webkit-appearance: none;
+    width             : 100%;
+    height            : 5px;
+    background        : @greyMain;
+    outline           : none;
+    -webkit-transition: .2s;
+    transition        : opacity .2s;
+    border-radius     : 4px;
+    margin: 0;
+
+    &::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance        : none;
+        width             : 15px;
+        height            : 15px;
+        background        : @primaryBlue;
+        cursor            : pointer;
+        border-radius     : 50%;
+        transition        : all 0.2s ease-in-out;
+    }
+
+    &::-moz-range-thumb {
+        width        : 15px;
+        height       : 15px;
+        background   : @primaryBlue;
+        cursor       : pointer;
+        border-radius: 50%;
+        transition   : all 0.2s ease-in-out;
+    }
+
+    &.sm {
+
+        &::-webkit-slider-thumb {
+            width : 12px;
+            height: 12px;
+        }
+
+        &::-moz-range-thumb {
+            width : 12px;
+            height: 12px;
+        }
+    }
+
+    &.lg {
+
+        &::-webkit-slider-thumb {
+            width : 30px;
+            height: 30px;
+        }
+
+        &::-moz-range-thumb {
+            width : 30px;
+            height: 30px;
+        }
+    }
+    &:disabled {
+        &::-webkit-slider-thumb {
+            background: @lightText;
+        }
+
+        &::-moz-range-thumb {
+            background: @lightText;
+        }
+    }
+}