hc-basic 1.0.1

package/scss/common/_components.scss

@@ -0,0 +1,149 @@
+// 自定义dialog高度
+.calcDialog {
+	.el-dialog {
+		position: relative;
+		height: calc(100% - 150px);
+		.el-dialog__body {
+			height: calc(100% - 130px);
+			overflow: auto;
+		}
+		.el-dialog__footer {
+			position: absolute;
+			bottom: 0;
+			width: 100%;
+			display: flex;
+			justify-content: flex-end;
+			padding: 10px 24px;
+			background: #fff;
+			box-shadow: rgba(0, 0, 0, 0.15) 0px -2px 8px 0px;
+		}
+	}
+}
+
+.hcFormItem {
+	.formButtonRight {
+		display: flex;
+		justify-content: flex-end;
+
+		.el-form-item__content {
+			padding-right: 0;
+		}
+	}
+	.el-input-number .el-input__inner {
+		text-align: left;
+	}
+}
+.hc-frame {
+	.hcMenu {
+		border-right: none;
+	}
+	.el-tabs__header {
+		margin: 0;
+	}
+	.el-tabs__active-bar {
+		background-color: transparent;
+	}
+	.contentMaxs {
+		transition: all 0.15s;
+	}
+	.el-tabs__nav-wrap::after {
+		background: none;
+	}
+	.el-tabs__item.is-closable {
+		.el-icon-close {
+			display: none;
+		}
+	}
+	.el-tabs__item.is-closable:hover {
+		.el-icon-close {
+			display: inline-block;
+		}
+	}
+	.el-tabs__item.is-active.is-closable {
+		.el-icon-close {
+			display: inline-block;
+		}
+	}
+}
+
+.hcSelectTreeOption.el-select-dropdown__item {
+	padding: 0 !important;
+	height: 200px;
+}
+// 本项目扩展公共样式
+.hc-svg {
+	&.color-text-primary-icon {
+		fill: $--color-text-primary-hc;
+	}
+	&.color-primary-icon {
+		fill: $--color-primary-hc;
+	}
+	&.color-success-icon {
+		fill: $--color-success-hc;
+	}
+	&.color-warning-icon {
+		fill: $--color-warning-hc;
+	}
+	&.color-info-icon {
+		fill: $--color-info-hc;
+	}
+	&.color-danger-icon {
+		fill: $--color-danger-hc;
+	}
+	&.color-text-regular-icon {
+		fill: $--color-text-regular-hc;
+	}
+	&.color-text-secondary-icon {
+		fill: $--color-text-secondary-hc;
+	}
+	&.color-text-placeholder-icon {
+		fill: $--color-text-placeholder-hc;
+	}
+	&.color-text-white-icon {
+		fill: $--color-white;
+	}
+}
+
+.animate-width {
+	transition: width 0.5s;
+	-moz-transition: width 0.5s; /* Firefox 4 */
+	-webkit-transition: width 0.5s; /* Safari and Chrome */
+	-o-transition: width 0.5s; /* Opera */
+}
+.animate-height {
+	transition: height 0.5s;
+	-moz-transition: height 0.5s; /* Firefox 4 */
+	-webkit-transition: height 0.5s; /* Safari and Chrome */
+	-o-transition: height 0.5s; /* Opera */
+}
+.hcRightMenu {
+	width: 150px;
+	@extend .bg-default;
+	@extend .shadow-basic;
+	@extend .cursor-pointer;
+	@extend .text-14;
+	@extend .radius;
+	color: #333;
+	position: fixed;
+	z-index: 99999;
+	.hcRightMenuChild {
+		@extend .pl-12;
+		@extend .py-8;
+		@extend .border-bottom;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		margin-block-start: 0em;
+		margin-block-end: 0em;
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-khtml-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none;
+		&:hover{
+			@extend .bg-info-10;
+		}
+	}
+}
+

package/scss/common/_flex.scss

@@ -0,0 +1,94 @@
+/*FlexBox 布局*/
+
+/* 一.换行 */
+//超出按父级高度平分
+.flex-wrap {
+	display: flex;
+	flex-wrap: wrap;
+}
+// 与wrap相反
+.flex-wrap-reverse {
+	display: flex;
+	flex-wrap: wrap-reverse;
+}
+/* 二.垂直排列(x，y轴) */
+// 从上往下 == 顶对齐
+.flex-column {
+	display: flex;
+	flex-direction: column;
+}
+// 与column 相反
+.flex-column-reverse {
+	display: flex;
+	flex-direction: column-reverse;
+}
+// 从左往右 == 左对齐
+.flex-row {
+	display: flex;
+	flex-direction: row;
+}
+// 与row 相反
+.flex-row-reverse {
+	display: flex;
+	flex-direction: row-reverse;
+}
+/* 三. 水平对齐（x轴）*/
+// 水平左对齐
+.flex-x-start {
+	display: flex;
+	justify-content: flex-start;
+}
+//水平右对齐
+.flex-x-end {
+	display: flex;
+	justify-content: flex-end;
+}
+// 水平居中
+.flex-x-center {
+	display: flex;
+	justify-content: center;
+}
+// 两端对齐 (第一个元素和最后一个元素距离左右两边的距离为0； 其他元素间的距离一样)
+.flex-x-between {
+	display: flex;
+	justify-content: space-between;
+}
+/*四. 垂直对齐（y轴）*/
+//垂直下对齐
+.flex-y-end {
+	display: flex;
+	align-items: flex-end;
+}
+// 垂直居中
+.flex-y-center {
+	display: flex;
+	align-items: center;
+}
+//文字基线对齐
+.align-items-baseline {
+	display: flex;
+	align-items: baseline;
+}
+// 水平垂直居中对齐
+.flex-center {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+// 水平居中底部对齐
+.flex-center-end {
+	display: flex;
+	justify-content: center;
+	align-items: flex-end;
+}
+// 元素水平两端，垂直居中对齐
+.flex-between-center {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+// 让所有盒子模型对象的子元素都具有相同长度
+.flex-auto {
+	display: flex;
+	flex: auto;
+}

package/scss/common/_reset.scss

@@ -0,0 +1,141 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v4.0 | 20180602
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+	padding: 0;
+	margin: 0;
+	font: inherit;
+	font-size: 100%;
+	vertical-align: baseline;
+	border: 0;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section {
+	display: block;
+}
+
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+	display: none;
+}
+
+body {
+	line-height: 1;
+}
+
+ol,
+ul {
+	list-style: none;
+}
+
+blockquote,
+q {
+	quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+	content: none;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}