@nopon-web/styles 0.0.51 → 0.1.0

package/_mixin.scss

@@ -1,193 +0,0 @@
-@use "sass:map";
-
-@use "_config" as *;
-@use "_variables" as var;
-@use "_function" as func;
-
-@forward "_config";
-@forward "_variables";
-@forward "_function";
-
-// BEM
-$B: null;
-$__bem-context: null;
-
-@mixin b($block) {
-	$B: $namespace + $common-separator + $block !global;
-
-	.#{$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 {
-		.#{$B + $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 t($names: null) {
-	@if $__bem-context != "block" {
-		@error "t() can only be used inside b()";
-	}
-
-	// 解析 themes 列表
-	$themes: ();
-	@if $names == null {
-		@if $theme-name == null or $theme-name == "" {
-			@error "$theme-name must be set globally or passed to @include t().";
-		}
-		$themes: ($theme-name);
-	} @else {
-		$themes: $names;
-	}
-
-	// 逐个生成 theme 选择器
-	@each $theme in $themes {
-		@if $theme == null or $theme == "" {
-			@error "Invalid theme name in @include t().";
-		}
-
-		$T: $theme-prefix + $common-separator + $theme;
-
-		&.#{$B + $modifier-separator + $T} {
-			@content;
-		}
-	}
-}
-
-@mixin when($state) {
-	$state-selector: $state-prefix + $common-separator + $state;
-
-	@at-root {
-		@if & {
-			&.#{$state-selector} {
-				@content;
-			}
-		} @else {
-			.#{$state-selector} {
-				@content;
-			}
-		}
-	}
-}
-
-@mixin absolute-center($x: true, $y: true) {
-	$x-value: 0;
-	$y-value: 0;
-
-	position: absolute;
-
-	@if $x {
-		left: 50%;
-		$x-value: -50%;
-	}
-
-	@if $y {
-		top: 50%;
-		$y-value: -50%;
-	}
-
-	transform: translate(#{$x-value}, #{$y-value});
-}
-
-@mixin set-z-index($number) {
-	z-index: calc(var(--z-index-base, var.$z-index-base) + $number);
-}
-
-// 背景
-@mixin bg($w, $h, $image) {
-	width: $w;
-	height: $h;
-	background-size: 100% 100%;
-	background-repeat: no-repeat;
-	background-position: center;
-	background-image: func.get-image($image);
-}
-
-@mixin bg-text($image) {
-	background-clip: text;
-	-webkit-background-clip: text;
-	color: transparent;
-	-webkit-text-fill-color: transparent;
-	background-image: func.get-image($image);
-}
-
-@mixin frame-border($frame) {
-	$image: map.get($frame, image);
-	$inset: map.get($frame, inset);
-	$slice: map.get($frame, slice);
-	$fill: map.get($frame, fill);
-	$repeat: map.get($frame, repeat, stretch);
-
-	@if not $image or not $inset or not $slice {
-		@error "frame-border: image / inset / slice are required";
-	}
-
-	@if $fill {
-		border-image-slice: #{$slice} fill;
-	} @else {
-		border-image-slice: #{$slice};
-	}
-
-	box-sizing: border-box;
-	border-style: solid;
-	border-width: $inset;
-	border-image-source: func.get-image($image);
-	border-image-repeat: $repeat;
-}
-
-@mixin text-stroke($size, $color: #000, $blur: 0) {
-	text-shadow:
-		#{$size} #{$size} #{$blur} #{$color},
-		-#{$size} #{$size} #{$blur} #{$color},
-		#{$size} -#{$size} #{$blur} #{$color},
-		-#{$size} -#{$size} #{$blur} #{$color};
-}
-
-@mixin text-shadow($size, $color: #000, $offset-x: func.u(2), $offset-y: #{u(2)}) {
-	position: relative;
-	z-index: 0;
-	font-size: 0;
-	line-height: 1;
-	font-size: #{func.u(10)};
-
-	> * {
-		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}));
-	}
-}

package/atomic.scss

@@ -1,60 +0,0 @@
-// flex
-.flex {
-	display: flex;
-}
-.flex-1 {
-	flex: 1 1 0%;
-}
-.flex-auto {
-	flex: 1 1 auto;
-}
-.flex-initial {
-	flex: 0 1 auto;
-}
-.flex-none {
-	flex: none;
-}
-.justify-normal {
-	justify-content: normal;
-}
-.justify-start {
-	justify-content: flex-start;
-}
-.justify-end {
-	justify-content: flex-end;
-}
-.justify-center {
-	justify-content: center;
-}
-.justify-between {
-	justify-content: space-between;
-}
-.justify-around {
-	justify-content: space-around;
-}
-.justify-evenly {
-	justify-content: space-evenly;
-}
-.justify-stretch {
-	justify-content: stretch;
-}
-.items-start {
-	align-items: flex-start;
-}
-.items-end {
-	align-items: flex-end;
-}
-.items-center {
-	align-items: center;
-}
-.items-baseline {
-	align-items: baseline;
-}
-.items-stretch {
-	align-items: stretch;
-}
-.text-overflow {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}