we-do-chart/theme.styl

Nice looking and easy customize vue component for plot line-chart.Slider & resizing present.Truly responsive. Slide,resize,zoom,shapes are present

[theme="berry"]
	// box-shadow -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf
	// background-color red
	// background-image linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%)
	// background-size 3em 3em
	// background-origin content-box
	-webkit-font-smoothing antialiased
	-moz-osx-font-smoothing grayscale
	& .leftThumb
		cursor ew-resize
		fill  DarkRed
	& .rightThumb
		cursor ew-resize
		fill  DarkRed	
	& .wline 	
		cursor pointer
		stroke DarkOliveGreen
	& .mbody
		cursor grab
		fill DarkSeaGreen
		&:hover
			cursor url('../assets/grab.png'), auto
		&:active
			fill #ceed
			cursor url('../assets/closedhand.cur'), auto
	& .axislabelx	
		fill MediumVioletRed
		text-anchor middle
		font-family  Lucida Sans Typewriter, Lucida Console, monospace;
	& .axislabely	
		fill MediumVioletRed 
		alignment-baseline auto
		font-family   Lucida Sans Typewriter, Lucida Console, monospace;
	& .chartSheet
		stroke MediumVioletRed
		stroke-width 3.5
		fill snow
		z-index 1	
	& .titles
		stroke-width 2.1
		font-family Lucida Sans Typewriter, Lucida Console, monospace;
		fill DarkOliveGreen
		text-anchor middle
		z-index 2
	& .legend
		stroke-width 2.1
		font-family Lucida Sans Typewriter, Lucida Console, monospace;
		fill crimson
	& .titlesDot
		stroke-width 2.1
		fill crimson
	& .axisY
		stroke  Sienna
		stroke-width 1.8
	& .axisX
		stroke Sienna 
		stroke-width 1.8
	& .cross	
		stroke DarkGreen 
		stroke-width 0.5
		stroke-dasharray 5
	& .grids
		stroke-width 0.3
		stroke DarkOliveGreen
		stroke-dasharray 0
	& .ticks
		stroke-width 1.48
		stroke DarkGreen
	& .plot
		fill none
		stroke crimson
		stroke-width 1.8
	& .zero
		stroke Sienna 
		stroke-width 0.5	
[theme="monaco"]	
	& .leftThumb
		cursor ew-resize
		fill  LawnGreen
	& .rightThumb
		cursor ew-resize
		fill  LawnGreen	
	& .wline 	
		cursor pointer
		stroke green
	& .mbody
		cursor grab
		fill MediumSeaGreen
		&:hover
			cursor url('../assets/grab.png'), auto
		&:active
			fill #ceed
			cursor url('../assets/closedhand.cur'), auto
	& .axislabelx	
		stroke-width 0.6
		fill yellow
		text-anchor middle
		font-family  monaco, Consolas, Lucida Console, monospace;
	& .axislabely	
		stroke-width 0.8
		fill yellow 
		alignment-baseline auto
		font-family  monaco, Consolas, Lucida Console, monospace;
	& .chartSheet
		stroke silver
		fill black	
		z-index 1
	& .titles
		stroke-width 2.1
		font-family  monaco, Consolas, Lucida Console, monospace;
		fill yellow
		text-anchor middle
		z-index 2
	& .legend
		stroke-width 2.1
		font-family  monaco, Consolas, Lucida Console, monospace;
		fill yellow	
	& .titlesDot
		stroke-width 2.1
		fill green	
	& .axisY
		stroke  gold
		stroke-width 1.8
	& .axisX
		stroke gold 
		stroke-width 1.8
	& .cross	
		stroke gold 
		stroke-width 0.5
	& .grids
		stroke-width 0.3
		stroke gold
		stroke-dasharray 7
	& .ticks
		stroke-width 1.48
		stroke gold
	& .plot
		fill none
		stroke green
		stroke-width 2.8
	& .zero
		stroke  gold
		stroke-width 0.5