og/GamePortrait
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: GamePortrait 竖屏版 - 深色豪华主题

Browse Source
This commit is contained in:
li
2026-01-16 17:47:53 +08:00
commit 40976e4b45
26611 changed files with 2843638 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
node_modules/balloon-css/LICENSE
Generated Vendored
+21
View File
@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2016 Claudio Holanda
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
node_modules/balloon-css/balloon.css
Generated Vendored
+372
View File
@@ -0,0 +1,372 @@
button[data-balloon] {
overflow: visible; }
[data-balloon] {
position: relative;
cursor: pointer; }
[data-balloon]:after {
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.18s ease-out 0.18s;
-moz-transition: all 0.18s ease-out 0.18s;
-ms-transition: all 0.18s ease-out 0.18s;
-o-transition: all 0.18s ease-out 0.18s;
transition: all 0.18s ease-out 0.18s;
font-family: sans-serif !important;
font-weight: normal !important;
font-style: normal !important;
text-shadow: none !important;
font-size: 12px !important;
background: rgba(17, 17, 17, 0.9);
border-radius: 4px;
color: #fff;
content: attr(data-balloon);
padding: .5em 1em;
position: absolute;
white-space: nowrap;
z-index: 10; }
[data-balloon]:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(0)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.18s ease-out 0.18s;
-moz-transition: all 0.18s ease-out 0.18s;
-ms-transition: all 0.18s ease-out 0.18s;
-o-transition: all 0.18s ease-out 0.18s;
transition: all 0.18s ease-out 0.18s;
content: '';
position: absolute;
z-index: 10; }
[data-balloon]:hover:before, [data-balloon]:hover:after, [data-balloon][data-balloon-visible]:before, [data-balloon][data-balloon-visible]:after {
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
pointer-events: auto; }
[data-balloon]:not([data-balloon-pos]):after {
bottom: 100%;
left: 50%;
margin-bottom: 11px;
-webkit-transform: translate(-50%, 10px);
-moz-transform: translate(-50%, 10px);
-ms-transform: translate(-50%, 10px);
transform: translate(-50%, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon]:not([data-balloon-pos]):before {
bottom: 100%;
left: 50%;
margin-bottom: 5px;
-webkit-transform: translate(-50%, 10px);
-moz-transform: translate(-50%, 10px);
-ms-transform: translate(-50%, 10px);
transform: translate(-50%, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon]:not([data-balloon-pos]):hover:after, [data-balloon]:not([data-balloon-pos])[data-balloon-visible]:after {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon]:not([data-balloon-pos]):hover:before, [data-balloon]:not([data-balloon-pos])[data-balloon-visible]:before {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon].font-awesome:after {
font-family: FontAwesome, sans-serif !important; }
[data-balloon][data-balloon-break]:after {
white-space: pre; }
[data-balloon][data-balloon-blunt]:before, [data-balloon][data-balloon-blunt]:after {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none; }
[data-balloon][data-balloon-pos="up"]:after {
bottom: 100%;
left: 50%;
margin-bottom: 11px;
-webkit-transform: translate(-50%, 10px);
-moz-transform: translate(-50%, 10px);
-ms-transform: translate(-50%, 10px);
transform: translate(-50%, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up"]:before {
bottom: 100%;
left: 50%;
margin-bottom: 5px;
-webkit-transform: translate(-50%, 10px);
-moz-transform: translate(-50%, 10px);
-ms-transform: translate(-50%, 10px);
transform: translate(-50%, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up"]:hover:after, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:after {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos="up"]:hover:before, [data-balloon][data-balloon-pos="up"][data-balloon-visible]:before {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos="up-left"]:after {
bottom: 100%;
left: 0;
margin-bottom: 11px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-left"]:before {
bottom: 100%;
left: 5px;
margin-bottom: 5px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-left"]:hover:after, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos="up-left"]:hover:before, [data-balloon][data-balloon-pos="up-left"][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos="up-right"]:after {
bottom: 100%;
right: 0;
margin-bottom: 11px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-right"]:before {
bottom: 100%;
right: 5px;
margin-bottom: 5px;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
transform: translate(0, 10px);
-webkit-transform-origin: top;
-moz-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top; }
[data-balloon][data-balloon-pos="up-right"]:hover:after, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos="up-right"]:hover:before, [data-balloon][data-balloon-pos="up-right"][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down']:after {
left: 50%;
margin-top: 11px;
top: 100%;
-webkit-transform: translate(-50%, -10px);
-moz-transform: translate(-50%, -10px);
-ms-transform: translate(-50%, -10px);
transform: translate(-50%, -10px); }
[data-balloon][data-balloon-pos='down']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
left: 50%;
margin-top: 5px;
top: 100%;
-webkit-transform: translate(-50%, -10px);
-moz-transform: translate(-50%, -10px);
-ms-transform: translate(-50%, -10px);
transform: translate(-50%, -10px); }
[data-balloon][data-balloon-pos='down']:hover:after, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:after {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos='down']:hover:before, [data-balloon][data-balloon-pos='down'][data-balloon-visible]:before {
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0); }
[data-balloon][data-balloon-pos='down-left']:after {
left: 0;
margin-top: 11px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-left']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
left: 5px;
margin-top: 5px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-left']:hover:after, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down-left']:hover:before, [data-balloon][data-balloon-pos='down-left'][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down-right']:after {
right: 0;
margin-top: 11px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-right']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(180 18 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
right: 5px;
margin-top: 5px;
top: 100%;
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
transform: translate(0, -10px); }
[data-balloon][data-balloon-pos='down-right']:hover:after, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:after {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='down-right']:hover:before, [data-balloon][data-balloon-pos='down-right'][data-balloon-visible]:before {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0); }
[data-balloon][data-balloon-pos='left']:after {
margin-right: 11px;
right: 100%;
top: 50%;
-webkit-transform: translate(10px, -50%);
-moz-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
transform: translate(10px, -50%); }
[data-balloon][data-balloon-pos='left']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(-90 18 18)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 6px;
height: 18px;
margin-right: 5px;
right: 100%;
top: 50%;
-webkit-transform: translate(10px, -50%);
-moz-transform: translate(10px, -50%);
-ms-transform: translate(10px, -50%);
transform: translate(10px, -50%); }
[data-balloon][data-balloon-pos='left']:hover:after, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:after {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-pos='left']:hover:before, [data-balloon][data-balloon-pos='left'][data-balloon-visible]:before {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-pos='right']:after {
left: 100%;
margin-left: 11px;
top: 50%;
-webkit-transform: translate(-10px, -50%);
-moz-transform: translate(-10px, -50%);
-ms-transform: translate(-10px, -50%);
transform: translate(-10px, -50%); }
[data-balloon][data-balloon-pos='right']:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba(17, 17, 17, 0.9)%22%20transform%3D%22rotate(90 6 6)%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E");
background-size: 100% auto;
width: 6px;
height: 18px;
left: 100%;
margin-left: 5px;
top: 50%;
-webkit-transform: translate(-10px, -50%);
-moz-transform: translate(-10px, -50%);
-ms-transform: translate(-10px, -50%);
transform: translate(-10px, -50%); }
[data-balloon][data-balloon-pos='right']:hover:after, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:after {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-pos='right']:hover:before, [data-balloon][data-balloon-pos='right'][data-balloon-visible]:before {
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%); }
[data-balloon][data-balloon-length='small']:after {
white-space: normal;
width: 80px; }
[data-balloon][data-balloon-length='medium']:after {
white-space: normal;
width: 150px; }
[data-balloon][data-balloon-length='large']:after {
white-space: normal;
width: 260px; }
[data-balloon][data-balloon-length='xlarge']:after {
white-space: normal;
width: 380px; }
@media screen and (max-width: 768px) {
[data-balloon][data-balloon-length='xlarge']:after {
white-space: normal;
width: 90vw; } }
[data-balloon][data-balloon-length='fit']:after {
white-space: normal;
width: 100%; }
node_modules/balloon-css/balloon.min.css
Generated Vendored
+1
View File
File diff suppressed because one or more lines are too long
node_modules/balloon-css/package.json
Generated Vendored
+24
View File
@@ -0,0 +1,24 @@
{
"name": "balloon-css",
"version": "0.5.2",
"description": "Simple tooltips made of pure CSS",
"author": "Claudio Holanda",
"license": "MIT",
"homepage": "http://kazzkiq.github.io/balloon.css/",
"repository": {
"type": "git",
"url": "https://github.com/kazzkiq/balloon.css.git"
},
"files": [
"src/balloon.scss",
"balloon.css",
"balloon.min.css"
],
"main": "balloon.min.css",
"scripts": {
"build": "node-sass src/balloon.scss ./balloon.css && node-sass src/balloon.scss ./balloon.min.css --output-style compressed"
},
"devDependencies": {
"node-sass": "^4.10"
}
}
node_modules/balloon-css/readme.md
Generated Vendored
+92
View File
@@ -0,0 +1,92 @@
[![npm version](https://badge.fury.io/js/balloon-css.svg)](https://www.npmjs.com/package/balloon-css)
<img src="logo.png" width="272" style="margin:0 auto" align="center" />
## Simple tooltips made of pure CSS
Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS.
<img src="sample.gif" width="310" />
## Demo & Playground
You can play with Balloon.css here: https://jsfiddle.net/9fboea3u/
You also can check more examples at the website: http://kazzkiq.github.io/balloon.css/
## Usage
### Installation
**Using npm:**
```
npm install balloon-css
```
**CDN version (provided by [cdnjs](https://github.com/cdnjs/cdnjs)):**
```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/balloon-css/0.5.0/balloon.min.css">
```
**Manually:**
Simply download `balloon.min.css` from this repo and add it to your HTML. e.g.
```html
<link rel="stylesheet" href="path/to/balloon.min.css">
```
### Positioning
For positioning, use `data-balloon-pos` attribute with one of the values: `up`, `down`, `left`, `right`, `up-left`, `up-right`, `down-left` or `down-right`:
```html
<button data-balloon="Whats up!" data-balloon-pos="up">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="left">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="right">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="down">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="up-left">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="up-right">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="down-left">Hover me!</button>
<button data-balloon="Whats up!" data-balloon-pos="down-right">Hover me!</button>
```
### Showing tooltips programatically
If you want to show tooltips even when user interaction isn't happening, you can simply use the `data-balloon-visible` attribute:
```html
<button data-balloon="Whats up!" data-balloon-pos="up" id="show-tip">Hover me!</button>
<script>
const btn = document.getElementById('show-tip')
btn.setAttribute('data-balloon-visible', '')
</script>
```
### Glyphs and Icon Fonts
You can also add any HTML special character to your tooltips, or even use third-party Icon fonts:
```html
<button data-balloon="HTML special characters: &#9787; &#9986; &#9820;" data-balloon-pos="up">Hover me!</button>
<button data-balloon="Emojis: 😀 😬 😁 😂 😃 😄 😅 😆" data-balloon-pos="up">Hover me!</button>
```
Example using [Font Awesome](https://fortawesome.github.io/Font-Awesome/):
```html
<button class="fa" data-balloon="Font Awesome: &#xf030; &#xf133; &#xf1fc; &#xf03e; &#xf1f8;" data-balloon-pos="up">Hover me!</button>
```
### Contributing
Balloon.css is mantained in SASS and LESS. To contribute with bugfixes and enchancements you must follow this steps:
1. Clone repo. E.g. `git clone https://github.com/kazzkiq/balloon.css.git`
2. Run `npm install`
3. Edit SASS/LESS files and run `npm run build-all` to generate the production CSS files. (alternatively you can run `build-sass` or `build-less` for specific compiling).
4. Make sure to test the production files over the website (branch `gh-pages`) before submitting a Pull Request.
Note 1: Remember to update **both SASS and LESS** files after your changes (both must always be in sync).
Note 2: You're not obligated to use the built-in tasks from the above steps. If you're using your own build, just make sure to update production and source files before submitting a PR.
### Credits
Made by Claudio Holanda ([@kazzkiq](https://twitter.com/kazzkiq))
node_modules/balloon-css/src/balloon.scss
Generated Vendored
+439
View File
@@ -0,0 +1,439 @@
//
// Variables
// -----------------------------------------
$balloon-bg: fade-out(#111, .1) !default;
$balloon-base-size: 10px !default;
$balloon-arrow-height: 6px !default;
//
// Mixins
// -----------------------------------------
@mixin svg-arrow ($color, $position: up) {
$degrees: 0;
$height: 6px;
$width: 18px;
@if ($position == down) {
$degrees: 180 18 6;
} @else if ($position == left) {
$degrees: -90 18 18;
$width: 6px;
$height: 18px;
} @else if ($position == right) {
$degrees: 90 6 6;
$width: 6px;
$height: 18px;
}
background: no-repeat url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22#{$width * 2}%22%20height%3D%22#{$height * 2}%22%3E%3Cpath%20fill%3D%22#{$color}%22%20transform%3D%22rotate(#{$degrees})%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E');
background-size: 100% auto;
width: $width;
height: $height;
}
@mixin transition ($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
-o-transition: $args;
transition: $args;
}
@mixin transform ($val) {
-webkit-transform: $val;
-moz-transform: $val;
-ms-transform: $val;
transform: $val;
}
@mixin transform-origin ($val) {
-webkit-transform-origin: $val;
-moz-transform-origin: $val;
-ms-transform-origin: $val;
transform-origin: $val;
}
@mixin opacity ($trans) {
filter: alpha(opacity=($trans * 100));
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$trans * 100})";
-moz-opacity: $trans;
-khtml-opacity: $trans;
opacity: $trans;
}
@mixin base-effects () {
@include opacity(0);
pointer-events: none;
@include transition(all .18s ease-out .18s);
}
@mixin no-effects () {
@include transition(none);
}
@mixin normalized-text() {
font-family: sans-serif !important;
font-weight: normal !important;
font-style: normal !important;
text-shadow: none !important;
font-size: $balloon-base-size + 2 !important;
}
//
// Styles
// -----------------------------------------
// IE 11 button bugfix
button[data-balloon] {
overflow: visible;
}
[data-balloon] {
position: relative; // alt. absolute or fixed
// Fixing iOS Safari event issue.
// More info at: https://goo.gl/w8JF4W
cursor: pointer;
&:after {
@include base-effects();
@include normalized-text();
background: $balloon-bg;
border-radius: 4px;
color: #fff;
content: attr(data-balloon);
padding: .5em 1em;
position: absolute;
white-space: nowrap;
z-index: 10;
}
&:before {
@include svg-arrow($balloon-bg);
@include base-effects();
content: '';
position: absolute;
z-index: 10;
}
&:hover, &[data-balloon-visible] {
&:before,
&:after {
@include opacity(1);
pointer-events: auto;
}
}
&:not([data-balloon-pos]) {
&:after {
bottom: 100%;
left: 50%;
margin-bottom: 5px + $balloon-arrow-height;
@include transform(translate(-50%, 10px));
@include transform-origin(top);
}
&:before {
bottom: 100%;
left: 50%;
margin-bottom: 5px;
@include transform(translate(-50%, 10px));
@include transform-origin(top);
}
&:hover, &[data-balloon-visible] {
&:after {
@include transform(translate(-50%, 0));
}
&:before {
@include transform(translate(-50%, 0));
}
}
}
&.font-awesome:after {
font-family: FontAwesome, sans-serif !important;
}
&[data-balloon-break] {
&:after {
white-space: pre;
}
}
&[data-balloon-blunt] {
&:before,
&:after {
@include no-effects();
}
}
&[data-balloon-pos="up"] {
&:after {
bottom: 100%;
left: 50%;
margin-bottom: 5px + $balloon-arrow-height;
@include transform(translate(-50%, 10px));
@include transform-origin(top);
}
&:before {
bottom: 100%;
left: 50%;
margin-bottom: 5px;
@include transform(translate(-50%, 10px));
@include transform-origin(top);
}
&:hover, &[data-balloon-visible] {
&:after {
@include transform(translate(-50%, 0));
}
&:before {
@include transform(translate(-50%, 0));
}
}
}
&[data-balloon-pos="up-left"] {
&:after {
bottom: 100%;
left: 0;
margin-bottom: 5px + $balloon-arrow-height;
@include transform(translate(0, 10px));
@include transform-origin(top);
}
&:before {
bottom: 100%;
left: 5px;
margin-bottom: 5px;
@include transform(translate(0, 10px));
@include transform-origin(top);
}
&:hover, &[data-balloon-visible] {
&:after {
@include transform(translate(0, 0));
}
&:before {
@include transform(translate(0, 0));
}
}
}
&[data-balloon-pos="up-right"] {
&:after {
bottom: 100%;
right: 0;
margin-bottom: 5px + $balloon-arrow-height;
@include transform(translate(0, 10px));
@include transform-origin(top);
}
&:before {
bottom: 100%;
right: 5px;
margin-bottom: 5px;
@include transform(translate(0, 10px));
@include transform-origin(top);
}
&:hover, &[data-balloon-visible] {
&:after {
@include transform(translate(0, 0));
}
&:before {
@include transform(translate(0, 0));
}
}
}
&[data-balloon-pos='down'] {
&:after {
left: 50%;
margin-top: 5px + $balloon-arrow-height;
top: 100%;
@include transform(translate(-50%, -10px));
}
&:before {
@include svg-arrow($balloon-bg, 'down');
left: 50%;
margin-top: 5px;
top: 100%;
@include transform(translate(-50%, -10px));
}
&:hover, &[data-balloon-visible] {
&:after {
@include transform(translate(-50%, 0));
}
&:before {
@include transform(translate(-50%, 0));
}
}
}
&[data-balloon-pos='down-left'] {
&:after {
left: 0;
margin-top: 5px + $balloon-arrow-height;
top: 100%;
@include transform(translate(0, -10px));
}
&:before {
@include svg-arrow($balloon-bg, 'down');
left: 5px;
margin-top: 5px;
top: 100%;
@include transform(translate(0, -10px));
}
&:hover, &[data-balloon-visible] {
&:after {
@include transform(translate(0, 0));
}
&:before {
@include transform(translate(0, 0));
}
}
}
&[data-balloon-pos='down-right'] {
&:after {
right: 0;
margin-top: 5px + $balloon-arrow-height;
top: 100%;
@include transform(translate(0, -10px));
}
&:before {
@include svg-arrow($balloon-bg, 'down');
right: 5px;
margin-top: 5px;
top: 100%;
@include transform(translate(0, -10px));
}
&:hover, &[data-balloon-visible] {
&:after {
@include transform(translate(0, 0));
}
&:before {
@include transform(translate(0, 0));
}
}
}
&[data-balloon-pos='left'] {
&:after {
margin-right: 5px + $balloon-arrow-height;
right: 100%;
top: 50%;
@include transform(translate(10px, -50%));
}
&:before {
@include svg-arrow($balloon-bg, 'left');
margin-right: 5px;
right: 100%;
top: 50%;
@include transform(translate(10px, -50%));
}
&:hover, &[data-balloon-visible] {
&:after {
@include transform(translate(0, -50%));
}
&:before {
@include transform(translate(0, -50%));
}
}
}
&[data-balloon-pos='right'] {
&:after {
left: 100%;
margin-left: 5px + $balloon-arrow-height;
top: 50%;
@include transform(translate(-10px, -50%));
}
&:before {
@include svg-arrow($balloon-bg, 'right');
left: 100%;
margin-left: 5px;
top: 50%;
@include transform(translate(-10px, -50%));
}
&:hover, &[data-balloon-visible] {
&:after {
@include transform(translate(0, -50%));
}
&:before {
@include transform(translate(0, -50%));
}
}
}
&[data-balloon-length='small'] {
&:after {
white-space: normal;
width: 80px;
}
}
&[data-balloon-length='medium'] {
&:after {
white-space: normal;
width: 150px;
}
}
&[data-balloon-length='large'] {
&:after {
white-space: normal;
width: 260px;
}
}
&[data-balloon-length='xlarge'] {
&:after {
white-space: normal;
width: 380px;
@media screen and (max-width: 768px) {
white-space: normal;
width: 90vw;
}
}
}
&[data-balloon-length='fit'] {
&:after {
white-space: normal;
width: 100%;
}
}
}