Project

General

Profile

« Previous | Next » 

Revision ae69029f

Added by Andreas Kohlbecker about 3 years ago

fix #7846 editor context information shown as breadcrumbs in the toolbar of popup editors

View differences:

src/main/webapp/VAADIN/themes/edit-valo/edit-valo.scss
472 472
        }
473 473
    }
474 474
    
475
    #context-breadcrumbs .breadcrumbs {
476
      // for an explanation of how the CSS Triangles to work 
477
      // see https://css-tricks.com/triangle-breadcrumbs/
478
    
479
      $crumb-background-color: $v-app-background-color;
480
      $crumb-active-background-color: #3a6972; //TODO calculate using active-color and $v-background-color or $v-app-background-color
481
      $crumb-border-color: $v-textfield-background-color--readonly;
482
      $crumb-height: 10px; 
483
      $triangle-width: 10px; 
484
      
485
      $crumb-border: valo-border($color: $crumb-border-color);
486
      
487
      list-style: none; 
488
      overflow: hidden;
489
      margin: 0; 
490
      padding: 0;
491
      line-height: $crumb-height;
492
      border-radius: $v-border-radius;
493
      border: $crumb-border;
494
      li {
495
          float: left;
496
          span.crumb {
497
            padding: 10px 10px 10px 20px;
498
            background-color: $crumb-background-color;
499
            position: relative;
500
            display: block;
501
            float: left;
502
            &::before {
503
                  content: " "; 
504
                  display: block;
505
                  width: 0; 
506
                  height: 0;
507
                  border-left: $crumb-border;
508
                  border-left-width: $triangle-width;
509
                  border-top: $crumb-height*2 solid transparent;
510
                  border-bottom: $crumb-height*2 solid transparent;
511
                  position: absolute;
512
                  top: 50%;
513
                  margin-top: -$crumb-height*2;
514
                  margin-left: 1px;
515
                  left: 100%;
516
                  z-index: 1; 
517
              }
518
              &::after {
519
                  content: " "; 
520
                  display: block;
521
                  width: 0; 
522
                  height: 0;
523
                  border-left: $triangle-width solid $crumb-background-color;
524
                  border-top: $crumb-height*2 solid transparent;
525
                  border-bottom: $crumb-height*2 solid transparent;
526
                  border-right: none;
527
                  position: absolute;
528
                  top: 50%;
529
                  margin-top: -$crumb-height*2;
530
                  left: 100%;
531
                  z-index: 2; 
532
              }
533
          }
534
          &::first-child span.crumb {
535
            padding-left: 10px;
536
          }
537
          span.active {
538
              background-color: $crumb-active-background-color;
539
          }
540
       }
541
       
542
    }
543
    
475 544
    // ---------- ---------- //
476 545

  
477 546
    .v-slot-message-item {

Also available in: Unified diff