diff options
Diffstat (limited to 'plugins/jetpack/scss/templates/_main.scss')
| -rw-r--r-- | plugins/jetpack/scss/templates/_main.scss | 634 |
1 files changed, 634 insertions, 0 deletions
diff --git a/plugins/jetpack/scss/templates/_main.scss b/plugins/jetpack/scss/templates/_main.scss new file mode 100644 index 00000000..6aa2b7c2 --- /dev/null +++ b/plugins/jetpack/scss/templates/_main.scss @@ -0,0 +1,634 @@ +// ========================================================================== +// Main Layout +// ========================================================================== + +.configure .frame.top.fixed { + @include breakpoint(tablet){ + padding-left: 0; + }; +} + +// ========================================================================== +// Main author styles +// ========================================================================== + +.wrap.inner, +.page-content { + max-width: 950px; + margin: 0 auto; + + li { + line-height: 23px; + } +} + +.page-content { + @include breakpoint(large-phone){ + margin-top: 0; + }; +} + +.wrap.inner { + @include breakpoint(large-desktop) { + background: $clouds; + padding: 15px; + }; + @include breakpoint(large-phone) { + margin-top: em(24px); + }; +} + +.page-content.about { + position: relative; + z-index: 10; + + @include breakpoint(large-desktop){ + background: $clouds; + padding: 15px; + }; +} + +.page-content.configure { + @include breakpoint(large-desktop){ + background: $clouds; + }; +} + +.footer nav { + max-width: 550px; + margin: 0 auto; +} + + +// ========================================================================== +// Main navigation +// ========================================================================== + +.header { + left: 0; + right: 0; + background: $green; +} +.header-nav { + li { + line-height: 60px; + + } + a { + padding: 0 em(10px); + line-height: 24px; + } + .jetpack-logo { + a { + display: inline-block; + position: relative; + width: 214px; + margin-right: 6px; + background: url(../images/jetpack-logo.png) center center no-repeat; + background: url(../images/jetpack-logo.svg) center center no-repeat, none; + background-size: 183px auto; + color: #fff; + line-height: 60px; + font-weight: normal; + + span { + text-indent: -9999px; + visibility: hidden; + } + + // needs to be cleaned up and removed - jeffgolenski + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + background-size: 183px 32px; + } + } + } + .jetpack-modules + .jetpack-modules { + margin-left: 15px; + } +} + +.main-nav { + float: left; + + li { + margin: 0; + } + @include breakpoint(desktop){ + font-size: 13px; + }; +} + +// Help tab +.jetpack-pagestyles { + #screen-meta { + margin: 0; + } + #screen-meta-links .screen-meta-toggle { + z-index: 2; + } + #screen-options-link-wrap, #contextual-help-link-wrap { + border: none; + } + .update-nag { + display: none; + } +} + +// ========================================================================== +// Modal +// ========================================================================== + +.loading { + bottom: 50%; + position: absolute; + top: 50%; + width: 100%; + + span { + color: #999; + } +} +.modal { + background: #fff; + position: fixed; + top: 52px; + bottom: 20px; + right: 20px; + left: 20px; + margin-left: 160px; + display: none; + box-shadow: 0 1px 20px 5px rgba(0, 0, 0, 0.1); + z-index: 500; + + .close { + position: absolute; + top: 0; + right: 0; + font: 300 em(24px) 'genericons' !important; + color: #777; + content: '\f405'; + display: inline-block; + padding: em(4px) em(10px) em(6px); + z-index: 5; + + &:hover { + background: #eee; + opacity: 0.8; + } + &:active { + background: #eee; + opacity: 0.4; + } + } + .content-container { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + overflow: auto; + padding: em(30px, 14px); + } + .content { + margin: 0 auto; + max-width: 900px; + text-align: left; + } + h2 { + text-align: left; + margin-top: 0; + color: #5d6d74; + font-weight: 300; + line-height: 32px; + text-shadow: 0 1px 1px #fff; + + @include breakpoint(large-phone){ + font-size: 26px; + }; + } + h5 { + clear: left; + } + p { + font-size: em(16px, 13px); + } + footer { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + padding: 12px 20px; + border-top: 1px solid #ddd; + background: #fff; + text-align: right; + + ul { + margin: 0; + } + li { + display: inline-block; + margin: 0; + } + } + .button-secondary, + .button-primary:active { + // fixing weird core bug thingy + vertical-align: baseline; + } + @include breakpoint(desktop){ + bottom: 5%; + margin-left: 36px; + font-size: 80%; + + .content { + top: 38px; + } + }; + @include breakpoint(tablet){ + top: 66px; + margin-left: 0; + }; + @include breakpoint(phablet){ + top: 10px; + right: 10px; + bottom: 10px; + left: 10px; + } +} +.jp-info-img { + float: right; + margin: 0 0 8px 30px; + + img { + border: 1px solid #ddd; + max-width: 100%; + height: auto; + + &:first-child { + margin-top: 0; + } + } + @include breakpoint(tablet){ + float: none; + margin: 0 0 15px; + }; +} +.content-container.modal-footer { + bottom: 53px; +} +.shade { + background: #000; + bottom: 0; + cursor: pointer; + display: none; + left: 0; + opacity: 0.2; + position: fixed; + right: 0; + top: 0; + z-index: 11; +} + +// ========================================================================== +// Footer Navigation +// ========================================================================== + +// NOTE: .download-jetpack is in _buttons.scss +.footer { + margin-top: em(20px); + position: relative; + padding: em(140px) 0 em(60px); + text-align: center; + + &:before, + &:after { + content: ''; + position: absolute; + left: 0; + pointer-events: none; + } + &:before { + top: 0; + margin-top: -1px; // Removes subpixel gap on retina landscape + width: 100%; + height: 195px; + } + &:after { + display: none; + } + .download-jetpack { + margin-bottom: 33px; + } + @include minbreakpoint(large-desktop){ + padding-bottom: 35px; + }; + @include breakpoint(large-desktop) { + padding-top: 165px; + padding-bottom: 0; + + &:before { + background-size: 160% auto; + } + ul { + float: none; + overflow: hidden; // Clears the float + } + }; + @include breakpoint(desktop){ + padding-top: 146px; + }; + @include breakpoint(tablet){ + margin-top: 0; + }; + @include breakpoint(large-phone){ + margin-top: 0; + padding-top: 135px; + }; + @include breakpoint(phone){ + padding-top: 76px; + }; +} +.footer nav { + max-width: 100%; + + a, + a:visited { + padding: 4px 6px; + color: #999; + + &:hover, + &:focus { + color: #81A844; + } + } + @include breakpoint(large-desktop){ + a, + a:visited { + &:hover, + &:focus { + color: $green; + } + } + }; + @include breakpoint(large-phone){ + li { + display: block; + float: none; + margin: 0; + text-align: left; + } + a { + display: block; + padding: 0 16px; + line-height: 44px; + } + }; +} +.primary { + padding: 25px 15px 10px 15px; + border-bottom: 1px solid #eee; +} +.secondary-footer { + margin: 0 auto; + + li { + margin-right: 5px; + } + @include minbreakpoint(tablet){ + padding: 8px 15px 10px; + margin-bottom: 30px; + border-bottom: 1px solid #eee; + }; + @include minbreakpoint(large-desktop){ + margin-bottom: 0; + }; + @include breakpoint(tablet){ + padding: 8px 15px 8px; + border-bottom: none; + }; + @include breakpoint(large-phone){ + margin: 0; + padding: 0; + border: none; + font-weight: 400; + + a { + border-top: 1px solid #eee; + } + }; +} +.footer .a8c-attribution { + margin: 0; + padding: 0 6px; + color: #bbb; + font-size: em(11px); + font-family: $gill; + text-transform: uppercase; + + a { + // This may look janky, but if you highlight from + // "AN" to "TEAM," copy and paste, you'll get the whole + // "An AUTOMATTIC TEAM" phrase. + display: inline-block; + position: relative; + padding: 4px 16px; + right: 9999px; + outline: 0; + + &:after { + content: 'A'; + position: absolute; + top: 2px; + right: -9999px; + height: 100%; + color: #999; + font-size: em(17px, 11px); + font-family: $automatticons; + text-align: center; + } + &:hover { + &:after { + animation: candy .4s ease-in-out; + } + } + } +} +.secondary { + @include minbreakpoint(tablet){ + padding: 0 15px 10px 15px; + border-bottom: 1px solid #eee; + } + @include minbreakpoint(large-desktop){ + padding: 0 15px 10px 15px; + border-bottom: none; + } +} + + +// ========================================================================== +// Messages & Errors +// ========================================================================== + +.jetpack-message { + background: lighten($green, 5%); + border: 1px solid darken($green, 5%); + margin: 33px auto 0; + max-width: 90%; + position: relative; + z-index: 2; + + &.is-opt-in { + margin: 50px 0 0; + max-width: 100%; + padding: 10px 15px; + background: #fff; + border: 0; + box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); + font-size: 13px; + text-align: center; + + // page=jetpack specific styling + .subhead & { + margin: 0; + padding-bottom: 0; + background: transparent; + box-shadow: none; + + .jp-button { + display: inline-block; + } + } + p { + color: #3c4549; + } + .jp-button { + margin-top: 15px; + display: none; + } + } + .squeezer { + h2 { + font-size: 1em; + } + } + h2 { + color: #fff; + margin: 0; + } + p { + color: #fff; + margin: 0; + opacity: 0.7; + } + .squeezer { + padding: 23px 23px 23px 80px; + position: relative; + text-align: left; + + &:before { + color: #fff; + content: '\f418'; + font-family: 'Genericons'; + font-size: 33px; + height: 33px; + left: 25px; + opacity: 0.6; + position: absolute; + top: 23px; + top: calc( 50% - 22px ); + } + @include breakpoint(large-phone){ + padding: 23px; + + &:before { + display: none; + } + } + a { + color:#FFF; + border-bottom:1px solid #D5E4BD; + } a:hover{ + border-bottom:1px solid #F1F6E9; + } + } + &.error .squeezer:before, + &.jetpack-err .squeezer:before { + content: '\f414'; + } +} + +.configure-module .jetpack-message { + max-width:100%; +} + +// ========================================================================== +// Uncategorized +// ========================================================================== + +@include breakpoint(large-phone){ + .wrap.inner.jp-support { // Used anywhere? + .jp-support-column-left { + width: 100%; + + .widget-text { + margin-right: 0; + width: 100%; + } + } + .jp-support-column-right { + width: 100%; + } + } +}; + +// ========================================================================== +// Custom Breakpoints +// ========================================================================== + +@media screen and (max-width: 515px) { + .jp-frame { + .header-nav { + padding-bottom: 10px; + + li { + line-height: 30px; + } + .jetpack-logo { + width: 100%; + text-align: center; + } + .jetpack-modules { + margin: 0; + width: 50%; + text-align: right; + padding: 0 5px; + } + .jetpack-modules + .jetpack-modules { + text-align: left; + } + .jetpack-modules:nth-child(4) { + text-align: center; + margin: 0 auto; + width: 100%; + a { + padding: 0 10px; + } + } + } + } +} // max 515px + +// ========================================================================== +// Fix notice in IE +// ========================================================================== +#ie-legacy-notice .dops-notice__content { + display: inline-block; + margin-left: 10px; +} |