Last active
June 30, 2018 00:00
-
-
Save mixmastermichael/7c4446b80aa4b5364c1460278bd6291a to your computer and use it in GitHub Desktop.
Biggie onboarding 2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "scss/styles_max_ob_1"; | |
| @font-family: Google Sans, Roboto, Helvetica, Arial, sans-serif; | |
| .mobile-icon { | |
| display: none; | |
| } | |
| .hero-mod .headline-copy h1, | |
| .mod-3 .headline-copy h1 { | |
| font-size: 22px; | |
| } | |
| .hero-dt-v2 { | |
| img { | |
| width: 598px; | |
| } | |
| } | |
| .mod-1.queries { | |
| width: 480px; | |
| } | |
| strong { | |
| font-weight: bold; | |
| } | |
| td.mod-5 { | |
| td.grey-bg { | |
| text-align: center; | |
| table.icon-queries { | |
| -premailer-align: center; | |
| width: 450px; | |
| } | |
| } | |
| } | |
| .no-wrap { | |
| white-space: nowrap; | |
| } | |
| .desktop .mod-3 .copy-body { | |
| padding: 0 20px; | |
| } | |
| .grey-bg { | |
| -premailer-bgcolor: #f8f8f8; | |
| background-color: #f8f8f8; | |
| } | |
| .white-bg { | |
| background-color: #ffffff; | |
| } | |
| .mod4-icon { | |
| -premailer-valign: top; | |
| } | |
| .divider { | |
| border-bottom: 1px solid #f7f7f7; | |
| line-height: 1px; | |
| height: 0; | |
| } | |
| table.blue-card { | |
| width: 540px; | |
| -premailer-align: center; | |
| margin: 0 auto; | |
| & > tr > td { | |
| background-color: #3882BE; | |
| -premailer-align: center; | |
| } | |
| .headline-copy h2 { | |
| color: #ffffff; | |
| font-size: 18px; | |
| line-height: 26px; | |
| text-align: center; | |
| font-weight: bold; | |
| } | |
| .copy-body { | |
| p { | |
| color: #ffffff; | |
| text-align: center; | |
| a { | |
| text-decoration: underline; | |
| } | |
| } | |
| } | |
| a { | |
| color: #ffffff; | |
| } | |
| } | |
| td.support-headline-spacer img { | |
| height: 29px !important; | |
| } | |
| .hero-wrap .copy-body { | |
| padding: 0 80px; | |
| font-size: 14px; | |
| } | |
| table.outline-card { | |
| width: 540px; | |
| -premailer-align: center; | |
| margin: 0 auto; | |
| border-bottom: 1px solid #4285F4; | |
| table.card-title { | |
| -premailer-align: center; | |
| margin: 0 auto; | |
| & > tr > td { | |
| -premailer-align: center; | |
| background-color: #ffffff; | |
| font-family: @font-family; | |
| font-weight: bold; | |
| padding: 4px 42px 0; | |
| color: #4285F4; | |
| font-size: 16px; | |
| line-height: 20px; | |
| } | |
| } | |
| table.outline-content { | |
| width: 480px; | |
| -premailer-align: center; | |
| td { | |
| -premailer-align: center; | |
| &.copy-body { | |
| padding: 0; | |
| p { | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .mod-1.queries { | |
| .query-1, | |
| .query-2, | |
| .query-3, | |
| .query-4, | |
| .query-5 { | |
| -premailer-align: center; | |
| padding-right: 0; | |
| padding-left: 0; | |
| } | |
| .query { | |
| margin: 0 auto; | |
| } | |
| } | |
| .query { | |
| color: #202124; | |
| } | |
| td.hey-google-hero h2 { | |
| font-size: 14px; | |
| line-height: 24px; | |
| } | |
| td.hey-google-footer.footer-headline h2 { | |
| font-size: 15px; | |
| line-height: 15px; | |
| color: #666666; | |
| } | |
| #gmail-fix { | |
| display: none !important; | |
| } | |
| // global mobile styles | |
| @media only screen and (device-width: 412px) and (orientation: portrait), | |
| only screen and (min-device-width: 374px) and (max-device-width: 376px), | |
| only screen and (min-device-width: 413px) and (max-device-width: 415px), | |
| only screen and (device-width: 375px) and (orientation: portrait), | |
| only screen and (device-width: 414px) and (orientation: portrait) { | |
| .mod-1.queries { | |
| width: 380px; | |
| } | |
| .hero-wrap { | |
| .copy-body { | |
| padding: 0 50px; | |
| } | |
| } | |
| td.hey-google-hero h2 { | |
| font-size: 16px; | |
| line-height: 24px; | |
| } | |
| .mod-1.queries { | |
| width: 360px; | |
| .query-1 { | |
| padding-right: 0; | |
| padding-left: 0; | |
| .query { | |
| float: left; | |
| } | |
| } | |
| .query-2 { | |
| padding-right: 0; | |
| padding-left: 0; | |
| .query { | |
| float: right; | |
| } | |
| } | |
| .query-3 { | |
| padding-right: 0; | |
| padding-left: 0; | |
| .query { | |
| float: left; | |
| } | |
| } | |
| .query-4 { | |
| padding-right: 0; | |
| padding-left: 0; | |
| .query { | |
| float: right; | |
| } | |
| } | |
| } | |
| .mod-3 .copy-body { | |
| padding: 0 40px; | |
| } | |
| table.blue-card { | |
| width: 420px; | |
| .copy-body { | |
| padding: 0 40px; | |
| } | |
| } | |
| .outline-card { | |
| background-image: url(http://services.google.com/fh/files/emails/google_home_max_outline_overlap_bg_420.png); | |
| width: 420px; | |
| table.outline-content { | |
| width: 360px; | |
| } | |
| .copy-body { | |
| //padding: 0 20px; | |
| } | |
| } | |
| td.mobile-icon { | |
| display: table-cell; | |
| } | |
| td.support-text { | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| td.support-spacer { | |
| display: table-cell; | |
| } | |
| } | |
| // global mobile styles | |
| @media only screen and (device-width:412px) and (orientation:portrait), only screen and (min-device-width:374px) and (max-device-width:376px), only screen and (min-device-width:413px) and (max-device-width:415px), only screen and (device-width:375px) and (orientation:portrait), only screen and (device-width:414px) and (orientation:portrait) { | |
| .mod-1.queries { | |
| width: 380px; | |
| } | |
| .hero-wrap { | |
| .copy-body { | |
| padding: 0 50px; | |
| } | |
| } | |
| td.hey-google-hero h2 { | |
| font-size: 16px; | |
| line-height: 24px; | |
| } | |
| .mod-1.queries { | |
| width: 360px; | |
| .query-1 { | |
| padding-right: 0; | |
| padding-left: 0; | |
| .query { | |
| float: left; | |
| } | |
| } | |
| .query-2 { | |
| padding-right: 0; | |
| padding-left: 0; | |
| .query { | |
| float: right; | |
| } | |
| } | |
| .query-3 { | |
| padding-right: 0; | |
| padding-left: 0; | |
| .query { | |
| float: left; | |
| } | |
| } | |
| .query-4 { | |
| padding-right: 0; | |
| padding-left: 0; | |
| .query { | |
| float: right; | |
| } | |
| } | |
| } | |
| .mod-3 .copy-body { | |
| padding: 0 40px; | |
| } | |
| table.blue-card { | |
| width: 420px; | |
| .copy-body { | |
| padding: 0 40px; | |
| } | |
| } | |
| .outline-card { | |
| background-image: url(http://services.google.com/fh/files/emails/google_home_max_outline_overlap_bg_420.png); | |
| width: 420px; | |
| table.outline-content { | |
| width: 360px; | |
| } | |
| .copy-body { | |
| //padding: 0 20px; | |
| } | |
| } | |
| } | |
| @media only screen and (device-width:412px) and (orientation:portrait) { | |
| .hero-mod .headline-copy h1 { | |
| font-size: 19px !important; | |
| } | |
| .icon-queries { | |
| width: 85%; | |
| } | |
| .outline-content td.copy-body p { | |
| line-height: 25px !important | |
| } | |
| td.hey-google-footer h2 { | |
| padding: 20px 0 20px 0; | |
| font-size: 13px; | |
| } | |
| td#modmobile { | |
| font-size: 15px !important; | |
| line-height: 12px !important; | |
| color: #666666; | |
| span { | |
| display: none; | |
| } | |
| } | |
| .mobile-hero { | |
| width: 440px; | |
| max-width: 440px; | |
| img { | |
| width: 440px; | |
| } | |
| } | |
| //show/hide function for desktop and mobile - Inbox | |
| .desktop { | |
| display: none !important; | |
| } | |
| .mobile { | |
| display: block !important; | |
| img { | |
| display: block !important | |
| } | |
| } | |
| span.mobile { | |
| display: inline !important | |
| } | |
| .mobile-row { | |
| display: block !important; | |
| img { | |
| display: block !important; | |
| } | |
| .mobile { | |
| display: block !important; | |
| } | |
| } | |
| td.copy-body.hero-copy { | |
| padding: 0 15px; | |
| p { | |
| font-size: 13px !important; | |
| line-height: 26px !important; | |
| } | |
| } | |
| /*.border-wrap { | |
| & > tr > td { | |
| border: 1px solid #ff0000; | |
| } | |
| }*/ | |
| td.hey-google-hero h2 { | |
| font-size: 13px; | |
| line-height: 20px; | |
| } | |
| td.hero-m img.mobile-hero { | |
| //border: 1px solid #ff0000; | |
| //width: 100% !important; | |
| //max-width: 100% !important; | |
| } | |
| .hero-wrap { | |
| //border: 1px solid #ff0000; | |
| } | |
| .icon-queries { | |
| width: 355px; | |
| } | |
| .query { | |
| font-size: 15px; | |
| white-space: nowrap; | |
| } | |
| .body-copy.hero-copy { | |
| padding-left: 40px; | |
| padding-right: 40px; | |
| } | |
| td.copy-legal, td.copy-legal a { | |
| font-size: 10px; | |
| } | |
| td.feedback-headline h4 { | |
| font-size: 13px; | |
| line-height: 17px; | |
| white-space: nowrap; | |
| } | |
| div > u + .body section { | |
| td.hey-google-hero h2 { | |
| font-size: 16px; | |
| line-height: 22px; | |
| } | |
| } | |
| //mike changes staring here from the original en-ca original | |
| td.mobile-icon { | |
| display: table-cell; | |
| } | |
| td.support-text { | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| td#modmobile p { | |
| font-size: 13px !important; | |
| line-height: 25px !important; | |
| color: #666666; | |
| display: none; | |
| } | |
| td.copy-body p { | |
| line-height: 26px !important; | |
| font-size: 13px !important; | |
| } | |
| td.copy-body.hero-copy p { | |
| font-size: 12px !important; | |
| line-height: 20px !important; | |
| } | |
| td.hey-google-footer.footer-headline h2 { | |
| font-size: 12px !important; | |
| } | |
| td#mod4-iconNone { | |
| padding-right: 5px; | |
| } | |
| img.mobileimg { | |
| img { | |
| width: 400px; | |
| } | |
| } | |
| } | |
| // iphone 6, 7, 8, 6s - this will affect all 3 apps | |
| @media only screen and (min-device-width:374px) and (max-device-width:376px) { | |
| .outline-content td.copy-body p { | |
| line-height: 20px !important | |
| } | |
| td.hey-google-footer h2 { | |
| padding: 20px 0 20px 0; | |
| font-size: 13px; | |
| } | |
| td.copy-body.hero-copy { | |
| padding: 0 15px; | |
| p { | |
| font-size: 14px !important; | |
| line-height: 13px !important; | |
| } | |
| } | |
| td.copy-body p { | |
| line-height: 26px !important; | |
| } | |
| td#modmobile { | |
| font-size: 15px !important; | |
| line-height: 5px !important; | |
| color: #666666; | |
| span { | |
| line-height: 10px; | |
| } | |
| } | |
| //show/hide function for desktop and mobile - Inbox | |
| .desktop { | |
| display: none !important; | |
| } | |
| .mobile { | |
| display: block !important; | |
| img { | |
| display: block !important | |
| } | |
| } | |
| span.mobile { | |
| display: inline !important; | |
| } | |
| .mobile-row { | |
| display: block !important; | |
| img { | |
| display: block !important; | |
| } | |
| .mobile { | |
| display: block !important; | |
| } | |
| } | |
| .hero-m { | |
| img { | |
| width: 100%; | |
| } | |
| } | |
| #gmail-fix { | |
| display: none; | |
| } | |
| //mike changes starting here from the en-ca original | |
| td.copy-body.hero-copy p { | |
| font-size: 14px !important; | |
| line-height: 26px !important; | |
| } | |
| td.copy-wrap { | |
| font-size: 12px; | |
| line-height: 24px !important | |
| } | |
| td.copy-body.mod3-copy p { | |
| font-size: 12px; | |
| line-height: 25px !important; | |
| color: #f0f0f0; | |
| } | |
| img.mobileimg { | |
| padding: 0 20px 0 20px; | |
| } | |
| td#modmobile p { | |
| font-size: 15px !important; | |
| line-height: 25px !important; | |
| color: #666666; | |
| display: none; | |
| } | |
| td.mobile-icon { | |
| display: table-cell; | |
| } | |
| td.support-text { | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment