@digitalwalletcorp/vue-core 1.0.0 → 1.0.1
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/lib/style.css +1 -1
- package/package.json +1 -1
- package/src/tab-content.vue +3 -3
package/lib/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:where(.dwui-label-icon){display:inline-block}:where(.dwui-label-icon>.dwui-label){display:inline-block}:where(.dwui-label-icon>.dwui-label:not(:first-child)){margin-left:var(--dwui-label-icon-gap, .25em)}:where(.dwui-accordion-fieldset){position:relative}:where(.dwui-accordion-toggle){display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:0;border:none;background:none;color:inherit;cursor:pointer}:where(.dwui-accordion-toggle:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-accordion-contents){position:relative;width:fit-content;padding:2px;overflow:hidden;opacity:1}:where(.dwui-accordion-contents.dwui-expanded){transition:all .3s linear}:where(.dwui-accordion-contents.dwui-shrunk){height:auto;max-height:70px;opacity:.75;transition:all .3s linear}:where(.dwui-hourglass-loading){animation:dwui-hourglass-loading-spin 1.2s linear infinite}@keyframes dwui-hourglass-loading-spin{to{transform:rotate(360deg)}}:where(.dwui-tab-content[aria-checked=false]){display:none}:where(.dwui-tab-content[aria-checked=true]){display:block;position:relative;padding:4px 8px;overflow:hidden;animation:dwui-tab-slide-in .35s cubic-bezier(.22,1
|
|
1
|
+
:where(.dwui-label-icon){display:inline-block}:where(.dwui-label-icon>.dwui-label){display:inline-block}:where(.dwui-label-icon>.dwui-label:not(:first-child)){margin-left:var(--dwui-label-icon-gap, .25em)}:where(.dwui-accordion-fieldset){position:relative}:where(.dwui-accordion-toggle){display:inline-flex;align-items:center;gap:4px;margin-left:4px;padding:0;border:none;background:none;color:inherit;cursor:pointer}:where(.dwui-accordion-toggle:disabled){opacity:.6;cursor:not-allowed}:where(.dwui-accordion-contents){position:relative;width:fit-content;padding:2px;overflow:hidden;opacity:1}:where(.dwui-accordion-contents.dwui-expanded){transition:all .3s linear}:where(.dwui-accordion-contents.dwui-shrunk){height:auto;max-height:70px;opacity:.75;transition:all .3s linear}:where(.dwui-hourglass-loading){animation:dwui-hourglass-loading-spin 1.2s linear infinite}@keyframes dwui-hourglass-loading-spin{to{transform:rotate(360deg)}}:where(.dwui-tab-content[aria-checked=false]){display:none}:where(.dwui-tab-content[aria-checked=true]){display:block;position:relative;padding:4px 8px;overflow:hidden;animation:dwui-tab-slide-in var(--dwui-tab-slide-duration, .35s) var(--dwui-tab-slide-easing, cubic-bezier(.22, 1, .36, 1))}:where(.dwui-tab-loading){position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:var(--dwui-loading-overlay, rgba(0, 0, 0, .25))}:where(.dwui-tab-loading-spinner){width:var(--dwui-loading-spinner-size, 40px);height:var(--dwui-loading-spinner-size, 40px);border:4px solid var(--dwui-loading-spinner-track, rgba(255, 255, 255, .4));border-top-color:var(--dwui-loading-spinner-color, #ffffff);border-radius:50%;animation:dwui-tab-loading-spin .8s linear infinite}@keyframes dwui-tab-loading-spin{to{transform:rotate(360deg)}}@keyframes dwui-tab-slide-in{0%{opacity:0;transform:translate(var(--dwui-tab-slide-distance, -128px))}to{opacity:1;transform:translate(0)}}:where(.dwui-tab-group){margin-bottom:8px}:where(.dwui-tab-headers){display:flex;flex-direction:row;flex-wrap:wrap;margin-top:5px;padding-bottom:4px}:where(.dwui-tab-radio){display:none}:where(.dwui-tab-item){display:block;min-width:100px;padding:0 4px;border:1px solid var(--dwui-tab-border, #565656);border-bottom:1px solid var(--dwui-tab-header-accent, #5ab4bd);background:var(--dwui-tab-header-bg, linear-gradient(#1313c7, navy));line-height:2em;text-align:center;white-space:nowrap;color:var(--dwui-tab-header-text, azure);text-overflow:ellipsis;cursor:pointer;transition:all .2s ease}:where(.dwui-tab-radio:checked+.dwui-tab-item){background:var(--dwui-tab-header-selected-bg, linear-gradient(#1313c7, rgb(149, 149, 234), #1313c7));color:var(--dwui-tab-header-selected-text, azure);cursor:default}:where(.dwui-tab-radio:disabled+.dwui-tab-item){background:var(--dwui-tab-header-disabled-bg, gray);cursor:not-allowed}:where(.dwui-tab-item.dwui-tab-warn){background:var(--dwui-tab-header-warn-bg, #efef13);color:var(--dwui-tab-header-warn-text, midnightblue)}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-warn){background:var(--dwui-tab-header-warn-selected-bg, linear-gradient(#fafa06, rgb(232, 238, 206), #fafa06))}:where(.dwui-tab-item.dwui-tab-error){background:var(--dwui-tab-header-error-bg, red);color:var(--dwui-tab-header-error-text, azure)}:where(.dwui-tab-radio:checked+.dwui-tab-item.dwui-tab-error){background:var(--dwui-tab-header-error-selected-bg, linear-gradient(#ff0000, rgb(240, 136, 136), #ff0000))}:where(.dwui-tab-radio:not(:checked)+.dwui-tab-item:hover){box-shadow:inset 0 0 0 999px var(--dwui-tab-header-hover-overlay, rgba(255, 255, 255, .35))}:where(.dwui-tab-items){height:100%;border:1px solid var(--dwui-tab-border, #565656);overflow:hidden}
|
package/package.json
CHANGED
package/src/tab-content.vue
CHANGED
|
@@ -105,8 +105,8 @@ const setLoading = (value: boolean) => {
|
|
|
105
105
|
position: relative;
|
|
106
106
|
padding: 4px 8px;
|
|
107
107
|
overflow: hidden;
|
|
108
|
-
/*
|
|
109
|
-
animation: dwui-tab-slide-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
|
|
108
|
+
/* 全幅を横断すると速度が出てカクつくため、既定は固定の移動量とease-outとフェードでスライドインする */
|
|
109
|
+
animation: dwui-tab-slide-in var(--dwui-tab-slide-duration, 0.35s) var(--dwui-tab-slide-easing, cubic-bezier(0.22, 1, 0.36, 1));
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
:where(.dwui-tab-loading) {
|
|
@@ -137,7 +137,7 @@ const setLoading = (value: boolean) => {
|
|
|
137
137
|
@keyframes dwui-tab-slide-in {
|
|
138
138
|
0% {
|
|
139
139
|
opacity: 0;
|
|
140
|
-
transform: translateX(-128px);
|
|
140
|
+
transform: translateX(var(--dwui-tab-slide-distance, -128px));
|
|
141
141
|
}
|
|
142
142
|
100% {
|
|
143
143
|
opacity: 1;
|