mdc-react/dist/card/index.css

Material Components for the web implemented in React

.mdc-elevation-overlay{background-color:#fff;background-color:var(--mdc-elevation-overlay-color,#fff);border-radius:inherit;opacity:0;opacity:var(--mdc-elevation-overlay-opacity,0);pointer-events:none;position:absolute;transition:opacity .28s cubic-bezier(.4,0,.2,1)}.mdc-card{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-sizing:border-box;display:flex;flex-direction:column;position:relative}.mdc-card .mdc-elevation-overlay,.mdc-card:after{height:100%;left:0;top:0;width:100%}.mdc-card:after{border:1px solid transparent;border-radius:4px;border-radius:var(--mdc-shape-medium,4px);border-radius:inherit;box-sizing:border-box;content:"";pointer-events:none;position:absolute}@media screen and (forced-colors:active){.mdc-card:after{border-color:CanvasText}}.mdc-card--outlined{border:1px solid #e0e0e0;box-shadow:0 0 0 0 rgba(0,0,0,.2),0 0 0 0 rgba(0,0,0,.14),0 0 0 0 rgba(0,0,0,.12)}.mdc-card--outlined:after{border:none}.mdc-card__content{border-radius:inherit;height:100%}.mdc-card__media{background-position:50%;background-repeat:no-repeat;background-size:cover;box-sizing:border-box;position:relative}.mdc-card__media:before{content:"";display:block}.mdc-card__media:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.mdc-card__media:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.mdc-card__media--square:before{margin-top:100%}.mdc-card__media--16-9:before{margin-top:56.25%}.mdc-card__media-content{bottom:0;box-sizing:border-box;left:0;position:absolute;right:0;top:0}.mdc-card__primary-action{box-sizing:border-box;color:inherit;cursor:pointer;display:flex;flex-direction:column;outline:none;overflow:hidden;position:relative;text-decoration:none}.mdc-card__primary-action:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.mdc-card__primary-action:last-child{border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}.mdc-card__actions{align-items:center;box-sizing:border-box;display:flex;flex-direction:row;min-height:52px;padding:8px}.mdc-card__actions--full-bleed{padding:0}.mdc-card__action-buttons,.mdc-card__action-icons{align-items:center;box-sizing:border-box;display:flex;flex-direction:row}.mdc-card__action-icons{color:rgba(0,0,0,.6);flex-grow:1;justify-content:flex-end}.mdc-card__action-buttons+.mdc-card__action-icons{margin-left:16px;margin-right:0}.mdc-card__action-buttons+.mdc-card__action-icons[dir=rtl],[dir=rtl] .mdc-card__action-buttons+.mdc-card__action-icons{margin-left:0;margin-right:16px}.mdc-card__action{align-items:center;box-sizing:border-box;cursor:pointer;display:inline-flex;flex-direction:row;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mdc-card__action:focus{outline:none}.mdc-card__action--button{margin-left:0;margin-right:8px;padding:0 8px}.mdc-card__action--button[dir=rtl],[dir=rtl] .mdc-card__action--button{margin-left:8px;margin-right:0}.mdc-card__action--button:last-child,.mdc-card__action--button:last-child[dir=rtl],[dir=rtl] .mdc-card__action--button:last-child{margin-left:0;margin-right:0}.mdc-card__actions--full-bleed .mdc-card__action--button{height:auto;justify-content:space-between;margin:0;max-height:none;padding:8px 16px;text-align:left;width:100%}.mdc-card__actions--full-bleed .mdc-card__action--button[dir=rtl],[dir=rtl] .mdc-card__actions--full-bleed .mdc-card__action--button{text-align:right}.mdc-card__action--icon{margin:-6px 0;padding:12px}.mdc-card__action--icon:not(:disabled){color:rgba(0,0,0,.6)}@-webkit-keyframes mdc-ripple-fg-radius-in{0%{-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{0%{-webkit-animation-timing-function:cubic-bezier(.4,0,.2,1);animation-timing-function:cubic-bezier(.4,0,.2,1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity,0)}}@keyframes mdc-ripple-fg-opacity-in{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity,0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity,0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{0%{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity,0)}to{opacity:0}}.mdc-card__primary-action{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-card__primary-action .mdc-card__ripple:after,.mdc-card__primary-action .mdc-card__ripple:before{border-radius:50%;content:"";opacity:0;pointer-events:none;position:absolute}.mdc-card__primary-action .mdc-card__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-card__primary-action .mdc-card__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-card__primary-action.mdc-ripple-upgraded .mdc-card__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-card__primary-action.mdc-ripple-upgraded .mdc-card__ripple:after{left:0;top:0;transform:scale(0);transform-origin:center center}.mdc-card__primary-action.mdc-ripple-upgraded--unbounded .mdc-card__ripple:after{left:var(--mdc-ripple-left,0);top:var(--mdc-ripple-top,0)}.mdc-card__primary-action.mdc-ripple-upgraded--foreground-activation .mdc-card__ripple:after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-card__primary-action.mdc-ripple-upgraded--foreground-deactivation .mdc-card__ripple:after{-webkit-animation:mdc-ripple-fg-opacity-out .15s;animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-card__primary-action .mdc-card__ripple:after,.mdc-card__primary-action .mdc-card__ripple:before{height:200%;left:-50%;top:-50%;width:200%}.mdc-card__primary-action.mdc-ripple-upgraded .mdc-card__ripple:after{height:var(--mdc-ripple-fg-size,100%);width:var(--mdc-ripple-fg-size,100%)}.mdc-card__primary-action .mdc-card__ripple:after,.mdc-card__primary-action .mdc-card__ripple:before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-card__primary-action.mdc-ripple-surface--hover .mdc-card__ripple:before,.mdc-card__primary-action:hover .mdc-card__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-card__primary-action.mdc-ripple-upgraded--background-focused .mdc-card__ripple:before,.mdc-card__primary-action:not(.mdc-ripple-upgraded):focus .mdc-card__ripple:before{opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12);transition-duration:75ms}.mdc-card__primary-action:not(.mdc-ripple-upgraded) .mdc-card__ripple:after{transition:opacity .15s linear}.mdc-card__primary-action:not(.mdc-ripple-upgraded):active .mdc-card__ripple:after{opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12);transition-duration:75ms}.mdc-card__primary-action.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-card__primary-action .mdc-card__ripple{box-sizing:content-box;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%}.mdc-card__primary-action.mdc-ripple-upgraded--background-focused:after,.mdc-card__primary-action:not(.mdc-ripple-upgraded):focus:after{border:5px double transparent;border-radius:inherit;box-sizing:border-box;content:"";height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}@media screen and (forced-colors:active){.mdc-card__primary-action.mdc-ripple-upgraded--background-focused:after,.mdc-card__primary-action:not(.mdc-ripple-upgraded):focus:after{border-color:CanvasText}}.mdc-card .mdc-card__header{align-items:center;border-radius:2px 2px 0 0;display:flex;padding:8px 16px}.mdc-card .mdc-card__header .mdc-card__header__graphic{color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));flex-shrink:0;margin-right:16px}.mdc-card .mdc-card__header .mdc-card__header__content{flex:1;overflow:hidden}.mdc-card .mdc-card__header .mdc-card__header__actions{display:inline-flex;margin-left:auto}.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button{height:32px;padding:4px;width:32px}.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button .mdc-icon-button__focus-ring,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button .mdc-icon-button__focus-ring{display:none}.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring{display:block;max-height:32px;max-width:32px}@media screen and (forced-colors:active){.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring{border:2px solid transparent;border-radius:6px;box-sizing:content-box;height:100%;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}}@media screen and (forced-colors:active)and (forced-colors:active){.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring{border-color:CanvasText}}@media screen and (forced-colors:active){.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring:after,.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring:after,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring:after,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring:after{border:2px solid transparent;border-radius:8px;content:"";display:block;height:calc(100% + 4px);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% + 4px)}}@media screen and (forced-colors:active)and (forced-colors:active){.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring:after,.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring:after,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring:after,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring:after{border-color:CanvasText}}.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button.mdc-icon-button--reduced-size .mdc-icon-button__ripple,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button.mdc-icon-button--reduced-size .mdc-icon-button__ripple{height:32px;margin:0;width:32px}.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button.mdc-icon-button--reduced-size.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button.mdc-icon-button--reduced-size:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button.mdc-icon-button--reduced-size.mdc-ripple-upgraded--background-focused .mdc-icon-button__focus-ring,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button.mdc-icon-button--reduced-size:not(.mdc-ripple-upgraded):focus .mdc-icon-button__focus-ring{max-height:32px;max-width:32px}.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button .mdc-icon-button__touch,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button .mdc-icon-button__touch{height:32px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:32px}.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(:disabled),.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(:disabled){color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54))}.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(:disabled) .mdc-icon-button__ripple:after,.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(:disabled) .mdc-icon-button__ripple:before,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(:disabled) .mdc-icon-button__ripple:after,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(:disabled) .mdc-icon-button__ripple:before{background-color:rgba(0,0,0,.54);background-color:var(--mdc-ripple-color,var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54)))}.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(:disabled).mdc-ripple-surface--hover .mdc-icon-button__ripple:before,.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(:disabled):hover .mdc-icon-button__ripple:before,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(:disabled).mdc-ripple-surface--hover .mdc-icon-button__ripple:before,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(:disabled):hover .mdc-icon-button__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(:disabled).mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple:before,.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(:disabled):not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple:before,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(:disabled).mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple:before,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(:disabled):not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple:before{opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12);transition-duration:75ms}.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(:disabled):not(.mdc-ripple-upgraded) .mdc-icon-button__ripple:after,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(:disabled):not(.mdc-ripple-upgraded) .mdc-icon-button__ripple:after{transition:opacity .15s linear}.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(:disabled):not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple:after,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(:disabled):not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple:after{opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12);transition-duration:75ms}.mdc-card .mdc-card__header .mdc-card__header__actions .mdc-icon-button:not(:disabled).mdc-ripple-upgraded,.mdc-card .mdc-card__header .mdc-card__header__graphic .mdc-icon-button:not(:disabled).mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-card .mdc-card__title{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,.87);color:var(--mdc-theme-text-primary-on-light,rgba(0,0,0,.87));font-family:Roboto,sans-serif;font-family:var(--mdc-typography-headline6-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:1.25rem;font-size:var(--mdc-typography-headline6-font-size,1.25rem);font-weight:500;font-weight:var(--mdc-typography-headline6-font-weight,500);letter-spacing:.0125em;letter-spacing:var(--mdc-typography-headline6-letter-spacing,.0125em);line-height:2rem;line-height:var(--mdc-typography-headline6-line-height,2rem);margin:0;overflow:hidden;text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-decoration:var(--mdc-typography-headline6-text-decoration,inherit);text-overflow:ellipsis;text-transform:inherit;text-transform:var(--mdc-typography-headline6-text-transform,inherit);white-space:nowrap}.mdc-card .mdc-card__title+.mdc-card__subtitle{line-height:1.5rem}.mdc-card .mdc-card__subtitle{font-family:Roboto,sans-serif;font-family:var(--mdc-typography-body2-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.875rem;font-size:var(--mdc-typography-body2-font-size,.875rem);font-weight:400;font-weight:var(--mdc-typography-body2-font-weight,400);letter-spacing:.0178571429em;letter-spacing:var(--mdc-typography-body2-letter-spacing,.0178571429em);line-height:1.25rem;line-height:var(--mdc-typography-body2-line-height,1.25rem);text-decoration:inherit;-webkit-text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-decoration:var(--mdc-typography-body2-text-decoration,inherit);text-transform:inherit;text-transform:var(--mdc-typography-body2-text-transform,inherit)}.mdc-card .mdc-card__overline,.mdc-card .mdc-card__subtitle{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,.54);color:var(--mdc-theme-text-secondary-on-light,rgba(0,0,0,.54));margin:0}.mdc-card .mdc-card__overline{display:block;font-family:Roboto,sans-serif;font-family:var(--mdc-typography-overline-font-family,var(--mdc-typography-font-family,Roboto,sans-serif));font-size:.75rem;font-size:var(--mdc-typography-overline-font-size,.75rem);font-weight:500;font-weight:var(--mdc-typography-overline-font-weight,500);letter-spacing:.1666666667em;letter-spacing:var(--mdc-typography-overline-letter-spacing,.1666666667em);line-height:2rem;line-height:var(--mdc-typography-overline-line-height,2rem);line-height:normal;text-decoration:none;-webkit-text-decoration:var(--mdc-typography-overline-text-decoration,none);text-decoration:var(--mdc-typography-overline-text-decoration,none);text-transform:uppercase;text-transform:var(--mdc-typography-overline-text-transform,uppercase)}.mdc-card .mdc-card__section{box-sizing:border-box}.mdc-card .mdc-card__section.mdc-card__section--primary{padding:8px 16px}.mdc-card .mdc-card__section.mdc-card__section--secondary{padding:0 16px 8px}