0.8.6 beta

| Axle | 'Widgets'

1. Slide show viewer

Info will go here

HTML example:

<div class="slide_show_container" id="">
  <div class="slide_show_view" id="">There are no images assigned to this widget</div>
  <div class="slide_show_tools" id="">
    <ul class="tool_box">
      <li><a href="#">Share</a></li>
      <li><a href="#">Caption</a></li>
      <li><a href="#">View all</a></li>
    </ul>
    <ul class="mini_pagination">
      <li>1 of 15</li>
      <li>
        <button><span>reverse</span></button>
        <button><span>adcance</span></button>
      </li>
    </ul>
  </div>
</div>
			

Example LESS application:

.slide_show_container {
	.grid_12(8.98);
	.alpha;
	.omega;
	border: 1px solid @alpha_grey;
}

.slide_show_view {
	background: @echo_grey;
	.grid_12(8.86);			// take into account padding and borders
	.alpha;
	.omega;
	margin: 5px;
	height: 300px;
	color: @white;
	line-height: 300px;
	text-align: center;
}

.slide_show_tools {
	.grid_12(8.87);			// take into account padding and borders
	.alpha;
	.omega;
	margin: 0 5px;
	float: left;
	ul {
		float: left;
		margin: 0;
	}
}

.mini_pagination {
	font-weight: bold;
	line-height: 2.08333333em;
	width: auto;
	float: right !important;
	li {
		float: left;
		margin-right: 0.8333333em;
		&:last-child {
			margin: 0;
			line-height: 3em;
		}
	}
	.mini_buttons_paging;
}


.tool_box {
	line-height: 2.08333333em;
	li {
		float: left;
		margin-right: 0.8333333em;
	}
	a {
		color: @alpha_grey;
	}
}