@fluid-topics/ft-card 2.0.37 → 2.1.0

package/build/ftds-card.styles.js

@@ -1,233 +0,0 @@
-import { css } from "lit";
-import { card, link, } from "@fluid-topics/design-system-variables";
-import { FtdsTypographyVariants } from "@fluid-topics/ft-typography";
-import { FtRippleCssVariables } from "@fluid-topics/ft-ripple";
-export const FtdsCardCssVariables = {
-    ...card,
-};
-export const FtdsCardTypographies = {
-    header: FtdsTypographyVariants.body1semibold,
-};
-// language=CSS
-export const designSystemStyles = css `
-    :host {
-        display: block;
-        height: stretch;
-    }
-
-    #container {
-        position: relative;
-        overflow: hidden;
-        border-radius: ${card.borderRadius};
-        display: flex;
-        align-items: stretch;
-        height: stretch;
-    }
-
-    #container.ftds-card--clickable {
-        cursor: pointer;
-    }
-
-    #container:focus-visible,
-    #container:has(a:focus-visible) {
-        outline: ${card.focusOutlineWidth} solid ${card.focusFocusRingColor};
-        outline-offset: ${card.focusOutlineOffset};
-        border-radius: ${card.borderRadius};
-    }
-
-    #container:focus {
-        outline: none;
-    }
-
-    #container:focus-visible {
-        outline: 2px solid ${card.focusFocusRingColor};
-        outline-offset: 2px;
-    }
-
-    #header a {
-        text-decoration: none;
-        color: ${link.neutralDefaultColor};
-    }
-
-    #header a:focus {
-        outline: none;
-    }
-
-    #header a:before {
-        content: "";
-        position: absolute;
-        inset: 0;
-    }
-
-    #main {
-        min-width: 0;
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-    }
-
-    #header {
-        display: flex;
-        justify-content: space-between;
-
-        #header-title {
-            min-width: 0;
-            padding: ${card.headerTitleVerticalPadding} ${card.headerTitleHorizontalPadding};
-        }
-
-        ftds-typography, a {
-            display: -webkit-box;
-            overflow: hidden;
-            -webkit-box-orient: vertical;
-            text-overflow: ellipsis;
-            word-break: break-word;
-            -webkit-line-clamp: 2;
-        }
-
-        #header-actions {
-            padding: ${card.headerActionVerticalPadding} ${card.headerActionHorizontalPadding} ${card.headerActionVerticalPadding} 0;
-
-            slot[name="header-actions"] {
-                display: flex;
-                gap: ${card.headerActionGap};
-            }
-        }
-    }
-
-    .ftds-card--header-border #header {
-        border-bottom: ${card.internalBorderWidth} solid ${card.internalBorderColor};
-    }
-
-    .ftds-card--no-header #header {
-        display: none;
-    }
-
-    .ftds-card--no-header-actions #header-actions {
-        display: none;
-    }
-
-    #body {
-        padding: 0 ${card.bodyHorizontalPadding} ${card.bodyVerticalPadding} ${card.bodyHorizontalPadding};
-        flex-grow: 1;
-    }
-
-    .ftds-card--header-border #body, .ftds-card--no-header #body {
-        padding: ${card.bodyVerticalPadding} ${card.bodyHorizontalPadding};
-    }
-
-    .ftds-card--no-body #body {
-        display: none;
-    }
-
-    #footer {
-        border-top: ${card.internalBorderWidth} solid ${card.internalBorderColor};
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        #footer-text {
-            padding: ${card.footerContentVerticalPadding} ${card.footerContentHorizontalPadding};
-
-            slot[name="footer"] {
-                display: flex;
-                align-items: center;
-            }
-        }
-
-        #footer-actions {
-            padding: ${card.footerActionVerticalPadding} ${card.footerActionHorizontalPadding} ${card.footerActionVerticalPadding} 0;
-
-            slot[name="footer-actions"] {
-                display: flex;
-                gap: ${card.footerActionGap};
-
-            }
-        }
-    }
-
-    .ftds-card--no-footer #footer {
-        display: none;
-    }
-
-    .ftds-card--no-body.ftds-card--no-header #footer {
-        border-top: none;
-    }
-
-    .ftds-card--no-footer-actions #footer-actions {
-        display: none;
-    }
-
-    #side-bar {
-        padding: ${card.sideBarVerticalPadding} ${card.sideBarHorizontalPadding};
-        border-left: ${card.internalBorderWidth} solid ${card.internalBorderColor};
-
-        slot[name="side-bar"] {
-            display: flex;
-            flex-direction: column;
-            gap: ${card.sideBarGap};
-        }
-    }
-
-    .ftds-card--no-side-bar #side-bar {
-        display: none;
-    }
-
-
-    /* SPECIFICATIONS FOR INTERACTIVE CARDS */
-    /* selectable selected */
-    #container.ftds-card--selected {
-        background-color: ${card.selectableSelectedBackgroundColor};
-        border: ${card.selectableSelectedBorderWidth} solid ${card.selectableSelectedBorderColor};
-
-        .ftds-card--header-border #header {
-            border-bottom: ${card.selectableSelectedBorderWidth} solid ${card.selectableSelectedBorderColor};;
-        }
-
-        ft-ripple {
-            ${FtRippleCssVariables.color.set(card.selectableSelectedStateLayerColor)};
-            ${FtRippleCssVariables.opacityContentOnSurfaceSelected.set(card.selectableSelectedDefaultStateLayerOpacity)};
-            ${FtRippleCssVariables.opacityContentOnSurfaceFocused.set(card.selectableSelectedFocusStateLayerOpacity)};
-            ${FtRippleCssVariables.opacityContentOnSurfaceHover.set(card.selectableSelectedHoverStateLayerOpacity)};
-        }
-    }
-
-    /* selectable unselected */
-    #container.ftds-card--selectable:not(.ftds-card--selected) {
-        background-color: ${card.selectableUnselectedDefaultBackgroundColor};
-        border: ${card.selectableUnselectedBorderWidth} solid ${card.selectableUnselectedDefaultBorderColor};
-
-        ft-ripple {
-            ${FtRippleCssVariables.color.set(card.selectableUnselectedStateLayerColor)};
-            ${FtRippleCssVariables.opacityContentOnSurfaceFocused.set(card.selectableUnselectedFocusStateLayerOpacity)};
-            ${FtRippleCssVariables.opacityContentOnSurfaceHover.set(card.selectableUnselectedHoverStateLayerOpacity)};
-        }
-    }
-
-    #container.ftds-card--selectable:not(.ftds-card--selected):hover {
-        border: ${card.selectableUnselectedBorderWidth} solid ${card.selectableUnselectedHoverBorderColor};
-    }
-
-    #container.ftds-card--selectable:not(.ftds-card--selected):focus {
-        border: ${card.selectableUnselectedBorderWidth} solid ${card.selectableUnselectedFocusBorderColor};
-    }
-
-    /* not selectable */
-    #container:not(.ftds-card--selectable) {
-        background-color: ${card.nonSelectableDefaultBackgroundColor};
-        border: ${card.nonSelectableBorderWidth} solid ${card.nonSelectableDefaultBorderColor};
-
-        ft-ripple {
-            ${FtRippleCssVariables.color.set(card.nonSelectableStateLayerColor)};
-            ${FtRippleCssVariables.opacityContentOnSurfaceFocused.set(card.nonSelectableFocusStateLayerOpacity)};
-            ${FtRippleCssVariables.opacityContentOnSurfaceHover.set(card.nonSelectableHoverStateLayerOpacity)};
-        }
-    }
-
-    #container.ftds-card--clickable:not(.ftds-card--selectable):hover {
-        border: ${card.nonSelectableBorderWidth} solid ${card.nonSelectableHoverBorderColor};
-    }
-
-    #container.ftds-card--clickable:not(.ftds-card--selectable):focus {
-        border: ${card.nonSelectableBorderWidth} solid ${card.nonSelectableFocusBorderColor};
-    }
-`;