created project structureapi /, public/, migrations/, scripts/, legacy/
This commit is contained in:
@@ -0,0 +1,261 @@
|
||||
$threshold-lg: 1200px !default;
|
||||
$threshold-md: 992px !default;
|
||||
$threshold-sm: 768px !default;
|
||||
|
||||
$width-lg: 460px !default;
|
||||
$width-md: 390px !default;
|
||||
$width-sm: 305px !default;
|
||||
$width-xs: 100% !default;
|
||||
|
||||
$sidebar-z-index: 2000 !default;
|
||||
$sidebar-transition: 500ms !default;
|
||||
|
||||
$tab-size: 40px !default;
|
||||
$tab-font-size: 12pt !default;
|
||||
$tab-bg: null !default;
|
||||
$tab-transition: 80ms !default;
|
||||
|
||||
$header-fg: $tab-active-fg !default;
|
||||
$header-bg: $tab-active-bg !default;
|
||||
|
||||
$content-bg: rgba(255, 255, 255, 0.95) !default;
|
||||
$content-padding-vertical: 10px !default;
|
||||
$content-padding-horizontal: 20px !default;
|
||||
|
||||
$move-map-in-xs: true !default;
|
||||
|
||||
.sidebar {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: $width-xs;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
z-index: $sidebar-z-index;
|
||||
|
||||
&.collapsed {
|
||||
width: $tab-size;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
top: $sidebar-margins;
|
||||
bottom: $sidebar-margins;
|
||||
|
||||
transition: width $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
|
||||
width: $width-sm;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
|
||||
width: $width-md;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-lg) {
|
||||
width: $width-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-left {
|
||||
left: 0;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
left: $sidebar-margins;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-right {
|
||||
right: 0;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
right: $sidebar-margins;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-tabs {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
|
||||
.sidebar-left & {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.sidebar-right & {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
background-color: $tabs-bg;
|
||||
|
||||
&, & > ul {
|
||||
position: absolute;
|
||||
|
||||
width: $tab-size;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
& > li {
|
||||
width: 100%;
|
||||
height: $tab-size;
|
||||
|
||||
color: $tab-fg;
|
||||
@if $tab-bg { background: $tab-bg; }
|
||||
|
||||
font-size: $tab-font-size;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
transition: all $tab-transition;
|
||||
|
||||
&:hover {
|
||||
color: $tab-hover-fg;
|
||||
background-color: $tab-hover-bg;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $tab-active-fg;
|
||||
background-color: $tab-active-bg;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: fade-out($tab-fg, 0.6);
|
||||
|
||||
&:hover {
|
||||
@if $tab-bg {
|
||||
background: $tab-bg;
|
||||
} @else {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
line-height: $tab-size;
|
||||
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > ul + ul {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
position: absolute;
|
||||
|
||||
.sidebar-left & {
|
||||
left: $tab-size;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sidebar-right & {
|
||||
left: 0;
|
||||
right: $tab-size;
|
||||
}
|
||||
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
background-color: $content-bg;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
.sidebar.collapsed > & {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-pane {
|
||||
display: none;
|
||||
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: $content-padding-vertical $content-padding-horizontal;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
|
||||
min-width: $width-sm - $tab-size;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
|
||||
min-width: $width-md - $tab-size;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-lg) {
|
||||
min-width: $width-lg - $tab-size;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
margin: (-$content-padding-vertical) (-$content-padding-horizontal) 0;
|
||||
height: $tab-size;
|
||||
padding: 0 $content-padding-horizontal;
|
||||
line-height: $tab-size;
|
||||
font-size: $tab-font-size * 1.2;
|
||||
color: $header-fg;
|
||||
background-color: $header-bg;
|
||||
|
||||
.sidebar-right & {
|
||||
padding-left: $tab-size;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: $tab-size;
|
||||
height: $tab-size;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
.sidebar-left & {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.sidebar-right & {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@if $move-map-in-xs {
|
||||
.sidebar-left ~ .sidebar-map {
|
||||
margin-left: $tab-size;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-right ~ .sidebar-map {
|
||||
margin-right: $tab-size;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
$sidebar-bg: rgba(255, 255, 255, 0.4) !default;
|
||||
$sidebar-border-width: 3px !default;
|
||||
$sidebar-border-radius: 4px !default;
|
||||
$sidebar-border: $sidebar-border-width solid transparent !default;
|
||||
|
||||
$tab-fg: #fff !default;
|
||||
$tabs-bg: rgba(0, 60, 136, 0.5) !default;
|
||||
$tab-hover-fg: #fff !default;
|
||||
$tab-hover-bg: rgba(0, 60, 136, 0.6) !default;
|
||||
$tab-active-fg: #fff !default;
|
||||
$tab-active-bg: #0074d9 !default;
|
||||
|
||||
$move-map-in-xs: false !default;
|
||||
|
||||
@import 'base';
|
||||
|
||||
.sidebar {
|
||||
background-color: $sidebar-bg;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
border: $sidebar-border;
|
||||
border-radius: $sidebar-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-left {
|
||||
border-right: $sidebar-border;
|
||||
}
|
||||
|
||||
.sidebar-right {
|
||||
border-left: $sidebar-border;
|
||||
}
|
||||
|
||||
.sidebar-tabs {
|
||||
overflow: hidden;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
border-radius: $sidebar-inner-border-radius 0 0 $sidebar-inner-border-radius;
|
||||
|
||||
.collapsed & {
|
||||
border-radius: $sidebar-inner-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
@media(min-width:$threshold-sm) {
|
||||
border-radius: 0 $sidebar-inner-border-radius $sidebar-inner-border-radius 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
$sidebar-margins: 10px !default;
|
||||
$sidebar-left-bottom-margin: $sidebar-margins + 25px !default;
|
||||
$sidebar-right-bottom-margin: $sidebar-margins + 14px !default;
|
||||
$sidebar-border: 0 !default;
|
||||
$sidebar-border-radius: 2px !default;
|
||||
$sidebar-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px !default;
|
||||
|
||||
$tab-fg: #666 !default;
|
||||
$tabs-bg: #fff !default;
|
||||
$tab-active-fg: #000 !default;
|
||||
$tab-active-bg: #febf00 !default;
|
||||
$tab-hover-fg: #000 !default;
|
||||
$tab-hover-bg: ($tabs-bg * 9 + $tab-active-bg) / 10 !default;
|
||||
|
||||
@import 'base';
|
||||
|
||||
.sidebar {
|
||||
border-right: $sidebar-border;
|
||||
box-shadow: $sidebar-shadow;
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
border: $sidebar-border;
|
||||
border-radius: $sidebar-border-radius;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-left {
|
||||
@media(min-width:$threshold-sm) {
|
||||
bottom: $sidebar-left-bottom-margin;
|
||||
}
|
||||
|
||||
& ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
|
||||
@media(min-width:$threshold-sm) {
|
||||
transition: margin-left $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
|
||||
margin-left: $width-sm + $sidebar-margins * 2 !important;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
|
||||
margin-left: $width-md + $sidebar-margins * 2 !important;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-lg) {
|
||||
margin-left: $width-lg + $sidebar-margins * 2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
&.collapsed ~ .sidebar-map .gm-style > div.gmnoprint[style*="left: 0px"] {
|
||||
margin-left: $tab-size + $sidebar-margins * 2 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar-right {
|
||||
@media(min-width:$threshold-sm) {
|
||||
bottom: $sidebar-right-bottom-margin;
|
||||
}
|
||||
|
||||
& ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
|
||||
@media(min-width:$threshold-sm) {
|
||||
transition: margin-right $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
|
||||
margin-right: $width-sm + $sidebar-margins * 2 !important;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
|
||||
margin-right: $width-md + $sidebar-margins * 2 !important;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-lg) {
|
||||
margin-right: $width-lg + $sidebar-margins * 2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
&.collapsed ~ .sidebar-map .gm-style > div.gmnoprint[style*="right: 28px"] {
|
||||
margin-right: $tab-size + $sidebar-margins * 2 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
$sidebar-margins: 10px !default;
|
||||
$sidebar-border-radius: 4px !default;
|
||||
$sidebar-touch-border: 2px solid rgba(0, 0, 0, 0.2) !default;
|
||||
$sidebar-shadow: 0 1px 5px rgba(0, 0, 0, 0.65) !default;
|
||||
|
||||
$tab-fg: #333 !default;
|
||||
$tabs-bg: #fff !default;
|
||||
$tab-hover-fg: #000 !default;
|
||||
$tab-hover-bg: #eee !default;
|
||||
$tab-active-fg: #fff !default;
|
||||
$tab-active-bg: #0074d9 !default;
|
||||
|
||||
@import 'base';
|
||||
|
||||
.sidebar {
|
||||
box-shadow: $sidebar-shadow;
|
||||
|
||||
&.leaflet-touch {
|
||||
box-shadow: none;
|
||||
border-right: $sidebar-touch-border;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
border-radius: $sidebar-border-radius;
|
||||
|
||||
&.leaflet-touch {
|
||||
border: $sidebar-touch-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-left {
|
||||
|
||||
& ~ .sidebar-map .leaflet-left {
|
||||
@media(min-width:$threshold-sm) {
|
||||
transition: left $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
|
||||
left: $width-sm + $sidebar-margins;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
|
||||
left: $width-md + $sidebar-margins;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-lg) {
|
||||
left: $width-lg + $sidebar-margins;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed ~ .sidebar-map .leaflet-left {
|
||||
@media(min-width:$threshold-sm) {
|
||||
left: $tab-size + $sidebar-margins;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-right {
|
||||
|
||||
& ~ .sidebar-map .leaflet-right {
|
||||
@media(min-width:$threshold-sm) {
|
||||
transition: right $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-sm) and (max-width:$threshold-md - 1px) {
|
||||
right: $width-sm + $sidebar-margins;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-md) and (max-width:$threshold-lg - 1px) {
|
||||
right: $width-md + $sidebar-margins;
|
||||
}
|
||||
|
||||
@media(min-width:$threshold-lg) {
|
||||
right: $width-lg + $sidebar-margins;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed ~ .sidebar-map .leaflet-right {
|
||||
@media(min-width:$threshold-sm) {
|
||||
right: $tab-size + $sidebar-margins;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
$sidebar-margins: 8px !default;
|
||||
$sidebar-inner-border-radius: 4px !default;
|
||||
|
||||
@import 'ol-base';
|
||||
|
||||
.sidebar-left {
|
||||
|
||||
& ~ .sidebar-map {
|
||||
|
||||
.olControlZoom,
|
||||
.olScaleLine {
|
||||
margin-left: $tab-size + $sidebar-border-width * 2;
|
||||
|
||||
@media(min-width: $threshold-sm) {
|
||||
transition: margin-left $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
|
||||
margin-left: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
|
||||
margin-left: $width-md + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-lg) {
|
||||
margin-left: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed ~ .sidebar-map {
|
||||
|
||||
.olControlZoom,
|
||||
.olScaleLine {
|
||||
@media(min-width:$threshold-sm) {
|
||||
margin-left: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-right {
|
||||
|
||||
& ~ .sidebar-map {
|
||||
|
||||
.olControlAttribution,
|
||||
.olControlPermalink,
|
||||
.olControlMousePosition {
|
||||
margin-right: $tab-size + $sidebar-border-width * 2;
|
||||
|
||||
@media(min-width: $threshold-sm) {
|
||||
transition: margin-right $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
|
||||
margin-right: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
|
||||
margin-right: $width-md + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-lg) {
|
||||
margin-right: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed ~ .sidebar-map {
|
||||
|
||||
.olControlAttribution,
|
||||
.olControlPermalink,
|
||||
.olControlMousePosition {
|
||||
@media(min-width:$threshold-sm) {
|
||||
margin-right: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
$sidebar-margins: 6px !default;
|
||||
$sidebar-inner-border-radius: 2px !default;
|
||||
|
||||
@import 'ol-base';
|
||||
|
||||
.sidebar-left {
|
||||
|
||||
& ~ .sidebar-map {
|
||||
|
||||
.ol-zoom, .ol-scale-line {
|
||||
margin-left: $tab-size + $sidebar-border-width * 2;
|
||||
|
||||
@media(min-width: $threshold-sm) {
|
||||
transition: margin-left $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
|
||||
margin-left: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
|
||||
margin-left: $width-md + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-lg) {
|
||||
margin-left: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed ~ .sidebar-map {
|
||||
|
||||
.ol-zoom, .ol-scale-line {
|
||||
@media(min-width:$threshold-sm) {
|
||||
margin-left: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.sidebar-right {
|
||||
|
||||
& ~ .sidebar-map {
|
||||
|
||||
.ol-rotate,
|
||||
.ol-attribution,
|
||||
.ol-full-screen {
|
||||
|
||||
margin-right: $tab-size + $sidebar-border-width * 2;
|
||||
|
||||
@media(min-width: $threshold-sm) {
|
||||
transition: margin-right $sidebar-transition;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-sm) and (max-width: $threshold-md - 1px) {
|
||||
margin-right: $width-sm + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-md) and (max-width: $threshold-lg - 1px) {
|
||||
margin-right: $width-md + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
|
||||
@media(min-width: $threshold-lg) {
|
||||
margin-right: $width-lg + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed ~ .sidebar-map {
|
||||
|
||||
.ol-rotate,
|
||||
.ol-attribution,
|
||||
.ol-full-screen {
|
||||
|
||||
@media(min-width:$threshold-sm) {
|
||||
margin-right: $tab-size + $sidebar-margins + $sidebar-border-width * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user