framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
81 lines (78 loc) • 3.24 kB
text/less
:root {
--f7-card-margin-horizontal: 16px;
--f7-card-margin-vertical: 16px;
--f7-card-content-padding-horizontal: 16px;
--f7-card-content-padding-vertical: 16px;
--f7-card-font-size: inherit;
--f7-card-header-text-color: inherit;
--f7-card-header-font-weight: 400;
--f7-card-header-padding-horizontal: 16px;
--f7-card-footer-font-weight: 400;
--f7-card-footer-font-size: inherit;
--f7-card-footer-padding-horizontal: 16px;
--f7-card-expandable-font-size: 16px;
--f7-card-expandable-tablet-width: 670px;
--f7-card-expandable-tablet-height: 670px;
}
.ios-vars({
--f7-card-border-radius: 8px;
--f7-card-box-shadow: 0px 1px 2px rgba(0,0,0,0.2);
--f7-card-header-font-size: 17px;
--f7-card-header-padding-vertical: 10px;
--f7-card-header-min-height: 44px;
--f7-card-footer-text-color: rgba(0,0,0,0.45);
--f7-card-footer-padding-vertical: 10px;
--f7-card-footer-min-height: 44px;
--f7-card-expandable-margin-horizontal: 20px;
--f7-card-expandable-margin-vertical: 30px;
--f7-card-expandable-box-shadow: 0px 20px 40px rgba(0,0,0,0.3);
--f7-card-expandable-border-radius: 16px;
--f7-card-expandable-tablet-border-radius: 16px;
--f7-card-expandable-header-font-size: 27px;
--f7-card-expandable-header-font-weight: bold;
--f7-card-text-color: inherit;
.light-vars({
--f7-card-bg-color: #fff;
--f7-card-expandable-bg-color: #fff;
--f7-card-outline-border-color: rgba(0,0,0,0.12);
--f7-card-header-border-color: rgba(0, 0, 0, 0.1);
--f7-card-footer-border-color: rgba(0, 0, 0, 0.1);
});
.dark-vars({
--f7-card-bg-color: #1c1c1d;
--f7-card-expandable-bg-color: #1c1c1d;
--f7-card-outline-border-color: rgba(255, 255, 255, 0.15);
--f7-card-header-border-color: rgba(255, 255, 255, 0.15);
--f7-card-footer-border-color: rgba(255, 255, 255, 0.15);
--f7-card-footer-text-color: rgba(255,255,255,0.55);
});
});
.md-vars({
--f7-card-border-radius: 16px;
--f7-card-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12);;
--f7-card-header-font-size: 22px;
--f7-card-header-padding-vertical: 16px;
--f7-card-header-min-height: 48px;
--f7-card-footer-padding-vertical: 16px;
--f7-card-footer-min-height: 48px;
--f7-card-expandable-margin-horizontal: 12px;
--f7-card-expandable-margin-vertical: 24px;
--f7-card-expandable-box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
0px 10px 14px 1px rgba(0, 0, 0, 0.14),
0px 4px 18px 3px rgba(0, 0, 0, 0.12);
--f7-card-expandable-border-radius: 16px;
--f7-card-expandable-tablet-border-radius: 16px;
--f7-card-expandable-header-font-size: 22px;
--f7-card-expandable-header-font-weight: 500;
});
.md-color-vars({
--f7-card-bg-color: var(--f7-md-surface-1);
--f7-card-expandable-bg-color: var(--f7-md-surface-1);
--f7-card-outline-border-color: var(--f7-md-outline);
--f7-card-header-border-color: var(--f7-md-outline);
--f7-card-footer-border-color: var(--f7-md-outline);
--f7-card-text-color: var(--f7-md-on-surface);
--f7-card-footer-text-color: var(--f7-md-on-surface-variant);
});