/templates/protostar/less/template.less
LESS | 355 lines | 290 code | 29 blank | 36 comment | 0 complexity | e3c0e5eda7bf53b1c59dce65a36e9263 MD5 | raw file
Possible License(s): LGPL-2.1
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}