Skip to:
Content

BuddyPress.org


Ignore:
Timestamp:
09/16/2019 08:38:34 PM (6 years ago)
Author:
imath
Message:

Hello BuddyPress Modal for BuddyPress 5.0.0

Use the WordPress modal used to display plugin details to display information about new BuddyPress major release.

Props johnjamesjacoby, dcavins, boonebgorges

Fixes #8132

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/bp-core/admin/sass/hello.scss

    r12236 r12458  
    10102.0 - Dashicons
    11113.0 - Elements
    12     3.1 - Backdrop and container
    13     3.2 - Modal footer
    14     3.3 - Modal header
    15     3.4 - Modal content
     12    3.1 - Modal footer
     13    3.2 - Modal content
    16144.0 - Content styles
    17     4.1 - Backdrop and container
    18     4.2 - Footer content
    19     4.3 - Header content
    20     4.4 - Content content
     15    4.1 - Footer content
     16    4.2 - Header content
     17    4.3 - Content content
    21185.0 - Media
    22196.0 - Media Queries
    … …  
    3431}
    3532
    36 #bp-hello-container {
    37 
    38     a {
    39         color: var(--bp-hello-color-primary);
    40 
    41         &:hover {
    42             -webkit-transition: all 0.1s ease-in-out;
    43             -o-transition: all 0.1s ease-in-out;
    44             transition: all 0.1s ease-in-out;
    45             color: rgb(0, 0, 0);
    46         }
    47     }
    48 
    49     .bp-hello-header {
    50 
    51         h1 {
    52             line-height: 1.7;
    53             font-size: 21px;
    54             font-weight: 400;
    55         }
    56     }
    57 }
    58 
    5933.bp-hello-content {
    6034
    … …  
    6236        font-size: 16px;
    6337    }
     38
     39    ul,
     40    ol {
     41        list-style: inherit;
     42    }
     43
     44    h3 {
     45        font-size: 1.1em;
     46        font-weight: 500;
     47    }
    6448}
    6549
    … …  
    6751 * 2.0 - Dashicons
    6852 *----------------------------------------------------------------------------*/
    69 .bp-hello-close {
    70 
    71     .button {
    72         padding: 5px !important;
    73     }
    74 
    75     .close-modal {
    76 
    77         &:before {
    78             content: "\f158";
    79             color: #23282d; /* wp toolbar */
    80             font: 400 1.5em/1 dashicons;
    81             speak: none;
    82             -webkit-font-smoothing: antialiased;
    83             -moz-osx-font-smoothing: grayscale;
    84             background-image: none !important;
    85         }
    86 
    87         &:focus:before,
    88         &:hover:before {
    89             -webkit-transition: all 0.1s ease-in-out;
    90             -o-transition: all 0.1s ease-in-out;
    91             transition: all 0.1s ease-in-out;
    92             color: var(--bp-hello-color-primary);
    93         }
    94     }
    95 }
    96 
    9753.bp-hello-social {
    9854
    … …  
    12581}
    12682
     83div.dashicons {
     84
     85    width: fit-content;
     86
     87    &.big {
     88        font-size: 128px;
     89        display: block;
     90        color: var(--bp-hello-color-primary);
     91        height: 128px;
     92        width: 128px;
     93    }
     94}
     95
    12796/*------------------------------------------------------------------------------
    12897 * 3.0 - Elements
    … …  
    13099
    131100/*
    132  * 3.1 - Backdrop and container
    133  */
    134 #bp-hello-backdrop {
    135     position: fixed;
    136     top: 0;
    137     left: 0;
    138     right: 0;
    139     bottom: 0;
    140     z-index: 9998;
    141 
    142     display: none;
    143 }
    144 
    145 #bp-hello-container {
    146     position: fixed;
    147     top: 0;
    148     bottom: 80px;
    149     z-index: 99999;
    150 }
    151 
    152 .bp-disable-scroll {
    153     overflow: hidden;
    154 }
    155 
    156 /*
    157  * 3.2 - Modal footer
    158  */
    159 .bp-hello-footer {
    160     display: -webkit-box;
    161     display: -ms-flexbox;
     101 * 3.1 - Modal footer
     102 */
     103#plugin-information-footer {
     104
    162105    display: flex;
    163     -ms-flex-wrap: wrap;
    164106    flex-wrap: wrap;
    165 
    166     height: 58px;
    167     max-height: 58px;
     107    padding: 0 16px;
     108    height: auto;
     109
     110    .dashicons-heart {
     111        color: #be3631;
     112    }
    168113}
    169114
    … …  
    197142
    198143/*
    199  * 3.3 - Modal header
    200  */
    201 .bp-hello-header {
    202     height: 58px;
    203     max-height: 58px;
    204 }
    205 
    206 /*
    207  * 3.4 - Modal content
    208  */
     144 * 3.2 - Modal content
     145 */
     146
     147#bp-hello-container {
     148    display: none;
     149}
     150
    209151.bp-hello-content {
    210152    padding: 0 25px;
    211 
    212     // Force scrolling.
    213     height: calc(100% - 58px);
    214     overflow-y: auto;
    215     -webkit-overflow-scrolling: touch;
     153    padding-bottom: 20px;
     154}
     155
     156#dynamic-content {
     157    padding-bottom: 40px;
     158    display: none;
     159
     160    &.show {
     161        display: block;
     162    }
     163}
     164
     165.plugin-details-modal #TB_title { /* stylelint-disable-line */
     166    height: 0;
     167    background: none;
     168    border: none;
     169}
     170
     171#TB_window.plugin-details-modal.thickbox-loading:before { /* stylelint-disable-line */
     172    z-index: 10;
     173    margin-top: 40px;
     174    background-color: none;
     175}
     176
     177.bp-hello-aligncenter * {
     178    margin: 10px auto;
     179}
     180
     181.bp-hello-alignleft {
     182    float: left;
     183
     184    &:after {
     185        content: "";
     186        clear: left;
     187    }
     188}
     189
     190.bp-hello-alignright {
     191    float: right;
     192
     193    &:after {
     194        content: "";
     195        clear: right;
     196    }
     197}
     198
     199.bp-hello-divider {
     200    clear: both;
     201    border: none;
     202    margin-bottom: 20px;
    216203}
    217204
    … …  
    221208
    222209/*
    223  * 4.1 - Backdrop and container
    224  */
    225 #bp-hello-backdrop {
    226     background-color: rgba(0, 0, 0, 0.8);
    227     -webkit-transition: opacity 0.15s ease-out;
    228     -o-transition: opacity 0.15s ease-out;
    229     transition: opacity 0.15s ease-out;
    230 }
    231 
    232 #bp-hello-container {
    233     background-color: rgb(255, 255, 255);
    234 }
    235 
    236 /*
    237  * 4.2 - Footer content
    238  */
    239 .bp-hello-footer {
    240     border-radius: 0 0 3px 3px;
    241     background-color: rgb(255, 255, 255);
    242     border-top: 1px solid var(--bp-hello-color-secondary);
    243     padding: 6px 25px;
    244 
    245     p {
    246         font-size: 15px;
    247     }
    248 }
    249 
     210 * 4.1 - Footer content
     211 */
    250212.bp-hello-social-cta {
    251213    text-align: left;
    … …  
    267229
    268230/*
    269  * 4.3 - Header content
    270  */
    271 .bp-hello-header {
    272     padding: 6px 25px;
    273 
    274     h1 {
    275         width: calc(100% - 51px);  // Approx. width of "X" button block.
    276     }
    277 }
    278 
    279 #bp-hello-container {
    280 
    281     .bp-hello-header {
    282         border-bottom: 1px solid var(--bp-hello-color-secondary);
    283     }
    284 }
    285 
    286 .bp-hello-title {
    287     text-align: left;
    288 }
    289 
    290 .bp-hello-close {
    291     position: absolute;
    292     top: 20px;
    293     right: 25px;
    294     text-align: right;
    295 }
    296 
    297 /*
    298  * 4.4 - Content content
     231 * 4.2 - Header content
     232 */
     233#plugin-information-title.with-banner {
     234    background-image: url(https://ps.w.org/buddypress/assets/banner-772x250.png);
     235}
     236
     237/*
     238 * 4.3 - Content content
    299239 */
    300240.bp-hello-content {
    … …  
    315255        width: 100%;
    316256    }
     257
     258    .bp-hello-alignleft img,
     259    .bp-hello-alignright img {
     260        max-width: 200px;
     261    }
    317262}
    318263
    … …  
    326271@media only screen and (min-width: 1024px) {
    327272
    328     #bp-hello-backdrop {
    329         display: block;
    330     }
    331 
    332     #bp-hello-container {
    333         position: fixed;
    334         top: 60px;
    335         left: var(--bp-hello-container-size);
    336         right: var(--bp-hello-container-size);
    337         bottom: 30px;
    338         z-index: 9999;
    339 
    340         border-radius: 3px;
    341 
    342         .bp-hello-header {
    343 
    344             h1 {
    345                 line-height: inherit;
    346             }
    347         }
    348     }
    349 
    350     .bp-hello-header {
    351         height: auto;
    352         max-height: inherit;
    353         padding: 6px 30px;
    354     }
    355 
    356     .bp-hello-close {
    357         right: 30px;
    358 
    359         .close-modal:before {
    360             line-height: 0.7;
    361         }
    362     }
    363 
    364     .bp-hello-footer {
    365         position: fixed; // Fixed position above "content" div.
    366         left: var(--bp-hello-container-size);
    367         right: var(--bp-hello-container-size);
    368         bottom: 30px;
    369         z-index: 10000; // See #bp-hello-backdrop
    370 
    371         height: auto;
    372         max-height: inherit;
    373 
    374         padding: 6px 30px;
    375     }
    376 
    377273    .bp-hello-content {
    378         // Very very approx. height of header and footer.
    379         height: calc(100% - 90px);
    380         padding: 0 30px;
    381 
    382         p {
    383             font-size: 14px;
    384         }
     274        padding: 0 30px 20px;
     275    }
     276
     277    .bp-hello-content p {
     278        font-size: 14px;
    385279    }
    386280}
    … …  
    389283 * 6.2 - Desktop Large
    390284 */
    391 @media screen and (min-width: 1280px) {
    392 
    393     #bp-hello-container,
    394     .bp-hello-footer {
    395         // Approx. max-width of modal at Desktop Medium size.
    396         left: calc((100% - 896px) / 2);
    397         right: calc((100% - 896px) / 2);
    398     }
    399 }
     285@media only screen and ( -webkit-min-device-pixel-ratio: 1.5 ) {
     286
     287    #plugin-information-title.with-banner {
     288        background-image: url(https://ps.w.org/buddypress/assets/banner-1544x500.png);
     289    }
     290}
Note: See TracChangeset for help on using the changeset viewer.