Skip to:
Content

BuddyPress.org


Ignore:
Timestamp:
09/16/2019 08:38:34 PM (7 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.