first commit

src/components/NameAvatar/base.scss

@@ -0,0 +1,129 @@
+$d-type: (
+	flex: flex,
+	block: block,
+	none: none,
+);
+
+$flex-jc: (
+	start: flex-start,
+	end: flex-end,
+	center: center,
+	between: space-between,
+	around: space-around,
+);
+
+$flex-ai: (
+	start: flex-start,
+	end: flex-end,
+	center: center,
+	stretch: stretch,
+);
+
+//spacing
+$spacing-types: (
+	m: margin,
+	p: padding,
+);
+
+$spacing-directions: (
+	t: top,
+	r: right,
+	b: bottom,
+	l: left,
+);
+
+$spacing-base-size: 5px;
+
+$spacing-sizes: (
+	0: 0,
+	1: 1,
+	2: 2,
+	3: 3,
+	4: 4,
+	5: 5,
+);
+
+@each $key, $value in $d-type {
+	.d-#{$key} {
+		display: $value;
+	}
+}
+
+.flex-column {
+	flex-direction: column;
+}
+
+.text-ellipsis {
+	display: inline-block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.w-100 {
+	width: 100%;
+}
+
+.h-100 {
+	height: 100%;
+}
+
+.flex-wrap {
+	flex-wrap: wrap;
+}
+
+.flex-grow-1 {
+	flex: 1;
+}
+
+@each $dir in(top, bottom, right, left) {
+	.border-#{$dir} {
+		border-#{$dir}: 1px solid;
+	}
+}
+
+@each $key, $value in $flex-jc {
+	.jc-#{$key} {
+		justify-content: $value;
+	}
+}
+
+@each $key, $value in $flex-ai {
+	.ai-#{$key} {
+		align-items: $value;
+	}
+}
+//text
+@each $var in (left, center, right) {
+	.text-#{$var} {
+		text-align: $var !important;
+	}
+}
+
+@each $typeKey, $type in $spacing-types {
+	@each $sizeKey, $size in $spacing-sizes {
+		.#{$typeKey}-#{$sizeKey} {
+			#{$type}: $size * $spacing-base-size;
+		}
+	}
+
+	@each $sizeKey, $size in $spacing-sizes {
+		.#{$typeKey}x-#{$sizeKey} {
+			#{$type}-left: $size * $spacing-base-size;
+			#{$type}-right: $size * $spacing-base-size;
+		}
+
+		.#{$typeKey}y-#{$sizeKey} {
+			#{$type}-top: $size * $spacing-base-size;
+			#{$type}-bottom: $size * $spacing-base-size;
+		}
+	}
+
+	@each $directionKey, $direction in $spacing-directions {
+		@each $sizeKey, $size in $spacing-sizes {
+			.#{$typeKey}#{$directionKey}-#{$sizeKey} {
+				#{$type}-#{$direction}: $size * $spacing-base-size;
+			}
+		}
+	}
+}