cy-element-ui 1.0.0 → 1.0.1

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

@@ -0,0 +1,123 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "common/var";
+@import "common/popup";
+
+@include b(dialog) {
+	position: relative;
+	margin: 0 auto 50px;
+	background: $--dialog-background-color;
+	border-radius: $--border-radius-small;
+	box-shadow: $--dialog-box-shadow;
+	box-sizing: border-box;
+	width: 50%;
+
+	@include when(fullscreen) {
+		width: 100%;
+		margin-top: 0;
+		margin-bottom: 0;
+		height: 100%;
+		overflow: auto;
+	}
+
+	@include e(wrapper) {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		overflow: auto;
+		margin: 0;
+	}
+
+	@include e(header) {
+		padding: $--dialog-padding-primary;
+		padding-bottom: 10px;
+	}
+
+	@include e(headerbtn) {
+		position: absolute;
+		top: $--dialog-padding-primary;
+		right: $--dialog-padding-primary;
+		padding: 0;
+		background: transparent;
+		border: none;
+		outline: none;
+		cursor: pointer;
+		font-size: $--message-close-size;
+
+		.el-dialog__close {
+			color: $--color-info;
+		}
+
+		&:focus, &:hover {
+			.el-dialog__close {
+				color: $--color-primary;
+			}
+		}
+	}
+
+	@include e(title) {
+		line-height: $--dialog-font-line-height;
+		font-size: $--dialog-title-font-size;
+		color: $--color-text-primary;
+	}
+
+	@include e(body) {
+		padding: ($--dialog-padding-primary + 10px) $--dialog-padding-primary;
+		color: $--color-text-regular;
+		font-size: $--dialog-content-font-size;
+		word-break: break-all;
+	}
+
+	@include e(footer) {
+		padding: $--dialog-padding-primary;
+		padding-top: 10px;
+		text-align: right;
+		box-sizing: border-box;
+	}
+
+	// 内容居中布局
+	@include m(center) {
+		text-align: center;
+
+		@include e(body) {
+			text-align: initial;
+			padding: 25px ($--dialog-padding-primary + 5px) 30px;
+		}
+
+		@include e(footer) {
+			text-align: inherit;
+		}
+	}
+}
+
+.dialog-fade-enter-active {
+	animation: dialog-fade-in .3s;
+}
+
+.dialog-fade-leave-active {
+	animation: dialog-fade-out .3s;
+}
+
+@keyframes dialog-fade-in {
+	0% {
+		transform: translate3d(0, -20px, 0);
+		opacity: 0;
+	}
+	100% {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+}
+
+@keyframes dialog-fade-out {
+	0% {
+		transform: translate3d(0, 0, 0);
+		opacity: 1;
+	}
+	100% {
+		transform: translate3d(0, -20px, 0);
+		opacity: 0;
+	}
+}

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

@@ -0,0 +1,12 @@
+@import "common/var";
+@import "mixins/mixins";
+
+.hidden {
+	@each $break-point-name, $value in $--breakpoints-spec {
+		&-#{$break-point-name} {
+			@include res($break-point-name, $--breakpoints-spec) {
+				display: none !important;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,47 @@
+@import "common/var";
+@import "mixins/mixins";
+
+@include b(divider) {
+	background-color: $--border-color-base;
+	position: relative;
+
+	@include m(horizontal) {
+		display: block;
+		height: 1px;
+		width: 100%;
+		margin: 24px 0;
+	}
+
+	@include m(vertical) {
+		display: inline-block;
+		width: 1px;
+		height: 1em;
+		margin: 0 8px;
+		vertical-align: middle;
+		position: relative;
+	}
+
+	@include e(text) {
+		position: absolute;
+		background-color: $--color-white;
+		padding: 0 20px;
+		font-weight: 500;
+		color: $--color-text-primary;
+		font-size: 14px;
+
+		@include when(left) {
+			left: 20px;
+			transform: translateY(-50%);
+		}
+
+		@include when(center)	{
+			left: 50%;
+			transform: translateX(-50%) translateY(-50%);
+		}
+
+		@include when(right)	{
+			right: 20px;
+			transform: translateY(-50%);
+		}
+	}
+}

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

@@ -0,0 +1,219 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@keyframes el-drawer-fade-in {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@mixin drawer-animation($direction) {
+
+	@keyframes #{$direction}-drawer-in {
+		0% {
+
+			@if $direction == ltr {
+				transform: translate(-100%, 0px);
+			}
+
+			@if $direction == rtl {
+				transform: translate(100%, 0px);
+			}
+
+			@if $direction == ttb {
+				transform: translate(0px, -100%);
+			}
+
+			@if $direction == btt {
+				transform: translate(0px, 100%);
+			}
+		}
+
+		100% {
+			@if $direction == ltr {
+				transform: translate(0px, 0px);
+			}
+
+			@if $direction == rtl {
+				transform: translate(0px, 0px);
+			}
+
+			@if $direction == ttb {
+				transform: translate(0px, 0px);
+			}
+
+			@if $direction == btt {
+				transform: translate(0px, 0px);
+			}
+		}
+	}
+
+	@keyframes #{$direction}-drawer-out {
+		0% {
+			@if $direction == ltr {
+				transform: translate(0px, 0px);
+			}
+
+			@if $direction == rtl {
+				transform: translate(0px, 0px);;
+			}
+
+			@if $direction == ttb {
+				transform: translate(0px, 0px);
+			}
+
+			@if $direction == btt {
+				transform: translate(0px, 0);
+			}
+		}
+
+		100% {
+			@if $direction == ltr {
+				transform: translate(-100%, 0px);
+			}
+
+			@if $direction == rtl {
+				transform: translate(100%, 0px);
+			}
+
+			@if $direction == ttb {
+				transform: translate(0px, -100%);
+			}
+
+			@if $direction == btt {
+				transform: translate(0px, 100%);
+			}
+		}
+	}
+}
+
+@mixin animation-in($direction) {
+	.el-drawer__open &.#{$direction} {
+		animation: #{$direction}-drawer-in .3s 1ms;
+	}
+}
+
+@mixin animation-out($direction) {
+	&.#{$direction} {
+		animation: #{$direction}-drawer-out .3s;
+	}
+}
+
+@include drawer-animation(rtl);
+@include drawer-animation(ltr);
+@include drawer-animation(ttb);
+@include drawer-animation(btt);
+
+$directions: rtl, ltr, ttb, btt;
+
+@include b(drawer) {
+	position: absolute;
+	box-sizing: border-box;
+	background-color: $--dialog-background-color;
+	display: flex;
+	flex-direction: column;
+	box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
+	0 16px 24px 2px rgba(0, 0, 0, 0.14),
+	0 6px 30px 5px rgba(0, 0, 0, 0.12);
+	overflow: hidden;
+	outline: 0;
+
+	@each $direction in $directions {
+		@include animation-out($direction);
+		@include animation-in($direction);
+	}
+
+	&__wrapper {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		overflow: hidden;
+		margin: 0;
+	}
+
+	&__header {
+		align-items: center;
+		color: rgb(114, 118, 123);
+		display: flex;
+		margin-bottom: 32px;
+		padding: $--dialog-padding-primary;
+		padding-bottom: 0;
+		& > :first-child {
+			flex: 1;
+		}
+	}
+
+	&__title {
+		margin: 0;
+		flex: 1;
+		line-height: inherit;
+		font-size: 1rem;
+	}
+
+	&__close-btn {
+		border: none;
+		cursor: pointer;
+		font-size: $--font-size-extra-large;
+		color: inherit;
+		background-color: transparent;
+	}
+
+	&__body {
+		flex: 1;
+		overflow: auto;
+		& > * {
+			box-sizing: border-box;
+		}
+	}
+
+	&.ltr, &.rtl {
+		height: 100%;
+		top: 0;
+		bottom: 0;
+	}
+
+	&.ttb, &.btt {
+		width: 100%;
+		left: 0;
+		right: 0;
+	}
+
+	&.ltr {
+		left: 0;
+	}
+
+	&.rtl {
+		right: 0;
+	}
+
+	&.ttb {
+		top: 0;
+	}
+
+	&.btt {
+		bottom: 0;
+	}
+}
+
+.el-drawer__container {
+	position: relative;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	height: 100%;
+	width: 100%;
+}
+
+.el-drawer-fade-enter-active {
+	animation: el-drawer-fade-in .3s;
+}
+
+.el-drawer-fade-leave-active {
+	animation: el-drawer-fade-in .3s reverse;
+}

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

@@ -0,0 +1,182 @@
+@import "mixins/mixins";
+@import "common/var";
+@import "button";
+@import "./popper";
+
+@include b(dropdown) {
+	display: inline-block;
+	position: relative;
+	color: $--color-text-regular;
+	font-size: $--font-size-base;
+
+	.el-button-group {
+		display: block;
+		.el-button {
+			float: none;
+		}
+	}
+
+	& .el-dropdown__caret-button {
+		padding-left: 5px;
+		padding-right: 5px;
+		position: relative;
+		border-left: none;
+
+		&::before {
+			$gap: 5px;
+
+			content: '';
+			position: absolute;
+			display: block;
+			width: 1px;
+			top: $gap;
+			bottom: $gap;
+			left: 0;
+			background: mix(white, transparent, 50%);
+		}
+
+		&.el-button--default::before {
+			background: mix($--button-default-border-color, transparent, 50%);
+		}
+
+		&:hover {
+			&:not(.is-disabled)::before {
+				top: 0;
+				bottom: 0;
+			}
+		}
+
+		& .el-dropdown__icon {
+			padding-left: 0;
+		}
+	}
+	@include e(icon) {
+		font-size: 12px;
+		margin: 0 3px;
+	}
+
+	.el-dropdown-selfdefine { // 自定义
+		&:focus:active, &:focus:not(.focusing) {
+			outline-width: 0;
+		}
+	}
+
+	[disabled] {
+		cursor: not-allowed;
+		color: $--font-color-disabled-base;
+	}
+}
+
+@include b(dropdown-menu) {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 10;
+	padding: 10px 0;
+	margin: 5px 0;
+	background-color: $--color-white;
+	border: 1px solid $--border-color-lighter;
+	border-radius: $--border-radius-base;
+	box-shadow: $--dropdown-menu-box-shadow;
+
+	@include e(item) {
+		list-style: none;
+		line-height: 36px;
+		padding: 0 20px;
+		margin: 0;
+		font-size: $--font-size-base;
+		color: $--color-text-regular;
+		cursor: pointer;
+		outline: none;
+		&:not(.is-disabled):hover, &:focus {
+			background-color: $--dropdown-menuItem-hover-fill;
+			color: $--dropdown-menuItem-hover-color;
+		}
+
+		i {
+			margin-right: 5px;
+		}
+
+		@include m(divided) {
+			$divided-offset: 6px;
+
+			position: relative;
+			margin-top: $divided-offset;
+			border-top: 1px solid $--border-color-lighter;
+
+			&:before {
+				content: '';
+				height: $divided-offset;
+				display: block;
+				margin: 0 -20px;
+				background-color: $--color-white;
+			}
+		}
+
+		@include when(disabled) {
+			cursor: default;
+			color: $--font-color-disabled-base;
+			pointer-events: none;
+		}
+	}
+
+	@include m(medium) {
+		padding: 6px 0;
+
+		@include e(item) {
+			line-height: 30px;
+			padding: 0 17px;
+			font-size: 14px;
+
+			&.el-dropdown-menu__item--divided {
+				$divided-offset: 6px;
+				margin-top: $divided-offset;
+
+				&:before {
+					height: $divided-offset;
+					margin: 0 -17px;
+				}
+			}
+		}
+	}
+
+	@include m(small) {
+		padding: 6px 0;
+
+		@include e(item) {
+			line-height: 27px;
+			padding: 0 15px;
+			font-size: 13px;
+
+			&.el-dropdown-menu__item--divided {
+				$divided-offset: 4px;
+				margin-top: $divided-offset;
+
+				&:before {
+					height: $divided-offset;
+					margin: 0 -15px;
+				}
+			}
+		}
+	}
+
+	@include m(mini) {
+		padding: 3px 0;
+
+		@include e(item) {
+			line-height: 24px;
+			padding: 0 10px;
+			font-size: 12px;
+
+			&.el-dropdown-menu__item--divided {
+				$divided-offset: 3px;
+				margin-top: $divided-offset;
+
+				&:before {
+					height: $divided-offset;
+					margin: 0 -10px;
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,45 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(empty) {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	text-align: center;
+	box-sizing: border-box;
+	padding: $--empty-padding;
+
+	@include e(image) {
+		width: $--empty-image-width;
+
+		img {
+			user-select: none;
+			width: 100%;
+			height: 100%;
+			vertical-align: top;
+			object-fit: contain;
+		}
+
+		svg {
+			fill: $--svg-monochrome-grey;
+			width: 100%;
+			height: 100%;
+			vertical-align: top;
+		}
+	}
+
+	@include e(description) {
+		margin-top: $--empty-description-margin-top;
+
+		p {
+			margin: 0;
+			font-size: $--font-size-base;
+			color: $--color-text-secondary;
+		}
+	}
+
+	@include e(bottom) {
+		margin-top: $--empty-bottom-margin-top;
+	}
+}

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

@@ -0,0 +1,8 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(footer) {
+	padding: $--footer-padding;
+	box-sizing: border-box;
+	flex-shrink: 0;
+}