From b24d8e5a3d0fa3049e1608bf7e990810df4b21ea Mon Sep 17 00:00:00 2001 From: Wikiki Date: Fri, 9 Feb 2018 14:57:09 +0100 Subject: [PATCH] [Prerelease] Bumped version number --- bower.json | 2 +- dist/bulma-timeline.sass | 190 +++++++++++++++++++++++++++++++++++++++ package.json | 2 +- 3 files changed, 192 insertions(+), 2 deletions(-) create mode 100644 dist/bulma-timeline.sass diff --git a/bower.json b/bower.json index 66181e3..53850a8 100644 --- a/bower.json +++ b/bower.json @@ -2,7 +2,7 @@ "name": "bulma-timeline", "description": "Display a vertical timeline, in different colors, sizes, and states", "main": "timeline.sass", - "version": "1.1.6", + "version": "1.1.7", "authors": [ "Wikiki (https://wikiki.github.io/bulma-extensions/overview)" ], diff --git a/dist/bulma-timeline.sass b/dist/bulma-timeline.sass new file mode 100644 index 0000000..4fdd182 --- /dev/null +++ b/dist/bulma-timeline.sass @@ -0,0 +1,190 @@ +$timeline-marker-size: .8em !default +$timeline-marker-color: $grey-lighter !default +$timeline-marker-icon-size: 1.5em !default +$timeline-marker-border-size: .1em !default +$timeline-marker-border: $timeline-marker-border-size solid $timeline-marker-color !default +$timeline-line-color: $grey-lighter !default +$timeline-line-width: .1em !default +$timeline-line-style: solid !default +$timeline-line: $timeline-line-width $timeline-line-style $timeline-line-color !default +$timeline-content-padding: 1em 0 0 2em !default +$timeline-rtl-content-padding: 1em 2em 0 0 !default +$timeline-icon-size: $size-small !default +$timeline-header-width: 4em !default +$timeline-item-padding-left: $timeline-header-width / 2 !default +$timeline-item-padding-bottom: 2em !default +$dimensions: 16 24 32 48 64 96 128 !default + +.timeline + display: flex + flex-direction: column + .timeline-header + width: $timeline-header-width + min-width: $timeline-header-width + max-width: $timeline-header-width * 2 + word-wrap: normal + text-align: center + display: flex + justify-content: center + .timeline-item + display: flex + display: -ms-flexbox + display: -webkit-flex + position: relative + margin-left: $timeline-item-padding-left + padding-bottom: $timeline-item-padding-bottom + &::before + content: "" + background-color: $timeline-line-color + display: block + width: $timeline-line-width + height: 100% + position: absolute + left: 0 + top: 0 + + .timeline-marker + position: absolute + background: $timeline-marker-color + border: $timeline-marker-border + border-radius: 100% + content: "" + display: block + height: $timeline-marker-size + left: -(($timeline-marker-size / 2) - $timeline-marker-border-size / 2) + top: 1.2rem + width: $timeline-marker-size + &.is-image + @each $dimension in $dimensions + &.is-#{$dimension}x#{$dimension} + height: $dimension * 1px + width: $dimension * 1px + left: ( $dimension / 2 ) * -1px + background: $timeline-marker-color + border: $timeline-marker-border + border-radius: 100% + display: block + overflow: hidden + &.is-icon + height: $timeline-marker-icon-size + width: $timeline-marker-icon-size + left: -(($timeline-marker-icon-size / 2) - $timeline-marker-border-size / 2) + line-height: .75rem + padding: $timeline-icon-size / 3 + background: $timeline-marker-color + border: $timeline-marker-border + border-radius: 100% + > i + color: $white + font-size: $timeline-icon-size !important + &.is-outlined + .image + background: $white + &.is-icon + background: $white + > i + color: $timeline-marker-color + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + background-color: $color !important + border-color: $color !important + .image + border-color: $color !important + + &.is-icon + background-color: $color !important + border-color: $color !important + > i + color: $color-invert !important + &.is-outlined + background-color: $white !important + border-color: $color !important + .image + background-color: $white !important + &.is-icon + background-color: $white !important + > i + color: $color !important + .timeline-content + padding: 1em 0 0 .5em + padding: $timeline-content-padding + .heading + font-weight: $weight-semibold + + @each $name, $pair in $colors + $color: nth($pair, 1) + $color-invert: nth($pair, 2) + &.is-#{$name} + &::before + background-color: $color + + &.is-centered + .timeline-header + display: flex + width: 100% + align-self: center + .timeline-item + width: 50% + align-self: flex-end + &:nth-of-type(2n) + align-self: flex-start + margin-left: 0 + margin-right: $timeline-header-width / 2 + &::before + right: -$timeline-line-width + left: auto + .timeline-marker + left: auto + right: -(($timeline-marker-size / 2) - $timeline-marker-border-size / 2) - $timeline-line-width + &.is-image + @each $dimension in $dimensions + &.is-#{$dimension}x#{$dimension} + left: auto + right: ( $dimension / 2 ) * -1px + &.is-icon + left: auto + right: -(($timeline-marker-icon-size / 2) - $timeline-marker-border-size / 2) - $timeline-line-width + .timeline-content + padding: $timeline-rtl-content-padding + text-align: right + display: flex + flex-direction: column + align-items: flex-end + flex-basis: 100% + &:nth-of-type(2n+1) + &::before + content: "" + background-color: $timeline-line-color + display: block + width: $timeline-line-width + height: 100% + position: absolute + top: 0 + + &.is-rtl + justify-content: flex-end + align-items: flex-end + .timeline-item + justify-content: flex-end + border-left: none + &::before + right: 0 + left: auto + margin-left: 0 + margin-right: $timeline-header-width / 2 + .timeline-marker + left: auto + right: -(($timeline-marker-size / 2) - $timeline-marker-border-size / 2) + &.is-image + @each $dimension in $dimensions + &.is-#{$dimension}x#{$dimension} + left: auto + right: ( $dimension / 2 ) * -1px + &.is-icon + left: auto + right: -(($timeline-marker-icon-size / 2) - $timeline-marker-border-size / 2) + .timeline-content + padding: $timeline-rtl-content-padding + text-align: right diff --git a/package.json b/package.json index afe81b9..cf69f44 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bulma-timeline", - "version": "1.1.6", + "version": "1.1.7", "description": "Display a vertical timeline, in different colors, sizes, and states ", "main": "timeline.sass", "scripts": {