WordPress.org

Make WordPress Core

Changeset 36291


Ignore:
Timestamp:
01/13/2016 10:35:05 PM (4 years ago)
Author:
afercia
Message:

Customizer: Aggregate similar CSS rules.

Fixes #34333.

Location:
trunk/src/wp-admin/css
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/customize-controls.css

    r35643 r36291  
    13121312}
    13131313
     1314.widget-reorder-nav span,
     1315.menu-item-reorder-nav button {
     1316    position: relative;
     1317    overflow: hidden;
     1318    float: left;
     1319    display: block;
     1320    width: 33px; /* was 42px for mobile */
     1321    height: 43px;
     1322    color: #82878c;
     1323    text-indent: -9999px;
     1324    cursor: pointer;
     1325    outline: none;
     1326}
     1327
     1328.menu-item-reorder-nav button {
     1329    width: 30px;
     1330    height: 40px;
     1331    background: transparent;
     1332    border: none;
     1333    -webkit-box-shadow: none;
     1334    box-shadow: none;
     1335}
     1336
     1337.widget-reorder-nav span:before,
     1338.menu-item-reorder-nav button:before {
     1339    display: inline-block;
     1340    position: absolute;
     1341    top: 0;
     1342    right: 0;
     1343    width: 100%;
     1344    height: 100%;
     1345    font: normal 20px/43px dashicons;
     1346    text-align: center;
     1347    text-indent: 0;
     1348    -webkit-font-smoothing: antialiased;
     1349    -moz-osx-font-smoothing: grayscale;
     1350}
     1351
     1352.widget-reorder-nav span:hover,
     1353.widget-reorder-nav span:focus,
     1354.menu-item-reorder-nav button:hover,
     1355.menu-item-reorder-nav button:focus {
     1356    color: #191e23;
     1357    background: #eee;
     1358}
     1359
     1360.move-widget-down:before,
     1361.menus-move-down:before {
     1362    content: "\f347";
     1363}
     1364
     1365.move-widget-up:before,
     1366.menus-move-up:before {
     1367    content: "\f343";
     1368}
     1369
     1370#customize-theme-controls .first-widget .move-widget-up,
     1371#customize-theme-controls .last-widget .move-widget-down,
     1372.move-up-disabled .menus-move-up,
     1373.move-down-disabled .menus-move-down,
     1374.move-right-disabled .menus-move-right,
     1375.move-left-disabled .menus-move-left {
     1376    color: #d5d5d5;
     1377    background-color: #fff;
     1378    cursor: default;
     1379    pointer-events: none;
     1380}
     1381
     1382/**
     1383 * New widget and Add-menu-items modes and panels
     1384 */
     1385
     1386.wp-full-overlay-main {
     1387    right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
     1388    width: 100%;
     1389}
     1390
     1391body.adding-widget .add-new-widget,
     1392body.adding-widget .add-new-widget:hover,
     1393.adding-menu-items .add-new-menu-item,
     1394.adding-menu-items .add-new-menu-item:hover,
     1395.add-menu-toggle.open,
     1396.add-menu-toggle.open:hover {
     1397    background: #eee;
     1398    border-color: #929793;
     1399    color: #32373c;
     1400    -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
     1401    box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
     1402}
     1403
     1404body.adding-widget .add-new-widget:before,
     1405.adding-menu-items .add-new-menu-item:before,
     1406#accordion-section-add_menu .add-new-menu-item.open:before {
     1407    -webkit-transform: rotate(45deg);
     1408    -ms-transform: rotate(45deg);
     1409    transform: rotate(45deg);
     1410}
     1411
     1412#available-widgets,
     1413#available-menu-items {
     1414    position: absolute;
     1415    top: 0;
     1416    bottom: 0;
     1417    left: -301px;
     1418    visibility: hidden;
     1419    overflow-x: hidden;
     1420    overflow-y: auto;
     1421    width: 300px;
     1422    margin: 0;
     1423    z-index: 4;
     1424    background: #eee;
     1425    -webkit-transition: left .18s;
     1426    transition: left .18s;
     1427    border-right: 1px solid #ddd;
     1428}
     1429
     1430#available-widgets .customize-section-title,
     1431#available-menu-items .customize-section-title {
     1432    display: none;
     1433}
     1434
     1435#available-widgets-list {
     1436    top: 60px;
     1437    position: absolute;
     1438    overflow: auto;
     1439    bottom: 0;
     1440    width: 100%;
     1441}
     1442
     1443#available-widgets-filter {
     1444    position: fixed;
     1445    top: 0;
     1446    z-index: 1;
     1447    width: 300px;
     1448    background: #eee;
     1449    border-bottom: 1px solid #e4e4e4;
     1450}
     1451
     1452/* search field container */
     1453#available-widgets-filter,
     1454#available-menu-items-search .accordion-section-title {
     1455    padding: 12px 15px;
     1456    -webkit-box-sizing: border-box;
     1457    -moz-box-sizing: border-box;
     1458    box-sizing: border-box;
     1459}
     1460
     1461#available-widgets-filter input,
     1462#available-menu-items-search input {
     1463    padding: 6px 10px;
     1464    width: 100%;
     1465}
     1466
     1467#available-widgets .widget-top,
     1468#available-widgets .widget-top:hover,
     1469#available-menu-items .item-top,
     1470#available-menu-items .item-top:hover {
     1471    border: none;
     1472    background: transparent;
     1473    -webkit-box-shadow: none;
     1474    box-shadow: none;
     1475}
     1476
     1477#available-widgets .widget-tpl,
     1478#available-menu-items .item-tpl {
     1479    position: relative;
     1480    padding: 20px 15px 20px 60px;
     1481    background: #fff;
     1482    border-bottom: 1px solid #e4e4e4;
     1483    cursor: pointer;
     1484    display: none;
     1485}
     1486
     1487#available-widgets .widget,
     1488#available-menu-items .item {
     1489    position: static;
     1490}
     1491
     1492
    13141493/* Responsive */
    13151494.customize-controls-preview-toggle {
     
    14241603        margin-top: 6px;
    14251604    }
    1426 }
     1605
     1606    body.adding-widget div#available-widgets,
     1607    body.adding-menu-items div#available-menu-items {
     1608        top: 46px;
     1609        left: 0;
     1610        z-index: 10;
     1611        width: 100%;
     1612    }
     1613
     1614    #available-widgets .customize-section-title,
     1615    #available-menu-items .customize-section-title {
     1616        display: block;
     1617        margin: 0;
     1618    }
     1619
     1620    #available-widgets .customize-section-back,
     1621    #available-menu-items .customize-section-back {
     1622        height: 69px;
     1623    }
     1624
     1625    #available-widgets .customize-section-title h3,
     1626    #available-menu-items .customize-section-title h3 {
     1627        font-size: 20px;
     1628        font-weight: 200;
     1629        padding: 9px 10px 12px 14px;
     1630        margin: 0;
     1631        line-height: 24px;
     1632        color: #555;
     1633        display: block;
     1634        overflow: hidden;
     1635        white-space: nowrap;
     1636        text-overflow: ellipsis;
     1637    }
     1638
     1639    #available-widgets .customize-section-title .customize-action,
     1640    #available-menu-items .customize-section-title .customize-action {
     1641        font-size: 13px;
     1642        display: block;
     1643        font-weight: 400;
     1644        overflow: hidden;
     1645        white-space: nowrap;
     1646        text-overflow: ellipsis;
     1647    }
     1648
     1649    #available-widgets-filter {
     1650        position: relative;
     1651        width: 100%;
     1652        background: #fff;
     1653        height: auto;
     1654        padding: 10px 15px;
     1655    }
     1656
     1657    #available-widgets-list {
     1658        top: 140px;
     1659    }
     1660}
  • trunk/src/wp-admin/css/customize-nav-menus.css

    r35636 r36291  
    1313#customize-controls .theme-location-set,
    1414#customize-controls .control-section .accordion-section-title:focus .menu-in-location,
    15 #customize-controls .control-section .accordion-section-title:hover .menu-in-location,
    16 #customize-controls .control-section .accordion-section-title:focus .menu-in-locations,
    17 #customize-controls .control-section .accordion-section-title:hover .menu-in-locations {
     15#customize-controls .control-section .accordion-section-title:hover .menu-in-location {
    1816    color: #555;
    1917}
     
    7977
    8078.wp-customizer .menu-item .submitbox .submitdelete {
    81     display: block;
    8279    float: left;
    8380    margin: 6px 0 0;
     
    8683}
    8784
    88 .wp-customizer .menu-item .submitbox .submitdelete:focus {
    89     -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    90     box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    91 }
    9285
    9386/**
     
    10396}
    10497
    105 .menu-item-reorder-nav button {
    106     position: relative;
    107     overflow: hidden;
    108     float: left;
    109     display: block;
    110     width: 30px;
    111     height: 40px;
    112     color: #82878c;
    113     text-indent: -9999px;
    114     cursor: pointer;
    115     background: transparent;
    116     border: none;
    117     -webkit-box-shadow: none;
    118     box-shadow: none;
    119     outline: none;
    120 }
    121 
    122 .menu-item-reorder-nav button:before {
    123     display: inline-block;
    124     position: absolute;
    125     top: 0;
    126     right: 0;
    127     width: 100%;
    128     height: 100%;
    129     font: normal 20px/40px dashicons;
    130     text-align: center;
    131     text-indent: 0;
    132     -webkit-font-smoothing: antialiased;
    133     -moz-osx-font-smoothing: grayscale;
    134 }
    135 
    136 .menu-item-reorder-nav button:hover,
    137 .menu-item-reorder-nav button:focus {
    138     color: #191e23;
    139     background: #eee;
    140 }
    141 
    142 .menus-move-down:before {
    143     content: "\f347";
    144 }
    145 
    146 .menus-move-up:before {
    147     content: "\f343";
    148 }
    149 
    15098.menus-move-left:before {
    15199    content: "\f341";
     
    154102.menus-move-right:before {
    155103    content: "\f345";
    156 }
    157 
    158 .move-up-disabled .menus-move-up,
    159 .move-down-disabled .menus-move-down,
    160 .move-right-disabled .menus-move-right,
    161 .move-left-disabled .menus-move-left {
    162     color: #d5d5d5 !important;
    163     background-color: #fff !important;
    164     cursor: default;
    165     pointer-events: none;
    166 }
    167 
    168 .menu-item-reorder-nav:before {
    169     content: "";
    170     display: block;
    171     position: absolute;
    172     left: -10px;
    173     width: 10px;
    174     height: 40px;
    175     background: -webkit-gradient(linear, left top, right top, from(rgba(250,250,250,0)), to(rgba(250,250,250,1)));
    176     background: -webkit-linear-gradient(left, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 100%);
    177     background: linear-gradient(to right, rgba(250,250,250,0) 0%, rgba(250,250,250,1) 100%);
    178104}
    179105
     
    303229.customize-screen-options-toggle:focus:before,
    304230#customize-controls .customize-info .customize-help-toggle:focus:before {
    305     -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    306     box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    307231    -webkit-border-radius: 100%;
    308232    border-radius: 100%;
     
    345269    -moz-osx-font-smoothing: grayscale;
    346270    text-decoration: none !important;
    347 }
    348 
    349 .wp-customizer button:focus .toggle-indicator:after {
    350     -webkit-box-shadow:
    351         0 0 0 1px #5b9dd9,
    352         0 0 2px 1px rgba(30, 140, 190, .8);
    353     box-shadow:
    354         0 0 0 1px #5b9dd9,
    355         0 0 2px 1px rgba(30, 140, 190, .8);
    356271}
    357272
     
    471386 */
    472387
    473 .wp-full-overlay-main {
    474     right: auto; /* This overrides a right: 0; which causes the preview to resize rather than slide off screen at the normal size. */
    475     width: 100%;
    476 }
    477 
    478388.adding-menu-items .control-section {
    479389    opacity: .4;
     
    483393.adding-menu-items .control-section.open {
    484394    opacity: 1;
    485 }
    486 
    487 .adding-menu-items .add-new-menu-item,
    488 .adding-menu-items .add-new-menu-item:hover,
    489 .add-menu-toggle.open,
    490 .add-menu-toggle.open:hover {
    491     background: #eee;
    492     border-color: #929793;
    493     color: #32373c;
    494     -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
    495     box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
    496 }
    497 
    498 .adding-menu-items .add-new-menu-item:before,
    499 #accordion-section-add_menu .add-new-menu-item.open:before {
    500     -webkit-transform: rotate(45deg);
    501     -ms-transform: rotate(45deg);
    502     transform: rotate(45deg);
    503395}
    504396
     
    538430}
    539431
    540 .menu-item-bar .item-delete:focus:before {
    541     -webkit-box-shadow:
    542         0 0 0 1px #5b9dd9,
    543         0 0 2px 1px rgba(30, 140, 190, .8);
    544     box-shadow:
    545         0 0 0 1px #5b9dd9,
    546         0 0 2px 1px rgba(30, 140, 190, .8);
    547 }
    548 
    549432.adding-menu-items .menu-item-bar .item-edit {
    550433    display: none;
     
    555438}
    556439
    557 #available-menu-items .item {
    558     position: static;
    559 }
    560 
    561 #available-menu-items {
    562     position: absolute;
    563     top: 0;
    564     bottom: 0;
    565     left: -301px;
    566     visibility: hidden;
    567     overflow-x: hidden;
    568     overflow-y: auto;
    569     width: 300px;
    570     margin: 0;
    571     z-index: 4;
    572     background: #eee;
    573     -webkit-transition: left .18s;
    574     transition: left .18s;
    575     border-right: 1px solid #ddd;
    576 }
     440/**
     441 * Styles for menu-item addition panel
     442 */
    577443
    578444#available-menu-items.opening {
     
    641507
    642508#available-menu-items .cannot-expand .accordion-section-title .no-items {
    643     display: block;
     509    float: right;
    644510    color: #777;
    645511    font-weight: normal;
    646     float: right;
    647512    margin-left: 5px;
    648513}
     
    652517    margin: 0;
    653518    max-height: 290px;
    654 }
    655 
    656 #available-menu-items #available-menu-items-search .accordion-section-content {
    657     position: absolute;
    658     left: 1px;
    659     top: 60px; /* below title div / search input */
    660     bottom: 0px; /* 100% height that still triggers lazy load */
    661     max-height: none;
    662     width: 100%;
    663     padding: 1px 15px 15px;
    664     -webkit-box-sizing: border-box;
    665     -moz-box-sizing: border-box;
    666     box-sizing: border-box;
    667519}
    668520
     
    678530}
    679531
    680 #available-menu-items .item-tpl {
    681     position: relative;
    682     padding: 20px 15px 20px 60px;
    683     border-bottom: 1px solid #e4e4e4;
    684     cursor: pointer;
    685     display: none;
    686 }
    687 
    688 #available-menu-items .item-tpl:hover,
    689 #available-menu-items .item-tpl.selected {
    690     background: #eee;
    691 }
    692 
    693532#available-menu-items .menu-item-handle .item-type {
    694533    padding-right: 0;
     
    701540#available-menu-items .menu-item-handle {
    702541    cursor: pointer;
    703 }
    704 
    705 #available-menu-items .item-top,
    706 #available-menu-items .item-top:hover {
    707     border: none;
    708     background: transparent;
    709     -webkit-box-shadow: none;
    710     box-shadow: none;
    711542}
    712543
     
    755586}
    756587
     588#available-menu-items .menu-item-handle.item-added .item-type,
     589#available-menu-items .menu-item-handle.item-added .item-title,
     590#available-menu-items .menu-item-handle.item-added:hover .item-add,
     591#available-menu-items .menu-item-handle.item-added .item-add:focus {
     592    color: #82878c;
     593}
     594
     595#available-menu-items .menu-item-handle.item-added .item-add:before {
     596    content: "\f147";
     597}
     598
     599#available-menu-items .accordion-section-title.loading .spinner,
     600#available-menu-items-search.loading .accordion-section-title .spinner {
     601    visibility: visible;
     602    margin: 0 20px;
     603}
     604
     605#available-menu-items-search .clear-results {
     606    position: absolute;
     607    top: 20px;
     608    right: 20px;
     609    width: 20px;
     610    height: 20px;
     611    cursor: pointer;
     612    color: #a00;
     613    text-decoration: none;
     614}
     615
     616#available-menu-items-search .clear-results,
     617#available-menu-items-search.loading .clear-results.is-visible {
     618    display: none;
     619}
     620
     621#available-menu-items-search .clear-results.is-visible {
     622    display: block;
     623}
     624
     625#available-menu-items-search .clear-results:before {
     626    content: "\f335";
     627    font: normal 20px/1 dashicons;
     628    -webkit-font-smoothing: antialiased;
     629    -moz-osx-font-smoothing: grayscale;
     630}
     631
     632#available-menu-items-search .clear-results:hover,
     633#available-menu-items-search .clear-results:focus {
     634    color: #f00;
     635}
     636
     637#available-menu-items-search .spinner {
     638    position: absolute;
     639    top: 20px;
     640    margin: 0 !important;
     641    right: 20px;
     642}
     643
     644/* search results list */
     645#available-menu-items #available-menu-items-search .accordion-section-content {
     646    position: absolute;
     647    left: 1px;
     648    top: 60px; /* below title div / search input */
     649    bottom: 0px; /* 100% height that still triggers lazy load */
     650    max-height: none;
     651    width: 100%;
     652    padding: 1px 15px 15px;
     653    -webkit-box-sizing: border-box;
     654    -moz-box-sizing: border-box;
     655    box-sizing: border-box;
     656}
     657
     658#available-menu-items-search .accordion-section-title:after {
     659    display: none;
     660}
     661
     662#available-menu-items-search .accordion-section-content:empty {
     663    min-height: 0;
     664    padding: 0;
     665}
     666
     667#available-menu-items-search.loading .accordion-section-content div {
     668    opacity: .5;
     669}
     670
     671#available-menu-items-search.loading.loading-more .accordion-section-content div {
     672    opacity: 1;
     673}
     674
     675#customize-preview {
     676    -webkit-transition: all 0.2s;
     677    transition: all 0.2s;
     678}
     679
     680body.adding-menu-items #available-menu-items {
     681    left: 0;
     682    visibility: visible;
     683}
     684
     685body.adding-menu-items .wp-full-overlay-main {
     686    left: 300px;
     687}
     688
     689body.adding-menu-items #customize-preview {
     690    opacity: 0.4;
     691}
     692
     693.menu-item-handle .spinner {
     694    display: none;
     695    float: left;
     696    margin: 0 8px 0 0;
     697}
     698
     699.nav-menu-inserted-item-loading .spinner {
     700    display: block;
     701}
     702
     703.nav-menu-inserted-item-loading .menu-item-handle .item-type {
     704    padding: 0 0 0 8px;
     705}
     706
     707.nav-menu-inserted-item-loading .menu-item-handle,
     708.added-menu-item .menu-item-handle.loading {
     709    padding: 10px 15px 10px 8px;
     710    cursor: default;
     711    opacity: .5;
     712    background: #fff;
     713    color: #727773;
     714}
     715
     716.added-menu-item .menu-item-handle {
     717    -webkit-transition-property: opacity, background, color;
     718    transition-property: opacity, background, color;
     719    -webkit-transition-duration: 1.25s;
     720    transition-duration: 1.25s;
     721    -webkit-transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 );
     722    transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 ); /* Replacement for .hide().fadeIn('slow') in JS to add emphasis when it's loaded. */
     723}
     724
     725/* Add/delete Menus */
     726
     727/* @todo update selector */
     728#accordion-section-add_menu {
     729    margin: 15px 12px;
     730}
     731
     732.new-menu-section-content {
     733    display: none;
     734    padding: 15px 0 0 0;
     735    clear: both;
     736}
     737
     738/* @todo update selector */
     739#accordion-section-add_menu .accordion-section-title {
     740    padding-left: 45px;
     741}
     742
     743/* @todo update selector */
     744#accordion-section-add_menu .accordion-section-title:before {
     745    font: normal 20px/1 dashicons;
     746    position: absolute;
     747    top: 12px;
     748    left: 14px;
     749    content: "\f132";
     750}
     751
     752#create-new-menu-submit {
     753    float: right;
     754    margin: 0 0 12px 0;
     755}
     756
     757.menu-delete-item {
     758    float: left;
     759    padding: 1em 0;
     760    width: 100%;
     761}
     762
     763li.assigned-to-menu-location .menu-delete-item {
     764    display: none;
     765}
     766
     767li.assigned-to-menu-location .add-new-menu-item {
     768    margin-bottom: 1em;
     769}
     770
     771.menu-delete {
     772    color: #a00;
     773    cursor: pointer;
     774    text-decoration: underline;
     775}
     776
     777.menu-delete:hover,
     778.menu-delete:focus {
     779    color: #f00;
     780    text-decoration: none;
     781}
     782
     783.menu-item-handle {
     784    margin-top: -1px;
     785}
     786.ui-sortable-disabled .menu-item-handle {
     787    cursor: default;
     788}
     789
     790.menu-item-handle:hover {
     791    position: relative;
     792    z-index: 10;
     793    color: #0073aa;
     794}
     795
     796.menu-item-handle:hover .item-type,
     797.menu-item-handle:hover .item-edit,
     798#available-menu-items .menu-item-handle:hover .item-add {
     799    color: #0073aa;
     800}
     801
     802.menu-item-edit-active .menu-item-handle {
     803    border-color: #999;
     804    border-bottom: none;
     805}
     806
     807.customize-control-nav_menu_item {
     808    margin-bottom: 0;
     809}
     810
     811.customize-control-nav_menu {
     812    margin-top: 12px;
     813}
     814
     815/**
     816 * box-shadows
     817 */
     818
     819.wp-customizer .menu-item .submitbox .submitdelete:focus,
     820.customize-screen-options-toggle:focus:before,
     821#customize-controls .customize-info .customize-help-toggle:focus:before,
     822.wp-customizer button:focus .toggle-indicator:after,
     823#available-menu-items-search .clear-results:focus,
     824.menu-delete:focus,
     825.menu-item-bar .item-delete:focus:before,
    757826#available-menu-items .item-add:focus:before {
    758827    -webkit-box-shadow:
     
    764833}
    765834
    766 #available-menu-items .menu-item-handle.item-added .item-type,
    767 #available-menu-items .menu-item-handle.item-added .item-title,
    768 #available-menu-items .menu-item-handle.item-added:hover .item-add,
    769 #available-menu-items .menu-item-handle.item-added .item-add:focus {
    770     color: #82878c;
    771 }
    772 
    773 #available-menu-items .menu-item-handle.item-added .item-add:before {
    774     content: "\f147";
    775 }
    776 
    777 #available-menu-items .accordion-section-title.loading .spinner,
    778 #available-menu-items-search.loading .accordion-section-title .spinner {
    779     visibility: visible;
    780     margin: 0 20px;
    781 }
    782 
    783 #available-menu-items-search .clear-results {
    784     position: absolute;
    785     top: 20px;
    786     right: 20px;
    787     width: 20px;
    788     height: 20px;
    789     cursor: pointer;
    790     color: #a00;
    791     text-decoration: none;
    792 }
    793 
    794 #available-menu-items-search .clear-results,
    795 #available-menu-items-search.loading .clear-results.is-visible {
    796     display: none;
    797 }
    798 
    799 #available-menu-items-search .clear-results.is-visible {
    800     display: block;
    801 }
    802 
    803 #available-menu-items-search .clear-results:before {
    804     content: "\f335";
    805     font: normal 20px/1 dashicons;
    806     -webkit-font-smoothing: antialiased;
    807     -moz-osx-font-smoothing: grayscale;
    808 }
    809 
    810 #available-menu-items-search .clear-results:hover,
    811 #available-menu-items-search .clear-results:focus {
    812     color: #f00;
    813 }
    814 
    815 #available-menu-items-search .clear-results:focus {
    816     -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    817     box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    818 }
    819 
    820 #available-menu-items-search .spinner {
    821     position: absolute;
    822     top: 20px;
    823     margin: 0 !important;
    824     right: 20px;
    825 }
    826 
    827 #available-menu-items-search input {
    828     padding: 6px 10px;
    829     width: 100%;
    830 }
    831 
    832 #available-menu-items-search .accordion-section-title {
    833     padding: 12px 15px;
    834     -webkit-box-sizing: border-box;
    835     -moz-box-sizing: border-box;
    836     box-sizing: border-box;
    837 }
    838 
    839 #available-menu-items-search .accordion-section-title:after {
    840     display: none;
    841 }
    842 
    843 #available-menu-items-search .accordion-section-content:empty {
    844     min-height: 0;
    845     padding: 0;
    846 }
    847 
    848 #available-menu-items-search.loading .accordion-section-content div {
    849     opacity: .5;
    850 }
    851 
    852 #available-menu-items-search.loading.loading-more .accordion-section-content div {
    853     opacity: 1;
    854 }
    855 
    856 #customize-preview {
    857     -webkit-transition: all 0.2s;
    858     transition: all 0.2s;
    859 }
    860 
    861 body.adding-menu-items #available-menu-items {
    862     left: 0;
    863     visibility: visible;
    864 }
    865 
    866 body.adding-menu-items .wp-full-overlay-main {
    867     left: 300px;
    868 }
    869 
    870 body.adding-menu-items #customize-preview {
    871     opacity: 0.4;
    872 }
    873 
    874 .menu-item-handle .spinner {
    875     display: none;
    876     float: left;
    877     margin: 0 8px 0 0;
    878 }
    879 
    880 .nav-menu-inserted-item-loading .spinner {
    881     display: block;
    882 }
    883 
    884 .nav-menu-inserted-item-loading .menu-item-handle .item-type {
    885     padding: 0 0 0 8px;
    886 }
    887 
    888 .nav-menu-inserted-item-loading .menu-item-handle,
    889 .added-menu-item .menu-item-handle.loading {
    890     padding: 10px 15px 10px 8px;
    891     cursor: default;
    892     opacity: .5;
    893     background: #fff;
    894     color: #727773;
    895 }
    896 
    897 .added-menu-item .menu-item-handle {
    898     -webkit-transition-property: opacity, background, color;
    899     transition-property: opacity, background, color;
    900     -webkit-transition-duration: 1.25s;
    901     transition-duration: 1.25s;
    902     -webkit-transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 );
    903     transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 ); /* Replacement for .hide().fadeIn('slow') in JS to add emphasis when it's loaded. */
    904 }
    905 
    906 /* Add/delete Menus */
    907 
    908 /* @todo update selector */
    909 #accordion-section-add_menu {
    910     margin: 15px 12px;
    911 }
    912 
    913 .new-menu-section-content {
    914     display: none;
    915     padding: 15px 0 0 0;
    916     clear: both;
    917 }
    918 
    919 /* @todo update selector */
    920 #accordion-section-add_menu .accordion-section-title {
    921     padding-left: 45px;
    922 }
    923 
    924 /* @todo update selector */
    925 #accordion-section-add_menu .accordion-section-title:before {
    926     font: normal 20px/1 dashicons;
    927     position: absolute;
    928     top: 12px;
    929     left: 14px;
    930     content: "\f132";
    931 }
    932 
    933 #create-new-menu-submit {
    934     float: right;
    935     margin: 0 0 12px 0;
    936 }
    937 
    938 .menu-delete-item {
    939     display: block;
    940     float: left;
    941     padding: 1em 0;
    942     width: 100%;
    943 }
    944 
    945 li.assigned-to-menu-location .menu-delete-item {
    946     display: none;
    947 }
    948 
    949 li.assigned-to-menu-location .add-new-menu-item {
    950     margin-bottom: 1em;
    951 }
    952 
    953 .menu-delete {
    954     color: #a00;
    955     cursor: pointer;
    956     text-decoration: underline;
    957 }
    958 
    959 .menu-delete:hover,
    960 .menu-delete:focus {
    961     color: #f00;
    962     text-decoration: none;
    963 }
    964 
    965 .menu-delete:focus {
    966     -webkit-box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    967     box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
    968 }
    969 
    970 .menu-item-handle {
    971     margin-top: -1px;
    972 }
    973 .ui-sortable-disabled .menu-item-handle {
    974     cursor: default;
    975 }
    976 
    977 .menu-item-handle:hover {
    978     position: relative;
    979     z-index: 10;
    980     color: #0073aa;
    981 }
    982 
    983 .menu-item-handle:hover .item-type,
    984 .menu-item-handle:hover .item-edit,
    985 #available-menu-items .menu-item-handle:hover .item-add {
    986     color: #0073aa;
    987 }
    988 
    989 .menu-item-edit-active .menu-item-handle {
    990     border-color: #999;
    991     border-bottom: none;
    992 }
    993 
    994 .customize-control-nav_menu_item {
    995     margin-bottom: 0;
    996 }
    997 
    998 .customize-control-nav_menu {
    999     margin-top: 12px;
    1000 }
    1001 
    1002 #available-menu-items .customize-section-title {
    1003     display: none;
    1004 }
    1005835
    1006836@media screen and ( max-width: 782px ) {
     
    1011841
    1012842@media screen and ( max-width: 640px ) {
    1013     body.adding-menu-items div#available-menu-items {
    1014         top: 46px;
    1015         left: 0;
    1016         z-index: 10;
    1017         width: 100%;
    1018     }
    1019 
    1020843    #available-menu-items #available-menu-items-search .accordion-section-content {
    1021844        top: 133px;
    1022845    }
    1023 
    1024     #available-menu-items .customize-section-title {
    1025         display: block;
    1026         margin: 0;
    1027     }
    1028 
    1029     #available-menu-items .customize-section-back {
    1030         height: 69px;
    1031     }
    1032 
    1033     #available-menu-items .customize-section-title h3 {
    1034         font-size: 20px;
    1035         font-weight: 200;
    1036         padding: 9px 10px 12px 14px;
    1037         margin: 0;
    1038         line-height: 24px;
    1039         color: #555;
    1040         display: block;
    1041         overflow: hidden;
    1042         white-space: nowrap;
    1043         text-overflow: ellipsis;
    1044     }
    1045 
    1046     #available-menu-items .customize-section-title .customize-action {
    1047         font-size: 13px;
    1048         display: block;
    1049         font-weight: 400;
    1050         overflow: hidden;
    1051         white-space: nowrap;
    1052         text-overflow: ellipsis;
    1053     }
    1054 }
     846}
  • trunk/src/wp-admin/css/customize-widgets.css

    r35304 r36291  
    8080}
    8181
    82 .widget-top {
    83     cursor: move;
    84 }
    85 
    8682.customize-control-widget_form.expanded a.widget-action:after {
    8783    content: "\f142";
     
    10096}
    10197
     98.widget-top,
    10299.customize-control-widget_form .widget .customize-control-title {
    103100    cursor: move;
     
    127124}
    128125
    129 .widget-reorder-nav span {
    130     position: relative;
    131     overflow: hidden;
    132     float: left;
    133     display: block;
    134     width: 33px; /* was 42px for mobile */
    135     height: 43px;
    136     color: #82878c;
    137     text-indent: -9999px;
    138     cursor: pointer;
    139     outline: none;
    140 }
    141 
    142 .widget-reorder-nav span:before {
    143     display: inline-block;
    144     position: absolute;
    145     top: 0;
    146     right: 0;
    147     width: 100%;
    148     height: 100%;
    149     font: normal 20px/43px dashicons;
    150     text-align: center;
    151     text-indent: 0;
    152     -webkit-font-smoothing: antialiased;
    153     -moz-osx-font-smoothing: grayscale;
    154 }
    155 
    156 .widget-reorder-nav span:hover,
    157 .widget-reorder-nav span:focus {
    158     color: #444;
    159     background: #eee;
    160 }
    161 
    162126.move-widget:before {
    163127    content: "\f504";
    164 }
    165 
    166 .move-widget-down:before {
    167     content: "\f347";
    168 }
    169 
    170 .move-widget-up:before {
    171     content: "\f343";
    172 }
    173 
    174 #customize-theme-controls .first-widget .move-widget-up,
    175 #customize-theme-controls .last-widget .move-widget-down {
    176     color: #d5d5d5;
    177     cursor: default;
    178128}
    179129
     
    257207 */
    258208
    259 .wp-full-overlay-main {
    260     right: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */
    261     width: 100%;
    262 }
    263 
    264 body.adding-widget .add-new-widget,
    265 body.adding-widget .add-new-widget:hover {
    266     background: #eee;
    267     border-color: #999;
    268     color: #32373c;
    269     -webkit-box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
    270     box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
    271 }
    272 body.adding-widget .add-new-widget:before {
    273     -webkit-transform: rotate(45deg);
    274     -ms-transform: rotate(45deg);
    275     transform: rotate(45deg);
    276 }
    277 
    278 #available-widgets .widget {
    279     position: static;
    280 }
    281 
    282209/* override widgets admin page rules in wp-admin/css/wp-admin.css */
    283210#widgets-left #available-widgets .widget {
     
    286213}
    287214
    288 #available-widgets {
    289     position: absolute;
    290     top: 0;
    291     bottom: 0;
    292     left: -301px;
    293     visibility: hidden;
    294     overflow: auto;
    295     width: 300px;
    296     margin: 0;
    297     z-index: 1;
    298     background: #eee !important;
    299     -webkit-transition: left .18s;
    300     transition: left .18s;
    301     border-right: 1px solid #ddd;
    302 }
    303 
    304215.ios #available-widgets {
    305216    -webkit-transition: left 0s;
    306217    transition: left 0s;
    307 }
    308 
    309 #available-widgets-list {
    310     top: 46px;
    311     position: absolute;
    312     overflow: auto;
    313     bottom: 0;
    314     width: 100%;
    315 }
    316 
    317 #available-widgets-filter {
    318     position: fixed;
    319     top: 0;
    320     z-index: 1;
    321     width: 300px;
    322     height: 46px;
    323     padding: 8px 17px 7px 13px;
    324     background: #eee;
    325     border-bottom: 1px solid #e4e4e4;
    326     -webkit-box-sizing: border-box;
    327     -moz-box-sizing: border-box;
    328     box-sizing: border-box;
    329 }
    330 
    331 #available-widgets-filter input {
    332     padding: 5px 10px 2px 10px;
    333     width: 100%;
    334 }
    335 
    336 #available-widgets .widget-tpl {
    337     position: relative;
    338     padding: 20px 15px 20px 60px;
    339     background: #fff;
    340     border-bottom: 1px solid #e4e4e4;
    341     cursor: pointer;
    342     display: none;
    343218}
    344219
     
    347222    background: #eee;
    348223    border-bottom-color: #ccc;
    349 }
    350 
    351 #available-widgets .widget-top,
    352 #available-widgets .widget-top:hover {
    353     border: none;
    354     background: transparent;
    355     -webkit-box-shadow: none;
    356     box-shadow: none;
    357224}
    358225
     
    544411#available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; }
    545412
    546 #available-widgets .customize-section-title {
    547     display: none;
    548 }
    549 
    550413@media screen and (max-height: 700px) and (min-width: 981px) {
    551414    .customize-control-widget {
     
    580443    }
    581444}
    582 
    583 @media screen and ( max-width: 640px ) {
    584     body.adding-widget div#available-widgets {
    585         top: 46px;
    586         left: 0;
    587         z-index: 10;
    588         width: 100%;
    589     }
    590 
    591     #available-widgets .customize-section-title {
    592         display: block;
    593         margin: 0;
    594     }
    595 
    596     #available-widgets .customize-section-back {
    597         height: 69px;
    598     }
    599 
    600     #available-widgets .customize-section-title h3 {
    601         font-size: 20px;
    602         font-weight: 200;
    603         padding: 9px 10px 12px 14px;
    604         margin: 0;
    605         line-height: 24px;
    606         color: #555;
    607         display: block;
    608         overflow: hidden;
    609         white-space: nowrap;
    610         text-overflow: ellipsis;
    611     }
    612 
    613     #available-widgets .customize-section-title .customize-action {
    614         font-size: 13px;
    615         display: block;
    616         font-weight: 400;
    617         overflow: hidden;
    618         white-space: nowrap;
    619         text-overflow: ellipsis;
    620     }
    621 
    622     #available-widgets-filter {
    623         position: relative;
    624         width: 100%;
    625         background: #fff;
    626         height: auto;
    627         padding: 10px 15px;
    628     }
    629 
    630     #available-widgets-list {
    631         top: 140px;
    632     }
    633 }
  • trunk/src/wp-admin/css/widgets.css

    r35317 r36291  
    156156}
    157157
    158 #widgets-left #available-widgets,
     158#widgets-left .widgets-holder-wrap,
    159159div#widgets-left .widget-holder {
    160160    background: transparent;
Note: See TracChangeset for help on using the changeset viewer.