Make WordPress Core

Changeset 39229


Ignore:
Timestamp:
11/14/2016 07:11:35 PM (7 years ago)
Author:
westonruter
Message:

Customize: Maximize height of Custom CSS textarea without causing doubled scrollbars.

Textarea will fill vertical height of Custom CSS section for browsers that support calc() and when plugins don't add other controls to the section. Also run CSS autoprefixer.

Props michaelarestad, westonruter.
See #35395.
Fixes #38755.

Location:
trunk/src
Files:
2 edited

Legend:

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

    r39194 r39229  
    11361136 * Custom CSS Section
    11371137 *
    1138  * Modifications to the Section Container to
    1139  * make the textarea full-width.
     1138 * Modifications to the Section Container to make the textarea full-width and
     1139 * full-height, if the control is the only control in the section.
    11401140 */
    1141 #customize-theme-controls #sub-accordion-section-custom_css {
    1142     padding-left: 0;
    1143     padding-right: 0;
    1144 }
    1145 
    1146 #customize-theme-controls #sub-accordion-section-custom_css .customize-section-title {
    1147     margin-left: 0;
    1148 }
    1149 
    1150 #customize-theme-controls #sub-accordion-section-custom_css .customize-control-title,
    1151 #customize-theme-controls #sub-accordion-section-custom_css .notice {
    1152     margin-left: 10px;
    1153     margin-right: 10px;
    1154 }
    1155 #customize-theme-controls #sub-accordion-section-custom_css textarea {
     1141
     1142#customize-controls .customize-section-description-container.section-meta.customize-info {
     1143    border-bottom: none;
     1144}
     1145
     1146#sub-accordion-section-custom_css .customize-control-notifications-container {
     1147    margin-bottom: 15px;
     1148}
     1149
     1150#customize-control-custom_css textarea {
     1151    display: block;
     1152    font-family: Consolas, Monaco, monospace;
     1153    font-size: 12px;
     1154    padding: 6px 8px;
     1155    height: 500px;
    11561156    -moz-tab-size: 4;
    11571157    -o-tab-size: 4;
     
    11591159}
    11601160
    1161 #sub-accordion-section-custom_css .customize-control-notifications-container {
    1162     margin-bottom: 15px;
    1163 }
    1164 
    1165 #sub-accordion-section-custom_css textarea {
     1161.customize-section-description-container + #customize-control-custom_css:last-child textarea {
    11661162    border-right: 0;
    11671163    border-left: 0;
    1168     font-family: Consolas, Monaco, monospace;
    1169     font-size: 12px;
    1170     padding: 6px 8px;
    1171     height: 553px;
     1164    height: -webkit-calc( 100vh - 185px );
     1165    height: calc( 100vh - 185px );
     1166    resize: none;
     1167}
     1168.customize-section-description-container + #customize-control-custom_css:last-child {
     1169    margin-left: -12px;
     1170    width: 299px;
     1171    margin-bottom: -12px;
     1172}
     1173
     1174@media screen and ( max-width: 640px ) {
     1175    .customize-section-description-container + #customize-control-custom_css:last-child {
     1176        margin-left: 0;
     1177        margin-right: 0;
     1178        width: 100%;
     1179    }
     1180    .customize-section-description-container + #customize-control-custom_css:last-child textarea {
     1181        height: -webkit-calc( 100vh - 140px );
     1182        height: calc( 100vh - 140px );
     1183        width: 100%;
     1184        border: solid 1px #ddd;
     1185    }
    11721186}
    11731187
  • trunk/src/wp-includes/css/customize-preview.css

    r39228 r39229  
    5656    text-align: center;
    5757    cursor: pointer;
     58    -webkit-box-sizing: border-box;
     59    -moz-box-sizing: border-box;
    5860    box-sizing: border-box;
    5961    padding: 3px;
     
    8789
    8890.customize-partial-edit-shortcut button:focus {
     91    -webkit-box-shadow: 0 0 0 2px #008ec2;
    8992    box-shadow: 0 0 0 2px #008ec2;
    9093}
Note: See TracChangeset for help on using the changeset viewer.