cy-element-ui 1.0.47 → 1.0.48

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

@@ -0,0 +1,199 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import 'mixins/button';
+@import "common/var";
+
+@include b(radio) {
+	color: $--radio-font-color;
+	font-weight: $--radio-font-weight;
+	line-height: 1;
+	position: relative;
+	cursor: pointer;
+	display: inline-block;
+	white-space: nowrap;
+	outline: none;
+	font-size: $--font-size-base;
+	margin-right: 30px;
+	@include utils-user-select(none);
+
+	@include when(bordered) {
+		padding: $--radio-bordered-padding;
+		border-radius: $--border-radius-base;
+		border: $--border-base;
+		box-sizing: border-box;
+		height: $--radio-bordered-height;
+
+		&.is-checked {
+			border-color: $--color-primary;
+		}
+
+		&.is-disabled {
+			cursor: not-allowed;
+			border-color: $--border-color-lighter;
+		}
+
+		& + .el-radio.is-bordered {
+			margin-left: 10px;
+		}
+	}
+
+	@include m(medium) {
+		&.is-bordered {
+			padding: $--radio-bordered-medium-padding;
+			border-radius: $--button-medium-border-radius;
+			height: $--radio-bordered-medium-height;
+			.el-radio__label {
+				font-size: $--button-medium-font-size;
+			}
+			.el-radio__inner {
+				height: $--radio-bordered-medium-input-height;
+				width: $--radio-bordered-medium-input-width;
+			}
+		}
+	}
+	@include m(small) {
+		&.is-bordered {
+			padding: $--radio-bordered-small-padding;
+			border-radius: $--button-small-border-radius;
+			height: $--radio-bordered-small-height;
+			.el-radio__label {
+				font-size: $--button-small-font-size;
+			}
+			.el-radio__inner {
+				height: $--radio-bordered-small-input-height;
+				width: $--radio-bordered-small-input-width;
+			}
+		}
+	}
+	@include m(mini) {
+		&.is-bordered {
+			padding: $--radio-bordered-mini-padding;
+			border-radius: $--button-mini-border-radius;
+			height: $--radio-bordered-mini-height;
+			.el-radio__label {
+				font-size: $--button-mini-font-size;
+			}
+			.el-radio__inner {
+				height: $--radio-bordered-mini-input-height;
+				width: $--radio-bordered-mini-input-width;
+			}
+		}
+	}
+
+	&:last-child {
+		margin-right: 0;
+	}
+
+	@include e(input) {
+		white-space: nowrap;
+		cursor: pointer;
+		outline: none;
+		display: inline-block;
+		line-height: 1;
+		position: relative;
+		vertical-align: middle;
+
+		@include when(disabled) {
+			.el-radio__inner {
+				background-color: $--radio-disabled-input-fill;
+				border-color: $--radio-disabled-input-border-color;
+				cursor: not-allowed;
+
+				&::after {
+					cursor: not-allowed;
+					background-color: $--radio-disabled-icon-color;
+				}
+
+				& + .el-radio__label {
+					cursor: not-allowed;
+				}
+			}
+			&.is-checked {
+				.el-radio__inner {
+					background-color: $--radio-disabled-checked-input-fill;
+					border-color: $--radio-disabled-checked-input-border-color;
+
+					&::after {
+						background-color: $--radio-disabled-checked-icon-color;
+					}
+				}
+			}
+			& + span.el-radio__label {
+				color: $--color-text-placeholder;
+				cursor: not-allowed;
+			}
+		}
+
+		@include when(checked) {
+			.el-radio__inner {
+				border-color: $--radio-checked-input-border-color;
+				background: $--radio-checked-icon-color;
+
+				&::after {
+					transform: translate(-50%, -50%) scale(1);
+				}
+			}
+
+			& + .el-radio__label {
+				color: $--radio-checked-font-color;
+			}
+		}
+
+		@include when(focus) {
+			.el-radio__inner {
+				border-color: $--radio-input-border-color-hover;
+			}
+		}
+	}
+	@include e(inner) {
+		border: $--radio-input-border;
+		border-radius: $--radio-input-border-radius;
+		width: $--radio-input-width;
+		height: $--radio-input-height;
+		background-color: $--radio-input-background-color;
+		position: relative;
+		cursor: pointer;
+		display: inline-block;
+		box-sizing: border-box;
+
+		&:hover {
+			border-color: $--radio-input-border-color-hover;
+		}
+
+		&::after {
+			width: 4px;
+			height: 4px;
+			border-radius: $--radio-input-border-radius;
+			background-color: $--color-white;
+			content: "";
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%) scale(0);
+			transition: transform .15s ease-in;
+		}
+	}
+
+	@include e(original) {
+		opacity: 0;
+		outline: none;
+		position: absolute;
+		z-index: -1;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: 0;
+	}
+
+	&:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/
+		.el-radio__inner {
+			box-shadow: 0 0 2px 2px $--radio-input-border-color-hover;
+		}
+	}
+
+	@include e(label) {
+		font-size: $--radio-font-size;
+		padding-left: 10px;
+	}
+}

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

@@ -0,0 +1,49 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(rate) {
+	height: $--rate-height;
+	line-height: 1;
+
+	&:focus, &:active {
+		outline-width: 0;
+	}
+
+	@include e(item) {
+		display: inline-block;
+		position: relative;
+		font-size: 0;
+		vertical-align: middle;
+	}
+
+	@include e(icon) {
+		position: relative;
+		display: inline-block;
+		font-size: $--rate-icon-size;
+		margin-right: $--rate-icon-margin;
+		color: $--rate-icon-color;
+		transition: .3s;
+		&.hover {
+			transform: scale(1.15);
+		}
+
+		.path2 {
+			position: absolute;
+			left: 0;
+			top: 0;
+		}
+	}
+
+	@include e(decimal) {
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: inline-block;
+		overflow: hidden;
+	}
+
+	@include e(text) {
+		font-size: $--rate-font-size;
+		vertical-align: middle;
+	}
+}

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

@@ -0,0 +1,79 @@
+@import 'common/var';
+
+body {
+	font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+	font-weight: 400;
+	font-size: $--font-size-base;
+	color: $--color-black;
+	-webkit-font-smoothing: antialiased;
+}
+
+a {
+	color: $--color-primary;
+	text-decoration: none;
+
+	&:hover,
+	&:focus {
+		color: mix($--color-white, $--color-primary, $--button-hover-tint-percent);
+	}
+
+	&:active {
+		color: mix($--color-black, $--color-primary, $--button-active-shade-percent);
+	}
+}
+
+h1, h2, h3, h4, h5, h6 {
+	color: $--color-text-regular;
+	font-weight: inherit;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+h1 {
+	font-size: #{$--font-size-base + 6px};
+}
+
+h2 {
+	font-size: #{$--font-size-base + 4px};
+}
+
+h3 {
+	font-size: #{$--font-size-base + 2px};
+}
+
+h4, h5, h6, p {
+	font-size: inherit;
+}
+
+p {
+	line-height: 1.8;
+
+	&:first-child {
+		margin-top: 0;
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+sup, sub {
+	font-size: #{$--font-size-base - 1px};
+}
+
+small {
+	font-size: #{$--font-size-base - 2px};
+}
+
+hr {
+	margin-top: 20px;
+	margin-bottom: 20px;
+	border: 0;
+	border-top: 1px solid #eeeeee;
+}

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

@@ -0,0 +1,61 @@
+@import 'mixins/mixins';
+@import 'common/var';
+
+@include b(result) {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	text-align: center;
+	box-sizing: border-box;
+	padding: $--result-padding;
+
+	@include e(icon) {
+		svg {
+			width: $--result-icon-font-size;
+			height: $--result-icon-font-size;
+		}
+	}
+
+	@include e(title) {
+		margin-top: $--result-title-margin-top;
+
+		p {
+			margin: 0;
+			font-size: $--result-title-font-size;
+			color: $--color-text-primary;
+			line-height: 1.3;
+		}
+	}
+
+	@include e(subtitle) {
+		margin-top: $--result-subtitle-margin-top;
+
+		p {
+			margin: 0;
+			font-size: $--font-size-base;
+			color: $--color-text-regular;
+			line-height: 1.3;
+		}
+	}
+
+	@include e(extra) {
+		margin-top: $--result-extra-margin-top;
+	}
+
+	.icon-success {
+		fill: $--result-success-color;
+	}
+
+	.icon-error {
+		fill: $--result-danger-color;
+	}
+
+	.icon-info {
+		fill: $--result-info-color;
+	}
+
+	.icon-warning {
+		fill: $--result-warning-color;
+	}
+}

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

@@ -0,0 +1,43 @@
+@import "common/var";
+@import "mixins/mixins";
+@import "mixins/utils";
+
+@include b(row) {
+	position: relative;
+	box-sizing: border-box;
+	@include utils-clearfix;
+
+	@include m(flex) {
+		display: flex;
+		&:before,
+		&:after {
+			display: none;
+		}
+
+		@include when(justify-center) {
+			justify-content: center;
+		}
+		@include when(justify-end) {
+			justify-content: flex-end;
+		}
+		@include when(justify-space-between) {
+			justify-content: space-between;
+		}
+		@include when(justify-space-around) {
+			justify-content: space-around;
+		}
+
+		@include when(align-top) {
+			align-items: flex-start;
+		}
+
+		@include when(align-middle) {
+			align-items: center;
+		}
+		@include when(align-bottom) {
+			align-items: flex-end;
+		}
+	}
+
+}
+

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

@@ -0,0 +1,72 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(scrollbar) {
+	overflow: hidden;
+	position: relative;
+
+	&:hover,
+	&:active,
+	&:focus {
+		> .el-scrollbar__bar {
+			opacity: 1;
+			transition: opacity 340ms ease-out;
+		}
+	}
+
+	@include e(wrap) {
+		overflow: scroll;
+		height: 100%;
+
+		@include m(hidden-default) {
+			scrollbar-width: none;
+			&::-webkit-scrollbar {
+				width: 0;
+				height: 0;
+			}
+		}
+	}
+
+	@include e(thumb) {
+		position: relative;
+		display: block;
+		width: 0;
+		height: 0;
+		cursor: pointer;
+		border-radius: inherit;
+		background-color: $--scrollbar-background-color;
+		transition: .3s background-color;
+
+		&:hover {
+			background-color: $--scrollbar-hover-background-color;
+		}
+	}
+
+	@include e(bar) {
+		position: absolute;
+		right: 2px;
+		bottom: 2px;
+		z-index: 1;
+		border-radius: 4px;
+		opacity: 0;
+		transition: opacity 120ms ease-out;
+
+		@include when(vertical) {
+			width: 6px;
+			top: 2px;
+
+			> div {
+				width: 100%;
+			}
+		}
+
+		@include when(horizontal) {
+			height: 6px;
+			left: 2px;
+
+			> div {
+				height: 100%;
+			}
+		}
+	}
+}

package/lib/theme-chalk/src/select-dropdown.scss

@@ -0,0 +1,62 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "./popper";
+
+@include b(select-dropdown) {
+	position: absolute;
+	z-index: #{$--index-top + 1};
+	border: $--select-dropdown-border;
+	border-radius: $--border-radius-base;
+	background-color: $--select-dropdown-background;
+	box-shadow: $--select-dropdown-shadow;
+	box-sizing: border-box;
+	margin: 5px 0;
+
+	@include when(multiple) {
+		& .el-select-dropdown__item {
+			padding-right: 40px;
+		}
+		& .el-select-dropdown__item.selected {
+			color: $--select-option-selected-font-color;
+			background-color: $--select-dropdown-background;
+
+			&.hover {
+				background-color: $--select-option-hover-background;
+			}
+
+			&::after {
+				position: absolute;
+				right: 20px;
+				font-family: 'element-icons';
+				content: "\e6da";
+				font-size: 12px;
+				font-weight: bold;
+				-webkit-font-smoothing: antialiased;
+				-moz-osx-font-smoothing: grayscale;
+			}
+		}
+	}
+
+	.el-scrollbar.is-empty .el-select-dropdown__list{
+		padding: 0;
+	}
+}
+
+@include b(select-dropdown__empty) {
+	padding: $--select-dropdown-empty-padding;
+	margin: 0;
+	text-align: center;
+	color: $--select-dropdown-empty-color;
+	font-size: $--select-font-size;
+}
+
+@include b(select-dropdown__wrap) {
+	max-height: $--select-dropdown-max-height;
+}
+
+@include b(select-dropdown__list) {
+	list-style: none;
+	padding: $--select-dropdown-padding;
+	margin: 0;
+	box-sizing: border-box;
+}

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

@@ -0,0 +1,152 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+@import "select-dropdown";
+@import "input";
+@import "tag";
+@import "option";
+@import "option-group";
+@import "scrollbar";
+
+@include b(select) {
+	display: inline-block;
+	position: relative;
+
+	.el-select__tags
+		>span {
+			display: contents;
+		}
+
+	&:hover {
+		.el-input__inner {
+			border-color: $--select-border-color-hover;
+		}
+	}
+
+	.el-input__inner {
+		cursor: pointer;
+		padding-right: 35px;
+
+		&:focus {
+			border-color: $--select-input-focus-border-color;
+		}
+	}
+
+	.el-input {
+		& .el-select__caret {
+			color: $--select-input-color;
+			font-size: $--select-input-font-size;
+			transition: transform .3s;
+			transform: rotateZ(180deg);
+			cursor: pointer;
+
+			@include when(reverse) {
+				transform: rotateZ(0deg);
+			}
+
+			@include when(show-close) {
+				font-size: $--select-font-size;
+				text-align: center;
+				transform: rotateZ(180deg);
+				border-radius: $--border-radius-circle;
+				color: $--select-input-color;
+				transition: $--color-transition-base;
+
+				&:hover {
+					color: $--select-close-hover-color;
+				}
+			}
+		}
+
+		&.is-disabled {
+			& .el-input__inner {
+				cursor: not-allowed;
+
+				&:hover {
+					border-color: $--select-disabled-border;
+				}
+			}
+		}
+
+		&.is-focus .el-input__inner {
+			border-color: $--select-input-focus-border-color;
+		}
+	}
+
+	> .el-input {
+		display: block;
+	}
+
+	@include e(input) {
+		border: none;
+		outline: none;
+		padding: 0;
+		margin-left: 15px;
+		color: $--select-multiple-input-color;
+		font-size: $--select-font-size;
+		appearance: none;
+		height: 28px;
+		background-color: transparent;
+		@include when(mini) {
+			height: 14px;
+		}
+	}
+
+	@include e(close) {
+		cursor: pointer;
+		position: absolute;
+		top: 8px;
+		z-index: $--index-top;
+		right: 25px;
+		color: $--select-input-color;
+		line-height: 18px;
+		font-size: $--select-input-font-size;
+
+		&:hover {
+			color: $--select-close-hover-color;
+		}
+	}
+
+	@include e(tags) {
+		position: absolute;
+		line-height: normal;
+		white-space: normal;
+		z-index: $--index-normal;
+		top: 50%;
+		transform: translateY(-50%);
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	@include e(tags-text) {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.el-tag {
+		box-sizing: border-box;
+		border-color: transparent;
+		margin: 2px 0 2px 6px;
+		background-color: #f0f2f5;
+		display: flex;
+		max-width: 100%;
+		align-items: center;
+
+		&__close.el-icon-close {
+			background-color: $--color-text-placeholder;
+			top: 0;
+			color: $--color-white;
+			flex-shrink: 0;
+
+			&:hover {
+				background-color: $--color-text-secondary;
+			}
+
+			&::before {
+				display: block;
+				transform: translate(0, .5px);
+			}
+		}
+	}
+}