UNPKG

vuestic-ui

Version:
70 lines 2.05 kB
:root, :host { --va-card-display: block; --va-card-position: relative; --va-card-overflow: visible; --va-card-box-shadow: var(--va-box-shadow); --va-card-border-radius: 0.375rem; --va-card-color: #34495e; --va-card-background-color: var(--va-background-secondary); --va-card-padding: 1.25rem; /* Outlined */ --va-card-outlined-border: 3px solid var(--va-background-border); --va-card-outlined-box-shadow: none; /* Stripe */ --va-card-stripe-border-size: var(--va-stripe-border-size); /* Dark */ --va-card-dark-color: #ffffff; --va-card-dark-background-color: #34495e; /* Actions */ --va-card-actions-btn-margin: 4px; } .va-card { display: var(--va-card-display); position: var(--va-card-position); overflow: var(--va-card-overflow); box-shadow: var(--va-card-box-shadow, var(--va-block-box-shadow)); border-radius: var(--va-card-border-radius, var(--va-block-border-radius)); color: var(--va-card-color); background-color: var(--va-card-background-color); font-family: var(--va-font-family); } .va-card > div:first-child { border-top-right-radius: var(--va-card-border-radius); border-top-left-radius: var(--va-card-border-radius); } .va-card > div:last-child { border-bottom-right-radius: var(--va-card-border-radius); border-bottom-left-radius: var(--va-card-border-radius); } .va-card--square { border-radius: 0; } .va-card--outlined { box-shadow: var(--va-card-outlined-box-shadow); border: var(--va-card-outlined-border, var(--va-block-border)); } .va-card--no-border { border: none; } .va-card--disabled { cursor: default; opacity: 0.4; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .va-card--link { cursor: pointer; } .va-card--stripe::after { content: ""; position: absolute; width: 100%; height: var(--va-card-stripe-border-size); top: 0; left: 0; background: var(--va-stripe-color-computed); border-top-right-radius: var(--va-card-border-radius); border-top-left-radius: var(--va-card-border-radius); }