Skip to:
Content

BuddyPress.org

Changeset 13710


Ignore:
Timestamp:
01/22/2024 06:11:58 AM (3 years ago)
Author:
imath
Message:

Create a specific CSS file for BP Tooltips

  • Move BP Tooltips default CSS rules into their own BP Core file so that it's easier to add this file as a style dependency.
  • Let BP Template Packs override this BP Core file and create a new bp-tooltips.css file into BP Nouveau to do so.
  • Use this BP Core file as a dependency to Admin's Hello styles as well as BP Template packs main styles.
  • Enqueue BP Tooltips CSS rules when Block widgets are rendered.

Props jnie

Fixes #9070 (branch 12.0)

Location:
branches/12.0
Files:
7 added
1 deleted
24 edited

Legend:

Unmodified
Added
Removed

  • branches/12.0/Gruntfile.js

    r13704 r13710  
    3636                        '!bp-templates/bp-nouveau/css/primary-nav.css',
    3737                        '!bp-templates/bp-nouveau/sass/priority-nav.scss',
     38                        '!bp-templates/bp-nouveau/sass/bp-tooltips.scss',
    3839                        '!bp-core/admin/css/hello.css',
    3940                        '!src/js/**',
    … …  
    120121                                ext: '.css',
    121122                                flatten: true,
    122                                 src: ['bp-templates/bp-nouveau/sass/buddypress.scss', 'bp-templates/bp-nouveau/sass/twenty*.scss', 'bp-templates/bp-nouveau/sass/primary-nav.scss', 'bp-templates/bp-nouveau/sass/priority-nav.scss'],
     123                                src: ['bp-templates/bp-nouveau/sass/buddypress.scss', 'bp-templates/bp-nouveau/sass/twenty*.scss', 'bp-templates/bp-nouveau/sass/primary-nav.scss', 'bp-templates/bp-nouveau/sass/priority-nav.scss', 'bp-templates/bp-nouveau/sass/bp-tooltips.scss'],
    123124                                dest: SOURCE_DIR + 'bp-templates/bp-nouveau/css/'
     125                        },
     126                        core: {
     127                                cwd: SOURCE_DIR,
     128                                extDot: 'last',
     129                                expand: true,
     130                                ext: '.css',
     131                                flatten: true,
     132                                src: ['bp-core/sass/*.scss'],
     133                                dest: SOURCE_DIR + 'bp-core/css/'
    124134                        },
    125135                        admin: {

  • branches/12.0/src/bp-activity/bp-activity-blocks.php

    r13537 r13710  
    157157        $GLOBALS['activities_template'] = $reset_activities_template;
    158158
     159        // Enqueue BP Tooltips.
     160        wp_enqueue_style( 'bp-tooltips' );
     161
    159162        // Only add a block wrapper if not loaded into a Widgets sidebar.
    160163        if ( ! did_action( 'dynamic_sidebar_before' ) ) {

  • branches/12.0/src/bp-core/admin/css/common-rtl.css

    r13675 r13710  
    1818        2.3 Settings - URls
    1919        2.4 Tools
    20         2.5 Tooltips
    21203.0 Users
    2221        3.1 Users List
    … …  
    344343body.tools_page_bp-optouts .nav-tab-wrapper {
    345344        margin-bottom: 1em;
    346 }
    347 
    348 /*
    349  * 2.5 Tooltips
    350  */
    351 .bp-tooltip {
    352         position: relative;
    353 }
    354 
    355 .bp-tooltip:after {
    356         background: #fff;
    357         border: 1px solid #aaa;
    358         border-collapse: separate;
    359         border-radius: 1px;
    360         box-shadow: -1px 1px 0 1px rgba(132, 132, 132, 0.3);
    361         color: #000;
    362         content: attr(data-bp-tooltip);
    363         display: none;
    364         font-family: sans-serif;
    365         font-size: 11px;
    366         font-weight: 400;
    367         letter-spacing: normal;
    368         line-height: 1.5;
    369         margin-top: 10px;
    370         max-width: 240px;
    371         opacity: 0;
    372         padding: 3px 6px;
    373         position: absolute;
    374         left: 50%;
    375         text-align: center;
    376         text-decoration: none;
    377         text-shadow: none;
    378         text-transform: none;
    379         top: 100%;
    380         transform: translateX(-50%);
    381         transition: opacity 2s ease-out;
    382         white-space: pre;
    383         word-wrap: break-word;
    384         z-index: 998;
    385 }
    386 
    387 .bp-hello-close .bp-tooltip:after {
    388         left: 0;
    389         text-align: left;
    390         transform: translateX(0);
    391 }
    392 
    393 .bp-hello-social .bp-tooltip:after {
    394         bottom: 120%;
    395         margin-bottom: 20px;
    396         margin-top: 0;
    397         top: auto;
    398         transform: translateX(-15%);
    399 }
    400 
    401 .bp-tooltip:hover:after,
    402 .bp-tooltip:active:after,
    403 .bp-tooltip:focus:after {
    404         display: inline-block;
    405         opacity: 1;
    406         overflow: visible;
    407         text-decoration: none;
    408         z-index: 999;
    409345}
    410346

  • branches/12.0/src/bp-core/admin/css/common.css

    r13675 r13710  
    1818        2.3 Settings - URls
    1919        2.4 Tools
    20         2.5 Tooltips
    21203.0 Users
    2221        3.1 Users List
    … …  
    344343body.tools_page_bp-optouts .nav-tab-wrapper {
    345344        margin-bottom: 1em;
    346 }
    347 
    348 /*
    349  * 2.5 Tooltips
    350  */
    351 .bp-tooltip {
    352         position: relative;
    353 }
    354 
    355 .bp-tooltip:after {
    356         background: #fff;
    357         border: 1px solid #aaa;
    358         border-collapse: separate;
    359         border-radius: 1px;
    360         box-shadow: 1px 1px 0 1px rgba(132, 132, 132, 0.3);
    361         color: #000;
    362         content: attr(data-bp-tooltip);
    363         display: none;
    364         font-family: sans-serif;
    365         font-size: 11px;
    366         font-weight: 400;
    367         letter-spacing: normal;
    368         line-height: 1.5;
    369         margin-top: 10px;
    370         max-width: 240px;
    371         opacity: 0;
    372         padding: 3px 6px;
    373         position: absolute;
    374         right: 50%;
    375         text-align: center;
    376         text-decoration: none;
    377         text-shadow: none;
    378         text-transform: none;
    379         top: 100%;
    380         transform: translateX(50%);
    381         transition: opacity 2s ease-out;
    382         white-space: pre;
    383         word-wrap: break-word;
    384         z-index: 998;
    385 }
    386 
    387 .bp-hello-close .bp-tooltip:after {
    388         right: 0;
    389         text-align: right;
    390         transform: translateX(0);
    391 }
    392 
    393 .bp-hello-social .bp-tooltip:after {
    394         bottom: 120%;
    395         margin-bottom: 20px;
    396         margin-top: 0;
    397         top: auto;
    398         transform: translateX(15%);
    399 }
    400 
    401 .bp-tooltip:hover:after,
    402 .bp-tooltip:active:after,
    403 .bp-tooltip:focus:after {
    404         display: inline-block;
    405         opacity: 1;
    406         overflow: visible;
    407         text-decoration: none;
    408         z-index: 999;
    409345}
    410346

  • branches/12.0/src/bp-core/admin/css/hello-rtl.css

    r13385 r13710  
    206206}
    207207
     208.bp-hello-social li a.bp-tooltip:after {
     209        bottom: 120%;
     210        margin-bottom: 20px;
     211        margin-top: 0;
     212        top: auto;
     213        transform: translateX(85%);
     214}
     215
    208216/*
    209217 * 4.2 - Header content

  • branches/12.0/src/bp-core/admin/css/hello.css

    r13385 r13710  
    206206}
    207207
     208.bp-hello-social li a.bp-tooltip:after {
     209        bottom: 120%;
     210        margin-bottom: 20px;
     211        margin-top: 0;
     212        top: auto;
     213        transform: translateX(-85%);
     214}
     215
    208216/*
    209217 * 4.2 - Header content

  • branches/12.0/src/bp-core/admin/sass/hello.scss

    r13385 r13710  
    228228                a {
    229229                        text-decoration: none;
     230
     231                        &.bp-tooltip:after {
     232                                bottom: 120%;
     233                                margin-bottom: 20px;
     234                                margin-top: 0;
     235                                top: auto;
     236                                transform: translateX(-85%);
     237                        }
    230238                }
    231239        }

  • branches/12.0/src/bp-core/bp-core-cssjs.php

    r13523 r13710  
    104104         */
    105105        $admin_bar_file = apply_filters( 'bp_core_admin_bar_css', "{$url}admin-bar{$min}.css" );
     106
     107        // Set default BP Tooltips styles.
     108        $tooltips_uri      = "{$url}bp-tooltips{$min}.css";
     109        $template_tooltips = bp_locate_template_asset( "css/bp-tooltips{$min}.css" );
     110
     111        if ( isset( $template_tooltips['uri'] ) && $template_tooltips['uri'] ) {
     112                $tooltips_uri = $template_tooltips['uri'];
     113        }
    106114
    107115        /**
    … …  
    120128                        'file'         => "{$url}avatar{$min}.css",
    121129                        'dependencies' => array( 'jcrop' )
     130                ),
     131                'bp-tooltips' => array(
     132                        'file'         => $tooltips_uri,
     133                        'dependencies' => array()
    122134                ),
    123135        ) );

  • branches/12.0/src/bp-core/classes/class-bp-admin.php

    r13697 r13710  
    13831383                        'bp-hello-css' => array(
    13841384                                'file'         => "{$url}hello{$min}.css",
    1385                                 'dependencies' => array( 'bp-admin-common-css', 'thickbox' ),
     1385                                'dependencies' => array( 'bp-admin-common-css', 'thickbox', 'bp-tooltips' ),
    13861386                        ),
    13871387                ) );

  • branches/12.0/src/bp-members/bp-members-blocks.php

    r13677 r13710  
    663663                        implode( "\n", $member_avatars )
    664664                );
     665
     666                // Only enqueue BP Tooltips if there is some content to style.
     667                wp_enqueue_style( 'bp-tooltips' );
    665668        } else {
    666669                $widget_content .= sprintf(

  • branches/12.0/src/bp-messages/bp-messages-blocks.php

    r13464 r13710  
    119119        $widget_content .= '</div>';
    120120
     121        // Enqueue BP Tooltips.
     122        wp_enqueue_style( 'bp-tooltips' );
     123
    121124        if ( ! did_action( 'dynamic_sidebar_before' ) ) {
    122125                return sprintf(

  • branches/12.0/src/bp-templates/bp-legacy/buddypress-functions.php

    r13673 r13710  
    224224                // LTR.
    225225                if ( ! is_rtl() && isset( $ltr['location'], $ltr['handle'] ) ) {
    226                         wp_enqueue_style( $ltr['handle'], $ltr['location'], array(), $this->version, 'screen' );
     226                        wp_enqueue_style( $ltr['handle'], $ltr['location'], array( 'bp-tooltips' ), $this->version, 'screen' );
    227227
    228228                        if ( $min ) {
    … …  
    237237                        if ( isset( $rtl['location'], $rtl['handle'] ) ) {
    238238                                $rtl['handle'] = str_replace( '-css', '-css-rtl', $rtl['handle'] );  // Backwards compatibility.
    239                                 wp_enqueue_style( $rtl['handle'], $rtl['location'], array(), $this->version, 'screen' );
     239                                wp_enqueue_style( $rtl['handle'], $rtl['location'], array( 'bp-tooltips' ), $this->version, 'screen' );
    240240
    241241                                if ( $min ) {
    … …  
    250250                        // Use a unique handle.
    251251                        $theme['handle'] = 'bp-' . get_template();
    252                         wp_enqueue_style( $theme['handle'], $theme['location'], array(), $this->version, 'screen' );
     252                        wp_enqueue_style( $theme['handle'], $theme['location'], array( 'bp-tooltips' ), $this->version, 'screen' );
    253253
    254254                        if ( $min ) {
    … …  
    263263                        if ( isset( $theme_rtl['location'] ) ) {
    264264                                $theme_rtl['handle'] = $theme['handle'] . '-rtl';
    265                                 wp_enqueue_style( $theme_rtl['handle'], $theme_rtl['location'], array(), $this->version, 'screen' );
     265                                wp_enqueue_style( $theme_rtl['handle'], $theme_rtl['location'], array( 'bp-tooltips' ), $this->version, 'screen' );
    266266
    267267                                if ( $min ) {

  • branches/12.0/src/bp-templates/bp-legacy/css/buddypress-rtl.css

    r13485 r13710  
    200520053.11 - Tooltips
    20062006--------------------------------------------------------------*/
    2007 
    2008 .buddypress .bp-tooltip {
    2009         position: relative;
    2010 }
    2011 
    2012 .bp-tooltip:after {
    2013         background: #fff;
    2014         border: 1px solid #aaa;
    2015         border-collapse: separate;
    2016         border-radius: 1px;
    2017         box-shadow: -1px 1px 0 1px rgba(132, 132, 132, 0.3);
    2018         color: #000;
    2019         content: attr(data-bp-tooltip);
    2020         display: none;
    2021         font-family: sans-serif;
    2022         font-size: 11px;
    2023         font-weight: 400;
    2024         letter-spacing: normal;
    2025         line-height: 1.5;
    2026         margin-top: 10px;
    2027         max-width: 240px;
    2028         opacity: 0;
    2029         padding: 3px 6px;
    2030         position: absolute;
    2031         left: 50%;
    2032         text-align: center;
    2033         text-decoration: none;
    2034         text-shadow: none;
    2035         text-transform: none;
    2036         top: 100%;
    2037         transform: translateX(-50%);
    2038         transition: opacity 2s ease-out;
    2039         white-space: pre;
    2040         word-wrap: break-word;
    2041         z-index: 998;
    2042 }
    2043 
    2044 .bp-tooltip:hover:after,
    2045 .bp-tooltip:active:after,
    2046 .bp-tooltip:focus:after {
    2047         display: inline-block;
    2048         opacity: 1;
    2049         overflow: visible;
    2050         text-decoration: none;
    2051         z-index: 999;
    2052 }
    2053 
    20542007#group-admins .bp-tooltip:after,
    20552008#group-mods .bp-tooltip:after,

  • branches/12.0/src/bp-templates/bp-legacy/css/buddypress.css

    r13485 r13710  
    200520053.11 - Tooltips
    20062006--------------------------------------------------------------*/
    2007 
    2008 .buddypress .bp-tooltip {
    2009         position: relative;
    2010 }
    2011 
    2012 .bp-tooltip:after {
    2013         background: #fff;
    2014         border: 1px solid #aaa;
    2015         border-collapse: separate;
    2016         border-radius: 1px;
    2017         box-shadow: 1px 1px 0 1px rgba(132, 132, 132, 0.3);
    2018         color: #000;
    2019         content: attr(data-bp-tooltip);
    2020         display: none;
    2021         font-family: sans-serif;
    2022         font-size: 11px;
    2023         font-weight: 400;
    2024         letter-spacing: normal;
    2025         line-height: 1.5;
    2026         margin-top: 10px;
    2027         max-width: 240px;
    2028         opacity: 0;
    2029         padding: 3px 6px;
    2030         position: absolute;
    2031         right: 50%;
    2032         text-align: center;
    2033         text-decoration: none;
    2034         text-shadow: none;
    2035         text-transform: none;
    2036         top: 100%;
    2037         transform: translateX(50%);
    2038         transition: opacity 2s ease-out;
    2039         white-space: pre;
    2040         word-wrap: break-word;
    2041         z-index: 998;
    2042 }
    2043 
    2044 .bp-tooltip:hover:after,
    2045 .bp-tooltip:active:after,
    2046 .bp-tooltip:focus:after {
    2047         display: inline-block;
    2048         opacity: 1;
    2049         overflow: visible;
    2050         text-decoration: none;
    2051         z-index: 999;
    2052 }
    2053 
    20542007#group-admins .bp-tooltip:after,
    20552008#group-mods .bp-tooltip:after,

  • branches/12.0/src/bp-templates/bp-nouveau/buddypress-functions.php

    r13673 r13710  
    271271                 * @param array $value Array of style dependencies. Default Dashicons.
    272272                 */
    273                 $css_dependencies = apply_filters( 'bp_nouveau_css_dependencies', array( 'dashicons' ) );
     273                $css_dependencies = apply_filters( 'bp_nouveau_css_dependencies', array( 'dashicons', 'bp-tooltips' ) );
    274274
    275275                /**

  • branches/12.0/src/bp-templates/bp-nouveau/common-styles/_bp_activity_entries.scss

    r13342 r13710  
    44
    55.activity-list {
     6
     7        .bp-tooltip {
     8
     9                @include bp-tooltip-bottom-left;
     10        }
    611
    712        padding: $pad-sml;

  • branches/12.0/src/bp-templates/bp-nouveau/common-styles/_bp_buttons.scss

    r12773 r13710  
    157157
    158158                        }
     159
     160                        .bp-tooltip {
     161
     162                                @include bp-tooltip-bottom-right;
     163                        }
     164
     165                        #send-invites-editor .bp-tooltip {
     166
     167                                // override .bp-invites-content .bp-tooltip
     168                                &:after {
     169                                        left: 0;
     170                                        right: auto;
     171                                }
     172                        }
    159173                }
    160174

  • branches/12.0/src/bp-templates/bp-nouveau/common-styles/_bp_group_header.scss

    r12789 r13710  
    5757                                padding: 4px;
    5858                        }
     59
     60                        // Bottom Left Tooltip for mobile and Bottom Right Tooltip for tablet/desktop
     61                        .bp-tooltip {
     62
     63                                @include bp-tooltip-bottom-left;
     64
     65                                @include medium-up() {
     66
     67                                        @include bp-tooltip-bottom-right;
     68                                }
     69                        }
    5970                }
    6071

  • branches/12.0/src/bp-templates/bp-nouveau/common-styles/_bp_messages.scss

    r12082 r13710  
    7070                overflow: hidden;
    7171                position: relative;
     72
     73                .actions .bp-tooltip {
     74
     75                        @include bp-tooltip-bottom-right;
     76                }
    7277        }
    7378
    … …  
    129134        content: "\f155";
    130135}
     136
     137.participants-list .bp-tooltip {
     138
     139        @include bp-tooltip-bottom-left;
     140}

  • branches/12.0/src/bp-templates/bp-nouveau/common-styles/_bp_tables.scss

    r12814 r13710  
    111111                .notification-actions {
    112112                        width: 15%;
     113
     114                        .bp-tooltip {
     115
     116                                @include bp-tooltip-bottom-left;
     117                        }
    113118                }
    114119        }

  • branches/12.0/src/bp-templates/bp-nouveau/css/buddypress-rtl.css

    r13529 r13710  
    12461246}
    12471247
     1248.activity-list .bp-tooltip:after {
     1249        right: 0;
     1250        transform: translate(0, 0);
     1251}
     1252
    12481253.activity-list .activity-item:before,
    12491254.activity-list .activity-item:after {
    … …  
    24662471        margin-right: 4px;
    24672472        padding: 4px;
     2473}
     2474
     2475.groups-header .moderators-lists .user-list .bp-tooltip:after {
     2476        right: 0;
     2477        transform: translate(0, 0);
     2478}
     2479
     2480@media screen and (min-width: 46.8em) {
     2481        .groups-header .moderators-lists .user-list .bp-tooltip:after {
     2482                right: auto;
     2483                left: 0;
     2484                transform: translate(0, 0);
     2485        }
    24682486}
    24692487
    … …  
    33903408        content: "";
    33913409        display: table;
     3410}
     3411
     3412.bp-messages-content .preview-pane-header .actions .bp-tooltip:after,
     3413.bp-messages-content .single-message-thread-header .actions .bp-tooltip:after {
     3414        right: auto;
     3415        left: 0;
     3416        transform: translate(0, 0);
    33923417}
    33933418
    … …  
    40834108}
    40844109
     4110.buddypress-wrap table.notifications .actions .bp-tooltip:after,
     4111.buddypress-wrap table.notifications .notification-actions .bp-tooltip:after {
     4112        right: 0;
     4113        transform: translate(0, 0);
     4114}
     4115
    40854116.buddypress-wrap table.notification-settings th.title,
    40864117.buddypress-wrap table.profile-settings th.title {
    … …  
    43224353}
    43234354
     4355.buddypress .buddypress-wrap .bp-invites-content .bp-tooltip:after {
     4356        right: auto;
     4357        left: 0;
     4358        transform: translate(0, 0);
     4359}
     4360
     4361.buddypress .buddypress-wrap .bp-invites-content #send-invites-editor .bp-tooltip:after {
     4362        right: 0;
     4363        left: auto;
     4364}
     4365
    43244366.buddypress .buddypress-wrap #item-buttons:empty {
    43254367        display: none;
    … …  
    47834825.buddypress-wrap input.loading:hover {
    47844826        color: #777;
    4785 }
    4786 
    4787 [data-bp-tooltip] {
    4788         position: relative;
    4789 }
    4790 
    4791 [data-bp-tooltip]:after {
    4792         background-color: #fff;
    4793         display: none;
    4794         opacity: 0;
    4795         position: absolute;
    4796         transform: translate3d(0, 0, 0);
    4797         visibility: hidden;
    4798 }
    4799 
    4800 [data-bp-tooltip]:after {
    4801         border: 1px solid #737373;
    4802         border-radius: 1px;
    4803         box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.2);
    4804         color: #333;
    4805         content: attr(data-bp-tooltip);
    4806         font-family: "Helvetica Neue", helvetica, arial, san-serif;
    4807         font-size: 12px;
    4808         font-weight: 400;
    4809         letter-spacing: normal;
    4810         line-height: 1.25;
    4811         max-width: 200px;
    4812         padding: 5px 8px;
    4813         pointer-events: none;
    4814         text-shadow: none;
    4815         text-transform: none;
    4816         transition: all 1.5s ease;
    4817         white-space: nowrap;
    4818         word-wrap: break-word;
    4819         z-index: 100000;
    4820 }
    4821 
    4822 [data-bp-tooltip]:hover:after, [data-bp-tooltip]:active:after, [data-bp-tooltip]:focus:after {
    4823         display: block;
    4824         opacity: 1;
    4825         overflow: visible;
    4826         visibility: visible;
    4827 }
    4828 
    4829 [data-bp-tooltip=""] {
    4830         display: none;
    4831         opacity: 0;
    4832         visibility: hidden;
    4833 }
    4834 
    4835 .bp-tooltip:after {
    4836         right: 50%;
    4837         margin-top: 7px;
    4838         top: 110%;
    4839         transform: translate(50%, 0);
    4840 }
    4841 
    4842 .user-list .bp-tooltip:after {
    4843         right: 0;
    4844         transform: translate(0, 0);
    4845 }
    4846 
    4847 @media screen and (min-width: 46.8em) {
    4848         .user-list .bp-tooltip:after {
    4849                 right: auto;
    4850                 left: 0;
    4851                 transform: translate(0, 0);
    4852         }
    4853 }
    4854 
    4855 .activity-list .bp-tooltip:after,
    4856 .activity-meta-action .bp-tooltip:after,
    4857 .avatar-block .item-avatar .bp-tooltip:after,
    4858 .notification-actions .bp-tooltip:after,
    4859 .participants-list .bp-tooltip:after {
    4860         right: 0;
    4861         transform: translate(0, 0);
    4862 }
    4863 
    4864 .bp-invites-content .bp-tooltip:after,
    4865 .message-metadata .actions .bp-tooltip:after,
    4866 .single-message-thread-header .actions .bp-tooltip:after {
    4867         right: auto;
    4868         left: 0;
    4869         transform: translate(0, 0);
    4870 }
    4871 
    4872 .bp-invites-content #send-invites-editor .bp-tooltip:after {
    4873         right: 0;
    4874         left: auto;
    48754827}
    48764828

  • branches/12.0/src/bp-templates/bp-nouveau/css/buddypress.css

    r13529 r13710  
    12461246}
    12471247
     1248.activity-list .bp-tooltip:after {
     1249        left: 0;
     1250        transform: translate(0, 0);
     1251}
     1252
    12481253.activity-list .activity-item:before,
    12491254.activity-list .activity-item:after {
    … …  
    24662471        margin-left: 4px;
    24672472        padding: 4px;
     2473}
     2474
     2475.groups-header .moderators-lists .user-list .bp-tooltip:after {
     2476        left: 0;
     2477        transform: translate(0, 0);
     2478}
     2479
     2480@media screen and (min-width: 46.8em) {
     2481        .groups-header .moderators-lists .user-list .bp-tooltip:after {
     2482                left: auto;
     2483                right: 0;
     2484                transform: translate(0, 0);
     2485        }
    24682486}
    24692487
    … …  
    33903408        content: "";
    33913409        display: table;
     3410}
     3411
     3412.bp-messages-content .preview-pane-header .actions .bp-tooltip:after,
     3413.bp-messages-content .single-message-thread-header .actions .bp-tooltip:after {
     3414        left: auto;
     3415        right: 0;
     3416        transform: translate(0, 0);
    33923417}
    33933418
    … …  
    40834108}
    40844109
     4110.buddypress-wrap table.notifications .actions .bp-tooltip:after,
     4111.buddypress-wrap table.notifications .notification-actions .bp-tooltip:after {
     4112        left: 0;
     4113        transform: translate(0, 0);
     4114}
     4115
    40854116.buddypress-wrap table.notification-settings th.title,
    40864117.buddypress-wrap table.profile-settings th.title {
    … …  
    43224353}
    43234354
     4355.buddypress .buddypress-wrap .bp-invites-content .bp-tooltip:after {
     4356        left: auto;
     4357        right: 0;
     4358        transform: translate(0, 0);
     4359}
     4360
     4361.buddypress .buddypress-wrap .bp-invites-content #send-invites-editor .bp-tooltip:after {
     4362        left: 0;
     4363        right: auto;
     4364}
     4365
    43244366.buddypress .buddypress-wrap #item-buttons:empty {
    43254367        display: none;
    … …  
    47834825.buddypress-wrap input.loading:hover {
    47844826        color: #777;
    4785 }
    4786 
    4787 [data-bp-tooltip] {
    4788         position: relative;
    4789 }
    4790 
    4791 [data-bp-tooltip]:after {
    4792         background-color: #fff;
    4793         display: none;
    4794         opacity: 0;
    4795         position: absolute;
    4796         transform: translate3d(0, 0, 0);
    4797         visibility: hidden;
    4798 }
    4799 
    4800 [data-bp-tooltip]:after {
    4801         border: 1px solid #737373;
    4802         border-radius: 1px;
    4803         box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
    4804         color: #333;
    4805         content: attr(data-bp-tooltip);
    4806         font-family: "Helvetica Neue", helvetica, arial, san-serif;
    4807         font-size: 12px;
    4808         font-weight: 400;
    4809         letter-spacing: normal;
    4810         line-height: 1.25;
    4811         max-width: 200px;
    4812         padding: 5px 8px;
    4813         pointer-events: none;
    4814         text-shadow: none;
    4815         text-transform: none;
    4816         transition: all 1.5s ease;
    4817         white-space: nowrap;
    4818         word-wrap: break-word;
    4819         z-index: 100000;
    4820 }
    4821 
    4822 [data-bp-tooltip]:hover:after, [data-bp-tooltip]:active:after, [data-bp-tooltip]:focus:after {
    4823         display: block;
    4824         opacity: 1;
    4825         overflow: visible;
    4826         visibility: visible;
    4827 }
    4828 
    4829 [data-bp-tooltip=""] {
    4830         display: none;
    4831         opacity: 0;
    4832         visibility: hidden;
    4833 }
    4834 
    4835 .bp-tooltip:after {
    4836         left: 50%;
    4837         margin-top: 7px;
    4838         top: 110%;
    4839         transform: translate(-50%, 0);
    4840 }
    4841 
    4842 .user-list .bp-tooltip:after {
    4843         left: 0;
    4844         transform: translate(0, 0);
    4845 }
    4846 
    4847 @media screen and (min-width: 46.8em) {
    4848         .user-list .bp-tooltip:after {
    4849                 left: auto;
    4850                 right: 0;
    4851                 transform: translate(0, 0);
    4852         }
    4853 }
    4854 
    4855 .activity-list .bp-tooltip:after,
    4856 .activity-meta-action .bp-tooltip:after,
    4857 .avatar-block .item-avatar .bp-tooltip:after,
    4858 .notification-actions .bp-tooltip:after,
    4859 .participants-list .bp-tooltip:after {
    4860         left: 0;
    4861         transform: translate(0, 0);
    4862 }
    4863 
    4864 .bp-invites-content .bp-tooltip:after,
    4865 .message-metadata .actions .bp-tooltip:after,
    4866 .single-message-thread-header .actions .bp-tooltip:after {
    4867         left: auto;
    4868         right: 0;
    4869         transform: translate(0, 0);
    4870 }
    4871 
    4872 .bp-invites-content #send-invites-editor .bp-tooltip:after {
    4873         left: 0;
    4874         right: auto;
    48754827}
    48764828

  • branches/12.0/src/bp-templates/bp-nouveau/sass/_nouveau_messages.scss

    r13196 r13710  
    322322                        display: table;
    323323                }
     324
     325                .actions .bp-tooltip {
     326
     327                        @include bp-tooltip-bottom-right;
     328                }
    324329        }
    325330

  • branches/12.0/src/bp-templates/bp-nouveau/sass/buddypress.scss

    r13485 r13710  
    427427@import "../common-styles/_bp_animations";
    428428
    429 // Import BP Tooltips
    430 
    431 @import "../common-styles/_bp_tooltips";
    432 
    433429/**
    434430*-------------------------------------------------------------------------------
Note: See TracChangeset for help on using the changeset viewer.