ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/build/less/small-box.less

   1 /*
   2  * Component: Small Box
   3  * --------------------
   4  */
   5
   6 .small-box {
   7   .border-radius(2px);
   8   position: relative;
   9   display: block;
  10   margin-bottom: 20px;
  11   box-shadow: @box-boxshadow;
  12   // content wrapper
  13   > .inner {
  14     padding: 10px;
  15   }
  16
  17   > .small-box-footer {
  18     position: relative;
  19     text-align: center;
  20     padding: 3px 0;
  21     color: #fff;
  22     color: rgba(255, 255, 255, 0.8);
  23     display: block;
  24     z-index: 10;
  25     background: rgba(0, 0, 0, 0.1);
  26     text-decoration: none;
  27     &:hover {
  28       color: #fff;
  29       background: rgba(0, 0, 0, 0.15);
  30     }
  31   }
  32
  33   h3 {
  34     font-size: 38px;
  35     font-weight: bold;
  36     margin: 0 0 10px 0;
  37     white-space: nowrap;
  38     padding: 0;
  39
  40   }
  41
  42   p {
  43     font-size: 15px;
  44     > small {
  45       display: block;
  46       color: #f9f9f9;
  47       font-size: 13px;
  48       margin-top: 5px;
  49     }
  50   }
  51
  52   h3, p {
  53     z-index: 5;
  54   }
  55
  56   // the icon
  57   .icon {
  58     .transition(all @transition-speed linear);
  59     position: absolute;
  60     top: -10px;
  61     right: 10px;
  62     z-index: 0;
  63     font-size: 90px;
  64     color: rgba(0, 0, 0, 0.15);
  65   }
  66
  67   // Small box hover state
  68   &:hover {
  69     text-decoration: none;
  70     color: #f9f9f9;
  71     // Animate icons on small box hover
  72     .icon {
  73       font-size: 95px;
  74     }
  75   }
  76 }
  77
  78 @media (max-width: @screen-xs-max) {
  79   // No need for icons on very small devices
  80   .small-box {
  81     text-align: center;
  82     .icon {
  83       display: none;
  84     }
  85     p {
  86       font-size: 12px;
  87     }
  88   }
  89 }