vid-webpack-master/src/app/drawingBoard/available-models-tree/available-models-tree.component.scss

   1 available-models-tree {
   2   .available-models-tree {
   3     height: 100%;
   4     display: flex;
   5     flex-direction: column;
   6     line-height: 14px;
   7     border-right: #D2D2D2 1.5px solid;
   8     min-width: 340px;
   9     h5 {
  10       font-family: OpenSans-Semibold;
  11       color: #5A5A5A;
  12       background-color: #F2F2F2;
  13       margin: 0;
  14       padding: 15px;
  15       padding-left: 20px;
  16       span {
  17         vertical-align: middle;
  18         &:first-child {
  19           font-size: 12px;
  20           color: #191919;
  21         }
  22       }
  23     }
  24     .available-models-content-wrapper {
  25       flex: 1;
  26       display: flex;
  27       flex-direction: column;
  28       padding: 20px;
  29       background-color: #F2F2F2;
  30       .search-container {
  31         margin-bottom: 30px;
  32         width: 100%;
  33         display: flex;
  34         background: #FFFFFF;
  35         border: 1px solid #D2D2D2;
  36         border-radius: 2px;
  37         height: 40px;
  38         min-width: 40px;
  39         font-family: OpenSans-Italic;
  40         color: #959595;
  41         input {
  42           flex: 1;
  43           border: 0;
  44           padding-left: 10px;
  45           outline: 0;
  46         }
  47         .icon-search {
  48           display: flex;
  49           width: 40px;
  50           &:after {
  51             content: "\e92e";
  52             cursor: pointer;
  53             font-size: 20px;
  54             font-weight: 600;
  55             text-align: center;
  56             display: inline-block;
  57             flex: auto;
  58             align-self: center;
  59           }
  60         }
  61       }
  62       tree-root {
  63         flex: 1;
  64         display: flex;
  65       }
  66       tree-viewport {
  67         flex: 1;
  68         height: auto;
  69         overflow: auto;
  70         padding-top: 5px;
  71         .tree-node {
  72           color: #5A5A5A;
  73           font-size: 13px;
  74           white-space: normal;
  75           word-break: break-all;
  76           tree-node-drop-slot {
  77             .node-drop-slot {
  78               display: none;
  79             }
  80           }
  81           &.tree-node-disabled {
  82             color: #D2D2D2;
  83             cursor: default;
  84             pointer-events: none;
  85           }
  86           &:not(.tree-node-disabled) {
  87             >tree-node-wrapper {
  88               .node-wrapper:hover {
  89                 color: #009FDB;
  90                 .node-content-wrapper {
  91                   tree-node-content {
  92                     > div {
  93                       span.actions {
  94                         .number-button {
  95                           span {
  96                             //background-color: #009FDB;
  97                           }
  98                         }
  99                         .icon-plus span:before {
 100                           display: inline-block;
 101                           color: #5A5A5A;
 102                         }
 103                       }
 104                     }
 105                   }
 106                 }
 107               }
 108             }
 109           }
 110           &.tree-node-focused:not(.tree-node-disabled)  {
 111             & > tree-node-wrapper {
 112               .node-wrapper {
 113                 color: #009FDB;
 114                 .node-content-wrapper-focused,
 115                 .node-content-wrapper:hover {
 116                   background: none;
 117                   box-shadow: none;
 118                   tree-node-content {
 119                     > div {
 120                       span.actions {
 121                         .number-button {
 122                           span {
 123                             //background-color: #009FDB;
 124                           }
 125                         }
 126                       }
 127                     }
 128                   }
 129                 }
 130               }
 131             }
 132           }
 133           tree-node-wrapper {
 134             .node-wrapper {
 135               height: 36px;
 136               tree-node-expander {
 137                 font-family: 'icomoon' !important;
 138                 height: 100%;
 139                 .toggle-children-wrapper {
 140                   padding: 0;
 141                   display: block;
 142                   height: 100%;
 143                   span.toggle-children {
 144                     display: flex;
 145                     width: 20px;
 146                     top: 0;
 147                     height: inherit;
 148                     background-image: none;
 149                     &:before {
 150                       content: "\e900";
 151                       font-weight: 600;
 152                       text-align: center;
 153                       display: inline-block;
 154                       flex: auto;
 155                       align-self: center;
 156                       font-size: 20px;
 157                     }
 158                   }
 159                 }
 160                 .toggle-children-wrapper-expanded {
 161                   span.toggle-children {
 162                     transform: none;
 163                     &:before {
 164                       content: "\e930";
 165                     }
 166                   }
 167                 }
 168                 .toggle-children-placeholder {
 169                   width: 20px;
 170                 }
 171               }
 172               .node-content-wrapper {
 173                 padding: 0;
 174                 background: none;
 175                 box-shadow: none;
 176                 height: 100%;
 177                 flex: 1;
 178                 min-width: 0;
 179                 border-left: 1px solid #D2D2D2;
 180                 tree-node-content {
 181                   > div {
 182                     height: 100%;
 183                     display: flex;
 184                     align-items: center;
 185                     justify-content: space-between;
 186                     padding-left: 10px;
 187                     span {
 188                       &.actions {
 189                         height: 100%;
 190                         display: flex;
 191                         justify-content: space-between;
 192                         align-items: center;
 193                         >span {
 194                           width: 45px;
 195                           max-width: 45px;
 196                           text-align: center;
 197                         }
 198                         .number-button {
 199                           width: 30px;
 200                           padding-left: 0;
 201                           text-align: center;
 202                           span {
 203                             display: block;
 204                             font-size: 11px;
 205                           }
 206                         }
 207                         .icon-v {
 208                           width: 45px;
 209                           span:before {
 210                             content: "\e932";
 211                             color: #5A5A5A;
 212                             font-size: 16px;
 213                             text-align: center;
 214                             display: inline-block;
 215                             vertical-align: baseline;
 216                           }
 217                         }
 218                         .icon-plus {
 219                           width: 45px;
 220                           span {
 221                             &:before {
 222                               //content: "\e901";
 223                               //fill:#009FDB;
 224                               //color: #009FDB;
 225                               //font-size: 16px;
 226                               //text-align: center;
 227                               //display: none;
 228                               //vertical-align: baseline;
 229                             }
 230                             &:hover:before {
 231                               //color: #009FDB !important;
 232
 233                             }
 234                           }
 235                         }
 236                       }
 237                     }
 238                   }
 239                 }
 240               }
 241
 242             }
 243           }
 244           tree-node-children {
 245             .tree-children {
 246               padding-left: 20px;
 247             }
 248           }
 249         }
 250       }
 251
 252     }
 253   }
 254 }
 255 .highlight {
 256   background-color: #9DD9EF;
 257 }
 258
 259 #drawing-board-tree{
 260   .tree-node.tree-node-expanded.tree-node-focused {
 261     border: 1px solid #009FDB;
 262   }
 263
 264 }
 265
 266 available-models-tree {
 267
 268   .tree-root {
 269     margin-top: 35px;
 270   }
 271
 272   tree-node-expander {
 273     background: #FFFFFF;
 274     border: 1px solid #D2D2D2;
 275     border-right: none;
 276     width: 45px;
 277     padding-left: 12px;
 278   }
 279
 280   .node-content-wrapper {
 281     border: none;
 282   }
 283
 284   tree-node-wrapper tree-node-expander{
 285     background: none !important;
 286     border: none !important;
 287   }
 288
 289   tree-node-content div {
 290     background: white;
 291   }
 292
 293   .node-wrapper {
 294     height: 45px !important;
 295     background: #FFFFFF;
 296     border: 1px solid #D2D2D2;
 297   }
 298
 299   tree-node-collection div {
 300     margin-top: 0px;
 301   }
 302
 303   .tree-node-leaf .node-wrapper tree-node-expander {
 304     display: none;
 305   }
 306
 307   .tree-children  {
 308     padding: 20px;
 309   }
 310
 311   .tree-node.tree-node-expanded.tree-node-focused {
 312     border: 1px solid #009FDB;
 313   }
 314
 315   .tree-node.tree-node-expanded {
 316     border: 1px solid rgba(128, 128, 128, 0.72);
 317     margin-bottom: 10px;
 318   }
 319
 320   .tree-children {
 321     padding-left: 0;
 322   }
 323
 324   tree-node-content .actions .number-button {
 325     height: 45px;
 326     padding-top: 14px;
 327     border: 1px solid #D2D2D2;
 328     padding-left: 0;
 329     span {
 330       background: none;
 331       font-size: 11px;
 332       color: #5A5A5A;
 333     }
 334   }
 335
 336
 337
 338   .node-content-wrapper.node-content-wrapper-focused tree-node-content div{
 339     background: #009FDB !important;
 340     color: white;
 341
 342     .isParent {
 343       border-left: 1px solid #009FDB;
 344     }
 345
 346     .number-button span{
 347       color: white !important;
 348     }
 349
 350     .icon-v span:before{
 351       color: white !important;
 352     }
 353   }
 354
 355   .vf-type {
 356     width: 20px;
 357     height: 45px;
 358     padding-top: 16px;
 359     border-right: 1px solid #D2D2D2;
 360
 361   }
 362
 363   .isParent {
 364     width: 100%;
 365     padding-left: 5px;
 366   }
 367
 368   .tree-node-expanded .isChild .vf-type {
 369     display: none;
 370   }
 371
 372   .isParent .span-name {
 373     width: 100%;
 374     padding-left: 10px;
 375   }
 376
 377   .toggle-children-wrapper.toggle-children-wrapper-expanded {
 378     .toggle-children:before {
 379       color: #009FDB;
 380     }
 381   }
 382
 383   .tree-node.tree-node-expanded .tree-children {
 384     border: 1px solid rgba(128, 128, 128, 0.72);
 385   }
 386
 387   .tree-node.tree-node-expanded.tree-node-focused .tree-children {
 388     border: 1px solid #009fdb;
 389   }
 390
 391   .tree-node-leaf .node-wrapper{
 392     margin-left: 45px;
 393     border-left: none;
 394   }
 395 }
 396
 397
 398