cy-element-ui 1.0.0 → 1.0.2

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

@@ -0,0 +1,84 @@
+@import 'mixins/mixins';
+@import 'common/var';
+
+@mixin circle-size($size) {
+	width: $size;
+	height: $size;
+	line-height: $size;
+}
+
+@include b(skeleton) {
+	@include e(item) {
+		background: $--skeleton-color;
+		display: inline-block;
+		height: 16px;
+		border-radius: $--border-radius-base;
+		width: 100%;
+	}
+
+	@include e(circle) {
+		border-radius: 50%;
+		@include circle-size($--avatar-medium-size);
+
+		@include m(lg) {
+			@include circle-size($--avatar-large-size);
+		}
+
+		@include m(md) {
+			@include circle-size($--avatar-small-size);
+		}
+	}
+
+	@include e(button) {
+		height: 40px;
+		width: 64px;
+		border-radius: 4px;
+	}
+
+	@include e(p) {
+		width: 100%;
+		@include when(last) {
+			width: 61%;
+		}
+
+		@include when(first) {
+			width: 33%;
+		}
+	}
+
+	@include e(text) {
+		width: 100%;
+		height: $--font-size-small;
+	}
+
+	@include e(caption) {
+		height: $--font-size-extra-small;
+	}
+
+	@include e(h1) {
+		height: $--font-size-extra-large;
+	}
+
+	@include e(h3) {
+		height: $--font-size-large;
+	}
+
+	@include e(h5) {
+		height: $--font-size-medium;
+	}
+
+	@include e(image) {
+		width: unset;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 0;
+
+		svg {
+			fill: $--svg-monochrome-grey;
+			width: 22%;
+			height: 22%;
+		}
+	}
+
+}

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

@@ -0,0 +1,40 @@
+@import 'mixins/mixins';
+@import 'common/var';
+@import "./skeleton-item.scss";
+
+@mixin skeleton-color() {
+	background: linear-gradient(
+		90deg,
+		$--skeleton-color 25%,
+		$--skeleton-to-color 37%,
+		$--skeleton-color 63%
+	);
+	background-size: 400% 100%;
+	animation: #{$namespace}-skeleton-loading 1.4s ease infinite;
+}
+
+@keyframes #{$namespace}-skeleton-loading {
+	0% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0 50%;
+	}
+}
+
+@include b(skeleton) {
+	width: 100%;
+	@each $unit in (first-line, paragraph) {
+		@include e($unit) {
+			height: 16px;
+			margin-top: 16px;
+			background: $--skeleton-color;
+		}
+	}
+
+	@include when(animated) {
+		.#{$namespace}-skeleton__item {
+			@include skeleton-color();
+		}
+	}
+}

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

@@ -0,0 +1,250 @@
+@import "mixins/mixins";
+@import "mixins/utils";
+@import "input-number";
+@import "tooltip";
+@import "common/var";
+
+@include b(slider) {
+
+	@include utils-clearfix;
+
+	@include e(runway) {
+		width: 100%;
+		height: $--slider-height;
+		margin: $--slider-margin;
+		background-color: $--slider-runway-background-color;
+		border-radius: $--slider-border-radius;
+		position: relative;
+		cursor: pointer;
+		vertical-align: middle;
+
+		&.show-input {
+			margin-right: 160px;
+			width: auto;
+		}
+
+		&.disabled {
+			cursor: default;
+
+			.el-slider__bar {
+				background-color: $--slider-disable-color;
+			}
+
+			.el-slider__button {
+				border-color: $--slider-disable-color;
+			}
+
+			.el-slider__button-wrapper {
+				&:hover,
+				&.hover {
+					cursor: not-allowed;
+				}
+
+				&.dragging {
+					cursor: not-allowed;
+				}
+			}
+
+			.el-slider__button {
+				&:hover,
+				&.hover,
+				&.dragging {
+					transform: scale(1);
+				}
+
+				&:hover,
+				&.hover {
+					cursor: not-allowed;
+				}
+
+				&.dragging {
+					cursor: not-allowed;
+				}
+			}
+		}
+	}
+
+	@include e(input) {
+		float: right;
+		margin-top: 3px;
+		width: 130px;
+
+		&.el-input-number--mini {
+			margin-top: 5px;
+		}
+
+		&.el-input-number--medium {
+			margin-top: 0;
+		}
+
+		&.el-input-number--large {
+			margin-top: -2px;
+		}
+	}
+
+	@include e(bar) {
+		height: $--slider-height;
+		background-color: $--slider-main-background-color;
+		border-top-left-radius: $--slider-border-radius;
+		border-bottom-left-radius: $--slider-border-radius;
+		position: absolute;
+	}
+
+	@include e(button-wrapper) {
+		height: $--slider-button-wrapper-size;
+		width: $--slider-button-wrapper-size;
+		position: absolute;
+		z-index: 1001;
+		top: $--slider-button-wrapper-offset;
+		transform: translateX(-50%);
+		background-color: transparent;
+		text-align: center;
+		user-select: none;
+		line-height: normal;
+		@include utils-vertical-center;
+
+		.el-tooltip {
+			vertical-align: middle;
+			display: inline-block;
+		}
+
+		&:hover,
+		&.hover {
+			cursor: grab;
+		}
+
+		&.dragging {
+			cursor: grabbing;
+		}
+	}
+
+	@include e(button) {
+		width: $--slider-button-size;
+		height: $--slider-button-size;
+		border: solid 2px $--slider-main-background-color;
+		background-color: $--color-white;
+		border-radius: 50%;
+		transition: .2s;
+		user-select: none;
+
+		&:hover,
+		&.hover,
+		&.dragging {
+			transform: scale(1.2);
+		}
+
+		&:hover,
+		&.hover {
+			cursor: grab;
+		}
+
+		&.dragging {
+			cursor: grabbing;
+		}
+	}
+
+	@include e(stop) {
+		position: absolute;
+		height: $--slider-height;
+		width: $--slider-height;
+		border-radius: $--border-radius-circle;
+		background-color: $--slider-stop-background-color;
+		transform: translateX(-50%);
+	}
+
+	@include e(marks) {
+		top: 0;
+		left: 12px;
+		width: 18px;
+		height: 100%;
+
+		@include e(marks-text) {
+			position: absolute;
+			transform: translateX(-50%);
+			font-size: 14px;
+			color: $--color-info;
+			margin-top: 15px;
+		}
+	}
+
+	@include when(vertical) {
+		position: relative;
+		.el-slider__runway {
+			width: $--slider-height;
+			height: 100%;
+			margin: 0 16px;
+		}
+		.el-slider__bar {
+			width: $--slider-height;
+			height: auto;
+			border-radius: 0 0 3px 3px;
+		}
+		.el-slider__button-wrapper {
+			top: auto;
+			left: $--slider-button-wrapper-offset;
+			transform: translateY(50%);
+		}
+		.el-slider__stop {
+			transform: translateY(50%);
+		}
+		&.el-slider--with-input {
+			padding-bottom: #{$--input-medium-height + 22px};
+			.el-slider__input {
+				overflow: visible;
+				float: none;
+				position: absolute;
+				bottom: 22px;
+				width: 36px;
+				margin-top: 15px;
+				.el-input__inner {
+					text-align: center;
+					padding-left: 5px;
+					padding-right: 5px;
+				}
+				.el-input-number__decrease,
+				.el-input-number__increase
+				{
+					top: $--input-small-height;
+					margin-top: -1px;
+					border: $--input-border;
+					line-height: 20px;
+					box-sizing: border-box;
+					transition: $--border-transition-base;
+				}
+				.el-input-number__decrease {
+					width: 18px;
+					right: 18px;
+					border-bottom-left-radius: $--input-border-radius;
+				}
+				.el-input-number__increase {
+					width: 19px;
+					border-bottom-right-radius: $--input-border-radius;
+					& ~ .el-input .el-input__inner {
+						border-bottom-left-radius: 0;
+						border-bottom-right-radius: 0;
+					}
+				}
+				&:hover {
+					.el-input-number__decrease,
+					.el-input-number__increase
+					{
+						border-color: $--input-hover-border;
+					}
+				}
+				&:active {
+					.el-input-number__decrease,
+					.el-input-number__increase
+					{
+						border-color: $--input-focus-border;
+					}
+				}
+			}
+		}
+
+		@include e(marks-text) {
+			margin-top: 0;
+			left: 15px;
+			transform: translateY(50%);
+		}
+	}
+}

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

@@ -0,0 +1,44 @@
+@import "mixins/mixins";
+
+@include b(time-spinner) {
+	width: 100%;
+	white-space: nowrap;
+}
+
+@include b(spinner) {
+	display: inline-block;
+	vertical-align: middle;
+}
+@include b(spinner-inner) {
+	animation: rotate 2s linear infinite;
+	width: 50px;
+	height: 50px;
+
+	& .path {
+		stroke: #ececec;
+		stroke-linecap: round;
+		animation: dash 1.5s ease-in-out infinite;
+	}
+
+}
+
+@keyframes rotate {
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes dash {
+	0% {
+		stroke-dasharray: 1, 150;
+		stroke-dashoffset: 0;
+	}
+	50% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -35;
+	}
+	100% {
+		stroke-dasharray: 90, 150;
+		stroke-dashoffset: -124;
+	}
+}

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

@@ -0,0 +1,38 @@
+@import "mixins/mixins";
+@import "common/var";
+
+@include b(statistic) {
+	$statistic-justify: center;
+	$statistic-align: center;
+	width: 100%;
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	color: $--color-black;
+	font-variant: tabular-nums;
+	list-style: none;
+	font-feature-settings: "tnum";
+	text-align: center;
+	.head {
+		margin-bottom: 4px;
+		color: $--color-text-regular;
+		font-size: $--font-size-small;
+	}
+
+	.con {
+		font-family: Sans-serif;
+		display: flex;
+		justify-content: $statistic-justify;
+		align-items: $statistic-align;
+		color: $--color-text-primary;
+		.number {
+			font-size: $--font-size-extra-large;
+			padding: 0 4px;
+		}
+		span {
+			display: inline-block;
+			margin: 0;
+			line-height: 100%;
+		}
+	}
+}