Skip to content
This repository has been archived by the owner on Jun 11, 2024. It is now read-only.

Commit

Permalink
fix(sass): use math.div and update dependencies
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wikiki
Wikiki committed Jan 15, 2022
1 parent 458f0a0 commit a9545c7
Show file tree
Hide file tree
Showing 5 changed files with 30,078 additions and 9,555 deletions.
2 changes: 1 addition & 1 deletion dist/css/bulma-timeline.min.css
View file

Large diffs are not rendered by default.

61 changes: 22 additions & 39 deletions dist/css/bulma-timeline.sass
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
@use "sass:math"

$timeline-marker-size: .8em !default
$timeline-marker-size: 12px !default
$timeline-marker-color: $grey-lighter !default
$timeline-marker-icon-size: 1.5em !default
$timeline-marker-border-size: .1em !default
$timeline-marker-icon-size: 24px !default
$timeline-marker-border-size: 1px !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-width: 1px !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-icon-size: .75rem !default
$timeline-header-width: 4em !default
$timeline-item-padding-left: math.div($timeline-header-width, 2) !default
$timeline-item-padding-left: $timeline-header-width * 0.5 !default
$timeline-item-padding-bottom: 2em !default
$dimensions: 16 24 32 48 64 96 128 !default

Expand Down Expand Up @@ -42,7 +40,7 @@ $dimensions: 16 24 32 48 64 96 128 !default
width: $timeline-line-width
height: 100%
position: absolute
left: 0
left: -($timeline-line-width * 0.5)
top: 0

.timeline-marker
Expand All @@ -53,15 +51,14 @@ $dimensions: 16 24 32 48 64 96 128 !default
content: ""
display: block
height: $timeline-marker-size
left: -(math.div($timeline-marker-size, 2) - math.div($timeline-marker-border-size, 2))
transform: translateX(-50%)
top: 1.2rem
width: $timeline-marker-size
&.is-image
@each $dimension in $dimensions
&.is-#{$dimension}x#{$dimension}
height: $dimension * 1px
width: $dimension * 1px
left: math.div($dimension, 2) * -1px
background: $timeline-marker-color
border: $timeline-marker-border
border-radius: 100%
Expand All @@ -73,20 +70,18 @@ $dimensions: 16 24 32 48 64 96 128 !default
justify-content: center
height: $timeline-marker-icon-size
width: $timeline-marker-icon-size
left: -(math.div($timeline-marker-icon-size, 2) - math.div($timeline-marker-border-size, 2))
line-height: .75rem
background: $timeline-marker-color
border: $timeline-marker-border
border-radius: 100%
> i
color: $white
padding: .5rem
> *
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)
Expand All @@ -100,7 +95,7 @@ $dimensions: 16 24 32 48 64 96 128 !default
&.is-icon
background-color: $color !important
border-color: $color !important
> i
> *
color: $color-invert !important
&.is-outlined
background-color: $white !important
Expand All @@ -109,10 +104,9 @@ $dimensions: 16 24 32 48 64 96 128 !default
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
Expand All @@ -132,24 +126,17 @@ $dimensions: 16 24 32 48 64 96 128 !default
.timeline-item
width: 50%
align-self: flex-end
flex-direction: row
&:nth-of-type(2n)
align-self: flex-start
flex-direction: row-reverse
margin-left: 0
margin-right: math.div($timeline-header-width, 2)
margin-right: $timeline-item-padding-left
&::before
right: -$timeline-line-width
right: -($timeline-line-width * 0.5)
left: auto
.timeline-marker
left: auto
right: -(math.div($timeline-marker-size, 2) - math.div($timeline-marker-border-size, 2)) - $timeline-line-width
&.is-image
@each $dimension in $dimensions
&.is-#{$dimension}x#{$dimension}
left: auto
right: math.div($dimension, 2) * -1px
&.is-icon
left: auto
right: -(math.div($timeline-marker-icon-size, 2) - math.div($timeline-marker-border-size, 2)) - $timeline-line-width
transform: translateX(50%)
.timeline-content
padding: $timeline-rtl-content-padding
text-align: right
Expand Down Expand Up @@ -178,23 +165,19 @@ $dimensions: 16 24 32 48 64 96 128 !default
align-items: flex-end
.timeline-item
justify-content: flex-end
flex-direction: row
border-left: none
&::before
right: 0
left: auto
margin-left: 0
margin-right: math.div($timeline-header-width, 2)
margin-right: $timeline-header-width * 0.5
.timeline-marker
left: auto
right: -(math.div($timeline-marker-size, 2) - math.div($timeline-marker-border-size, 2))
transform: translateX(50%)
&.is-image
@each $dimension in $dimensions
&.is-#{$dimension}x#{$dimension}
left: auto
right: math.div($dimension, 2) * -1px
&.is-icon
left: auto
right: -(math.div($timeline-marker-icon-size, 2) - math.div($timeline-marker-border-size, 2))
transform: translateX(50%)
.timeline-content
padding: $timeline-rtl-content-padding
text-align: right
Expand Down
4 changes: 2 additions & 2 deletions gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const log = require('fancy-log');
const nop = require('gulp-nop');
const postcss = require('gulp-postcss');
const run = require('gulp-run');
const sass = require('gulp-sass');
const sass = require('gulp-sass')(require('sass'));
const uglify = require('gulp-uglify');

/**
Expand Down Expand Up @@ -140,7 +140,7 @@ gulp.task('build:scripts', function () {
options: {
babelrc: './babelrc'
}
}, ],
},],
}
}), webpack)
.pipe(concat(config.javascript.output.filename + '.js'))
Expand Down
Loading

0 comments on commit a9545c7

Please sign in to comment.