Changeset 11581

Timestamp:

06/08/2017 04:52:41 PM (9 years ago)

Author:

mercime

Message:

Simplify styles for BP tooltips in bp-legacy.

Keep bp-tooltips simple by removing placeholder style for arrow tip which will
be added for bp-nouveau but not for bp-legacy.

Props dcavins, hnla, boonebgorges.
See #7188.

Location:

trunk/src/bp-templates/bp-legacy/css

Files:

• buddypress-rtl.css (modified) (4 diffs)
• buddypress.css (modified) (4 diffs)

trunk/src/bp-templates/bp-legacy/css/buddypress-rtl.css

@@ -1785 +1785 @@
         border-collapse: separate;
         border-radius: 1px;
-        -webkit-box-shadow: -1px 1px 0px 1px rgba(132,132,132,0.3);
-        -moz-box-shadow: -1px 1px 0px 1px rgba(132,132,132,0.3);
         box-shadow: -1px 1px 0px 1px rgba(132,132,132,0.3);
-        color: #333;
+        color: #000;
         content: attr(data-bp-tooltip);
         display: none;
@@ -1796 +1794 @@
         letter-spacing: normal;
         line-height: 1.5;
-        margin-top: 5px;
+        margin-top: 10px;
         max-width: 200px;
         opacity: 0;
@@ -1808 +1806 @@
         top: 100%;
         transform: translateX(-50%);
-        -webkit-transform: translateX(-50%);
+        transition: opacity 2s ease-out;
         white-space: pre;
         word-wrap: break-word;
         z-index: 998;
-}
-
-.bp-tooltip::before {
-        border: 5px solid transparent;
-        bottom: -5px;
-        content: "";
-        color: #333;
-        display: none;
-        height: 0;
-        margin-left: -5px;
-        opacity: 0;
-        position: absolute;
-        left: 50%;
-        top: auto;
-        width: 0;
-        z-index: 999;
-}
-
-@-webkit-keyframes tooltip-show {
-        from {
-                opacity: 0;
-        }
-        to {
-                opacity: 1;
-        }
-}
-
-@keyframes tooltip-show {
-        from {
-                opacity: 0;
-        }
-        to {
-                opacity: 1;
-        }
 }
 
@@ -1855 +1819 @@
 .bp-tooltip:focus::after {
         display: inline-block;
+        opacity: 1;
         overflow: visible;
         text-decoration: none;
-        -webkit-animation-name: tooltip-show;
-        animation-name: tooltip-show;
-        -webkit-animation-duration: 0.1s;
-        animation-duration: 0.1s;
-        -webkit-animation-fill-mode: forwards;
-        animation-fill-mode: forwards;
-        -webkit-animation-timing-function: ease-in;
-        animation-timing-function: ease-in;
-        -webkit-animation-delay: 0.4s;
-        animation-delay: 0.4s;
         z-index: 999;
 }

trunk/src/bp-templates/bp-legacy/css/buddypress.css

@@ -1785 +1785 @@
         border-collapse: separate;
         border-radius: 1px;
-        -webkit-box-shadow: 1px 1px 0px 1px rgba(132,132,132,0.3);
-        -moz-box-shadow: 1px 1px 0px 1px rgba(132,132,132,0.3);
         box-shadow: 1px 1px 0px 1px rgba(132,132,132,0.3);
-        color: #333;
+        color: #000;
         content: attr(data-bp-tooltip);
         display: none;
@@ -1796 +1794 @@
         letter-spacing: normal;
         line-height: 1.5;
-        margin-top: 5px;
+        margin-top: 10px;
         max-width: 200px;
         opacity: 0;
@@ -1808 +1806 @@
         top: 100%;
         transform: translateX(50%);
-        -webkit-transform: translateX(50%);
+        transition: opacity 2s ease-out;
         white-space: pre;
         word-wrap: break-word;
         z-index: 998;
-}
-
-.bp-tooltip::before {
-        border: 5px solid transparent;
-        bottom: -5px;
-        content: "";
-        color: #333;
-        display: none;
-        height: 0;
-        margin-right: -5px;
-        opacity: 0;
-        position: absolute;
-        right: 50%;
-        top: auto;
-        width: 0;
-        z-index: 999;
-}
-
-@-webkit-keyframes tooltip-show {
-        from {
-                opacity: 0;
-        }
-        to {
-                opacity: 1;
-        }
-}
-
-@keyframes tooltip-show {
-        from {
-                opacity: 0;
-        }
-        to {
-                opacity: 1;
-        }
 }
 
@@ -1855 +1819 @@
 .bp-tooltip:focus::after {
         display: inline-block;
+        opacity: 1;
         overflow: visible;
         text-decoration: none;
-        -webkit-animation-name: tooltip-show;
-        animation-name: tooltip-show;
-        -webkit-animation-duration: 0.1s;
-        animation-duration: 0.1s;
-        -webkit-animation-fill-mode: forwards;
-        animation-fill-mode: forwards;
-        -webkit-animation-timing-function: ease-in;
-        animation-timing-function: ease-in;
-        -webkit-animation-delay: 0.4s;
-        animation-delay: 0.4s;
         z-index: 999;
 }