git-server-git.apps.pok.os.sepia.ceph.com Git - ceph-ci.git/blob

   1 @use './src/styles/defaults' as *;
   2 @use '@carbon/styles/scss/theme' as *;
   3 @use '@carbon/styles/scss/spacing' as *;
   4 @use '@carbon/type';
   5
   6 .notification-section-heading {
   7   @include type.type-style('heading-compact-01');
   8
   9   margin: 0;
  10   color: $text-primary;
  11   padding: $spacing-05 $spacing-05 $spacing-03;
  12   background-color: $layer-01;
  13   position: sticky;
  14   top: 0;
  15   z-index: 2;
  16   display: block;
  17 }
  18
  19 .task-row {
  20   display: flex;
  21   align-items: center;
  22   justify-content: space-between;
  23   margin-top: var(--cds-spacing-02);
  24 }
  25
  26 .task-progress {
  27   @include type.type-style('label-01');
  28
  29   color: var(--cds-text-secondary);
  30   text-align: right;
  31 }
  32
  33 .notification-timestamp {
  34   @include type.type-style('label-01');
  35
  36   color: $text-secondary;
  37   line-height: 1;
  38   margin-top: 0;
  39   display: block;
  40 }
  41
  42 .notification-title {
  43   @include type.type-style('body-short-01');
  44
  45   margin: 0;
  46   color: $text-primary;
  47   line-height: 1.25;
  48   display: block;
  49 }
  50
  51 .notification-message {
  52   @include type.type-style('body-short-01');
  53
  54   color: $text-helper;
  55   margin: 0;
  56   line-height: 1.4;
  57   margin-top: -$spacing-01;
  58   display: block;
  59 }
  60
  61 .notification-empty {
  62   margin: 0;
  63   padding: $spacing-05;
  64   color: $text-secondary;
  65   text-align: center;
  66
  67   @include type.type-style('body-short-01');
  68 }
  69
  70 .notification-wrapper {
  71   padding: 0 $spacing-05;
  72   position: relative;
  73   z-index: 1;
  74   background-color: $layer-01;
  75
  76   &:last-child {
  77     padding-bottom: $spacing-05;
  78   }
  79 }
  80
  81 .notification-item {
  82   display: flex;
  83   gap: $spacing-05;
  84   padding: $spacing-03 0;
  85   align-items: flex-start;
  86   position: relative;
  87
  88   .notification-close {
  89     position: absolute;
  90     right: 0;
  91     top: $spacing-03;
  92     padding: $spacing-02;
  93     min-height: 0;
  94     color: $text-helper;
  95     opacity: 0;
  96     transition: opacity 0.2s ease-in-out;
  97
  98     &:hover {
  99       background-color: $layer-hover;
 100     }
 101   }
 102
 103   &:hover {
 104     .notification-close {
 105       opacity: 1;
 106     }
 107   }
 108 }
 109
 110 .notification-content {
 111   flex: 1;
 112   min-width: 0;
 113   display: flex;
 114   flex-direction: column;
 115   gap: $spacing-02;
 116   padding-right: $spacing-06;
 117 }
 118
 119 .notification-divider {
 120   border-bottom: 1px solid $border-subtle-01;
 121 }
 122
 123 :host {
 124   display: block;
 125   height: 100%;
 126   overflow-y: auto;
 127   background-color: $layer-01;
 128 }
 129
 130 :host ::ng-deep .infoCircle-icon {
 131   fill: $primary !important;
 132 }