Rift.IO OSM R1 Initial Submission

[osm/UI.git] / skyquake / plugins / composer / src / src / styles / DropZonePanel.scss

diff --git a/skyquake/plugins/composer/src/src/styles/DropZonePanel.scss b/skyquake/plugins/composer/src/src/styles/DropZonePanel.scss
new file mode 100644 (file)
index 0000000..9118cd3
--- /dev/null
+++ b/skyquake/plugins/composer/src/src/styles/DropZonePanel.scss
@@ -0,0 +1,56 @@
+
+/*
+ * 
+ *   Copyright 2016 RIFT.IO Inc
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ *
+ */
+@import 'variables';
+
+.DropZonePanel {
+       overflow: hidden;
+       display: flex;
+       flex-wrap: wrap;
+       flex-direction: column;
+       align-content: stretch;
+       &.-close {
+               display: none;
+       }
+       .dz-message {
+               font-size: small;
+               margin: 2px;
+               text-align: center;
+       }
+       .dnd-target {
+               flex-grow: 4;
+               display: block;
+               margin: 4px;
+               padding: 25px 20px;
+               color: $panel-font-color;
+               border: 2px dashed $section-border-color;
+               border-radius: 8px;
+               background-color: $primary-contrast-bg-color;
+               &:hover {
+                       border: 2px dashed darken($section-border-color, 20%);
+                       background-color: $button-bg-color;
+               }
+               &.-drag-hover,
+               &.dz-drag-hover {
+                       cursor: pointer !important;
+                       border-color: darken($section-border-color, 20%);
+                       background-color: darken($primary-contrast-bg-color, 20%);
+                       color: darken($panel-font-color, 20%);
+               }
+       }
+}