mirror of
https://github.com/a-nyx/maputnik-with-pmtiles.git
synced 2024-12-26 16:50:37 +01:00
Fixed <select/> styling in firefox and improved in chrome.
This commit is contained in:
parent
4bbe2ce1ea
commit
cbdf45c852
5 changed files with 20 additions and 10 deletions
|
@ -210,7 +210,11 @@ export default class Toolbar extends React.Component {
|
|||
<ToolbarSelect wdKey="nav:inspect">
|
||||
<MdFindInPage />
|
||||
<IconText>View </IconText>
|
||||
<select onChange={(e) => this.handleSelection(e.target.value)} value={currentView.id}>
|
||||
<select
|
||||
className="maputnik-select"
|
||||
onChange={(e) => this.handleSelection(e.target.value)}
|
||||
value={currentView.id}
|
||||
>
|
||||
{views.map((item) => {
|
||||
return (
|
||||
<option key={item.id} value={item.id} disabled={item.disabled}>
|
||||
|
|
|
@ -97,6 +97,13 @@
|
|||
.maputnik-select {
|
||||
@extend .maputnik-input;
|
||||
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: $color-gray url("#{$icon-down-arrow}") right center no-repeat;
|
||||
color: $color-white;
|
||||
background-position: calc(100% - 2px) center;
|
||||
padding-right: 20px;
|
||||
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
* {
|
||||
*:not(select) {
|
||||
&::-webkit-scrollbar {
|
||||
background-color: #26282e;
|
||||
width: 8px;
|
||||
|
|
|
@ -102,15 +102,11 @@
|
|||
@extend .maputnik-toolbar-link;
|
||||
|
||||
select {
|
||||
// HACK: <https://github.com/maputnik/editor/pull/392#issuecomment-427595172>
|
||||
color: $color-black !important;
|
||||
margin-left: 4px;
|
||||
margin-left: 6px;
|
||||
border-width: 0;
|
||||
|
||||
option {
|
||||
// HACK: <https://github.com/maputnik/editor/pull/392#issuecomment-427595172>
|
||||
color: $color-black !important;
|
||||
}
|
||||
display: inline;
|
||||
width: auto;
|
||||
border: solid 1px $color-midgray;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -25,3 +25,6 @@ $layout-list-width: 200px;
|
|||
$layout-editor-width: 370px;
|
||||
$layout-map-width: calc(100% - #{$layout-list-width + $layout-editor-width});
|
||||
|
||||
// 'menu-down' from 'https://materialdesignicons.com/'
|
||||
// See <https://github.com/Templarian/MaterialDesign/blob/master/LICENSE>
|
||||
$icon-down-arrow: "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path fill='white' d='M7,10L12,15L17,10H7Z' /></svg>"
|
||||
|
|
Loading…
Reference in a new issue