@ni/nimble-components 3.0.0 → 3.1.0
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/esm/button/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { attr } from '@microsoft/fast-element';
|
|
3
3
|
import { Button as FoundationButton, buttonTemplate as template, DesignSystem } from '@microsoft/fast-foundation';
|
|
4
|
-
import { styles } from '
|
|
4
|
+
import { styles } from './styles';
|
|
5
5
|
import { ButtonAppearance } from './types';
|
|
6
6
|
/**
|
|
7
7
|
* A nimble-styled HTML button
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,cAAc,IAAI,QAAQ,EAC1B,YAAY,EACf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAU3C;;GAEG;AACH,MAAM,MAAO,SAAQ,gBAAgB;IAArC;;QAWI;;;;;;;;WAQG;QAEI,kBAAa,GAAG,KAAK,CAAC;QAEZ,cAAS,GAAG,uBAAuB,CAAC;IAYzD,CAAC;IAVU,iBAAiB;QACpB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;YAClB,IAAI,CAAC,UAAU,GAAG,gBAAgB,CAAC,OAAO,CAAC;SAC9C;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAE,CAAC;QACxD,OAAO,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACjE,CAAC;CACJ;AA1BG;IADC,IAAI;0CACgC;AAYrC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;6CAC1B;AAgBjC;;;;;;;;GAQG;AACH,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { css } from '@microsoft/fast-element';
|
|
2
|
+
import { focusVisible } from '../utilities/style/focus';
|
|
3
|
+
import { actionRgbPartialColor, borderHoverColor, borderWidth, fillColorSelected, standardPadding } from '../theme-provider/design-tokens';
|
|
4
|
+
import { styles as buttonStyles } from '../patterns/button/styles';
|
|
5
|
+
import { appearanceBehavior } from '../utilities/style/appearance';
|
|
6
|
+
import { ButtonAppearance } from './types';
|
|
7
|
+
// prettier-ignore
|
|
8
|
+
export const styles = buttonStyles
|
|
9
|
+
.withBehaviors(appearanceBehavior(ButtonAppearance.Outline, css `
|
|
10
|
+
:host(.primary) .control {
|
|
11
|
+
box-shadow: 0px 0px 0px ${borderWidth} rgba(${actionRgbPartialColor}, 0.3) inset;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
:host(.primary) .control:hover {
|
|
15
|
+
box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
:host(.primary) .control${focusVisible} {
|
|
19
|
+
box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
:host(.primary) .control:active {
|
|
23
|
+
box-shadow: none;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
:host(.primary) .control[disabled] {
|
|
27
|
+
box-shadow: none;
|
|
28
|
+
}
|
|
29
|
+
`), appearanceBehavior(ButtonAppearance.Block, css `
|
|
30
|
+
:host(.primary) .control {
|
|
31
|
+
background-clip: padding-box;
|
|
32
|
+
border-color: rgba(${actionRgbPartialColor}, 0.3);
|
|
33
|
+
border-width: calc(2 * ${borderWidth});
|
|
34
|
+
padding: 0 calc(${standardPadding} - ${borderWidth});
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
:host(.primary[content-hidden]) .control {
|
|
38
|
+
padding: 0px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
:host(.primary) .control:hover {
|
|
42
|
+
border-color: ${borderHoverColor};
|
|
43
|
+
box-shadow: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:host(.primary) .control${focusVisible} {
|
|
47
|
+
background-clip: border-box;
|
|
48
|
+
border-color: ${borderHoverColor};
|
|
49
|
+
border-width: ${borderWidth};
|
|
50
|
+
box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
|
|
51
|
+
padding: 0 ${standardPadding};
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:host(.primary[content-hidden]) .control${focusVisible} {
|
|
55
|
+
padding: 0px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
:host(.primary) .control:active {
|
|
59
|
+
background-clip: border-box;
|
|
60
|
+
border-color: ${fillColorSelected};
|
|
61
|
+
border-width: ${borderWidth};
|
|
62
|
+
box-shadow: none;
|
|
63
|
+
padding: 0 ${standardPadding};
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
:host(.primary[content-hidden]) .control:active {
|
|
67
|
+
padding: 0px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
:host(.primary) .control[disabled] {
|
|
71
|
+
background-clip: border-box;
|
|
72
|
+
border-color: transparent;
|
|
73
|
+
border-width: ${borderWidth};
|
|
74
|
+
box-shadow: none;
|
|
75
|
+
padding: 0 ${standardPadding};
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
:host(.primary[content-hidden]) .control[disabled] {
|
|
79
|
+
padding: 0px;
|
|
80
|
+
}
|
|
81
|
+
`));
|
|
82
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,iBAAiB,EACjB,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,kBAAkB;AAClB,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY;KAC7B,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;8CAE+B,WAAW,SAAS,qBAAqB;;;;8CAIzC,WAAW,IAAI,gBAAgB;;;0CAGnC,YAAY;8CACR,WAAW,IAAI,gBAAgB;;;;;;;;;;aAUhE,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;yCAG0B,qBAAqB;6CACjB,WAAW;sCAClB,eAAe,MAAM,WAAW;;;;;;;;oCAQlC,gBAAgB;;;;0CAIV,YAAY;;oCAElB,gBAAgB;oCAChB,WAAW;8CACD,WAAW,IAAI,gBAAgB;iCAC5C,eAAe;;;0DAGU,YAAY;;;;;;oCAMlC,iBAAiB;oCACjB,WAAW;;iCAEd,eAAe;;;;;;;;;;oCAUZ,WAAW;;iCAEd,eAAe;;;;;;aAMnC,CACJ,CACJ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|
package/package.json
CHANGED