From 05b28657fa6335863af1d9eab0749d7c3a82598e Mon Sep 17 00:00:00 2001 From: Anthony Koerber Date: Wed, 28 Sep 2016 17:36:44 -0500 Subject: [PATCH 01/10] ChartJs boilerplate --- bower.json | 3 +- src/shared/behaviors/keyselectable.html | 40 +++---- src/shared/js/chartjs.html | 1 + src/strand-chartjs/doc.json | 56 +++++++++ src/strand-chartjs/example.html | 19 +++ src/strand-chartjs/index.html | 108 +++++++++++++++++ src/strand-chartjs/strand-chartjs.html | 21 ++++ src/strand-chartjs/strand-chartjs.js | 39 +++++++ src/strand-chartjs/strand-chartjs.scss | 148 ++++++++++++++++++++++++ src/strand-menu/strand-menu.html | 12 +- src/strand.html | 1 + 11 files changed, 415 insertions(+), 33 deletions(-) create mode 100644 src/shared/js/chartjs.html create mode 100644 src/strand-chartjs/doc.json create mode 100644 src/strand-chartjs/example.html create mode 100644 src/strand-chartjs/index.html create mode 100644 src/strand-chartjs/strand-chartjs.html create mode 100644 src/strand-chartjs/strand-chartjs.js create mode 100644 src/strand-chartjs/strand-chartjs.scss diff --git a/bower.json b/bower.json index f93ae0da..e81286be 100644 --- a/bower.json +++ b/bower.json @@ -42,7 +42,8 @@ "zousan": "~1.3.0", "validator-js": "4.4.0", "fetch": "~0.10.1", - "es6-promise": "~3.0.2" + "es6-promise": "~3.0.2", + "chart.js": "~2.3.0" }, "devDependencies": { "web-component-tester": "~4.2.2", diff --git a/src/shared/behaviors/keyselectable.html b/src/shared/behaviors/keyselectable.html index 3f2f6545..d239b369 100644 --- a/src/shared/behaviors/keyselectable.html +++ b/src/shared/behaviors/keyselectable.html @@ -13,17 +13,23 @@ listeners: { 'keydown': '_handleKeydown', - 'mouseover': '_handleMouseover', + // 'mouseover': '_handleMouseover', }, properties: { maxItems: { type: Number, value: 10 + }, + + _mouseoverEnabled: { + type: Boolean, + value: true } }, _handleKeydown: function(e) { + this._mouseoverEnabled = false; if(!this._maxIndex) this._maxIndex = this.items ? this.items.length-1 : 0; this._routeKeyEvent(e); @@ -95,27 +101,19 @@ this._highlightedIndex = this._maxIndex; }, - _handleMouseover: function(e) { - var eventPath = Polymer.dom(e).path; - var eventTarget, listItem; - - for(var i=0; !listItem && eventTarget !== this; i++) { - eventTarget = eventPath[i]; - if(eventTarget instanceof HTMLElement && eventTarget.matches('strand-list-item')) { - listItem = eventTarget; - } - } + // _handleMouseover: function(e) { + // document.addEventListener('mousemove', function() { + // this._mouseoverEnabled = true; + // }.bind(this)); - if(listItem) { - var targetIndex = - this._searchData ? this.domItems.indexOf(listItem) : - this.data ? this._getDataIndexFromDom(listItem.value) : - this.items.indexOf(listItem); - if(targetIndex >= 0) { - this._highlightedIndex = targetIndex; - } - } - }, + // if(this._mouseoverEnabled) { + // var target = Polymer.dom(e).path[0]; + // var targetIndex = this.items.indexOf(target); + // if(targetIndex >= 0) { + // this._highlightedIndex = targetIndex; + // } + // } + // }, _highlightedIndexChanged: function(newIndex, oldIndex) { this._updateContainerScroll(); diff --git a/src/shared/js/chartjs.html b/src/shared/js/chartjs.html new file mode 100644 index 00000000..bec6e65e --- /dev/null +++ b/src/shared/js/chartjs.html @@ -0,0 +1 @@ + diff --git a/src/strand-chartjs/doc.json b/src/strand-chartjs/doc.json new file mode 100644 index 00000000..0c8ed91d --- /dev/null +++ b/src/strand-chartjs/doc.json @@ -0,0 +1,56 @@ +{ + "name":"strand-checkbox", + "description":"A fully-styled checkbox.", + "attributes": [ + { + "name":"state", + "type":"String", + "description":"Sets the visual state of the checkbox.", + "optional":true, + "default":"none", + "options":["unchecked", "partial", "checked"] + }, + { + "name":"checked", + "type":"Boolean", + "description":"Instructs the checkbox to display it's 'checked' state. Adds the expected 'checked' attribute, like a native .", + "optional":true, + "default":"false", + "reflect": true + }, + { + "name":"disabled", + "type":"Boolean", + "description":"Sets the visual and interaction state to be disabled.", + "optional":true, + "default":"false", + "reflect":true + }, + { + "name":"icon", + "type":"String", + "description":"If set, transforms the checkbox graphic into an icon (for icon options see: strand-icon).", + "optional":true, + "default":"none", + "options":["*see strand-icon"] + } + ], + "events": [ + { + "type": "changed", + "detail": [ + { + "name":"state", + "type":"String", + "description":"The current state of the checkbox. Will report 'unchecked', 'checked', or 'partial' state." + } + ] + } + ], + "behaviors": [ + "resolvable", + "stylable", + "validatable", + "refable" + ] +} \ No newline at end of file diff --git a/src/strand-chartjs/example.html b/src/strand-chartjs/example.html new file mode 100644 index 00000000..809fc8ce --- /dev/null +++ b/src/strand-chartjs/example.html @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/strand-chartjs/index.html b/src/strand-chartjs/index.html new file mode 100644 index 00000000..58320329 --- /dev/null +++ b/src/strand-chartjs/index.html @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/strand-chartjs/strand-chartjs.html b/src/strand-chartjs/strand-chartjs.html new file mode 100644 index 00000000..1b853935 --- /dev/null +++ b/src/strand-chartjs/strand-chartjs.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/strand-chartjs/strand-chartjs.js b/src/strand-chartjs/strand-chartjs.js new file mode 100644 index 00000000..e109a669 --- /dev/null +++ b/src/strand-chartjs/strand-chartjs.js @@ -0,0 +1,39 @@ +/** + * @license + * Copyright (c) 2015 MediaMath Inc. All rights reserved. + * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt + +*/ +(function(scope) { + + scope.Checkbox = Polymer({ + is: 'strand-chartjs', + + behaviors: [ + StrandTraits.Resolvable, + StrandTraits.Stylable, + StrandTraits.Refable + ], + + properties: { + width: { + type: Number, + value: 500 + }, + height: { + type: Number, + value: 500 + } + }, + + // TODO + + _updateStyle: function(width, height, fitparent) { + return this.styleBlock({ + width: width + "px", + height: height + "px" + }); + } + }); + +})(window.Strand = window.Strand || {}); diff --git a/src/strand-chartjs/strand-chartjs.scss b/src/strand-chartjs/strand-chartjs.scss new file mode 100644 index 00000000..7c775721 --- /dev/null +++ b/src/strand-chartjs/strand-chartjs.scss @@ -0,0 +1,148 @@ +/** + * @license + * Copyright (c) 2015 MediaMath Inc. All rights reserved. + * This code may only be used under the BSD style license found at http://mediamath.github.io/strand/LICENSE.txt + +*/ +@import "_bourbon"; +@import "_color"; +@import "_mixins"; + +:host { + position: relative; + display: inline-block; + vertical-align: middle; + font-size: 0em; + line-height: 0em; + margin-right: 7px; + cursor: pointer; + white-space: nowrap; + user-select: none; + + .icon { + color: inherit; + } +} + +:host([disabled]){ + opacity: 0.5; + pointer-events:none; +} + +:host[checked] { + .icon { + color: inherit; + } +} + +@include fit(); + +:host(:active) .checkbox { + border-color: $color-A17; + box-shadow: inset 1px 1px 0 $color-A18; + background-image: linear-gradient(to top, $color-A15 0%, $color-A16 100%); + + &._strand_partial, + &._strand_checked { + border-color: $color-D18; + box-shadow: inset 1px 1px 0 $color-D19; + background-image: linear-gradient(to top, $color-D16 0%, $color-D17 100%); + } +} + +:host(:active) .checkbox-icon { + &._strand_checked { + .icon { + opacity: 0.8; + } + } +} + +.checkbox { + border: 1px solid $color-A13; + border-radius: 3px; + background-color: $color-A14; + box-shadow: inset 0 1px 0 rgba(255,255,255,.27); + background-image: linear-gradient(to top, $color-A9 0%, $color-F0 100%); + width:16px; + height: 16px; + position: relative; + pointer-events: none; + display: inline-block; + vertical-align: middle; + + .dash, + .check { + margin: auto; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + color: $color-D0; + } + + .dash { + width: 8px; + height: 8px; + } + + .check { + width: 10px; + height: 10px; + } + + &._strand_partial, + &._strand_checked { + border-color: $color-D13; + box-shadow: inset 1px 1px 0 rgba(255,255,255,.2); + background-image: linear-gradient(to top, $color-D14 0%, $color-D15 100%); + } +} + +.checkbox-icon { + overflow: hidden; + width:16px; + height: 16px; + position: relative; + pointer-events: none; + display: inline-block; + vertical-align: middle; + + .icon { + opacity: 0.3; + } + + &._strand_checked { + .icon { + opacity: 1.0; + } + } +} + +.label-holder { + background: #00FF00; +} + +:host > ::content label, +:host > ::content strand-header { + margin-left: 7px; + display: inline-block; + vertical-align: middle; + white-space: normal; + pointer-events: none; +} + +:host > ::content label { + font-family: 'Arimo', sans-serif; + @include fontSmoothing(); + color: $color-A2; + font-size: 13px; + line-height: 15px; + font-weight: 400; +} + +:host ::content strand-header { + margin-top: 0; + margin-bottom: 0; +} diff --git a/src/strand-menu/strand-menu.html b/src/strand-menu/strand-menu.html index 4ad85027..451aae2f 100755 --- a/src/strand-menu/strand-menu.html +++ b/src/strand-menu/strand-menu.html @@ -6,23 +6,13 @@ - - diff --git a/src/strand.html b/src/strand.html index 459cfa5f..b0b39e46 100644 --- a/src/strand.html +++ b/src/strand.html @@ -54,3 +54,4 @@ + From c5337c8cad32f381ae4fd7191955c3af8c9be1d6 Mon Sep 17 00:00:00 2001 From: Anthony Koerber Date: Wed, 28 Sep 2016 17:59:46 -0500 Subject: [PATCH 02/10] Don't break the build --- src/strand-chartjs/strand-chartjs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/strand-chartjs/strand-chartjs.js b/src/strand-chartjs/strand-chartjs.js index e109a669..8a537698 100644 --- a/src/strand-chartjs/strand-chartjs.js +++ b/src/strand-chartjs/strand-chartjs.js @@ -6,7 +6,7 @@ */ (function(scope) { - scope.Checkbox = Polymer({ + scope.ChartJs = Polymer({ is: 'strand-chartjs', behaviors: [ From 54c07e02abfb20417aabe403e1be5ef61bfe0780 Mon Sep 17 00:00:00 2001 From: Anthony Koerber Date: Mon, 3 Oct 2016 18:04:25 -0500 Subject: [PATCH 03/10] Basic working chartjs --- src/strand-chartjs/index.html | 53 +++++++++++ src/strand-chartjs/strand-chartjs.html | 4 +- src/strand-chartjs/strand-chartjs.js | 124 ++++++++++++++++++++++++- 3 files changed, 179 insertions(+), 2 deletions(-) diff --git a/src/strand-chartjs/index.html b/src/strand-chartjs/index.html index 58320329..af6e4ea9 100644 --- a/src/strand-chartjs/index.html +++ b/src/strand-chartjs/index.html @@ -99,6 +99,59 @@ window.addEventListener("WebComponentsReady", function() { chartjs = document.querySelector('#chartjs'); + chartjs.config = { + type: 'bar', + data: { + labels: ["stuff", "goods", "junk", "things"], + datasets: [{ + label: "# of objects", + data: [500, 60, 327, 298], + backgroundColor: [ + 'rgba(255,0,0,1)', + 'rgba(0,255,0,1)', + 'rgba(0,0,255,1)', + 'rgba(255,128,64,1)' + ], + borderColor: [ + 'rgba(0,0,0,1)', + 'rgba(0,0,0,1)', + 'rgba(0,0,0,1)', + 'rgba(0,0,0,1)' + ], + borderWidth:1 + }] + }, + options: { + responsive: false, + scales: { + yAxes: [{ + ticks: { + beginAtZero:true + } + }] + } + } + }; + + // chartjs.set('datasets', [{ + // label: "# of objects", + // data: [500, 60, 327, 298], + // backgroundColor: [ + // 'rgba(255,0,0,1)', + // 'rgba(0,255,0,1)', + // 'rgba(0,0,255,1)', + // 'rgba(255,128,64,1)' + // ], + // borderColor: [ + // 'rgba(0,0,0,1)', + // 'rgba(0,0,0,1)', + // 'rgba(0,0,0,1)', + // 'rgba(0,0,0,1)' + // ], + // borderWidth:1 + // }]); + // chartjs.set('labels', ["stuff", "goods", "junk", "things"]); + // chartjs. // TODO - stuff! diff --git a/src/strand-chartjs/strand-chartjs.html b/src/strand-chartjs/strand-chartjs.html index 1b853935..ebb6292a 100644 --- a/src/strand-chartjs/strand-chartjs.html +++ b/src/strand-chartjs/strand-chartjs.html @@ -6,8 +6,10 @@ --> - + + + diff --git a/src/strand-chartjs/strand-chartjs.js b/src/strand-chartjs/strand-chartjs.js index 8a537698..b2cb56a6 100644 --- a/src/strand-chartjs/strand-chartjs.js +++ b/src/strand-chartjs/strand-chartjs.js @@ -15,18 +15,140 @@ StrandTraits.Refable ], + TYPE_LINE: 'line', + TYPE_BAR: 'bar', + TYPE_HORIZONTAL_BAR: 'horizontalBar', + TYPE_PIE: 'pie', + TYPE_DOUGHNUT: 'doughnut', + TYPE_POLAR_AREA: 'polarArea', + TYPE_RADAR: 'radar', + TYPE_BUBBLE: 'bubble', + properties: { + // strand specific + // type: { + // type: String, + // value: function() { + // return this.TYPE_LINE; + // } + // }, + + globalFont: { + type: Object, + value: { + defaultFontColor: '#666', + defaultFontFamily: '"Arimo", sans-serif', + defaultFontSize: 12, + defaultFontStyle: 'normal', + responsive: false + } + }, + width: { type: Number, value: 500 }, + height: { type: Number, value: 500 + }, + + context: { + type: Object, + value: function() { + return this.$.context + } + }, + + chart: { + type: Object + }, + + config: { + type: Object, + observer: '_configChanged' + } + + // _configuration: { + // type: Object, + // value: { + // type: '', + // labels: [], + // datasets: [], + // options: {} + // } + // }, + + + // chartjs + // datasets: { + // type: Array, + // value: [], + // notify: true + // }, + // labels: { + // type: Array, + // value: [], + // notify: true + // }, + // xLabels: { + // type: Array, + // value: [], + // notify: true + // }, + // yLabels: { + // type: Array, + // value: [], + // notify: true + // }, + // options: { + // type: Object, + // value: {}, + // notify: true + // }, + + + + }, + + // observers: [ + // '_updateChart(type, labels, datasets, options)' + // ], + + // TODO - actually useful stuff: + // ready: function() { + // if (this.config) { + // this._updateChart(); + // } + // }, + + _configChanged: function(newVal, oldVal) { + if (newVal) this._updateChart(); + }, + + + _updateChart: function() { + // this._configuration.type = this.type; + // this._configuration.data = {}; + // this._configuration.data.datasets = this.datasets; + // this._configuration.data.labels = this.labels; + // this._configuration.options = this.options; + + // if (this.chart) { + // this.chart.update(); + // } else { + // this.chart = new Chart(this.context, this._configuration); + // } + + if (!this.chart) { + this.chart = new Chart(this.context, this.config); + } else { + this.chart.update(); } + }, - // TODO _updateStyle: function(width, height, fitparent) { return this.styleBlock({ From c463b27bb097a0d6993341087cb7ae4196572e59 Mon Sep 17 00:00:00 2001 From: Anthony Koerber Date: Wed, 5 Oct 2016 17:15:25 -0500 Subject: [PATCH 04/10] Change configuration setup, make it responsive --- src/strand-chartjs/index.html | 196 +++++++++---------------- src/strand-chartjs/strand-chartjs.html | 5 +- src/strand-chartjs/strand-chartjs.js | 172 +++++++++------------- src/strand-chartjs/strand-chartjs.scss | 132 +---------------- 4 files changed, 145 insertions(+), 360 deletions(-) diff --git a/src/strand-chartjs/index.html b/src/strand-chartjs/index.html index af6e4ea9..93659c8a 100644 --- a/src/strand-chartjs/index.html +++ b/src/strand-chartjs/index.html @@ -16,144 +16,88 @@ background: #eee; } - .col { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: block; - float: left; - padding: 0 20px; - font-size: 0; - } - - .col.c0 { - width:400px; - } - - .col.c1 { - width:300px; - } - - .col.c2 { - width:200px; - } - - .col.c3 { - width:500px; - } - - .col.c4 { - width:50%; - } - - .col:after { - visibility: hidden; - display: block; - font-size: 0; - content: " "; - clear: both; - height: 0; - } - - p { - font-family: sans-serif; - color: #333; - font-size: 12px; - line-height: 18px; - margin: 20px 0; - } - - .bold { font-weight: bold; } - - hr { - border: 0; - display: block; - border-bottom: 1px solid #fff; - border-top: 1px solid #ccc; - height: 0px; - margin-top: 20px; - } - - .vr { - width:0px; - height: 100%; - border-right: 1px solid #fff; - border-left: 1px solid #ccc; - display: block; - float: left; - } - strand-chartjs[unresolved] { display: none; } + strand-chartjs { + margin-bottom: 20px; + } + - + + + + + + diff --git a/src/strand-chartjs/strand-chartjs.html b/src/strand-chartjs/strand-chartjs.html index ebb6292a..741107ba 100644 --- a/src/strand-chartjs/strand-chartjs.html +++ b/src/strand-chartjs/strand-chartjs.html @@ -6,16 +6,17 @@ --> - + + diff --git a/src/strand-chartjs/strand-chartjs.js b/src/strand-chartjs/strand-chartjs.js index b2cb56a6..edd8e04e 100644 --- a/src/strand-chartjs/strand-chartjs.js +++ b/src/strand-chartjs/strand-chartjs.js @@ -6,12 +6,15 @@ */ (function(scope) { + var DataUtils = StrandLib.DataUtils; + var Chart = window.Chart; + scope.ChartJs = Polymer({ is: 'strand-chartjs', behaviors: [ StrandTraits.Resolvable, - StrandTraits.Stylable, + // StrandTraits.Stylable, StrandTraits.Refable ], @@ -25,137 +28,98 @@ TYPE_BUBBLE: 'bubble', properties: { - // strand specific - // type: { - // type: String, - // value: function() { - // return this.TYPE_LINE; - // } + // fitparent: { + // type: Boolean, + // value: true, + // reflectToAttribute: true // }, - - globalFont: { - type: Object, - value: { - defaultFontColor: '#666', - defaultFontFamily: '"Arimo", sans-serif', - defaultFontSize: 12, - defaultFontStyle: 'normal', - responsive: false - } - }, - width: { - type: Number, - value: 500 + type: Number }, - height: { - type: Number, - value: 500 + type: Number }, - context: { type: Object, value: function() { return this.$.context } }, - chart: { type: Object }, - - config: { + data: { + type: Object + }, + globalSettings: { type: Object, - observer: '_configChanged' + value: { + defaultFontColor: '#333', + defaultFontFamily: '"Arimo", sans-serif', + defaultFontSize: 13, + defaultFontStyle: 'normal', + // responsive: false + maintainAspectRatio: false + }, + observer: '_updateGlobals' + }, + options: { + type: Object, + // TODO: optionsDefaults prop? + value: { + scales: { + yAxes: [{ + ticks: { + beginAtZero:true + } + }] + } + } + }, + type: { + type: String, + value: function() { + return this.TYPE_BAR; + } } - - // _configuration: { - // type: Object, - // value: { - // type: '', - // labels: [], - // datasets: [], - // options: {} - // } - // }, - - - // chartjs - // datasets: { - // type: Array, - // value: [], - // notify: true - // }, - // labels: { - // type: Array, - // value: [], - // notify: true - // }, - // xLabels: { - // type: Array, - // value: [], - // notify: true - // }, - // yLabels: { - // type: Array, - // value: [], - // notify: true - // }, - // options: { - // type: Object, - // value: {}, - // notify: true - // }, - - - }, - // observers: [ - // '_updateChart(type, labels, datasets, options)' - // ], + observers: [ + '_updateChart(data, options, type)' + ], - // TODO - actually useful stuff: - // ready: function() { - // if (this.config) { - // this._updateChart(); - // } - // }, + _updateGlobals: function() { + var newGlobalSettings = DataUtils.copy(Chart.defaults.global, this.globalSettings); + Chart.defaults.global = newGlobalSettings; - _configChanged: function(newVal, oldVal) { - if (newVal) this._updateChart(); + this.debounce('updateChart', this.updateChart); }, + _updateChart: function(data, options, type) { + this.debounce('updateChart', this.updateChart); + }, - _updateChart: function() { - // this._configuration.type = this.type; - // this._configuration.data = {}; - // this._configuration.data.datasets = this.datasets; - // this._configuration.data.labels = this.labels; - // this._configuration.options = this.options; - - // if (this.chart) { - // this.chart.update(); - // } else { - // this.chart = new Chart(this.context, this._configuration); - // } + updateChart: function() { + var config = {}; + config.type = this.type; + config.data = this.data; + config.options = this.options; - if (!this.chart) { - this.chart = new Chart(this.context, this.config); - } else { - this.chart.update(); + if (this.data) { + this.chart = !this.chart ? new Chart(this.context, config) : + this.chart.update(); } - }, + // _updateStyle: function(width, height, fitparent) { + // var f = fitparent ? this.root.getBoundingClientRect.width : false; + // var w = width ? width + 'px' : false; + // var h = height ? height + 'px' : false; + // var style = {}; - _updateStyle: function(width, height, fitparent) { - return this.styleBlock({ - width: width + "px", - height: height + "px" - }); - } + // if(w) style.width = f ? f : w; + // return this.styleBlock(style); + // }, }); })(window.Strand = window.Strand || {}); diff --git a/src/strand-chartjs/strand-chartjs.scss b/src/strand-chartjs/strand-chartjs.scss index 7c775721..51416f21 100644 --- a/src/strand-chartjs/strand-chartjs.scss +++ b/src/strand-chartjs/strand-chartjs.scss @@ -10,18 +10,10 @@ :host { position: relative; - display: inline-block; - vertical-align: middle; - font-size: 0em; - line-height: 0em; - margin-right: 7px; - cursor: pointer; - white-space: nowrap; - user-select: none; + display: block; - .icon { - color: inherit; - } + width: 100%; + height: 300px; } :host([disabled]){ @@ -29,120 +21,4 @@ pointer-events:none; } -:host[checked] { - .icon { - color: inherit; - } -} - -@include fit(); - -:host(:active) .checkbox { - border-color: $color-A17; - box-shadow: inset 1px 1px 0 $color-A18; - background-image: linear-gradient(to top, $color-A15 0%, $color-A16 100%); - - &._strand_partial, - &._strand_checked { - border-color: $color-D18; - box-shadow: inset 1px 1px 0 $color-D19; - background-image: linear-gradient(to top, $color-D16 0%, $color-D17 100%); - } -} - -:host(:active) .checkbox-icon { - &._strand_checked { - .icon { - opacity: 0.8; - } - } -} - -.checkbox { - border: 1px solid $color-A13; - border-radius: 3px; - background-color: $color-A14; - box-shadow: inset 0 1px 0 rgba(255,255,255,.27); - background-image: linear-gradient(to top, $color-A9 0%, $color-F0 100%); - width:16px; - height: 16px; - position: relative; - pointer-events: none; - display: inline-block; - vertical-align: middle; - - .dash, - .check { - margin: auto; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - color: $color-D0; - } - - .dash { - width: 8px; - height: 8px; - } - - .check { - width: 10px; - height: 10px; - } - - &._strand_partial, - &._strand_checked { - border-color: $color-D13; - box-shadow: inset 1px 1px 0 rgba(255,255,255,.2); - background-image: linear-gradient(to top, $color-D14 0%, $color-D15 100%); - } -} - -.checkbox-icon { - overflow: hidden; - width:16px; - height: 16px; - position: relative; - pointer-events: none; - display: inline-block; - vertical-align: middle; - - .icon { - opacity: 0.3; - } - - &._strand_checked { - .icon { - opacity: 1.0; - } - } -} - -.label-holder { - background: #00FF00; -} - -:host > ::content label, -:host > ::content strand-header { - margin-left: 7px; - display: inline-block; - vertical-align: middle; - white-space: normal; - pointer-events: none; -} - -:host > ::content label { - font-family: 'Arimo', sans-serif; - @include fontSmoothing(); - color: $color-A2; - font-size: 13px; - line-height: 15px; - font-weight: 400; -} - -:host ::content strand-header { - margin-top: 0; - margin-bottom: 0; -} +// @include fit(); From 76c5be3baafa155b93dc99468141be1aee682ac9 Mon Sep 17 00:00:00 2001 From: Anthony Koerber Date: Fri, 7 Oct 2016 10:04:12 -0500 Subject: [PATCH 05/10] Allow height and full width to get responsive & added more examples --- src/strand-chartjs/index.html | 209 +++++++++++++++++-------- src/strand-chartjs/strand-chartjs.html | 5 +- src/strand-chartjs/strand-chartjs.js | 45 +++--- src/strand-chartjs/strand-chartjs.scss | 7 +- 4 files changed, 174 insertions(+), 92 deletions(-) diff --git a/src/strand-chartjs/index.html b/src/strand-chartjs/index.html index 93659c8a..e0873856 100644 --- a/src/strand-chartjs/index.html +++ b/src/strand-chartjs/index.html @@ -5,22 +5,13 @@ - - - - \ No newline at end of file