Changeset 6161 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/styles/modules/_wporg-header.scss

Timestamp:

11/22/2017 11:37:14 PM (9 years ago)

Author:

obenland

Message:

Plugins: Updated wp.org header styles.

Adds the ability to handle download buttons on Rosetta sites.

See #2861.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/styles/modules/_wporg-header.scss (modified) (2 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/styles/modules/_wporg-header.scss

@@ -2 +2 @@
 
 #wporg-header {
+        background: #23282d;
+        height: 140px;
+        position: relative;
+        text-align: center;
+        width: 100%;
+
+        .wrapper {
+                margin: 0 auto;
+                max-width: 960px;
+        }
+
         h1 {
+                display: inline-block;
                 margin: auto;
+                width: 303px;
+
+                a {
+                        background: url( //s.w.org/style/images/wp-header-logo.png?1 ) center left no-repeat;
+                        background-size: 303px 53px;
+                        display: block;
+                        height: 88px;
+                        text-indent: -9999px;
+                        width: 303px;
+
+                        @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+                        only screen and (min-resolution: 1.5dppx),
+                        only screen and (min-resolution: 144dpi) {
+                                background-image: url( //s.w.org/style/images/wp-header-logo-2x.png?1 );
+                        }
+                }
         }
 
         h2.rosetta {
                 clear: none;
-        }
-
-
-        @media screen and ( min-width: 769px ) {
+                color: #dfdfdf;
+                font-family: Georgia, "Times New Roman", serif;
+                font-size: 30px;
+                margin: 0;
+
+                a {
+                        border-bottom: none;
+                        color: #dfdfdf;
+                        display: block;
+                        height: 52px; /* 88 header height - 36 top padding */
+                        line-height: 22px;
+                        padding: 0;
+
+                        &:hover {
+                                text-decoration: none;
+                        }
+                }
+        }
+
+        #wporg-header-menu {
+                background: #23282d;
+                left: -75%;
+                list-style: none;
+                margin: 0;
+                max-width: 75%;
+                min-width: 200px;
+                padding: 20px 0 0;
+                position: absolute;
+                text-align: left;
+                transition: left 0.3s;
+                z-index: 100000;
+
+                &.active {
+                        left: 0;
+                }
+        }
+
+        ul li {
+                list-style-type:none;
+                position:relative;
+
+                a {
+                        color: #eee;
+                        display: block;
+                        font-family: "Open Sans", Helvetica, Arial, "Liberation Sans", sans-serif;
+                        font-size: 13px;
+                        font-weight: 600;
+                        height: 34px;
+                        line-height: 34px;
+                        margin: 0 4px;
+                        padding: 10px 30px;
+                        text-decoration: none;
+
+                        &.subcurrent {
+                                font-weight: bold;
+                        }
+
+                        @include breakpoint( sm ) {
+                                height: auto;
+                        }
+                }
+
+                &#download,
+                &.download {
+                        float: right;
+                        height: 34px;
+                        margin-right: 14px;
+                        overflow: hidden;
+                        padding: 0 0 34px;
+
+                        @media screen and (max-width:820px) {
+                                display: none;
+                        }
+
+                        @media screen and (max-width:768px) {
+                                display: block;
+                                float: none;
+                                margin: 10px 20px 20px;
+                                padding-bottom: 0;
+                                height: auto;
+
+                                a {
+                                        padding: 4px 10px;
+                                }
+                        }
+
+                        a {
+                                margin: 0;
+                                padding: 0 16px;
+
+                                &:hover {
+                                        color: #eee;
+                                }
+                        }
+
+                        &.current,
+                        &.current-menu-item {
+                                a {
+                                        color: #eee;
+                                }
+                        }
+
+                        .uparrow {
+                                display: none;
+                        }
+                }
+
+                a:hover,
+                a.current,
+                &.current-menu-item a,
+                &.current_page_parent a {
+                        color: #00a0d2;
+                }
+        }
+
+        .nav-submenu {
+                display: none;
+                margin-bottom: 10px;
+                margin-top: -15px;
+                padding: 0;
+                position: static;
+
+                li a {
+                        height: 24px;
+                        line-height: 24px;
+                        margin-left: 20px;
+                }
+        }
+
+        #head-search {
+                @include breakpoint( $sm ) {
+                        float: right;
+                        margin-right: 14px;
+                        padding-top: 30px;
+                }
+
+                form {
+                        border-bottom: 1px solid #3f3f3f;
+                        display: inline-block;
+                        margin-left: 60px;
+                        width: 288px;
+
+                        input.text {
+                                background: #191e23;
+                                border: 0;
+                                border-radius: 0;
+                                box-sizing: content-box;
+                                color: #b4b9be;
+                                float: left;
+                                font-family: "Open Sans", sans-serif;
+                                font-size: 12px;
+                                height: 24px;
+                                margin: 0;
+                                outline: none;
+                                padding: 3px;
+                                vertical-align: top;
+                                width: 256px;
+
+                                &::-moz-placeholder {
+                                        color: #eee;
+                                }
+
+                                @media screen and (max-width:480px) {
+                                        width: 216px;
+                                }
+                        }
+
+                        .button {
+                                background: #191e23 url( //s.w.org/wp-includes/images/admin-bar-sprite.png?d=20120831 ) no-repeat 2px 4px;
+                                border: none;
+                                border-radius: 0;
+                                box-shadow: none;
+                                float: left;
+                                height: 30px;
+                                margin: 0;
+                                padding: 0;
+                                text-shadow: none !important;
+                                width: 26px;
+                        }
+
+                        @include breakpoint( 0, 480px ) {
+                                width: 248px;
+                        }
+
+                        @include breakpoint( 480px ) {
+                                margin-left: 0;
+                        }
+                }
+        }
+
+        @include breakpoint( $sm ) {
+                height: 120px;
+                text-align: inherit;
+
+                h1 {
+                        float: left;
+                        padding-left: 10px;
+                }
+
+                h2.rosetta {
+                        float: left;
+                        padding: 36px 27px 0;
+                }
+
+                #wporg-header-menu {
+                        float:left;
+                        list-style: none;
+                        margin: -15px 0 0;
+                        max-width: inherit;
+                        min-width: 0;
+                        padding: 0;
+                        position: static;
+                        width: 100%;
+                }
+
+                ul li {
+                        float: left;
+                        position:relative;
+
+                        a {
+                                color: #eee;
+                                display: block;
+                                font-family: "Open Sans", Helvetica, Arial, "Liberation Sans", sans-serif;
+                                font-size: 13px;
+                                font-weight: 600;
+                                height: 46px;
+                                line-height: 34px;
+                                margin: 0 4px;
+                                padding: 0 6px;
+
+                                &.current ~ .uparrow {
+                                        border-bottom: 9px solid #f7f7f7;
+                                        border-left: 9px solid transparent;
+                                        border-right: 9px solid transparent;
+                                        height: 0;
+                                        margin: -8px auto 0 auto;
+                                        width: 0;
+                                }
+                        }
+
+                        &.current-menu-item:after,
+                        &.current_page_parent:after {
+                                border-bottom: 9px solid #f7f7f7;
+                                border-left: 9px solid transparent;
+                                border-right: 9px solid transparent;
+                                content: '';
+                                height: 0;
+                                left: 50%;
+                                margin: -8px 0 0 -9px;
+                                position: absolute;
+                                width: 0;
+                        }
+
+                        &:hover .nav-submenu ~ .uparrow,
+                        .nav-submenu:hover ~ .uparrow {
+                                border-bottom: 9px solid #32373c;
+                                border-left: 9px solid transparent;
+                                border-right: 9px solid transparent;
+                                height: 0;
+                                margin: -10px auto 0 auto;
+                                width: 0;
+                        }
+
+                        .nav-submenu li {
+                                float: none;
+
+                                a {
+                                        height: 34px;
+                                        line-height: 34px;
+                                        margin-left: 6px;
+                                }
+                        }
+                }
+
+                .nav-submenu {
+                        background: #32373c;
+                        border: #32373c solid 1px;
+                        border-top: 0;
+                        display: none !important;/* Prevents #wporg-header ul overwriting this */
+                        margin-top: -1px;
+                        min-width: 0;
+                }
+
+                ul li:hover .nav-submenu,
+                ul li .nav-submenu:hover {
+                        display: block !important;/* Prevents #wporg-header ul overwriting this */
+                        left:0;
+                        margin-left:0;
+                        position: absolute;
+                        top: 46px;
+                        width: auto;
+                        z-index: 101;
+                }
+
+                #headline h2 {
+                        text-rendering: optimizeLegibility;
+                }
+
                 ul li.current-menu-item:after,
                 ul li.current_page_parent:after,
@@ -18 +340 @@
                 }
         }
-
-        form input {
-                box-sizing: content-box;
+}
+
+#mobile-menu-button {
+        display: block;
+        float: left;
+        font-family: 'dashicons';
+        font-size: 16px;
+        font-style: normal;
+        font-weight: normal;
+        height: 32px;
+        left: 10px;
+        line-height: 1;
+        position: absolute;
+        text-align: center;
+        text-decoration: inherit;
+        top: 75px;
+        transition: color .1s ease-in;
+        vertical-align: top;
+        width: 39px;
+        -webkit-font-smoothing: antialiased;
+
+        &:before {
+                border: none;
+                box-sizing: border-box;
+                color: #888;
+                content: '\f228';
+                display: inline-block;
+                float: left;
+                font: normal 50px/1 'Dashicons';
+                height: 32px;
+                margin: 0;
+                outline: none;
                 padding: 3px;
-        }
-
-        .button {
-                box-shadow: none;
-        }
-
-        .download-button {
-                background-color: #21759b;
-                background-image: linear-gradient(to bottom, #2a95c5, #21759b);
-                border-bottom-color: #1e6a8d;
-                border-color: #21759b;
-                box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 );
-
-                &:hover,
-                &:focus {
-                        background-color: #278ab7;
-                        background-image: linear-gradient(to bottom, #2e9fd2, #21759b);
-                        border-color: #1b607f;
-                        box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
-                        color: #fff;
-                        text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.3 );
-                }
-
-                &:active {
-                        background: #1b607f;
-                        background-image: linear-gradient(to bottom, #21759b, #278ab7);
-                        border-color: #124560 #2382ae #2382ae #2382ae;
-                        box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
-                        color: rgba(255,255,255,0.95);
-                        text-shadow: 0 1px 0 rgba(0,0,0,0.1);
-                        transform: none;
-                }
-        }
-
-        a:hover,
-        a:focus,
-        a:active {
                 text-decoration: none;
+                vertical-align: middle;
+                width: 39px;
+                -webkit-font-smoothing: antialiased;
+        }
+
+        &:hover {
+                background:none;
+        }
+
+        @include breakpoint( $sm ) {
+                display: none;
         }
 }
+
+#download-mobile {
+        background: #f7f7f7;
+        border-bottom: 1px solid #dddddd;
+
+        .wrapper {
+                padding: 20px 0;
+                text-align: center;
+        }
+
+        span.download-ready {
+                font-size: 1.6em;
+                margin: 0 0.25em;
+        }
+
+        a.download-button {
+                font-size: 1.6em;
+                height: inherit;
+                margin: 10px 0.25em;
+                padding: 10px 15px;
+        }
+}