diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 9bf7ad6..7d954e8 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -106,40 +106,44 @@ export default class Toolbar extends React.Component { isOpen={this.state.isOpen.sources} onOpenToggle={this.toggleModal.bind(this, 'sources')} /> - - Maputnik -

Maputnik

-
- - - Open - - - - Export - - - - Sources - - - - Style Settings - - - - - { this.props.inspectModeEnabled && Map Mode } - { !this.props.inspectModeEnabled && Inspect Mode } - - - - - Help - +
+ + Maputnik +

Maputnik

+
+
+ + + Open + + + + Export + + + + Sources + + + + Style Settings + + + + + { this.props.inspectModeEnabled && Map Mode } + { !this.props.inspectModeEnabled && Inspect Mode } + + + + + Help + +
+
} } diff --git a/src/styles/_scrollbar.scss b/src/styles/_scrollbar.scss index c305879..8b2156d 100644 --- a/src/styles/_scrollbar.scss +++ b/src/styles/_scrollbar.scss @@ -1,12 +1,15 @@ -::-webkit-scrollbar { - background-color: #26282e; - width: 5px; -} +// HACK: ::webkit-scrollbar selector covers to much of the UI. Bigger changes to come so for now just use :not() to ignore the toolbar +div:not(.maputnik-toolbar__actions) { + &::-webkit-scrollbar { + background-color: #26282e; + width: 5px; + } -::-webkit-scrollbar-thumb { - border-radius: 6px; - -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); - background-color: #666; - padding-left: 2px; - padding-right: 2px; + &::-webkit-scrollbar-thumb { + border-radius: 6px; + -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + background-color: #666; + padding-left: 2px; + padding-right: 2px; + } } diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss index 77dbea8..3e4ed2c 100644 --- a/src/styles/_toolbar.scss +++ b/src/styles/_toolbar.scss @@ -54,3 +54,17 @@ display: inline; margin-left: $margin-1; } + +.maputnik-toolbar-logo { + flex: 0 0 140px; +} + +.maputnik-toolbar__inner { + display: flex; +} + +.maputnik-toolbar__actions { + white-space: nowrap; + flex: 1; + overflow-y: auto; +}