Making WordPress.org


Ignore:
Timestamp:
08/30/2022 05:46:27 AM (2 years ago)
Author:
dufresnesteven
Message:

wporg-themes: Add responsive viewports to theme preview.

Props fahimmurshed, otto42, mapk, melchoyce.
Closes #5063.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss

    r11963 r12033  
    587587}
    588588
    589 .theme-install-overlay iframe {
    590     border: 0;
    591     height: 100%;
    592     width: 100%;
    593     z-index: 20;
    594     transition: opacity 0.3s;
    595 }
    596 
    597 
    598589/*------------------------------------------------------------------------------
    599590  16.2 - Install Themes
     
    10141005}
    10151006
    1016 /* Animations */
    1017 .wp-full-overlay,
    1018 .wp-full-overlay-sidebar,
    1019 .wp-full-overlay .collapse-sidebar,
    1020 .wp-full-overlay-main {
    1021     transition-property: left, right, top, bottom, width, margin;
    1022     transition-duration: 0.2s;
     1007.wp-full-overlay .devices {
     1008    position: absolute;
     1009    bottom: 20px;
     1010    right: 0;
     1011    z-index: 50;
     1012    display: block;
     1013    height: 25px;
     1014    padding: 0;
     1015    color: #777;
     1016    text-decoration: none;
     1017}
     1018
     1019.wp-full-overlay-footer .devices button {
     1020    display: inline-block;
     1021    cursor: pointer;
     1022    background: transparent;
     1023    border: none;
     1024    height: 46px;
     1025    padding: 0 3px;
     1026    margin: 0 0 0 -4px;
     1027    box-shadow: none;
     1028    border-top: 1px solid transparent;
     1029    border-bottom: 4px solid transparent;
     1030    transition:
     1031        .15s color ease-in-out,
     1032        .15s background-color ease-in-out,
     1033        .15s border-color ease-in-out;
     1034}
     1035
     1036.wp-full-overlay-footer .devices button:focus {
     1037    box-shadow: none;
     1038    outline: none;
     1039}
     1040
     1041.wp-full-overlay-footer .devices button:before {
     1042    display: inline-block;
     1043    -webkit-font-smoothing: antialiased;
     1044    font: normal 20px/30px "dashicons";
     1045    vertical-align: top;
     1046    margin: 3px 0;
     1047    padding: 4px 8px;
     1048    color: #646970;
     1049}
     1050
     1051.wp-full-overlay-footer .devices button.active {
     1052    border-bottom-color: #1d2327;
     1053}
     1054
     1055.wp-full-overlay-footer .devices button:hover,
     1056.wp-full-overlay-footer .devices button:focus {
     1057    background-color: #fff;
     1058}
     1059
     1060.wp-full-overlay-footer .devices button:focus,
     1061.wp-full-overlay-footer .devices button.active:hover {
     1062    border-bottom-color: #2271b1;
     1063}
     1064
     1065.wp-full-overlay-footer .devices button.active:before {
     1066    color: #1d2327;
     1067}
     1068
     1069.wp-full-overlay-footer .devices button:hover:before,
     1070.wp-full-overlay-footer .devices button:focus:before {
     1071    color: #2271b1;
     1072}
     1073
     1074.wp-full-overlay-footer .devices .preview-desktop:before {
     1075    content: "\f472";
     1076}
     1077
     1078.wp-full-overlay-footer .devices .preview-tablet:before {
     1079    content: "\f471";
     1080}
     1081
     1082.wp-full-overlay-footer .devices .preview-mobile:before {
     1083    content: "\f470";
     1084}
     1085
     1086.wp-full-overlay-main .preview-mobile {
     1087    margin: 20vh auto auto;
     1088    width: 320px;
     1089    height: 480px;
     1090}
     1091
     1092.wp-full-overlay-main .preview-tablet {
     1093    margin: 0 auto;
     1094    width: 720px; /* Size is loosely based on a typical "tablet" device size. Intentionally ambiguous - this does not represent any particular device precisely. */
     1095    height: 1080px;
    10231096}
    10241097
     
    10641137#customize-container iframe,
    10651138.theme-install-overlay iframe {
     1139    display: block;
     1140    margin: 0 auto;
    10661141    height: calc( 100% - 32px );
    10671142    width: 100%;
    10681143    z-index: 20;
    1069     transition: opacity 0.3s;
     1144    transition: opacity 0.3s, width 0.3s, height .3s, margin .3s;
     1145}
     1146
     1147.theme-install-overlay iframe {
     1148    position: relative;
     1149    border: none;
    10701150}
    10711151
     
    11491229
    11501230.theme-install-overlay .wp-full-overlay-main {
    1151     background: #fff url(/wp-admin/images/spinner.gif) no-repeat center center;
    1152     background-size: 20px 20px;
    1153 }
     1231    background: #1d2327;
     1232}
     1233
     1234.theme-install-overlay .wp-full-overlay-main::before {
     1235    content: '';
     1236    display: inline-block;
     1237    margin-left: -10px;
     1238    margin-top: -10px;
     1239    left: 50%;
     1240    top: 50%;
     1241    width: 20px;
     1242    height: 20px;
     1243    border-radius: 50%;
     1244    position: relative;
     1245    background: #1d2327;
     1246    box-shadow: inset 4px 4px 0 7px #fff;
     1247    animation: rotation 800ms linear infinite;
     1248    z-index: 1;
     1249}
     1250
     1251@keyframes rotation {
     1252    0% {
     1253        transform: rotate(0deg);
     1254    }
     1255    100% {
     1256        transform: rotate(360deg);
     1257    }
     1258}
    11541259
    11551260/* Spinner */
     
    15691674
    15701675    .spinner,
    1571     .customize-loading #customize-container,
    1572     .theme-install-overlay .wp-full-overlay-main {
     1676    .customize-loading #customize-container {
    15731677        background-image: url(/wp-admin/images/spinner-2x.gif);
    15741678    }
Note: See TracChangeset for help on using the changeset viewer.