UNPKG

framework7

Version:

Full featured mobile HTML framework for building iOS & Android apps

81 lines (78 loc) 3.24 kB
: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); });