skyquake/plugins/composer/src/src/styles/DropZonePanel.scss

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 @import 'variables';
  20
  21 .DropZonePanel {
  22         overflow: hidden;
  23         display: flex;
  24         flex-wrap: wrap;
  25         flex-direction: column;
  26         align-content: stretch;
  27         &.-close {
  28                 display: none;
  29         }
  30         .dz-message {
  31                 font-size: small;
  32                 margin: 2px;
  33                 text-align: center;
  34         }
  35         .dnd-target {
  36                 flex-grow: 4;
  37                 display: block;
  38                 margin: 4px;
  39                 padding: 25px 20px;
  40                 color: $panel-font-color;
  41                 border: 2px dashed $section-border-color;
  42                 border-radius: 8px;
  43                 background-color: $primary-contrast-bg-color;
  44                 &:hover {
  45                         border: 2px dashed darken($section-border-color, 20%);
  46                         background-color: $button-bg-color;
  47                 }
  48                 &.-drag-hover,
  49                 &.dz-drag-hover {
  50                         cursor: pointer !important;
  51                         border-color: darken($section-border-color, 20%);
  52                         background-color: darken($primary-contrast-bg-color, 20%);
  53                         color: darken($panel-font-color, 20%);
  54                 }
  55         }
  56 }