.am-card { min-height: 96px; padding-bottom: 6px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-color: #fff; } .am-card:not(.am-card-full) { border: 1PX solid #ddd; border-radius: 5px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-card:not(.am-card-full) { position: relative; border: none; } html:not([data-scale]) .am-card:not(.am-card-full)::before { content: ''; position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 1PX solid #ddd; border-radius: 10px; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); -webkit-box-sizing: border-box; box-sizing: border-box; pointer-events: none; } } .am-card.am-card-full { position: relative; border-top: 1PX solid #ddd; border-bottom: 1PX solid #ddd; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-card.am-card-full { border-top: none; } html:not([data-scale]) .am-card.am-card-full::before { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-card.am-card-full::before { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transform: scaleY(0.33); } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-card.am-card-full { border-bottom: none; } html:not([data-scale]) .am-card.am-card-full::after { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-card.am-card-full::after { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transform: scaleY(0.33); } } .am-card-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 17px; padding: 9px 15px; } .am-card-header-content { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: left; color: #000; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .am-card-header-content img { margin-right: 5px; } .am-card-header-extra { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: right; font-size: 17px; color: #888; } .am-card-body { position: relative; border-top: 1PX solid #ddd; padding: 15px 15px 6px; font-size: 15px; color: #333; min-height: 40px; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-card-body { border-top: none; } html:not([data-scale]) .am-card-body::before { content: ''; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 1PX; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: scaleY(0.5); -ms-transform: scaleY(0.5); transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-card-body::before { -webkit-transform: scaleY(0.33); -ms-transform: scaleY(0.33); transform: scaleY(0.33); } } .am-card-footer { font-size: 14px; color: #888; padding: 0 15px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .am-card-footer-content { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .am-card-footer-extra { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; text-align: right; }