update version 2.0.4

README.markdown

@@ -83,6 +83,8 @@ The source files are in the `bootflat/` folder. You can just grab the `bootflat/
 
 ## Changelog:
 
+2014/8/26 version 2.0.4 `add widgets: TimeLine`
+
 2014/8/26  add `color picker`, you can make a flat design with it
 
 2014/7/9 version 2.0.3 `support bootstrap 3.2.0 and Sass 3.3.9, add wigets: Calendar, Pricing`

_config.yml

@@ -15,5 +15,5 @@ url:              http://bootflat.github.io
 encoding:         UTF-8
 
 # Custom vars
-current_version:  2.0.3
+current_version:  2.0.4
 repo:             https://github.com/bootflat/bootflat.github.io

bootflat/scss/bootflat.scss

@@ -36,4 +36,5 @@
   "bootflat/panel",
   "bootflat/accordion",
   "bootflat/footer",
+  "bootflat/timeline",
   "bootflat/dropdown";

bootflat/scss/bootflat/_timeline.scss

@@ -0,0 +1,189 @@
+// Variables
+//------------------------------------------------------
+$timeline-division-background-color:      $mediumgray-light !default;
+$timeline-years-background-color:		  $mediumgray-dark !default;
+$timeline-years-color:                    $white !default;
+$timeline-dotted-color:                   $aqua-light !default;
+$timeline-dotted-border-color:            $lightgray-light !default;
+
+$timeline-radius:                         4px !default;
+
+// Exports
+//------------------------------------------------------
+
+@include exports("timeline") {
+
+  /**
+   * timeline
+   * --------------------------------------------------
+   */
+
+  .timeline {
+	  & dl {
+		  position: relative;
+		  top: 0;
+		  margin: 0;
+		  padding: 20px 0;
+
+		  &:before {
+			  position: absolute;
+			  top: 0;
+			  bottom: 0;
+			  left: 50%;
+			  margin-left: -1px;
+			  width: 2px;
+			  content: '';
+			  background-color: $timeline-division-background-color;
+			  z-index: 100;
+		  }
+
+		  & dt {
+			  position: relative;
+			  top: 30px;
+			  padding: 3px 5px;
+			  margin: 0 auto 30px;
+			  text-align: center;
+			  @include radius($type: border-radius, $value: $timeline-radius);
+			  background-color: $timeline-years-background-color;
+			  font-weight: normal;
+			  color: $timeline-years-color;
+			  width: 120px;
+			  z-index: 200;
+		  }
+
+		  & dd {
+			  position: relative;
+			  z-index: 200;
+			  & .circ {
+				  position: absolute;
+				  top: 40px;
+				  left: 50%;
+				  margin-left: -11px;
+				  border: 4px solid $timeline-dotted-border-color;
+				  width: 22px;
+				  height: 22px;
+				  @include radius($type: border-radius, $value: 50%);
+				  background-color: $timeline-dotted-color;
+				  z-index: 200;
+			  }
+
+			  & .time {
+				  position: absolute;
+				  top: 31px;
+				  left: 50%;
+				  padding: 10px 20px;
+				  width: 100px;
+				  display: inline-block;
+				  color: $timeline-dotted-color;
+			  }
+
+			  & .events {
+				  position: relative;
+				  margin-top: 31px;
+				  padding: 10px 10px 0;
+				  @include radius($type: border-radius, $value: $timeline-radius);
+				  background-color: $white;
+				  width: 47%;
+
+				  &:before {
+					 position: absolute;
+					 top: 12px;
+					 width: 0;
+					 height: 0;
+					 content: '';
+					 border-width: 6px;
+					 border-style: solid;
+				  }
+
+				  & .events-object {
+					  margin-right: 10px;
+				  }
+
+				  & .events-body {
+					  overflow: hidden;
+					  zoom: 1;
+
+					  & .events-heading {
+						  margin: 0 0 10px;
+						  font-size: 14px;
+					  }
+				  }
+			  }
+
+			  &.pos-right {
+
+				& .time {
+					margin-left: -100px;
+				    text-align: right;
+				}
+				& .events {
+					float: right;
+
+					&:before {
+						left: -12px;
+						border-color: transparent $white transparent transparent;
+					}
+				}
+			  }
+			  &.pos-left {
+				& .time {
+					margin-left: 0;
+				    text-align: left;
+				}
+				& .events {
+					float: left;
+					&:before {
+						right: -12px;
+						border-color: transparent transparent transparent $white;
+					}
+				}
+			  }
+		  }
+	  }
+  }
+  @media screen and (max-width: 767px) {
+		.timeline dl {
+			&:before {
+				left: 60px;
+			}
+			& dt {
+				margin: 0 0 30px;
+			}
+			& dd {
+				& .circ {
+					left: 60px;
+				}
+				& .time {
+					left: 0;
+				}
+				&.pos-left {
+					& .time {
+						margin-left: 0;
+						padding: 10px 0;
+						text-align: left;
+					}
+					& .events {
+						float: right;
+						width: 84%;
+						&:before {
+							left: -12px;
+							border-color: transparent $white transparent transparent;
+						}
+					}
+				}
+				&.pos-right {
+					& .time {
+						margin-left: 0;
+						padding: 10px 0;
+						text-align: left;
+					}
+					& .events {
+						float: right;
+						width: 84%;
+					}
+				}
+			}
+		}
+  }
+
+}

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "Bootflat",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "homepage": "http://bootflat.github.io",
   "authors": [
     "flathemes <[email protected]>"