src/main/resources/META-INF/resources/designer/css/plugins/timeline.css

   1 .timeline {
   2     position: relative;
   3     padding: 20px 0 20px;
   4     list-style: none;
   5 }
   6
   7 .timeline:before {
   8     content: " ";
   9     position: absolute;
  10     top: 0;
  11     bottom: 0;
  12     left: 50%;
  13     width: 3px;
  14     margin-left: -1.5px;
  15     background-color: #eeeeee;
  16 }
  17
  18 .timeline > li {
  19     position: relative;
  20     margin-bottom: 20px;
  21 }
  22
  23 .timeline > li:before,
  24 .timeline > li:after {
  25     content: " ";
  26     display: table;
  27 }
  28
  29 .timeline > li:after {
  30     clear: both;
  31 }
  32
  33 .timeline > li:before,
  34 .timeline > li:after {
  35     content: " ";
  36     display: table;
  37 }
  38
  39 .timeline > li:after {
  40     clear: both;
  41 }
  42
  43 .timeline > li > .timeline-panel {
  44     float: left;
  45     position: relative;
  46     width: 46%;
  47     padding: 20px;
  48     border: 1px solid #d4d4d4;
  49     border-radius: 2px;
  50     -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.175);
  51     box-shadow: 0 1px 6px rgba(0,0,0,0.175);
  52 }
  53
  54 .timeline > li > .timeline-panel:before {
  55     content: " ";
  56     display: inline-block;
  57     position: absolute;
  58     top: 26px;
  59     right: -15px;
  60     border-top: 15px solid transparent;
  61     border-right: 0 solid #ccc;
  62     border-bottom: 15px solid transparent;
  63     border-left: 15px solid #ccc;
  64 }
  65
  66 .timeline > li > .timeline-panel:after {
  67     content: " ";
  68     display: inline-block;
  69     position: absolute;
  70     top: 27px;
  71     right: -14px;
  72     border-top: 14px solid transparent;
  73     border-right: 0 solid #fff;
  74     border-bottom: 14px solid transparent;
  75     border-left: 14px solid #fff;
  76 }
  77
  78 .timeline > li > .timeline-badge {
  79     z-index: 100;
  80     position: absolute;
  81     top: 16px;
  82     left: 50%;
  83     width: 50px;
  84     height: 50px;
  85     margin-left: -25px;
  86     border-radius: 50% 50% 50% 50%;
  87     text-align: center;
  88     font-size: 1.4em;
  89     line-height: 50px;
  90     color: #fff;
  91     background-color: #999999;
  92 }
  93
  94 .timeline > li.timeline-inverted > .timeline-panel {
  95     float: right;
  96 }
  97
  98 .timeline > li.timeline-inverted > .timeline-panel:before {
  99     right: auto;
 100     left: -15px;
 101     border-right-width: 15px;
 102     border-left-width: 0;
 103 }
 104
 105 .timeline > li.timeline-inverted > .timeline-panel:after {
 106     right: auto;
 107     left: -14px;
 108     border-right-width: 14px;
 109     border-left-width: 0;
 110 }
 111
 112 .timeline-badge.primary {
 113     background-color: #2e6da4 !important;
 114 }
 115
 116 .timeline-badge.success {
 117     background-color: #3f903f !important;
 118 }
 119
 120 .timeline-badge.warning {
 121     background-color: #f0ad4e !important;
 122 }
 123
 124 .timeline-badge.danger {
 125     background-color: #d9534f !important;
 126 }
 127
 128 .timeline-badge.info {
 129     background-color: #5bc0de !important;
 130 }
 131
 132 .timeline-title {
 133     margin-top: 0;
 134     color: inherit;
 135 }
 136
 137 .timeline-body > p,
 138 .timeline-body > ul {
 139     margin-bottom: 0;
 140 }
 141
 142 .timeline-body > p + p {
 143     margin-top: 5px;
 144 }
 145
 146 @media(max-width:767px) {
 147     ul.timeline:before {
 148         left: 40px;
 149     }
 150
 151     ul.timeline > li > .timeline-panel {
 152         width: calc(100% - 90px);
 153         width: -moz-calc(100% - 90px);
 154         width: -webkit-calc(100% - 90px);
 155     }
 156
 157     ul.timeline > li > .timeline-badge {
 158         top: 16px;
 159         left: 15px;
 160         margin-left: 0;
 161     }
 162
 163     ul.timeline > li > .timeline-panel {
 164         float: right;
 165     }
 166
 167     ul.timeline > li > .timeline-panel:before {
 168         right: auto;
 169         left: -15px;
 170         border-right-width: 15px;
 171         border-left-width: 0;
 172     }
 173
 174     ul.timeline > li > .timeline-panel:after {
 175         right: auto;
 176         left: -14px;
 177         border-right-width: 14px;
 178         border-left-width: 0;
 179     }
 180 }