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