Changeset 3676

Timestamp:

07/12/2016 10:17:26 PM (9 years ago)

Author:

obenland

Message:

Plugin Directory: Use autoprefixer for vendor prefixes.

Also adds pixel fallback for older browsers that don't understand rems.
Just to be sure.

See #1719.

Location:

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins

Files:

• Gruntfile.js (modified) (2 diffs)
• css/style-rtl.css (modified) (92 diffs)
• css/style.css (modified) (92 diffs)
• package.json (modified) (1 diff)
• sass/elements/_banners.scss (modified) (1 diff)
• sass/elements/_elements.scss (modified) (1 diff)
• sass/forms/_buttons.scss (modified) (6 diffs)
• sass/forms/_fields.scss (modified) (12 diffs)
• sass/forms/_upload.scss (modified) (2 diffs)
• sass/modules/_accessibility.scss (modified) (1 diff)
• sass/navigation/_menus.scss (modified) (3 diffs)
• sass/site/_header.scss (modified) (8 diffs)
• sass/site/primary/_404.scss (modified) (1 diff)
• sass/site/primary/_front-page.scss (modified) (2 diffs)
• sass/site/primary/_page.scss (modified) (1 diff)
• sass/site/primary/_plugin-index.scss (modified) (1 diff)
• sass/site/primary/_plugin-single.scss (modified) (8 diffs)
• sass/site/secondary/_widgets.scss (modified) (3 diffs)
• sass/typography/_copy.scss (modified) (1 diff)
• sass/typography/_headings.scss (modified) (4 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/Gruntfile.js

@@ -1 +1 @@
 /*global module:false*/
 module.exports = function(grunt) {
+    grunt.loadNpmTasks('grunt-postcss');
+
 
     grunt.initConfig({
+        postcss: {
+            options: {
+                processors: [
+                    require('autoprefixer')({
+                        browsers: [
+                            'Android >= 2.1',
+                            'Chrome >= 21',
+                            'Edge >= 12',
+                            'Explorer >= 7',
+                            'Firefox >= 17',
+                            'Opera >= 12.1',
+                            'Safari >= 6.0'
+                        ],
+                        cascade: false
+                    })
+                ]
+            },
+            dist: {
+                files: {
+                    'css/style.css': 'css/style.css'
+                }
+            }
+        },
         jshint: {
             files: [
@@ -92 +117 @@
             rtl: {
                 files: ['**/style.css'],
-                tasks: ['rtlcss:dynamic']
+                tasks: ['postcss', 'rtlcss:dynamic']
             }
         }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/css/style-rtl.css

@@ -110 +110 @@
 
 hr {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
   box-sizing: content-box;
   height: 0;
@@ -170 +172 @@
 input[type="checkbox"],
 input[type="radio"] {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0;
@@ -242 +246 @@
   font-family: inherit;
   line-height: 1.5;
+  margin: 32px 0 16px;
   margin: 2rem 0 1rem;
 }
@@ -256 +261 @@
   color: #0073aa;
   font-weight: 600;
+  letter-spacing: 0.8px;
   letter-spacing: 0.05rem;
   text-transform: uppercase;
@@ -285 +291 @@
   font-size: 1rem;
   font-weight: 600;
+  letter-spacing: 0.16px;
   letter-spacing: 0.01rem;
   text-transform: uppercase;
@@ -293 +300 @@
   font-size: 0.8rem;
   font-weight: 600;
-  letter-spacing: 0.05rem;
+  letter-spacing: 0.8px;
   text-transform: uppercase;
 }
@@ -303 +310 @@
 p.subheading {
   color: #82878c;
+  font-size: 20px;
   font-size: 1.25rem;
   font-weight: 300;
-  margin: -.4rem auto 2rem;
+  margin: -6.4px auto 32px;
+  margin: -0.4rem auto 2rem;
   text-align: center;
 }
 
 p.intro {
+  font-size: 20px;
   font-size: 1.25rem;
 }
 
 p.aside {
+  font-size: 12.8px;
   font-size: 0.8rem;
 }
 
 p.note {
+  font-size: 10.24px;
   font-size: 0.64rem;
+  letter-spacing: 0.16px;
   letter-spacing: 0.01rem;
   max-width: 18.1898940355rem;
@@ -371 +384 @@
 --------------------------------------------------------------*/
 html {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
@@ -378 +393 @@
 *:after {
   /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
   box-sizing: inherit;
 }
@@ -398 +415 @@
   border: 0;
   height: 2px;
+  margin: 80px auto;
   margin: 5rem auto;
 }
@@ -442 +460 @@
   background: #fff;
   border-right: 4px solid #fff;
+  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
   margin: 1em 0;
@@ -455 +474 @@
 
 .notice.notice-alt {
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
@@ -495 +515 @@
 
 .locale-banner {
-  padding: .5rem;
   background: #C7E8CA;
+  padding: 8px;
+  padding: 0.5rem;
   text-align: center;
   font-size: 12.8px;
@@ -504 +525 @@
 @media (min-width: 67rem) {
   .locale-banner {
+    margin: 16px auto 0;
     margin: 1rem auto 0;
     max-width: 960px;
@@ -519 +541 @@
 .button-secondary,
 .plugin-upload-form .button-primary {
-  -webkit-appearance: none;
   border: 1px solid;
+  -webkit-border-radius: 3px;
   border-radius: 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
   cursor: pointer;
   display: inline-block;
   font-size: 0.8rem;
+  height: 1.5625rem;
   line-height: 1;
-  height: 1.5625rem;
   margin: 0;
-  padding: 0 .8rem;
+  padding: 0 12.8px;
+  padding: 0 0.8rem;
   text-decoration: none;
   white-space: nowrap;
+  -webkit-appearance: none;
 }
 
@@ -547 +573 @@
   height: 1.953125rem;
   line-height: 1;
+  padding: 0 16px;
   padding: 0 1rem;
 }
@@ -556 +583 @@
   height: 1.25rem;
   line-height: 1;
-  padding: 0 .5rem;
+  padding: 0 8px;
+  padding: 0 0.5rem;
 }
 
@@ -591 +619 @@
   background: none;
   border: none;
+  -webkit-box-shadow: none;
   box-shadow: none;
   padding: 0 2px 1px;
@@ -604 +633 @@
   background: #f7f7f7;
   border-color: #cccccc;
+  -webkit-box-shadow: 0 1px 0 #cccccc;
   box-shadow: 0 1px 0 #cccccc;
   color: #555;
@@ -629 +659 @@
 .button-link:focus {
   border-color: #5b9dd9;
+  -webkit-box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
   box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
 }
@@ -638 +669 @@
   background: #eee;
   border-color: #999;
+  -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
   box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
+  -webkit-transform: translateY(1px);
+  -ms-transform: translateY(1px);
   transform: translateY(1px);
 }
@@ -644 +678 @@
 .button.active:focus {
   border-color: #5b9dd9;
+  -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 115, 170, 0.8);
   box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 115, 170, 0.8);
 }
@@ -656 +691 @@
   background: #f7f7f7 !important;
   border-color: #ddd !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
   color: #a0a5aa !important;
   cursor: default;
-  box-shadow: none !important;
   text-shadow: 0 1px 0 #fff !important;
+  -webkit-transform: none !important;
+  -ms-transform: none !important;
   transform: none !important;
 }
@@ -667 +705 @@
   background: none;
   border: 0;
+  -webkit-border-radius: 0;
   border-radius: 0;
+  -webkit-box-shadow: none;
   box-shadow: none;
   cursor: pointer;
@@ -687 +727 @@
   background: #0085ba;
   border-color: #0073aa #006799 #006799;
+  -webkit-box-shadow: 0 1px 0 #006799;
   box-shadow: 0 1px 0 #006799;
   color: #fff;
@@ -704 +745 @@
   background: #008ec2;
   border-color: #006799;
+  -webkit-box-shadow: 0 1px 0 #006799;
   box-shadow: 0 1px 0 #006799;
   color: #fff;
@@ -713 +755 @@
 .plugin-upload-form .button-primary.focus,
 .plugin-upload-form .button-primary:focus {
+  -webkit-box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db;
   box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db;
 }
@@ -727 +770 @@
   background: #0073aa;
   border-color: #006799;
+  -webkit-box-shadow: inset 0 2px 0 #006799;
   box-shadow: inset 0 2px 0 #006799;
   vertical-align: top;
@@ -740 +784 @@
   background: #008ec2 !important;
   border-color: #007cb2 !important;
+  -webkit-box-shadow: none !important;
   box-shadow: none !important;
   color: #66c6e4 !important;
@@ -749 +794 @@
 .download-button.button.button-hero,
 .plugin-upload-form .button-primary.button.button-hero {
+  -webkit-box-shadow: 0 2px 0 #006799;
   box-shadow: 0 2px 0 #006799;
 }
@@ -761 +807 @@
 .plugin-upload-form .button-primary.button.button-hero.active:focus,
 .plugin-upload-form .button-primary.button.button-hero:active {
+  -webkit-box-shadow: inset 0 3px 0 #006799;
   box-shadow: inset 0 3px 0 #006799;
 }
@@ -767 +814 @@
   background: #008ec2 !important;
   border-color: #007cb2 !important;
+  -webkit-box-shadow: none !important;
   box-shadow: none !important;
   color: #66c6e4 !important;
@@ -785 +833 @@
 
 .button-group > .button {
+  -webkit-border-radius: 0;
+  border-radius: 0;
   display: inline-block;
-  border-radius: 0;
   margin-left: -1px;
   z-index: 10;
@@ -800 +849 @@
 
 .button-group > .button:first-child {
+  -webkit-border-radius: 0 3px 3px 0;
   border-radius: 0 3px 3px 0;
 }
 
 .button-group > .button:last-child {
+  -webkit-border-radius: 3px 0 0 3px;
   border-radius: 3px 0 0 3px;
 }
@@ -857 +908 @@
 select,
 textarea {
-  -webkit-appearance: none;
   background-color: #fff;
   border: 1px solid #ddd;
@@ -865 +915 @@
   -webkit-transition: 0.05s border-color ease-in-out;
   transition: 0.05s border-color ease-in-out;
+  -webkit-appearance: none;
 }
 
@@ -973 +1024 @@
   float: right;
   font: normal 21px/1 dashicons;
+  vertical-align: middle;
+  width: 16px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   speak: none;
-  vertical-align: middle;
-  width: 16px;
 }
 
@@ -1010 +1061 @@
 
 /* Search */
-input[type="search"] {
-  -webkit-appearance: textfield;
-}
-
 input[type="search"]::-webkit-search-decoration {
   display: none;
@@ -1150 +1197 @@
 
 .plugin-upload-form legend {
+  margin: 16px 0;
   margin: 1rem 0;
 }
@@ -1155 +1203 @@
 .plugin-upload-form .category-checklist {
   list-style-type: none;
+  margin: 0 0 32px;
   margin: 0 0 2rem;
 }
@@ -1160 +1209 @@
 .plugin-upload-form .category-checklist li {
   float: right;
+  padding: 8px 0;
   padding: 0.5rem 0;
   width: 50%;
@@ -1247 +1297 @@
 
 .main-navigation ul ul {
+  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
   float: right;
+  right: -999em;
   position: absolute;
   top: 1.5em;
-  right: -999em;
   z-index: 99999;
 }
@@ -1304 +1355 @@
 
 .menu-toggle {
-  -webkit-appearance: none;
   background: transparent;
   border: none;
@@ -1313 +1363 @@
   height: 3.5rem;
   overflow: hidden;
+  position: absolute;
+  left: 16px;
+  left: 1rem;
+  top: -58px;
   width: 56px;
   width: 3.5rem;
-  position: absolute;
-  top: -58px;
-  left: 1rem;
+  -webkit-appearance: none;
 }
 
@@ -1379 +1431 @@
 .screen-reader-text {
   clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
   position: absolute !important;
-  height: 1px;
   width: 1px;
-  overflow: hidden;
 }
 
 .screen-reader-text:focus {
   background-color: #f1f1f1;
+  -webkit-border-radius: 3px;
   border-radius: 3px;
+  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
   clip: auto !important;
@@ -1517 +1571 @@
   position: absolute;
   left: 0;
+  top: 4.8px;
   top: 0.3rem;
 }
@@ -1539 +1594 @@
 .plugin-ratings .ratings-list {
   list-style-type: none;
+  margin: 16px 0;
   margin: 1rem 0;
   padding: 0;
@@ -1564 +1620 @@
   background-color: #ececec;
   width: 58%;
+  width: -webkit-calc(100% - 130px);
   width: calc(100% - 130px);
 }
@@ -1611 +1668 @@
   top: 8px;
   width: 100%;
+  width: -webkit-calc(100% - 8px);
   width: calc(100% - 8px);
 }
@@ -1635 +1693 @@
 .plugin-meta li {
   border-top: 1px solid #eee;
+  padding: 8px 0;
   padding: 0.5rem 0;
 }
@@ -1650 +1709 @@
 .plugin-meta [rel="tag"] {
   background: #eee;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   color: #000;
@@ -1685 +1745 @@
 
 #wporg-header form input {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
   box-sizing: content-box;
   padding: 3px;
@@ -1690 +1752 @@
 
 #wporg-header .button {
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
@@ -1697 +1760 @@
   background-image: -webkit-gradient(linear, right top, right bottom, from(#2a95c5), to(#21759b));
   background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
-  background-image: -moz-linear-gradient(top, #2a95c5, #21759b);
-  background-image: -ms-linear-gradient(top, #2a95c5, #21759b);
-  background-image: -o-linear-gradient(top, #2a95c5, #21759b);
   background-image: linear-gradient(to bottom, #2a95c5, #21759b);
+  border-bottom-color: #1e6a8d;
   border-color: #21759b;
-  border-bottom-color: #1e6a8d;
+  -webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.5);
   box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.5);
 }
@@ -1710 +1771 @@
   background-image: -webkit-gradient(linear, right top, right bottom, from(#2e9fd2), to(#21759b));
   background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
-  background-image: -moz-linear-gradient(top, #2e9fd2, #21759b);
-  background-image: -ms-linear-gradient(top, #2e9fd2, #21759b);
-  background-image: -o-linear-gradient(top, #2e9fd2, #21759b);
   background-image: linear-gradient(to bottom, #2e9fd2, #21759b);
   border-color: #1b607f;
+  -webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
   box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
   color: #fff;
@@ -1724 +1783 @@
   background-image: -webkit-gradient(linear, right top, right bottom, from(#21759b), to(#278ab7));
   background-image: -webkit-linear-gradient(top, #21759b, #278ab7);
-  background-image: -moz-linear-gradient(top, #21759b, #278ab7);
-  background-image: -ms-linear-gradient(top, #21759b, #278ab7);
-  background-image: -o-linear-gradient(top, #21759b, #278ab7);
   background-image: linear-gradient(to bottom, #21759b, #278ab7);
   border-color: #124560 #2382ae #2382ae #2382ae;
@@ -1733 +1789 @@
   color: rgba(255, 255, 255, 0.95);
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  -webkit-transform: none;
+  -ms-transform: none;
   transform: none;
 }
@@ -1744 +1802 @@
 .site-header {
   background: #0073aa;
+  padding: 16px 0;
   padding: 1rem 0;
   position: relative;
@@ -1766 +1825 @@
   font-weight: 300;
   line-height: 1;
+  margin: 0 0 0 32px;
   margin: 0 0 0 2rem;
   max-width: none;
@@ -1781 +1841 @@
 .site-header .site-description {
   color: rgba(255, 255, 255, 0.8);
+  font-size: 20px;
   font-size: 1.25rem;
   font-weight: 300;
+  margin: -6.4px auto 32px;
   margin: -0.4rem auto 2rem;
   text-align: center;
@@ -1794 +1856 @@
 .site-header .search-form .search-field {
   border: 0;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   font-size: 16px;
@@ -1804 +1867 @@
 .site-header .search-form .search-field + .button-search {
   border-right: none;
+  -webkit-border-radius: 2px 0 0 2px;
   border-radius: 2px 0 0 2px;
   display: none;
@@ -1813 +1877 @@
   background: #006799;
   border-left: 1px solid #006799;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
@@ -1823 +1888 @@
 @media screen and (min-width: 48em) {
   .site-header .search-form .search-field {
+    -webkit-border-radius: 0 2px 2px 0;
     border-radius: 0 2px 2px 0;
     font-size: 10.24px;
     font-size: 0.64rem;
+    width: 126px;
     width: 7rem;
   }
@@ -1836 +1903 @@
 @media screen and (min-width: 60em) {
   .site-header .search-form .search-field {
+    width: 160px;
     width: 10rem;
   }
@@ -1863 +1931 @@
 .home .site-header .search-form .search-field {
   border: none;
+  -webkit-border-radius: 0;
   border-radius: 0;
+  -webkit-box-shadow: none;
   box-shadow: none;
   display: block;
@@ -1877 +1947 @@
   background: transparent;
   border: none;
+  -webkit-box-shadow: none;
   box-shadow: none;
   color: #32373c;
@@ -1892 +1963 @@
   background: transparent;
   border: none;
+  -webkit-transform: none;
+  -ms-transform: none;
   transform: none;
 }
@@ -1917 +1990 @@
   font-size: 1.5625rem;
   font-weight: 400;
+  margin-bottom: 48px;
   margin-bottom: 3rem;
 }
@@ -1925 +1999 @@
   position: absolute;
   left: 0;
+  top: 11.2px;
   top: 0.7rem;
 }
@@ -2043 +2118 @@
   .search .type-plugin .entry,
   .archive .type-plugin .entry {
+    width: -webkit-calc(96% - 128px);
     width: calc(96% - 128px);
   }
@@ -2106 +2182 @@
 .rtl .dashicons-star-half {
   -webkit-transform: rotateY(180deg);
-  -ms-transform: rotateY(180deg);
   transform: rotateY(180deg);
 }
@@ -2116 +2191 @@
 .single .type-plugin .plugin-banner {
   background-position: 50% 50%;
+  -webkit-background-size: 100% 100%;
   background-size: 100%;
   display: inline-block;
@@ -2142 +2218 @@
   float: right;
   height: 96px;
+  margin-left: 16px;
   margin-left: 1rem;
   width: 96px;
@@ -2153 +2230 @@
 
 .single .type-plugin .plugin-header .plugin-thumbnail .plugin-icon {
+  -webkit-background-size: contain !important;
   background-size: contain !important;
   height: 96px !important;
@@ -2233 +2311 @@
   font-size: 1rem;
   font-weight: 600;
+  letter-spacing: 0.16px;
   letter-spacing: 0.01rem;
   text-transform: uppercase;
@@ -2245 +2324 @@
   font-size: 0.8rem;
   font-weight: 600;
+  letter-spacing: 0.8px;
   letter-spacing: 0.05rem;
   text-transform: uppercase;
@@ -2276 +2356 @@
   font-size: 12.8px;
   font-size: 0.8rem;
+  margin-top: 8px;
   margin-top: 0.5rem;
   position: relative;
@@ -2295 +2376 @@
   font-size: 12.8px;
   font-size: 0.8rem;
+  margin-top: 8px;
   margin-top: 0.5rem;
 }
@@ -2345 +2427 @@
   font-size: 1rem;
   font-weight: 600;
+  letter-spacing: 0.16px;
   letter-spacing: 0.01rem;
   margin: 0 0 8px;
@@ -2366 +2449 @@
   }
   .single .type-plugin .entry-content .plugin-reviews .review {
+    width: -webkit-calc(100% - 60px - 1rem);
     width: calc(100% - 60px - 1rem);
   }
@@ -2383 +2467 @@
 .single .type-plugin .entry-content .plugin-developers li {
   display: inline-block;
+  margin: 0 0 16px 4%;
   margin: 0 0 1rem 4%;
   vertical-align: top;
@@ -2393 +2478 @@
 
 .single .type-plugin .entry-content .avatar {
+  -webkit-border-radius: 50%;
   border-radius: 50%;
   margin-left: 10px;
@@ -2444 +2530 @@
 
 .error404 .page-content .logo-swing .dashicons-wordpress {
+  right: 0;
+  max-width: none;
   position: absolute;
   top: 0;
-  right: 0;
-  max-width: none;
   width: 160px;
   width: 10rem;
@@ -2459 +2545 @@
   font-size: 160px;
   font-size: 10rem;
+}
+
+@-webkit-keyframes hinge {
+  10% {
+    width: 180px;
+    height: 180px;
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  15% {
+    width: 185px;
+    height: 185px;
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  20% {
+    width: 180px;
+    height: 180px;
+    -webkit-transform: rotate3d(0, 0, 1, -5deg);
+    transform: rotate3d(0, 0, 1, -5deg);
+  }
+  40% {
+    -webkit-transform-origin: top right;
+    transform-origin: top right;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, -40deg);
+    transform: rotate3d(0, 0, 1, -40deg);
+    -webkit-transform-origin: top right;
+    transform-origin: top right;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+  40%, 80% {
+    -webkit-transform: rotate3d(0, 0, 1, -60deg);
+    transform: rotate3d(0, 0, 1, -60deg);
+    -webkit-transform-origin: top right;
+    transform-origin: top right;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
 }
 
@@ -2465 +2600 @@
     width: 180px;
     height: 180px;
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
     transform: rotate3d(0, 0, 1, 0deg);
   }
@@ -2470 +2606 @@
     width: 185px;
     height: 185px;
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
     transform: rotate3d(0, 0, 1, 0deg);
   }
@@ -2475 +2612 @@
     width: 180px;
     height: 180px;
+    -webkit-transform: rotate3d(0, 0, 1, -5deg);
     transform: rotate3d(0, 0, 1, -5deg);
   }
   40% {
+    -webkit-transform-origin: top right;
     transform-origin: top right;
+    -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
   }
   60% {
+    -webkit-transform: rotate3d(0, 0, 1, -40deg);
     transform: rotate3d(0, 0, 1, -40deg);
+    -webkit-transform-origin: top right;
     transform-origin: top right;
+    -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
   }
   40%, 80% {
+    -webkit-transform: rotate3d(0, 0, 1, -60deg);
     transform: rotate3d(0, 0, 1, -60deg);
+    -webkit-transform-origin: top right;
     transform-origin: top right;
+    -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     opacity: 1;
   }
   to {
+    -webkit-transform: translate3d(0, 700px, 0);
     transform: translate3d(0, 700px, 0);
     opacity: 0;
@@ -2499 +2646 @@
 
 .hinge {
+  -webkit-animation-duration: 2s;
   animation-duration: 2s;
+  -webkit-animation-name: hinge;
   animation-name: hinge;
 }
@@ -2537 +2686 @@
   font-size: 1rem;
   font-weight: 600;
+  letter-spacing: 0.16px;
   letter-spacing: 0.01rem;
   text-transform: uppercase;
@@ -2609 +2759 @@
 .pagination .page-numbers {
   border: 1px solid #EEE;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   color: #0073aa;
@@ -2617 +2768 @@
   margin: 0;
   padding: 4px 8px;
+  -webkit-transition: background .2s ease;
   transition: background .2s ease;
 }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/css/style.css

@@ -110 +110 @@
 
 hr {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
   box-sizing: content-box;
   height: 0;
@@ -170 +172 @@
 input[type="checkbox"],
 input[type="radio"] {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0;
@@ -242 +246 @@
   font-family: inherit;
   line-height: 1.5;
+  margin: 32px 0 16px;
   margin: 2rem 0 1rem;
 }
@@ -256 +261 @@
   color: #0073aa;
   font-weight: 600;
+  letter-spacing: 0.8px;
   letter-spacing: 0.05rem;
   text-transform: uppercase;
@@ -285 +291 @@
   font-size: 1rem;
   font-weight: 600;
+  letter-spacing: 0.16px;
   letter-spacing: 0.01rem;
   text-transform: uppercase;
@@ -293 +300 @@
   font-size: 0.8rem;
   font-weight: 600;
-  letter-spacing: 0.05rem;
+  letter-spacing: 0.8px;
   text-transform: uppercase;
 }
@@ -303 +310 @@
 p.subheading {
   color: #82878c;
+  font-size: 20px;
   font-size: 1.25rem;
   font-weight: 300;
-  margin: -.4rem auto 2rem;
+  margin: -6.4px auto 32px;
+  margin: -0.4rem auto 2rem;
   text-align: center;
 }
 
 p.intro {
+  font-size: 20px;
   font-size: 1.25rem;
 }
 
 p.aside {
+  font-size: 12.8px;
   font-size: 0.8rem;
 }
 
 p.note {
+  font-size: 10.24px;
   font-size: 0.64rem;
+  letter-spacing: 0.16px;
   letter-spacing: 0.01rem;
   max-width: 18.1898940355rem;
@@ -371 +384 @@
 --------------------------------------------------------------*/
 html {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
@@ -378 +393 @@
 *:after {
   /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+  -webkit-box-sizing: inherit;
+  -moz-box-sizing: inherit;
   box-sizing: inherit;
 }
@@ -398 +415 @@
   border: 0;
   height: 2px;
+  margin: 80px auto;
   margin: 5rem auto;
 }
@@ -442 +460 @@
   background: #fff;
   border-left: 4px solid #fff;
+  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
   margin: 1em 0;
@@ -455 +474 @@
 
 .notice.notice-alt {
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
@@ -495 +515 @@
 
 .locale-banner {
-  padding: .5rem;
   background: #C7E8CA;
+  padding: 8px;
+  padding: 0.5rem;
   text-align: center;
   font-size: 12.8px;
@@ -504 +525 @@
 @media (min-width: 67rem) {
   .locale-banner {
+    margin: 16px auto 0;
     margin: 1rem auto 0;
     max-width: 960px;
@@ -519 +541 @@
 .button-secondary,
 .plugin-upload-form .button-primary {
-  -webkit-appearance: none;
   border: 1px solid;
+  -webkit-border-radius: 3px;
   border-radius: 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
   box-sizing: border-box;
   cursor: pointer;
   display: inline-block;
   font-size: 0.8rem;
+  height: 1.5625rem;
   line-height: 1;
-  height: 1.5625rem;
   margin: 0;
-  padding: 0 .8rem;
+  padding: 0 12.8px;
+  padding: 0 0.8rem;
   text-decoration: none;
   white-space: nowrap;
+  -webkit-appearance: none;
 }
 
@@ -547 +573 @@
   height: 1.953125rem;
   line-height: 1;
+  padding: 0 16px;
   padding: 0 1rem;
 }
@@ -556 +583 @@
   height: 1.25rem;
   line-height: 1;
-  padding: 0 .5rem;
+  padding: 0 8px;
+  padding: 0 0.5rem;
 }
 
@@ -591 +619 @@
   background: none;
   border: none;
+  -webkit-box-shadow: none;
   box-shadow: none;
   padding: 0 2px 1px;
@@ -604 +633 @@
   background: #f7f7f7;
   border-color: #cccccc;
+  -webkit-box-shadow: 0 1px 0 #cccccc;
   box-shadow: 0 1px 0 #cccccc;
   color: #555;
@@ -629 +659 @@
 .button-link:focus {
   border-color: #5b9dd9;
+  -webkit-box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
   box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
 }
@@ -638 +669 @@
   background: #eee;
   border-color: #999;
+  -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
   box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
+  -webkit-transform: translateY(1px);
+  -ms-transform: translateY(1px);
   transform: translateY(1px);
 }
@@ -644 +678 @@
 .button.active:focus {
   border-color: #5b9dd9;
+  -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 115, 170, 0.8);
   box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5), 0 0 3px rgba(0, 115, 170, 0.8);
 }
@@ -656 +691 @@
   background: #f7f7f7 !important;
   border-color: #ddd !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
   color: #a0a5aa !important;
   cursor: default;
-  box-shadow: none !important;
   text-shadow: 0 1px 0 #fff !important;
+  -webkit-transform: none !important;
+  -ms-transform: none !important;
   transform: none !important;
 }
@@ -667 +705 @@
   background: none;
   border: 0;
+  -webkit-border-radius: 0;
   border-radius: 0;
+  -webkit-box-shadow: none;
   box-shadow: none;
   cursor: pointer;
@@ -687 +727 @@
   background: #0085ba;
   border-color: #0073aa #006799 #006799;
+  -webkit-box-shadow: 0 1px 0 #006799;
   box-shadow: 0 1px 0 #006799;
   color: #fff;
@@ -704 +745 @@
   background: #008ec2;
   border-color: #006799;
+  -webkit-box-shadow: 0 1px 0 #006799;
   box-shadow: 0 1px 0 #006799;
   color: #fff;
@@ -713 +755 @@
 .plugin-upload-form .button-primary.focus,
 .plugin-upload-form .button-primary:focus {
+  -webkit-box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db;
   box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db;
 }
@@ -727 +770 @@
   background: #0073aa;
   border-color: #006799;
+  -webkit-box-shadow: inset 0 2px 0 #006799;
   box-shadow: inset 0 2px 0 #006799;
   vertical-align: top;
@@ -740 +784 @@
   background: #008ec2 !important;
   border-color: #007cb2 !important;
+  -webkit-box-shadow: none !important;
   box-shadow: none !important;
   color: #66c6e4 !important;
@@ -749 +794 @@
 .download-button.button.button-hero,
 .plugin-upload-form .button-primary.button.button-hero {
+  -webkit-box-shadow: 0 2px 0 #006799;
   box-shadow: 0 2px 0 #006799;
 }
@@ -761 +807 @@
 .plugin-upload-form .button-primary.button.button-hero.active:focus,
 .plugin-upload-form .button-primary.button.button-hero:active {
+  -webkit-box-shadow: inset 0 3px 0 #006799;
   box-shadow: inset 0 3px 0 #006799;
 }
@@ -767 +814 @@
   background: #008ec2 !important;
   border-color: #007cb2 !important;
+  -webkit-box-shadow: none !important;
   box-shadow: none !important;
   color: #66c6e4 !important;
@@ -785 +833 @@
 
 .button-group > .button {
+  -webkit-border-radius: 0;
+  border-radius: 0;
   display: inline-block;
-  border-radius: 0;
   margin-right: -1px;
   z-index: 10;
@@ -800 +849 @@
 
 .button-group > .button:first-child {
+  -webkit-border-radius: 3px 0 0 3px;
   border-radius: 3px 0 0 3px;
 }
 
 .button-group > .button:last-child {
+  -webkit-border-radius: 0 3px 3px 0;
   border-radius: 0 3px 3px 0;
 }
@@ -857 +908 @@
 select,
 textarea {
-  -webkit-appearance: none;
   background-color: #fff;
   border: 1px solid #ddd;
@@ -865 +915 @@
   -webkit-transition: 0.05s border-color ease-in-out;
   transition: 0.05s border-color ease-in-out;
+  -webkit-appearance: none;
 }
 
@@ -973 +1024 @@
   float: left;
   font: normal 21px/1 dashicons;
+  vertical-align: middle;
+  width: 16px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   speak: none;
-  vertical-align: middle;
-  width: 16px;
 }
 
@@ -1010 +1061 @@
 
 /* Search */
-input[type="search"] {
-  -webkit-appearance: textfield;
-}
-
 input[type="search"]::-webkit-search-decoration {
   display: none;
@@ -1150 +1197 @@
 
 .plugin-upload-form legend {
+  margin: 16px 0;
   margin: 1rem 0;
 }
@@ -1155 +1203 @@
 .plugin-upload-form .category-checklist {
   list-style-type: none;
+  margin: 0 0 32px;
   margin: 0 0 2rem;
 }
@@ -1160 +1209 @@
 .plugin-upload-form .category-checklist li {
   float: left;
+  padding: 8px 0;
   padding: 0.5rem 0;
   width: 50%;
@@ -1247 +1297 @@
 
 .main-navigation ul ul {
+  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
   float: left;
+  left: -999em;
   position: absolute;
   top: 1.5em;
-  left: -999em;
   z-index: 99999;
 }
@@ -1304 +1355 @@
 
 .menu-toggle {
-  -webkit-appearance: none;
   background: transparent;
   border: none;
@@ -1313 +1363 @@
   height: 3.5rem;
   overflow: hidden;
+  position: absolute;
+  right: 16px;
+  right: 1rem;
+  top: -58px;
   width: 56px;
   width: 3.5rem;
-  position: absolute;
-  top: -58px;
-  right: 1rem;
+  -webkit-appearance: none;
 }
 
@@ -1379 +1431 @@
 .screen-reader-text {
   clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
   position: absolute !important;
-  height: 1px;
   width: 1px;
-  overflow: hidden;
 }
 
 .screen-reader-text:focus {
   background-color: #f1f1f1;
+  -webkit-border-radius: 3px;
   border-radius: 3px;
+  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
   box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
   clip: auto !important;
@@ -1517 +1571 @@
   position: absolute;
   right: 0;
+  top: 4.8px;
   top: 0.3rem;
 }
@@ -1539 +1594 @@
 .plugin-ratings .ratings-list {
   list-style-type: none;
+  margin: 16px 0;
   margin: 1rem 0;
   padding: 0;
@@ -1564 +1620 @@
   background-color: #ececec;
   width: 58%;
+  width: -webkit-calc(100% - 130px);
   width: calc(100% - 130px);
 }
@@ -1611 +1668 @@
   top: 8px;
   width: 100%;
+  width: -webkit-calc(100% - 8px);
   width: calc(100% - 8px);
 }
@@ -1635 +1693 @@
 .plugin-meta li {
   border-top: 1px solid #eee;
+  padding: 8px 0;
   padding: 0.5rem 0;
 }
@@ -1650 +1709 @@
 .plugin-meta [rel="tag"] {
   background: #eee;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   color: #000;
@@ -1685 +1745 @@
 
 #wporg-header form input {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
   box-sizing: content-box;
   padding: 3px;
@@ -1690 +1752 @@
 
 #wporg-header .button {
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
@@ -1697 +1760 @@
   background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
   background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
-  background-image: -moz-linear-gradient(top, #2a95c5, #21759b);
-  background-image: -ms-linear-gradient(top, #2a95c5, #21759b);
-  background-image: -o-linear-gradient(top, #2a95c5, #21759b);
   background-image: linear-gradient(to bottom, #2a95c5, #21759b);
+  border-bottom-color: #1e6a8d;
   border-color: #21759b;
-  border-bottom-color: #1e6a8d;
+  -webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.5);
   box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.5);
 }
@@ -1710 +1771 @@
   background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
   background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
-  background-image: -moz-linear-gradient(top, #2e9fd2, #21759b);
-  background-image: -ms-linear-gradient(top, #2e9fd2, #21759b);
-  background-image: -o-linear-gradient(top, #2e9fd2, #21759b);
   background-image: linear-gradient(to bottom, #2e9fd2, #21759b);
   border-color: #1b607f;
+  -webkit-box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
   box-shadow: inset 0 1px 0 rgba(120, 200, 230, 0.6);
   color: #fff;
@@ -1724 +1783 @@
   background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7));
   background-image: -webkit-linear-gradient(top, #21759b, #278ab7);
-  background-image: -moz-linear-gradient(top, #21759b, #278ab7);
-  background-image: -ms-linear-gradient(top, #21759b, #278ab7);
-  background-image: -o-linear-gradient(top, #21759b, #278ab7);
   background-image: linear-gradient(to bottom, #21759b, #278ab7);
   border-color: #124560 #2382ae #2382ae #2382ae;
@@ -1733 +1789 @@
   color: rgba(255, 255, 255, 0.95);
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+  -webkit-transform: none;
+  -ms-transform: none;
   transform: none;
 }
@@ -1744 +1802 @@
 .site-header {
   background: #0073aa;
+  padding: 16px 0;
   padding: 1rem 0;
   position: relative;
@@ -1766 +1825 @@
   font-weight: 300;
   line-height: 1;
+  margin: 0 32px 0 0;
   margin: 0 2rem 0 0;
   max-width: none;
@@ -1781 +1841 @@
 .site-header .site-description {
   color: rgba(255, 255, 255, 0.8);
+  font-size: 20px;
   font-size: 1.25rem;
   font-weight: 300;
+  margin: -6.4px auto 32px;
   margin: -0.4rem auto 2rem;
   text-align: center;
@@ -1794 +1856 @@
 .site-header .search-form .search-field {
   border: 0;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   font-size: 16px;
@@ -1804 +1867 @@
 .site-header .search-form .search-field + .button-search {
   border-left: none;
+  -webkit-border-radius: 0 2px 2px 0;
   border-radius: 0 2px 2px 0;
   display: none;
@@ -1813 +1877 @@
   background: #006799;
   border-right: 1px solid #006799;
+  -webkit-box-shadow: none;
   box-shadow: none;
 }
@@ -1823 +1888 @@
 @media screen and (min-width: 48em) {
   .site-header .search-form .search-field {
+    -webkit-border-radius: 2px 0 0 2px;
     border-radius: 2px 0 0 2px;
     font-size: 10.24px;
     font-size: 0.64rem;
+    width: 126px;
     width: 7rem;
   }
@@ -1836 +1903 @@
 @media screen and (min-width: 60em) {
   .site-header .search-form .search-field {
+    width: 160px;
     width: 10rem;
   }
@@ -1863 +1931 @@
 .home .site-header .search-form .search-field {
   border: none;
+  -webkit-border-radius: 0;
   border-radius: 0;
+  -webkit-box-shadow: none;
   box-shadow: none;
   display: block;
@@ -1877 +1947 @@
   background: transparent;
   border: none;
+  -webkit-box-shadow: none;
   box-shadow: none;
   color: #32373c;
@@ -1892 +1963 @@
   background: transparent;
   border: none;
+  -webkit-transform: none;
+  -ms-transform: none;
   transform: none;
 }
@@ -1917 +1990 @@
   font-size: 1.5625rem;
   font-weight: 400;
+  margin-bottom: 48px;
   margin-bottom: 3rem;
 }
@@ -1925 +1999 @@
   position: absolute;
   right: 0;
+  top: 11.2px;
   top: 0.7rem;
 }
@@ -2043 +2118 @@
   .search .type-plugin .entry,
   .archive .type-plugin .entry {
+    width: -webkit-calc(96% - 128px);
     width: calc(96% - 128px);
   }
@@ -2106 +2182 @@
 .rtl .dashicons-star-half {
   -webkit-transform: rotateY(180deg);
-  -ms-transform: rotateY(180deg);
   transform: rotateY(180deg);
 }
@@ -2116 +2191 @@
 .single .type-plugin .plugin-banner {
   background-position: 50% 50%;
+  -webkit-background-size: 100% 100%;
   background-size: 100%;
   display: inline-block;
@@ -2142 +2218 @@
   float: left;
   height: 96px;
+  margin-right: 16px;
   margin-right: 1rem;
   width: 96px;
@@ -2153 +2230 @@
 
 .single .type-plugin .plugin-header .plugin-thumbnail .plugin-icon {
+  -webkit-background-size: contain !important;
   background-size: contain !important;
   height: 96px !important;
@@ -2233 +2311 @@
   font-size: 1rem;
   font-weight: 600;
+  letter-spacing: 0.16px;
   letter-spacing: 0.01rem;
   text-transform: uppercase;
@@ -2245 +2324 @@
   font-size: 0.8rem;
   font-weight: 600;
+  letter-spacing: 0.8px;
   letter-spacing: 0.05rem;
   text-transform: uppercase;
@@ -2276 +2356 @@
   font-size: 12.8px;
   font-size: 0.8rem;
+  margin-top: 8px;
   margin-top: 0.5rem;
   position: relative;
@@ -2295 +2376 @@
   font-size: 12.8px;
   font-size: 0.8rem;
+  margin-top: 8px;
   margin-top: 0.5rem;
 }
@@ -2345 +2427 @@
   font-size: 1rem;
   font-weight: 600;
+  letter-spacing: 0.16px;
   letter-spacing: 0.01rem;
   margin: 0 0 8px;
@@ -2366 +2449 @@
   }
   .single .type-plugin .entry-content .plugin-reviews .review {
+    width: -webkit-calc(100% - 60px - 1rem);
     width: calc(100% - 60px - 1rem);
   }
@@ -2383 +2467 @@
 .single .type-plugin .entry-content .plugin-developers li {
   display: inline-block;
+  margin: 0 4% 16px 0;
   margin: 0 4% 1rem 0;
   vertical-align: top;
@@ -2393 +2478 @@
 
 .single .type-plugin .entry-content .avatar {
+  -webkit-border-radius: 50%;
   border-radius: 50%;
   margin-right: 10px;
@@ -2444 +2530 @@
 
 .error404 .page-content .logo-swing .dashicons-wordpress {
+  left: 0;
+  max-width: none;
   position: absolute;
   top: 0;
-  left: 0;
-  max-width: none;
   width: 160px;
   width: 10rem;
@@ -2459 +2545 @@
   font-size: 160px;
   font-size: 10rem;
+}
+
+@-webkit-keyframes hinge {
+  10% {
+    width: 180px;
+    height: 180px;
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  15% {
+    width: 185px;
+    height: 185px;
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  20% {
+    width: 180px;
+    height: 180px;
+    -webkit-transform: rotate3d(0, 0, 1, 5deg);
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+  40% {
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+  60% {
+    -webkit-transform: rotate3d(0, 0, 1, 40deg);
+    transform: rotate3d(0, 0, 1, 40deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+  }
+  40%, 80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
+    transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
+    transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out;
+    opacity: 1;
+  }
+  to {
+    -webkit-transform: translate3d(0, 700px, 0);
+    transform: translate3d(0, 700px, 0);
+    opacity: 0;
+  }
 }
 
@@ -2465 +2600 @@
     width: 180px;
     height: 180px;
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
     transform: rotate3d(0, 0, 1, 0deg);
   }
@@ -2470 +2606 @@
     width: 185px;
     height: 185px;
+    -webkit-transform: rotate3d(0, 0, 1, 0deg);
     transform: rotate3d(0, 0, 1, 0deg);
   }
@@ -2475 +2612 @@
     width: 180px;
     height: 180px;
+    -webkit-transform: rotate3d(0, 0, 1, 5deg);
     transform: rotate3d(0, 0, 1, 5deg);
   }
   40% {
+    -webkit-transform-origin: top left;
     transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
   }
   60% {
+    -webkit-transform: rotate3d(0, 0, 1, 40deg);
     transform: rotate3d(0, 0, 1, 40deg);
+    -webkit-transform-origin: top left;
     transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
   }
   40%, 80% {
+    -webkit-transform: rotate3d(0, 0, 1, 60deg);
     transform: rotate3d(0, 0, 1, 60deg);
+    -webkit-transform-origin: top left;
     transform-origin: top left;
+    -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     opacity: 1;
   }
   to {
+    -webkit-transform: translate3d(0, 700px, 0);
     transform: translate3d(0, 700px, 0);
     opacity: 0;
@@ -2499 +2646 @@
 
 .hinge {
+  -webkit-animation-duration: 2s;
   animation-duration: 2s;
+  -webkit-animation-name: hinge;
   animation-name: hinge;
 }
@@ -2537 +2686 @@
   font-size: 1rem;
   font-weight: 600;
+  letter-spacing: 0.16px;
   letter-spacing: 0.01rem;
   text-transform: uppercase;
@@ -2609 +2759 @@
 .pagination .page-numbers {
   border: 1px solid #EEE;
+  -webkit-border-radius: 2px;
   border-radius: 2px;
   color: #0073aa;
@@ -2617 +2768 @@
   margin: 0;
   padding: 4px 8px;
+  -webkit-transition: background .2s ease;
   transition: background .2s ease;
 }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/package.json

@@ -5 +5 @@
   "author": "wordpressdotorg",
   "license": "GPL-2.0",
+  "repository": {
+    "type": "svn",
+    "url": "https://meta.svn.wordpress.org/sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/"
+  },
   "devDependencies": {
+    "autoprefixer": "^6.3.6",
     "grunt": "^1.0.1",
     "grunt-contrib-jshint": "^1.0.0",
     "grunt-contrib-watch": "^1.0.0",
+    "grunt-postcss": "^0.8.0",
     "grunt-rtlcss": "^2.0.1",
     "grunt-sass": "^1.2.0"

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/elements/_banners.scss

@@ +1 @@
+@import "../variables-site/variables-site";
+
 .locale-banner {
-    padding: .5rem;
     background: $color__green;
+    padding: 8px;
+    padding: 0.5rem;
     text-align: center;
     @include font-size(ms-unitless(ms(-2)));
 }
 
-@media (min-width: 67rem) {
+@media ( min-width: 67rem ) {
     .locale-banner {
-      margin: 1rem auto 0;
-      max-width: $size__site-main;
+        margin: 16px auto 0;
+        margin: 1rem auto 0;
+        max-width: $size__site-main;
     }
 }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/elements/_elements.scss

@@ -28 +28 @@
     border: 0;
     height: 2px;
+    margin: 80px auto;
     margin: 5rem auto;
 }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/forms/_buttons.scss

@@ -47 +47 @@
 .button-secondary,
 .plugin-upload-form .button-primary {
-    -webkit-appearance: none;
     border: 1px solid;
     border-radius: 3px;
@@ -54 +53 @@
     display: inline-block;
     font-size: ms(-2);
+    height: ms(4);
     line-height: 1;
-    height: ms(4);
     margin: 0;
-    padding: 0 .8rem;
+    padding: 0 12.8px;
+    padding: 0 0.8rem;
     text-decoration: none;
     white-space: nowrap;
+    -webkit-appearance: none;
 }
 
@@ -75 +76 @@
     height: ms(6);
     line-height: 1;
+    padding: 0 16px;
     padding: 0 1rem;
 }
@@ -83 +85 @@
     height: ms(2);
     line-height: 1;
-    padding: 0 .5rem;
+    padding: 0 8px;
+    padding: 0 0.5rem;
 }
 
@@ -185 +188 @@
     background: #f7f7f7 !important;
     border-color: #ddd !important;
+    box-shadow: none !important;
     color: #a0a5aa !important;
     cursor: default;
-    box-shadow: none !important;
     text-shadow: 0 1px 0 #fff !important;
     transform: none !important;
@@ -294 +297 @@
 
 .button-group > .button {
+    border-radius: 0;
     display: inline-block;
-    border-radius: 0;
     margin-right: -1px;
     z-index: 10;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/forms/_fields.scss

@@ -4 +4 @@
 input,
 textarea {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
@@ -29 +27 @@
 select,
 textarea {
-    -webkit-appearance: none;
     background-color: #fff;
     border: 1px solid $color__border-input;
-    -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
     box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.07 );
     color: $color__text-input;
-    -webkit-transition: 0.05s border-color ease-in-out;
     transition: 0.05s border-color ease-in-out;
+    -webkit-appearance: none;
 
     &:focus {
@@ -64 +60 @@
 textarea:focus {
     border-color: #5b9dd9;
-    -webkit-box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
     box-shadow: 0 0 2px rgba( 30, 140, 190, 0.8 );
 }
@@ -92 +87 @@
     background: #fff;
     border: 1px solid #b4b9be;
-    -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
     box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.1 );
     clear: none;
@@ -104 +98 @@
     padding: 0 !important;
     text-align: center;
-    -webkit-transition: .05s border-color ease-in-out;
     transition: .05s border-color ease-in-out;
     vertical-align: middle;
@@ -115 +108 @@
 
 input[type="radio"] {
-    -webkit-border-radius: 50%;
     border-radius: 50%;
     line-height: 10px;
@@ -126 +118 @@
     float: left;
     font: normal 21px/1 dashicons;
+    vertical-align: middle;
+    width: 16px;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     speak: none;
-    vertical-align: middle;
-    width: 16px;
 }
 
@@ -142 +134 @@
 input[type="radio"]:checked:before {
     background-color: #1e8cbe;
-    -webkit-border-radius: 50px;
     border-radius: 50px;
     content: "\2022";
@@ -163 +154 @@
 
 /* Search */
-input[type="search"] {
-    -webkit-appearance: textfield;
-}
-
 input[type="search"]::-webkit-search-decoration {
     display: none;
@@ -187 +174 @@
 input,
 select {
-    -webkit-border-radius: 0;
     border-radius: 0;
     font-size: 16px;
@@ -227 +213 @@
     background: rgba( 255, 255, 255, 0.5 );
     border-color: rgba( 222, 222, 222, 0.75 );
-    -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
     box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 );
     color: rgba( 51, 51, 51, 0.5 );
@@ -237 +222 @@
 input[type="range"].disabled {
     background: none;
-    -webkit-box-shadow: none;
     box-shadow: none;
 }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/forms/_upload.scss

@@ -7 +7 @@
 
     legend {
+        margin: 16px 0;
         margin: 1rem 0;
     }
@@ -13 +14 @@
         @extend .clear;
         list-style-type: none;
+        margin: 0 0 32px;
         margin: 0 0 2rem;
 
         li {
             float: left;
+            padding: 8px 0;
             padding: 0.5rem 0;
             width: 50%;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/modules/_accessibility.scss

@@ -2 +2 @@
 .screen-reader-text {
     clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
     position: absolute !important;
-    height: 1px;
     width: 1px;
-    overflow: hidden;
 
     &:focus {

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/navigation/_menus.scss

@@ -18 +18 @@
             box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
             float: left;
+            left: -999em;
             position: absolute;
             top: 1.5em;
-            left: -999em;
             z-index: 99999;
 
@@ -95 +95 @@
 
 .menu-toggle {
-    -webkit-appearance: none;
     background: transparent;
     border: none;
@@ -103 +102 @@
     height: 3.5rem;
     overflow: hidden;
+    position: absolute;
+    right: 16px;
+    right: 1rem;
+    top: -58px;
     width: 56px;
     width: 3.5rem;
-    position: absolute;
-    top: -58px;
-    right: 1rem;
+    -webkit-appearance: none;
 
     .toggled &:before {

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/_header.scss

@@ -21 +21 @@
     .download-button {
         background-color: #21759b;
-        background-image: -webkit-gradient(linear, left top, left bottom, from(#2a95c5), to(#21759b));
-        background-image: -webkit-linear-gradient(top, #2a95c5, #21759b);
-        background-image:    -moz-linear-gradient(top, #2a95c5, #21759b);
-        background-image:     -ms-linear-gradient(top, #2a95c5, #21759b);
-        background-image:      -o-linear-gradient(top, #2a95c5, #21759b);
-        background-image:   linear-gradient(to bottom, #2a95c5, #21759b);
+        background-image: linear-gradient(to bottom, #2a95c5, #21759b);
+        border-bottom-color: #1e6a8d;
         border-color: #21759b;
-        border-bottom-color: #1e6a8d;
         box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 );
 
@@ -34 +29 @@
         &:focus {
             background-color: #278ab7;
-            background-image: -webkit-gradient(linear, left top, left bottom, from(#2e9fd2), to(#21759b));
-            background-image: -webkit-linear-gradient(top, #2e9fd2, #21759b);
-            background-image:    -moz-linear-gradient(top, #2e9fd2, #21759b);
-            background-image:     -ms-linear-gradient(top, #2e9fd2, #21759b);
-            background-image:      -o-linear-gradient(top, #2e9fd2, #21759b);
-            background-image:   linear-gradient(to bottom, #2e9fd2, #21759b);
+            background-image: linear-gradient(to bottom, #2e9fd2, #21759b);
             border-color: #1b607f;
             box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
@@ -48 +38 @@
         &:active {
             background: #1b607f;
-            background-image: -webkit-gradient(linear, left top, left bottom, from(#21759b), to(#278ab7));
-            background-image: -webkit-linear-gradient(top, #21759b, #278ab7);
-            background-image: -moz-linear-gradient(top, #21759b, #278ab7);
-            background-image: -ms-linear-gradient(top, #21759b, #278ab7);
-            background-image: -o-linear-gradient(top, #21759b, #278ab7);
             background-image: linear-gradient(to bottom, #21759b, #278ab7);
             border-color: #124560 #2382ae #2382ae #2382ae;
-            -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
             box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
             color: rgba(255,255,255,0.95);
@@ -72 +56 @@
 .site-header {
     background: $color__wp-blue;
+    padding: 16px 0;
     padding: 1rem 0;
     position: relative;
@@ -90 +75 @@
         font-weight: 300;
         line-height: 1;
+        margin: 0 32px 0 0;
         margin: 0 2rem 0 0;
         max-width: none;
@@ -107 +93 @@
     .site-description {
         color: rgba( 255, 255, 255, 0.8);
-        font-size: ms(2);
+        @include font-size(ms-unitless(ms(2)));
         font-weight: 300;
+        margin: -6.4px auto 32px;
         margin: -0.4rem auto 2rem;
         text-align: center;
@@ -148 +135 @@
                 border-radius: 2px 0 0 2px;
                 @include font-size( ms-unitless( ms(-4) ) );
+                width: 126px;
                 width: 7rem;
             }
@@ -159 +147 @@
         @media screen and ( min-width: 60em ) {
             .search-field {
+                width: 160px;
                 width: 10rem;
             }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_404.scss

@@ -27 +27 @@
 
             .dashicons-wordpress {
+                left: 0;
+                max-width: none;
                 position: absolute;
                 top: 0;
-                left: 0;
-                max-width: none;
                 width: 160px;
                 width: 10rem;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_front-page.scss

@@ -18 +18 @@
         @include font-size( ms-unitless( ms(4) ) );
         font-weight: 400;
+        margin-bottom: 48px;
         margin-bottom: 3rem;
     }
@@ -25 +26 @@
         position: absolute;
         right: 0;
+        top: 11.2px;
         top: 0.7rem;
     }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_page.scss

@@ -29 +29 @@
             @include font-size(ms-unitless(ms(0)));
             font-weight: 600;
+            letter-spacing: 0.16px;
             letter-spacing: 0.01rem;
             text-transform: uppercase;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_plugin-index.scss

@@ -78 +78 @@
 // Flip the half star for rating.
 .rtl .dashicons-star-half {
-    -webkit-transform: rotateY(180deg);
-    -ms-transform: rotateY(180deg);
     transform: rotateY(180deg);
 }

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_plugin-single.scss

@@ -3 +3 @@
 .single .type-plugin {
     @extend .clear;
+
     .plugin-notice {
         margin-top: 0;
@@ -32 +33 @@
             float: left;
             height: 96px;
+            margin-right: 16px;
             margin-right: 1rem;
             width: 96px;
@@ -121 +123 @@
                 @include font-size( ms-unitless( ms(0) ) );
                 font-weight: 600;
+                letter-spacing: 0.16px;
                 letter-spacing: 0.01rem;
                 text-transform: uppercase;
@@ -132 +135 @@
                 @include font-size( ms-unitless( ms(-2) ) );
                 font-weight: 600;
+                letter-spacing: 0.8px;
                 letter-spacing: 0.05rem;
                 text-transform: uppercase;
@@ -164 +168 @@
             cursor: pointer;
             @include font-size( ms-unitless( ms(-2) ) );
+            margin-top: 8px;
             margin-top: 0.5rem;
             position: relative;
@@ -182 +187 @@
             display: inline-block;
             @include font-size( ms-unitless( ms(-2) ) );
+            margin-top: 8px;
             margin-top: 0.5rem;
 
@@ -230 +236 @@
                 @include font-size( ms-unitless( ms(0) ) );
                 font-weight: 600;
+                letter-spacing: 0.16px;
                 letter-spacing: 0.01rem;
                 margin: 0 0 8px;
@@ -272 +279 @@
             li {
                 display: inline-block;
+                margin: 0 4% 16px 0;
                 margin: 0 4% 1rem 0;
                 vertical-align: top;

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/secondary/_widgets.scss

@@ -44 +44 @@
         position: absolute;
         right: 0;
+        top: 4.8px;
         top: 0.3rem;
 
@@ -65 +66 @@
     .ratings-list {
         list-style-type: none;
+        margin: 16px 0;
         margin: 1rem 0;
         padding: 0;
@@ -157 +159 @@
     li {
         border-top: 1px solid #eee;
+        padding: 8px 0;
         padding: 0.5rem 0;
 

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/typography/_copy.scss

@@ -6 +6 @@
     &.subheading {
         color: #82878c;
-        font-size: ms(2);
+        @include font-size( ms-unitless( ms(2) ) );
         font-weight: 300;
-        margin: -.4rem auto 2rem;
+        margin: -6.4px auto 32px;
+        margin: -0.4rem auto 2rem;
         text-align: center;
     }
+
     &.intro {
-        font-size: ms(2);
+        @include font-size( ms-unitless( ms(2) ) );
     }
+
     &.aside {
-        font-size: ms(-2);
+        @include font-size( ms-unitless( ms(-2) ) );
     }
+
     &.note {
-        font-size: ms(-4);
+        @include font-size( ms-unitless( ms(-4) ) );
+        letter-spacing: 0.16px;
         letter-spacing: 0.01rem;
         max-width: ms(26);

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/typography/_headings.scss

@@ -8 +8 @@
     font-family: inherit;
     line-height: $font__line-height-body;
+    margin: 32px 0 16px;
     margin: 2rem 0 1rem;
 }
@@ -20 +21 @@
     color: $color__link;
     font-weight: 600;
+    letter-spacing: 0.8px;
     letter-spacing: 0.05rem;
     text-transform: uppercase;
@@ -47 +49 @@
     @include font-size( ms-unitless( ms(0) ) );
     font-weight: 600;
+    letter-spacing: 0.16px;
     letter-spacing: 0.01rem;
     text-transform: uppercase;
@@ -54 +57 @@
     @include font-size( ms-unitless( ms(-2) ) );
     font-weight: 600;
-    letter-spacing: 0.05rem;
+    letter-spacing: 0.8px;
     text-transform: uppercase;
 }