lism-css 0.6.1 → 0.7.0

package/src/scss/base/_dom.scss

@@ -81,6 +81,11 @@ h6 {
 	// text-decoration-thickness: var(--underline-thickness, 1px);
 }
 
+// フォーカス要素
+@include mixin.maybe_where(':focus-visible') {
+	outline-offset: var(--focus-offset, 0px);
+}
+
 /* ----------------------------------------
     table
  ---------------------------------------- */
@@ -127,11 +132,16 @@ h6 {
 /* ----------------------------------------
     dialog
  ---------------------------------------- */
+/* ダイアログ展開時のガタツキを防ぐ */
+// html:has(:modal[open]) {
+// 	scrollbar-gutter: stable;
+// }
+
 // showModal()にのみ適用するため、 dialog ではなく :modal を使用
 @include mixin.switch_selector('body:has(:modal[open])', 'body:where(:has(:modal[open]))') {
 	overflow: hidden;
 }
 
-@include mixin.switch_selector('dialog:not([open])', 'dialog:where(:not([open]))') {
-	pointer-events: none;
-}
+// @include mixin.switch_selector('dialog:not([open])', 'dialog:where(:not([open]))') {
+// 	pointer-events: none;
+// }

package/src/scss/base/_tokens.scss

@@ -38,7 +38,7 @@
 	--sz--s: 640px; // 80*8
 	--sz--xs: 480px; // 80*6
 
-	--sz--min: 16rem; // 最低限維持したいコンテンツサイズの標準値。 withSide等 で使用
+	--sz--min: 18rem; // 最低限維持したいコンテンツサイズの標準値。 withSide等 で使用
 
 	// .l--flow の余白
 	--flow--base: var(--s40);
@@ -50,12 +50,8 @@
 	    タイポグラフィ
 	------------------------------------------------------------ */
 
-	// --ff--sans: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
-	// --ff--serif: serif;
-
-	--ff--base: -apple-system, 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif, 'Segoe UI Emoji';
-
-	// Optima, Georgia, Garamond, Baskerville;
+	// system-ui は　游ゴシックが適用されてしまう。-apple-system: safari, firefox用 / 'BlinkMacSystemFont': Chrome用
+	--ff--base: -apple-system, 'BlinkMacSystemFont', sans-serif, 'Segoe UI Emoji';
 	--ff--accent: 'Garamond', 'Baskerville', 'Times New Roman', serif;
 	--ff--mono: Menlo, Consolas, monaco, monospace;
 

package/src/scss/base/set/_plain.scss

@@ -10,5 +10,5 @@
 	border: none;
 	text-decoration: none;
 	padding: 0;
-	// margin: 0;
+	margin: 0;
 }

package/src/scss/main_no_layer.scss

@@ -5,8 +5,10 @@
 	$layer_mode: 0
 );
 
-// base
+// reset(ここはレイヤーあり）
 @use './reset' as reset;
+
+// base
 @use './base/index' as base;
 
 // Modules

package/src/scss/modules/dynamic/_modal.scss

@@ -1,33 +1,42 @@
-// dialog,
+/*
+ * dialog で実装.
+ *   Memo: ::backdrop のアニメーションはFirefoxで動かない
+ */
 .d--modal {
 	--my-s: 0; // flow直下にきても影響しないように
-	--offset: 0 0; // アニメーション用
 	--duration: var(--modal-duration, 0.5s);
-	--backdropBg: rgb(0 0 0 / 0.6);
+	width: 100%;
+	height: 100%;
 	max-width: 100%;
 	max-height: 100%;
-	transition-duration: var(--duration, 0.5s);
+	overflow: unset;
+	background: var(--backdrop-bg, rgb(0 0 0 / 0.6));
+	transition-duration: var(--duration);
+	transition-property: opacity;
 
 	&::backdrop {
-		transition: opacity var(--duration, 0.5s);
-		background: var(--backdropBg);
+		background: none;
 	}
 }
+.d--modal[open] {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
 
 .d--modal_inner {
-	max-height: 100%;
+	--translate: 0 0; // アニメーション用
 	background-color: var(--c--base);
+	transition: translate var(--duration);
 }
 
-.d--modal_body {
-	overflow: auto;
-	overscroll-behavior: contain;
-}
+// .d--modal_body {
+// 	overscroll-behavior: contain;
+// }
 
 .d--modal:not([data-is-open]) {
-	translate: var(--offset);
-}
-.d--modal:not([data-is-open]),
-.d--modal:not([data-is-open])::backdrop {
 	opacity: 0;
 }
+.d--modal:not([data-is-open]) > .d--modal_inner {
+	translate: var(--translate);
+}

package/src/scss/modules/layout/_flow.scss

@@ -1,19 +1,15 @@
-/*
-  Memo:
-	- > * + * を使えば :first-child への my-s の打ち消しは不要になるが、 my-e 0 を :first-child にも効かせたいので、 > * で書いている。
-*/
 .l--flow {
 	display: flow-root;
 	// --flow: var(--flow--base);
 
-	> * {
+	> * + * {
 		--flow: var(--flow--base);
 		--my-s: var(--flow);
-		margin-block: var(--my-s) 0;
+		margin-block-start: var(--my-s);
 	}
 
 	// flow 直下のメディア要素は block に初期リセット
-	> :where(img, video, audio) {
+	> :where(img, video) {
 		display: block;
 	}
 }
@@ -36,7 +32,6 @@
 
 // Note: 打ち消しを最後に書く
 // .l--flow > :where(.-max-sz\:full + .-max-sz\:full),
-.l--flow > :first-child,
 .is--skipFlow + * {
 	--my-s: 0px;
 }

package/src/scss/reset.scss

@@ -1,9 +1,10 @@
 @use './_mixin' as mixin;
 
 /* 参考
-	- https://github.com/necolas/normalize.css/blob/master/normalize.css
+
 	- https://github.com/filipelinhares/ress/blob/master/ress.css
 	- https://elad2412.github.io/the-new-css-reset/
+	- https://www.joshwcomeau.com/css/custom-css-reset/
 */
 
 /* ------------------------------------------------------------
@@ -13,84 +14,99 @@
 	  - padding は ブラウザ標準スタイルのまま
 	  - margin はすべて 0 にリセット
 ------------------------------------------------------------ */
-*,
-::before,
-::after {
-	box-sizing: border-box;
-}
-
-* {
-	margin: 0;
-}
-
-/* ------------------------------------------------------------
+@layer lism-reset {
+	*,
+	::before,
+	::after {
+		box-sizing: border-box;
+	}
+
+	* {
+		margin: 0;
+	}
+
+	/* ------------------------------------------------------------
 	Texts
 ------------------------------------------------------------ */
 
-/* テキストのオーバーフローを回避 */
-@include mixin.maybe_where('p, h1, h2, h3, h4, h5, h6') {
-	overflow-wrap: break-word;
-}
-
-/* ルビのサイズ統一 */
-rt {
-	font-size: 50%;
-}
-
-/* ------------------------------------------------------------
+	/* テキストのオーバーフローを回避 */
+	p,
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		overflow-wrap: break-word;
+	}
+
+	/* ルビのサイズ統一 */
+	rt {
+		font-size: 50%;
+	}
+
+	/* ------------------------------------------------------------
 	Medias
 ------------------------------------------------------------ */
 
-/* 親要素をはみ出さないようにする */
-@include mixin.maybe_where('img, video') {
-	max-inline-size: 100%;
-	block-size: auto;
-}
-
-/* 隙間ができるのを防ぐ。( display はいじらない。) */
-@include mixin.maybe_where('svg, img, video, audio') {
-	vertical-align: middle;
-}
-
-/* iframe は display block */
-@include mixin.maybe_where('iframe, embed, object') {
-	display: block;
-	border: none;
-}
-
-/* ------------------------------------------------------------
+	/* 親要素をはみ出さないようにする */
+	img,
+	video {
+		max-inline-size: 100%;
+		block-size: auto;
+	}
+
+	/* 隙間ができるのを防ぐ。( display はいじらない。) */
+	svg,
+	img,
+	video,
+	audio {
+		vertical-align: middle;
+	}
+
+	/* iframe は display block */
+	iframe {
+		display: block;
+		border: none;
+	}
+
+	/* ------------------------------------------------------------
 	Form fields
 	  - 基本要素のフォントとカラーをリセット
 	  - テキストエリアの水平リサイズを無効に
 	  - カーソルのセット
 ------------------------------------------------------------ */
-@include mixin.maybe_where('input, button, textarea, select') {
-	font: inherit;
-	color: inherit;
-	text-transform: none;
-}
-
-/* テキストエリアの水平リサイズを無効に */
-textarea {
-	resize: vertical;
-}
-
-/* ------------------------------------------------------------
+	input,
+	button,
+	textarea,
+	select {
+		font: inherit;
+		color: inherit;
+		text-transform: none;
+	}
+
+	/* テキストエリアの水平リサイズを無効に */
+	textarea {
+		resize: vertical;
+	}
+
+	/* ------------------------------------------------------------
 	cursor 初期セット
 ------------------------------------------------------------ */
-// :where([type='button'], [type='reset'], [type='submit'], [type='radio'], [type='checkbox']),
-// :where([t[role='option'], [role='button'], [aria-controls]),
-button,
-label,
-select,
-summary {
-	cursor: pointer;
-}
-
-:disabled {
-	cursor: not-allowed;
-}
-
-[aria-busy='true'] {
-	cursor: progress;
+	// :where([type='button'], [type='reset'], [type='submit']),
+	// :where([t[role='option'], [role='button'], [aria-controls]),
+	button,
+	label,
+	select,
+	summary,
+	[type='radio'],
+	[type='checkbox'] {
+		cursor: pointer;
+	}
+
+	:disabled {
+		cursor: not-allowed;
+	}
+
+	// [aria-busy='true'] {cursor: progress;}
 }