WordPress.org

Make WordPress Core

Ticket #38651: 38651.4.diff

File 38651.4.diff, 3.9 KB (added by MarcosAlexandre, 3 years ago)

Add some more styles and other styles @media

  • src/wp-includes/css/customize-preview.css

     
    3131
    3232.widget .customize-partial-edit-shortcut button:active,
    3333.customize-partial-edit-shortcut button:active {
    34         padding: 0;
    35         border: 0;
     34        padding: 3;
     35        border: 1px solid #0085ba;
    3636}
    3737
    3838/* Styles for the actual shortcut */
     
    3939.widget .customize-partial-edit-shortcut button,
    4040.customize-partial-edit-shortcut button {
    4141        position: absolute;
    42         left: -36px;
     42        left: -30px;
     43        top: 2px;
    4344        color: #fff;
    4445        width: 30px;
    4546        height: 30px;
     
    5556        -webkit-box-shadow: 0 2px 1px rgba(46,68,83,0.15);
    5657        box-shadow: 0 2px 1px rgba(46,68,83,0.15);
    5758        text-align: center;
    58         display: -webkit-box;
    59         display: -webkit-flex;
    60         display: -moz-box;
    61         display: -ms-flexbox;
    62         display: flex;
    63         -webkit-box-orient: horizontal;
    64         -webkit-box-direction: normal;
    65         -webkit-flex-direction: row;
    66         -moz-box-orient: horizontal;
    67         -moz-box-direction: normal;
    68         -ms-flex-direction: row;
    69         flex-direction: row;
    70         -webkit-box-pack: center;
    71         -webkit-justify-content: center;
    72         -moz-box-pack: center;
    73         -ms-flex-pack: center;
    74         justify-content: center;
    75         -webkit-box-align: center;
    76         -webkit-align-items: center;
    77         -moz-box-align: center;
    78         -ms-flex-align: center;
    79         align-items: center;
    8059        cursor: pointer;
    81         padding: 0;
     60        box-sizing: border-box;
     61        padding: 3px;
    8262        -webkit-animation-fill-mode: both;
    8363        animation-fill-mode: both;
    8464        -webkit-animation-duration: .4s;
     
    9171                     -1px 0 1px #006799;
    9272}
    9373
     74#site-navigation .customize-partial-edit-shortcut button {
     75        top: 9px;
     76        left: -13px;                   
     77 }
     78
     79#content .customize-partial-edit-shortcut button {
     80        left: 15px;
     81        top: 92px;
     82}
     83
     84.footer-widget-1 .customize-partial-edit-shortcut button,
     85.footer-widget-2 .customize-partial-edit-shortcut button {
     86        top: 10px;
     87        left: -30px;
     88}
     89
     90.menu-social-container .customize-partial-edit-shortcut button {
     91        top: 6px;
     92        left: -30px;
     93 }
     94
    9495.customize-partial-edit-shortcut button svg {
    9596        fill: #fff;
    9697        min-width: 20px;
     
    123124}
    124125
    125126.customize-partial-edit-shortcut-left-margin.customize-partial-edit-shortcut button {
    126         left: 0;
     127        left: 2px;
     128        top: 2px;
    127129}
    128130
    129131@-webkit-keyframes customize-partial-edit-shortcut-bounce-appear {
     
    263265}
    264266
    265267@media screen and (max-width:800px) {
     268        .widget .customize-partial-edit-shortcut button,
    266269        .customize-partial-edit-shortcut button {
    267                 left: -18px; /* Assume there will be less of a margin available on smaller screens */
     270                left: -36px; /* Assume there will be less of a margin available on smaller screens */
    268271        }
     272
     273        #site-navigation .customize-partial-edit-shortcut button {
     274                top: -40px;
     275                left: 292px;                   
     276        }
     277
     278        #content .customize-partial-edit-shortcut {
     279                top: -33px;
     280                left: -14px;
     281                       
     282        }
     283
     284        .footer-widget-1 .customize-partial-edit-shortcut button,
     285        .footer-widget-2 .customize-partial-edit-shortcut button {
     286                top: 14px;
     287                left: -34px;
     288        }
     289
     290        .menu-social-container .customize-partial-edit-shortcut button {
     291                top: 6px;
     292                left: -34px;
     293        }
    269294}
     295
     296@media screen and (max-width:320px) {
     297        .widget .customize-partial-edit-shortcut button,
     298        .customize-partial-edit-shortcut button {
     299                        left: -29px; /* Assume there will be less of a margin available on smaller screens */
     300        }
     301
     302        #site-navigation .customize-partial-edit-shortcut button {
     303                top: -40px;
     304                left: 92px;                     
     305        }
     306
     307        #content .customize-partial-edit-shortcut {
     308                top: -70px;
     309                left: -14px;
     310                       
     311        }
     312
     313        .footer-widget-1 .customize-partial-edit-shortcut button,
     314        .footer-widget-2 .customize-partial-edit-shortcut button {
     315                top: 14px;
     316                left: -30px;                   
     317        }
     318        .menu-social-container .customize-partial-edit-shortcut button {
     319                top: 6px;
     320                left: -30px;
     321        }
     322}
     323}
     324 No newline at end of file