cy-element-ui 1.0.46 → 1.0.48

package/lib/theme-chalk/src/date-picker/picker.scss

@@ -0,0 +1,197 @@
+@import "../mixins/mixins";
+@import "../common/var";
+@import "../common/transition";
+
+@include b(date-editor) {
+	position: relative;
+	display: inline-block;
+	text-align: left;
+
+	&.el-input,
+	&.el-input__inner {
+		width: 220px;
+	}
+
+	@include m((monthrange)) {
+		&.el-input,
+		&.el-input__inner {
+			width: 300px;
+		}
+	}
+
+	@include m((daterange, timerange)) {
+		&.el-input,
+		&.el-input__inner {
+			width: 350px;
+		}
+	}
+
+	@include m(datetimerange) {
+		&.el-input,
+		&.el-input__inner {
+			width: 400px;
+		}
+	}
+
+	@include m(dates) {
+		.el-input__inner {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	.el-icon-circle-close {
+		cursor: pointer;
+	}
+
+	.el-range__icon {
+		font-size: 14px;
+		margin-left: -5px;
+		color: $--color-text-placeholder;
+		float: left;
+		line-height: 32px;
+	}
+
+	.el-range-input {
+		appearance: none;
+		border: none;
+		outline: none;
+		display: inline-block;
+		height: 100%;
+		margin: 0;
+		padding: 0;
+		width: 39%;
+		text-align: center;
+		font-size: $--font-size-base;
+		color: $--color-text-regular;
+
+		&::placeholder {
+			color: $--color-text-placeholder;
+		}
+	}
+
+	.el-range-separator {
+		display: inline-block;
+		height: 100%;
+		padding: 0 5px;
+		margin: 0;
+		text-align: center;
+		line-height: 32px;
+		font-size: 14px;
+		width: 5%;
+		color: $--color-text-primary;
+	}
+
+	.el-range__close-icon {
+		font-size: 14px;
+		color: $--color-text-placeholder;
+		width: 25px;
+		display: inline-block;
+		float: right;
+		line-height: 32px;
+	}
+}
+
+@include b(range-editor) {
+	&.el-input__inner {
+		display: inline-flex;
+		align-items: center;
+		padding: 3px 10px;
+	}
+
+	.el-range-input {
+		line-height: 1;
+	}
+
+	@include when(active) {
+		border-color: $--color-primary;
+
+		&:hover {
+			border-color: $--color-primary;
+		}
+	}
+
+	@include m(medium) {
+		&.el-input__inner {
+			height: $--input-medium-height;
+		}
+
+		.el-range-separator {
+			line-height: 28px;
+			font-size: $--input-medium-font-size;
+		}
+
+		.el-range-input {
+			font-size: $--input-medium-font-size;
+		}
+
+		.el-range__icon,
+		.el-range__close-icon {
+			line-height: 28px;
+		}
+	}
+
+	@include m(small) {
+		&.el-input__inner {
+			height: $--input-small-height;
+		}
+
+		.el-range-separator {
+			line-height: 24px;
+			font-size: $--input-small-font-size;
+		}
+
+		.el-range-input {
+			font-size: $--input-small-font-size;
+		}
+
+		.el-range__icon,
+		.el-range__close-icon {
+			line-height: 24px;
+		}
+	}
+
+	@include m(mini) {
+		&.el-input__inner {
+			height: $--input-mini-height;
+		}
+
+		.el-range-separator {
+			line-height: 20px;
+			font-size: $--input-mini-font-size;
+		}
+
+		.el-range-input {
+			font-size: $--input-mini-font-size;
+		}
+
+		.el-range__icon,
+		.el-range__close-icon {
+			line-height: 20px;
+		}
+	}
+
+	@include when(disabled) {
+		background-color: $--input-disabled-fill;
+		border-color: $--input-disabled-border;
+		color: $--input-disabled-color;
+		cursor: not-allowed;
+
+		&:hover, &:focus {
+			border-color: $--input-disabled-border;
+		}
+
+		input {
+			background-color: $--input-disabled-fill;
+			color: $--input-disabled-color;
+			cursor: not-allowed;
+			&::placeholder {
+				color: $--input-disabled-placeholder-color;
+			}
+		}
+
+		.el-range-separator {
+			color: $--input-disabled-color;
+		}
+	}
+}

package/lib/theme-chalk/src/date-picker/time-picker.scss

@@ -0,0 +1,85 @@
+@import "../common/var";
+
+@include b(time-panel) {
+	margin: 5px 0;
+	border: solid 1px $--datepicker-border-color;
+	background-color: $--color-white;
+	box-shadow: $--box-shadow-light;
+	border-radius: 2px;
+	position: absolute;
+	width: 180px;
+	left: 0;
+	z-index: $--index-top;
+	user-select: none;
+	box-sizing: content-box;
+
+	@include e(content) {
+		font-size: 0;
+		position: relative;
+		overflow: hidden;
+
+		&::after, &::before {
+			content: "";
+			top: 50%;
+			position: absolute;
+			margin-top: -15px;
+			height: 32px;
+			z-index: -1;
+			left: 0;
+			right: 0;
+			box-sizing: border-box;
+			padding-top: 6px;
+			text-align: left;
+			border-top: 1px solid $--border-color-light;
+			border-bottom: 1px solid $--border-color-light;
+		}
+
+		&::after {
+			left: 50%;
+			margin-left: 12%;
+			margin-right: 12%;
+		}
+
+		&::before {
+			padding-left: 50%;
+			margin-right: 12%;
+			margin-left: 12%;
+		}
+
+		&.has-seconds {
+			&::after {
+				left: calc(100% / 3 * 2);
+			}
+
+			&::before {
+				padding-left: calc(100% / 3);
+			}
+		}
+	}
+
+	@include e(footer) {
+		border-top: 1px solid $--datepicker-inner-border-color;
+		padding: 4px;
+		height: 36px;
+		line-height: 25px;
+		text-align: right;
+		box-sizing: border-box;
+	}
+
+	@include e(btn) {
+		border: none;
+		line-height: 28px;
+		padding: 0 5px;
+		margin: 0 5px;
+		cursor: pointer;
+		background-color: transparent;
+		outline: none;
+		font-size: 12px;
+		color: $--color-text-primary;
+
+		&.confirm {
+			font-weight: 800;
+			color: $--datepicker-active-color;
+		}
+	}
+}

package/lib/theme-chalk/src/date-picker/time-range-picker.scss

@@ -0,0 +1,31 @@
+@import "../common/var";
+
+@include b(time-range-picker) {
+	width: 354px;
+	overflow: visible;
+
+	@include e(content) {
+		position: relative;
+		text-align: center;
+		padding: 10px;
+	}
+
+	@include e(cell) {
+		box-sizing: border-box;
+		margin: 0;
+		padding: 4px 7px 7px;
+		width: 50%;
+		display: inline-block;
+	}
+
+	@include e(header) {
+		margin-bottom: 5px;
+		text-align: center;
+		font-size: 14px;
+	}
+
+	@include e(body) {
+		border-radius:2px;
+		border: 1px solid $--datepicker-border-color;
+	}
+}

package/lib/theme-chalk/src/date-picker/time-spinner.scss

@@ -0,0 +1,110 @@
+@import "../common/var";
+
+@include b(time-spinner) {
+	&.has-seconds {
+		.el-time-spinner__wrapper {
+			width: 33.3%;
+		}
+	}
+
+	@include e(wrapper) {
+		max-height: 190px;
+		overflow: auto;
+		display: inline-block;
+		width: 50%;
+		vertical-align: top;
+		position: relative;
+
+		& .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
+			padding-bottom: 15px;
+		}
+
+		@include when(arrow) {
+			box-sizing: border-box;
+			text-align: center;
+			overflow: hidden;
+
+			.el-time-spinner__list {
+				transform: translateY(-32px);
+			}
+
+			.el-time-spinner__item:hover:not(.disabled):not(.active) {
+				background: $--color-white;
+				cursor: default;
+			}
+		}
+	}
+
+	@include e(arrow) {
+		font-size: 12px;
+		color: $--color-text-secondary;
+		position: absolute;
+		left: 0;
+		width: 100%;
+		z-index: $--index-normal;
+		text-align: center;
+		height: 30px;
+		line-height: 30px;
+		cursor: pointer;
+
+		&:hover {
+			color: $--color-primary;
+		}
+
+		&.el-icon-arrow-up {
+			top: 10px;
+		}
+
+		&.el-icon-arrow-down {
+			bottom: 10px;
+		}
+	}
+
+	@include e(input) {
+		&.el-input {
+			width: 70%;
+
+			.el-input__inner {
+				padding: 0;
+				text-align: center;
+			}
+		}
+	}
+
+	@include e(list) {
+		padding: 0;
+		margin: 0;
+		list-style: none;
+		text-align: center;
+
+		&::after,
+		&::before {
+			content: '';
+			display: block;
+			width: 100%;
+			height: 80px;
+		}
+	}
+
+	@include e(item) {
+		height: 32px;
+		line-height: 32px;
+		font-size: 12px;
+		color: $--color-text-regular;
+
+		&:hover:not(.disabled):not(.active) {
+			background: $--background-color-base;
+			cursor: pointer;
+		}
+
+		&.active:not(.disabled) {
+			color: $--color-text-primary;
+			font-weight: bold;
+		}
+
+		&.disabled {
+			color: $--color-text-placeholder;
+			cursor: not-allowed;
+		}
+	}
+}

package/lib/theme-chalk/src/date-picker/year-table.scss

@@ -0,0 +1,51 @@
+@import "../common/var";
+
+@include b(year-table) {
+	font-size: 12px;
+	margin: -1px;
+	border-collapse: collapse;
+
+	.el-icon {
+		color: $--datepicker-icon-color;
+	}
+
+	td {
+		text-align: center;
+		padding: 20px 3px;
+		cursor: pointer;
+
+		&.today {
+			.cell {
+				color: $--color-primary;
+				font-weight: bold;
+			}
+		}
+
+		&.disabled .cell {
+			background-color: $--background-color-base;
+			cursor: not-allowed;
+			color: $--color-text-placeholder;
+
+			&:hover {
+				color: $--color-text-placeholder;
+			}
+		}
+
+		.cell {
+			width: 48px;
+			height: 32px;
+			display: block;
+			line-height: 32px;
+			color: $--datepicker-font-color;
+			margin: 0 auto;
+
+			&:hover {
+				color: $--datepicker-hover-font-color;
+			}
+		}
+
+		&.current:not(.disabled) .cell {
+			color: $--datepicker-active-color;
+		}
+	}
+}

package/lib/theme-chalk/src/date-picker.scss

@@ -0,0 +1,12 @@
+@import "./date-picker/date-table.scss";
+@import "./date-picker/month-table.scss";
+@import "./date-picker/year-table.scss";
+@import "./date-picker/time-spinner.scss";
+@import "./date-picker/picker.scss";
+@import "./date-picker/date-picker.scss";
+@import "./date-picker/date-range-picker.scss";
+@import "./date-picker/time-range-picker.scss";
+@import "./date-picker/time-picker.scss";
+@import "./input.scss";
+@import "./scrollbar.scss";
+@import "./popper";

package/lib/theme-chalk/src/descriptions-item.scss

@@ -0,0 +1,42 @@
+@import 'mixins/mixins';
+@import 'common/var';
+
+@include b(descriptions-item) {
+	vertical-align: top;
+
+	@include e(container) {
+		display: flex;
+
+		.el-descriptions-item__label,
+		.el-descriptions-item__content {
+			display: inline-flex;
+			align-items: baseline;
+		}
+		.el-descriptions-item__content {
+			flex: 1;
+		}
+	}
+
+	@include e(label) {
+		&.has-colon {
+			&::after {
+				content: ':';
+				position: relative;
+				top: -0.5px;
+			}
+		}
+		&.is-bordered-label {
+			font-weight: bold;
+			color: $--color-text-secondary;
+			background: $--descriptions-item-bordered-label-background;
+		}
+		&:not(.is-bordered-label) {
+			margin-right: 10px;
+		}
+	}
+
+	@include e(content) {
+		word-break: break-word;
+		overflow-wrap: break-word;
+	}
+}

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

@@ -0,0 +1,111 @@
+@import 'mixins/mixins';
+@import 'common/var';
+@import 'descriptions-item';
+
+@include b(descriptions) {
+	box-sizing: border-box;
+	font-size: $--font-size-base;
+	color: $--color-text-primary;
+
+	@include e(header) {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: $--descriptions-header-margin-bottom;
+
+		@include e(title) {
+			font-size: $--descriptions-title-font-size;
+			font-weight: bold;
+		}
+	}
+
+	@include e(body) {
+		color: $--color-text-regular;
+		background-color: $--color-white;
+
+		.el-descriptions__table {
+			border-collapse: collapse;
+			width: 100%;
+			table-layout: fixed;
+
+			.el-descriptions-item__cell {
+				box-sizing: border-box;
+				text-align: left;
+				font-weight: normal;
+				line-height: 1.5;
+
+				@include when(left) {
+					text-align: left;
+				}
+
+				@include when(center) {
+					text-align: center;
+				}
+
+				@include when(right) {
+					text-align: right;
+				}
+			}
+		}
+	}
+
+	.is-bordered {
+		table-layout: auto;
+		.el-descriptions-item__cell {
+			border: $--descriptions-table-border;
+			padding: 12px 10px;
+		}
+	}
+
+	:not(.is-bordered) {
+		.el-descriptions-item__cell {
+			padding-bottom: 12px;
+		}
+	}
+
+	@include m(medium) {
+		&.is-bordered {
+			.el-descriptions-item__cell {
+				padding: 10px;
+			}
+		}
+
+		&:not(.is-bordered) {
+			.el-descriptions-item__cell {
+				padding-bottom: 10px;
+			}
+		}
+	}
+
+	@include m(small) {
+		font-size: 12px;
+
+		&.is-bordered {
+			.el-descriptions-item__cell {
+				padding: 8px 10px;
+			}
+		}
+
+		&:not(.is-bordered) {
+			.el-descriptions-item__cell {
+				padding-bottom: 8px;
+			}
+		}
+	}
+
+	@include m(mini) {
+		font-size: 12px;
+
+		&.is-bordered {
+			.el-descriptions-item__cell {
+				padding: 6px 10px;
+			}
+		}
+
+		&:not(.is-bordered) {
+			.el-descriptions-item__cell {
+				padding-bottom: 6px;
+			}
+		}
+	}
+}