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

   1 /*
   2  * Component: Timeline
   3  * -------------------
   4  */
   5
   6 .timeline {
   7   position: relative;
   8   margin: 0 0 30px 0;
   9   padding: 0;
  10   list-style: none;
  11
  12   // The line
  13   &:before {
  14     content: '';
  15     position: absolute;
  16     top: 0;
  17     bottom: 0;
  18     width: 4px;
  19     background: #ddd;
  20     left: 31px;
  21     margin: 0;
  22     .border-radius(2px);
  23   }
  24
  25   > li {
  26     position: relative;
  27     margin-right: 10px;
  28     margin-bottom: 15px;
  29     .clearfix();
  30
  31     // The content
  32     > .timeline-item {
  33       .box-shadow(@box-boxshadow);
  34       .border-radius(@box-border-radius);
  35       margin-top: 0;
  36       background: #fff;
  37       color: #444;
  38       margin-left: 60px;
  39       margin-right: 15px;
  40       padding: 0;
  41       position: relative;
  42
  43       // The time and header
  44       > .time {
  45         color: #999;
  46         float: right;
  47         padding: 10px;
  48         font-size: 12px;
  49       }
  50       > .timeline-header {
  51         margin: 0;
  52         color: #555;
  53         border-bottom: 1px solid @box-border-color;
  54         padding: 10px;
  55         font-size: 16px;
  56         line-height: 1.1;
  57         > a {
  58           font-weight: 600;
  59         }
  60       }
  61       // Item body and footer
  62       > .timeline-body, > .timeline-footer {
  63         padding: 10px;
  64       }
  65
  66     }
  67
  68     // The icons
  69     > .fa,
  70     > .glyphicon,
  71     > .ion {
  72       width: 30px;
  73       height: 30px;
  74       font-size: 15px;
  75       line-height: 30px;
  76       position: absolute;
  77       color: #666;
  78       background: @gray;
  79       border-radius: 50%;
  80       text-align: center;
  81       left: 18px;
  82       top: 0;
  83     }
  84   }
  85
  86   // Time label
  87   > .time-label {
  88     > span {
  89       font-weight: 600;
  90       padding: 5px;
  91       display: inline-block;
  92       background-color: #fff;
  93
  94       .border-radius(4px);
  95     }
  96   }
  97 }
  98
  99 .timeline-inverse {
 100   > li {
 101     > .timeline-item {
 102       background: #f0f0f0;
 103       border: 1px solid #ddd;
 104       .box-shadow(none);
 105       > .timeline-header {
 106         border-bottom-color: #ddd;
 107       }
 108     }
 109   }
 110 }