body{ overflow: hidden; background-color: #EEEEEE; transition: all cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.5s; opacity: 100; } md-whiteframe { background: #fff; } #content { /*padding: 24px;*/ } md-card { padding: 20px; } md-content { background-color: white; } .hint { position: absolute; bottom: 7px; font-size: 12px; line-height: 14px; color: grey; } .panel { padding: 8px; box-shadow: none; text-align: center; margin: 0px; border-radius: 6px; } .success-panel { color: white; background-color: #23be5a; } .warn-panel { color: dimgray; background-color: gold; } .error-panel { color: white; background-color: #d43300; } .error-subtitle { color: #d43300; padding: 8px; text-align: center; } .floating-fab { position: fixed; right: 1em; bottom: 1em; } .error-content-view { align-items: center; } .error-icon { font-size : 8em; /*height: auto;*/ display: initial; } .tab-body > div { transition: all cubic-bezier(0.190, 1.000, 0.220, 1.000) 0.5s; opacity: 100; /*position: absolute;*/ /*top: 0;*/ } [ng-view] { /*background: red;*/ } .fix-middle { /*position: absolute; left: 0; width: 100%; height: 100%; perspective: 1200px; transform-style: preserve-3d;*/ } /* ANGULAR ANIMATIONS */ /* entering animations --------------------------------------- */ /* scale up */ @keyframes scaleUp { from { opacity: 0; -webkit-transform: scale(0); } } @keyframes fadeIn { from { opacity: 0; } } /* leaving animations ----------------------------------------- */ /* slide in from the bottom */ @keyframes slideOutLeft { to { opacity: 0; transform: translateX(-100%); } } @keyframes scaleDown { to { opacity: 0; -webkit-transform: scale(0.8); } } @keyframes fadeOut { to { opacity: 0; position: absolute;} } .ng-enter { /*animation: fadeIn 0.5s ease-in;*/ /*z-index: 8888;*/ } .ng-leave { /*animation: fadeOut 0.5s ease-in;*/ /*z-index: 9999;*/ } .ng-show { /*animation: scaleUp 2s;*/ /*opacity: 100;*/ /*left: 0;*/ /*transform: translateX(0);*/ /*-ms-transform: translateX(0);*/ /*-webkit-transform: translateX(0);*/ /*transition-duration: 1250ms;*/ /*-webkit-transition-duration: 1250ms;*/ } .ng-hide { /*animation: slideOutLeft 2s;*/ /*transform: translateY(-250px);*/ /*-ms-transform: translateY(-250px);*/ /*-webkit-transform: translateY(-250px);*/ /*transition-duration: 250ms;*/ /*-webkit-transition-duration: 250ms;*/ /*top: -250px;*/ /*opacity: 0;*/ /*position: absolute;*/ } /*.tab-body.ng-enter, .tab-body.ng-leave.ng-leave-active { opacity: 0; }*/ .fab-toolbar-holder { position: absolute; bottom: 20px; right: 20px; top: auto; left: auto; } .animate-enter, .animate-leave { -webkit-transition: 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000) all; -moz-transition: 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000) all; -ms-transition: 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000) all; -o-transition: 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000) all; transition: 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000) all; position: relative; display: block; overflow: hidden; text-overflow: clip; white-space:nowrap; } .animate-leave.animate-leave-active, .animate-enter { opacity: 0; width: 0px; height: 0px; } .animate-enter.animate-enter-active, .animate-leave { opacity: 1; width: 150px; height: 30px; } @media screen { table.head-wrap { display: none; } } @media print { body * { visibility:hidden; } #printArea, #printArea * { visibility:visible; } #printArea { position:absolute; left:0; top:0; } #printArea .no-print { display: none; } } /* styles for the print reciept */ /* ---- GLOBAL ---------------------- */ #printArea * { margin: 0; padding: 0; } #printArea img { max-width: 100%; } .collapse { margin: 0; padding: 0; } #printArea { -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100% !important; height: 100%; } /* ---- ELEMENTS -------------------- */ #printArea a { color: lightskyblue; } #printArea .callout { padding: 15px; border-radius: 8px; margin-bottom: 15px; } #printArea .success { color: white; background-color: #23be5a; } #printArea .error { color: white; background: #d43300; } #printArea .primary { color: white; background: #2196f3; } #printArea .warn { color: dimgray; background: gold; } /* ---- HEADER ---------------------- */ table.head-wrap { width: 100%; background-color: #2196f3; color: white; } .header.container table td.logo { padding: 15px; } .header.container table td.label { padding: 15px; padding-left: 0px; } /* ---- BODY ------------------------ */ table.body-wrap { width: 100%; } /* ---- TYPOGRAPHY ------------------ */ #printArea h1, h2, h3, h4, h5, h6 { line-height: 2; margin-bottom: 15px; } #printArea h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; } #printArea h1 { font-weight: 200; font-size: 44px; } #printArea h2 { font-weight: 200; font-size: 37px; } #printArea h3 { font-weight: 500; font-size: 27px; } #printArea h4 { font-weight: 500; font-size: 23px; } #printArea h5 { font-weight: 900; font-size: 17px; } #printArea h6 { font-weight: 900; font-size: 14px; text-transform: uppercase; color: #444; } #printArea .collapse { margin: 0 !important; } #printArea p, ul { margin-bottom: 10px; font-weight: normal; font-size: 14px; line-height: 1.6; } #printArea p.lead { font-size: 17px; } #printArea p.last { margin-bottom: 0px; } #printArea ul li { margin-left: 5px; list-style-position: inside; } /* --------------------------------------------------- RESPONSIVENESS Nuke it from orbit. It's the only way to be sure. ------------------------------------------------------ */ /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */ #printArea .container { display: block !important; max-width: 600px !important; margin: 0 auto !important; /* makes it centered */ clear: both !important; } /* This should also be a block element, so that it will fill 100% of the .container */ #printArea .content { padding: 15px; max-width: 600px; margin: 0 auto; display: block; } /* Let's make sure tables in the content area are 100% wide */ #printArea .content table { width: 100%; } /* Odds and ends */ #printArea .column { width: 300px; float: left; } #printArea .column tr td { padding: 15px; } #printArea .column-wrap { padding: 0 !important; margin: 0 auto; max-width: 600px !important; } #printArea .column table { width: 100%; } /* Be sure to place a .clear element after each set of columns, just to be safe */ #printArea .clear { display: block; clear: both; } /* ------------------------------------------- PHONE For clients that support media queries. Nothing fancy. -------------------------------------------- */ @media only screen and (max-width: 600px) { a[class="btn"] { display: block !important; margin-bottom: 10px !important; background-image: none !important; margin-right: 0 !important; } table[class="column"] { width: auto !important; float: none !important; } table.social table[class="column"] { width: auto !important; } }