Yaron Koren has submitted this change and it was merged.

Change subject: Added Balloon.css CSS library
......................................................................


Added Balloon.css CSS library

Change-Id: Ib11a9b659c7b526ed335179eb93ae57b367db18f
---
M README
M SemanticForms.php
M extension.json
A skins/balloon.css
4 files changed, 185 insertions(+), 1 deletion(-)

Approvals:
  Yaron Koren: Looks good to me, approved
  jenkins-bot: Verified



diff --git a/README b/README
index 50dfcf0..94c701e 100644
--- a/README
+++ b/README
@@ -73,5 +73,9 @@
 * Select2 (https://select2.github.io) by Igor Vaynberg, distributed
 under both the Apache and GPL licenses.
 
+It also includes the Balloon.css CSS library
+(https://kazzkiq.github.io/balloon.css/) by Claudio Holanda,
+distributed under the MIT license.
+
 Semantic Forms also makes extensive use of the jQuery and jQuery UI
-JavaScript libraries, included within MediaWiki.
+JavaScript libraries, included within MediaWiki.
\ No newline at end of file
diff --git a/SemanticForms.php b/SemanticForms.php
index e9a6ab2..547f774 100644
--- a/SemanticForms.php
+++ b/SemanticForms.php
@@ -411,6 +411,11 @@
                        'htmlform-no',
                ),
        ),
+       'ext.semanticforms.balloon' => $sfgResourceTemplate + array(
+               'styles' => array(
+                       'skins/balloon.css',
+               ),
+       ),
        'ext.semanticforms' => $sfgResourceTemplate + array(
                'scripts' => array(
                        'libs/ext.sf.js',
diff --git a/extension.json b/extension.json
index 0f05319..5b75c87 100644
--- a/extension.json
+++ b/extension.json
@@ -302,6 +302,11 @@
                                "htmlform-no"
                        ]
                },
+               "ext.semanticforms.balloon": {
+                       "styles": [
+                               "skins/balloon.css"
+                       ]
+               },
                "ext.semanticforms": {
                        "scripts": [
                                "libs/ext.sf.js"
diff --git a/skins/balloon.css b/skins/balloon.css
new file mode 100644
index 0000000..dd85c99
--- /dev/null
+++ b/skins/balloon.css
@@ -0,0 +1,170 @@
+button[data-balloon] {
+  overflow: visible;
+}
+[data-balloon] {
+  position: relative;
+}
+[data-balloon]:before,
+[data-balloon]:after {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  -khtml-opacity: 0;
+  -moz-opacity: 0;
+  opacity: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.18s ease-out 0.18s;
+  transition: all 0.18s ease-out 0.18s;
+  bottom: 100%;
+  left: 50%;
+  position: absolute;
+  z-index: 10;
+  -webkit-transform: translate(-50%, 10px);
+  -ms-transform: translate(-50%, 10px);
+  transform: translate(-50%, 10px);
+  -webkit-transform-origin: top;
+  -ms-transform-origin: top;
+  transform-origin: top;
+}
+[data-balloon]:after {
+  background: rgba(17, 17, 17, 0.9);
+  border-radius: 4px;
+  color: #fff;
+  content: attr(data-balloon);
+  font-size: 12px;
+  padding: .5em 1em;
+  white-space: nowrap;
+  margin-bottom: 11px;
+}
+[data-balloon]:before {
+  background: url('data:image/svg+xml;utf8,<svg 
xmlns="http://www.w3.org/2000/svg"; width="36px" height="12px"><path 
fill="rgba(17, 17, 17, 0.9)" transform="rotate(0)" d="M2.658,0.000 
C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 
18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>') no-repeat;
+  background-size: 100% auto;
+  height: 6px;
+  width: 18px;
+  content: "";
+  margin-bottom: 5px;
+}
+[data-balloon]:hover:before,
+[data-balloon][data-balloon-visible]:before,
+[data-balloon]:hover:after,
+[data-balloon][data-balloon-visible]:after {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+  filter: alpha(opacity=100);
+  -khtml-opacity: 1;
+  -moz-opacity: 1;
+  opacity: 1;
+  pointer-events: auto;
+  -webkit-transform: translate(-50%, 0);
+  -ms-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+}
+[data-balloon][data-balloon-break]:after {
+  white-space: normal;
+}
+[data-balloon-pos="down"]:before,
+[data-balloon-pos="down"]:after {
+  bottom: auto;
+  left: 50%;
+  top: 100%;
+  -webkit-transform: translate(-50%, -10px);
+  -ms-transform: translate(-50%, -10px);
+  transform: translate(-50%, -10px);
+}
+[data-balloon-pos="down"]:after {
+  margin-top: 11px;
+}
+[data-balloon-pos="down"]:before {
+  background: url('data:image/svg+xml;utf8,<svg 
xmlns="http://www.w3.org/2000/svg"; width="36px" height="12px"><path 
fill="rgba(17, 17, 17, 0.9)" transform="rotate(180 18 6)" d="M2.658,0.000 
C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 
18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>') no-repeat;
+  background-size: 100% auto;
+  height: 6px;
+  width: 18px;
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+[data-balloon-pos="down"]:hover:before,
+[data-balloon-pos="down"][data-balloon-visible]:before,
+[data-balloon-pos="down"]:hover:after,
+[data-balloon-pos="down"][data-balloon-visible]:after {
+  -webkit-transform: translate(-50%, 0);
+  -ms-transform: translate(-50%, 0);
+  transform: translate(-50%, 0);
+}
+[data-balloon-pos="left"]:before,
+[data-balloon-pos="left"]:after {
+  bottom: auto;
+  left: auto;
+  right: 100%;
+  top: 50%;
+  -webkit-transform: translate(10px, -50%);
+  -ms-transform: translate(10px, -50%);
+  transform: translate(10px, -50%);
+}
+[data-balloon-pos="left"]:after {
+  margin-right: 11px;
+}
+[data-balloon-pos="left"]:before {
+  background: url('data:image/svg+xml;utf8,<svg 
xmlns="http://www.w3.org/2000/svg"; width="12px" height="36px"><path 
fill="rgba(17, 17, 17, 0.9)" transform="rotate(-90 18 18)" d="M2.658,0.000 
C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 
18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>') no-repeat;
+  background-size: 100% auto;
+  height: 18px;
+  width: 6px;
+  margin-right: 5px;
+  margin-bottom: 0;
+}
+[data-balloon-pos="left"]:hover:before,
+[data-balloon-pos="left"][data-balloon-visible]:before,
+[data-balloon-pos="left"]:hover:after,
+[data-balloon-pos="left"][data-balloon-visible]:after {
+  -webkit-transform: translate(0, -50%);
+  -ms-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+}
+[data-balloon-pos="right"]:before,
+[data-balloon-pos="right"]:after {
+  bottom: auto;
+  left: 100%;
+  top: 50%;
+  -webkit-transform: translate(-10px, -50%);
+  -ms-transform: translate(-10px, -50%);
+  transform: translate(-10px, -50%);
+}
+[data-balloon-pos="right"]:after {
+  margin-left: 11px;
+}
+[data-balloon-pos="right"]:before {
+  background: url('data:image/svg+xml;utf8,<svg 
xmlns="http://www.w3.org/2000/svg"; width="12px" height="36px"><path 
fill="rgba(17, 17, 17, 0.9)" transform="rotate(90 6 6)" d="M2.658,0.000 
C-13.615,0.000 50.938,0.000 34.662,0.000 C28.662,0.000 23.035,12.002 
18.660,12.002 C14.285,12.002 8.594,0.000 2.658,0.000 Z"/></svg>') no-repeat;
+  background-size: 100% auto;
+  height: 18px;
+  width: 6px;
+  margin-bottom: 0;
+  margin-left: 5px;
+}
+[data-balloon-pos="right"]:hover:before,
+[data-balloon-pos="right"][data-balloon-visible]:before,
+[data-balloon-pos="right"]:hover:after,
+[data-balloon-pos="right"][data-balloon-visible]:after {
+  -webkit-transform: translate(0, -50%);
+  -ms-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+}
+[data-balloon-length]:after {
+  white-space: normal;
+}
+[data-balloon-length="small"]:after {
+  width: 80px;
+}
+[data-balloon-length="medium"]:after {
+  width: 150px;
+}
+[data-balloon-length="large"]:after {
+  width: 260px;
+}
+[data-balloon-length="xlarge"]:after {
+  width: 90vw;
+}
+@media screen and (min-width: 768px) {
+  [data-balloon-length="xlarge"]:after {
+    width: 380px;
+  }
+}
+[data-balloon-length="fit"]:after {
+  width: 100%;
+}
\ No newline at end of file

-- 
To view, visit https://gerrit.wikimedia.org/r/311642
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: merged
Gerrit-Change-Id: Ib11a9b659c7b526ed335179eb93ae57b367db18f
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/SemanticForms
Gerrit-Branch: master
Gerrit-Owner: Yaron Koren <yaro...@gmail.com>
Gerrit-Reviewer: Yaron Koren <yaro...@gmail.com>
Gerrit-Reviewer: jenkins-bot <>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to