/templates/protostar/less/template.less

  1// CSS Reset
  2@import "../../../media/jui/less/reset.less";
  3
  4// Core variables and mixins
  5@import "variables.less"; // Custom for this template
  6@import "../../../media/jui/less/mixins.less";
  7
  8// Grid system and page structure
  9@import "../../../media/jui/less/scaffolding.less";
 10@import "../../../media/jui/less/grid.less";
 11@import "../../../media/jui/less/layouts.less";
 12
 13// Base CSS
 14@import "../../../media/jui/less/type.less";
 15@import "../../../media/jui/less/code.less";
 16@import "../../../media/jui/less/forms.less";
 17@import "../../../media/jui/less/tables.less";
 18
 19// Components: common
 20// @import "../../../media/jui/less/sprites.less";
 21@import "../../../media/jui/less/dropdowns.less";
 22@import "../../../media/jui/less/wells.less";
 23@import "../../../media/jui/less/component-animations.less";
 24@import "../../../media/jui/less/close.less";
 25
 26// Components: Buttons & Alerts
 27@import "../../../media/jui/less/buttons.less";
 28@import "../../../media/jui/less/button-groups.less";
 29@import "../../../media/jui/less/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
 30
 31// Components: Nav
 32@import "../../../media/jui/less/navs.less";
 33@import "../../../media/jui/less/navbar.less";
 34@import "../../../media/jui/less/breadcrumbs.less";
 35@import "../../../media/jui/less/pagination.less";
 36@import "../../../media/jui/less/pager.less";
 37
 38// Components: Popovers
 39@import "../../../media/jui/less/modals.less";
 40@import "../../../media/jui/less/tooltip.less";
 41@import "../../../media/jui/less/popovers.less";
 42
 43// Components: Misc
 44@import "../../../media/jui/less/thumbnails.less";
 45@import "../../../media/jui/less/labels-badges.less";
 46@import "../../../media/jui/less/progress-bars.less";
 47@import "../../../media/jui/less/accordion.less";
 48@import "../../../media/jui/less/carousel.less";
 49@import "../../../media/jui/less/hero-unit.less";
 50
 51// Utility classes
 52@import "../../../media/jui/less/utilities.less";
 53
 54// RESPONSIVE CLASSES
 55// ------------------
 56
 57@import "../../../media/jui/less/responsive-utilities.less";
 58
 59
 60// MEDIA QUERIES
 61// ------------------
 62
 63// Phones to portrait tablets and narrow desktops
 64@import "../../../media/jui/less/responsive-767px-max.less";
 65
 66// Tablets to regular desktops
 67@import "../../../media/jui/less/responsive-768px-979px.less";
 68
 69// Large desktops
 70@import "../../../media/jui/less/responsive-1200px-min.less";
 71
 72
 73// RESPONSIVE NAVBAR
 74// ------------------
 75
 76// From 979px and below, show a button to toggle navbar contents
 77@import "../../../media/jui/less/responsive-navbar.less";
 78
 79// Extended for JUI
 80@import "../../../media/jui/less/bootstrap-extended.less"; // Has to be last to override when necessary
 81
 82// Icon Font
 83@import "icomoon.less";
 84
 85/* Site Body Styles */
 86body.site{
 87	border-top:3px solid #0088cc;
 88	padding: 20px;
 89	background-color: #f4f6f7;
 90}
 91body.site.fluid{
 92	background-color: #ffffff;
 93}
 94.thumbnail {
 95	margin-bottom:9px;
 96}
 97.accordion-group {
 98	background:#fff;
 99}
100.select[multiple], select[size] {
101	height:28px;
102}
103/* Heading Fonts */
104h1,h2,h3,h4,h5,h6{
105	font-family: 'Open Sans', sans-serif;
106}
107/* Header */
108.header{
109	margin-bottom: 10px;
110}
111.header .finder {
112	margin-top: 14px;
113}
114.header .finder .btn{
115	margin-top: 0px;
116}
117/* Nav */
118.navigation{
119	padding: 5px 0;
120	border-top: 1px solid rgba(0, 0, 0, 0.075);
121	border-bottom: 1px solid rgba(0, 0, 0, 0.075);
122	margin-bottom: 10px;
123}
124.navigation .nav-pills{
125	margin-bottom: 0;
126}
127/* Hero Banner Unit */
128.hero-unit{
129	background-color: #08C;
130}
131.hero-unit > *{
132	color: white;
133	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
134}
135/* Container */
136.container{
137	max-width: 960px;
138}
139.body .container{
140	background-color: #fff;
141	-moz-border-radius: 4px;
142	-webkit-border-radius: 4px;
143	border-radius: 4px;
144	padding: 20px;
145	border: 1px solid rgba(0, 0, 0, 0.15);
146	-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
147	-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
148	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
149}
150/* Wells */
151.well .page-header{
152	margin: 0px 0px 5px 0px;
153}
154/* Headings */
155
156h1, h2, h3, h4, h5, h6 {
157  margin: (@baseLineHeight / 1.5) 0;
158}
159h1 { font-size: 26px; line-height: 28px; }
160h2 { font-size: 22px; line-height: 24px; }
161h3 { font-size: 18px; line-height: 20px; }
162h4 { font-size: 14px; line-height: 16px; }
163h5 { font-size: 13px; line-height: 15px; }
164h6 { font-size: 12px; line-height: 14px; }
165/* Module */
166.module-header {
167	padding-bottom: 17px;
168	margin: 20px 0 18px 0;
169	border-bottom: 1px solid #eeeeee;
170}
171/* Single Item */
172.item-title {
173	margin-bottom:9px;
174}
175.item-content {
176	margin:18px 0;
177}
178.item-subtitle {
179	margin-bottom:9px;
180}
181.pull-right.item-image {
182	margin:0 0 18px 20px;
183}
184.pull-left.item-image {
185	margin:0 20px 18px 0;
186}
187.header .nav > li:last-child > .dropdown-menu,
188.item-actions .dropdown-menu,
189.item-comment .dropdown-menu {
190	left:initial;
191	right:0;
192}
193.article-index {
194	margin:0 0 10px 10px;
195}
196/* List */
197.list-item-title {
198	margin-bottom:9px;
199}
200.list-item-content {
201	margin:18px 0;
202}
203.list-item-subtitle {
204	margin-bottom:9px;
205}
206/* More Items */
207.items-more,
208.content-links {
209	padding: 15px 0;
210}
211@media (max-width: 480px) {
212	.item-info > span {
213		display:block;
214	}
215	.blog-item .pull-right.item-image {
216		margin:0 0 18px 0;
217	}
218	.blog-item .pull-left.item-image {
219		margin:0 0 18px 0;
220		float:none;
221	}
222}
223@media (max-width: 768px) {
224	body {
225		padding-top: 0;
226	}
227	.header {
228		background:transparent;
229	}
230	.header .brand {
231		float:none;
232		display:block;
233		text-align:center;
234	}
235	.header .nav.pull-right {
236		float:none;
237		display:block;
238	}
239	.header .nav-pills > li > a {
240		border: 1px solid #ddd;
241		border-bottom:0;
242		margin:0;
243		-webkit-border-radius: 0;
244		-moz-border-radius: 0;
245		border-radius: 0;
246		margin-right: 0;
247	}
248	.header .nav-pills > li:first-child > a {
249		-webkit-border-radius: 4px 4px 0 0;
250		-moz-border-radius: 4px 4px 0 0;
251		border-radius: 4px 4px 0 0;
252	}
253	.header .nav-pills > li:last-child > a {
254		-webkit-border-radius: 0 0 4px 4px;
255		-moz-border-radius: 0 0 4px 4px;
256		border-radius: 0 0 4px 4px;
257		border-bottom:1px solid #ddd;
258	}
259	.modal.fade {
260		top:-100%;
261	}
262	.nav-tabs {
263		border-bottom: 0;
264	}
265	.nav-tabs > li {
266		float: none;
267	}
268	.nav-tabs > li > a {
269		border: 1px solid #ddd;
270		-webkit-border-radius: 0;
271		-moz-border-radius: 0;
272		border-radius: 0;
273		margin-right: 0;
274	}
275	.nav-tabs > li:first-child > a {
276		-webkit-border-radius: 4px 4px 0 0;
277		-moz-border-radius: 4px 4px 0 0;
278		border-radius: 4px 4px 0 0;
279	}
280	.nav-tabs > li:last-child > a, .nav-tabs > .active:last-child > a {
281		-webkit-border-radius: 0 0 4px 4px;
282		-moz-border-radius: 0 0 4px 4px;
283		border-radius: 0 0 4px 4px;
284		border-bottom:1px solid #ddd;
285	}
286	.nav-tabs > li > a:hover {
287		border-color: #ddd;
288		z-index: 2;
289	}
290	.nav-tabs.nav-dark > li > a {
291		border: 1px solid #333;
292	}
293	.nav-tabs > li:last-child > a, .nav-tabs > .active:last-child > a {
294		border-bottom:1px solid #333;
295	}
296	.nav-tabs.nav-dark > li > a:hover {
297		border-color: #333;
298	}
299	.nav-pills > li {
300		float: none;
301	}
302	.nav-pills > li > a {
303		margin-right: 0;
304	}
305	.nav-pills > li > a {
306		margin-bottom: 3px;
307	}
308	.nav-pills  > li:last-child > a {
309		margin-bottom: 1px;
310	}
311	.form-search > .pull-left,
312	.form-search > .pull-right {
313		float:none;
314		display:block;
315		margin-bottom:9px;
316	}
317}
318@media (max-width: 980px) {
319	.navbar-fixed-top {
320		margin-bottom:0!important;
321	}
322	.item-comment .item-image{
323		display:none;
324	}
325}
326
327/* Caption fixes */
328.img_caption .left {
329	float: left;
330	margin-right: 1em;
331}
332
333.img_caption .right {
334	float: right;
335	margin-left: 1em;
336}
337
338.img_caption .left p {
339	clear: left;
340	text-align: center;
341}
342
343.img_caption .right p {
344	clear: right;
345	text-align: center;
346}
347
348.img_caption  {
349	text-align: center!important;
350}
351
352.img_caption.none {
353	margin-left:auto;
354	margin-right:auto;
355}