@ni/nimble-components 2.0.1 → 2.0.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.
Files changed (3) hide show
  1. package/dist/esm/text-field/styles.js +64 -45
  2. package/dist/esm/text-field/styles.js.map +1 -1
  3. package/package.json +1 -1
package/dist/esm/text-field/styles.js CHANGED
@@ -21,6 +21,20 @@ export const styles = css `
21
21
  color: ${contentFontColorDisabled};
22
22
  }
23
23
 
24
+ .label {
25
+ display: flex;
26
+ color: ${labelFontColor};
27
+ font-family: ${labelFontFamily};
28
+ font-size: ${labelFontSize};
29
+ font-weight: ${labelFontWeight};
30
+ line-height: ${labelHeight};
31
+ text-transform: ${labelTextTransform};
32
+ }
33
+
34
+ :host([disabled]) .label {
35
+ color: ${labelFontColorDisabled};
36
+ }
37
+
24
38
  .root {
25
39
  box-sizing: border-box;
26
40
  position: relative;
@@ -39,38 +53,40 @@ export const styles = css `
39
53
  );
40
54
  }
41
55
 
42
- :host .root:hover {
43
- --ni-private-bottom-border-width: var(
44
- --ni-private-hover-bottom-border-width
45
- );
46
- }
47
-
48
- :host([disabled]) .root:hover {
49
- --ni-private-bottom-border-width: 1px;
50
- }
51
-
52
- .root:focus-within,
53
- .root:hover {
54
- border-bottom-color: ${borderColorHover};
56
+ @media (prefers-reduced-motion) {
57
+ .root {
58
+ transition-duration: 0s;
59
+ }
55
60
  }
56
61
 
57
62
  :host(.invalid) .root {
58
63
  border-bottom-color: ${failColor};
59
64
  }
60
65
 
66
+ :host([readonly]:not([disabled])) .root {
67
+ border: ${borderWidth} solid rgba(${borderColorRgbPartial}, 0.1);
68
+ padding: 0px;
69
+ padding-bottom: 1px;
70
+ background-color: transparent;
71
+ }
72
+
61
73
  :host([disabled]) .root {
62
74
  border-color: rgba(${borderColorRgbPartial}, 0.1);
63
75
  }
64
76
 
65
- :host([readonly]) .root {
66
- border: none;
67
- padding: ${borderWidth};
77
+ .root:hover {
78
+ --ni-private-bottom-border-width: var(
79
+ --ni-private-hover-bottom-border-width
80
+ );
81
+ border-bottom-color: ${borderColorHover};
68
82
  }
69
83
 
70
- @media (prefers-reduced-motion) {
71
- .root {
72
- transition-duration: 0s;
73
- }
84
+ :host([disabled]) .root:hover {
85
+ --ni-private-bottom-border-width: 1px;
86
+ }
87
+
88
+ .root:focus-within {
89
+ border-bottom-color: ${borderColorHover};
74
90
  }
75
91
 
76
92
  .control {
@@ -112,28 +128,10 @@ export const styles = css `
112
128
  opacity: 1;
113
129
  }
114
130
 
115
- .control[readonly] {
116
- cursor: default;
117
- }
118
-
119
131
  .control[disabled]::placeholder {
120
132
  color: ${contentFontColorDisabled};
121
133
  }
122
134
 
123
- .label {
124
- display: flex;
125
- color: ${labelFontColor};
126
- font-family: ${labelFontFamily};
127
- font-size: ${labelFontSize};
128
- font-weight: ${labelFontWeight};
129
- line-height: ${labelHeight};
130
- text-transform: ${labelTextTransform};
131
- }
132
-
133
- :host([disabled]) .label {
134
- color: ${labelFontColorDisabled};
135
- }
136
-
137
135
  :host [part='end'] {
138
136
  display: none;
139
137
  }
@@ -166,22 +164,43 @@ export const styles = css `
166
164
  }
167
165
  `), appearanceBehavior(TextFieldAppearance.Block, css `
168
166
  .root {
169
- background-color: rgba(${borderColorRgbPartial}, 0.05);
167
+ background-color: rgba(${borderColorRgbPartial}, 0.1);
170
168
  --ni-private-bottom-border-width: 0px;
171
169
  padding-top: ${borderWidth};
172
170
  padding-left: ${borderWidth};
173
171
  padding-right: ${borderWidth};
174
172
  }
175
173
 
176
- .root:focus-within,
177
- :host(.invalid) .root,
178
- :host([disabled]) .root {
174
+ .root:focus-within {
175
+ --ni-private-bottom-border-width: 1px;
176
+ }
177
+
178
+ .root:focus-within:hover {
179
+ --ni-private-bottom-border-width: var(
180
+ --ni-private-hover-bottom-border-width
181
+ );
182
+ }
183
+
184
+ :host(.invalid) .root {
179
185
  --ni-private-bottom-border-width: 1px;
180
186
  }
181
187
 
182
- :host([disabled]) .root,
183
- :host([readonly]) .root {
184
- background-color: transparent;
188
+ :host(.invalid) .root:hover {
189
+ --ni-private-bottom-border-width: var(
190
+ --ni-private-hover-bottom-border-width
191
+ );
192
+ }
193
+
194
+ :host([disabled]) .root {
195
+ background-color: rgba(${borderColorRgbPartial}, 0.07);
196
+ }
197
+
198
+ :host([disabled]) .root:hover {
199
+ --ni-private-bottom-border-width: 0px;
200
+ }
201
+
202
+ :host(.invalid[disabled]) .root {
203
+ --ni-private-bottom-border-width: 1px;
185
204
  }
186
205
  `), appearanceBehavior(TextFieldAppearance.Outline, css `
187
206
  .root {
package/dist/esm/text-field/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,UAAU,EACV,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;;;;;uBASlB,UAAU;oCACG,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;;;;;;;;;;;;;;;;;;;+BAoBvB,gBAAgB;;;;+BAIhB,SAAS;;;;6BAIX,qBAAqB;;;;;mBAK/B,WAAW;;;;;;;;;;;;;;;;;cAiBhB,aAAa,MAAM,WAAW;;;;;;6BAMf,eAAe;8BACd,eAAe;;;;;;;;;;;;iBAY5B,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;;;;;;;;;iBAYd,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;iBAI3B,sBAAsB;;;;;;;;;;;;;;;kBAerB,QAAQ;iBACT,QAAQ;;;;gBAIT,SAAS;;;;gBAIT,wBAAwB;;CAEvC,CAAC,aAAa,CACP,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;SAEnC,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE0B,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;SAanC,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGiB,WAAW;;;SAGlC,CACA,EACD,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,gBAAgB,EAChB,wBAAwB,EACxB,eAAe,EACf,aAAa,EACb,SAAS,EACT,2BAA2B,EAC3B,UAAU,EACV,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;uBAGN,UAAU;qBACZ,eAAe;;;iBAGnB,gBAAgB;uBACV,WAAW,MAAM,aAAa;;;;iBAIpC,wBAAwB;;;;;iBAKxB,cAAc;uBACR,eAAe;qBACjB,aAAa;uBACX,eAAe;uBACf,WAAW;0BACR,kBAAkB;;;;iBAI3B,sBAAsB;;;;;;;;;uBAShB,UAAU;oCACG,UAAU,oBAAoB,UAAU;;;iCAG3C,qBAAqB;;;;;;;;;;;;;;;+BAevB,SAAS;;;;kBAItB,WAAW,eAAe,qBAAqB;;;;;;;6BAOpC,qBAAqB;;;;;;;+BAOnB,gBAAgB;;;;;;;;+BAQhB,gBAAgB;;;;;;;;;;;cAWjC,aAAa,MAAM,WAAW;;;;;;6BAMf,eAAe;8BACd,eAAe;;;;;;;;;;;;iBAY5B,cAAc;2BACJ,2BAA2B;;;;iBAIrC,cAAc;;;;;;;;iBAQd,wBAAwB;;;;;;;;;;;;;;;kBAevB,QAAQ;iBACT,QAAQ;;;;gBAIT,SAAS;;;;gBAIT,wBAAwB;;CAEvC,CAAC,aAAa,CACP,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;;+BAGgB,WAAW;gCACV,WAAW;iCACV,WAAW;;SAEnC,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE0B,qBAAqB;;+BAE/B,WAAW;gCACV,WAAW;iCACV,WAAW;;;;;;;;;;;;;;;;;;;;;;;;yCAwBH,qBAAqB;;;;;;;;;;SAUrD,CACA,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;;gCAGiB,WAAW;;;SAGlC,CACA,EACD,aAAa,CACT,GAAG,CAAA;cACD,EAAE,CAAC,iBAAiB;;;;SAIzB,EACG,GAAG,CAAA;cACD,EAAE,CAAC,gBAAgB;;;;SAIxB;AACG,cAAc;AACd,KAAK,CAAC,IAAI,CACb,CACJ,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ni/nimble-components",
3
- "version": "2.0.1",
3
+ "version": "2.0.2",
4
4
  "description": "Styled web components for the NI Nimble Design System",
5
5
  "scripts": {
6
6
  "build": "npm run build-components && npm run generate-scss && npm run build-storybook",