@api-client/ui 0.5.55 → 0.5.56
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.
|
@@ -155,7 +155,7 @@ export default css `
|
|
|
155
155
|
gap: 8px;
|
|
156
156
|
}
|
|
157
157
|
|
|
158
|
-
:host slot[name='end']::slotted(
|
|
158
|
+
:host slot[name='end']::slotted(:not(ui-button):not(ui-checkbox):not(ui-switch)) {
|
|
159
159
|
color: var(--md-sys-color-on-surface-variant);
|
|
160
160
|
fill: var(--md-sys-color-on-surface-variant);
|
|
161
161
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItem.styles.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoNjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: block;\n outline: none;\n cursor: default;\n position: relative;\n\n color: var(--md-sys-color-on-surface);\n\n --md-focus-ring-shape-end-end: 8px;\n --md-focus-ring-shape-end-start: 8px;\n --md-focus-ring-shape-start-end: 8px;\n --md-focus-ring-shape-start-start: 8px;\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n .surface {\n height: inherit;\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n overflow: hidden;\n padding: 8px 16px 8px 16px;\n\n gap: 16px;\n height: 56px;\n }\n\n :host([disabled]) .surface {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface), transparent 96%);\n }\n\n :host([disabled]) .surface,\n :host([disabled]) .headline,\n :host([disabled]) .supporting-text {\n color: color-mix(in srgb, var(--md-sys-color-on-surface), transparent 36%);\n }\n\n :host([image='image']) .surface,\n .surface.two-lines {\n height: 72px;\n }\n\n :host([image='video']) .surface,\n .surface.three-lines {\n height: 88px;\n }\n\n .ripple {\n z-index: 3;\n }\n\n :host([image='video']) .surface {\n /* The spec says the right padding is 24px but counting from the checkbox check border.\n This does not include spacing presented by the checkbox itself (18 box, 40px state layer)\n */\n padding: 12px 16px 12px 0px;\n }\n\n .headline {\n font-family: var(--md-sys-typescale-body-large-font);\n font-weight: var(--md-sys-typescale-body-large-weight);\n font-size: var(--md-sys-typescale-body-large-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n display: flex;\n align-items: center;\n }\n\n .supporting-text {\n color: var(--md-sys-color-on-surface-variant);\n\n font-family: var(--md-sys-typescale-body-medium-font);\n font-weight: var(--md-sys-typescale-body-medium-weight);\n font-size: var(--md-sys-typescale-body-medium-size);\n letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n line-height: var(--md-sys-typescale-body-medium-height);\n\n overflow: hidden;\n }\n\n .supporting-text ::slotted(*),\n slot[name='end-text']::slotted(*) {\n margin: 0;\n padding: 0;\n overflow: hidden;\n }\n\n slot[name='end-text']::slotted(*) {\n /* this is to make up to the 24px right padding defined in the spec. */\n margin-right: 8px;\n }\n\n :host([lines='three']) .supporting-text {\n height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));\n }\n\n :host([lines='three']) .supporting-text ::slotted(*) {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n :host([lines='two']) .supporting-text ::slotted(*) {\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .trailing-supporting-text {\n color: var(--md-sys-color-on-surface-variant);\n\n font-family: var(--md-sys-typescale-body-small-font);\n font-weight: var(--md-sys-typescale-body-small-weight);\n font-size: var(--md-sys-typescale-body-small-size);\n letter-spacing: var(--md-sys-typescale-body-small-tracking);\n line-height: var(--md-sys-typescale-body-small-height);\n }\n\n .start {\n display: contents;\n }\n\n .start.has-start {\n align-self: stretch;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .end {\n display: contents;\n }\n\n .end.has-end,\n .end.has-end-text {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n :host slot[name='end']::slotted(
|
|
1
|
+
{"version":3,"file":"ListItem.styles.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/ListItem.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoNjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: block;\n outline: none;\n cursor: default;\n position: relative;\n\n color: var(--md-sys-color-on-surface);\n\n --md-focus-ring-shape-end-end: 8px;\n --md-focus-ring-shape-end-start: 8px;\n --md-focus-ring-shape-start-end: 8px;\n --md-focus-ring-shape-start-start: 8px;\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n .surface {\n height: inherit;\n box-sizing: border-box;\n\n display: flex;\n align-items: center;\n overflow: hidden;\n padding: 8px 16px 8px 16px;\n\n gap: 16px;\n height: 56px;\n }\n\n :host([disabled]) .surface {\n background-color: color-mix(in srgb, var(--md-sys-color-on-surface), transparent 96%);\n }\n\n :host([disabled]) .surface,\n :host([disabled]) .headline,\n :host([disabled]) .supporting-text {\n color: color-mix(in srgb, var(--md-sys-color-on-surface), transparent 36%);\n }\n\n :host([image='image']) .surface,\n .surface.two-lines {\n height: 72px;\n }\n\n :host([image='video']) .surface,\n .surface.three-lines {\n height: 88px;\n }\n\n .ripple {\n z-index: 3;\n }\n\n :host([image='video']) .surface {\n /* The spec says the right padding is 24px but counting from the checkbox check border.\n This does not include spacing presented by the checkbox itself (18 box, 40px state layer)\n */\n padding: 12px 16px 12px 0px;\n }\n\n .headline {\n font-family: var(--md-sys-typescale-body-large-font);\n font-weight: var(--md-sys-typescale-body-large-weight);\n font-size: var(--md-sys-typescale-body-large-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n display: flex;\n align-items: center;\n }\n\n .supporting-text {\n color: var(--md-sys-color-on-surface-variant);\n\n font-family: var(--md-sys-typescale-body-medium-font);\n font-weight: var(--md-sys-typescale-body-medium-weight);\n font-size: var(--md-sys-typescale-body-medium-size);\n letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n line-height: var(--md-sys-typescale-body-medium-height);\n\n overflow: hidden;\n }\n\n .supporting-text ::slotted(*),\n slot[name='end-text']::slotted(*) {\n margin: 0;\n padding: 0;\n overflow: hidden;\n }\n\n slot[name='end-text']::slotted(*) {\n /* this is to make up to the 24px right padding defined in the spec. */\n margin-right: 8px;\n }\n\n :host([lines='three']) .supporting-text {\n height: calc(2 * var(--md-sys-typescale-body-medium-height, 1.1));\n }\n\n :host([lines='three']) .supporting-text ::slotted(*) {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n :host([lines='two']) .supporting-text ::slotted(*) {\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .trailing-supporting-text {\n color: var(--md-sys-color-on-surface-variant);\n\n font-family: var(--md-sys-typescale-body-small-font);\n font-weight: var(--md-sys-typescale-body-small-weight);\n font-size: var(--md-sys-typescale-body-small-size);\n letter-spacing: var(--md-sys-typescale-body-small-tracking);\n line-height: var(--md-sys-typescale-body-small-height);\n }\n\n .start {\n display: contents;\n }\n\n .start.has-start {\n align-self: stretch;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .end {\n display: contents;\n }\n\n .end.has-end,\n .end.has-end-text {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n :host slot[name='end']::slotted(:not(ui-button):not(ui-checkbox):not(ui-switch)) {\n color: var(--md-sys-color-on-surface-variant);\n fill: var(--md-sys-color-on-surface-variant);\n }\n\n :host slot[name='start']::slotted(*) {\n display: block;\n }\n\n :host([image='icon']) slot[name='start']::slotted(*) {\n width: 24px;\n height: 24px;\n }\n\n :host([image='avatar']) slot[name='start']::slotted(*) {\n width: 40px;\n height: 40px;\n }\n\n :host([image='image']) slot[name='start']::slotted(*) {\n width: 56px;\n height: 56px;\n }\n\n :host([image='video']) slot[name='start']::slotted(*) {\n width: 114px;\n height: 64px;\n }\n\n .body {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n :host(.highlight) .surface {\n background-color: var(--md-sys-color-tertiary-container);\n color: var(--md-sys-color-on-tertiary-container);\n }\n\n :host(.select) .surface {\n background-color: var(--md-sys-color-secondary-container);\n color: var(--md-sys-color-on-secondary-container);\n }\n\n [name='overline'] {\n color: var(--md-sys-color-on-surface-variant);\n font-family: var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));\n font-size: var(--md-sys-typescale-label-small-size, 0.6875rem);\n font-weight: var(\n --md-sys-typescale-label-small-weight,\n var(--md-ref-typeface-weight-medium, 500) --md-ref-typeface-weight-medium is not defined\n );\n line-height: var(--md-sys-typescale-label-small-line-height, 1rem);\n }\n`\n"]}
|