@ni/spright-components 6.2.0 → 6.2.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/dist/all-components-bundle.js +33 -8
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +33 -8
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/chat/input/styles.js +34 -9
- package/dist/esm/chat/input/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { css } from '@ni/fast-element';
|
|
2
|
-
import { applicationBackgroundColor, bodyFont, bodyFontColor, borderWidth, controlLabelFontColor, elevation2BoxShadow, mediumPadding, popupBorderColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
|
|
2
|
+
import { applicationBackgroundColor, bodyFont, bodyFontColor, borderWidth, controlLabelFontColor, elevation2BoxShadow, mediumPadding, popupBorderColor, borderHoverColor, smallDelay } 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
|
${display('flex')}
|
|
@@ -7,12 +7,14 @@ export const styles = css `
|
|
|
7
7
|
:host {
|
|
8
8
|
width: 100%;
|
|
9
9
|
height: auto;
|
|
10
|
+
outline: none;
|
|
11
|
+
--ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
|
|
10
12
|
}
|
|
11
13
|
|
|
12
14
|
.container {
|
|
13
|
-
display:
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
display: flex;
|
|
16
|
+
flex-direction: column;
|
|
17
|
+
position: relative;
|
|
16
18
|
width: 100%;
|
|
17
19
|
height: 100%;
|
|
18
20
|
|
|
@@ -21,10 +23,34 @@ export const styles = css `
|
|
|
21
23
|
box-shadow: ${elevation2BoxShadow};
|
|
22
24
|
}
|
|
23
25
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
.container::after {
|
|
27
|
+
content: '';
|
|
28
|
+
position: absolute;
|
|
29
|
+
bottom: calc(-1 * ${borderWidth});
|
|
30
|
+
width: 0px;
|
|
31
|
+
height: 0px;
|
|
32
|
+
align-self: center;
|
|
33
|
+
border-bottom: ${borderHoverColor}
|
|
34
|
+
var(--ni-private-hover-indicator-width) solid;
|
|
35
|
+
transition: width ${smallDelay} ease-in;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
:host(:hover) .container::after {
|
|
39
|
+
width: 100%;
|
|
40
|
+
transition: width ${smallDelay} ease-in;
|
|
41
|
+
}
|
|
27
42
|
|
|
43
|
+
:host(:focus-within) .container {
|
|
44
|
+
border-bottom-color: ${borderHoverColor};
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@media (prefers-reduced-motion) {
|
|
48
|
+
.container::after {
|
|
49
|
+
transition-duration: 0s;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
textarea {
|
|
28
54
|
font: ${bodyFont};
|
|
29
55
|
color: ${bodyFontColor};
|
|
30
56
|
background-color: transparent;
|
|
@@ -45,8 +71,7 @@ export const styles = css `
|
|
|
45
71
|
}
|
|
46
72
|
|
|
47
73
|
.send-button {
|
|
48
|
-
|
|
49
|
-
grid-column: 2;
|
|
74
|
+
align-self: flex-end;
|
|
50
75
|
width: 80px;
|
|
51
76
|
margin: ${mediumPadding};
|
|
52
77
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,WAAW,EACX,qBAAqB,EACrB,mBAAmB,EACnB,aAAa,EACb,gBAAgB,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,WAAW,EACX,qBAAqB,EACrB,mBAAmB,EACnB,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACb,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;mDAM8B,WAAW;;;;;;;;;;4BAUlC,0BAA0B;kBACpC,WAAW,UAAU,gBAAgB;sBACjC,mBAAmB;;;;;;4BAMb,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;4BAKV,UAAU;;;;+BAIP,gBAAgB;;;;;;;;;;gBAU/B,QAAQ;iBACP,aAAa;;;;;;qCAMO,aAAa;;;;;mBAK/B,aAAa;;;;iBAIf,qBAAqB;;;;;;kBAMpB,aAAa;;CAE9B,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n applicationBackgroundColor,\n bodyFont,\n bodyFontColor,\n borderWidth,\n controlLabelFontColor,\n elevation2BoxShadow,\n mediumPadding,\n popupBorderColor,\n borderHoverColor,\n smallDelay\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n width: 100%;\n height: auto;\n outline: none;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n }\n\n .container {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n height: 100%;\n\n background-color: ${applicationBackgroundColor};\n border: ${borderWidth} solid ${popupBorderColor};\n box-shadow: ${elevation2BoxShadow};\n }\n\n .container::after {\n content: '';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n align-self: center;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n :host(:hover) .container::after {\n width: 100%;\n transition: width ${smallDelay} ease-in;\n }\n\n :host(:focus-within) .container {\n border-bottom-color: ${borderHoverColor};\n }\n\n @media (prefers-reduced-motion) {\n .container::after {\n transition-duration: 0s;\n }\n }\n\n textarea {\n font: ${bodyFont};\n color: ${bodyFontColor};\n background-color: transparent;\n\n width: 100%;\n resize: none;\n height: auto;\n max-height: calc(6lh + 2 * ${mediumPadding});\n field-sizing: content;\n\n border-width: 0px;\n outline: none;\n padding: ${mediumPadding};\n }\n\n textarea::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .send-button {\n align-self: flex-end;\n width: 80px;\n margin: ${mediumPadding};\n }\n`;\n"]}
|