vcomply-design-system 1.0.0

package/css-build/less/dialog/dialog.less

@@ -0,0 +1,502 @@
+@import url('../mixin/mixin.less');
+
+.vx-dialog {
+    &-container {
+        position     : relative;
+        border       : 1px solid @greyMain;
+        border-radius: 4px;
+
+
+        &.dialog-md {
+            width: 560px;
+        }
+
+        &.dialog-lg {
+            width: 720px;
+        }
+
+        &.dialog-sm {
+            width: 380px;
+
+            .vx-dialog {
+                &-head {
+                    height : 40px;
+                    padding: 0 10px 0 20px;
+
+                    button {
+                        padding-right: 8px;
+                        padding-left : 8px;
+                    }
+                }
+
+                &-body {
+                    padding: 15px 20px;
+                }
+            }
+        }
+
+        &.dialog-fs {
+            width        : 100%;
+            height       : 100%;
+            border-radius: 0;
+            overflow     : auto;
+            background   : @white;
+            position     : relative;
+
+            &.close {
+                background: @vColor;
+                border    : none;
+
+                &:after {
+                    position     : absolute;
+                    content      : "";
+                    background   : @white;
+                    top          : 0;
+                    right        : 0;
+                    bottom       : 0;
+                    left         : 0;
+                    border-radius: 0 200px 0 0;
+                }
+
+                button.close {
+                    position : absolute;
+                    top      :12px;
+                    right    :12px;
+                    color    : @white;
+                    font-size: 22px;
+                }
+            }
+        }
+
+        &.dialog-alert {
+            width: 540px;
+
+            .vx-dialog {
+                &-body {
+                    background   : @greyLight;
+                    border-radius: 4px 4px 0 0;
+                    padding      : 50px 15px 35px;
+
+                    &-container {
+                        padding: 0;
+                    }
+                }
+
+                &-icon {
+                    background     : #fff;
+                    border         : 1px solid #dcdcdc;
+                    width          : 80px;
+                    height         : 80px;
+                    border-radius  : 50%;
+                    margin         : 0 auto 35px;
+                    padding        : 5px 0 0;
+                    display        : flex;
+                    align-items    : center;
+                    justify-content: center;
+
+                    i {
+                        font-size: 40px;
+                    }
+                }
+
+                &-description {
+                    font-size  : 16px;
+                    color      : #747576;
+                    text-align : center;
+                    margin     : 0;
+                    font-weight: 400;
+                }
+
+                &-footer {
+                    display        : flex;
+                    font-size      : 14px;
+                    background     : #fff;
+                    padding        : 15px 20px;
+                    letter-spacing : .2px;
+                    border-radius  : 0 0 4px 4px;
+                    z-index        : 1;
+                    position       : relative;
+                    align-items    : center;
+                    justify-content: space-between;
+
+                    p.info {
+                        color      : #161b2f;
+                        margin     : 0;
+                        font-size  : 14px;
+                        font-weight: 400;
+                        text-align : left;
+                    }
+
+                    .action {
+                        display: flex;
+
+                        button {
+                            padding: 0 25px;
+                        }
+                    }
+                }
+            }
+        }
+
+        &.side-dialog {
+            height       : 100vh;
+            width        : 500px;
+            border-radius: 0;
+
+            .vx-dialog-footer {
+                justify-content: flex-end;
+                display        : flex;
+                height         : 50px;
+                align-items    : center;
+                padding        : 0 20px;
+                background     : @fadeGrey;
+                border-top     : 1px solid @greyMain;
+                border-radius  : 0;
+            }
+
+            .vx-dialog-head {
+                border-radius: 0;
+                padding: 0 8px 0 20px;
+                .vx-btn {
+                    color: #161b2f !important;
+                }
+            }
+
+            .vx-dialog-body-container {
+                padding: 0;
+            }
+
+            .vx-dialog-body {
+                height  : calc(100vh - 100px);
+                overflow: auto;
+            }
+        }
+
+        &.animate {
+            -webkit-animation: scale-up-center .2s cubic-bezier(.39, .575, .565, 1) 50ms both;
+            animation        : scale-up-center .2s cubic-bezier(.39, .575, .565, 1) 50ms both;
+        }
+    }
+
+    &-head {
+        background     : @greyLight;
+        border-bottom  : 1px solid @greyMain;
+        border-radius  : 4px 4px 0 0;
+        height         : 50px;
+        display        : flex;
+        justify-content: space-between;
+        align-items    : center;
+        padding        : 0 22px;
+    }
+
+    &-title {
+        margin     : 0;
+        color      : #161B2F;
+        font-size  : 14px;
+        line-height: 21px;
+        font-weight: 500;
+    }
+
+    &-close {
+        font-size :12px;
+        color     : @black;
+        padding   : 0 3px;
+        margin    : 0;
+        background: transparent;
+        border    : none;
+        outline   : none;
+        cursor    : pointer;
+    }
+
+    &-body {
+        padding   : 12px 28px;
+        overflow  : auto;
+        overflow-x: hidden;
+
+        &-container {
+            padding   : 4px;
+            background: #FFFFFF;
+
+            .editor-block {
+                min-height: 100px;
+                border    : 1px solid @greyMain;
+            }
+        }
+    }
+
+    &-simple {
+        background       : @white;
+        box-shadow       : 0 0 5px rgb(30 93 211 / 27%);
+        -webkit-animation: scale-up-center .2s cubic-bezier(.39, .575, .565, 1) 50ms both;
+        animation        : scale-up-center .2s cubic-bezier(.39, .575, .565, 1) 50ms both;
+
+        .vx-dialog-title {
+            padding: 8px12px;
+        }
+    }
+
+    &-footer {
+        background   : @greyLight;
+        border-top   : 1px solid @greyMain;
+        border-radius: 0 0 4px 4px;
+        height       : 50px;
+        padding      : 0 20px;
+    }
+}
+
+.error-icon {
+    color    : #C7381B;
+    font-size: 36px;
+    display  : flex;
+    transform: rotate(45deg);
+}
+
+.bin-icon {
+    display      : block;
+    width        : 26px;
+    height       : 40px;
+    border-radius: 50%;
+    z-index      : 2;
+    position     : relative;
+}
+
+.lid {
+    position     : relative;
+    width        : 30px;
+    height       : 2px;
+    left         : -2px;
+    border-radius: 4px;
+}
+
+.lid:before {
+    content      : '';
+    position     : absolute;
+    top          : -3px;
+    right        : 0;
+    left         : 0;
+    width        : 6px;
+    height       : 3px;
+    margin       : 0 auto;
+    border-radius: 10px 10px 0 0;
+}
+
+.box {
+    position     : relative;
+    height       : 34px;
+    margin-top   : 2px;
+    border-radius: 0 0 8px 8px;
+
+    &-inner {
+        background-color: #FFFFFF;
+        position        : relative;
+        top             : 2px;
+        width           : 22px;
+        height          : 30px;
+        margin          : 0 auto;
+        border-radius   : 0 0 5px 5px;
+    }
+}
+
+.bin-lines {
+    position     : relative;
+    top          : 3px;
+    margin       : 0 auto;
+    width        : 2px;
+    height       : 22px;
+    border-radius: 4px;
+
+    &:before,
+    &:after {
+        background-color: #d93b41;
+        width           : 2px;
+        height          : 22px;
+        border-radius   : 4px;
+        content         : '';
+        position        : absolute;
+        transition      : 0.2s ease background-color;
+    }
+
+    &:before {
+        left: -6px;
+    }
+
+    &:after {
+        left: 6px;
+    }
+}
+
+.lid,
+#lid:before,
+.box,
+#bin-lines {
+    background-color: #d93b41;
+    transition      : 0.2s ease background-color;
+}
+
+.bin-icon.active .box {
+    animation: shake 0.2s ease 0.1s;
+}
+
+.bin-icon.active .box-inner {
+    background-color: #d93b41;
+}
+
+.bin-icon.active .bin-lines {
+    background-color: #FFFFFF !important;
+}
+
+.bin-icon.active .bin-lines::before {
+    background-color: #FFFFFF;
+}
+
+.bin-icon.active .bin-lines::after {
+    background-color: #FFFFFF;
+}
+
+.bin-icon.active .lid {
+    animation: lift-up 0.8s ease 0.1s, shake_u 0.8s ease 0.1s, shake_l 0.2s ease 0.8s;
+}
+
+.activateCircle {
+    display      : block;
+    width        : 50px;
+    height       : 50px;
+    background   : transparent;
+    border-radius: 50px;
+    overflow     : hidden;
+    position     : relative;
+    top          : 2px;
+    left         : 2px;
+
+    &:before {
+        width        : 1px;
+        height       : 1px;
+        position     : absolute;
+        top          : 0;
+        bottom       : 0;
+        right        : -1px;
+        margin       : auto;
+        content      : "";
+        border-radius: 50px;
+        transition   : all 300ms ease;
+    }
+
+    span {
+        display          : block;
+        width            : 13px;
+        height           : 3px;
+        background       : #34aa44;
+        margin           : 27px 0 0 7px;
+        -webkit-transform: rotate(45deg);
+        transform        : rotate(45deg);
+
+        &.line-2 {
+            margin   : -7px 0 0 13px;
+            transform: rotate(135deg);
+            width    : 28px;
+        }
+    }
+
+    &.activeActiveIcon {
+        &:before {
+            width     : 55px;
+            height    : 55px;
+            transition: all 300ms ease;
+        }
+
+        span {
+            background: #34aa44;
+            animation : scale-up-hor-left-1 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+
+            &.line-2 {
+                background: #34aa44;
+                animation : scale-up-hor-left-2 0.3s cubic-bezier(0.00, 0.000, 0.000, 0.000) 10ms both;
+            }
+        }
+    }
+}
+
+
+
+
+
+@keyframes lift-up {
+    0% {
+        top: 0;
+    }
+
+    50% {
+        top: -35px;
+    }
+
+    100% {
+        top: 0;
+    }
+}
+
+@keyframes scale-up-hor-left-1 {
+    0% {
+        width    : 0;
+        transform: rotate(45deg) translate(-2px, -5px);
+    }
+
+    50% {
+        width    : 16px;
+        transform: rotate(45deg) translate(2px, 0px);
+    }
+
+    100% {
+        width    : 13px;
+        transform: rotate(45deg) translate(0px, 0px);
+    }
+}
+
+@keyframes scale-up-hor-left-2 {
+    0% {
+        width    : 0;
+        transform: rotate(135deg) translate(-2px, -8px);
+    }
+
+    50% {
+        width    : 0;
+        transform: rotate(135deg) translate(4px, -8px);
+    }
+
+    75% {
+        width    : 32px;
+        transform: rotate(135deg) translate(0, 0);
+    }
+
+    100% {
+        width    : 28px;
+        transform: rotate(135deg) translate(0px, 0px);
+    }
+}
+
+@-webkit-keyframes scale-up-center {
+    0% {
+        -webkit-transform: scale(0.5);
+        transform        : scale(0.5);
+        opacity          : 0;
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+        transform        : scale(1);
+        opacity          : 1;
+    }
+}
+
+@keyframes scale-up-center {
+    0% {
+        -webkit-transform: scale(0.5);
+        transform        : scale(0.5);
+        opacity          : 0;
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+        transform        : scale(1);
+        opacity          : 1;
+    }
+}

package/css-build/less/display/display.less

@@ -0,0 +1,31 @@
+.vx-d-none {
+    display: none !important;
+}
+
+.vx-d-block {
+    display: block !important;
+}
+
+.vx-d-flex {
+    display: flex !important;
+}
+
+.vx-d-table {
+    display: table !important;
+}
+
+.vx-d-inline {
+    display: inline !important;
+}
+
+.vx-d-inline-block {
+    display: inline-block !important;
+}
+
+.vx-d-inline-flex {
+    display: inline-flex !important;
+}
+
+.vx-flex-wrap {
+    flex-wrap: wrap;
+}

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

@@ -0,0 +1,117 @@
+label {
+	&.vx-checkbox-item {
+		display    : flex;
+		align-items: center;
+		cursor     : pointer;
+		margin     : 0;
+		padding    : 0;
+		max-width  : 100%;
+
+		span {
+			display        : inline-flex;
+			align-items    : center;
+			justify-content: center;
+
+			&.checkbox {
+				height       : 16px;
+				width        : 16px;
+				border-radius: 2px;
+				border       : 1px solid #DBDBDB;
+				position     : relative;
+				padding      : 2px;
+				margin-top   : 0px;
+			}
+
+			&.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=checkbox] {
+			display: none;
+
+			&:checked~svg {
+				display: block;
+			}
+
+			&:checked+.checkbox {
+				display: none;
+			}
+
+			&:disabled~* {
+				opacity: .7;
+			}
+		}
+	}
+}
+
+.disabled {
+	opacity: .4 !important;
+}
+
+.checkmark {
+	width            : 16px;
+	height           : 16px;
+	border-radius    : 2px;
+	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;
+}
+
+.checkmark__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;
+	padding-right    : 10px;
+}
+
+.checkmark__check {
+	transform-origin : 50% 50%;
+	stroke-dasharray : 48;
+	stroke-dashoffset: 48;
+	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;
+	}
+}