vid-webpack-master/src/app/drawingBoard/drawing-board-tree/drawing-board-tree.scss

   1 @mixin highlight($background-color, $color) {
   2   background: none;
   3   padding: 0;
   4   background-color: $background-color;
   5   border: $color 1px solid;
   6   color: $color;
   7 }
   8 @mixin highlight-toggle-children {
   9   tree-node-expander {
  10     .toggle-children-wrapper {
  11       span.toggle-children {
  12         @include highlight(white, #009FDB);
  13         border-right: none;
  14       }
  15     }
  16   }
  17 }
  18
  19 @mixin highlight-tree-node-content {
  20   tree-node-content {
  21     > div {
  22       .model-actions {
  23         .icon-browse:before {
  24           display: inline-block;
  25         }
  26       }
  27     }
  28   }
  29 }
  30
  31 drawing-board-tree {
  32
  33   .toggle-children-wrapper.toggle-children-wrapper-expanded {
  34     .toggle-children:before {
  35       color: #009FDB;
  36     }
  37   }
  38
  39   overflow: auto;
  40   flex: 1;
  41   color: #5A5A5A;
  42   line-height: 14px;
  43   .drawing-board-tree {
  44     width: 100%;
  45   }
  46   tree-viewport {
  47     padding: 50px 3.5% 1% 6%;
  48     tree-node {
  49       tree-node-drop-slot {
  50         .node-drop-slot {
  51           display: none;
  52         }
  53       }
  54       & .tree-node-focused,
  55       & .tree-node-active {
  56         & > tree-node-wrapper {
  57           .node-wrapper {
  58             @include highlight-toggle-children;
  59             .node-content-wrapper-focused,
  60             .node-content-wrapper-active
  61             {
  62               @include highlight(#E6F6FB, #009FDB);
  63               .property-name {
  64                 color: #009FDB;
  65               }
  66               .auto-name {
  67                 font-family: OpenSans-Regular !important;
  68               }
  69               .icon-browse:before {
  70                 color: #5A5A5A;
  71               }
  72               @include highlight-tree-node-content;
  73             }
  74           }
  75         }
  76       }
  77       & .tree-node-expanded {
  78         > tree-node-wrapper .node-wrapper {
  79           box-shadow: 0 0px 2px rgba(90,90,90,0.24);
  80         }
  81       }
  82
  83       .tree-node-active .tree-children {
  84         border: 1px solid #009FDB;
  85         padding: 20px;
  86       }
  87
  88
  89
  90       .tree-node.tree-node-active.tree-node-expanded {
  91         border: 1px solid #009FDB;
  92       }
  93
  94       .tree-node-leaf .node-wrapper{
  95         margin-left: -45px;
  96       }
  97
  98       tree-node-wrapper {
  99         .node-wrapper {
 100           height: 45px;
 101           &:hover {
 102             @include highlight-toggle-children;
 103             .node-content-wrapper {
 104               @include highlight(#E6F6FB, #009FDB);
 105               .property-name {
 106                 color: #009FDB;
 107               }
 108               .icon-browse:before {
 109                 color: #5A5A5A;
 110               }
 111               @include highlight-tree-node-content;
 112             }
 113           }
 114           tree-node-expander {
 115             font-family: 'icomoon' !important;
 116             height: 100%;
 117             .toggle-children-wrapper {
 118               padding: 0;
 119               display: block;
 120               height: 100%;
 121               span.toggle-children {
 122                 display: flex;
 123                 width: 45px;
 124                 padding: 0;
 125                 top: 0;
 126                 height: inherit;
 127                 background-image: none;
 128                 background-color: white;
 129                 border: 1px solid #D2D2D2;
 130                 border-right: none;
 131                 &:before {
 132                   content: "\e900";
 133                   font-size: 20px;
 134                   font-weight: 600;
 135                   text-align: center;
 136                   display: inline-block;
 137                   flex: auto;
 138                   align-self: center;
 139                 }
 140               }
 141             }
 142             .toggle-children-wrapper-expanded {
 143               span.toggle-children {
 144                 transform: none;
 145                 &:before {
 146                   content: "\e930";
 147                 }
 148               }
 149             }
 150             .toggle-children-placeholder {
 151               width:45px;
 152             }
 153           }
 154           .node-content-wrapper {
 155             padding: 0;
 156             background: none;
 157             box-shadow: none;
 158             border-radius: 0;
 159             border: 1px solid #D2D2D2;
 160             height: 100%;
 161             flex: 1;
 162             tree-node-content {
 163               > div {
 164                 height: 100%;
 165                 display: flex;
 166                 align-items: center;
 167                 justify-content: space-between;
 168                 .model-info {
 169                   flex: 1;
 170                   display: flex;
 171                   justify-content: space-between;
 172                   align-items: center;
 173                   padding-left: 8px;
 174                   > span {
 175                     flex: 1;
 176                     padding: 0 8px;
 177                     span:nth-child(2) {
 178                       display: block;
 179                     }
 180                   }
 181                 }
 182                 .model-actions {
 183                   display: flex;
 184                   align-items: center;
 185                   padding-right: 12px;
 186                   .icon-browse {
 187                     padding: 0;
 188                     width: 30px;
 189                     &:before {
 190                       content: "\e924";
 191                       font-size: 24px;
 192                       display: none;
 193                     }
 194                     &:hover:before {
 195                       color: #009FDB;
 196                     }
 197                     &:focus:before,
 198                     &:active:before {
 199                       color: #009FDB;
 200                     }
 201                   }
 202
 203                   .icon-alert {
 204                     padding-left: 10px;
 205                     &:before {
 206                       content: "\e904";
 207                       font-size: 16px;
 208                       color: #ffb81c;
 209                     }
 210                   }
 211                 }
 212               }
 213             }
 214             .property-name {
 215               font-family: OpenSans-Semibold;
 216               font-size: 12px;
 217               line-height: 12px;
 218               color: #191919;
 219               text-transform: capitalize;
 220             }
 221           }
 222
 223
 224         }
 225       }
 226       tree-node-children {
 227         .tree-children {
 228           padding: 20px;
 229           .model-info span:first-child {
 230             flex: 1.1 !important;
 231           }
 232         }
 233       }
 234     }
 235   }
 236 }
 237 .cdk-overlay-pane.ngx-contextmenu {
 238   ul.dropdown-menu {
 239     width: 200px;
 240     box-shadow: none;
 241     padding: 0;
 242     padding-top: 10px;
 243     margin: 0;
 244     border: 1px solid #D2D2D2;
 245     border-top: 3px solid #009FDB;
 246     box-shadow: 0 0px 2px rgba(90,90,90,0.24);
 247     border-radius: 2px;
 248     li {
 249       height: 40px;
 250       a {
 251         font-family: OpenSans-Regular;
 252         display: flex;
 253         align-items: center;
 254         height: 100%;
 255         padding: 12px;
 256         color: #5A5A5A;
 257         &:hover {
 258           background: #E6F6FB;
 259           color:  #009FDB;
 260         }
 261         span {
 262           padding-right: 12px;
 263           &.icon-edit:before {
 264             content: '\e917';
 265           }
 266           &.icon-trash:before {
 267             content: '\e937';
 268           }
 269         }
 270       }
 271     }
 272   }
 273 }
 274