@ni/nimble-components 2.1.3 → 3.2.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/breadcrumb/index.d.ts +12 -0
- package/dist/esm/breadcrumb/index.js +16 -0
- package/dist/esm/breadcrumb/index.js.map +1 -0
- package/dist/esm/breadcrumb/styles.d.ts +1 -0
- package/dist/esm/breadcrumb/styles.js +25 -0
- package/dist/esm/breadcrumb/styles.js.map +1 -0
- package/dist/esm/breadcrumb-item/index.d.ts +12 -0
- package/dist/esm/breadcrumb-item/index.js +20 -0
- package/dist/esm/breadcrumb-item/index.js.map +1 -0
- package/dist/esm/breadcrumb-item/styles.d.ts +1 -0
- package/dist/esm/breadcrumb-item/styles.js +65 -0
- package/dist/esm/breadcrumb-item/styles.js.map +1 -0
- package/dist/esm/button/index.js +1 -1
- package/dist/esm/button/index.js.map +1 -1
- package/dist/esm/button/styles.d.ts +1 -0
- package/dist/esm/button/styles.js +82 -0
- package/dist/esm/button/styles.js.map +1 -0
- package/dist/esm/checkbox/styles.js +11 -13
- package/dist/esm/checkbox/styles.js.map +1 -1
- package/dist/esm/drawer/index.js +2 -2
- package/dist/esm/drawer/index.js.map +1 -1
- package/dist/esm/drawer/styles.js +4 -6
- package/dist/esm/drawer/styles.js.map +1 -1
- package/dist/esm/icon-base/styles.js +1 -2
- package/dist/esm/icon-base/styles.js.map +1 -1
- package/dist/esm/listbox-option/styles.js +7 -8
- package/dist/esm/listbox-option/styles.js.map +1 -1
- package/dist/esm/menu/styles.js +4 -7
- package/dist/esm/menu/styles.js.map +1 -1
- package/dist/esm/menu-item/styles.js +6 -7
- package/dist/esm/menu-item/styles.js.map +1 -1
- package/dist/esm/nimble-components/src/breadcrumb/index.d.ts +12 -0
- package/dist/esm/nimble-components/src/breadcrumb/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/breadcrumb-item/index.d.ts +12 -0
- package/dist/esm/nimble-components/src/breadcrumb-item/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/button/styles.d.ts +1 -0
- package/dist/esm/nimble-components/src/theme-provider/design-token-names.d.ts +4 -0
- package/dist/esm/nimble-components/src/theme-provider/design-tokens.d.ts +56 -25
- package/dist/esm/number-field/styles.js +13 -19
- package/dist/esm/number-field/styles.js.map +1 -1
- package/dist/esm/patterns/button/styles.js +20 -21
- package/dist/esm/patterns/button/styles.js.map +1 -1
- package/dist/esm/select/styles.js +10 -12
- package/dist/esm/select/styles.js.map +1 -1
- package/dist/esm/tab/styles.js +6 -7
- package/dist/esm/tab/styles.js.map +1 -1
- package/dist/esm/tab-panel/styles.js +3 -4
- package/dist/esm/tab-panel/styles.js.map +1 -1
- package/dist/esm/tabs/styles.js +2 -2
- package/dist/esm/tabs-toolbar/styles.js +4 -5
- package/dist/esm/tabs-toolbar/styles.js.map +1 -1
- package/dist/esm/text-area/styles.js +18 -23
- package/dist/esm/text-area/styles.js.map +1 -1
- package/dist/esm/text-field/styles.js +27 -32
- package/dist/esm/text-field/styles.js.map +1 -1
- package/dist/esm/theme-provider/design-token-comments.js +73 -42
- package/dist/esm/theme-provider/design-token-comments.js.map +1 -1
- package/dist/esm/theme-provider/design-token-names.d.ts +4 -0
- package/dist/esm/theme-provider/design-token-names.js +60 -25
- package/dist/esm/theme-provider/design-token-names.js.map +1 -1
- package/dist/esm/theme-provider/design-tokens.d.ts +56 -25
- package/dist/esm/theme-provider/design-tokens.js +60 -30
- package/dist/esm/theme-provider/design-tokens.js.map +1 -1
- package/dist/esm/tree-item/styles.js +8 -9
- package/dist/esm/tree-item/styles.js.map +1 -1
- package/dist/tokens-internal.scss +267 -81
- package/dist/tokens.scss +138 -45
- package/package.json +2 -2
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Breadcrumb as FoundationBreadcrumb } from '@microsoft/fast-foundation';
|
|
2
|
+
export type { Breadcrumb };
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'nimble-breadcrumb': Breadcrumb;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* A nimble-styled breadcrumb
|
|
10
|
+
*/
|
|
11
|
+
declare class Breadcrumb extends FoundationBreadcrumb {
|
|
12
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { DesignSystem, Breadcrumb as FoundationBreadcrumb, breadcrumbTemplate as template } from '@microsoft/fast-foundation';
|
|
2
|
+
import { styles } from './styles';
|
|
3
|
+
/**
|
|
4
|
+
* A nimble-styled breadcrumb
|
|
5
|
+
*/
|
|
6
|
+
class Breadcrumb extends FoundationBreadcrumb {
|
|
7
|
+
}
|
|
8
|
+
const nimbleBreadcrumb = Breadcrumb.compose({
|
|
9
|
+
baseName: 'breadcrumb',
|
|
10
|
+
baseClass: FoundationBreadcrumb,
|
|
11
|
+
// @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
|
|
12
|
+
template,
|
|
13
|
+
styles
|
|
14
|
+
});
|
|
15
|
+
DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
|
|
16
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,UAAU,IAAI,oBAAoB,EAClC,kBAAkB,IAAI,QAAQ,EACjC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,UAAW,SAAQ,oBAAoB;CAAG;AAEhD,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC;IACxC,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,oBAAoB;IAC/B,0GAA0G;IAC1G,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { css } from '@microsoft/fast-element';
|
|
2
|
+
import { display } from '@microsoft/fast-foundation';
|
|
3
|
+
import { bodyFont } from '../theme-provider/design-tokens';
|
|
4
|
+
export const styles = css `
|
|
5
|
+
${display('inline-block')}
|
|
6
|
+
|
|
7
|
+
:host {
|
|
8
|
+
box-sizing: border-box;
|
|
9
|
+
font: ${bodyFont};
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.list {
|
|
13
|
+
display: flex;
|
|
14
|
+
flex-wrap: wrap;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
::slotted(*:first-child) {
|
|
18
|
+
padding-left: 0px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
::slotted(*:not([href]):last-child) {
|
|
22
|
+
font-weight: bold;
|
|
23
|
+
}
|
|
24
|
+
`;
|
|
25
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAE3D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;;;;gBAIb,QAAQ;;;;;;;;;;;;;;;CAevB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { BreadcrumbItem as FoundationBreadcrumbItem } from '@microsoft/fast-foundation';
|
|
2
|
+
export type { BreadcrumbItem };
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'nimble-breadcrumb-item': BreadcrumbItem;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* A nimble-styled breadcrumb item
|
|
10
|
+
*/
|
|
11
|
+
declare class BreadcrumbItem extends FoundationBreadcrumbItem {
|
|
12
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { DesignSystem, BreadcrumbItem as FoundationBreadcrumbItem, breadcrumbItemTemplate as template } from '@microsoft/fast-foundation';
|
|
2
|
+
import { forwardSlash16X16 } from '@ni/nimble-tokens/dist-icons-esm/nimble-icons-inline';
|
|
3
|
+
import { styles } from './styles';
|
|
4
|
+
/**
|
|
5
|
+
* A nimble-styled breadcrumb item
|
|
6
|
+
*/
|
|
7
|
+
class BreadcrumbItem extends FoundationBreadcrumbItem {
|
|
8
|
+
}
|
|
9
|
+
const nimbleBreadcrumbItem = BreadcrumbItem.compose({
|
|
10
|
+
baseName: 'breadcrumb-item',
|
|
11
|
+
baseClass: FoundationBreadcrumbItem,
|
|
12
|
+
// @ts-expect-error FAST templates have incorrect type, see: https://github.com/microsoft/fast/issues/5047
|
|
13
|
+
template,
|
|
14
|
+
styles,
|
|
15
|
+
separator: forwardSlash16X16.data
|
|
16
|
+
});
|
|
17
|
+
DesignSystem.getOrCreate()
|
|
18
|
+
.withPrefix('nimble')
|
|
19
|
+
.register(nimbleBreadcrumbItem());
|
|
20
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/breadcrumb-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,cAAc,IAAI,wBAAwB,EAC1C,sBAAsB,IAAI,QAAQ,EAErC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sDAAsD,CAAC;AACzF,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAUlC;;GAEG;AACH,MAAM,cAAe,SAAQ,wBAAwB;CAAG;AAExD,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAwB;IACvE,QAAQ,EAAE,iBAAiB;IAC3B,SAAS,EAAE,wBAAwB;IACnC,0GAA0G;IAC1G,QAAQ;IACR,MAAM;IACN,SAAS,EAAE,iBAAiB,CAAC,IAAI;CACpC,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { css } from '@microsoft/fast-element';
|
|
2
|
+
import { display } from '@microsoft/fast-foundation';
|
|
3
|
+
import { bodyFont, bodyFontColor, borderHoverColor, borderWidth, controlHeight, iconSize, passColor } from '../theme-provider/design-tokens';
|
|
4
|
+
export const styles = css `
|
|
5
|
+
${display('inline-flex')}
|
|
6
|
+
|
|
7
|
+
:host {
|
|
8
|
+
height: ${controlHeight};
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
font: ${bodyFont};
|
|
11
|
+
color: ${bodyFontColor};
|
|
12
|
+
padding-left: 4px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.listitem {
|
|
16
|
+
line-height: ${controlHeight};
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.control {
|
|
20
|
+
color: ${bodyFontColor};
|
|
21
|
+
cursor: default;
|
|
22
|
+
border: ${borderWidth} solid transparent;
|
|
23
|
+
padding: 4px 4px 0px 4px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.control:link {
|
|
27
|
+
cursor: pointer;
|
|
28
|
+
text-decoration: none;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.control:hover {
|
|
32
|
+
text-decoration: underline;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.control:active {
|
|
36
|
+
color: ${passColor};
|
|
37
|
+
text-decoration: underline;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.control:link:focus-within {
|
|
41
|
+
outline-color: ${borderHoverColor};
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.start,
|
|
45
|
+
.end {
|
|
46
|
+
display: none;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.separator {
|
|
50
|
+
padding-left: 2px;
|
|
51
|
+
padding-right: 2px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
slot[name='separator'] svg {
|
|
55
|
+
position: relative;
|
|
56
|
+
top: 4px;
|
|
57
|
+
width: ${iconSize};
|
|
58
|
+
height: ${iconSize};
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
slot[name='separator'] path {
|
|
62
|
+
fill: ${bodyFontColor};
|
|
63
|
+
}
|
|
64
|
+
`;
|
|
65
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/breadcrumb-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,EACR,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;kBAGV,aAAa;;gBAEf,QAAQ;iBACP,aAAa;;;;;uBAKP,aAAa;;;;iBAInB,aAAa;;kBAEZ,WAAW;;;;;;;;;;;;;;iBAcZ,SAAS;;;;;yBAKD,gBAAgB;;;;;;;;;;;;;;;;iBAgBxB,QAAQ;kBACP,QAAQ;;;;gBAIV,aAAa;;CAE5B,CAAC"}
|
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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
3
|
import { focusVisible } from '../utilities/style/focus';
|
|
4
|
-
import { borderColor,
|
|
4
|
+
import { borderColor, borderHoverColor, borderRgbPartialColor, bodyFontColor, bodyDisabledFontColor, controlHeight, iconSize, borderWidth, smallDelay, buttonLabelFont } from '../theme-provider/design-tokens';
|
|
5
5
|
export const styles = css `
|
|
6
6
|
${display('inline-flex')}
|
|
7
7
|
|
|
@@ -42,32 +42,30 @@ export const styles = css `
|
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
:host([disabled]) .control {
|
|
45
|
-
background-color: rgba(${
|
|
46
|
-
border-color: rgba(${
|
|
45
|
+
background-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
46
|
+
border-color: rgba(${borderRgbPartialColor}, 0.2);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
:host(:not([disabled]):not(:active):hover) .control {
|
|
50
|
-
border-color: ${
|
|
51
|
-
box-shadow: 0px 0px 0px ${borderWidth} ${
|
|
50
|
+
border-color: ${borderHoverColor};
|
|
51
|
+
box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
:host(${focusVisible}) .control {
|
|
55
|
-
border-color: ${
|
|
56
|
-
outline: 2px solid ${
|
|
55
|
+
border-color: ${borderHoverColor};
|
|
56
|
+
outline: 2px solid ${borderHoverColor};
|
|
57
57
|
outline-offset: 2px;
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
.label {
|
|
61
|
-
font
|
|
62
|
-
|
|
63
|
-
color: ${contentFontColor};
|
|
64
|
-
line-height: ${labelHeight};
|
|
61
|
+
font: ${buttonLabelFont};
|
|
62
|
+
color: ${bodyFontColor};
|
|
65
63
|
padding-left: 1ch;
|
|
66
64
|
cursor: inherit;
|
|
67
65
|
}
|
|
68
66
|
|
|
69
67
|
:host([disabled]) .label {
|
|
70
|
-
color: ${
|
|
68
|
+
color: ${bodyDisabledFontColor};
|
|
71
69
|
}
|
|
72
70
|
|
|
73
71
|
slot[name='checked-indicator'] svg {
|
|
@@ -86,7 +84,7 @@ export const styles = css `
|
|
|
86
84
|
}
|
|
87
85
|
|
|
88
86
|
:host([disabled]) slot[name='checked-indicator'] path {
|
|
89
|
-
fill: rgba(${
|
|
87
|
+
fill: rgba(${borderRgbPartialColor}, 0.3);
|
|
90
88
|
}
|
|
91
89
|
`;
|
|
92
90
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/checkbox/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,WAAW,EACX,gBAAgB,EAChB,qBAAqB,EACrB,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,QAAQ,EACR,WAAW,EACX,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;sBAcN,aAAa;uBACZ,aAAa;;;kBAGlB,WAAW,UAAU,WAAW;;;;;iCAKjB,UAAU;UACjC;AACE;;;GAGG,CAAC,EACR;;;;;;;;;;;iCAWyB,qBAAqB;6BACzB,qBAAqB;;;;wBAI1B,gBAAgB;kCACN,WAAW,IAAI,gBAAgB;;;YAGrD,YAAY;wBACA,gBAAgB;6BACX,gBAAgB;;;;;gBAK7B,eAAe;iBACd,aAAa;;;;;;iBAMb,qBAAqB;;;;kBAIpB,QAAQ;iBACT,QAAQ;;;;;gBAKT,WAAW;;;;;;;;;qBASN,qBAAqB;;CAEzC,CAAC"}
|
package/dist/esm/drawer/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { AnimateGroup, AnimateTo } from '@microsoft/fast-animation';
|
|
3
3
|
import { attr, Observable } from '@microsoft/fast-element';
|
|
4
4
|
import { DesignSystem, Dialog as FoundationDialog, dialogTemplate as template } from '@microsoft/fast-foundation';
|
|
5
|
-
import {
|
|
5
|
+
import { largeDelay } from '../theme-provider/design-tokens';
|
|
6
6
|
import { prefersReducedMotionMediaQuery } from '../utilities/style/prefers-reduced-motion';
|
|
7
7
|
import { animationConfig } from './animations';
|
|
8
8
|
import { styles } from './styles';
|
|
@@ -125,7 +125,7 @@ class Drawer extends FoundationDialog {
|
|
|
125
125
|
const disableAnimations = prefersReducedMotionMediaQuery.matches;
|
|
126
126
|
this.animationDurationMilliseconds = disableAnimations
|
|
127
127
|
? animationDurationWhenDisabledMilliseconds
|
|
128
|
-
:
|
|
128
|
+
: largeDelay.getValueFor(this);
|
|
129
129
|
}
|
|
130
130
|
animateOpening() {
|
|
131
131
|
this.animateOpenClose(true);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EACH,IAAI,EAEJ,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAC1B,cAAc,IAAI,QAAQ,EAC7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/drawer/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import { applicationBackgroundColor,
|
|
3
|
+
import { applicationBackgroundColor, bodyFont, bodyFontColor, borderWidth, popupBorderColor, popupBoxShadowColor, standardPadding, titlePlus1Font, drawerWidth } from '../theme-provider/design-tokens';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('block')}
|
|
6
6
|
|
|
@@ -11,9 +11,8 @@ export const styles = css `
|
|
|
11
11
|
width: fit-content;
|
|
12
12
|
height: 100%;
|
|
13
13
|
outline: none;
|
|
14
|
-
font
|
|
15
|
-
|
|
16
|
-
color: ${contentFontColor};
|
|
14
|
+
font: ${bodyFont};
|
|
15
|
+
color: ${bodyFontColor};
|
|
17
16
|
}
|
|
18
17
|
|
|
19
18
|
:host([modal]) {
|
|
@@ -95,8 +94,7 @@ export const styles = css `
|
|
|
95
94
|
|
|
96
95
|
::slotted(header) {
|
|
97
96
|
padding: ${standardPadding};
|
|
98
|
-
font
|
|
99
|
-
font-size: ${drawerHeaderFontSize};
|
|
97
|
+
font: ${titlePlus1Font};
|
|
100
98
|
}
|
|
101
99
|
|
|
102
100
|
::slotted(section) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/drawer/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,cAAc,EACd,WAAW,EACd,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;gBASN,QAAQ;iBACP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgCxB,CAAA,8DAA+D,EAAE;;;;sBAIjD,gBAAgB;;;;;;;;;;;;;;iBAcrB,WAAW;;4BAEA,0BAA0B;;;;;;;;;;;;;;wBAc9B,WAAW,UAAU,mBAAmB;;;;;uBAKzC,WAAW,UAAU,mBAAmB;;;MAGzD;AACE;;;EAGE,CAAC,EACP;;;mBAGe,eAAe;gBAClB,cAAc;;;;mBAIX,eAAe;;;;;;mBAMf,eAAe;;;;sBAIZ,WAAW,UAAU,gBAAgB;;CAE1D,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import {
|
|
3
|
+
import { iconSize, warningColor, failColor, passColor, iconColor } from '../theme-provider/design-tokens';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('inline-flex')}
|
|
6
6
|
|
|
@@ -9,7 +9,6 @@ export const styles = css `
|
|
|
9
9
|
user-select: none;
|
|
10
10
|
width: ${iconSize};
|
|
11
11
|
height: ${iconSize};
|
|
12
|
-
${iconColor.cssCustomProperty}: ${contentFontColor};
|
|
13
12
|
}
|
|
14
13
|
|
|
15
14
|
.icon {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/icon-base/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,EACZ,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;;iBAKX,QAAQ;kBACP,QAAQ;;;;;;;;;UAShB,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;UAIzC,SAAS,CAAC,iBAAiB,KAAK,YAAY;;;;UAI5C,SAAS,CAAC,iBAAiB,KAAK,SAAS;;;;gBAInC,SAAS;;;;CAIxB,CAAC"}
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
3
|
import { focusVisible } from '../utilities/style/focus';
|
|
4
|
-
import {
|
|
4
|
+
import { borderHoverColor, fillColorSelected, fillHoverSelectedColor, fillHoverColor, bodyFont, bodyDisabledFontColor } from '../theme-provider/design-tokens';
|
|
5
5
|
export const styles = css `
|
|
6
6
|
${display('flex')}
|
|
7
7
|
|
|
8
8
|
:host {
|
|
9
|
-
font
|
|
10
|
-
font-size: ${contentFontSize};
|
|
9
|
+
font: ${bodyFont};
|
|
11
10
|
cursor: pointer;
|
|
12
11
|
justify-content: left;
|
|
13
12
|
}
|
|
@@ -23,11 +22,11 @@ export const styles = css `
|
|
|
23
22
|
}
|
|
24
23
|
|
|
25
24
|
:host(:hover.selected) {
|
|
26
|
-
background-color: ${
|
|
25
|
+
background-color: ${fillHoverSelectedColor};
|
|
27
26
|
}
|
|
28
27
|
|
|
29
28
|
:host(:hover) {
|
|
30
|
-
background-color: ${
|
|
29
|
+
background-color: ${fillHoverColor};
|
|
31
30
|
}
|
|
32
31
|
|
|
33
32
|
:host(:hover):host([disabled]) {
|
|
@@ -36,8 +35,8 @@ export const styles = css `
|
|
|
36
35
|
}
|
|
37
36
|
|
|
38
37
|
:host(:${focusVisible}) {
|
|
39
|
-
box-shadow: 0px 0px 0px 1px ${
|
|
40
|
-
outline: 1px solid ${
|
|
38
|
+
box-shadow: 0px 0px 0px 1px ${borderHoverColor} inset;
|
|
39
|
+
outline: 1px solid ${borderHoverColor};
|
|
41
40
|
outline-offset: -4px;
|
|
42
41
|
}
|
|
43
42
|
|
|
@@ -48,7 +47,7 @@ export const styles = css `
|
|
|
48
47
|
}
|
|
49
48
|
|
|
50
49
|
:host([disabled]) {
|
|
51
|
-
color: ${
|
|
50
|
+
color: ${bodyDisabledFontColor};
|
|
52
51
|
cursor: default;
|
|
53
52
|
}
|
|
54
53
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/listbox-option/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,gBAAgB,EAChB,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/listbox-option/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,cAAc,EACd,QAAQ,EACR,qBAAqB,EACxB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;;;;;;;;;4BAYI,iBAAiB;;;;4BAIjB,sBAAsB;;;;4BAItB,cAAc;;;;;;;;aAQ7B,YAAY;sCACa,gBAAgB;6BACzB,gBAAgB;;;;;;;4BAOjB,iBAAiB;;;;iBAI5B,qBAAqB;;;;;;;;CAQrC,CAAC"}
|
package/dist/esm/menu/styles.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
|
-
import { applicationBackgroundColor, borderWidth, borderColor,
|
|
3
|
+
import { applicationBackgroundColor, borderWidth, borderColor, popupBorderColor, popupBoxShadowColor, groupHeaderFont, groupHeaderTextTransform, groupHeaderFontColor } from '../theme-provider/design-tokens';
|
|
4
4
|
export const styles = css `
|
|
5
5
|
${display('grid')}
|
|
6
6
|
|
|
@@ -27,12 +27,9 @@ export const styles = css `
|
|
|
27
27
|
}
|
|
28
28
|
::slotted(header) {
|
|
29
29
|
display: flex;
|
|
30
|
-
font
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
line-height: ${labelHeight};
|
|
34
|
-
color: ${groupLabelFontColor};
|
|
35
|
-
text-transform: ${groupLabelTextTransform};
|
|
30
|
+
font: ${groupHeaderFont};
|
|
31
|
+
color: ${groupHeaderFontColor};
|
|
32
|
+
text-transform: ${groupHeaderTextTransform};
|
|
36
33
|
padding-top: 4px;
|
|
37
34
|
padding-bottom: 4px;
|
|
38
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,wBAAwB,EACxB,oBAAoB,EACvB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;sBAGC,0BAA0B;kBAC9B,WAAW,UAAU,gBAAgB;;;;;kCAKrB,mBAAmB;;;;;;;;;;;sBAW/B,WAAW;;;;;gBAKjB,eAAe;iBACd,oBAAoB;0BACX,wBAAwB;;;;CAIjD,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '@microsoft/fast-foundation';
|
|
3
3
|
import { focusVisible } from '../utilities/style/focus';
|
|
4
|
-
import { controlHeight,
|
|
4
|
+
import { controlHeight, fillColorSelected, fillHoverColor, bodyFontColor, borderHoverColor, iconSize, bodyFont, bodyDisabledFontColor } from '../theme-provider/design-tokens';
|
|
5
5
|
export const styles = css `
|
|
6
6
|
${display('grid')}
|
|
7
7
|
|
|
@@ -18,24 +18,23 @@ export const styles = css `
|
|
|
18
18
|
padding-right: 8px;
|
|
19
19
|
margin: 0 0;
|
|
20
20
|
white-space: nowrap;
|
|
21
|
-
color: ${
|
|
21
|
+
color: ${bodyFontColor};
|
|
22
22
|
fill: currentcolor;
|
|
23
23
|
cursor: pointer;
|
|
24
|
-
font
|
|
25
|
-
font-size: ${contentFontSize};
|
|
24
|
+
font: ${bodyFont};
|
|
26
25
|
}
|
|
27
26
|
:host(${focusVisible}) {
|
|
28
|
-
outline: 2px solid ${
|
|
27
|
+
outline: 2px solid ${borderHoverColor};
|
|
29
28
|
outline-offset: -2px;
|
|
30
29
|
}
|
|
31
30
|
:host(:hover) {
|
|
32
|
-
background: ${
|
|
31
|
+
background: ${fillHoverColor};
|
|
33
32
|
}
|
|
34
33
|
:host(:active) {
|
|
35
34
|
background: ${fillColorSelected};
|
|
36
35
|
}
|
|
37
36
|
:host([disabled]) {
|
|
38
|
-
color: ${
|
|
37
|
+
color: ${bodyDisabledFontColor};
|
|
39
38
|
fill: currentcolor;
|
|
40
39
|
cursor: default;
|
|
41
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,aAAa,EACb,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/menu-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EACH,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,qBAAqB,EACxB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;;;;kBAMH,aAAa;;;;;;;;;iBASd,aAAa;;;gBAGd,QAAQ;;YAEZ,YAAY;6BACK,gBAAgB;;;;sBAIvB,cAAc;;;sBAGd,iBAAiB;;;iBAGtB,qBAAqB;;;;;;;;iCAQL,QAAQ;;;;;;;;iBAQxB,QAAQ;kBACP,QAAQ;;;;;;;;CAQzB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { Breadcrumb as FoundationBreadcrumb } from '@microsoft/fast-foundation';
|
|
2
|
+
export type { Breadcrumb };
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'nimble-breadcrumb': Breadcrumb;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* A nimble-styled breadcrumb
|
|
10
|
+
*/
|
|
11
|
+
declare class Breadcrumb extends FoundationBreadcrumb {
|
|
12
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { BreadcrumbItem as FoundationBreadcrumbItem } from '@microsoft/fast-foundation';
|
|
2
|
+
export type { BreadcrumbItem };
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'nimble-breadcrumb-item': BreadcrumbItem;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* A nimble-styled breadcrumb item
|
|
10
|
+
*/
|
|
11
|
+
declare class BreadcrumbItem extends FoundationBreadcrumbItem {
|
|
12
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("@microsoft/fast-element").ElementStyles;
|