Matt Driscoll you be kind enough to share your Sass and Extended Scalebar demos? You both did very nice presentations! I was wondering in particular how the Hand emoji for the Scalebar widget was animated, moving up and down in size. I missed where or how that was accomplished; I believe it was only shown that the div containing the hand symbol was placed and not the subclass styling aspect.
I have the theme Builder working now!! Works perfectly, I styled a few things like in your demo. I am a bit confused though about the checkbox. How can I accomplish that the "right way" in SCCS? While I do see
.esri-layer-list__item-toggle in the _layerlist.SCSS. But the CSS that is actually doing the styling, I do not see there. I see in F12 in my demo app above, a Span with esri-layer-list__item-toggle and inside of that, a span inside of it: span class="esri-icon-non-visible". Which is in reality what seems to be doing the actual checkbox. (As your CSS override works as in my Pen) However, what would the right way to do this be in the Theme Style Builder in SCSS? In the _layerlist.SCSS the only two lines with esri-layer-list__item-toggle are:
.esri-layer-list__item-toggle {
color: $interactive-font-color--disabled;
and
.esri-layer-list__item-toggle {
padding: 0 $side-spacing--quarter;
cursor: pointer;
color: $interactive-font-color;
}
Thank you again! I think this will be a popular question, getting the checkbox for the layer list back, as we all begin to migrate to 4.x. Thank you again Matt, Robert and everyone. I am excited to get in to SCSS and all the new possibilities with 4.x.