Skip to content

Commit 93a5e68

Browse files
andreivictorandreivictor
authored
Adding demo files (#7)
* adding demo * adding demo for v4 * adding demo for v4-alpha * update Readme * add topnav for demo page * add topnav for demo page - v4 * add topnav for demo page - v4 alpha * formatting html * update readme
1 parent c42024e commit 93a5e68

File tree

18 files changed

+1099
-501
lines changed

18 files changed

+1099
-501
lines changed

‎Gruntfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ module.exports = function(grunt) {
5656
`clean:${project}`,
5757
`sass:${project}Compressed`,
5858
`sass:${project}Expanded`,
59+
`sass:${project}Demo`,
5960
`eslint:${project}`,
6061
`copy:${project}`,
6162
`uglify:${project}`,

‎README.md‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,21 @@ $(function () {
7575

7676
## Demo
7777

78-
- Bootstrap v4 (Bootstrap v4.0.0-beta, Bootstrap v4.0.0, Bootstrap v4.1): [Codepen](https://codepen.io/andreivictor/pen/ayewjW)
79-
- Bootstrap v4.0.0-alpha.6: [Codepen](http://codepen.io/andreivictor/pen/MpNQNL)
78+
#### Local
79+
Local demo files can be found in the `demo` folder inside of each project(`bootstrap-v3`, `bootstrap-v4`, `bootstrap-v4-alpha`).
80+
First, run the following instructions in the project's root folder:
81+
82+
```
83+
$ npm install
84+
$ npm run install-#project_alias# (or) npm run install-all
85+
$ npm run build-#project_alias# (or) npm run build-all
86+
87+
(project_alias = v3 / v4 / v4-alpha)
88+
```
89+
90+
#### Online
91+
- Bootstrap v4: [Codepen](https://codepen.io/andreivictor/pen/ayewjW)
92+
- Bootstrap v4-alpha: [Codepen](http://codepen.io/andreivictor/pen/MpNQNL)
8093
- Bootstrap 3: [Codepen](http://codepen.io/andreivictor/pen/gmNeJq)
8194

8295

‎bootstrap-v3/demo/demo.css‎

Lines changed: 201 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
.tooltip-primary .tooltip-inner {
2+
background-color: #337ab7;
3+
color: #fff;
4+
}
5+
6+
.tooltip-primary.top .tooltip-arrow {
7+
border-top-color: #337ab7;
8+
}
9+
10+
.tooltip-primary.right .tooltip-arrow {
11+
border-right-color: #337ab7;
12+
}
13+
14+
.tooltip-primary.left .tooltip-arrow {
15+
border-left-color: #337ab7;
16+
}
17+
18+
.tooltip-primary.bottom .tooltip-arrow {
19+
border-bottom-color: #337ab7;
20+
}
21+
22+
.tooltip-success .tooltip-inner {
23+
background-color: #5cb85c;
24+
color: #fff;
25+
}
26+
27+
.tooltip-success.top .tooltip-arrow {
28+
border-top-color: #5cb85c;
29+
}
30+
31+
.tooltip-success.right .tooltip-arrow {
32+
border-right-color: #5cb85c;
33+
}
34+
35+
.tooltip-success.left .tooltip-arrow {
36+
border-left-color: #5cb85c;
37+
}
38+
39+
.tooltip-success.bottom .tooltip-arrow {
40+
border-bottom-color: #5cb85c;
41+
}
42+
43+
.tooltip-info .tooltip-inner {
44+
background-color: #5bc0de;
45+
color: #fff;
46+
}
47+
48+
.tooltip-info.top .tooltip-arrow {
49+
border-top-color: #5bc0de;
50+
}
51+
52+
.tooltip-info.right .tooltip-arrow {
53+
border-right-color: #5bc0de;
54+
}
55+
56+
.tooltip-info.left .tooltip-arrow {
57+
border-left-color: #5bc0de;
58+
}
59+
60+
.tooltip-info.bottom .tooltip-arrow {
61+
border-bottom-color: #5bc0de;
62+
}
63+
64+
.tooltip-warning .tooltip-inner {
65+
background-color: #f0ad4e;
66+
color: #fff;
67+
}
68+
69+
.tooltip-warning.top .tooltip-arrow {
70+
border-top-color: #f0ad4e;
71+
}
72+
73+
.tooltip-warning.right .tooltip-arrow {
74+
border-right-color: #f0ad4e;
75+
}
76+
77+
.tooltip-warning.left .tooltip-arrow {
78+
border-left-color: #f0ad4e;
79+
}
80+
81+
.tooltip-warning.bottom .tooltip-arrow {
82+
border-bottom-color: #f0ad4e;
83+
}
84+
85+
.tooltip-danger .tooltip-inner {
86+
background-color: #d9534f;
87+
color: #fff;
88+
}
89+
90+
.tooltip-danger.top .tooltip-arrow {
91+
border-top-color: #d9534f;
92+
}
93+
94+
.tooltip-danger.right .tooltip-arrow {
95+
border-right-color: #d9534f;
96+
}
97+
98+
.tooltip-danger.left .tooltip-arrow {
99+
border-left-color: #d9534f;
100+
}
101+
102+
.tooltip-danger.bottom .tooltip-arrow {
103+
border-bottom-color: #d9534f;
104+
}
105+
106+
.tooltip-custom .tooltip-inner {
107+
background-color: #f2653c;
108+
color: #ffffff;
109+
}
110+
111+
.tooltip-custom.top .tooltip-arrow {
112+
border-top-color: #f2653c;
113+
}
114+
115+
.tooltip-custom.right .tooltip-arrow {
116+
border-right-color: #f2653c;
117+
}
118+
119+
.tooltip-custom.left .tooltip-arrow {
120+
border-left-color: #f2653c;
121+
}
122+
123+
.tooltip-custom.bottom .tooltip-arrow {
124+
border-bottom-color: #f2653c;
125+
}
126+
127+
.tooltip-custom-alt .tooltip-inner {
128+
background-color: #5b2da3;
129+
color: #ffffff;
130+
}
131+
132+
.tooltip-custom-alt.top .tooltip-arrow {
133+
border-top-color: #5b2da3;
134+
}
135+
136+
.tooltip-custom-alt.right .tooltip-arrow {
137+
border-right-color: #5b2da3;
138+
}
139+
140+
.tooltip-custom-alt.left .tooltip-arrow {
141+
border-left-color: #5b2da3;
142+
}
143+
144+
.tooltip-custom-alt.bottom .tooltip-arrow {
145+
border-bottom-color: #5b2da3;
146+
}
147+
148+
body {
149+
padding-top: 50px;
150+
}
151+
152+
#topnav {
153+
z-index: 1071;
154+
}
155+
156+
#topnav .navbar-header {
157+
float: left;
158+
}
159+
160+
#topnav .navbar-right {
161+
float: right !important;
162+
margin: 0 -15px 0 0;
163+
}
164+
165+
@media (max-width: 340px) {
166+
#topnav .navbar-brand {
167+
font-size: 14px;
168+
}
169+
}
170+
171+
#topnav .navbar-nav > li > a {
172+
padding-top: 11px;
173+
padding-bottom: 11px;
174+
}
175+
176+
#topnav .navbar-nav > li > a > i {
177+
font-size: 26px;
178+
}
179+
180+
.bs-example {
181+
position: relative;
182+
margin: 15px;
183+
padding: 15px 15px 25px;
184+
border: 1px solid #ddd;
185+
border-radius: 4px 4px 0 0;
186+
}
187+
188+
.bs-example .btn {
189+
margin: 5px;
190+
}
191+
192+
.bs-example__title {
193+
margin-bottom: 20px;
194+
}
195+
196+
.bs-example--static .tooltip {
197+
position: relative;
198+
display: inline-block;
199+
margin: 10px 20px;
200+
opacity: 1;
201+
}

‎bootstrap-v3/demo/demo.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
$(document).ready(function(){
2+
$('.btn-default').tooltip();
3+
$('.btn-custom').tooltip({
4+
customClass: 'tooltip-custom'
5+
});
6+
$('.btn-custom-alt').tooltip({
7+
customClass: 'tooltip-custom-alt'
8+
});
9+
});

‎bootstrap-v3/demo/demo.scss‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
2+
@import "../src/scss/bootstrap-tooltip-custom-class";
3+
4+
.tooltip-custom {
5+
@include tooltip-custom(#f2653c, #ffffff);
6+
}
7+
8+
.tooltip-custom-alt {
9+
@include tooltip-custom(#5b2da3, #ffffff);
10+
}
11+
12+
//== Demo layout
13+
//
14+
//##
15+
body {
16+
padding-top: 50px;
17+
}
18+
19+
#topnav {
20+
z-index: ($zindex-tooltip + 1);
21+
22+
.navbar-header {
23+
float: left;
24+
}
25+
.navbar-right {
26+
float: right !important;
27+
margin: 0 -15px 0 0;
28+
}
29+
@media (max-width: 340px) {
30+
.navbar-brand {
31+
font-size: $font-size-base;
32+
}
33+
}
34+
35+
.navbar-nav>li>a {
36+
padding-top: 11px;
37+
padding-bottom: 11px;
38+
}
39+
40+
.navbar-nav>li>a>i {
41+
font-size: 26px;
42+
}
43+
}
44+
45+
.bs-example {
46+
position: relative;
47+
margin: 15px;
48+
padding: 15px 15px 25px;
49+
border: 1px solid #ddd;
50+
border-radius: 4px 4px 0 0;
51+
}
52+
.bs-example .btn {
53+
margin: 5px;
54+
}
55+
56+
.bs-example__title {
57+
margin-bottom: 20px;
58+
}
59+
60+
.bs-example--static .tooltip {
61+
position: relative;
62+
display: inline-block;
63+
margin: 10px 20px;
64+
opacity: 1;
65+
}

0 commit comments

Comments
 (0)