Skip to content

Commit fdab172

Browse files
StephanWagnerStephanWagner
committed
Update to v0.4.6
1 parent 4cb8242 commit fdab172

File tree

14 files changed

+725
-30
lines changed

14 files changed

+725
-30
lines changed

‎Demo/Demo.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,12 @@
1212
<link rel="stylesheet" href="../Source/plugins/Image/jBox.Image.css">
1313
<link rel="stylesheet" href="../Source/themes/NoticeFancy.css">
1414
<link rel="stylesheet" href="../Source/themes/TooltipBorder.css">
15+
<link rel="stylesheet" href="../Source/themes/TooltipBorderThick.css">
1516
<link rel="stylesheet" href="../Source/themes/TooltipDark.css">
17+
<link rel="stylesheet" href="../Source/themes/TooltipSmall.css">
18+
<link rel="stylesheet" href="../Source/themes/TooltipSmallGray.css">
1619
<link rel="stylesheet" href="./Demo.css">
20+
<link rel="stylesheet" href="./Playground/Playground.Avatar.css">
1721

1822
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
1923

@@ -68,13 +72,20 @@ <h2>Image</h2>
6872
<a href="https://stephanwagner.me/img/jBox/demo-img/NOT-FOUND.jpg" data-jbox-image="gallery1" title="You can adjust this image-not-found notice with CSS"></a>
6973
</div>
7074

75+
<h2>Playground</h2>
76+
77+
<div class="targets-wrapper">
78+
<div id="DemoAvatars" class="target-click">Click me</div>
79+
</div>
80+
7181
</main>
7282

7383
<script src="../Source/jBox.js"></script>
7484
<script src="../Source/plugins/Notice/jBox.Notice.js"></script>
7585
<script src="../Source/plugins/Confirm/jBox.Confirm.js"></script>
7686
<script src="../Source/plugins/Image/jBox.Image.js"></script>
7787
<script src="./Demo.js"></script>
88+
<script src="./Playground/Playground.Avatar.js"></script>
7889

7990
</body>
8091
</html>

‎Demo/Demo.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ new jBox('Tooltip', {
1212

1313
new jBox('Tooltip', {
1414
attach: '#Tooltip-2',
15-
theme: 'TooltipBorder',
15+
theme: 'TooltipBorderThick',
1616
width: 200,
1717
position: {
1818
x: 'left',
@@ -254,7 +254,6 @@ $('#Notice-4').click(function() {
254254
new jBox('Image');
255255

256256

257-
258257
/* Additional JS for demo purposes */
259258

260259

‎Demo/Playground/Playground.Avatar.css

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
2+
.AvatarsModal .jBox-footer button {
3+
width: 50%;
4+
height: 50px;
5+
border: 0;
6+
padding: 0;
7+
display: block;
8+
float: left;
9+
background: center center no-repeat;
10+
transition: background .2s;
11+
}
12+
13+
.AvatarsModal .jBox-footer button:active {
14+
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
15+
}
16+
17+
#AvatarsComplete.AvatarsModal .jBox-footer button {
18+
width: 100%;
19+
float: none;
20+
}
21+
22+
.AvatarsModal .jBox-footer .button-cross {
23+
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTUwNy4zLDQxMS4zQzUwNy4zLDQxMS4zLDUwNy4zLDQxMS4zLDUwNy4zLDQxMS4zTDM1MiwyNTZsMTU1LjMtMTU1LjNjMCwwLDAsMCwwLDBDNTA5LDk5LDUxMC4yLDk3LDUxMSw5NQpjMi4xLTUuNywwLjktMTIuMy0zLjctMTYuOUw0MzQsNC43QzQyOS40LDAuMSw0MjIuNy0xLjEsNDE3LDFjLTIuMSwwLjgtNCwyLTUuNywzLjdjMCwwLDAsMCwwLDBMMjU2LDE2MEwxMDAuNyw0LjdjMCwwLDAsMCwwLDAKQzk5LDMsOTcsMS44LDk1LDFjLTUuNy0yLjEtMTIuMy0wLjktMTYuOSwzLjdMNC43LDc4QzAuMSw4Mi42LTEuMSw4OS4zLDEsOTVjMC44LDIuMSwyLDQsMy43LDUuN2MwLDAsMCwwLDAsMEwxNjAsMjU2TDQuNyw0MTEuMwpjMCwwLDAsMCwwLDBDMyw0MTMsMS44LDQxNSwxLDQxN2MtMi4xLDUuNy0wLjksMTIuMywzLjcsMTYuOWw3My40LDczLjRjNC42LDQuNiwxMS4yLDUuOCwxNi45LDMuN2MyLjEtMC44LDQtMiw1LjctMy43YzAsMCwwLDAsMCwwCkwyNTYsMzUybDE1NS4zLDE1NS4zYzAsMCwwLDAsMCwwYzEuNywxLjcsMy42LDIuOSw1LjcsMy43YzUuNywyLjEsMTIuMywwLjksMTYuOS0zLjdsNzMuNC03My40YzQuNi00LjYsNS44LTExLjIsMy43LTE2LjkKQzUxMC4yLDQxNSw1MDksNDEzLDUwNy4zLDQxMS4zTDUwNy4zLDQxMS4zeiIvPgo8L3N2Zz4K);
24+
background-color: #e33;
25+
background-size: 24px auto;
26+
border-radius: 0 0 0 4px;
27+
}
28+
29+
.AvatarsModal .jBox-footer .button-cross:hover {
30+
background-color: #f33;
31+
}
32+
33+
.AvatarsModal .jBox-footer .button-cross:active {
34+
background-color: #e33;
35+
}
36+
37+
.AvatarsModal .jBox-footer .button-heart {
38+
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggMzg0Ij4KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTIyNCwzODRjLTQsMC04LTEuNS0xMS00LjVMNTcsMjI5Yy0yLTEuOC01Ny01Mi01Ny0xMTJDMCw0My44LDQ0LjgsMCwxMTkuNSwwYzQzLjgsMCw4NC44LDM0LjUsMTA0LjUsNTQKYzE5LjgtMTkuNSw2MC44LTU0LDEwNC41LTU0QzQwMy4yLDAsNDQ4LDQzLjgsNDQ4LDExN2MwLDYwLTU1LDExMC4yLTU3LjIsMTEyLjVMMjM1LDM3OS41QzIzMiwzODIuNSwyMjgsMzg0LDIyNCwzODR6Ii8+Cjwvc3ZnPg==);
39+
background-color: #7d0;
40+
background-size: 30px auto;
41+
border-radius: 0 0 4px 0;
42+
}
43+
44+
.AvatarsModal .jBox-footer .button-heart:hover {
45+
background-color: #8e0;
46+
}
47+
48+
.AvatarsModal .jBox-footer .button-heart:active {
49+
background-color: #7d0;
50+
}
51+
52+
.AvatarsModal .jBox-footer .button-close {
53+
background-color: #ddd;
54+
border-radius: 0 0 4px 4px;
55+
}
56+
57+
.AvatarsModal .jBox-footer .button-close:hover {
58+
background-color: #eee;
59+
}
60+
61+
.AvatarsModal .jBox-footer .button-close:active {
62+
background-color: #ddd;
63+
}
64+
65+
.AvatarsModal .jBox-content {
66+
padding: 0;
67+
background: center -10px no-repeat;
68+
}
69+
70+
#AvatarsComplete.AvatarsModal .jBox-content {
71+
padding: 90px 30px 0;
72+
font-style: italic;
73+
text-align: center;
74+
color: #999;
75+
}
76+
77+
.AvatarsModal .jBox-title {
78+
font-size: 26px;
79+
color: #000;
80+
font-weight: 300;
81+
text-align: center;
82+
padding: 0;
83+
line-height: 60px;
84+
}
85+
86+
.AvatarsModal .jBox-footer {
87+
border-top: 0;
88+
background: none;
89+
padding: 0;
90+
}
91+
92+
.AvatarsTooltip .jBox-content {
93+
color: #fff;
94+
text-align: center;
95+
}
96+
97+
.AvatarsTooltip .jBox-container,
98+
.AvatarsTooltip .jBox-pointer:after {
99+
background: #000;
100+
box-shadow: none;
101+
}
102+
103+
.AvatarsTooltipLike .jBox-container,
104+
.AvatarsTooltipLike .jBox-pointer:after {
105+
border-color: #7d0;
106+
}
107+
108+
.AvatarsTooltipDislike .jBox-container,
109+
.AvatarsTooltipDislike .jBox-pointer:after {
110+
border-color: #e33;
111+
}
112+
113+
.AvatarsCollection {
114+
width: 50%;
115+
position: fixed;
116+
bottom: 5px;
117+
z-index: 11000;
118+
}
119+
120+
.AvatarsCollection#DislikedAvatars {
121+
left: 5px;
122+
}
123+
124+
.AvatarsCollection#LikedAvatars {
125+
right: 5px;
126+
}
127+
128+
.AvatarsCollection#DislikedAvatars > div {
129+
border-color: #e33;
130+
float: left;
131+
margin-right: 2px;
132+
}
133+
134+
.AvatarsCollection#LikedAvatars > div {
135+
border-color: #7d0;
136+
float: right;
137+
margin-left: 2px;
138+
}
139+
140+
.AvatarsCollection > div {
141+
position: relative;
142+
overflow: hidden;
143+
width: 45px;
144+
height: 45px;
145+
border: 2px solid red;
146+
border-radius: 50%;
147+
background: #000;
148+
}
149+
150+
.AvatarsCollection > div > img {
151+
position: absolute;
152+
top: 50%;
153+
left: 50%;
154+
width: 60px;
155+
height: 60px;
156+
margin-top: -27px;
157+
margin-left: -30px;
158+
}

0 commit comments

Comments
 (0)