hc-basic 1.0.1

package/scss/common/index.scss

@@ -0,0 +1,394 @@
+/* TODO: Flex布局样式******Start****** */
+@import 'flex';
+/* TODO: Flex布局样式******End****** */
+
+/*
+* TODO: 背景样式******Start******
+* class样式生成示例
+* bg-default、bg-primary。。。
+*/
+@for $i from 1 through length($bgList) {
+	$item: nth($bgList, $i);
+	.bg-#{map-get($item, name)} {
+		background-color: #{map-get($item, value)};
+	}
+}
+/* TODO: 背景样式******End****** */
+
+/*
+* TODO: 边框样式******Start******
+* class样式生成示例
+* border、border-left、border-left-0
+*/
+@for $i from 1 through length($borderList) {
+	$item: nth($borderList, $i);
+	@for $index from 1 through length($borderDirections) {
+		$items: nth($borderDirections, $index);
+		.border-#{$items}#{map-get($item, name)} {
+			border-#{$items}: map-get($item, value);
+		}
+		.border#{map-get($item, name)} {
+			border: map-get($item, value);
+		}
+		.border-#{$items}#{map-get($item, name)}-none {
+			border: map-get($item, value);
+			border-#{$items}: none;
+		}
+	}
+}
+/*
+	* border:
+	* border-0 => border-none
+	* border-radius开头 => radius
+	*/
+.border {
+	border: $borderBase;
+}
+.border-none {
+	border: none;
+}
+.radius-none {
+	border-radius: 0;
+}
+.radius-2 {
+	border-radius: $--border-radius-base-hc / 2;
+}
+.radius {
+	border-radius: $--border-radius-base-hc;
+}
+.radius-circle {
+	border-radius: 50%;
+}
+.radius-top {
+	border-top-left-radius: $--border-radius-base-hc;
+	border-top-right-radius: $--border-radius-base-hc;
+}
+.radius-left {
+	border-top-left-radius: $--border-radius-base-hc;
+	border-bottom-left-radius: $--border-radius-base-hc;
+}
+.radius-right {
+	border-top-right-radius: $--border-radius-base-hc;
+	border-bottom-right-radius: $--border-radius-base-hc;
+}
+.radius-bottom {
+	border-bottom-right-radius: $--border-radius-base-hc;
+	border-bottom-left-radius: $--border-radius-base-hc;
+}
+/* TODO: 边框样式******End****** */
+
+/*
+* TODO: 栅格布局、宽高样式******Start******
+* class样式生成示例
+* col-1、col-2。。。
+*/
+@for $i from 1 through $colMax {
+	.col-#{$i} {
+		width: percentage(1/24 * $i);
+	}
+}
+@for $i from 1 through $colMax {
+	.offset-#{$i} {
+		margin-left: percentage(1/24 * $i);
+	}
+}
+
+.w-100 {
+	width: 100%;
+}
+
+.h-100 {
+	height: 100%;
+}
+
+/* TODO: 栅格布局、宽高样式******End****** */
+
+/*
+* TODO: 鼠标指针样式******Start******
+* class样式生成示例
+* cursor-pointer、cursor-wait。。。
+*/
+// 鼠标指针情况 $params=>鼠标形状
+@for $i from 1 through length($cursorList) {
+	$item: nth($cursorList, $i);
+	.cursor-#{$item} {
+		cursor: $item;
+	}
+}
+/* TODO: 鼠标指针样式******End****** */
+
+/*
+* TODO: Display样式******Start******
+* class样式生成示例
+* d-none、d-flex。。。
+*/
+// display 显示方式
+@for $i from 1 through length($displayList) {
+	$item: nth($displayList, $i);
+	.d-#{$item} {
+		display: $item;
+	}
+}
+/* TODO: Display样式******End****** */
+
+/* TODO: 浮动样式******Start****** */
+/*
+* class样式生成示例
+* float-left、float-right。。。
+*/
+// float 显示方式
+@for $i from 1 through length($floatList) {
+	$item: nth($floatList, $i);
+	.float-#{$item} {
+		float: $item;
+	}
+}
+.clearfix {
+	clear: both;
+}
+/* TODO: 浮动样式******End****** */
+
+/*
+* TODO: 定位样式******Start******
+* class样式生成示例
+* .relative、.absolute。。。
+*/
+// position 显示方式
+@for $i from 1 through length($positionList) {
+	$item: nth($positionList, $i);
+	.#{$item} {
+		position: $item;
+	}
+}
+// 占据父元素的100%
+.absolute-all {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}
+// 与父元素保持同等宽高
+.absolute-y {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+}
+/* TODO: 定位样式******End****** */
+
+/* TODO: 边距样式******Start****** */
+/* 该文件用于padding和margin边距集合公共class */
+// margin: n * 4 px 显示方式, $max=> $sideBasic的最大倍数
+/*
+* class样式生成示例
+* m-4、mx-4、mr-4。。。
+* p-4、px-4、pr-4。。。
+*/
+@for $i from 0 through $spaceMax {
+	.m-#{$i * $sideBasic} {
+		margin: $i * $sideBasic + px;
+	}
+	.mx-#{$i * $sideBasic} {
+		margin-left: $i * $sideBasic + px;
+		margin-right: $i * $sideBasic + px;
+	}
+	.my-#{$i * $sideBasic} {
+		margin-top: $i * $sideBasic + px;
+		margin-bottom: $i * $sideBasic + px;
+	}
+	.mt-#{$i * $sideBasic} {
+		margin-top: $i * $sideBasic + px;
+	}
+	.mr-#{$i * $sideBasic} {
+		margin-right: $i * $sideBasic + px;
+	}
+	.mb-#{$i * $sideBasic} {
+		margin-bottom: $i * $sideBasic + px;
+	}
+	.ml-#{$i * $sideBasic} {
+		margin-left: $i * $sideBasic + px;
+	}
+	.p-#{$i * $sideBasic} {
+		padding: $i * $sideBasic + px;
+	}
+	.px-#{$i * $sideBasic} {
+		padding-left: $i * $sideBasic + px;
+		padding-right: $i * $sideBasic + px;
+	}
+	.py-#{$i * $sideBasic} {
+		padding-top: $i * $sideBasic + px;
+		padding-bottom: $i * $sideBasic + px;
+	}
+	.pt-#{$i * $sideBasic} {
+		padding-top: $i * $sideBasic + px;
+	}
+	.pr-#{$i * $sideBasic} {
+		padding-right: $i * $sideBasic + px;
+	}
+	.pb-#{$i * $sideBasic} {
+		padding-bottom: $i * $sideBasic + px;
+	}
+	.pl-#{$i * $sideBasic} {
+		padding-left: $i * $sideBasic + px;
+	}
+}
+/* TODO: 边距样式******End****** */
+
+/*
+* TODO: 字体******Start******
+* class样式生成示例
+* font-12、font-24。。。
+* line-height-12、line-height-24。。。
+*/
+.line-height-none {
+	line-height: normal; // 1
+}
+/*
+* class样式生成示例
+* text-12、text-14。。。
+*/
+@for $i from 1 through length($textList) {
+	$item: nth($textList, $i);
+	.text-#{map-get($item, size)} {
+		font-size: #{map-get($item, size)}px;
+		line-height: #{map-get($item, line)}px;
+	}
+}
+/*
+* class样式生成示例
+* color-default、color-primary。。。
+*/
+@for $i from 1 through length($textColor) {
+	$item: nth($textColor, $i);
+	.color-#{map-get($item, name)} {
+		color: #{map-get($item, value)};
+	}
+}
+
+// 去除文字字重
+.fw-none {
+	font-weight: normal;
+}
+// 文字字重
+.fw-bold {
+	font-weight: bold;
+}
+// 文字字重500
+.fw-500 {
+	font-weight: 500;
+}
+// 文字字重400
+.fw-400 {
+	font-weight: 400;
+}
+/* TODO: 字体样式******End****** */
+
+/* TODO: 阴影样式******Start****** */
+.shadow-basic {
+	box-shadow: 0px 1px 5px 0px rgba(45, 47, 51, 0.1);
+}
+.shadow-raised {
+	box-shadow: 0px 6px 18px 0px rgba(45, 47, 51, 0.14);
+}
+.shadow-overlay {
+	box-shadow: 0px 10px 32px 0px rgba(45, 47, 51, 0.18);
+}
+.shadow-pop {
+	box-shadow: 0px 12px 42px 0px rgba(45, 47, 51, 0.24);
+}
+/* TODO: 阴影样式******End****** */
+
+.overflow-auto {
+	overflow: auto;
+}
+
+.overflow-hidden {
+	overflow: hidden;
+}
+
+// 文字不换行
+.white-space-nowrap {
+	white-space: nowrap;
+}
+
+// 文字超出一行隐藏
+.text-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+// 文字超出2行隐藏
+.text-ellipsis-2 {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+}
+// 文字超出3行隐藏
+.text-ellipsis-3 {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	overflow: hidden;
+}
+
+.border-box {
+	box-sizing: border-box;
+}
+
+// TODO: 大版本删除
+
+// 文字超出一行隐藏
+.text-overflow-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+// 文字超出2行隐藏
+.text-overflow-ellipsis-2 {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	overflow: hidden;
+}
+// 文字超出3行隐藏
+.text-overflow-ellipsis-3 {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 3;
+	overflow: hidden;
+}
+
+// 文字字重
+.font-weight-lighter {
+	font-weight: lighter;
+}
+// 去除文字字重
+.font-weight-normal {
+	font-weight: normal;
+}
+// 文字字重
+.font-weight-bold {
+	font-weight: bold;
+}
+
+//滚动条样式设置
+.noScroll::-webkit-scrollbar {
+	width: 0px;
+	height: 0px;
+	background-color: transparent;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+.noScroll::-webkit-scrollbar-track {
+	-webkit-box-shadow: inset 0 0 6px transparent;
+	border-radius: 0;
+	background-color: transparent;
+}
+
+/*定义滑块 内阴影+圆角*/
+.noScroll::-webkit-scrollbar-thumb {
+	border-radius: 0;
+	-webkit-box-shadow: inset 0 0 6px transparent;
+	background-color: transparent;
+}

package/scss/index.scss

@@ -0,0 +1,5 @@
+@import 'common/reset'; // 浏览器默认样式重置
+@import 'basicConfig'; // 基于config的不可变scss配置文件
+@import 'common/index'; // 基础样式设置
+@import 'common/components'; // 组件样式
+@import "element-variables";