cy-element-ui 1.0.47 → 1.0.48

package/lib/theme-chalk/src/image.scss

@@ -0,0 +1,179 @@
+@import "mixins/mixins";
+@import "common/var";
+
+%size {
+	width: 100%;
+	height: 100%;
+}
+
+@include b(image) {
+	position: relative;
+	display: inline-block;
+	overflow: hidden;
+
+	@include e(inner) {
+		@extend %size;
+		vertical-align: top;
+
+		@include m(center) {
+			position: relative;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			display: block;
+		}
+	}
+
+	@include e(placeholder) {
+		@extend %size;
+		background: $--background-color-base;
+	}
+
+	@include e(error) {
+		@extend %size;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 14px;
+		background: $--background-color-base;
+		color: $--color-text-placeholder;
+		vertical-align: middle;
+	}
+
+	@include e(preview) {
+		cursor: pointer;
+	}
+}
+
+
+@include b(image-viewer) {
+
+
+	@include e(wrapper) {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+
+	@include e(btn) {
+		position: absolute;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 50%;
+		opacity: .8;
+		cursor: pointer;
+		box-sizing: border-box;
+		user-select: none;
+	}
+
+	@include e(close) {
+		top: 40px;
+		right: 40px;
+		width: 40px;
+		height: 40px;
+		font-size: 24px;
+		color: #fff;
+		background-color: #606266;
+	}
+
+	@include e(canvas) {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	@include e(actions) {
+		left: 50%;
+		bottom: 30px;
+		transform: translateX(-50%);
+		width: 282px;
+		height: 44px;
+		padding: 0 23px;
+		background-color: #606266;
+		border-color: #fff;
+		border-radius: 22px;
+
+		@include e(actions__inner) {
+			width: 100%;
+			height: 100%;
+			text-align: justify;
+			cursor: default;
+			font-size: 23px;
+			color: #fff;
+			display: flex;
+			align-items: center;
+			justify-content: space-around;
+		}
+	}
+
+	@include e(prev){
+		top: 50%;
+		transform: translateY(-50%);
+		width: 44px;
+		height: 44px;
+		font-size: 24px;
+		color: #fff;
+		background-color: #606266;
+		border-color: #fff;
+		left: 40px;
+	}
+
+	@include e(next){
+		top: 50%;
+		transform: translateY(-50%);
+		width: 44px;
+		height: 44px;
+		font-size: 24px;
+		color: #fff;
+		background-color: #606266;
+		border-color: #fff;
+		right: 40px;
+		text-indent: 2px;
+	}
+
+	@include e(mask) {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		left: 0;
+		opacity: .5;
+		background: #000;
+	}
+}
+
+.viewer-fade-enter-active {
+	animation: viewer-fade-in .3s;
+}
+
+.viewer-fade-leave-active {
+	animation: viewer-fade-out .3s;
+}
+
+@keyframes viewer-fade-in {
+	0% {
+		transform: translate3d(0, -20px, 0);
+		opacity: 0;
+	}
+	100% {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes viewer-fade-out {
+	0% {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+	100% {
+		transform: translate3d(0, -20px, 0);
+		opacity: 0;
+	}
+}

package/lib/theme-chalk/src/index.scss

@@ -0,0 +1,90 @@
+@import "./base.scss";
+@import "./pagination.scss";
+@import "./dialog.scss";
+@import "./autocomplete.scss";
+@import "./dropdown.scss";
+@import "./dropdown-menu.scss";
+@import "./dropdown-item.scss";
+@import "./menu.scss";
+@import "./submenu.scss";
+@import "./menu-item.scss";
+@import "./menu-item-group.scss";
+@import "./input.scss";
+@import "./input-number.scss";
+@import "./radio.scss";
+@import "./radio-group.scss";
+@import "./radio-button.scss";
+@import "./checkbox.scss";
+@import "./checkbox-button.scss";
+@import "./checkbox-group.scss";
+@import "./switch.scss";
+@import "./select.scss";
+@import "./button.scss";
+@import "./button-group.scss";
+@import "./table.scss";
+@import "./table-column.scss";
+@import "./date-picker.scss";
+@import "./time-select.scss";
+@import "./time-picker.scss";
+@import "./popover.scss";
+@import "./tooltip.scss";
+@import "./message-box.scss";
+@import "./breadcrumb.scss";
+@import "./breadcrumb-item.scss";
+@import "./form.scss";
+@import "./form-item.scss";
+@import "./tabs.scss";
+@import "./tab-pane.scss";
+@import "./tag.scss";
+@import "./tree.scss";
+@import "./alert.scss";
+@import "./notification.scss";
+@import "./slider.scss";
+@import "./loading.scss";
+@import "./row.scss";
+@import "./col.scss";
+@import "./upload.scss";
+@import "./progress.scss";
+@import "./spinner.scss";
+@import "./message.scss";
+@import "./badge.scss";
+@import "./card.scss";
+@import "./rate.scss";
+@import "./steps.scss";
+@import "./step.scss";
+@import "./carousel.scss";
+@import "./scrollbar.scss";
+@import "./carousel-item.scss";
+@import "./collapse.scss";
+@import "./collapse-item.scss";
+@import "./cascader.scss";
+@import "./color-picker.scss";
+@import "./transfer.scss";
+@import "./container.scss";
+@import "./header.scss";
+@import "./aside.scss";
+@import "./main.scss";
+@import "./footer.scss";
+@import "./timeline.scss";
+@import "./timeline-item.scss";
+@import "./link.scss";
+@import "./divider.scss";
+@import "./image.scss";
+@import "./calendar.scss";
+@import "./backtop.scss";
+@import "./infinite-scroll.scss";
+@import "./page-header.scss";
+@import "./cascader-panel.scss";
+@import "./avatar.scss";
+@import "./drawer.scss";
+@import "./statistic.scss";
+@import "./popconfirm.scss";
+@import "./skeleton.scss";
+@import "./skeleton-item.scss";
+@import "./empty.scss";
+@import "./descriptions.scss";
+@import "./descriptions-item.scss";
+@import "./result.scss";
+
+
+@import "../../theme-cy/src";

package/lib/theme-chalk/src/input-number.scss

@@ -0,0 +1,180 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "input";
+
+@include b(input-number) {
+	position: relative;
+	display: inline-block;
+	width: 180px;
+	line-height: #{$--input-height - 2};
+
+	.el-input {
+		display: block;
+
+		&__inner {
+			-webkit-appearance: none;
+			padding-left: #{$--input-height + 10};
+			padding-right: #{$--input-height + 10};
+			text-align: center;
+		}
+	}
+
+	@include e((increase, decrease)) {
+		position: absolute;
+		z-index: 1;
+		top: 1px;
+		width: $--input-height;
+		height: auto;
+		text-align: center;
+		background: $--background-color-base;
+		color: $--color-text-regular;
+		cursor: pointer;
+		font-size: 13px;
+
+		&:hover {
+			color: $--color-primary;
+
+			&:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
+				border-color: $--input-focus-border;
+			}
+		}
+
+		&.is-disabled {
+			color: $--disabled-color-base;
+			cursor: not-allowed;
+		}
+	}
+
+	@include e(increase) {
+		right: 1px;
+		border-radius: 0 $--border-radius-base $--border-radius-base 0;
+		border-left: $--border-base;
+	}
+
+	@include e(decrease) {
+		left: 1px;
+		border-radius: $--border-radius-base 0 0 $--border-radius-base;
+		border-right: $--border-base;
+	}
+
+	@include when(disabled) {
+		@include e((increase, decrease)) {
+			border-color: $--disabled-border-base;
+			color: $--disabled-border-base;
+
+			&:hover {
+				color: $--disabled-border-base;
+				cursor: not-allowed;
+			}
+		}
+	}
+
+	@include m(medium) {
+		width: 200px;
+		line-height: #{$--input-medium-height - 2};
+
+		@include e((increase, decrease)) {
+			width: $--input-medium-height;
+			font-size: $--input-medium-font-size;
+		}
+
+		.el-input__inner {
+			padding-left: #{$--input-medium-height + 7};
+			padding-right: #{$--input-medium-height + 7};
+		}
+	}
+
+	@include m(small) {
+		width: 130px;
+		line-height: #{$--input-small-height - 2};
+
+		@include e((increase, decrease)) {
+			width: $--input-small-height;
+			font-size: $--input-small-font-size;
+
+			[class*=el-icon] {
+				transform: scale(.9);
+			}
+		}
+
+		.el-input__inner {
+			padding-left: #{$--input-small-height + 7};
+			padding-right: #{$--input-small-height + 7};
+		}
+	}
+
+	@include m(mini) {
+		width: 130px;
+		line-height: #{$--input-mini-height - 2};
+
+		@include e((increase, decrease)) {
+			width: $--input-mini-height;
+			font-size: $--input-mini-font-size;
+
+			[class*=el-icon] {
+				transform: scale(.8);
+			}
+		}
+
+		.el-input__inner {
+			padding-left: #{$--input-mini-height + 7};
+			padding-right: #{$--input-mini-height + 7};
+		}
+	}
+
+	@include when(without-controls) {
+		.el-input__inner {
+			padding-left: 15px;
+			padding-right: 15px;
+		}
+	}
+
+	@include when(controls-right) {
+		.el-input__inner {
+			padding-left: 15px;
+			padding-right: #{$--input-height + 10};
+		}
+
+		@include e((increase, decrease)) {
+			height: auto;
+			line-height: #{($--input-height - 2) / 2};
+
+			[class*=el-icon] {
+				transform: scale(.8);
+			}
+		}
+
+		@include e(increase) {
+			border-radius: 0 $--border-radius-base 0 0;
+			border-bottom: $--border-base;
+		}
+
+		@include e(decrease) {
+			right: 1px;
+			bottom: 1px;
+			top: auto;
+			left: auto;
+			border-right: none;
+			border-left: $--border-base;
+			border-radius: 0 0 $--border-radius-base 0;
+		}
+
+		&[class*=medium] {
+			[class*=increase], [class*=decrease] {
+				line-height: #{($--input-medium-height - 2) / 2};
+			}
+		}
+
+		&[class*=small] {
+			[class*=increase], [class*=decrease] {
+				line-height: #{($--input-small-height - 2) / 2};
+			}
+		}
+
+		&[class*=mini] {
+			[class*=increase], [class*=decrease] {
+				line-height: #{($--input-mini-height - 2) / 2};
+			}
+		}
+	}
+}