lism-css 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/scss/dynamic/_accordion.scss +54 -0
- package/src/scss/dynamic/_modal.scss +30 -0
- package/src/scss/dynamic/_tabs.scss +31 -0
- package/src/scss/dynamic/index.scss +3 -3
- package/dist/components/Accordion/style.css +0 -1
- package/dist/components/Modal/style.css +0 -1
- package/dist/components/Tabs/style.css +0 -1
package/package.json
CHANGED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
.d--accordion {
|
|
2
|
+
--trsdu: var(--acc--trsdu, 0.4s);
|
|
3
|
+
&._opened {
|
|
4
|
+
--_notOpened: ;
|
|
5
|
+
}
|
|
6
|
+
&:not(._opened) {
|
|
7
|
+
--_isOpened: ;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.d--accordion_header {
|
|
12
|
+
outline-offset: -1px; // overflow:clip|hidden; で見えなくなってしまうのを防ぐ
|
|
13
|
+
gap: 0.5em;
|
|
14
|
+
|
|
15
|
+
/* Safariで表示されるデフォルトの三角形アイコンを消す */
|
|
16
|
+
&::-webkit-details-marker {
|
|
17
|
+
display: none;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// .d--accordion_label {
|
|
22
|
+
// flex: 1;
|
|
23
|
+
// font: inherit;
|
|
24
|
+
// }
|
|
25
|
+
|
|
26
|
+
.d--accordion_body {
|
|
27
|
+
grid-template-rows: 1fr;
|
|
28
|
+
transition-property: margin-block, padding-block, opacity, grid-template-rows;
|
|
29
|
+
transition-duration: var(--trsdu);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// ※ 正常な animation には必須
|
|
33
|
+
// .d--accordion_inner {
|
|
34
|
+
// overflow: hidden;
|
|
35
|
+
// }
|
|
36
|
+
|
|
37
|
+
// 閉じている時
|
|
38
|
+
:where(.d--accordion:not(._opened)) {
|
|
39
|
+
> .d--accordion_body {
|
|
40
|
+
// opacity: 0.5;
|
|
41
|
+
grid-template-rows: 0fr;
|
|
42
|
+
padding-block: 0 !important;
|
|
43
|
+
margin-block: 0 !important;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// アコーディオンブロックのネスト時、別のアイコンタイプにすると表示が崩れるがそこまでは考慮しない。
|
|
48
|
+
:where(.d--accordion_icon) {
|
|
49
|
+
// __icon 自体にborderつけたりすると回転が見えてしまうので、 icon自体を回転させる。
|
|
50
|
+
> .l--icon {
|
|
51
|
+
transition-duration: var(--trsdu);
|
|
52
|
+
rotate: var(--_isOpened, -180deg);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// dialog,
|
|
2
|
+
.d--modal {
|
|
3
|
+
--maxIsz: 100%; // container直下にきても影響しないように
|
|
4
|
+
--mbs: 0; // flow直下にきても影響しないように
|
|
5
|
+
--offset: 0 0; // アニメーション用
|
|
6
|
+
--backdrop: rgb(0 0 0 / 0.6);
|
|
7
|
+
// --trsdu: 0.5s;
|
|
8
|
+
transition-duration: var(--modal--trsdu, 0.5s);
|
|
9
|
+
|
|
10
|
+
&::backdrop {
|
|
11
|
+
transition: opacity var(--modal--trsdu, 0.5s);
|
|
12
|
+
background: var(--backdrop);
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.d--modal_body {
|
|
17
|
+
overscroll-behavior: contain;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.d--modal:not([data-is-open]) {
|
|
21
|
+
translate: var(--offset);
|
|
22
|
+
}
|
|
23
|
+
.d--modal:not([data-is-open]),
|
|
24
|
+
.d--modal:not([data-is-open])::backdrop {
|
|
25
|
+
opacity: 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// .d--modal-drawer:not([data-is-open]) {
|
|
29
|
+
// translate: var(--offset);
|
|
30
|
+
// }
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
.d--tabs {
|
|
2
|
+
display: grid;
|
|
3
|
+
grid: 'list' 'panel';
|
|
4
|
+
}
|
|
5
|
+
.d--tabs_list {
|
|
6
|
+
grid-area: list;
|
|
7
|
+
overflow-x: auto;
|
|
8
|
+
}
|
|
9
|
+
.d--tabs_tab {
|
|
10
|
+
&[aria-selected='true'] {
|
|
11
|
+
--_notActive: ;
|
|
12
|
+
}
|
|
13
|
+
&[aria-selected='false'] {
|
|
14
|
+
--_isActive: ;
|
|
15
|
+
}
|
|
16
|
+
// 非アクティブの時、薄いカラーに
|
|
17
|
+
:where(&) {
|
|
18
|
+
color: var(--_notActive, var(--c-text-2));
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.d--tabs_panel {
|
|
23
|
+
// position: relative;
|
|
24
|
+
grid-area: panel;
|
|
25
|
+
width: 100%;
|
|
26
|
+
overflow-x: auto;
|
|
27
|
+
|
|
28
|
+
&:where([aria-hidden='true']) {
|
|
29
|
+
display: none;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
// dynamic layout
|
|
2
|
-
@forward '
|
|
3
|
-
@forward '
|
|
4
|
-
@forward '
|
|
2
|
+
@forward './accordion';
|
|
3
|
+
@forward './modal';
|
|
4
|
+
@forward './tabs';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.d--accordion{--trsdu:var(--acc--trsdu,0.4s)}.d--accordion._opened{--_notOpened: }.d--accordion:not(._opened){--_isOpened: }.d--accordion_header{gap:.5em;outline-offset:-1px}.d--accordion_header::-webkit-details-marker{display:none}.d--accordion_body{grid-template-rows:1fr;transition-duration:var(--trsdu);transition-property:margin-block,padding-block,opacity,grid-template-rows}:where(.d--accordion:not(._opened))>.d--accordion_body{grid-template-rows:0fr;margin-block:0!important;padding-block:0!important}:where(.d--accordion_icon)>.l--icon{rotate:var(--_isOpened,-180deg);transition-duration:var(--trsdu)}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.d--modal{--maxIsz:100%;--mbs:0;--offset:0 0;--backdrop:rgba(0,0,0,.6);transition-duration:var(--modal--trsdu,.5s)}.d--modal::backdrop{background:var(--backdrop);transition:opacity var(--modal--trsdu,.5s)}.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}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.d--tabs{display:grid;grid:"list" "panel"}.d--tabs_list{grid-area:list;overflow-x:auto}.d--tabs_tab[aria-selected=true]{--_notActive: }.d--tabs_tab[aria-selected=false]{--_isActive: }:where(.d--tabs_tab){color:var(--_notActive,var(--c-text-2))}.d--tabs_panel{grid-area:panel;overflow-x:auto;width:100%}.d--tabs_panel:where([aria-hidden=true]){display:none}
|