Skip to content

brainfood / bootflat

Go to a project
Toggle navigation
Toggle navigation pinning
3fa37732 by bootflat
Options

update version 2.0.4

1 parent f4d48a76
Expand all
Inline Side-by-side
Showing 15 changed files with 431 additions and 15 deletions
...@@ -83,6 +83,8 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/ ...@@ -83,6 +83,8 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/
83 83
84 ## Changelog: 84 ## Changelog:
85 85
86 2014/8/26 version 2.0.4 `add widgets: TimeLine`
87
86 2014/8/26 add `color picker`, you can make a flat design with it 88 2014/8/26 add `color picker`, you can make a flat design with it
87 89
88 2014/7/9 version 2.0.3 `support bootstrap 3.2.0 and Sass 3.3.9, add wigets: Calendar, Pricing` 90 2014/7/9 version 2.0.3 `support bootstrap 3.2.0 and Sass 3.3.9, add wigets: Calendar, Pricing`
......
...@@ -15,5 +15,5 @@ url: http://bootflat.github.io ...@@ -15,5 +15,5 @@ url: http://bootflat.github.io
15 encoding: UTF-8 15 encoding: UTF-8
16 16
17 # Custom vars 17 # Custom vars
18 current_version: 2.0.3 18 current_version: 2.0.4
19 repo: https://github.com/bootflat/bootflat.github.io 19 repo: https://github.com/bootflat/bootflat.github.io
......
1 /* 1 /*
2 * bootflat 2.0.3 2 * bootflat 2.0.4
3 * 3 *
4 * Description: BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps. 4 * Description: BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.
5 * 5 *
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 * 7 *
8 * By @Flathemes <info@flathemes.com> 8 * By @Flathemes <info@flathemes.com>
9 * 9 *
10 * Last modify time: 2014-08-19 10 * Last modify time: 2014-09-03
11 * 11 *
12 * Licensed under the MIT license. Please see LICENSE for more information. 12 * Licensed under the MIT license. Please see LICENSE for more information.
13 * 13 *
...@@ -2363,6 +2363,161 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it ...@@ -2363,6 +2363,161 @@ a.list-group-item-danger.active, a.list-group-item-danger:hover, a.list-group-it
2363 } 2363 }
2364 2364
2365 /** 2365 /**
2366 * timeline
2367 * --------------------------------------------------
2368 */
2369 .timeline dl {
2370 position: relative;
2371 top: 0;
2372 padding: 20px 0;
2373 margin: 0;
2374 }
2375 .timeline dl:before {
2376 position: absolute;
2377 top: 0;
2378 bottom: 0;
2379 left: 50%;
2380 z-index: 100;
2381 width: 2px;
2382 margin-left: -1px;
2383 content: '';
2384 background-color: #ccd1d9;
2385 }
2386 .timeline dl dt {
2387 position: relative;
2388 top: 30px;
2389 z-index: 200;
2390 width: 120px;
2391 padding: 3px 5px;
2392 margin: 0 auto 30px;
2393 font-weight: normal;
2394 color: white;
2395 text-align: center;
2396 background-color: #aab2bd;
2397 border-radius: 4px;
2398
2399 -webkit-border-radius: 4px;
2400 -moz-border-radius: 4px;
2401 }
2402 .timeline dl dd {
2403 position: relative;
2404 z-index: 200;
2405 }
2406 .timeline dl dd .circ {
2407 position: absolute;
2408 top: 40px;
2409 left: 50%;
2410 z-index: 200;
2411 width: 22px;
2412 height: 22px;
2413 margin-left: -11px;
2414 background-color: #4fc1e9;
2415 border: 4px solid #f5f7fa;
2416 border-radius: 50%;
2417
2418 -webkit-border-radius: 50%;
2419 -moz-border-radius: 50%;
2420 }
2421 .timeline dl dd .time {
2422 position: absolute;
2423 top: 31px;
2424 left: 50%;
2425 display: inline-block;
2426 width: 100px;
2427 padding: 10px 20px;
2428 color: #4fc1e9;
2429 }
2430 .timeline dl dd .events {
2431 position: relative;
2432 width: 47%;
2433 padding: 10px 10px 0;
2434 margin-top: 31px;
2435 background-color: white;
2436 border-radius: 4px;
2437
2438 -webkit-border-radius: 4px;
2439 -moz-border-radius: 4px;
2440 }
2441 .timeline dl dd .events:before {
2442 position: absolute;
2443 top: 12px;
2444 width: 0;
2445 height: 0;
2446 content: '';
2447 border-style: solid;
2448 border-width: 6px;
2449 }
2450 .timeline dl dd .events .events-object {
2451 margin-right: 10px;
2452 }
2453 .timeline dl dd .events .events-body {
2454 overflow: hidden;
2455 zoom: 1;
2456 }
2457 .timeline dl dd .events .events-body .events-heading {
2458 margin: 0 0 10px;
2459 font-size: 14px;
2460 }
2461 .timeline dl dd.pos-right .time {
2462 margin-left: -100px;
2463 text-align: right;
2464 }
2465 .timeline dl dd.pos-right .events {
2466 float: right;
2467 }
2468 .timeline dl dd.pos-right .events:before {
2469 left: -12px;
2470 border-color: transparent white transparent transparent;
2471 }
2472 .timeline dl dd.pos-left .time {
2473 margin-left: 0;
2474 text-align: left;
2475 }
2476 .timeline dl dd.pos-left .events {
2477 float: left;
2478 }
2479 .timeline dl dd.pos-left .events:before {
2480 right: -12px;
2481 border-color: transparent transparent transparent white;
2482 }
2483
2484 @media screen and (max-width: 767px) {
2485 .timeline dl:before {
2486 left: 60px;
2487 }
2488 .timeline dl dt {
2489 margin: 0 0 30px;
2490 }
2491 .timeline dl dd .circ {
2492 left: 60px;
2493 }
2494 .timeline dl dd .time {
2495 left: 0;
2496 }
2497 .timeline dl dd.pos-left .time {
2498 padding: 10px 0;
2499 margin-left: 0;
2500 text-align: left;
2501 }
2502 .timeline dl dd.pos-left .events {
2503 float: right;
2504 width: 84%;
2505 }
2506 .timeline dl dd.pos-left .events:before {
2507 left: -12px;
2508 border-color: transparent white transparent transparent;
2509 }
2510 .timeline dl dd.pos-right .time {
2511 padding: 10px 0;
2512 margin-left: 0;
2513 text-align: left;
2514 }
2515 .timeline dl dd.pos-right .events {
2516 float: right;
2517 width: 84%;
2518 }
2519 }
2520 /**
2366 * dropdown-menu 2521 * dropdown-menu
2367 * -------------------------------------------------- 2522 * --------------------------------------------------
2368 */ 2523 */
......
This diff could not be displayed because it is too large.
...@@ -36,4 +36,5 @@ ...@@ -36,4 +36,5 @@
36 "bootflat/panel", 36 "bootflat/panel",
37 "bootflat/accordion", 37 "bootflat/accordion",
38 "bootflat/footer", 38 "bootflat/footer",
39 "bootflat/timeline",
39 "bootflat/dropdown"; 40 "bootflat/dropdown";
......
1 // Variables
2 //------------------------------------------------------
3 $timeline-division-background-color: $mediumgray-light !default;
4 $timeline-years-background-color: $mediumgray-dark !default;
5 $timeline-years-color: $white !default;
6 $timeline-dotted-color: $aqua-light !default;
7 $timeline-dotted-border-color: $lightgray-light !default;
8
9 $timeline-radius: 4px !default;
10
11 // Exports
12 //------------------------------------------------------
13
14 @include exports("timeline") {
15
16 /**
17 * timeline
18 * --------------------------------------------------
19 */
20
21 .timeline {
22 & dl {
23 position: relative;
24 top: 0;
25 margin: 0;
26 padding: 20px 0;
27
28 &:before {
29 position: absolute;
30 top: 0;
31 bottom: 0;
32 left: 50%;
33 margin-left: -1px;
34 width: 2px;
35 content: '';
36 background-color: $timeline-division-background-color;
37 z-index: 100;
38 }
39
40 & dt {
41 position: relative;
42 top: 30px;
43 padding: 3px 5px;
44 margin: 0 auto 30px;
45 text-align: center;
46 @include radius($type: border-radius, $value: $timeline-radius);
47 background-color: $timeline-years-background-color;
48 font-weight: normal;
49 color: $timeline-years-color;
50 width: 120px;
51 z-index: 200;
52 }
53
54 & dd {
55 position: relative;
56 z-index: 200;
57 & .circ {
58 position: absolute;
59 top: 40px;
60 left: 50%;
61 margin-left: -11px;
62 border: 4px solid $timeline-dotted-border-color;
63 width: 22px;
64 height: 22px;
65 @include radius($type: border-radius, $value: 50%);
66 background-color: $timeline-dotted-color;
67 z-index: 200;
68 }
69
70 & .time {
71 position: absolute;
72 top: 31px;
73 left: 50%;
74 padding: 10px 20px;
75 width: 100px;
76 display: inline-block;
77 color: $timeline-dotted-color;
78 }
79
80 & .events {
81 position: relative;
82 margin-top: 31px;
83 padding: 10px 10px 0;
84 @include radius($type: border-radius, $value: $timeline-radius);
85 background-color: $white;
86 width: 47%;
87
88 &:before {
89 position: absolute;
90 top: 12px;
91 width: 0;
92 height: 0;
93 content: '';
94 border-width: 6px;
95 border-style: solid;
96 }
97
98 & .events-object {
99 margin-right: 10px;
100 }
101
102 & .events-body {
103 overflow: hidden;
104 zoom: 1;
105
106 & .events-heading {
107 margin: 0 0 10px;
108 font-size: 14px;
109 }
110 }
111 }
112
113 &.pos-right {
114
115 & .time {
116 margin-left: -100px;
117 text-align: right;
118 }
119 & .events {
120 float: right;
121
122 &:before {
123 left: -12px;
124 border-color: transparent $white transparent transparent;
125 }
126 }
127 }
128 &.pos-left {
129 & .time {
130 margin-left: 0;
131 text-align: left;
132 }
133 & .events {
134 float: left;
135 &:before {
136 right: -12px;
137 border-color: transparent transparent transparent $white;
138 }
139 }
140 }
141 }
142 }
143 }
144 @media screen and (max-width: 767px) {
145 .timeline dl {
146 &:before {
147 left: 60px;
148 }
149 & dt {
150 margin: 0 0 30px;
151 }
152 & dd {
153 & .circ {
154 left: 60px;
155 }
156 & .time {
157 left: 0;
158 }
159 &.pos-left {
160 & .time {
161 margin-left: 0;
162 padding: 10px 0;
163 text-align: left;
164 }
165 & .events {
166 float: right;
167 width: 84%;
168 &:before {
169 left: -12px;
170 border-color: transparent $white transparent transparent;
171 }
172 }
173 }
174 &.pos-right {
175 & .time {
176 margin-left: 0;
177 padding: 10px 0;
178 text-align: left;
179 }
180 & .events {
181 float: right;
182 width: 84%;
183 }
184 }
185 }
186 }
187 }
188
189 }
1 { 1 {
2 "name": "Bootflat", 2 "name": "Bootflat",
3 "version": "2.0.3", 3 "version": "2.0.4",
4 "homepage": "http://bootflat.github.io", 4 "homepage": "http://bootflat.github.io",
5 "authors": [ 5 "authors": [
6 "flathemes <info@flathemes.com>" 6 "flathemes <info@flathemes.com>"
......
1 { 1 {
2 "name": "bootflat/bootflat", 2 "name": "bootflat/bootflat",
3 "description": "An open source Flat UI KIT based on Bootstrap (3.2.0). A faster, easier and less repetitive way for web developers to create elegant web apps.", 3 "description": "An open source Flat UI KIT based on Bootstrap (3.2.0). A faster, easier and less repetitive way for web developers to create elegant web apps.",
4 "version": "2.0.3", 4 "version": "2.0.4",
5 "keywords": [ 5 "keywords": [
6 "mobile", 6 "mobile",
7 "html5", 7 "html5",
......
This diff could not be displayed because it is too large.
...@@ -982,7 +982,7 @@ ...@@ -982,7 +982,7 @@
982 <!--Toggle 982 <!--Toggle
983 ================================================== --> 983 ================================================== -->
984 <div class="example"> 984 <div class="example">
985 <h2 class="example-title">Toggle <span>(Used for <code>checkbox</code> or <code>radio</code>)<span></h2> 985 <h2 class="example-title">Toggle <span>(Used for <code>checkbox</code> or <code>radio</code>)</span></h2>
986 <div class="row"> 986 <div class="row">
987 <div class="col-md-4"> 987 <div class="col-md-4">
988 <label class="toggle"> 988 <label class="toggle">
...@@ -1002,12 +1002,81 @@ ...@@ -1002,12 +1002,81 @@
1002 <span class="handle"></span> 1002 <span class="handle"></span>
1003 </label> 1003 </label>
1004 </div> 1004 </div>
1005 </div>
1006 </div>
1007 <!--TimeLine
1008 ================================================== -->
1009 <div class="example">
1010 <h2 class="example-title">TimeLine</h2>
1011 <div class="row">
1012 <div class="col-md-12">
1013 <div class="timeline">
1014 <dl>
1015 <dt>Apr 2014</dt>
1016 <dd class="pos-right clearfix">
1017 <div class="circ"></div>
1018 <div class="time">Apr 14</div>
1019 <div class="events">
1020 <div class="pull-left">
1021 <img class="events-object img-rounded" src="img/photo-1.jpg">
1022 </div>
1023 <div class="events-body">
1024 <h4 class="events-heading">Bootstrap</h4>
1025 <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
1026 </div>
1027 </div>
1028 </dd>
1029 <dd class="pos-left clearfix">
1030 <div class="circ"></div>
1031 <div class="time">Apr 10</div>
1032 <div class="events">
1033 <div class="pull-left">
1034 <img class="events-object img-rounded" src="img/photo-2.jpg">
1035 </div>
1036 <div class="events-body">
1037 <h4 class="events-heading">Bootflat</h4>
1038 <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
1039 </div>
1040 </div>
1041 </dd>
1042 <dt>Mar 2014</dt>
1043 <dd class="pos-right clearfix">
1044 <div class="circ"></div>
1045 <div class="time">Mar 15</div>
1046 <div class="events">
1047 <div class="pull-left">
1048 <img class="events-object img-rounded" src="img/photo-3.jpg">
1049 </div>
1050 <div class="events-body">
1051 <h4 class="events-heading">Flat UI</h4>
1052 <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
1053 </div>
1054 </div>
1055 </dd>
1056 <dd class="pos-left clearfix">
1057 <div class="circ"></div>
1058 <div class="time">Mar 8</div>
1059 <div class="events">
1060 <div class="pull-left">
1061 <img class="events-object img-rounded" src="img/photo-4.jpg">
1062 </div>
1063 <div class="events-body">
1064 <h4 class="events-heading">UI design</h4>
1065 <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
1066 </div>
1067 </div>
1068 </dd>
1069
1070 </dl>
1071 </div>
1072 </div>
1073 </div>
1005 </div> 1074 </div>
1006 <!-- Calendar 1075 <!-- Calendar
1007 ================================================== --> 1076 ================================================== -->
1008 <div class="example"> 1077 <div class="example">
1078 <h2 class="example-title">Calendar and Pricing</h2>
1009 <div class="row"> 1079 <div class="row">
1010 <h2 class="example-title">Calendar and Pricing</span></h2>
1011 <div class="col-md-4"> 1080 <div class="col-md-4">
1012 <div class="calendar"> 1081 <div class="calendar">
1013 <div class="years clearfix"> 1082 <div class="years clearfix">
......
...@@ -95,10 +95,10 @@ ...@@ -95,10 +95,10 @@
95 <h3>Download</h3> 95 <h3>Download</h3>
96 <p>Download the latest official release of Bootflat and get started!</p> 96 <p>Download the latest official release of Bootflat and get started!</p>
97 <ul class="item__infos"> 97 <ul class="item__infos">
98 <li>Version 2.0.3</li> 98 <li>Version 2.0.4</li>
99 <li>Released July 09 2014</li> 99 <li>Released July 09 2014</li>
100 </ul> 100 </ul>
101 <p><a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat Framework (v2.0.3)</a></p> 101 <p><a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat Framework (v2.0.4)</a></p>
102 </div> 102 </div>
103 <!-- 103 <!--
104 ================================================== --> 104 ================================================== -->
...@@ -174,7 +174,7 @@ ...@@ -174,7 +174,7 @@
174 ================================================== --> 174 ================================================== -->
175 <div class="docs-article docs--start" id="browser-support"> 175 <div class="docs-article docs--start" id="browser-support">
176 <h3>Browser Support</h3> 176 <h3>Browser Support</h3>
177 <p>As such, our browser support tends to be whatever Web View API is available to native on a given platform. For Bootflat v2.0.3, that means UIWebView for E8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</p> 177 <p>As such, our browser support tends to be whatever Web View API is available to native on a given platform. For Bootflat v2.0.4, that means UIWebView for E8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</p>
178 </div> 178 </div>
179 <!-- Free PSD 179 <!-- Free PSD
180 ================================================== --> 180 ================================================== -->
......
...@@ -54,9 +54,9 @@ And, for the designers, we offer a free PSD Download. It provides a faster, easi ...@@ -54,9 +54,9 @@ And, for the designers, we offer a free PSD Download. It provides a faster, easi
54 <h2>BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. <br/>And, for the designers, we offer a <a href="free-psd.html">free PSD Download</a>. <br />It provides a faster, easier and less repetitive way for web developers or designers to create elegant web apps. </h2> 54 <h2>BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. <br/>And, for the designers, we offer a <a href="free-psd.html">free PSD Download</a>. <br />It provides a faster, easier and less repetitive way for web developers or designers to create elegant web apps. </h2>
55 <h3>Compatible Browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</h3> 55 <h3>Compatible Browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</h3>
56 <p class="download-link"> 56 <p class="download-link">
57 <a class="btn btn-primary" href="https://github.com/Bootflat/Bootflat.github.io/archive/master.zip">Download (Version 2.0.3)</a> 57 <a class="btn btn-primary" href="https://github.com/Bootflat/Bootflat.github.io/archive/master.zip">Download (Version 2.0.4)</a>
58 </p> 58 </p>
59 <p class="version-text">MIT Licensed - Version 2.0.3</p> 59 <p class="version-text">MIT Licensed - Version 2.0.4</p>
60 <p class="adpacks"> 60 <p class="adpacks">
61 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script> 61 <script async type="text/javascript" src="//cdn.adpacks.com/adpacks.js?zoneid=1386&serve=C6SI42Y&placement=bootflat" id="_adpacks_js"></script>
62 </p> 62 </p>
......
1 /* 1 /*
2 * bootflat 2.0.2 2 * bootflat 2.0.4
3 * 3 *
4 * Description: BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps. 4 * Description: BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.
5 * 5 *
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 * 7 *
8 * By @Flathemes <info@flathemes.com> 8 * By @Flathemes <info@flathemes.com>
9 * 9 *
10 * Last modify time: 2014-07-09 10 * Last modify time: 2014-09-03
11 * 11 *
12 * Licensed under the MIT license. Please see LICENSE for more information. 12 * Licensed under the MIT license. Please see LICENSE for more information.
13 * 13 *
......
1 { 1 {
2 "name": "bootflat", 2 "name": "bootflat",
3 "private": false, 3 "private": false,
4 "version": "2.0.3", 4 "version": "2.0.4",
5 "description": "BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.", 5 "description": "BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.2.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.",
6 "author":"Flathemes <info@flathemes.com>", 6 "author":"Flathemes <info@flathemes.com>",
7 "homepage": "http://bootflat.github.com/", 7 "homepage": "http://bootflat.github.com/",
......