@ni/ok-components 1.8.1 → 1.8.2
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/dist/all-components-bundle.js +10 -2
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +10 -2
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/fv/summary-panel/styles.js +6 -3
- package/dist/esm/fv/summary-panel/styles.js.map +1 -1
- package/dist/esm/fv/summary-panel-tile/styles.js +5 -0
- package/dist/esm/fv/summary-panel-tile/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@ni/fast-element';
|
|
2
|
-
import {
|
|
2
|
+
import { borderWidth, smallPadding, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
|
|
3
3
|
import { display } from '../../utilities/style/display';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
@layer base, hover, focusVisible, active, disabled, top;
|
|
@@ -31,8 +31,7 @@ export const styles = css `
|
|
|
31
31
|
box-sizing: border-box;
|
|
32
32
|
overflow-x: auto;
|
|
33
33
|
overflow-y: hidden;
|
|
34
|
-
gap: ${
|
|
35
|
-
padding: calc(${standardPadding} - ${smallPadding});
|
|
34
|
+
gap: ${smallPadding};
|
|
36
35
|
scrollbar-width: none;
|
|
37
36
|
}
|
|
38
37
|
|
|
@@ -53,6 +52,10 @@ export const styles = css `
|
|
|
53
52
|
::slotted(*) {
|
|
54
53
|
flex: 0 0 auto;
|
|
55
54
|
}
|
|
55
|
+
|
|
56
|
+
:host([size='compact']) ::slotted(ok-fv-summary-panel-tile) {
|
|
57
|
+
margin: calc(2 * ${borderWidth});
|
|
58
|
+
}
|
|
56
59
|
}
|
|
57
60
|
|
|
58
61
|
@layer hover {}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,WAAW,EACX,YAAY,EACZ,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,OAAO,CAAC;;;;;;0BAMA,eAAe;;;;;;;mBAOtB,eAAe;;;;;;;;;;;;;mBAaf,YAAY;;;;;;;;;;;;;;;;;;;;;;;+BAuBA,WAAW;;;;;;;;;;;;;CAazC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n borderWidth,\n smallPadding,\n standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('block')}\n\n .summary-panel {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: flex-start;\n column-gap: ${standardPadding};\n }\n\n .summary-item-container {\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n gap: ${standardPadding};\n min-width: 0;\n }\n\n .summary-item-container:empty {\n display: none;\n }\n\n :host([size='compact']) .summary-item-container {\n flex-wrap: nowrap;\n box-sizing: border-box;\n overflow-x: auto;\n overflow-y: hidden;\n gap: ${smallPadding};\n scrollbar-width: none;\n }\n\n :host([size='compact']) .summary-item-container.has-overflow {\n -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);\n mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);\n }\n\n :host([size='compact']) .summary-item-container::-webkit-scrollbar {\n display: none;\n }\n\n .edit-items-button {\n align-self: start;\n justify-self: end;\n }\n\n ::slotted(*) {\n flex: 0 0 auto;\n }\n\n :host([size='compact']) ::slotted(ok-fv-summary-panel-tile) {\n margin: calc(2 * ${borderWidth});\n }\n }\n\n @layer hover {}\n\n @layer focusVisible {}\n\n @layer active {}\n\n @layer disabled {}\n\n @layer top {}\n`;"]}
|
|
@@ -53,6 +53,7 @@ export const styles = css `
|
|
|
53
53
|
flex-direction: column;
|
|
54
54
|
align-items: center;
|
|
55
55
|
gap: ${smallPadding};
|
|
56
|
+
margin-top: calc(${largePadding} - ${smallPadding});
|
|
56
57
|
text-align: center;
|
|
57
58
|
}
|
|
58
59
|
|
|
@@ -83,6 +84,10 @@ export const styles = css `
|
|
|
83
84
|
margin: 10px 14px;
|
|
84
85
|
}
|
|
85
86
|
|
|
87
|
+
:host([size='compact']) .summary-panel-tile-content.under {
|
|
88
|
+
margin-top: ${mediumPadding};
|
|
89
|
+
}
|
|
90
|
+
|
|
86
91
|
:host([size='compact']) .count {
|
|
87
92
|
font-size: 24px;
|
|
88
93
|
line-height: normal;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel-tile/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,UAAU,EACV,eAAe,EACf,mBAAmB,EACtB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;qCAWI,UAAU;;;4DAGa,gBAAgB;;;;;;;;;;;uCAWrC,UAAU;;;;gCAIjB,eAAe;;;+BAGhB,UAAU;+BACV,UAAU;;;;;;mBAMtB,aAAa;sBACV,YAAY,SAAS,YAAY,MAAM,eAAe;oBACxD,QAAQ;;;;;;mBAMT,YAAY;;;;;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/summary-panel-tile/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,UAAU,EACV,eAAe,EACf,mBAAmB,EACtB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;;;;;;;;;qCAWI,UAAU;;;4DAGa,gBAAgB;;;;;;;;;;;uCAWrC,UAAU;;;;gCAIjB,eAAe;;;+BAGhB,UAAU;+BACV,UAAU;;;;;;mBAMtB,aAAa;sBACV,YAAY,SAAS,YAAY,MAAM,eAAe;oBACxD,QAAQ;;;;;;mBAMT,YAAY;+BACA,YAAY,MAAM,YAAY;;;;;qBAKxC,mBAAmB;;;;;;;;6BAQX,aAAa;;;;;;;;;;;;;;;;;;;0BAmBhB,aAAa;;;;;;;;;;;;;;;;;;;oCAmBH,gBAAgB;;;;;;;;;;;;;;;;8BAgBtB,mBAAmB,CAAC,iBAAiB;;;;;sBAK7C,mBAAmB,CAAC,iBAAiB;4BAC/B,gBAAgB;;;;8BAId,mBAAmB,CAAC,iBAAiB;;;;4BAIvC,gBAAgB;;;;;;;;gCAQZ,gBAAgB;;;;;;;;;;;;;;;CAe/C,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n bodyFont,\n borderHoverColor,\n cardBorderColor,\n elevation2BoxShadow,\n largePadding,\n mediumPadding,\n smallPadding,\n smallDelay,\n standardPadding,\n titlePlus2FontColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-block')}\n\n :host {\n min-width: max-content;\n }\n\n :host(:not([legacy-style])) .summary-panel-tile {\n position: relative;\n border-radius: 8px;\n overflow: clip;\n box-shadow: none;\n transition: box-shadow ${smallDelay} ease-in-out;\n --ni-private-card-button-background-hover-color: transparent;\n --ni-private-card-button-background-active-color: transparent;\n --ni-private-card-button-border-active-color: ${borderHoverColor};\n }\n\n :host(:not([legacy-style])) .summary-panel-tile::after {\n content: '';\n position: absolute;\n inset: 0;\n box-sizing: border-box;\n border: 2px solid transparent;\n border-radius: inherit;\n pointer-events: none;\n transition: border-color ${smallDelay} ease-in-out;\n }\n\n :host(:not([legacy-style])) .summary-panel-tile::part(control) {\n border: 2px solid ${cardBorderColor};\n border-radius: 8px;\n transition:\n border-color ${smallDelay} ease-in-out,\n border-width ${smallDelay} ease-in-out;\n }\n\n .summary-panel-tile-content {\n display: flex;\n align-items: center;\n gap: ${mediumPadding};\n margin: ${largePadding} calc(${largePadding} + ${standardPadding});\n font: ${bodyFont};\n }\n\n .summary-panel-tile-content.under {\n flex-direction: column;\n align-items: center;\n gap: ${smallPadding};\n margin-top: calc(${largePadding} - ${smallPadding});\n text-align: center;\n }\n\n .count {\n color: ${titlePlus2FontColor};\n font-size: 32px;\n font-weight: 400;\n line-height: 40px;\n white-space: nowrap;\n }\n\n .summary-panel-tile-content.beside .count {\n padding-right: ${mediumPadding};\n }\n\n .summary-panel-tile-content.under .count {\n padding-right: 0;\n }\n\n .label {\n font-weight: 600;\n text-transform: uppercase;\n white-space: nowrap;\n }\n\n :host([size='compact']) .summary-panel-tile-content {\n gap: 6px;\n margin: 10px 14px;\n }\n\n :host([size='compact']) .summary-panel-tile-content.under {\n margin-top: ${mediumPadding};\n }\n\n :host([size='compact']) .count {\n font-size: 24px;\n line-height: normal;\n }\n\n :host([size='compact']) .summary-panel-tile-content.beside .count {\n padding-right: 0;\n }\n\n :host([size='compact']) .label {\n font-size: 11px;\n }\n }\n\n @layer hover {\n :host(:not([legacy-style])) .summary-panel-tile:hover {\n box-shadow: 0 0 0 2px ${borderHoverColor};\n }\n\n :host(:not([legacy-style])) .summary-panel-tile::part(control):hover {\n border-color: transparent;\n }\n }\n\n @layer focusVisible {}\n\n @layer active {\n :host(:not([legacy-style])) .summary-panel-tile:active {\n box-shadow: none;\n }\n\n :host(:not([legacy-style])) .summary-panel-tile[selected] {\n box-shadow: var(${elevation2BoxShadow.cssCustomProperty});\n }\n\n :host(:not([legacy-style])) .summary-panel-tile[selected]:hover {\n box-shadow:\n var(${elevation2BoxShadow.cssCustomProperty}),\n 0 0 0 2px ${borderHoverColor};\n }\n\n :host(:not([legacy-style])) .summary-panel-tile[selected]:active {\n box-shadow: var(${elevation2BoxShadow.cssCustomProperty});\n }\n\n :host(:not([legacy-style])) .summary-panel-tile:active::after {\n border-color: ${borderHoverColor};\n }\n\n :host(:not([legacy-style])) .summary-panel-tile::part(control):active {\n border: 2px solid transparent;\n }\n\n :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control) {\n border: 2px solid ${borderHoverColor};\n }\n\n :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control):hover {\n border: 2px solid transparent;\n }\n\n :host(:not([legacy-style])) .summary-panel-tile[selected]::part(control):active {\n border: 2px solid transparent;\n }\n }\n\n @layer disabled {}\n\n @layer top {}\n`;"]}
|