git.roojs.org Git - bootswatch/blob - AdminLTE-master/less/timeline.less

   1 /*
   2 Component: timeline
   3 --------------------
   4 */
   5
   6 .timeline{
   7     margin: 0 0 30px 0;
   8     padding: 0;
   9     list-style: none;
  10
  11     // The line
  12     &:before {
  13         content: '';
  14         position: absolute;
  15         top: 0px;
  16         bottom: 0;
  17         width: 5px;
  18         background: #ddd;
  19         left: 45px;
  20         border: 1px solid #eee;
  21         margin: 0;
  22         .border-radius(2px);
  23     }
  24
  25
  26     > li {
  27         position: relative;
  28         margin-right: 10px;
  29         margin-bottom: 15px;
  30         .clearfix();
  31
  32         // The content
  33         > .timeline-item {
  34             margin-top: 10px;
  35             border: 0px solid #dfdfdf;
  36             background: #fff;
  37             color: #555;
  38             margin-left: 60px;
  39             margin-right: 15px;
  40             padding: 5px;
  41             position: relative;
  42             box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  43
  44             // The time and header
  45             > .time {
  46                 color: #999;
  47                 float: right;
  48                 margin: 2px 0 0 0;
  49             }
  50             > .timeline-header {
  51                 margin: 0;
  52                 color: #555;
  53                 border-bottom: 1px solid #f4f4f4;
  54                 padding: 5px;
  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         // Time label
  69         &.time-label {
  70             > span {
  71                 font-weight: 600;
  72                 padding: 5px;
  73                 display: inline-block;
  74                 background-color: #fff;
  75                 box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  76                 .border-radius(4px);
  77             }
  78         }
  79
  80         // The icons
  81         > .fa,
  82         > .glyphicon,
  83         > .ion {
  84             box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  85             width: 30px;
  86             height: 30px;
  87             font-size: 15px;
  88             line-height: 30px;
  89             position: absolute;
  90             color: #666;
  91             background: #eee;
  92             border-radius: 50%;
  93             text-align: center;
  94             left: 18px;
  95             top: 0;
  96         }
  97
  98     }
  99
 100 }