@nopon-web/styles 0.0.2 → 0.0.3

package/_config.scss

@@ -0,0 +1,5 @@
+$namespace: 's' !default;
+$state-prefix: 'is' !default;
+$common-separator: '-' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;

package/_function.scss

@@ -1,5 +1,21 @@
 @use 'sass:string';
 @use './_variables' as var;
+@use '_config' as config;
+
+// bem('block', 'element', 'modifier') => 's_block__element--modifier'
+@function bem($block, $element: '', $modifier: '') {
+	$name: config.$namespace + config.$common-separator + $block;
+
+	@if $element != '' {
+		$name: $name + config.$element-separator + $element;
+	}
+
+	@if $modifier != '' {
+		$name: $name + config.$modifier-separator + $modifier;
+	}
+
+	@return $name;
+}
 
 @function get-image($image) {
 	// 已经是合法CSS值的情况
@@ -12,7 +28,7 @@
 	}
 
 	// 空值或none
-	@if $image == none or $image == null {
+	@if $image ==none or $image ==null {
 		@return none;
 	}
 

package/_mixin.scss

@@ -1,7 +1,62 @@
-@use './_variables' as var;
-@use './_function' as func;
 @use 'sass:map';
 
+@use '_config' as *;
+@use '_variables' as var;
+@use '_function' as func;
+
+@forward '_config';
+@forward '_variables';
+@forward '_function';
+
+// BEM
+$__bem-context: null;
+
+@mixin b($block) {
+	$B: $namespace + $common-separator + $block;
+
+	.#{$B} {
+		$__bem-context: 'block' !global;
+		@content;
+		$__bem-context: null !global;
+	}
+}
+
+@mixin e($element) {
+	@if $__bem-context != 'block' {
+		@error 'e() can only be used inside b()';
+	}
+
+	@each $E in $element {
+		&#{$element-separator + $E} {
+			$__bem-context: 'element' !global;
+			@content;
+			$__bem-context: 'block' !global;
+		}
+	}
+}
+
+@mixin m($modifier) {
+	@if $__bem-context != 'block' and $__bem-context != 'element' {
+		@error 'm() can only be used inside b() or e()';
+	}
+
+	@each $M in $modifier {
+		&#{$modifier-separator + $M} {
+			@content;
+		}
+	}
+}
+
+@mixin when($state) {
+	$state-selector: $state-prefix + $common-separator + $state;
+
+	@at-root {
+		#{if(&, '&.#{$state-selector}', '.#{$state-selector}')} {
+			@content;
+		}
+	}
+}
+
 @mixin absolute-center($x: true, $y: true) {
 	position: absolute;
 
@@ -56,6 +111,30 @@
 		#{$size} -#{$size} #{$blur} #{$color}, -#{$size} -#{$size} #{$blur} #{$color};
 }
 
+@mixin text-shadow($size: 14px, $color: #000, $offset-x: 2px, $offset-y: 2px) {
+	position: relative;
+	z-index: 0;
+	font-size: 0;
+	line-height: 1;
+
+	> * {
+		font-size: $size;
+	}
+
+	&::before {
+		content: attr(data-text);
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		z-index: -1;
+		color: $color;
+		font-size: $size;
+		white-space: nowrap;
+		// 偏移量
+		transform: translate(calc(-50% + #{$offset-x}), calc(-50% + #{$offset-y}));
+	}
+}
+
 /// 通用列表布局封装
 /// 支持 grid / flex 两种布局
 /// @param $options - 可选配置
@@ -133,7 +212,7 @@
 		display: $display;
 
 		// flex 布局
-		@if $display == flex {
+		@if $display ==flex {
 			margin: 0 calc(var(--gap) / -2);
 
 			// 换行
@@ -143,7 +222,7 @@
 		}
 
 		// grid 布局(默认)
-		@if $display == grid {
+		@if $display ==grid {
 			gap: var(--gap);
 
 			// 换行
@@ -155,9 +234,15 @@
 			}
 		}
 
-		@if $wrap == false {
+		@if $wrap ==false {
 			overflow-x: scroll;
 		}
+
+		.#{$block}-#{$element}--item:only-child {
+			grid-column: 1 / calc(var(--col) + 1);
+			width: calc(100% / var(--col));
+			margin: 0 auto;
+		}
 	}
 
 	// --- 列表项 ---
@@ -165,7 +250,7 @@
 		position: relative;
 		font-size: 0;
 
-		@if $display == flex {
+		@if $display ==flex {
 			flex-shrink: 0;
 			width: calc(100% / var(--col));
 			padding: calc(var(--gap) / 2);

package/components/image.scss

@@ -0,0 +1,19 @@
+@use '../mixin' as *;
+
+@include b('image') {
+	--aspect-ratio: 1;
+
+	> img {
+		width: 100%;
+		height: 100%;
+	}
+
+	@include when('ratio') {
+		position: relative;
+		aspect-ratio: var(--aspect-ratio);
+
+		> img {
+			object-fit: cover;
+		}
+	}
+}

package/components/picture.scss

@@ -1,16 +1,15 @@
 @use '../mixin' as mixin;
 
 .picture {
+	position: relative;
+	--frame-width: 0.02rem;
+
 	> img {
 		width: 100%;
 		height: 100%;
 		object-fit: contain;
 	}
 
-	&:has(.picture-content, .picture-frame) {
-		position: relative;
-	}
-
 	// 图片内容
 	.picture-content {
 		&--center {
@@ -28,13 +27,9 @@
 		width: 100%;
 		height: 100%;
 		@include mixin.absolute-center(true, true);
-		z-index: 0;
-	}
-
-	&:has(.picture-frame) {
-		--frame-width: 0.02rem;
+		z-index: 1;
 
-		> img {
+		+ img {
 			position: relative;
 			width: calc(100% - var(--frame-width) * 2);
 			height: calc(100% - var(--frame-width) * 2);

package/components/table.scss

@@ -42,6 +42,7 @@
 	}
 
 	.text {
+		text-align: center;
 		vertical-align: middle;
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nopon-web/styles",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"main": "index.js",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1"