cy-element-ui 1.0.46 → 1.0.48

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

@@ -0,0 +1,295 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+@import "select";
+
+@include b(pagination) {
+	white-space: nowrap;
+	padding: 2px 5px;
+	color: $--pagination-font-color;
+	font-weight: bold;
+	@include utils-clearfix;
+
+	span:not([class*=suffix]),
+	button {
+		display: inline-block;
+		font-size: $--pagination-font-size;
+		min-width: $--pagination-button-width;
+		height: $--pagination-button-height;
+		line-height: $--pagination-button-height;
+		vertical-align: top;
+		box-sizing: border-box;
+	}
+
+	.el-input__inner {
+		text-align: center;
+		-moz-appearance: textfield;
+		line-height: normal;
+	}
+
+	// pagesize 的下拉 icon
+	.el-input__suffix {
+		right: 0;
+		transform: scale(.8);
+	}
+
+	.el-select .el-input {
+		width: 100px;
+		margin: 0 5px;
+
+		.el-input__inner {
+			padding-right: 25px;
+			border-radius: $--pagination-border-radius;
+		}
+	}
+
+	button {
+		border: none;
+		padding: 0 6px;
+		background: transparent;
+
+		&:focus {
+			outline: none;
+		}
+
+		&:hover {
+			color: $--pagination-hover-color;
+		}
+
+		&:disabled {
+			color: $--pagination-button-disabled-color;
+			background-color: $--pagination-button-disabled-background-color;
+			cursor: not-allowed;
+		}
+	}
+
+	.btn-prev,
+	.btn-next {
+		background: center center no-repeat;
+		background-size: 16px;
+		background-color: $--pagination-background-color;
+		cursor: pointer;
+		margin: 0;
+		color: $--pagination-button-color;
+
+		.el-icon {
+			display: block;
+			font-size: 12px;
+			font-weight: bold;
+		}
+	}
+
+	.btn-prev {
+		padding-right: 12px;
+	}
+
+	.btn-next {
+		padding-left: 12px;
+	}
+
+	.el-pager li.disabled {
+		color: $--color-text-placeholder;
+		cursor: not-allowed;
+	}
+
+	@include m(small) {
+		.btn-prev,
+		.btn-next,
+		.el-pager li,
+		.el-pager li.btn-quicknext,
+		.el-pager li.btn-quickprev,
+		.el-pager li:last-child {
+			border-color: transparent;
+			font-size: 12px;
+			line-height: 22px;
+			height: 22px;
+			min-width: 22px;
+		}
+
+		.arrow.disabled {
+			visibility: hidden;
+		}
+
+		.more::before,
+		li.more::before {
+			line-height: 24px;
+		}
+
+		span:not([class*=suffix]),
+		button {
+			height: 22px;
+			line-height: 22px;
+		}
+
+		@include e(editor) {
+			height: 22px;
+			&.el-input .el-input__inner {
+				height: 22px;
+			}
+		}
+	}
+
+	@include e(sizes) {
+		margin: 0 10px 0 0;
+		font-weight: normal;
+		color: $--color-text-regular;
+
+		.el-input .el-input__inner {
+			font-size: $--pagination-font-size;
+			padding-left: 8px;
+
+			&:hover {
+				border-color: $--pagination-hover-color;
+			}
+		}
+	}
+
+	@include e(total) {
+		margin-right: 10px;
+		font-weight: normal;
+		color: $--color-text-regular;
+	}
+
+	@include e(jump) {
+		margin-left: 24px;
+		font-weight: normal;
+		color: $--color-text-regular;
+
+		.el-input__inner {
+			padding: 0 3px;
+		}
+	}
+
+	@include e(rightwrapper) {
+		float: right;
+	}
+
+	@include e(editor) {
+		line-height: 18px;
+		padding: 0 2px;
+		height: $--pagination-button-height;
+
+		text-align: center;
+		margin: 0 2px;
+		box-sizing: border-box;
+		border-radius: $--pagination-border-radius;
+
+		&.el-input {
+			width: 50px;
+		}
+
+		&.el-input .el-input__inner {
+			height: $--pagination-button-height;
+		}
+
+		.el-input__inner::-webkit-inner-spin-button,
+		.el-input__inner::-webkit-outer-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+	}
+
+	@include when(background) {
+		.btn-prev,
+		.btn-next,
+		.el-pager li {
+			margin: 0 5px;
+			background-color: $--color-info-lighter;
+			color: $--color-text-regular;
+			min-width: 30px;
+			border-radius: 2px;
+
+			&.disabled {
+				color: $--color-text-placeholder;
+			}
+		}
+
+		.btn-prev, .btn-next {
+			padding: 0;
+
+			&:disabled {
+				color: $--color-text-placeholder;
+			}
+		}
+
+		.el-pager li:not(.disabled) {
+			&:hover {
+				color: $--pagination-hover-color;
+			}
+
+			&.active {
+				background-color: $--color-primary;
+				color: $--color-white;
+			}
+		}
+
+		&.el-pagination--small {
+			.btn-prev,
+			.btn-next,
+			.el-pager li {
+				margin: 0 3px;
+				min-width: 22px;
+			}
+		}
+	}
+}
+
+@include b(pager) {
+	user-select: none;
+	list-style: none;
+	display: inline-block;
+	vertical-align: top;
+	font-size: 0;
+	padding: 0;
+	margin: 0;
+
+	.more::before {
+		line-height: 30px;
+	}
+
+	li {
+		padding: 0 4px;
+		background: $--pagination-background-color;
+		vertical-align: top;
+		display: inline-block;
+		font-size: $--pagination-font-size;
+		min-width: $--pagination-button-width;
+		height: $--pagination-button-height;
+		line-height: $--pagination-button-height;
+		cursor: pointer;
+		box-sizing: border-box;
+		text-align: center;
+		margin: 0;
+
+		&.btn-quicknext,
+		&.btn-quickprev {
+			line-height: 28px;
+			color: $--pagination-button-color;
+
+			&.disabled {
+				color: $--color-text-placeholder;
+			}
+		}
+
+		&.btn-quickprev:hover {
+			cursor: pointer;
+		}
+
+		&.btn-quicknext:hover {
+			cursor: pointer;
+		}
+
+		&.active + li {
+			border-left: 0;
+		}
+
+		&:hover {
+			color: $--pagination-hover-color;
+		}
+
+		&.active {
+			color: $--pagination-hover-color;
+			cursor: default;
+		}
+	}
+}

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

@@ -0,0 +1,16 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(popconfirm) {
+	@include e(main) {
+		display: flex;
+		align-items: center;
+	}
+	@include e(icon) {
+		margin-right: 5px;
+	}
+	@include e(action) {
+		text-align: right;
+		margin: 0
+	}
+}

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

@@ -0,0 +1,40 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "./popper";
+
+@include b(popover) {
+	position: absolute;
+	background: $--popover-background-color;
+	min-width: 150px;
+	border-radius: 4px;
+	border: 1px solid $--popover-border-color;
+	padding: $--popover-padding;
+	z-index: $--index-popper;
+	color: $--color-text-regular;
+	line-height: 1.4;
+	text-align: justify;
+	font-size: $--popover-font-size;
+	box-shadow: $--box-shadow-light;
+	word-break: break-all;
+
+	@include m(plain) {
+		padding: $--popover-padding-large;
+	}
+
+	@include e(title) {
+		color: $--popover-title-font-color;
+		font-size: $--popover-title-font-size;
+		line-height: 1;
+		margin-bottom: 12px;
+	}
+
+	@include e(reference) {
+		&:focus:not(.focusing), &:focus:hover {
+			outline-width: 0;
+		}
+	}
+
+	&:focus:active, &:focus {
+		outline-width: 0;
+	}
+}

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

@@ -0,0 +1,101 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(popper) {
+	.popper__arrow,
+	.popper__arrow::after {
+		position: absolute;
+		display: block;
+		width: 0;
+		height: 0;
+		border-color: transparent;
+		border-style: solid;
+	}
+
+	.popper__arrow {
+		border-width: $--popover-arrow-size;
+		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03))
+	}
+
+	.popper__arrow::after {
+		content: " ";
+		border-width: $--popover-arrow-size;
+	}
+
+	&[x-placement^="top"] {
+		margin-bottom: #{$--popover-arrow-size + 6};
+	}
+
+	&[x-placement^="top"] .popper__arrow {
+		bottom: -$--popover-arrow-size;
+		left: 50%;
+		margin-right: #{$--tooltip-arrow-size / 2};
+		border-top-color: $--popover-border-color;
+		border-bottom-width: 0;
+
+		&::after {
+			bottom: 1px;
+			margin-left: -$--popover-arrow-size;
+			border-top-color: $--popover-background-color;
+			border-bottom-width: 0;
+		}
+	}
+
+	&[x-placement^="bottom"] {
+		margin-top: #{$--popover-arrow-size + 6};
+	}
+
+	&[x-placement^="bottom"] .popper__arrow {
+		top: -$--popover-arrow-size;
+		left: 50%;
+		margin-right: #{$--tooltip-arrow-size / 2};
+		border-top-width: 0;
+		border-bottom-color: $--popover-border-color;
+
+		&::after {
+			top: 1px;
+			margin-left: -$--popover-arrow-size;
+			border-top-width: 0;
+			border-bottom-color: $--popover-background-color;
+		}
+	}
+
+	&[x-placement^="right"] {
+		margin-left: #{$--popover-arrow-size + 6};
+	}
+
+	&[x-placement^="right"] .popper__arrow {
+		top: 50%;
+		left: -$--popover-arrow-size;
+		margin-bottom: #{$--tooltip-arrow-size / 2};
+		border-right-color: $--popover-border-color;
+		border-left-width: 0;
+
+		&::after {
+			bottom: -$--popover-arrow-size;
+			left: 1px;
+			border-right-color: $--popover-background-color;
+			border-left-width: 0;
+		}
+	}
+
+	&[x-placement^="left"] {
+		margin-right: #{$--popover-arrow-size + 6};
+	}
+
+	&[x-placement^="left"] .popper__arrow {
+		top: 50%;
+		right: -$--popover-arrow-size;
+		margin-bottom: #{$--tooltip-arrow-size / 2};
+		border-right-width: 0;
+		border-left-color: $--popover-border-color;
+
+		&::after {
+			right: 1px;
+			bottom: -$--popover-arrow-size;
+			margin-left: -$--popover-arrow-size;
+			border-right-width: 0;
+			border-left-color: $--popover-background-color;
+		}
+	}
+}

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

@@ -0,0 +1,141 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+
+@include b(progress) {
+	position: relative;
+	line-height: 1;
+
+	@include e(text) {
+		font-size:14px;
+		color: $--color-text-regular;
+		display: inline-block;
+		vertical-align: middle;
+		margin-left: 10px;
+		line-height: 1;
+
+		i {
+			vertical-align: middle;
+			display: block;
+		}
+	}
+
+	@include m((circle,dashboard)) {
+		display: inline-block;
+
+		.el-progress__text {
+			position: absolute;
+			top: 50%;
+			left: 0;
+			width: 100%;
+			text-align: center;
+			margin: 0;
+			transform: translate(0, -50%);
+
+			i {
+				vertical-align: middle;
+				display: inline-block;
+			}
+		}
+	}
+
+
+	@include m(without-text) {
+		.el-progress__text {
+			display: none;
+		}
+
+		.el-progress-bar {
+			padding-right: 0;
+			margin-right: 0;
+			display: block;
+		}
+	}
+
+	@include m(text-inside) {
+		.el-progress-bar {
+			padding-right: 0;
+			margin-right: 0;
+		}
+	}
+
+	@include when(success) {
+		.el-progress-bar__inner {
+			background-color: $--color-success;
+		}
+
+		.el-progress__text {
+			color: $--color-success;
+		}
+	}
+
+	@include when(warning) {
+		.el-progress-bar__inner {
+			background-color: $--color-warning;
+		}
+
+		.el-progress__text {
+			color: $--color-warning;
+		}
+	}
+
+	@include when(exception) {
+		.el-progress-bar__inner {
+			background-color: $--color-danger;
+		}
+
+		.el-progress__text {
+			color: $--color-danger;
+		}
+	}
+}
+
+@include b(progress-bar) {
+	padding-right: 50px;
+	display: inline-block;
+	vertical-align: middle;
+	width: 100%;
+	margin-right: -55px;
+	box-sizing: border-box;
+
+	@include e(outer) {
+		height: 6px;
+		border-radius: 100px;
+		background-color: $--border-color-lighter;
+		overflow: hidden;
+		position: relative;
+		vertical-align: middle;
+	}
+	@include e(inner) {
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 100%;
+		background-color: $--color-primary;
+		text-align: right;
+		border-radius: 100px;
+		line-height: 1;
+		white-space: nowrap;
+		transition: width 0.6s ease;
+
+		@include utils-vertical-center;
+	}
+
+	@include e(innerText) {
+		display: inline-block;
+		vertical-align: middle;
+		color: $--color-white;
+		font-size: 12px;
+		margin: 0 5px;
+	}
+}
+
+@keyframes progress {
+	0% {
+		background-position: 0 0;
+	}
+
+	100% {
+		background-position: 32px 0;
+	}
+}

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

@@ -0,0 +1,113 @@
+@import "mixins/mixins";
+@import "mixins/_button";
+@import "common/var";
+
+@include b(radio-button) {
+	position: relative;
+	display: inline-block;
+	outline: none;
+
+	@include e(inner) {
+		display: inline-block;
+		line-height: 1;
+		white-space: nowrap;
+		vertical-align: middle;
+		background: $--button-default-background-color;
+		border: $--border-base;
+		font-weight: $--button-font-weight;
+		border-left: 0;
+		color: $--button-default-font-color;
+		-webkit-appearance: none;
+		text-align: center;
+		box-sizing: border-box;
+		outline: none;
+		margin: 0;
+		position: relative;
+		cursor: pointer;
+		transition: $--all-transition;
+
+		@include button-size($--button-padding-vertical, $--button-padding-horizontal, $--button-font-size, 0);
+
+		&:hover {
+			color: $--color-primary;
+		}
+
+		& [class*="el-icon-"] {
+			line-height: 0.9;
+
+			& + span {
+				margin-left: 5px;
+			}
+		}
+	}
+
+	&:first-child {
+		.el-radio-button__inner {
+			border-left: $--border-base;
+			border-radius: $--border-radius-base 0 0 $--border-radius-base;
+			box-shadow: none !important;
+		}
+	}
+
+	@include e(orig-radio) {
+		opacity: 0;
+		outline: none;
+		position: absolute;
+		z-index: -1;
+
+		&:checked {
+			& + .el-radio-button__inner {
+				color: $--radio-button-checked-font-color;
+				background-color: $--radio-button-checked-background-color;
+				border-color: $--radio-button-checked-border-color;
+				box-shadow: -1px 0 0 0 $--radio-button-checked-border-color;
+			}
+		}
+
+		&:disabled {
+			& + .el-radio-button__inner {
+				color: $--button-disabled-font-color;
+				cursor: not-allowed;
+				background-image: none;
+				background-color: $--button-disabled-background-color;
+				border-color: $--button-disabled-border-color;
+				box-shadow: none;
+			}
+			&:checked + .el-radio-button__inner {
+				background-color: $--radio-button-disabled-checked-fill;
+			}
+		}
+	}
+
+	&:last-child {
+		.el-radio-button__inner {
+			border-radius: 0 $--border-radius-base $--border-radius-base 0;
+		}
+	}
+
+	&:first-child:last-child {
+		.el-radio-button__inner {
+			border-radius: $--border-radius-base;
+		}
+	}
+
+	@include m(medium) {
+		& .el-radio-button__inner {
+			@include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, 0);
+		}
+	}
+	@include m(small) {
+		& .el-radio-button__inner {
+			@include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, 0);
+		}
+	}
+	@include m(mini) {
+		& .el-radio-button__inner {
+			@include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, 0);
+		}
+	}
+
+	&:focus:not(.is-focus):not(:active):not(.is-disabled){ /*获得焦点时 样式提醒*/
+		box-shadow: 0 0 2px 2px $--radio-button-checked-border-color;
+	}
+}

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

@@ -0,0 +1,9 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(radio-group) {
+	display: inline-block;
+	line-height: 1;
+	vertical-align: middle;
+	font-size: 0;
+}