mirror of
https://github.com/maputnik/editor.git
synced 2026-05-15 20:50:02 +00:00
93596b3540
## Feat: Add drag and drop support to Upload Style area Closes #911 --- ### Problem The Upload Style area only supported click-to-upload. Users could not drag and drop a JSON file directly onto it. ### Fix Added `onDragOver` and `onDrop` event handlers to the Upload Style area. The dropped file is passed to the existing file reading logic already used by the Upload button. A visual highlight is shown when dragging over the area.
372 lines
6.3 KiB
SCSS
372 lines
6.3 KiB
SCSS
@use "mixins";
|
|
@use "vars";
|
|
|
|
//MODAL
|
|
|
|
.maputnik-modal-container {
|
|
text-align: left !important;
|
|
}
|
|
|
|
[dir="rtl"] .maputnik-modal-container {
|
|
text-align: right !important;
|
|
}
|
|
|
|
.maputnik-modal {
|
|
min-width: 350px;
|
|
max-width: 600px;
|
|
overflow: hidden;
|
|
background-color: vars.$color-black;
|
|
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
|
|
z-index: 3;
|
|
position: relative;
|
|
font-family: vars.$font-family;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 100vh;
|
|
}
|
|
|
|
.maputnik-modal-section {
|
|
padding-top: vars.$margin-3;
|
|
padding-bottom: vars.$margin-3;
|
|
|
|
h1 {
|
|
font-size: vars.$font-size-4;
|
|
}
|
|
|
|
h2 {
|
|
font-size: vars.$font-size-5;
|
|
}
|
|
|
|
/* Bug fix: <http://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox> */
|
|
min-height: 0;
|
|
|
|
@include mixins.flex-column;
|
|
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.maputnik-modal-sub-section {
|
|
margin-top: vars.$margin-1;
|
|
}
|
|
|
|
.maputnik-modal-section--shrink {
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.maputnik-modal-header {
|
|
background-color: vars.$color-gray;
|
|
padding: vars.$margin-3;
|
|
|
|
@include mixins.flex-row;
|
|
}
|
|
|
|
.maputnik-modal-header-title {
|
|
font-size: vars.$font-size-5;
|
|
margin: 0;
|
|
}
|
|
|
|
.maputnik-modal-header-toggle {
|
|
border: none;
|
|
background: initial;
|
|
color: white;
|
|
padding: 0;
|
|
}
|
|
|
|
.maputnik-modal-scroller {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.maputnik-modal-content {
|
|
padding: vars.$margin-3;
|
|
|
|
@include mixins.flex-column;
|
|
}
|
|
|
|
//OPEN MODAL
|
|
.maputnik-upload-button {
|
|
@extend .maputnik-big-button !optional; /* stylelint-disable-line */
|
|
}
|
|
|
|
.maputnik-upload-dropzone {
|
|
border: 2px dashed vars.$color-midgray;
|
|
border-radius: 6px;
|
|
padding: vars.$margin-4 vars.$margin-3;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: border-color 120ms ease, background-color 120ms ease;
|
|
|
|
&:hover,
|
|
&:focus-visible {
|
|
border-color: vars.$color-lowgray;
|
|
background-color: rgba(255, 255, 255, 0.03);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid vars.$color-lowgray;
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
.maputnik-upload-dropzone--active {
|
|
border-color: vars.$color-lowgray;
|
|
background-color: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.maputnik-upload-dropzone-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.maputnik-upload-dropzone-icon {
|
|
font-size: 28px;
|
|
color: vars.$color-midgray;
|
|
}
|
|
|
|
.maputnik-upload-dropzone-text {
|
|
margin: vars.$margin-2 0 0;
|
|
color: vars.$color-lowgray;
|
|
}
|
|
|
|
.maputnik-style-gallery-container {
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.maputnik-public-style {
|
|
vertical-align: top;
|
|
margin-top: 10px;
|
|
margin-right: 10px;
|
|
background-color: vars.$color-gray;
|
|
display: inline-block;
|
|
width: 180px;
|
|
font-size: vars.$font-size-2;
|
|
color: vars.$color-lowgray;
|
|
}
|
|
|
|
.maputnik-public-style-button {
|
|
background-color: vars.$color-gray;
|
|
padding: vars.$margin-3;
|
|
display: block;
|
|
width: 100%;
|
|
|
|
&:hover {
|
|
background-color: vars.$color-midgray;
|
|
}
|
|
}
|
|
|
|
.maputnik-public-style-header {
|
|
@include mixins.flex-row;
|
|
}
|
|
|
|
.maputnik-public-style-thumbnail {
|
|
display: block;
|
|
margin-top: vars.$margin-2;
|
|
width: 100%;
|
|
padding-top: calc(400 / 600 * 100%);
|
|
background-size: cover;
|
|
background-color: vars.$color-midgray;
|
|
}
|
|
|
|
.maputnik-add-modal {
|
|
width: 400px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.maputnik-export-modal {
|
|
width: 400px;
|
|
max-width: 100%;
|
|
|
|
.maputnik-input-block-label {
|
|
width: 50%;
|
|
align-self: center;
|
|
}
|
|
|
|
.maputnik-input-block-action {
|
|
width: 0;
|
|
}
|
|
}
|
|
|
|
.maputnik-add-layer {
|
|
@extend .clearfix !optional; /* stylelint-disable-line */
|
|
}
|
|
|
|
//ADD MODAL
|
|
.maputnik-add-layer-button {
|
|
@extend .maputnik-big-button !optional; /* stylelint-disable-line */
|
|
|
|
margin-right: vars.$margin-3;
|
|
float: right;
|
|
display: inline-block;
|
|
margin-top: 3;
|
|
margin-bottom: vars.$margin-3;
|
|
text-align: right;
|
|
}
|
|
|
|
//SOURCE MODAL
|
|
.maputnik-public-sources {
|
|
margin-bottom: 1.5%;
|
|
}
|
|
|
|
.maputnik-public-source {
|
|
vertical-align: top;
|
|
margin-top: 1.5%;
|
|
margin-right: 1.5%;
|
|
background-color: vars.$color-gray;
|
|
width: 48.5%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.maputnik-public-source-select {
|
|
padding: vars.$margin-3;
|
|
font-size: vars.$font-size-5;
|
|
color: vars.$color-lowgray;
|
|
background-color: transparent;
|
|
width: 100%;
|
|
|
|
@include mixins.flex-row;
|
|
}
|
|
|
|
.maputnik-public-source-name {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.maputnik-public-source-id {
|
|
font-weight: 400;
|
|
text-align: left;
|
|
}
|
|
|
|
.maputnik-active-source-type-editor {
|
|
min-width: 500px;
|
|
}
|
|
|
|
.maputnik-active-source-type-editor-header {
|
|
background-color: vars.$color-gray;
|
|
color: vars.$color-lowgray;
|
|
padding: vars.$margin-2;
|
|
|
|
@include mixins.flex-row;
|
|
}
|
|
|
|
.maputnik-active-source-type-editor-header-id {
|
|
font-weight: 700;
|
|
line-height: 2;
|
|
font-size: vars.$font-size-5;
|
|
}
|
|
|
|
.maputnik-active-source-type-editor-content {
|
|
border-color: vars.$color-gray;
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
padding: vars.$margin-2;
|
|
|
|
.maputnik-input-block-label {
|
|
width: 30%;
|
|
}
|
|
|
|
.maputnik-input-block-action {
|
|
width: 20%;
|
|
}
|
|
}
|
|
|
|
.maputnik-add-source {
|
|
@extend .clearfix !optional; /* stylelint-disable-line */
|
|
|
|
.maputnik-input-block-label {
|
|
width: 30%;
|
|
}
|
|
|
|
.maputnik-input-block-action {
|
|
width: 20%;
|
|
}
|
|
}
|
|
|
|
.maputnik-add-source-button {
|
|
@extend .maputnik-big-button !optional; /* stylelint-disable-line */
|
|
|
|
display: inline-block;
|
|
margin-top: 0;
|
|
margin-right: vars.$margin-3;
|
|
float: right;
|
|
}
|
|
|
|
//EXPORT MODAL
|
|
.maputnik-export-gist {
|
|
font-size: vars.$font-size-6;
|
|
|
|
.maputnik-input-block {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
|
|
label {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
span {
|
|
color: vars.$color-lowgray;
|
|
}
|
|
}
|
|
|
|
.maputnik-modal-error {
|
|
border: solid 2px #ef5350;
|
|
color: #ef5350;
|
|
padding: 8px;
|
|
padding-right: 32px;
|
|
position: relative;
|
|
}
|
|
|
|
.maputnik-modal-error-close {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 8px;
|
|
text-decoration: none;
|
|
color: #ef5350;
|
|
}
|
|
|
|
.maputnik-modal-shortcuts {
|
|
position: relative;
|
|
overflow: hidden;
|
|
max-width: 30em;
|
|
|
|
kbd {
|
|
color: white;
|
|
background: #3c3c3c;
|
|
padding: 2px 6px;
|
|
display: inline-block;
|
|
text-align: center;
|
|
border-radius: 2px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
&__shortcut {
|
|
margin-bottom: vars.$margin-2;
|
|
}
|
|
|
|
dt {
|
|
display: inline;
|
|
margin-right: vars.$margin-2;
|
|
}
|
|
|
|
dd {
|
|
display: inline;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 4px;
|
|
}
|
|
}
|
|
|
|
.modal-settings {
|
|
width: 400px;
|
|
}
|
|
|
|
.maputnik-modal-export-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
.maputnik-button {
|
|
margin-left: 4px;
|
|
}
|
|
}
|