WordPress.org
Get WordPress

Making WordPress.org

Changeset 3843


Ignore:
Timestamp:
08/23/2016 05:22:16 PM (8 years ago)
Author:
obenland
Message:

Plugin Directory: Add focus styles to search button.

Also consolidates search form stiles in its own module.

See #1841.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins
Files:
1 added
5 edited

Legend:

Unmodified
Added
Removed

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

    r3832 r3843  
    12181218}
    12191219
     1220.search-form {
     1221  font-size: 0;
     1222  margin-bottom: 32px;
     1223  margin-bottom: 2rem;
     1224  max-width: 100%;
     1225  position: relative;
     1226}
     1227
     1228.search-form .search-field {
     1229  border: none;
     1230  -webkit-border-radius: 0;
     1231  border-radius: 0;
     1232  -webkit-box-shadow: none;
     1233  box-shadow: none;
     1234  display: block;
     1235  font-size: 16px;
     1236  font-size: 1rem;
     1237  margin: 0 auto;
     1238  max-width: 100%;
     1239  padding: 8px;
     1240  padding: 0.5rem;
     1241  width: 22.7373675443rem;
     1242}
     1243
     1244.search-form .button-search {
     1245  border-right: none;
     1246  -webkit-border-radius: 2px 0 0 2px;
     1247  border-radius: 2px 0 0 2px;
     1248  font-size: 16px;
     1249  font-size: 1rem;
     1250  position: relative;
     1251  left: auto;
     1252  top: auto;
     1253}
     1254
     1255.search-form .button-search:active {
     1256  background: #006799;
     1257  border-left: 1px solid #006799;
     1258  -webkit-box-shadow: none;
     1259  box-shadow: none;
     1260}
     1261
     1262.search-form .button-search .dashicons {
     1263  font-size: 16px;
     1264  font-size: 1rem;
     1265}
     1266
     1267.site-header .search-form {
     1268  display: inline-block;
     1269}
     1270
     1271.site-header.home .search-form .button-search,
     1272.site-main .search-form .button-search {
     1273  background: transparent;
     1274  border: none;
     1275  -webkit-border-radius: 0;
     1276  border-radius: 0;
     1277  -webkit-box-shadow: none;
     1278  box-shadow: none;
     1279  color: #32373c;
     1280  display: block;
     1281  height: 45px;
     1282  padding: 8px 16px;
     1283  padding: 0.5rem 1rem;
     1284  position: absolute;
     1285  left: 0;
     1286  text-shadow: none;
     1287  top: 0;
     1288}
     1289
     1290.site-header.home .search-form .button-search:focus,
     1291.site-main .search-form .button-search:focus {
     1292  -webkit-box-shadow: 0 0 2px 1px #33b3db;
     1293  box-shadow: 0 0 2px 1px #33b3db;
     1294}
     1295
     1296.site-header.home .search-form .button-search:active,
     1297.site-main .search-form .button-search:active {
     1298  background: transparent;
     1299  border: none;
     1300  -webkit-transform: none;
     1301  -ms-transform: none;
     1302  transform: none;
     1303}
     1304
     1305.site-header:not(.home) .search-form {
     1306  margin: 0;
     1307}
     1308
     1309.site-header:not(.home) .search-form .search-field {
     1310  border: 0;
     1311  -webkit-border-radius: 2px;
     1312  border-radius: 2px;
     1313  display: inline-block;
     1314  font-size: 16px;
     1315  font-size: 1rem;
     1316  padding: 5px 10px;
     1317  position: relative;
     1318  width: 100%;
     1319}
     1320
     1321@media screen and (min-width: 48em) {
     1322  .site-header:not(.home) .search-form .search-field {
     1323    -webkit-border-radius: 0 2px 2px 0;
     1324    border-radius: 0 2px 2px 0;
     1325    font-size: 10.24px;
     1326    font-size: 0.64rem;
     1327    width: 126px;
     1328    width: 7rem;
     1329  }
     1330  .site-header:not(.home) .search-form .search-field + .button-search {
     1331    display: inline-block;
     1332    margin-bottom: 0;
     1333  }
     1334}
     1335
     1336@media screen and (min-width: 60em) {
     1337  .site-header:not(.home) .search-form .search-field {
     1338    width: 160px;
     1339    width: 10rem;
     1340  }
     1341}
     1342
     1343.site-main .search-form .search-field {
     1344  border: 1px solid #ddd;
     1345  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
     1346  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
     1347  padding: 8px;
     1348  padding: 0.5rem;
     1349  width: 100%;
     1350}
     1351
    12201352.plugin-upload-form fieldset {
    12211353  border: none;
    … …  
    18802012}
    18812013
    1882 .site-header .search-form {
    1883   display: inline-block;
    1884   font-size: 0;
    1885   width: 100%;
    1886 }
    1887 
    1888 .site-header .search-form .search-field {
    1889   border: 0;
    1890   -webkit-border-radius: 2px;
    1891   border-radius: 2px;
    1892   font-size: 16px;
    1893   font-size: 1rem;
    1894   padding: 5px 10px;
    1895   position: relative;
    1896   width: 100%;
    1897 }
    1898 
    1899 .site-header .search-form .search-field + .button-search {
    1900   border-right: none;
    1901   -webkit-border-radius: 2px 0 0 2px;
    1902   border-radius: 2px 0 0 2px;
    1903   font-size: 16px;
    1904   font-size: 1rem;
    1905   display: none;
    1906   vertical-align: bottom;
    1907 }
    1908 
    1909 .site-header .search-form .search-field + .button-search:active {
    1910   background: #006799;
    1911   border-left: 1px solid #006799;
    1912   -webkit-box-shadow: none;
    1913   box-shadow: none;
    1914 }
    1915 
    1916 .site-header .search-form .search-field + .button-search .dashicons {
    1917   font-size: 16px;
    1918   font-size: 1rem;
    1919 }
    1920 
    1921 @media screen and (min-width: 48em) {
    1922   .site-header .search-form .search-field {
    1923     -webkit-border-radius: 0 2px 2px 0;
    1924     border-radius: 0 2px 2px 0;
    1925     font-size: 10.24px;
    1926     font-size: 0.64rem;
    1927     width: 126px;
    1928     width: 7rem;
    1929   }
    1930   .site-header .search-form .search-field + .button-search {
    1931     display: inline-block;
    1932     margin-bottom: 0;
    1933   }
    1934 }
    1935 
    1936 @media screen and (min-width: 60em) {
    1937   .site-header .search-form .search-field {
    1938     width: 160px;
    1939     width: 10rem;
    1940   }
    1941 }
    1942 
    19432014.site-header.home {
    19442015  padding: 1.5625rem 1.143rem;
    … …  
    19522023  margin: 32px 0 16px;
    19532024  margin: 2rem 0 1rem;
    1954 }
    1955 
    1956 .site-header.home .search-form {
    1957   margin-bottom: 32px;
    1958   margin-bottom: 2rem;
    1959   max-width: 100%;
    1960   position: relative;
    1961   width: initial;
    1962 }
    1963 
    1964 .site-header.home .search-form .search-field {
    1965   border: none;
    1966   -webkit-border-radius: 0;
    1967   border-radius: 0;
    1968   -webkit-box-shadow: none;
    1969   box-shadow: none;
    1970   display: block;
    1971   font-size: 16px;
    1972   font-size: 1rem;
    1973   margin: 0 auto;
    1974   max-width: 100%;
    1975   padding: 8px;
    1976   padding: 0.5rem;
    1977   width: 22.7373675443rem;
    1978 }
    1979 
    1980 .site-header.home .search-form .button-search {
    1981   background: transparent;
    1982   border: none;
    1983   -webkit-box-shadow: none;
    1984   box-shadow: none;
    1985   color: #32373c;
    1986   display: block;
    1987   height: 45px;
    1988   padding: 8px 16px;
    1989   padding: 0.5rem 1rem;
    1990   position: absolute;
    1991   left: 0;
    1992   text-shadow: none;
    1993   top: 0;
    1994 }
    1995 
    1996 .site-header.home .search-form .button-search:active {
    1997   background: transparent;
    1998   border: none;
    1999   -webkit-transform: none;
    2000   -ms-transform: none;
    2001   transform: none;
    20022025}
    20032026
    … …  
    20772100  padding: 0 32px;
    20782101  padding: 0 2rem;
    2079 }
    2080 
    2081 .site-main .no-results .search-form {
    2082   margin: 32px auto;
    2083   margin: 2rem auto;
    2084   position: relative;
    2085 }
    2086 
    2087 .site-main .no-results .search-form:after {
    2088   content: "\f179";
    2089   font-family: dashicons;
    2090   position: absolute;
    2091   left: 16px;
    2092   top: 11px;
    2093 }
    2094 
    2095 .site-main .no-results .search-field {
    2096   font-size: 16px;
    2097   font-size: 1rem;
    2098   padding: 8px 8px 8px 40px;
    2099   padding: 0.5rem 0.5rem 0.5rem 40px;
    2100   width: 100%;
    2101 }
    2102 
    2103 .site-main .no-results .button-search {
    2104   display: none;
    21052102}
    21062103

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

    r3832 r3843  
    12181218}
    12191219
     1220.search-form {
     1221  font-size: 0;
     1222  margin-bottom: 32px;
     1223  margin-bottom: 2rem;
     1224  max-width: 100%;
     1225  position: relative;
     1226}
     1227
     1228.search-form .search-field {
     1229  border: none;
     1230  -webkit-border-radius: 0;
     1231  border-radius: 0;
     1232  -webkit-box-shadow: none;
     1233  box-shadow: none;
     1234  display: block;
     1235  font-size: 16px;
     1236  font-size: 1rem;
     1237  margin: 0 auto;
     1238  max-width: 100%;
     1239  padding: 8px;
     1240  padding: 0.5rem;
     1241  width: 22.7373675443rem;
     1242}
     1243
     1244.search-form .button-search {
     1245  border-left: none;
     1246  -webkit-border-radius: 0 2px 2px 0;
     1247  border-radius: 0 2px 2px 0;
     1248  font-size: 16px;
     1249  font-size: 1rem;
     1250  position: relative;
     1251  right: auto;
     1252  top: auto;
     1253}
     1254
     1255.search-form .button-search:active {
     1256  background: #006799;
     1257  border-right: 1px solid #006799;
     1258  -webkit-box-shadow: none;
     1259  box-shadow: none;
     1260}
     1261
     1262.search-form .button-search .dashicons {
     1263  font-size: 16px;
     1264  font-size: 1rem;
     1265}
     1266
     1267.site-header .search-form {
     1268  display: inline-block;
     1269}
     1270
     1271.site-header.home .search-form .button-search,
     1272.site-main .search-form .button-search {
     1273  background: transparent;
     1274  border: none;
     1275  -webkit-border-radius: 0;
     1276  border-radius: 0;
     1277  -webkit-box-shadow: none;
     1278  box-shadow: none;
     1279  color: #32373c;
     1280  display: block;
     1281  height: 45px;
     1282  padding: 8px 16px;
     1283  padding: 0.5rem 1rem;
     1284  position: absolute;
     1285  right: 0;
     1286  text-shadow: none;
     1287  top: 0;
     1288}
     1289
     1290.site-header.home .search-form .button-search:focus,
     1291.site-main .search-form .button-search:focus {
     1292  -webkit-box-shadow: 0 0 2px 1px #33b3db;
     1293  box-shadow: 0 0 2px 1px #33b3db;
     1294}
     1295
     1296.site-header.home .search-form .button-search:active,
     1297.site-main .search-form .button-search:active {
     1298  background: transparent;
     1299  border: none;
     1300  -webkit-transform: none;
     1301  -ms-transform: none;
     1302  transform: none;
     1303}
     1304
     1305.site-header:not(.home) .search-form {
     1306  margin: 0;
     1307}
     1308
     1309.site-header:not(.home) .search-form .search-field {
     1310  border: 0;
     1311  -webkit-border-radius: 2px;
     1312  border-radius: 2px;
     1313  display: inline-block;
     1314  font-size: 16px;
     1315  font-size: 1rem;
     1316  padding: 5px 10px;
     1317  position: relative;
     1318  width: 100%;
     1319}
     1320
     1321@media screen and (min-width: 48em) {
     1322  .site-header:not(.home) .search-form .search-field {
     1323    -webkit-border-radius: 2px 0 0 2px;
     1324    border-radius: 2px 0 0 2px;
     1325    font-size: 10.24px;
     1326    font-size: 0.64rem;
     1327    width: 126px;
     1328    width: 7rem;
     1329  }
     1330  .site-header:not(.home) .search-form .search-field + .button-search {
     1331    display: inline-block;
     1332    margin-bottom: 0;
     1333  }
     1334}
     1335
     1336@media screen and (min-width: 60em) {
     1337  .site-header:not(.home) .search-form .search-field {
     1338    width: 160px;
     1339    width: 10rem;
     1340  }
     1341}
     1342
     1343.site-main .search-form .search-field {
     1344  border: 1px solid #ddd;
     1345  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
     1346  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
     1347  padding: 8px;
     1348  padding: 0.5rem;
     1349  width: 100%;
     1350}
     1351
    12201352.plugin-upload-form fieldset {
    12211353  border: none;
    … …  
    18802012}
    18812013
    1882 .site-header .search-form {
    1883   display: inline-block;
    1884   font-size: 0;
    1885   width: 100%;
    1886 }
    1887 
    1888 .site-header .search-form .search-field {
    1889   border: 0;
    1890   -webkit-border-radius: 2px;
    1891   border-radius: 2px;
    1892   font-size: 16px;
    1893   font-size: 1rem;
    1894   padding: 5px 10px;
    1895   position: relative;
    1896   width: 100%;
    1897 }
    1898 
    1899 .site-header .search-form .search-field + .button-search {
    1900   border-left: none;
    1901   -webkit-border-radius: 0 2px 2px 0;
    1902   border-radius: 0 2px 2px 0;
    1903   font-size: 16px;
    1904   font-size: 1rem;
    1905   display: none;
    1906   vertical-align: bottom;
    1907 }
    1908 
    1909 .site-header .search-form .search-field + .button-search:active {
    1910   background: #006799;
    1911   border-right: 1px solid #006799;
    1912   -webkit-box-shadow: none;
    1913   box-shadow: none;
    1914 }
    1915 
    1916 .site-header .search-form .search-field + .button-search .dashicons {
    1917   font-size: 16px;
    1918   font-size: 1rem;
    1919 }
    1920 
    1921 @media screen and (min-width: 48em) {
    1922   .site-header .search-form .search-field {
    1923     -webkit-border-radius: 2px 0 0 2px;
    1924     border-radius: 2px 0 0 2px;
    1925     font-size: 10.24px;
    1926     font-size: 0.64rem;
    1927     width: 126px;
    1928     width: 7rem;
    1929   }
    1930   .site-header .search-form .search-field + .button-search {
    1931     display: inline-block;
    1932     margin-bottom: 0;
    1933   }
    1934 }
    1935 
    1936 @media screen and (min-width: 60em) {
    1937   .site-header .search-form .search-field {
    1938     width: 160px;
    1939     width: 10rem;
    1940   }
    1941 }
    1942 
    19432014.site-header.home {
    19442015  padding: 1.5625rem 1.143rem;
    … …  
    19522023  margin: 32px 0 16px;
    19532024  margin: 2rem 0 1rem;
    1954 }
    1955 
    1956 .site-header.home .search-form {
    1957   margin-bottom: 32px;
    1958   margin-bottom: 2rem;
    1959   max-width: 100%;
    1960   position: relative;
    1961   width: initial;
    1962 }
    1963 
    1964 .site-header.home .search-form .search-field {
    1965   border: none;
    1966   -webkit-border-radius: 0;
    1967   border-radius: 0;
    1968   -webkit-box-shadow: none;
    1969   box-shadow: none;
    1970   display: block;
    1971   font-size: 16px;
    1972   font-size: 1rem;
    1973   margin: 0 auto;
    1974   max-width: 100%;
    1975   padding: 8px;
    1976   padding: 0.5rem;
    1977   width: 22.7373675443rem;
    1978 }
    1979 
    1980 .site-header.home .search-form .button-search {
    1981   background: transparent;
    1982   border: none;
    1983   -webkit-box-shadow: none;
    1984   box-shadow: none;
    1985   color: #32373c;
    1986   display: block;
    1987   height: 45px;
    1988   padding: 8px 16px;
    1989   padding: 0.5rem 1rem;
    1990   position: absolute;
    1991   right: 0;
    1992   text-shadow: none;
    1993   top: 0;
    1994 }
    1995 
    1996 .site-header.home .search-form .button-search:active {
    1997   background: transparent;
    1998   border: none;
    1999   -webkit-transform: none;
    2000   -ms-transform: none;
    2001   transform: none;
    20022025}
    20032026
    … …  
    20772100  padding: 0 32px;
    20782101  padding: 0 2rem;
    2079 }
    2080 
    2081 .site-main .no-results .search-form {
    2082   margin: 32px auto;
    2083   margin: 2rem auto;
    2084   position: relative;
    2085 }
    2086 
    2087 .site-main .no-results .search-form:after {
    2088   content: "\f179";
    2089   font-family: dashicons;
    2090   position: absolute;
    2091   right: 16px;
    2092   top: 11px;
    2093 }
    2094 
    2095 .site-main .no-results .search-field {
    2096   font-size: 16px;
    2097   font-size: 1rem;
    2098   padding: 8px 40px 8px 8px;
    2099   padding: 0.5rem 40px 0.5rem 0.5rem;
    2100   width: 100%;
    2101 }
    2102 
    2103 .site-main .no-results .button-search {
    2104   display: none;
    21052102}
    21062103
    … …  
    30643061  display: block;
    30653062}
     3063/*# sourceMappingURL=style.css.map */

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

    r3346 r3843  
    11@import "buttons";
    22@import "fields";
     3@import "search";
    34@import "upload";

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

    r3734 r3843  
    100100    }
    101101
    102     .search-form {
    103         display: inline-block;
    104         font-size: 0;
    105         width: 100%;
    106 
    107         .search-field {
    108             border: 0;
    109             border-radius: 2px;
    110             @include font-size( ms-unitless( ms(0) ) );
    111             padding: 5px 10px;
    112             position: relative;
    113             width: 100%;
    114         }
    115 
    116         .search-field + .button-search {
    117             border-left: none;
    118             border-radius: 0 2px 2px 0;
    119             @include font-size( ms-unitless( ms(0) ) );
    120             display: none;
    121             vertical-align: bottom;
    122 
    123             &:active {
    124                 background: #006799;
    125                 border-right: 1px solid #006799;
    126                 box-shadow: none;
    127             }
    128 
    129             .dashicons {
    130                 @include font-size( ms-unitless( ms(0) ) );
    131             }
    132         }
    133 
    134         @media screen and ( min-width: $ms-breakpoint ) {
    135             .search-field {
    136                 border-radius: 2px 0 0 2px;
    137                 @include font-size( ms-unitless( ms(-4) ) );
    138                 width: 126px;
    139                 width: 7rem;
    140             }
    141 
    142             .search-field + .button-search {
    143                 display: inline-block;
    144                 margin-bottom: 0;
    145             }
    146         }
    147 
    148         @media screen and ( min-width: 60em ) {
    149             .search-field {
    150                 width: 160px;
    151                 width: 10rem;
    152             }
    153         }
    154     }
    155 
    156102    &.home {
    157103        padding: ms(4) ms(1);
    … …  
    164110            margin: 2rem 0 1rem;
    165111        }
    166 
    167         .search-form {
    168             margin-bottom: 32px;
    169             margin-bottom: 2rem;
    170             max-width: 100%;
    171             position: relative;
    172             width: initial;
    173 
    174             .search-field {
    175                 border: none;
    176                 border-radius: 0;
    177                 box-shadow: none;
    178                 display: block;
    179                 @include font-size( ms-unitless( ms(0) ) );
    180                 margin: 0 auto;
    181                 max-width: 100%;
    182                 padding: 8px;
    183                 padding: 0.5rem;
    184                 width: ms(28);
    185             }
    186 
    187             .button-search {
    188                 background: transparent;
    189                 border: none;
    190                 box-shadow: none;
    191                 color: $color__text-input;
    192                 display: block;
    193                 height: 45px;
    194                 padding: 8px 16px;
    195                 padding: 0.5rem 1rem;
    196                 position: absolute;
    197                 right: 0;
    198                 text-shadow: none;
    199                 top: 0;
    200 
    201                 &:active {
    202                     background: transparent;
    203                     border: none;
    204                     transform: none;
    205                 }
    206             }
    207         }
    208112    }
    209113}

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

    r3459 r3843  
    3232        padding: 0 32px;
    3333        padding: 0 2rem;
    34 
    35         .search-form {
    36             margin: 32px auto;
    37             margin: 2rem auto;
    38             position: relative;
    39 
    40             &:after {
    41                 content: "\f179";
    42                 font-family: dashicons;
    43                 position: absolute;
    44                 right: 16px;
    45                 top: 11px;
    46             }
    47         }
    48 
    49         .search-field {
    50             @include font-size( ms-unitless( ms(0) ) );
    51             padding: 8px 40px 8px 8px;
    52             padding: 0.5rem 40px 0.5rem 0.5rem;
    53             width: 100%;
    54         }
    55 
    56         .button-search {
    57             display: none;
    58         }
    5934    }
    6035}
Note: See TracChangeset for help on using the changeset viewer.