schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-26 19:00:39 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add stylelint and fix lint issues

Browse source
This commit is contained in:
Lukas Martinelli 2017-01-12 11:23:06 +01:00
parent 93c7f323fc
commit 69f2e12ea0
16 changed files with 133 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.travis.yml
View file

@ -18,4 +18,5 @@ script:
- mkdir public
- node --stack_size=100000 $(which npm) run build
- npm run lint
- npm run lint-styles
- npm run test

7
package.json
View file

@ -9,7 +9,8 @@
"test": "karma start --single-run",
"test-watch": "karma start",
"start": "webpack-dev-server --progress --profile --colors --watch-poll",
"lint": "eslint --ext js --ext jsx {src,test}"
"lint": "eslint --ext js --ext jsx {src,test}",
"lint-styles": "stylelint 'src/styles/*.scss'"
},
"repository": {
"type": "git",
@ -63,6 +64,9 @@
"jshintConfig": {
"esversion": 6
},
"stylelint": {
"extends": "stylelint-config-standard"
},
"eslintConfig": {
"plugins": [
"react"
@ -116,6 +120,7 @@
"react-hot-loader": "^3.0.0-beta.6",
"sass-loader": "^4.0.1",
"style-loader": "0.13.1",
"stylelint-config-standard": "^15.0.1",
"transform-loader": "^0.2.3",
"url-loader": "0.5.7",
"webpack": "1.13.2",

9
src/styles/_base.scss
View file

@ -18,7 +18,9 @@ html {
box-sizing: border-box;
}
*, *:before, *:after {
*,
*::before,
*::after {
box-sizing: inherit;
}
@ -53,7 +55,8 @@ h4 {
margin-bottom: $margin-3;
}
input:focus, select:focus {
input:focus,
select:focus {
color: $color-white !important;
outline: #8e8e8e auto 1px !important;
}
@ -63,7 +66,7 @@ label:hover {
}
.clearfix {
&:after {
&::after {
content: "";
display: table;
clear: both;

19
src/styles/_components.scss
View file

@ -2,8 +2,8 @@
.maputnik-map {
position: fixed !important;
top: 40px;
right: 0px;
bottom: 0px;
right: 0;
bottom: 0;
height: 100%;
width: 75%;
}
@ -14,7 +14,7 @@
cursor: help;
}
&-wrapper{
&-wrapper {
display: inline-block;
box-sizing: border-box;
font-size: $font-size-6;
@ -32,7 +32,7 @@
font-size: 10px;
position: absolute;
top: 20px;
left: 0px;
left: 0;
width: 120px;
z-index: 3;
}
@ -68,11 +68,15 @@
.maputnik-icon-button {
background-color: transparent;
&:hover {
background-color: transparent;
label, svg {
label,
svg {
cursor: pointer;
}
svg {
fill: $color-white;
}
@ -102,6 +106,7 @@
display: inline-block;
width: 43%;
}
.maputnik-input-block-action {
vertical-align: top;
display: inline-block;
@ -111,14 +116,14 @@
// SPACE HELPER
.maputnik-space {
flex-grow: 1;
@include vendor-prefix(flex-grow, 1);
}
// MESSAGE PANEL
.maputnik-message-panel {
padding: $margin-2;
&-error {
&-error {
color: $color-red;
}
}

5
src/styles/_filtereditor.scss
View file

@ -54,6 +54,7 @@
margin-top: $margin-2;
margin-bottom: $margin-2;
}
.maputnik-filter-editor-block-action {
display: inline-block;
width: 6%;
@ -73,6 +74,7 @@
.maputnik-filter-editor-operator {
display: inline-block;
width: 17%;
.maputnik-select {
width: 100%;
}
@ -82,7 +84,8 @@
display: inline-block;
width: 54%;
.maputnik-string, .maputnik-number {
.maputnik-string,
.maputnik-number {
width: 100%;
}
}

13
src/styles/_input.scss
View file

@ -24,20 +24,15 @@
//COLOR PICKER
.maputnik-color {
@extend .maputnik-input;
height: 26px;
}
.maputnik-color-wrapper {
position: relative;
display: inline;
}
.maputnik-color-picker-offset {
}
.maputnik-color-picker-overlay {
}
// ARRAY
.maputnik-array {
@ -49,6 +44,7 @@
// SELECT
.maputnik-select {
@extend .maputnik-input;
height: 24px;
}
@ -76,6 +72,7 @@
&-wrapper {
@extend .maputnik-input;
padding-left: 0;
padding-right: 0;
position: relative;
@ -116,7 +113,7 @@
overflow: auto;
max-height: 50%;
background: $color-gray;
z-index: 3,
z-index: 3;
}
&-menu-item {

43
src/styles/_layer.scss
View file

@ -1,13 +1,9 @@
// LAYER LIST
.maputnik-add-layer {
}
.maputnik-layer-list {
&-header{
&-header {
padding: $margin-2;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
@include flex-row;
> * {
vertical-align: middle;
@ -32,7 +28,7 @@
font-weight: 400;
color: $color-lowgray;
font-size: $font-size-6;
border-width: 0px 0px 1px;
border-width: 0 0 1px;
border-style: solid;
border-color: lighten($color-black, 0.1);
user-select: none;
@ -43,24 +39,24 @@
padding: 5px 10px;
line-height: 1.3;
max-height: 50px;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row);
opacity: 1;
opacity: 1;
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
@include flex-row;
}
&-icon-action svg {
fill: $color-black;
}
.maputnik-layer-list-item:hover, .maputnik-layer-list-item-selected {
.maputnik-layer-list-item:hover,
.maputnik-layer-list-item-selected {
background-color: lighten($color-black, 2);
.maputnik-layer-list-icon-action svg {
fill: darken($color-lowgray, 0.5);
&:hover {
fill: $color-white;
}
@ -73,9 +69,9 @@
&-item-collapsed {
position: absolute;
max-height: 0px;
max-height: 0;
overflow: hidden;
padding: 0px;
padding: 0;
opacity: 0;
visibility: hidden;
}
@ -91,10 +87,6 @@
text-overflow: ellipsis;
}
&-group {
//border-bottom: 2px solid $color-gray;
}
&-group-header {
font-size: $font-size-6;
color: $color-lowgray;
@ -102,9 +94,8 @@
cursor: pointer;
user-select: none;
padding: $margin-2;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
@include flex-row;
svg {
width: 14px;
@ -121,7 +112,6 @@
}
}
// FILTER EDITOR
.maputnik-layer-editor-group {
font-weight: bold;
@ -131,11 +121,10 @@
cursor: pointer;
user-select: none;
padding: $margin-2;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
line-height: 20px;
@include flex-row;
&:hover {
background-color: $color-gray;
}

16
src/styles/_layout.scss
View file

@ -2,9 +2,9 @@
.maputnik-scroll-container {
overflow-x: visible;
overflow-y: scroll;
bottom: 0px;
left: 0px;
right: 0px;
bottom: 0;
left: 0;
right: 0;
top: 1px;
position: absolute;
}
@ -16,18 +16,19 @@
&-list {
position: fixed;
bottom: 0px;
bottom: 0;
height: 100%;
top: 40px;
left: 0px;
left: 0;
z-index: 3;
width: 200px;
overflow: hidden;
background-color: $color-black;
}
&-drawer {
position: fixed;
bottom: 0px;
bottom: 0;
height: 100%;
top: 40px;
left: 200px;
@ -35,10 +36,11 @@
width: 350px;
background-color: $color-black;
}
&-bottom {
position: fixed;
height: 50px;
bottom: 0px;
bottom: 0;
left: 550px;
z-index: 1;
width: 100%;

7
src/styles/_mixins.scss
View file

@ -5,3 +5,10 @@
-o-#{$name}: #{$argument};
#{$name}: #{$argument};
}
@mixin flex-row {
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row);
}

94
src/styles/_modal.scss
View file

@ -3,20 +3,22 @@
min-width: 350px;
max-width: 600px;
background-color: $color-black;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
z-index: 3;
}
.maputnik-modal-section {
padding-top: $margin-3;
padding-bottom: $margin-3;
}
.maputnik-modal-header {
background-color: $color-gray;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
padding: $margin-3;
@include flex-row;
}
.maputnik-modal-header-title {
font-size: $font-size-5;
margin: 0;
@ -25,6 +27,7 @@
.maputnik-modal-header-toggle {
cursor: pointer;
}
.maputnik-modal-content {
padding: $margin-3;
}
@ -35,33 +38,33 @@
//OVERLAY
.maputnik-overlay-viewport {
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
z-index: 2;
opacity: 0.875;
background-color: rgb(28, 31, 36);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
opacity: 0.875;
background-color: rgb(28, 31, 36);
}
.maputnik-overlay {
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
position: fixed;
display: -ms-flexbox;
display: flex;
@include vendor-prefix(flex-direction, column)
align-items: center;
justify-content: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: fixed;
align-items: center;
justify-content: center;
@include flex-row;
}
//OPEN MODAL
.maputnik-upload-button {
@extend .maputnik-big-button;
}
.maputnik-public-style {
vertical-align: top;
margin-top: 10px;
@ -72,6 +75,7 @@
font-size: $font-size-2;
color: $color-lowgray;
}
.maputnik-public-style-button {
background-color: $color-gray;
padding: $margin-3;
@ -81,10 +85,9 @@
background-color: $color-midgray;
}
}
.maputnik-public-style-header {
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
@include flex-row;
}
.maputnik-public-style-thumbnail {
@ -93,38 +96,39 @@
max-width: 100%;
}
.maputnik-add-layer{
.maputnik-add-layer {
@extend .clearfix;
}
//ADD MODAL
.maputnik-add-layer-button {
@extend .maputnik-big-button;
margin-right: $margin-3;
float: right;
display: inline-block;
margin-top: 3;
margin-bottom: $margin-3;
text-align: right;
@extend .maputnik-big-button;
}
//SOURCE MODAL
.maputnik-public-source {
vertical-align: top;
margin-top: 1.5%;
margin-right: 1.5%;
background-color: $color-gray;
width: 48.5%;
vertical-align: top;
margin-top: 1.5%;
margin-right: 1.5%;
background-color: $color-gray;
width: 48.5%;
display: inline-block;
}
.maputnik-public-source-select {
padding: $margin-3;
font-size: $font-size-5;
color: $color-lowgray;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
font-size: $font-size-5;
color: $color-lowgray;
background-color: transparent;
@include flex-row;
}
.maputnik-public-source-name {
@ -138,14 +142,15 @@
.maputnik-active-source-type-editor {
min-width: 500px;
}
.maputnik-active-source-type-editor-header {
background-color: $color-gray;
color: $color-lowgray;
padding: $margin-2;
display: flex;
display: -ms-flexbox;
@include vendor-prefix(flex-direction, row)
@include flex-row;
}
.maputnik-active-source-type-editor-header-id {
font-weight: 700;
line-height: 2;
@ -153,10 +158,10 @@
}
.maputnik-active-source-type-editor-content {
border-color: $color-gray;
border-width: 2px;
border-style: solid;
padding: $margin-2;
border-color: $color-gray;
border-width: 2px;
border-style: solid;
padding: $margin-2;
}
.maputnik-add-source {
@ -165,6 +170,7 @@
.maputnik-add-source-button {
@extend .maputnik-big-button;
display: inline-block;
margin-top: 0;
margin-right: $margin-3;

5
src/styles/_popup.scss
View file

@ -2,8 +2,6 @@
display: inline-block;
color: $color-lowgray;
user-select: none;
padding-left: 0;
padding-right: $margin-1;
line-height: 1.2;
padding-left: $margin-2;
padding-right: $margin-2;
@ -16,9 +14,6 @@
color: $color-white;
}
.maputnik-property-layer-popup {
}
.maputnik-feature-property-popup {
.maputnik-input-block {
margin: 0;

1
src/styles/_reset.scss
View file

@ -1,3 +1,4 @@
/* stylelint-disable */
html {
background-color: rgb(28, 31, 36);
}

14
src/styles/_scrollbar.scss
View file

@ -1,12 +1,12 @@
::-webkit-scrollbar {
background-color: #26282e;
width: 5px;
background-color: #26282e;
width: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #666;
padding-left: 2px;
padding-right: 2px;
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;
}

3
src/styles/_toolbar.scss
View file

@ -17,7 +17,7 @@
height: $toolbar-height;
h1 {
display: inline;
display: inline;
}
img {
@ -37,6 +37,7 @@
cursor: pointer;
color: $color-white;
text-decoration: none;
&:hover {
background-color: $color-midgray;
}

9
src/styles/_zoomproperty.scss
View file

@ -2,9 +2,10 @@
.maputnik-make-zoom-function {
background-color: transparent;
display: inline-block;
padding-bottom: 0px;
padding-top: 0px;
padding-bottom: 0;
padding-top: 0;
vertical-align: middle;
@extend .maputnik-icon-button;
}
@ -28,6 +29,7 @@
vertical-align: top;
width: 16%;
margin-right: 3%;
> * {
width: 100%;
}
@ -36,6 +38,7 @@
.maputnik-zoom-spec-property-stop-value {
display: inline-block;
width: 81%;
> * {
width: 100%;
}
@ -43,11 +46,13 @@
.maputnik-delete-stop {
@extend .maputnik-icon-button;
vertical-align: top;
.maputnik-doc-wrapper {
width: auto;
}
.maputnik-doc-target {
cursor: pointer;
}

1
src/styles/index.scss
View file

@ -22,7 +22,6 @@ $toolbar-height: 40px;
@import 'mixins';
@import 'reset';
@import 'base';
@import 'components';
@import 'scrollbar';
@import 'picker';