ceph/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard/info-card/info-card.component.scss

   1 @import '../../../../defaults';
   2
   3 $card-height: 6vw;
   4 $card-medium-height: 12vw;
   5 $card-font-min-width: 320px;
   6 $card-font-max-width: 2048px;
   7 $card-font-min-size: 12px;
   8 $card-font-max-size: 21px;
   9 $logs-text-font-size: $card-font-min-size;
  10
  11 .card {
  12   border: 0.5px solid $color-info-card-border;
  13   border-radius: 3px;
  14   background-color: $color-solid-white;
  15   box-shadow: 0 1px 1px $color-shadow-gray;
  16   margin: 0 -10px 20px;
  17   padding: 0 20px;
  18   width: auto;
  19   height: auto;
  20   margin-left: auto;
  21   margin-right: auto;
  22   min-height: $card-height;
  23   @include fluid-font-size(
  24     $card-font-min-width,
  25     $card-font-max-width,
  26     $card-font-min-size,
  27     $card-font-max-size
  28   );
  29   position: relative;
  30 }
  31
  32 .card-title {
  33   margin: 1.1vw 0;
  34   padding: 0;
  35 }
  36
  37 .card-body {
  38   text-align: center;
  39   position: absolute;
  40   top: 50%;
  41   left: 50%;
  42   transform: translate(-50%);
  43 }
  44
  45 .content-chart {
  46   margin-top: -0.7vw;
  47   position: unset;
  48   top: unset;
  49   left: unset;
  50   transform: unset;
  51 }
  52
  53 .no-center {
  54   position: unset;
  55   top: unset;
  56   left: unset;
  57   transform: unset;
  58 }
  59
  60 .text-area-size-2 {
  61   margin-right: -50%;
  62   transform: translate(-50%, -20%);
  63 }
  64
  65 .text-area-size-3 {
  66   margin-right: -50%;
  67   transform: translate(-50%, -40%);
  68 }
  69
  70 .content-highlight {
  71   font-weight: bold;
  72 }
  73
  74 .card-medium {
  75   min-height: $card-medium-height;
  76 }
  77
  78 .scroll {
  79   max-height: ($card-medium-height * 1.5);
  80   overflow-y: auto;
  81 }
  82
  83 .text-monospace {
  84   font-size: $logs-text-font-size;
  85   font-family: monospace;
  86   text-align: left;
  87 }
  88
  89 @media (max-width: 1599px) {
  90   .card {
  91     min-height: $card-height * 1.3;
  92   }
  93
  94   .card-medium {
  95     min-height: $card-medium-height * 1.2;
  96   }
  97 }
  98
  99 @media (max-width: $screen-md-max) {
 100   .card-medium {
 101     min-height: $card-medium-height * 1.5;
 102   }
 103
 104   .content-chart {
 105     margin-top: -0.6vw;
 106   }
 107 }
 108
 109 @media (max-width: $screen-sm-max) {
 110   .card {
 111     min-height: $card-height * 2;
 112   }
 113
 114   .content-chart {
 115     margin-top: -0.3vw;
 116   }
 117 }
 118
 119 @media (max-width: $screen-sm-max) and (min-width: $screen-sm-min) {
 120   .card-medium {
 121     min-height: $card-medium-height * 2.2;
 122   }
 123 }
 124
 125 @media (max-width: 599px) {
 126   .card {
 127     min-height: $card-height * 3;
 128   }
 129 }
 130
 131 @media (max-width: 319px) {
 132   .card {
 133     min-height: $card-height * 4;
 134   }
 135 }