@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
60 lines (50 loc) • 1.35 kB
CSS
.gform-admin {
/* ----------------------------------------------------------------------
* METRIC CARD
* ---------------------------------------------------------------------- */
.gform-card--metric {
align-items: center;
background: var(--gform-admin-color-white);
border: 1px solid var(--gform-admin-color-snuff);
border-radius: 3px;
display: flex;
flex-direction: row;
inline-size: 100%;
padding: var(--gform-admin-spacer-6);
&,
* {
box-sizing: border-box;
}
/* Style variant: Minimal */
&.gform-card--metric-minimal {
padding: 0;
[class*="gform-icon-preset--metric"] {
align-self: stretch;
block-size: auto;
border-bottom: none;
border-color: var(--gform-admin-color-snuff);
border-end-end-radius: 0;
border-left: none;
border-start-end-radius: 0;
border-top: none;
box-shadow: none;
inline-size: 64px;
padding-inline: var(--gform-admin-spacer-2);
}
.gform-icon-preset--metric-info {
background-color: var(--gform-admin-color-titan-white);
}
.gform-card__metric-content {
padding-block: var(--gform-admin-spacer-6);
padding-inline: 0 var(--gform-admin-spacer-6);
}
}
.gform-card__metric-title {
color: var(--gform-admin-color-comet);
}
.gform-card__metric-count {
bottom: -0.25rem;
position: relative;
}
}
}