catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less

   1     .i-sdc-designer-leftbar-section-popup-panel {
   2         position: absolute;
   3         display: inline-block;
   4         background-color: white;
   5         border: solid 1px #d2d2d2;
   6         border-top: solid 3px #13a7df;
   7         width: 140px;
   8         height: 40px;
   9         z-index: 10000;
  10     }
  11
  12     .i-sdc-designer-leftbar-section-popup-panel-group {
  13         padding-left: 8px;
  14         padding-top: 8px;
  15     }
  16
  17     .i-sdc-designer-leftbar-section-popup-panel-plus {
  18         border-radius: 50%;
  19         color: white;
  20         background-color: #13a7df;
  21         width: 20px;
  22         text-align: center;
  23         display: inline-block;
  24         cursor: pointer;
  25     }
  26
  27     .i-sdc-designer-leftbar-section-popup-panel-title {
  28         padding-left: 10px;
  29         display: inline-block;
  30     }
  31
  32 .composition{
  33     .sdc-workspace-container{
  34         .w-sdc-main-container{
  35             .w-sdc-main-right-container{
  36                 left:0;
  37                 //overflow-y: scroll;
  38                 .sdc-workspace-top-bar {
  39                     padding-left: 295px;
  40                     .not-latest{
  41                         left: 270px;
  42                     }
  43                 }
  44                 .w-sdc-main-container-body-content{
  45                     padding: 0 0 0 247px;
  46                 }
  47
  48                 > div:first-child{
  49                     padding: 0;
  50                 }
  51             }
  52         }
  53     }
  54
  55     .custom-modal {
  56         /* Hack solution to hide canvas tooltips under modals */
  57         z-index: 20000 !important;
  58     }
  59 }
  60
  61 .workspace-composition {
  62     height:100%;
  63     display: block;
  64     text-align: left;
  65     align-items: left;
  66     padding: 0;
  67
  68
  69
  70     // ---------------------------------------------------------------------------------------------------
  71     // Sidebar
  72     // ---------------------------------------------------------------------------------------------------
  73
  74
  75
  76     .w-sdc-designer-sidebar-toggle {
  77         background-color: @main_color_p;
  78         border-left: 1px solid @main_color_o;
  79         border-bottom: 1px solid @main_color_o;
  80         height: 21px;
  81         position: absolute;
  82         right: 0;
  83         top: 53px;
  84         width: 17px;
  85         transition: right 0.2s;
  86         z-index: 10;
  87         .box-shadow(-1px 1px 3px 0  @main_color_n);
  88
  89         &.active {
  90             right: 302px;
  91             .w-sdc-designer-sidebar-toggle-icon{
  92                 transform: rotate(180deg);
  93             }
  94         }
  95
  96     }
  97
  98     .w-sdc-designer-sidebar-toggle-icon {
  99         margin-left: 6px;
 100         margin-top: 6px;
 101     }
 102
 103     .w-sdc-designer-sidebar {
 104         background-color:@main_color_p ;
 105         .noselect;
 106         bottom: 0;
 107         position: fixed;
 108         right: -302px;
 109         width: 302px;
 110         top: 103px;
 111         transition: right 0.2s;
 112         z-index: 9;
 113         .box-shadow(-7px -3px 6px -8px @main_color_n);
 114
 115     }
 116
 117     .w-sdc-designer-sidebar-toggle.active + .w-sdc-designer-sidebar {
 118         right: 0;
 119
 120     }
 121
 122     .w-sdc-designer-sidebar-head {
 123         padding: 36px 30px 30px 30px;
 124         height: 120px;
 125     }
 126
 127     .w-sdc-designer-sidebar-logo-ph {
 128         display: inline-block;
 129         vertical-align: middle;
 130         line-height: 60px;
 131         height: 60px;
 132     }
 133
 134     .w-sdc-designer-sidebar-logo {
 135         .g_6;
 136         display: inline-block;
 137         margin-left: 10px;
 138         font-weight: 500;
 139     }
 140
 141     .w-sdc-designer-sidebar-logo-title {
 142         .s_16_r;
 143         .selectable;
 144         vertical-align: middle;
 145         text-overflow: ellipsis;
 146         max-width: 167px;
 147         display: inline-block;
 148         white-space: nowrap;
 149         overflow: hidden;
 150     }
 151
 152     .w-sdc-designer-update-resource-icon {
 153         .hand;
 154         position: absolute;
 155         right: 20px;
 156         top: 10px;
 157     }
 158
 159     .w-sdc-designer-delete-resource-icon {
 160         .hand;
 161         position: absolute;
 162         right: 40px;
 163         top: 10px;
 164     }
 165
 166     .w-sdc-designer-restore-button {
 167         .hand;
 168         position:absolute;
 169         right: 20px;
 170         top:10px;
 171         width:65px;
 172     }
 173     .w-sdc-designer-sidebar-tabs {
 174         .bg_c;
 175     }
 176
 177     .w-sdc-designer-sidebar-tabs::after {
 178         clear: both;
 179         content: '';
 180         display: table;
 181     }
 182
 183     .i-sdc-designer-sidebar-tab {
 184         background-color: @main_color_p;
 185         border: 1px solid @tlv_color_u;;
 186         border-left: none;
 187         display: inline-block;
 188         float: left;
 189         height: 36px;
 190         padding-top: 9px;
 191         text-align: center;
 192         width: 60px;
 193         .hand;
 194
 195         &:focus {
 196             outline: none;
 197         }
 198         &.tab-disabled {
 199             /* .disabled; */
 200         }
 201         &.active, &:hover:enabled {
 202             background-color: @tlv_color_u;
 203             .i-sdc-designer-sidebar-tab-icon {
 204                 opacity: 1;
 205
 206
 207             }
 208
 209         }
 210
 211         div& {
 212             padding-top: 0;
 213         }
 214         /*for tooltip on disabled buttons*/
 215     }
 216
 217     .i-sdc-designer-sidebar-tab-icon {
 218         margin-top: 5px ;
 219         &.import-icon {
 220             transform: rotate(270deg);
 221         }
 222         //  opacity: .4;
 223     }
 224
 225     .w-sdc-designer-sidebar-tab-content {
 226         .perfect-scrollbar;
 227         height: 100%;
 228     }
 229
 230     .w-sdc-designer-sidebar-tab-content-view {
 231         position: absolute;
 232         top: 156px;
 233         bottom: 0;
 234         width: 100%;
 235         padding-bottom: 10px;
 236
 237     }
 238
 239     .w-sdc-designer-sidebar-section {
 240     }
 241
 242     .w-sdc-designer-sidebar-section-title {
 243         .m_14_m;
 244         background-color: @tlv_color_u;
 245         .hand;
 246         clear: both;
 247         height: 32px;
 248         line-height: 32px;
 249         margin-top: 1px;
 250         padding: 0 10px 0 20px;
 251         overflow: hidden;
 252         text-overflow: ellipsis;
 253         white-space: nowrap;
 254         position: relative;
 255         width: 100%;
 256         display: block;
 257
 258         &.expanded {
 259             .w-sdc-designer-sidebar-section-title-icon {
 260                 transform: rotate(180deg);
 261             }
 262         }
 263     }
 264
 265     .w-sdc-designer-sidebar-section-title-text {
 266         max-width: 240px;
 267         display: inline-block;
 268         overflow: hidden;
 269         text-overflow: ellipsis;
 270         white-space: nowrap;
 271         position: relative;
 272     }
 273
 274     .w-sdc-designer-sidebar-section-title-icon {
 275         .hand;
 276         .sprite-new;
 277         .arrow-up;
 278         right: 16px;
 279         top: 13px;
 280         transition: .3s all;
 281         position: absolute;
 282     }
 283
 284     .w-sdc-designer-sidebar-section-content {
 285         overflow: hidden;
 286         text-overflow: ellipsis;
 287         white-space: nowrap;
 288     }
 289
 290     .w-sdc-designer-sidebar-section-title {
 291         text-transform: uppercase;
 292     }
 293
 294     .w-sdc-designer-sidebar-section-title + .w-sdc-designer-sidebar-section-content {
 295         margin: 0 auto;
 296     }
 297
 298     .w-sdc-designer-sidebar-section-title.expanded + .w-sdc-designer-sidebar-section-content {
 299         margin: 0 auto 1px;
 300
 301     }
 302
 303     .i-sdc-designer-sidebar-section-content-item {
 304         .b_7;
 305         font-size: 13px;
 306         margin-bottom: 5px;
 307         overflow: hidden;
 308         text-overflow: ellipsis;
 309         white-space: nowrap;
 310         //max-width: 250px;
 311
 312         &.description {
 313             margin-top: 28px;
 314             white-space: normal;
 315             word-wrap: break-word;
 316         }
 317     }
 318
 319     .i-sdc-designer-sidebar-section-content-item-tag {
 320         .g_7;
 321         .bg_c;
 322         border-radius: 4px;
 323         //fix long name for firefox:
 324         display: block;
 325         float: left;
 326         line-height: 25px;
 327         margin: 0 4px 6px 0;
 328         min-width: 50px;
 329         padding: 0 9px;
 330         text-align: center;
 331         max-width: 280px;
 332         white-space: nowrap;
 333         overflow: hidden;
 334         text-overflow: ellipsis;
 335     }
 336
 337     .w-sdc-designer-sidebar-section-footer {
 338         margin-top: 10px;
 339         text-align: center;
 340         width: 100%;
 341     }
 342
 343
 344
 345     .w-sdc-designer-sidebar-section-footer-action {
 346         width: 180px;
 347         margin-top: 10px;
 348     }
 349
 350     //////////////////////Relationship
 351     .w-sdc-designer-sidebar-section-requirements {
 352         border-bottom: 1px solid @color_e;
 353         margin: 0 13px 20px 13px;
 354         padding: 15px 0 0;
 355     }
 356
 357     .w-sdc-designer-sidebar-section-requirements-item {
 358         margin-bottom: 20px;
 359     }
 360
 361     .w-sdc-designer-sidebar-section-requirements-label {
 362         display: inline-block;
 363         overflow: hidden;
 364         text-overflow: ellipsis;
 365         vertical-align: middle;
 366         white-space: nowrap;
 367         width: 102px;
 368     }
 369
 370     .w-sdc-designer-sidebar-section-requirements-select {
 371         border: 1px solid @color_e;
 372         min-height: 30px;
 373         padding: 4px 13px;
 374         width: 168px;
 375     }
 376
 377     //////////////////////Properties
 378     .i-sdc-designer-sidebar-section-content-item-property-and-attribute {
 379         .b_7;
 380         border-bottom: 1px solid @color_e;
 381         min-height: 72px;
 382         padding: 15px 10px 10px 18px;
 383         position: relative;
 384
 385         &:first-child {
 386             //margin-top: -18px;
 387         }
 388
 389         &:hover {
 390             // .bg_c_hover;
 391             .bg_c;
 392             transition: all .3s;
 393
 394             .i-sdc-designer-sidebar-section-content-item-button {
 395                 display: block;
 396             }
 397         }
 398     }
 399
 400     .i-sdc-designer-sidebar-section-content-item-property-and-attribute-label {
 401         overflow: hidden;
 402         text-overflow: ellipsis;
 403         max-width: 200px;
 404         white-space: nowrap;
 405         display: inline-block;
 406         &:hover {
 407             .a_7;
 408         }
 409     }
 410
 411     .i-sdc-designer-sidebar-section-content-item-property-value {
 412         overflow: hidden;
 413         text-overflow: ellipsis;
 414         max-width: 200px;
 415         display: inline-block;
 416         white-space: nowrap;
 417
 418     }
 419
 420     .i-sdc-designer-sidebar-section-content-item-property-label-value {
 421     }
 422
 423     .i-sdc-designer-sidebar-section-content-item-button {
 424         display: none;
 425         position: absolute;
 426         top: 25px;
 427
 428         &.update {
 429             background-color: transparent;
 430             border: 0;
 431             right: 60px;
 432         }
 433
 434         &.delete {
 435             background-color: transparent;
 436             border: 0;
 437             right: 13px;
 438         }
 439
 440         &.download {
 441             background-color: transparent;
 442             border: 0;
 443             right: 35px;
 444         }
 445
 446         &.download-env {
 447             background-color: transparent;
 448             border: 0;
 449             right: 35px;
 450             margin-top: 65px;
 451         }
 452
 453         &.update-env {
 454             background-color: transparent;
 455             border: 0;
 456             right: 15px;
 457             margin-top: 65px;
 458         }
 459
 460         &.attach {
 461             background-color: transparent;
 462             border: 0;
 463             right: 15px;
 464         }
 465     }
 466
 467     // ---------------------------------------------------------------------------------------------------
 468     // Canvas
 469     // ---------------------------------------------------------------------------------------------------
 470     .w-sdc-designer-canvas {
 471         height:100%;
 472         .noselect;
 473         .bg_c;
 474         bottom: 0;
 475         // position: fixed;
 476         //right: 0;
 477         //left: 240px;
 478         //top: 94px;
 479         .view-mode{
 480             background-color: #f8f8f8;
 481             border:0;
 482         }
 483     }
 484
 485     .w-sdc-designer-canvas.sidebaractive {
 486         //right: 300px;
 487     }
 488
 489     .w-sdc-designer-element {
 490         .hand;
 491         width: 200px;
 492         height: 100px;
 493         position: absolute;
 494         text-align: center;
 495         top: 50%;
 496         margin-top: -200px;
 497         left: 50%;
 498         margin-left: -50px;
 499     }
 500
 501     .w-sdc-designer-resource-label {
 502         .q_7;
 503     }
 504
 505     .w-sdc-designer-resource-label-indicator {
 506         .bg_q;
 507         border-radius: 50%;
 508         display: inline-block;
 509         height: 10px;
 510         margin-right: 6px;
 511         vertical-align: middle;
 512         width: 10px;
 513
 514         &.valid {
 515             .bg_l;
 516         }
 517
 518         &.invalid {
 519             .bg_h;
 520         }
 521     }
 522
 523     // ---------------------------------------------------------------------------------------------------
 524     // Leftbar
 525     // ---------------------------------------------------------------------------------------------------
 526     .w-sdc-designer-leftbar {
 527         background-color:  @main_color_p;
 528         bottom: 0;
 529         left: 0;
 530         overflow-y: scroll;
 531         overflow-x: hidden;
 532         position: absolute;
 533         top: 0;
 534         width: 244px;
 535         .box-shadow(7px -3px 6px -8px @main_color_n);
 536
 537     }
 538
 539     .w-sdc-designer-leftbar-title {
 540
 541         .p_16_m;
 542         background-color:  @main_color_n;
 543         line-height: 40px;
 544         padding: 0 17px;
 545     }
 546
 547     .w-sdc-designer-leftbar-title-count {
 548         float: right;
 549     }
 550
 551     .w-scd-diagram-container {
 552         // left: 240px;
 553         //right: 300px;
 554     }
 555
 556     .w-sdc-designer-leftbar-search {
 557         background-color:  @tlv_color_u;
 558         padding: 10px;
 559         white-space: nowrap;
 560         position: relative;
 561     }
 562
 563     .w-sdc-designer-leftbar-search-input {
 564         border: 1px solid @color_e;
 565         .border-radius(4px);
 566         height: 30px;
 567         margin: 0;
 568         padding: 0px 28px 3px 10px;
 569         vertical-align: 4px;
 570         width: 100%;
 571         outline: none;
 572         font-style: italic;
 573     }
 574
 575     .w-sdc-designer-leftbar-search-filter {
 576
 577     }
 578
 579     .i-sdc-designer-leftbar-section {
 580         .hand;
 581     }
 582
 583     .i-sdc-designer-leftbar-section-title {
 584         .m_14_m;
 585         background-color:  @tlv_color_u;
 586         .hand;
 587         clear: both;
 588         height: 40px;
 589         line-height: 40px;
 590         margin-top: 1px;
 591         padding: 0 10px;
 592         position: relative;
 593         text-transform: uppercase;
 594         font-weight: bold;
 595     }
 596
 597     .i-sdc-designer-leftbar-section-title-icon {
 598         .hand;
 599         .sprite-new;
 600         .arrow-up;
 601         width: 15px;
 602         height: 9px;
 603         position: absolute;
 604         right: 13px;
 605         top: 18px;
 606         transition: .3s all;
 607     }
 608
 609     .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-title-icon {
 610         transform: rotate(180deg);
 611         margin-right: 2px;
 612     }
 613
 614     .i-sdc-designer-leftbar-section-content {
 615         background-color:  @main_color_o;
 616     }
 617
 618     .i-sdc-designer-leftbar-section-content-item {
 619         background-color:  @main_color_p;
 620         overflow: hidden;
 621
 622         &:hover {
 623             background-color:  @main_color_p;
 624         }
 625
 626         .cp{
 627             margin: 6px;
 628         }
 629
 630         .vl{
 631             margin: 6px;
 632         }
 633     }
 634
 635     .i-sdc-designer-leftbar-section-content-subcat {
 636         .m_14_m;
 637         background-color:  @tlv_color_t;
 638         line-height: 35px;
 639         padding: 0 10px;
 640         cursor: default;
 641
 642
 643         &:hover {
 644             background-color:  @func_color_r;
 645         }
 646
 647
 648     }
 649
 650     .i-sdc-designer-leftbar-section .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-item {
 651         max-height: 0px;
 652         margin: 0 auto;
 653         transition: all .3s;
 654     }
 655
 656     .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-item {
 657         max-height: 64px;
 658         margin: 0 auto 1px auto;
 659         //  padding: 4px 13px;
 660     }
 661
 662     .i-sdc-designer-leftbar-section.expanded .i-sdc-designer-leftbar-section-content .i-sdc-designer-leftbar-section-content-subcat {
 663         margin: 0;
 664     }
 665
 666     .i-sdc-designer-leftbar-section-content-item-icon-ph {
 667         display: inline-block;
 668         margin: 12px 0 12px 10px;
 669         pointer-events: auto;
 670         height: 45px;
 671         width: 40px;
 672         float: left;
 673         display: flex;
 674         align-items: center;
 675         .non-certified {
 676             position: relative;
 677             left: -4px;
 678             top: -4px;
 679             .sprite;
 680             .s-sdc-state-non-certified;
 681             display: block;
 682
 683             &.smaller-icon {
 684                 bottom: 6px;
 685                 left: 13px;
 686             }
 687         }
 688
 689
 690
 691     }
 692
 693     .non-certified {
 694         position: relative;
 695         left: 0px;
 696         top: 0px;
 697         .sprite;
 698         .s-sdc-state-non-certified;
 699         display: block;
 700
 701         &.smaller-icon {
 702             left: 35px;
 703             bottom: -14px;
 704         }
 705     }
 706     /*
 707     .i-sdc-composition-leftbar-section-content-item-icon {
 708         background-image: url('../../../styles/images/resource-icons/default.png');
 709         // position: absolute;
 710         right: 20px;
 711         top: 10px;
 712         height: 40px;
 713         width: 40px;
 714         background-size: 40px;
 715     }
 716     */
 717
 718     .i-sdc-designer-leftbar-section-content-item-info {
 719         display: inline-block;
 720         // margin-left: 10px;
 721         //overflow: hidden;
 722         // vertical-align: middle;
 723         width: 160px;
 724         padding: 0 0 0 10px;
 725     }
 726
 727     .i-sdc-designer-leftbar-section-content-item-info-title {
 728         .m_13_m;
 729         line-height: 14px;
 730         overflow: hidden;
 731         text-overflow: ellipsis;
 732         max-width: 120px;
 733         display: inline-block;
 734         white-space: nowrap;
 735         vertical-align: bottom;
 736     }
 737
 738     .i-sdc-designer-leftbar-section-content-item-info-text {
 739         .m_13_r;
 740         line-height: 15px;
 741         overflow: hidden;
 742         text-overflow: ellipsis;
 743         white-space: nowrap;
 744     }
 745
 746     .i-sdc-designer-leftbar-section-content-item-info-text-link {
 747         color: @color_s;
 748         text-decoration: underline;
 749         float: right;
 750         position: absolute;
 751         right: 17px;
 752         // bottom: 5px;
 753     }
 754
 755     // ---------------------------------------------------------------------------------------------------
 756     // Form actions
 757     // ---------------------------------------------------------------------------------------------------
 758     .w-sdc-form-actions-container.add-property {
 759         text-align: center;
 760         width: 100%;
 761         margin-top: 2px;
 762         margin-bottom: 12px;
 763
 764         .w-sdc-form-action {
 765             width: 245px;
 766         }
 767         .w-sdc-form-action.add-property-add-another {
 768             .bg_a;
 769             margin-left: 35px;
 770         }
 771         .w-sdc-form-action.add-property-done {
 772             margin-left: 312px;
 773         }
 774         .w-sdc-form-action.save {
 775             margin-left: 327px;
 776             margin-bottom: 30px;
 777         }
 778
 779     }
 780
 781     // ---------------------------------------------------------------------------------------------------
 782     // Top menu
 783     // ---------------------------------------------------------------------------------------------------
 784     .w-sdc-header-menu {
 785         padding: 25px 0;
 786         text-align: center;
 787         white-space: nowrap;
 788     }
 789
 790     .i-sdc-header-menu-item {
 791         cursor: pointer;
 792         display: inline-block;
 793         height: 43px;
 794         min-width: 93px;
 795         padding: 0 38px;
 796         position: relative;
 797         vertical-align: middle;
 798
 799         &::after {
 800             border-right: 1px solid @color_m;
 801             content: '';
 802             display: block;
 803             height: 43px;
 804             right: 0;
 805             position: absolute;
 806             top: 0;
 807             width: 2px;
 808         }
 809
 810         &:first-child {
 811             &::before {
 812                 border-right: 1px solid @color_m;
 813                 content: '';
 814                 display: block;
 815                 height: 43px;
 816                 left: 0;
 817                 position: absolute;
 818                 top: 0;
 819                 width: 2px;
 820             }
 821         }
 822     }
 823
 824     .i-sdc-header-menu-item-icon {
 825         display: inline-block;
 826         height: 20px;
 827         width: 28px;
 828     }
 829
 830     .i-sdc-header-menu-item-label {
 831         .g_1;
 832         line-height: 18px;
 833     }
 834
 835     .service-path-buttons {
 836        margin-top: 12px;
 837        position: absolute;
 838        right:  70px;
 839        top: 53px;
 840        &.with-sidebar {
 841            right: 380px;
 842        }
 843     }
 844     //Canvas search menu
 845     .w-sdc-search-menu {
 846         position:absolute;
 847         right: 18px;
 848         top:53px;
 849         transition: right 0.2s;
 850         display: flex;
 851         flex-direction: column;
 852         align-items: flex-end;
 853         margin-right:10px;
 854         pointer-events: none;
 855
 856         & > * {
 857             pointer-events: all;
 858         }
 859
 860         &.with-sidebar {
 861             right:320px;
 862         }
 863
 864         .search-with-autocomplete-container.composition-search {
 865             margin-top: 12px;
 866
 867             .search-bar-input {
 868                 width: 250px;
 869                 padding:2px 50px 2px 10px;
 870                 transition:all 0.4s;
 871             }
 872             .search-bar-container {
 873                 position:relative;
 874             }
 875
 876             &:not(:hover):not(.autocomplete-visible):not(.active){
 877                 border-radius: 0;
 878                 box-shadow:none;
 879
 880                 .search-bar-input:not(:focus){
 881                     width: 0px;
 882                     padding:0;
 883                     border:none;
 884                 }
 885                 .clear-search-x {
 886                     display:none;
 887                 }
 888                 .search-bar-input:not(:focus) ~ .search-bar-button {
 889                     border-radius: 2px;
 890                     border:solid 1px #fff;
 891                 }
 892             }
 893         }
 894
 895         .zoom-icons {
 896             border:solid 1px #fff;
 897             border-radius: 2px;
 898             box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
 899             background-color:  rgba(234, 234, 234, 0.88);
 900             background-repeat: no-repeat;
 901             margin-top: 10px;
 902
 903             &:hover {
 904                 cursor:pointer;
 905             }
 906
 907             &:active {
 908                 border:none;
 909                 background-color:  rgba(31, 171, 223, 0.88);
 910             }
 911         }
 912     }
 913
 914     // ---------------------------------------------------------------------------------------------------
 915     // Canvas inline menu
 916     // ---------------------------------------------------------------------------------------------------
 917     .w-sdc-canvas-menu-list {
 918         .w-sdc-canvas-menu-item-view {
 919             &::before {
 920                 content: '';
 921                 display: inline-block;
 922
 923                 .sprite-new;
 924                 .view-icon;
 925                 vertical-align: top;
 926                 margin: 2px 6px 2px 4px;
 927             }
 928         }
 929
 930         .w-sdc-canvas-menu-item-delete {
 931             &::before {
 932                 content: '';
 933                 display: inline-block;
 934
 935                 .sprite-new;
 936                 .delete-icon;
 937                 vertical-align: bottom;
 938                 margin: 1px 10px 0 7px;
 939             }
 940         }
 941     }
 942 }
 943 /*.right-tab-loader {
 944     border: 16px solid #f3f3f3; !* Light grey *!
 945     border-top: 16px solid #3498db; !* Blue *!
 946     border-radius: 50%;
 947     width: 120px;
 948     height: 120px;
 949     animation: spin 2s linear infinite;
 950 }*/
 951
 952 @keyframes spin {
 953     0% { transform: rotate(0deg); }
 954     100% { transform: rotate(360deg); }
 955 }