@spectrum-web-components/card 1.0.0 → 1.0.1

package/src/spectrum-card.css.ts

@@ -1,20 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { css } from '@spectrum-web-components/base';
-const styles = css`
-:host{position:relative;display:inline-flex;flex-direction:column;box-sizing:border-box;min-width:var(--spectrum-card-min-width,var(--spectrum-global-dimension-size-3000));border-color:transparent;border-radius:var(--spectrum-card-border-radius,var(--spectrum-alias-border-radius-regular));text-decoration:none;border:var(--spectrum-card-border-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-card-border-color,var(--spectrum-global-color-gray-200));background-color:var(--spectrum-card-background-color,var(--spectrum-global-color-gray-50))}:host(:focus){outline:none}:host(:focus) .actions,:host(:focus) .quickActions,:host(:hover) .actions,:host(:hover) .quickActions,:host([focused]) .actions,:host([focused]) .quickActions,:host([selected]) .actions,:host([selected]) .quickActions{visibility:visible;opacity:1;pointer-events:all}:host([dir=ltr]) .actions{right:var(--spectrum-card-actions-margin,var(--spectrum-global-dimension-size-125))}:host([dir=rtl]) .actions{left:var(--spectrum-card-actions-margin,var(--spectrum-global-dimension-size-125))}.actions{position:absolute;top:var(--spectrum-card-actions-margin,var(--spectrum-global-dimension-size-125));height:var(--spectrum-quickactions-height,var(--spectrum-global-dimension-size-500));visibility:hidden}:host([dir=ltr]) .quickActions{left:var(--spectrum-card-checkbox-margin,var(--spectrum-global-dimension-size-200))}:host([dir=rtl]) .quickActions{right:var(--spectrum-card-checkbox-margin,var(--spectrum-global-dimension-size-200))}.quickActions{position:absolute;top:var(--spectrum-card-checkbox-margin,var(--spectrum-global-dimension-size-200));width:var(--spectrum-quickactions-height,var(--spectrum-global-dimension-size-500));height:var(--spectrum-quickactions-height,var(--spectrum-global-dimension-size-500));visibility:hidden}:host([dir=ltr]) .quickActions .checkbox,:host([dir=rtl]) .quickActions .checkbox{margin:0}#cover-photo{height:var(--spectrum-card-coverphoto-height,var(--spectrum-global-dimension-size-1700));box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-bottom-color:transparent;border-top-left-radius:calc(var(--spectrum-card-border-radius,
-var(--spectrum-alias-border-radius-regular)) - 1px);border-top-right-radius:calc(var(--spectrum-card-border-radius,
-var(--spectrum-alias-border-radius-regular)) - 1px);border-bottom-right-radius:0;border-bottom-left-radius:0;background-size:cover;background-position:50%;background-color:var(--spectrum-card-coverphoto-background-color,var(--spectrum-global-color-gray-200));border-bottom:var(--spectrum-card-coverphoto-border-bottom-size,var(--spectrum-alias-border-size-thin)) solid var(--spectrum-card-coverphoto-border-color,var(--spectrum-global-color-gray-200))}:host([dir=ltr]) .body{padding-right:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300));padding-left:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}:host([dir=rtl]) .body{padding-left:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300));padding-right:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}.body{padding-top:var(--spectrum-card-body-padding-top,var(--spectrum-global-dimension-size-250));padding-bottom:var(--spectrum-card-body-padding-bottom,var(--spectrum-global-dimension-size-250))}.body:last-child{border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:var(--spectrum-card-border-radius,var(--spectrum-alias-border-radius-regular));border-bottom-left-radius:var(--spectrum-card-border-radius,var(--spectrum-alias-border-radius-regular))}#preview{overflow:hidden;border-top-left-radius:calc(var(--spectrum-card-border-radius,
-var(--spectrum-alias-border-radius-regular)) - 1px);border-top-right-radius:calc(var(--spectrum-card-border-radius,
-var(--spectrum-alias-border-radius-regular)) - 1px);border-bottom-right-radius:0;border-bottom-left-radius:0}.header{height:var(--spectrum-card-body-header-height,var(--spectrum-global-dimension-size-225));display:flex;align-items:baseline}.content{display:flex;height:var(--spectrum-card-body-content-height,var(--spectrum-global-dimension-size-175));margin-top:var(--spectrum-card-body-content-margin-top,var(--spectrum-global-dimension-size-75))}:host([dir=ltr]) .title{padding-right:var(--spectrum-card-title-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .title{padding-left:var(--spectrum-card-title-padding-right,var(--spectrum-global-dimension-size-100))}.title{font-size:var(--spectrum-card-title-text-size,var(--spectrum-global-dimension-font-size-100));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--spectrum-alias-text-color,var(--spectrum-global-color-gray-800))}:host([dir=ltr]) .subtitle{padding-right:var(--spectrum-card-subtitle-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .subtitle{padding-left:var(--spectrum-card-subtitle-padding-right,var(--spectrum-global-dimension-size-100))}.subtitle{letter-spacing:var(--spectrum-card-subtitle-letter-spacing,var(--spectrum-global-font-letter-spacing-medium));text-transform:uppercase}.subtitle,::slotted([slot=description]){font-size:var(--spectrum-card-subtitle-text-size,var(--spectrum-global-dimension-font-size-50))}:host([dir=ltr]) .subtitle+::slotted([slot=description]):before{padding-right:var(--spectrum-card-subtitle-padding-right,var(--spectrum-global-dimension-size-100))}:host([dir=rtl]) .subtitle+::slotted([slot=description]):before{padding-left:var(--spectrum-card-subtitle-padding-right,var(--spectrum-global-dimension-size-100))}.subtitle+::slotted([slot=description]):before{content:"•"}:host([dir=ltr]) ::slotted([slot=footer]){margin-right:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300));margin-left:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}:host([dir=rtl]) ::slotted([slot=footer]){margin-left:var(--spectrum-card-body-padding-right,var(--spectrum-global-dimension-size-300));margin-right:var(--spectrum-card-body-padding-left,var(--spectrum-global-dimension-size-300))}::slotted([slot=footer]){padding-top:var(--spectrum-card-footer-padding-top,var(--spectrum-global-dimension-size-175));padding-bottom:var(--spectrum-card-body-padding-bottom,var(--spectrum-global-dimension-size-250));border-top:var(--spectrum-card-footer-border-top-size,var(--spectrum-global-dimension-size-10)) solid;border-color:var(--spectrum-card-border-color,var(--spectrum-global-color-gray-200))}.actionButton{flex:1;align-self:center;display:flex;justify-content:flex-end}:host([variant=quiet]) #preview{min-height:var(--spectrum-card-quiet-min-size,var(--spectrum-global-dimension-size-1700))}:host([variant=gallery]),:host([variant=quiet]){width:100%;height:100%;min-width:var(--spectrum-card-quiet-min-size,var(--spectrum-global-dimension-size-1700));border-width:0;border-radius:0;overflow:visible}:host([variant=gallery]) #preview,:host([variant=quiet]) #preview{width:100%;flex:1;padding:var(--spectrum-card-quiet-preview-padding,var(--spectrum-global-dimension-size-250));margin:0 auto;box-sizing:border-box;border-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));position:relative;transition:background-color var(--spectrum-global-animation-duration-100,.13s);overflow:visible}:host([dir=ltr][variant=gallery]) #preview:before,:host([dir=ltr][variant=quiet]) #preview:before{left:0}:host([dir=rtl][variant=gallery]) #preview:before,:host([dir=rtl][variant=quiet]) #preview:before{right:0}:host([variant=gallery]) #preview:before,:host([variant=quiet]) #preview:before{content:"";position:absolute;top:0;width:100%;height:100%;box-sizing:border-box;border-radius:inherit;border:var(--spectrum-card-quiet-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host([variant=gallery][drop-target]) #preview,:host([variant=quiet][drop-target]) #preview{transition:none}:host([variant=gallery]) .header,:host([variant=quiet]) .header{height:var(--spectrum-card-quiet-body-header-height,var(--spectrum-global-dimension-size-225));margin-top:var(--spectrum-card-quiet-body-header-margin-top,var(--spectrum-global-dimension-size-175))}:host([variant=gallery]) .body,:host([variant=quiet]) .body{padding:0}:host([small]){min-width:var(--spectrum-card-quiet-small-min-size,var(--spectrum-global-dimension-size-900))}:host([dir=ltr][small]) .quickActions{left:var(--spectrum-card-quiet-small-checkbox-margin,var(--spectrum-global-dimension-size-125))}:host([dir=rtl][small]) .quickActions{right:var(--spectrum-card-quiet-small-checkbox-margin,var(--spectrum-global-dimension-size-125))}:host([small]) .quickActions{top:var(--spectrum-card-quiet-small-checkbox-margin,var(--spectrum-global-dimension-size-125))}:host([small]) #preview{padding:var(--spectrum-card-quiet-small-preview-padding,var(--spectrum-global-dimension-size-150));min-height:var(--spectrum-card-quiet-small-min-size,var(--spectrum-global-dimension-size-900))}:host([small]) .header{margin-top:var(--spectrum-card-quiet-small-body-margin-top,var(--spectrum-global-dimension-size-100));height:var(--spectrum-card-quiet-small-body-header-height,var(--spectrum-global-dimension-size-150))}:host([small]) .title{font-size:var(--spectrum-card-quiet-small-title-text-size,var(--spectrum-global-dimension-font-size-100))}:host([horizontal]){flex-direction:row}:host([dir=ltr][horizontal]) #preview{border-top-left-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));border-top-right-radius:0;border-bottom-left-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));border-bottom-right-radius:0;border-right:var(--spectrum-card-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host([dir=rtl][horizontal]) #preview{border-top-right-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));border-top-left-radius:0;border-bottom-right-radius:var(--spectrum-card-quiet-border-radius,var(--spectrum-alias-border-radius-regular));border-bottom-left-radius:0;border-left:var(--spectrum-card-border-size,var(--spectrum-alias-border-size-thin)) solid transparent}:host([horizontal]) #preview{flex-shrink:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:var(--spectrum-global-dimension-size-175);background-color:var(--spectrum-card-quiet-preview-background-color,var(--spectrum-global-color-gray-200));border-color:var(--spectrum-card-border-color,var(--spectrum-global-color-gray-200))}:host([horizontal]) .content,:host([horizontal]) .header{margin-top:0;height:auto}:host([dir=ltr][horizontal]) .title{padding-right:0}:host([dir=rtl][horizontal]) .title{padding-left:0}:host([horizontal]) .body{flex-shrink:0;display:flex;justify-content:center;flex-direction:column;padding-top:0;padding-bottom:0;padding-left:var(--spectrum-global-dimension-size-200);padding-right:var(--spectrum-global-dimension-size-200)}:host([variant=gallery]){min-width:0}:host([variant=gallery]) #preview{padding:0;border-radius:0}:host(:hover){border-color:var(--spectrum-card-border-color-hover,var(--spectrum-global-color-gray-400))}:host(.focus-visible),:host([drop-target]),:host([selected]){border-color:var(--spectrum-card-border-color-key-focus,var(--spectrum-alias-border-color-focus));box-shadow:0 0 0 1px var(--spectrum-card-border-color-key-focus,var(--spectrum-alias-border-color-focus))}:host([drop-target]){background-color:var(--spectrum-alias-highlight-selected)}.subtitle,::slotted([slot=description]){color:var(--spectrum-card-description-text-color,var(--spectrum-global-color-gray-700))}:host([variant=gallery]),:host([variant=quiet]){border-color:transparent;background-color:initial}:host([variant=gallery]) #preview,:host([variant=quiet]) #preview{background-color:var(--spectrum-card-quiet-preview-background-color,var(--spectrum-global-color-gray-200))}:host([variant=gallery]:hover),:host([variant=quiet]:hover){border-color:transparent}:host([variant=gallery]:hover) #preview,:host([variant=quiet]:hover) #preview{background-color:var(--spectrum-card-quiet-preview-background-color-hover,var(--spectrum-global-color-gray-300))}:host([variant=gallery].focus-visible),:host([variant=gallery][selected]),:host([variant=quiet].focus-visible),:host([variant=quiet][selected]){border-color:transparent;box-shadow:none}:host([variant=gallery].focus-visible) #preview,:host([variant=gallery][selected]) #preview,:host([variant=quiet].focus-visible) #preview,:host([variant=quiet][selected]) #preview{background-color:var(--spectrum-card-quiet-preview-background-color,var(--spectrum-global-color-gray-200))}:host([variant=gallery].focus-visible) #preview:before,:host([variant=gallery][selected]) #preview:before,:host([variant=quiet].focus-visible) #preview:before,:host([variant=quiet][selected]) #preview:before{border-color:var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500));box-shadow:0 0 0 1px var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500))}:host([variant=gallery][drop-target]),:host([variant=quiet][drop-target]){border-color:transparent;background-color:initial;box-shadow:none}:host([variant=gallery][drop-target]) #preview,:host([variant=quiet][drop-target]) #preview{background-color:var(--spectrum-alias-highlight-selected)}:host([variant=gallery][drop-target]) #preview:before,:host([variant=quiet][drop-target]) #preview:before{border-color:var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500));box-shadow:0 0 0 1px var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500))}:host([variant=gallery][drop-target]) .spectrum-Asset-fileBackground,:host([variant=gallery][drop-target]) .spectrum-Asset-folderBackground,:host([variant=quiet][drop-target]) .spectrum-Asset-fileBackground,:host([variant=quiet][drop-target]) .spectrum-Asset-folderBackground{fill:var(--spectrum-alias-highlight-selected)}:host([variant=gallery][drop-target]) .spectrum-Asset-fileOutline,:host([variant=gallery][drop-target]) .spectrum-Asset-folderOutline,:host([variant=quiet][drop-target]) .spectrum-Asset-fileOutline,:host([variant=quiet][drop-target]) .spectrum-Asset-folderOutline{fill:var(--spectrum-card-quiet-border-color-selected,var(--spectrum-global-color-blue-500))}:host([variant=gallery]) .title,:host([variant=quiet]) .title{color:var(--spectrum-card-quiet-title-text-color,var(--spectrum-global-color-gray-800))}:host([variant=gallery]) .subtitle,:host([variant=quiet]) .subtitle{color:var(--spectrum-card-quiet-subtitle-text-color,var(--spectrum-global-color-gray-700))}:host([horizontal]:hover) #preview{border-color:var(--spectrum-card-border-color-hover,var(--spectrum-global-color-gray-400))}
-`;
-export default styles;

package/src/spectrum-vars.json

@@ -1,52 +0,0 @@
-{
-  "custom-properties": {
-    "--spectrum-card-min-width": "var(--spectrum-global-dimension-size-3000)",
-    "--spectrum-card-border-size": "var(--spectrum-alias-border-size-thin)",
-    "--spectrum-card-border-radius": "var(--spectrum-alias-border-radius-regular)",
-    "--spectrum-card-actions-margin": "var(--spectrum-global-dimension-size-125)",
-    "--spectrum-quickactions-height": "var(--spectrum-global-dimension-size-500)",
-    "--spectrum-card-checkbox-margin": "var(--spectrum-global-dimension-size-200)",
-    "--spectrum-card-coverphoto-height": "var(--spectrum-global-dimension-size-1700)",
-    "--spectrum-card-coverphoto-border-bottom-size": "var(--spectrum-alias-border-size-thin)",
-    "--spectrum-card-body-padding-right": "var(--spectrum-global-dimension-size-300)",
-    "--spectrum-card-body-padding-left": "var(--spectrum-global-dimension-size-300)",
-    "--spectrum-card-body-padding-top": "var(--spectrum-global-dimension-size-250)",
-    "--spectrum-card-body-padding-bottom": "var(--spectrum-global-dimension-size-250)",
-    "--spectrum-card-body-header-height": "var(--spectrum-global-dimension-size-225)",
-    "--spectrum-card-body-content-height": "var(--spectrum-global-dimension-size-175)",
-    "--spectrum-card-body-content-margin-top": "var(--spectrum-global-dimension-size-75)",
-    "--spectrum-card-title-padding-right": "var(--spectrum-global-dimension-size-100)",
-    "--spectrum-card-title-text-size": "var(--spectrum-global-dimension-font-size-100)",
-    "--spectrum-card-subtitle-padding-right": "var(--spectrum-global-dimension-size-100)",
-    "--spectrum-card-subtitle-text-size": "var(--spectrum-global-dimension-font-size-50)",
-    "--spectrum-card-subtitle-letter-spacing": "var(--spectrum-global-font-letter-spacing-medium)",
-    "--spectrum-card-footer-padding-top": "var(--spectrum-global-dimension-size-175)",
-    "--spectrum-card-footer-border-top-size": "var(--spectrum-global-dimension-size-10)",
-    "--spectrum-card-quiet-min-size": "var(--spectrum-global-dimension-size-1700)",
-    "--spectrum-card-quiet-preview-padding": "var(--spectrum-global-dimension-size-250)",
-    "--spectrum-card-quiet-border-radius": "var(--spectrum-alias-border-radius-regular)",
-    "--spectrum-card-quiet-border-size": "var(--spectrum-alias-border-size-thin)",
-    "--spectrum-card-quiet-body-header-height": "var(--spectrum-global-dimension-size-225)",
-    "--spectrum-card-quiet-body-header-margin-top": "var(--spectrum-global-dimension-size-175)",
-    "--spectrum-card-quiet-small-min-size": "var(--spectrum-global-dimension-size-900)",
-    "--spectrum-card-quiet-small-checkbox-margin": "var(--spectrum-global-dimension-size-125)",
-    "--spectrum-card-quiet-small-preview-padding": "var(--spectrum-global-dimension-size-150)",
-    "--spectrum-card-quiet-small-body-margin-top": "var(--spectrum-global-dimension-size-100)",
-    "--spectrum-card-quiet-small-body-header-height": "var(--spectrum-global-dimension-size-150)",
-    "--spectrum-card-quiet-small-title-text-size": "var(--spectrum-global-dimension-font-size-100)",
-    "--spectrum-card-border-color": "var(--spectrum-global-color-gray-200)",
-    "--spectrum-card-background-color": "var(--spectrum-global-color-gray-50)",
-    "--spectrum-card-border-color-hover": "var(--spectrum-global-color-gray-400)",
-    "--spectrum-card-border-color-key-focus": "var(--spectrum-alias-border-color-focus)",
-    "--spectrum-alias-highlight-selected": "undefined",
-    "--spectrum-alias-text-color": "var(--spectrum-global-color-gray-800)",
-    "--spectrum-card-description-text-color": "var(--spectrum-global-color-gray-700)",
-    "--spectrum-card-coverphoto-background-color": "var(--spectrum-global-color-gray-200)",
-    "--spectrum-card-coverphoto-border-color": "var(--spectrum-global-color-gray-200)",
-    "--spectrum-card-quiet-preview-background-color": "var(--spectrum-global-color-gray-200)",
-    "--spectrum-card-quiet-preview-background-color-hover": "var(--spectrum-global-color-gray-300)",
-    "--spectrum-card-quiet-border-color-selected": "var(--spectrum-global-color-blue-500)",
-    "--spectrum-card-quiet-title-text-color": "var(--spectrum-global-color-gray-800)",
-    "--spectrum-card-quiet-subtitle-text-color": "var(--spectrum-global-color-gray-700)"
-  }
-}