skyquake/plugins/composer/src/src/styles/CanvasPanelTray.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 @import 'DataOpenCloseIcon';
  21
  22 $tray-body-height: 250px;
  23 $tray-head-height: 25px;
  24
  25 .CanvasPanelTray {
  26         position: absolute;
  27         bottom: 0;
  28         left: 0;
  29         right: 0;
  30         height: 25px;
  31         min-width: 300px;
  32         /* background-color: white;*/
  33         background: $panel-bg-color;
  34         &.-with-transitions {
  35                 transition: height 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000);
  36         }
  37         h1 {
  38                 border-bottom: 1px solid rgba(143, 143, 143, 0.05);
  39                 cursor: pointer;
  40                 color: #666;
  41                 font-size: 12px;
  42                 font-style: normal;
  43                 line-height: 16px;
  44                 height: 25px;
  45                 margin: 0;
  46                 padding-left: 0;
  47                 padding-right: 0;
  48                 text-align: center;
  49                 text-transform: uppercase;
  50                 background-color: $panel-bg-color-contrast;
  51         }
  52         > .tray-body {
  53                 position: absolute;
  54                 top: 25px;
  55                 right: 0;
  56                 left: 0;
  57                 bottom: 0;
  58                 overflow: hidden;
  59                 &:hover {
  60                         overflow: auto;
  61                 }
  62         }
  63
  64
  65         &-buttons {
  66                 display: -ms-flexbox;
  67                 display: flex;
  68                 margin-top: 2px;
  69                 button {
  70                         padding: 6px 34px;
  71                 }
  72         }
  73         .tray-body {
  74                 top:31px;
  75         }
  76         .ConfigParameterMap {
  77                 padding: 10px 20px;
  78                 background: $panel-bg-color;
  79
  80                 .toggleable {
  81                         display:-ms-flexbox;
  82                         display:flex;
  83                         -ms-flex-wrap: wrap;
  84                             flex-wrap: wrap;
  85                     background: $panel-bg-color-contrast;
  86                     margin:8px 0;
  87                         & > .leaf-property {
  88                             -ms-flex: 1 0 100%;
  89                         flex: 1 0 100%;
  90                         margin: 8px 0;
  91                                 padding: 0 8px;
  92                                 background: none;
  93                         .property-label {
  94                         }
  95                         }
  96                         & > .container-property {
  97                                 -ms-flex: 1 1;
  98                                     flex: 1 1;
  99                         }
 100                 }
 101         }
 102
 103 }