framework7/lazy-components/card.rtl.css

Full featured mobile HTML framework for building iOS & Android apps

.card .list>ul:before,.cards-list>ul:before{display:none!important}.card .list>ul:after,.cards-list>ul:after{display:none!important}.card{background:#fff;position:relative;border-radius:4px;font-size:14px}.card .block,.card .list{margin:0}.row:not(.no-gap) .col>.card{margin-left:0;margin-right:0}.card-content{position:relative}.card-content-padding{position:relative}.card-content-padding>p:first-child{margin-top:0}.card-content-padding>p:last-child{margin-bottom:0}.card-footer,.card-header{min-height:44px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.card-footer[valign=top],.card-header[valign=top]{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.card-footer[valign=bottom],.card-header[valign=bottom]{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.card-footer a.link,.card-header a.link{position:relative}.card-footer a.link i.icon,.card-header a.link i.icon{display:block}.card-footer a.icon-only,.card-header a.icon-only{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:0}.card-header{border-radius:4px 4px 0 0}.card-header:after{content:'';position:absolute;background-color:#e1e1e1;display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}html.device-pixel-ratio-2 .card-header:after{-webkit-transform:scaleY(.5);transform:scaleY(.5)}html.device-pixel-ratio-3 .card-header:after{-webkit-transform:scaleY(.33);transform:scaleY(.33)}.card-header.no-hairline:after{display:none!important}.card-footer{border-radius:0 0 4px 4px}.card-footer:before{content:'';position:absolute;background-color:#e1e1e1;display:block;z-index:15;top:0;right:auto;bottom:auto;left:0;height:1px;width:100%;-webkit-transform-origin:50% 0%;transform-origin:50% 0%}html.device-pixel-ratio-2 .card-footer:before{-webkit-transform:scaleY(.5);transform:scaleY(.5)}html.device-pixel-ratio-3 .card-footer:before{-webkit-transform:scaleY(.33);transform:scaleY(.33)}.card-footer.no-hairline:before{display:none!important}.ios .card .list ul,.ios .cards-list ul{background:0 0}.ios .card{-webkit-box-shadow:0px 1px 2px rgba(0,0,0,.3);box-shadow:0px 1px 2px rgba(0,0,0,.3);margin:10px}.ios .card-outline{-webkit-box-shadow:none;box-shadow:none;border:1px solid rgba(0,0,0,.12)}.ios .card-footer a.link,.ios .card-header a.link{line-height:44px;height:44px;margin-top:-10px;margin-bottom:-10px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.ios .card-footer a.icon-only,.ios .card-header a.icon-only{min-width:44px}.ios .card-content-padding{padding:15px}.ios .card-content-padding>.block,.ios .card-content-padding>.list{margin:-15px}.ios .card-footer,.ios .card-header{min-height:44px;padding:10px 15px}.ios .card-header{font-size:17px}.ios .card-footer{color:#6d6d72}@media (orientation:landscape){.ios.device-iphone-x .ios-edges .card:not(.no-ios-edges):not(.no-ios-left-edge),.ios.device-iphone-x .ios-left-edge .card:not(.no-ios-edges):not(.no-ios-left-edge),.ios.device-iphone-x .panel-left .card:not(.no-ios-edges):not(.no-ios-left-edge),.ios.device-iphone-x .popup .card:not(.no-ios-edges):not(.no-ios-left-edge),.ios.device-iphone-x .sheet-modal .card:not(.no-ios-edges):not(.no-ios-left-edge){margin-left:calc(10px + constant(safe-area-inset-left));margin-left:calc(10px + env(safe-area-inset-left))}.ios.device-iphone-x .ios-edges .card:not(.no-ios-edges):not(.no-ios-right-edge),.ios.device-iphone-x .ios-right-edge .card:not(.no-ios-edges):not(.no-ios-right-edge),.ios.device-iphone-x .panel-right .card:not(.no-ios-edges):not(.no-ios-right-edge),.ios.device-iphone-x .popup .card:not(.no-ios-edges):not(.no-ios-right-edge),.ios.device-iphone-x .sheet-modal .card:not(.no-ios-edges):not(.no-ios-right-edge){margin-right:calc(10px + constant(safe-area-inset-right));margin-right:calc(10px + env(safe-area-inset-right))}}.ios .theme-dark .card{background-color:#1c1c1d}.ios .theme-dark .card-outline{border-color:#282829}.ios .theme-dark .card-header:after{background-color:#282829}.ios .theme-dark .card-footer{color:#8e8e93}.ios .theme-dark .card-footer:before{background-color:#282829}.md .card .list ul,.md .cards-list ul{background:0 0}.md .card{margin:8px;-webkit-box-shadow:0px 2px 1px -1px rgba(0,0,0,.2),0px 1px 1px 0px rgba(0,0,0,.14),0px 1px 3px 0px rgba(0,0,0,.12);box-shadow:0px 2px 1px -1px rgba(0,0,0,.2),0px 1px 1px 0px rgba(0,0,0,.14),0px 1px 3px 0px rgba(0,0,0,.12)}.md .card-outline{-webkit-box-shadow:none;box-shadow:none;border:1px solid rgba(0,0,0,.12)}.md .card-footer a.link,.md .card-header a.link{text-decoration:none;text-align:center;display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;padding:0 10px;margin:0;white-space:nowrap;text-overflow:ellipsis;font-size:14px;position:relative;overflow:hidden;font-family:inherit;cursor:pointer;outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:middle;color:#2196f3;border-radius:4px;line-height:36px;height:36px;text-transform:uppercase;min-width:64px;padding:0 8px;border:none;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);font-weight:500;letter-spacing:.03em}input[type=button].md .card-footer a.link,input[type=button].md .card-header a.link,input[type=submit].md .card-footer a.link,input[type=submit].md .card-header a.link{width:100%}.md .card-footer a.link.active-state,.md .card-header a.link.active-state{background:rgba(0,0,0,.1)}.md .card-footer a.icon-only,.md .card-header a.icon-only{min-width:48px}.md .page-content>.card:last-child{margin-bottom:32px}.md .card-content-padding{padding:16px}.md .card-content-padding>.block,.md .card-content-padding>.list{margin:-16px}.md .card-footer,.md .card-header{min-height:48px;padding:4px 16px}.md .card-header{font-size:16px}.md .card-footer{color:#757575}.md .theme-dark .card{background-color:rgba(255,255,255,.03)}.md .theme-dark .card-outline{border-color:#282829}.md .theme-dark .card-header:after{background-color:rgba(255,255,255,.08)}.md .theme-dark .card-footer{color:rgba(255,255,255,.54)}.md .theme-dark .card-footer:before{background-color:rgba(255,255,255,.08)}@media (orientation:landscape){.md.device-iphone-x .ios-edges .card:not(.no-ios-edges):not(.no-ios-left-edge),.md.device-iphone-x .ios-left-edge .card:not(.no-ios-edges):not(.no-ios-left-edge),.md.device-iphone-x .panel-left .card:not(.no-ios-edges):not(.no-ios-left-edge),.md.device-iphone-x .popup .card:not(.no-ios-edges):not(.no-ios-left-edge),.md.device-iphone-x .sheet-modal .card:not(.no-ios-edges):not(.no-ios-left-edge){margin-left:calc(8px + constant(safe-area-inset-left));margin-left:calc(8px + env(safe-area-inset-left))}.md.device-iphone-x .ios-edges .card:not(.no-ios-edges):not(.no-ios-right-edge),.md.device-iphone-x .ios-right-edge .card:not(.no-ios-edges):not(.no-ios-right-edge),.md.device-iphone-x .panel-right .card:not(.no-ios-edges):not(.no-ios-right-edge),.md.device-iphone-x .popup .card:not(.no-ios-edges):not(.no-ios-right-edge),.md.device-iphone-x .sheet-modal .card:not(.no-ios-edges):not(.no-ios-right-edge){margin-right:calc(8px + constant(safe-area-inset-right));margin-right:calc(8px + env(safe-area-inset-right))}}.md .card-footer.color-theme-red a.link,.md .card-header.color-theme-red a.link,.md .color-theme-red .card-footer a.link,.md .color-theme-red .card-header a.link{color:#f44336}.md .card-footer.color-theme-green a.link,.md .card-header.color-theme-green a.link,.md .color-theme-green .card-footer a.link,.md .color-theme-green .card-header a.link{color:#4caf50}.md .card-footer.color-theme-blue a.link,.md .card-header.color-theme-blue a.link,.md .color-theme-blue .card-footer a.link,.md .color-theme-blue .card-header a.link{color:#2196f3}.md .card-footer.color-theme-pink a.link,.md .card-header.color-theme-pink a.link,.md .color-theme-pink .card-footer a.link,.md .color-theme-pink .card-header a.link{color:#e91e63}.md .card-footer.color-theme-yellow a.link,.md .card-header.color-theme-yellow a.link,.md .color-theme-yellow .card-footer a.link,.md .color-theme-yellow .card-header a.link{color:#ffeb3b}.md .card-footer.color-theme-orange a.link,.md .card-header.color-theme-orange a.link,.md .color-theme-orange .card-footer a.link,.md .color-theme-orange .card-header a.link{color:#ff9800}.md .card-footer.color-theme-gray a.link,.md .card-header.color-theme-gray a.link,.md .color-theme-gray .card-footer a.link,.md .color-theme-gray .card-header a.link{color:#9e9e9e}.md .card-footer.color-theme-white a.link,.md .card-header.color-theme-white a.link,.md .color-theme-white .card-footer a.link,.md .color-theme-white .card-header a.link{color:#fff}.md .card-footer.color-theme-black a.link,.md .card-header.color-theme-black a.link,.md .color-theme-black .card-footer a.link,.md .color-theme-black .card-header a.link{color:#000}.md .card-footer a.link.color-red,.md .card-header a.link.color-red{color:#f44336}.md .card-footer a.link.color-green,.md .card-header a.link.color-green{color:#4caf50}.md .card-footer a.link.color-blue,.md .card-header a.link.color-blue{color:#2196f3}.md .card-footer a.link.color-pink,.md .card-header a.link.color-pink{color:#e91e63}.md .card-footer a.link.color-yellow,.md .card-header a.link.color-yellow{color:#ffeb3b}.md .card-footer a.link.color-orange,.md .card-header a.link.color-orange{color:#ff9800}.md .card-footer a.link.color-gray,.md .card-header a.link.color-gray{color:#9e9e9e}.md .card-footer a.link.color-white,.md .card-header a.link.color-white{color:#fff}.md .card-footer a.link.color-black,.md .card-header a.link.color-black{color:#000}