otf-frontend/client/src/app/layout/modeler/modeler.component.scss

   1 /*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 #                                                                              #\r
   3 #   Licensed under the Apache License, Version 2.0 (the "License");            #\r
   4 #   you may not use this file except in compliance with the License.           #\r
   5 #   You may obtain a copy of the License at                                    #\r
   6 #                                                                              #\r
   7 #       http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 #                                                                              #\r
   9 #   Unless required by applicable law or agreed to in writing, software        #\r
  10 #   distributed under the License is distributed on an "AS IS" BASIS,          #\r
  11 #   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
  12 #   See the License for the specific language governing permissions and        #\r
  13 #   limitations under the License.                                             #\r
  14 ##############################################################################*/\r
  15 \r
  16 \r
  17 .properties-panel {\r
  18   position: absolute;\r
  19   top: 0;\r
  20   bottom: 0;\r
  21   right: 0;\r
  22   width: 300px;\r
  23   z-index: 10;\r
  24   border-left: 1px solid #ccc;\r
  25   overflow: auto;\r
  26   background: white;\r
  27 }\r
  28 \r
  29 .properties-panel:empty {\r
  30   display: none;\r
  31 }\r
  32 \r
  33 .properties-panel > .djs-properties-panel {\r
  34   padding-bottom: 70px;\r
  35   min-height: 100%;\r
  36 }\r
  37 \r
  38 .properties-toggle {\r
  39   position: absolute;\r
  40   top: 0;\r
  41   right: 280px;\r
  42 }\r
  43 \r
  44 #left_panel {\r
  45   position: absolute;\r
  46   left: 0;\r
  47   top: 40px;\r
  48   bottom: 0;\r
  49   right: 300px;\r
  50 }\r
  51 \r
  52 #drag {\r
  53   position: absolute;\r
  54   left: -4px;\r
  55   top: 0;\r
  56   bottom: 0;\r
  57   width: 15px;\r
  58   cursor: w-resize;\r
  59   z-index: 1000;\r
  60 }\r
  61 \r
  62 .panel-buttons {\r
  63   position:absolute; \r
  64   right: -103px; \r
  65   z-index: 5; \r
  66   top: 30%; \r
  67   transform: rotate(270deg);\r
  68 }\r
  69 \r
  70 .properties-panel-button {\r
  71   cursor: pointer;\r
  72   padding: 5px 10px;\r
  73   user-select: none;\r
  74   background: lightgrey;\r
  75   margin-right: 10px;\r
  76   display: inline;\r
  77 }\r
  78 \r
  79 #tool-bar {\r
  80   position: absolute;\r
  81   top: 0px;\r
  82   left: 0px;\r
  83   width: 100%;\r
  84   background: #f8f8f8;\r
  85 }\r
  86 \r
  87 #tool-bar button mat-icon {\r
  88   font-size: 18px;\r
  89 }\r
  90 \r
  91 #tool-bar button {\r
  92   line-height: 30px !important;\r
  93 }\r
  94 \r
  95 .no-margin{\r
  96   margin: 0px !important;\r
  97 }