├── readme.md ├── scheme.less └── 1pxdeep.less /readme.md: -------------------------------------------------------------------------------- 1 | # 1pxdeep: Bootstrap Theme. Exudes color. Oozes flat. 2 | 3 | _Copyright Rex Riepe 2013_ 4 | 5 | _Code licensed under Apache License v2.0, documentation under CC BY 3.0._ 6 | 7 | ## Demo & Documentation 8 | 9 | Use the Bootstrap version of LESS. 10 | 11 | Include scheme.less anywhere. 12 | 13 | Include 1pxdeep.less after all Bootstrap LESS. 14 | 15 | Integration with other projects 16 | --- 17 | 18 | #### JBST 1pxdeep Theme 19 | [JBST](http://www.jbst.eu/) is a powerful theme framework that can be used as a standalone website builder or as a framework to create child themes for WordPress build on Twitter's Bootstrap 3. Full customizable with [LESS](http://www.lesscss.org/). Relative color design is designing by relative visual weight, or designing with color schemes. [1pxdeep](http://rriepe.github.io/1pxdeep/) brings that concept to Bootstrap and this the [JBST 1pxdeep Theme](https://github.com/bassjobsen/jbst-1pxdeep-theme) brings it to WordPress. 20 | -------------------------------------------------------------------------------- /scheme.less: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////// 2 | ///////////////////////////////////////////////// 3 | //// SchemeLESS v1.0 4 | //// 5 | //// Copyright 2013 Rex Riepe 6 | //// Licensed under the Apache License v2.0 7 | //// http://www.apache.org/licenses/LICENSE-2.0 8 | //// 9 | ///////////////////////////////////////////////// 10 | ///////////////////////////////////////////////// 11 | 12 | /////////////////////////// 13 | ////Customizable values 14 | /////////////////////////// 15 | 16 | // This color is used to generate the scheme 17 | @seed-color:#578562; 18 | 19 | //// Color wheel positions 20 | /////////////////////////// 21 | 22 | // Uncomment the color wheel you want to use 23 | 24 | // Accented analogue (default) 25 | @wheel_pos1:45; @wheel_pos2:315; @wheel_pos3:180; 26 | 27 | // Tetrad 28 | //@wheel_pos1:30; @wheel_pos2:180; @wheel_pos3:210; 29 | 30 | // Triad 31 | //@wheel_pos1:120; @wheel_pos2:240; @wheel_pos3:0; 32 | 33 | // Compliment 34 | //@wheel_pos1:180; @wheel_pos2:0; @wheel_pos3:180; 35 | 36 | // Monochrome 37 | //@wheel_pos1:8; @wheel_pos2:352; @wheel_pos3:0; 38 | 39 | //// Luma breaks 40 | /////////////////////////// 41 | 42 | // Change these for different contrast cutoff points 43 | 44 | @luma-upper-break:80%; 45 | @luma-lower-break:16%; 46 | 47 | //// Relative changes to subcolors (lightness, saturation) 48 | /////////////////////////// 49 | 50 | // Customize these for different relative a, b and c colors 51 | 52 | @contrast:1; 53 | 54 | @color-a-sat:(8%*@contrast); 55 | @color-a-lit:(-15%*@contrast); 56 | 57 | @color-b-sat:(7%*@contrast); 58 | @color-b-lit:(-5%*@contrast); 59 | 60 | @color-c-sat:(-3%*@contrast); 61 | @color-c-lit:(8%*@contrast); 62 | 63 | /////////////////////////// 64 | ////Scheme building 65 | /////////////////////////// 66 | 67 | //// Beginning color values 68 | /////////////////////////// 69 | 70 | @sat:saturation(@seed-color); 71 | @luma:luminance(@seed-color); 72 | @lit:lightness(@seed-color); 73 | @tone:desaturate(@seed-color,100%); 74 | 75 | //// Color creation 76 | /////////////////////////// 77 | 78 | //This makes the scheme's colors using the wheel positions 79 | 80 | @l-factor:@luma; // what we'll use for the L in HSL 81 | 82 | @color1:@seed-color; 83 | @color1theme:hsl(hue(spin(@seed-color,0)),@sat,@l-factor); // a color 1 alternate, to keep a, b and c colors consistent 84 | 85 | @color1a:lighten(saturate(@color1theme,@color-a-sat), @color-a-lit); 86 | @color1b:lighten(saturate(@color1theme,@color-b-sat), @color-b-lit); 87 | @color1c:lighten(saturate(@color1theme,@color-c-sat), @color-c-lit); 88 | 89 | @color2:hsl(hue(spin(@seed-color,@wheel_pos1)),@sat,@l-factor); 90 | 91 | @color2a:lighten(saturate(@color2,@color-a-sat), @color-a-lit); 92 | @color2b:lighten(saturate(@color2,@color-b-sat), @color-b-lit); 93 | @color2c:lighten(saturate(@color2,@color-c-sat), @color-c-lit); 94 | 95 | @color3:hsl(hue(spin(@seed-color,@wheel_pos2)),@sat,@l-factor); 96 | 97 | @color3a:lighten(saturate(@color3,@color-a-sat), @color-a-lit); 98 | @color3b:lighten(saturate(@color3,@color-b-sat), @color-b-lit); 99 | @color3c:lighten(saturate(@color3,@color-c-sat), @color-c-lit); 100 | 101 | @color4:hsl(hue(spin(@seed-color,@wheel_pos3)),@sat,@l-factor); 102 | 103 | @color4a:lighten(saturate(@color4,@color-a-sat), @color-a-lit); 104 | @color4b:lighten(saturate(@color4,@color-b-sat), @color-b-lit); 105 | @color4c:lighten(saturate(@color4,@color-c-sat), @color-c-lit); 106 | 107 | /////////////////////////// 108 | //// Mix-ins 109 | /////////////////////////// 110 | 111 | //// Contrast 112 | /////////////////////////// 113 | 114 | // contrasts text against a given background color 115 | 116 | .contrast (@color) when (luminance(@color) >= @luma-upper-break) { 117 | //darker text for lighter backgrounds 118 | color:average(darken(@color,30%),#222); 119 | } 120 | 121 | .contrast (@color) when (luminance(@color) < @luma-upper-break) { 122 | //white text for everything else 123 | color:#ffffff; 124 | } 125 | 126 | //// Schemify 127 | /////////////////////////// 128 | 129 | // brings outside colors more in line with the current scheme 130 | 131 | .schemify(@color) { //schemifies a background color 132 | @mix-weight:60%; 133 | @new-color:mix(hsl(hue(@color),@sat,@luma),@color,@mix-weight); 134 | background:@new-color; 135 | .contrast(@new-color); 136 | } 137 | 138 | .schemify-text(@color) { 139 | @mix-weight:60%; 140 | @new-color:mix(hsl(hue(@color),@sat,@luma),@color,@mix-weight); 141 | color:@new-color; 142 | .contrast(@color); 143 | } 144 | 145 | -------------------------------------------------------------------------------- /1pxdeep.less: -------------------------------------------------------------------------------- 1 | ///////////////////////////////////////////////// 2 | ///////////////////////////////////////////////// 3 | //// 4 | //// 1pxdeep v1.0.1 5 | //// 6 | //// Copyright 2013 Rex Riepe 7 | //// Licensed under the Apache License v2.0 8 | //// http://www.apache.org/licenses/LICENSE-2.0 9 | //// 10 | ///////////////////////////////////////////////// 11 | ///////////////////////////////////////////////// 12 | 13 | //// Bootstrap variable overrides 14 | 15 | @font-size-base: 16px; 16 | 17 | @border-radius-base: 6px; 18 | @border-radius-large: 8px; 19 | @border-radius-small: 4px; 20 | 21 | @list-group-bg: transparent; 22 | 23 | @table-border-color: transparent; 24 | 25 | @modal-backdrop-bg: @color1a; 26 | 27 | @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 4); 28 | 29 | @btn-default-bg: @color1; 30 | @btn-default-border: @btn-default-bg; 31 | @btn-font-weight: normal; 32 | 33 | @brand-primary: hsl(hue(#428bca),@sat,@l-factor); 34 | @brand-info: hsl(hue(#5bc0de),@sat,@l-factor); 35 | @brand-success: hsl(hue(#5cb85c),((saturation(#5cb85c) + @sat)/2),((luma(#5cb85c) + @luma - 10)/2)); 36 | @brand-warning: hsl(hue(#f0ad4e),((saturation(#f0ad4e) + @sat + 16)/2),((luma(#f0ad4e) + @luma - 10)/2)); 37 | @brand-danger: hsl(hue(#d9534f),((saturation(#d9534f) + @sat)/2),((luma(#d9534f) + @luma + 10)/2)); 38 | 39 | @navbar-link-color: white; 40 | @navbar-link-hover-color: white; 41 | @navbar-link-hover-bg: transparent; 42 | @navbar-link-active-color: white; 43 | @navbar-link-active-bg: @1pxdeep-bg; 44 | @navbar-link-disabled-color: #ccc; 45 | @navbar-link-disabled-bg: transparent; 46 | 47 | //// SchemeLESS variable overrides 48 | 49 | @luma-upper-break:72; 50 | 51 | @contrast:(@luma/50); 52 | 53 | //// Theme variables 54 | 55 | @1pxdeep-default-button-color: @color1b; 56 | @1pxdeep-bg: @color1; 57 | @body-bg: @1pxdeep-bg; 58 | 59 | 60 | //// Mix-ins 61 | 62 | .button-text (@color) when (luma(@color1) >= @luma-upper-break) { 63 | color:average(darken(@color,30%),#222); 64 | } 65 | 66 | .button-text (@color) when (luma(@color1) < @luma-upper-break) { 67 | color:#ffffff; 68 | } 69 | 70 | .contrast (@color) when (luma(@color) >= @luma-upper-break) { 71 | color:mix(darken(@color,18%),#111,50%); 72 | } 73 | 74 | .contrast (@color) when (luma(@color) < @luma-upper-break) { 75 | color:hsl(hue(@color),@sat,97%); 76 | } 77 | 78 | .contrast-dim (@color) when (luma(@color) >= @luma-upper-break) { 79 | color:mix(darken(@color,5%),#111,65%); 80 | } 81 | 82 | .contrast-dim (@color) when (luma(@color) < @luma-upper-break) { 83 | color:mix(@color,#ffffff,25%); 84 | } 85 | 86 | .contrast-link (@color) when (luma(@color) >= @luma-upper-break) { 87 | color:average(darken(@color,80%),#222); 88 | } 89 | 90 | .contrast-link (@color) when (luma(@color) < @luma-upper-break) { 91 | color:mix(#ffffff,@color1,75%); 92 | } 93 | 94 | .btn-borders(@color) { 95 | border:1px solid transparent; 96 | border-top-color:mix(softlight(white,@color),@color,30%); 97 | } 98 | 99 | .btn-borders(@color) when (luma(@seed-color) > @luma-upper-break) { 100 | border:1px solid transparent; 101 | border-bottom-color:mix(#333,@color,30%); 102 | } 103 | 104 | .btn-borders(@color) when (luma(@seed-color) < 10%) { 105 | border:1px solid transparent; 106 | border-top-color:mix(softlight(white,@color),@color,30%); 107 | } 108 | 109 | .btn-pseudo-states(@color, @background, @border) { // overwrites bootstrap mix-in 110 | .contrast(@background); 111 | .btn-borders(@background); 112 | 113 | &:hover, 114 | &:focus, 115 | &:active, 116 | &.active { 117 | background-color: darken(@background, 2%); 118 | .btn-borders(darken(@background, 2%)); 119 | border-top:1px solid darken(@background, 2%); 120 | .1pxdeep-shadow(1.5); 121 | } 122 | 123 | &.disabled, 124 | &[disabled], 125 | fieldset[disabled] & { 126 | &, 127 | &:hover, 128 | &:focus, 129 | &:active, 130 | &.active { 131 | background-color: @background; 132 | border-color:transparent; 133 | } 134 | } 135 | } 136 | 137 | //shadows 138 | 139 | @1pxdeep-shadow-intensity:.1; 140 | 141 | @1pxdeep-shadow-color:mix(darken(@color1,33%),#222,50%); 142 | 143 | @1pxdeep-shadow-r:red(@1pxdeep-shadow-color); 144 | @1pxdeep-shadow-g:green(@1pxdeep-shadow-color); 145 | @1pxdeep-shadow-b:blue(@1pxdeep-shadow-color); 146 | 147 | .1pxdeep-shadow(@intensity:1) { 148 | .box-shadow(0px 1px 2px rgba(@1pxdeep-shadow-r,@1pxdeep-shadow-g,@1pxdeep-shadow-b,(@intensity*@1pxdeep-shadow-intensity))); 149 | //.box-shadow(none); 150 | } 151 | 152 | .1pxdeep-shadow(@intensity:1) when (luma(@color1) > @luma-upper-break) { 153 | @1pxdeep-shadow-intensity:.05; 154 | .box-shadow(0px 1px 2px rgba(@1pxdeep-shadow-r,@1pxdeep-shadow-g,@1pxdeep-shadow-b,(@intensity*@1pxdeep-shadow-intensity))); 155 | //.box-shadow(none); 156 | } 157 | 158 | .1pxdeep-shadow-inset(@intensity:1) { 159 | .box-shadow(inset 0px 0px 3px rgba(@1pxdeep-shadow-r,@1pxdeep-shadow-g,@1pxdeep-shadow-b,(@intensity*@1pxdeep-shadow-intensity))); 160 | //.box-shadow(none); 161 | } 162 | 163 | .1pxdeep-shadow-inset(@intensity:1) when (luma(@color1) > @luma-upper-break) { 164 | @1pxdeep-shadow-intensity:.05; 165 | .box-shadow(inset 0px 0px 3px rgba(@1pxdeep-shadow-r,@1pxdeep-shadow-g,@1pxdeep-shadow-b,(@intensity*@1pxdeep-shadow-intensity))); 166 | //.box-shadow(none); 167 | } 168 | 169 | 170 | .btn { 171 | .1pxdeep-shadow(); 172 | 173 | &:active, 174 | &.active { 175 | .box-shadow(none); 176 | } 177 | 178 | &.disabled, 179 | &[disabled], 180 | fieldset[disabled] & { 181 | .opacity(.65); 182 | .box-shadow(none); 183 | } 184 | 185 | .btn-color(@color) { 186 | background:@color; 187 | .contrast(@color); 188 | .btn-borders(@color); 189 | 190 | &:hover, 191 | &:focus { 192 | background:lighten(@color,2%); 193 | .btn-borders(lighten(@color,2%)); 194 | .contrast(@color); 195 | } 196 | 197 | &:active, 198 | &.active { 199 | .contrast-dim(@color); 200 | background:darken(@color,2%); 201 | border:1px solid darken(@color,2%); 202 | } 203 | } 204 | 205 | .btn-color(@color) when (luma(@color) > @luma-upper-break) { 206 | background:@color; 207 | .contrast(@color); 208 | .btn-borders(@color); 209 | 210 | &:hover, 211 | &:focus { 212 | background:lighten(@color,2%); 213 | .contrast(@color); 214 | } 215 | 216 | &:active, 217 | &.active { 218 | background:darken(@color,2%); 219 | border:1px solid darken(@color,2%); 220 | } 221 | } 222 | 223 | .btn-color(@1pxdeep-default-button-color); 224 | &.color1 {.btn-color(@color1);} 225 | &.color1a {.btn-color(@color1a);} 226 | &.color1b {.btn-color(@color1b);} 227 | &.color1c {.btn-color(@color1c);} 228 | &.color2 {.btn-color(@color2);} 229 | &.color2a {.btn-color(@color2a);} 230 | &.color2b {.btn-color(@color2b);} 231 | &.color2c {.btn-color(@color2c);} 232 | &.color3 {.btn-color(@color3);} 233 | &.color3a {.btn-color(@color3a);} 234 | &.color3b {.btn-color(@color3b);} 235 | &.color3c {.btn-color(@color3c);} 236 | &.color4 {.btn-color(@color4);} 237 | &.color4a {.btn-color(@color4a);} 238 | &.color4b {.btn-color(@color4b);} 239 | &.color4c {.btn-color(@color4c);} 240 | 241 | &.btn-primary {.btn-color(@brand-primary);} 242 | &.btn-info {.btn-color(@brand-info);} 243 | &.btn-success {.btn-color(@brand-success);} 244 | &.btn-warning {.btn-color(@brand-warning);} 245 | &.btn-danger {.btn-color(@brand-danger);} 246 | &.btn-inverse {.btn-color(desaturate(@color1a,100%));} 247 | } 248 | 249 | .schemify(@color) { 250 | @mix-weight:60%; 251 | @new-color:mix(hsl(hue(@color),@sat,@luma),@color,@mix-weight); 252 | background:@new-color; 253 | .contrast(@new-color); 254 | } 255 | 256 | 257 | //elements 258 | 259 | body,html { 260 | background:@1pxdeep-bg; 261 | .contrast(@1pxdeep-bg); 262 | 263 | -webkit-font-smoothing: antialiased; 264 | -moz-font-smoothing: antialiased; 265 | font-smoothing: antialiased; 266 | } 267 | 268 | a { 269 | .contrast-link(@1pxdeep-bg); 270 | 271 | &:hover { 272 | .contrast-link(@1pxdeep-bg); 273 | } 274 | } 275 | 276 | blockquote { 277 | 278 | padding:6px 8px; 279 | 280 | cite { 281 | font-style:italic; 282 | } 283 | 284 | .blockquote-color(@color,@alt-color) { 285 | background:@color; 286 | border-left:4px solid @alt-color; 287 | .contrast(@color); 288 | 289 | &.pull-right { 290 | border-left:none; 291 | border-right:4px solid @alt-color; 292 | } 293 | 294 | small { 295 | .contrast(@color); 296 | text-shadow:none; 297 | } 298 | } 299 | 300 | .blockquote-color(@color1c,@color1a); 301 | &.color1 { .blockquote-color(@color1c,@color1a)} 302 | &.color2 { .blockquote-color(@color2c,@color2a)} 303 | &.color3 { .blockquote-color(@color3c,@color3a)} 304 | &.color4 { .blockquote-color(@color4c,@color4a)} 305 | } 306 | 307 | /*input[type="checkbox"] { //experimental flat look for checkboxes 308 | margin-right:13px; 309 | margin-top:5px; 310 | background:white; 311 | 312 | &:before { 313 | display:block; 314 | content:""; 315 | width:22px; 316 | height:22px; 317 | //border:2px solid @1pxdeep-bg; 318 | border-radius:@border-radius-base; 319 | background:white; 320 | position:relative; 321 | top:-4px; 322 | left:-1px; 323 | .box-shadow(inset 1px 1px 0px @1pxdeep-bg); 324 | } 325 | 326 | &:checked { 327 | &:after { 328 | display:block; 329 | content:""; 330 | width:8px; 331 | height:13px; 332 | border-radius:0; 333 | background:white; 334 | position:relative; 335 | top:-23px; 336 | left:7px; 337 | .box-shadow(inset -3px -3px 0px @1pxdeep-bg); 338 | border:none; 339 | border-radius:0; 340 | .rotate(45deg); 341 | } 342 | } 343 | }*/ 344 | 345 | .form-control { 346 | .box-shadow(none); 347 | } 348 | 349 | // small fix in headlines 350 | 351 | h1, h2, h3, h4, h5, h6, 352 | .h1, .h2, .h3, .h4, .h5, .h6 { 353 | small { 354 | color:inherit; 355 | } 356 | } 357 | 358 | //dropdown 359 | 360 | .dropdown-menu { 361 | .box-shadow(none); 362 | border:none; 363 | 364 | li { 365 | border:none; 366 | } 367 | 368 | .dropdown-menu-color(@color) { 369 | li { 370 | &:hover { 371 | a { 372 | background:@color; 373 | .contrast(@color); 374 | } 375 | 376 | } 377 | } 378 | } 379 | 380 | .dropdown-menu-color(@color1b); 381 | 382 | &.color1 {.dropdown-menu-color(@color1b);} 383 | &.color2 {.dropdown-menu-color(@color2b);} 384 | &.color3 {.dropdown-menu-color(@color3b);} 385 | &.color4 {.dropdown-menu-color(@color4b);} 386 | 387 | } 388 | 389 | .btn-group.open .dropdown-toggle { 390 | .box-shadow(none); 391 | } 392 | 393 | .dropup .caret, .navbar-fixed-bottom .dropdown .caret { 394 | border-top:none; 395 | border-bottom-color:white; 396 | } 397 | 398 | .btn-default .caret { 399 | border-top-color:white; 400 | } 401 | 402 | //well 403 | 404 | .well { 405 | border:none; 406 | 407 | .well-color(@color) { 408 | .1pxdeep-shadow-inset(2.5); 409 | background:@color; 410 | .contrast(@color); 411 | 412 | a { 413 | .contrast-link(@color); 414 | } 415 | } 416 | 417 | .well-color(@modal-backdrop-bg); 418 | } 419 | 420 | //navbar 421 | 422 | .navbar { 423 | 424 | border:none; 425 | 426 | .navbar-color(@color) { 427 | background:@color; 428 | .contrast(@color); 429 | } 430 | 431 | .navbar-color(@color1a); 432 | 433 | &.color1 { .navbar-color(@color1a);} 434 | &.color2 { .navbar-color(@color2a);} 435 | &.color3 { .navbar-color(@color3a);} 436 | &.color4 { .navbar-color(@color4a);} 437 | } 438 | 439 | .navbar-brand { 440 | color:inherit; 441 | } 442 | 443 | .navbar-nav { 444 | 445 | .active { 446 | overflow-y:hidden; 447 | } 448 | 449 | .navbar-nav-color(@color) { 450 | .active > a { 451 | .1pxdeep-shadow(5); 452 | .contrast(@color); 453 | background-color: @color; 454 | 455 | &:hover { 456 | .contrast(@color); 457 | background-color: @color; 458 | } 459 | } 460 | 461 | li > a { 462 | .contrast-dim(darken(@color,10%)); 463 | line-height: 25px; 464 | z-index:100; 465 | 466 | &:hover, 467 | &:focus { 468 | @ncolor:lighten(@color,4%); 469 | .contrast(@ncolor); 470 | background-color: @ncolor; 471 | } 472 | } 473 | } 474 | 475 | .navbar-nav-color(@1pxdeep-bg); 476 | 477 | &.color1 { .navbar-nav-color(@color1);} 478 | &.color2 { .navbar-nav-color(@color2);} 479 | &.color3 { .navbar-nav-color(@color3);} 480 | &.color4 { .navbar-nav-color(@color4);} 481 | } 482 | 483 | .navbar-fixed-top, .navbar-fixed-bottom { 484 | .1pxdeep-shadow-inset(2); 485 | 486 | .navbar-inner { 487 | //.box-shadow(none); 488 | padding:0; 489 | //margin-bottom:12px; 490 | } 491 | } 492 | 493 | .navbar-toggle { 494 | @color:@color1; 495 | background-color: @color; 496 | .btn-borders(@color); 497 | 498 | &:hover, 499 | &:focus { 500 | background-color: lighten(@color,2%); 501 | } 502 | 503 | &:active, 504 | .active { 505 | background-color:darken(@color,2%); 506 | border-top-color:darken(@color,2%); 507 | } 508 | 509 | .icon-bar-color(@color) when (luma(@color) > @luma-upper-break) { 510 | background-color:#333; 511 | } 512 | 513 | .icon-bar-color(@color) when (luma(@color) =< @luma-upper-break) { 514 | background-color:white; 515 | } 516 | 517 | .icon-bar { 518 | .icon-bar-color(@color); 519 | } 520 | } 521 | 522 | .navbar-collapse { 523 | border-top:none; 524 | } 525 | 526 | //pills 527 | 528 | .nav-pills { 529 | text-shadow:none; 530 | color:black; 531 | 532 | .pills-color(@color,@active-color) { 533 | > li > a { 534 | &:hover { 535 | background:lighten(@color,10%); 536 | .contrast(lighten(@color,10%)); 537 | } 538 | } 539 | 540 | > li.active > a { 541 | background:@active-color; 542 | .contrast(@active-color); 543 | 544 | &:hover { 545 | background:lighten(@active-color,2%); 546 | .contrast(lighten(@active-color,2%)); 547 | } 548 | } 549 | } 550 | 551 | .pills-color(@color1,@color1c); 552 | 553 | &.color1 { .pills-color(@color1,@color1c);} 554 | &.color2 { .pills-color(@color2,@color2c);} 555 | &.color3 { .pills-color(@color3,@color2c);} 556 | &.color4 { .pills-color(@color4,@color2c);} 557 | } 558 | 559 | //alert 560 | 561 | .alert { 562 | border:none; 563 | text-shadow:none; 564 | 565 | .close { 566 | .opacity(100); 567 | text-shadow:none; 568 | margin-top:-1px; 569 | } 570 | 571 | .alert-color(@color) { 572 | background:@color; 573 | .contrast(@color); 574 | 575 | .close { 576 | .contrast(@color); 577 | } 578 | } 579 | 580 | .alert-color-schemify(@color) { 581 | .alert-color(@color); 582 | .schemify(@color); 583 | 584 | .close { 585 | .contrast(mix(hsl(hue(@color),@sat,@luma),@color,60%);); 586 | } 587 | } 588 | 589 | .alert-color-schemify(#fbfcd6); 590 | 591 | &.color1 { .alert-color(@color1);} 592 | &.color2 { .alert-color(@color2);} 593 | &.color3 { .alert-color(@color3);} 594 | &.color4 { .alert-color(@color4);} 595 | 596 | &.alert-error,&.alert-danger {.alert-color-schemify(#ee5f5b);} 597 | &.alert-info {.alert-color-schemify(#08c);} 598 | &.alert-success {.alert-color-schemify(#62c462);} 599 | } 600 | 601 | //progress bars 602 | 603 | .progress { 604 | background:darken(@1pxdeep-bg,5%); 605 | .1pxdeep-shadow-inset(2); 606 | 607 | .progress-color(@color) { 608 | background:darken(@color,5%); 609 | } 610 | 611 | &.color1 { .progress-color(@color1);} 612 | &.color2 { .progress-color(@color2);} 613 | &.color3 { .progress-color(@color3);} 614 | &.color4 { .progress-color(@color4);} 615 | } 616 | 617 | .progress-bar { 618 | .box-shadow(none); 619 | 620 | .progress-bar-color(@color) { 621 | background:@color; 622 | .contrast(@color); 623 | } 624 | 625 | .progress-bar-color(@color1c); 626 | &.color1 { .progress-bar-color(@color1c);} 627 | &.color2 { .progress-bar-color(@color2c);} 628 | &.color3 { .progress-bar-color(@color3c);} 629 | &.color4 { .progress-bar-color(@color4c);} 630 | &.progress-bar-success { .progress-bar-color(@brand-success);} 631 | &.progress-bar-warning { .progress-bar-color(@brand-warning);} 632 | &.progress-bar-danger { .progress-bar-color(@brand-danger);} 633 | &.progress-bar-info { .progress-bar-color(@brand-info);} 634 | } 635 | 636 | //accordion 637 | 638 | .accordion { 639 | .accordion-heading { 640 | border-bottom: 0; 641 | border-radius:6px; 642 | a { 643 | &:hover { 644 | text-decoration:none; 645 | } 646 | } 647 | } 648 | 649 | .accordion-group { 650 | border:none; 651 | } 652 | 653 | .accordion-inner { 654 | margin:12px; 655 | padding:15px; 656 | border-radius:6px; 657 | } 658 | 659 | .accordion-inner-color(@color) { 660 | .accordion-inner { 661 | background:@color; 662 | .contrast(@color); 663 | //text-shadow:none; 664 | } 665 | } 666 | 667 | .accordion-heading-color(@color) { 668 | .accordion-heading { 669 | background:@color; 670 | .contrast(@color); 671 | .btn-borders(@color); 672 | 673 | a { 674 | .contrast(@color); 675 | } 676 | } 677 | } 678 | 679 | .accordion-heading-color(@color1b); 680 | .accordion-inner-color(@color1c); 681 | 682 | &.color1 { .accordion-heading-color(@color1b); 683 | .accordion-inner-color(@color1c);} 684 | &.color2 { .accordion-heading-color(@color2b); 685 | .accordion-inner-color(@color2c);} 686 | &.color3 { .accordion-heading-color(@color3b); 687 | .accordion-inner-color(@color3c);} 688 | &.color4 { .accordion-heading-color(@color4b); 689 | .accordion-inner-color(@color4c);} 690 | } 691 | 692 | //jumbotron 693 | 694 | .jumbotron { 695 | font-size: 24px; 696 | line-height:32px; 697 | font-weight: normal; 698 | 699 | .jumbotron-color(@color) { 700 | background:@color; 701 | .contrast(@color); 702 | } 703 | 704 | .jumbotron-color(@color1b); 705 | 706 | &.color1 {.jumbotron-color(@color1b);} 707 | &.color2 {.jumbotron-color(@color2b);} 708 | &.color3 {.jumbotron-color(@color3b);} 709 | &.color4 {.jumbotron-color(@color4b);} 710 | 711 | h1 { 712 | margin-bottom: 12px; 713 | font-size: 60px; 714 | line-height: 1; 715 | color: @jumbotron-heading-color; 716 | letter-spacing: -1px; 717 | } 718 | } 719 | 720 | //breadcrumbs 721 | 722 | .breadcrumb { 723 | 724 | > .active { 725 | font-weight:bold; 726 | } 727 | 728 | .breadcrumb-color(@color) { 729 | background:@color; 730 | li { 731 | .contrast(@color); 732 | 733 | > a { 734 | .contrast(@color); 735 | } 736 | } 737 | 738 | > .active { 739 | .contrast(@color) 740 | } 741 | 742 | } 743 | 744 | .breadcrumb-color(@color1b); 745 | 746 | &.color1 { .breadcrumb-color(@color1b);} 747 | &.color2 { .breadcrumb-color(@color2b);} 748 | &.color3 { .breadcrumb-color(@color3b);} 749 | &.color4 { .breadcrumb-color(@color4b);} 750 | 751 | 752 | } 753 | 754 | //pager 755 | 756 | .pager { 757 | > li { 758 | > a { 759 | border:none; 760 | } 761 | } 762 | 763 | .pager-color(@color) { 764 | > li { 765 | > a { 766 | background:@color; 767 | .contrast(@color); 768 | } 769 | 770 | > a:hover, 771 | > a:focus { 772 | background-color: lighten(@color,2%); 773 | } 774 | } 775 | 776 | > .disabled { 777 | > a { 778 | background:@color; 779 | .contrast-dim(@color); 780 | .opacity(.5); 781 | } 782 | 783 | > a:hover, 784 | > a:focus { 785 | background-color:@color; 786 | .contrast-dim(@color); 787 | } 788 | 789 | } 790 | } 791 | 792 | .pager-color(@color1b); 793 | 794 | &.color1 { .pager-color(@color1b);} 795 | &.color2 { .pager-color(@color2b);} 796 | &.color3 { .pager-color(@color3b);} 797 | &.color4 { .pager-color(@color4b);} 798 | 799 | &.disabled { .pager-color(#ddd);} 800 | } 801 | 802 | //pagination 803 | 804 | .pagination { 805 | background:none; 806 | 807 | .page-color(@color,@active-color) { 808 | 809 | > li > a { 810 | background:@color; 811 | .contrast(@color); 812 | .btn-borders(@color); 813 | } 814 | 815 | > li > a:hover, 816 | > li > a:focus, 817 | > li > a:active, 818 | > .active > a, 819 | > .active > span { 820 | .contrast(lighten(@color,2%)); 821 | background-color:lighten(@color,2%); 822 | } 823 | > .active > a, 824 | > .active > span { 825 | .contrast(@active-color); 826 | background-color:lighten(@active-color,2%); 827 | } 828 | } 829 | 830 | .page-color(@color1b,@color1c); 831 | 832 | &.color1 {.page-color(@color1b,@color1c);} 833 | &.color2 {.page-color(@color2b,@color2c);} 834 | &.color3 {.page-color(@color3b,@color3c);} 835 | &.color4 {.page-color(@color4b,@color4c);} 836 | 837 | > .disabled { 838 | > span, 839 | > a, 840 | > a:hover, 841 | > a:focus { 842 | color:inherit; 843 | background-color:inherit; 844 | .opacity(.5); 845 | } 846 | } 847 | } 848 | 849 | //thumbnail 850 | 851 | .thumbnail, 852 | .img-thumbnail { 853 | border: 1px solid transparent; 854 | 855 | .thumbnail-color(@color) { 856 | background-color:@color; 857 | 858 | .caption { 859 | .contrast(@color); 860 | } 861 | } 862 | 863 | .thumbnail-color(@color1b); 864 | 865 | &.color1 {.thumbnail-color(@color1b);} 866 | &.color2 {.thumbnail-color(@color2b);} 867 | &.color3 {.thumbnail-color(@color3b);} 868 | &.color4 {.thumbnail-color(@color4b);} 869 | } 870 | 871 | //form 872 | 873 | .form-horizontal { 874 | font-size:18px; 875 | } 876 | 877 | legend { 878 | .contrast(@1pxdeep-bg); 879 | } 880 | 881 | .help-block { 882 | .contrast(@1pxdeep-bg); 883 | } 884 | 885 | .form-color(@color) { 886 | legend { 887 | .contrast(@color); 888 | } 889 | 890 | .help-block { 891 | .contrast(@color); 892 | } 893 | } 894 | 895 | .color1 { 896 | .form-color(@color1); 897 | } 898 | 899 | //input group 900 | 901 | .input-group { 902 | position: relative; // For dropdowns 903 | display: table; 904 | border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table 905 | 906 | // Undo padding and float of grid classes 907 | &.col { 908 | float: none; 909 | padding-left: 0; 910 | padding-right: 0; 911 | } 912 | 913 | .form-control { 914 | width: 100%; 915 | margin-bottom: 0; 916 | } 917 | } 918 | 919 | .input-group-addon { 920 | border: none; 921 | border-radius: @border-radius-base; 922 | 923 | .input-group-addon-color(@color) { 924 | background:@color; 925 | .contrast(@color); 926 | } 927 | 928 | .input-group-addon-color(@color1b); 929 | 930 | &.color1 {.input-group-addon-color(@color1b)} 931 | 932 | } 933 | 934 | //code 935 | 936 | code, pre { 937 | font-size:14px; 938 | text-shadow:none; 939 | 940 | .code-color(@color) { 941 | background:@color; 942 | .contrast(@color); 943 | border-color:@color; 944 | } 945 | 946 | .code-color(@color1c); 947 | 948 | &.color1 { .code-color(@color1b)} 949 | &.color2 { .code-color(@color2b)} 950 | &.color3 { .code-color(@color3b)} 951 | &.color4 { .code-color(@color4b)} 952 | } 953 | 954 | //labels and badges 955 | 956 | .label, .badge { 957 | .label-color(@color) { 958 | background:@color; 959 | .contrast(@color); 960 | text-shadow:none; 961 | } 962 | 963 | .label-color(@color1a); 964 | 965 | &.color1 { .label-color(@color1);} 966 | &.color2 { .label-color(@color2);} 967 | &.color3 { .label-color(@color3);} 968 | &.color4 { .label-color(@color4);} 969 | 970 | &.label-success { .label-color(@brand-success);} 971 | &.label-info { .label-color(@brand-info);} 972 | &.label-warning { .label-color(@brand-warning);} 973 | &.label-danger { .label-color(@brand-danger);} 974 | } 975 | 976 | //nav tabs 977 | 978 | .nav-tabs { 979 | > li { 980 | > a { 981 | border: none; 982 | 983 | &:hover { 984 | border:none; 985 | } 986 | } 987 | 988 | &.active > a { 989 | &, 990 | &:hover, 991 | &:focus { 992 | border:none; 993 | } 994 | } 995 | } 996 | 997 | .nav-tabs-color(@color) { 998 | border-bottom:2px solid @color; 999 | 1000 | > li { 1001 | 1002 | > a { 1003 | &:hover { 1004 | background:lighten(@color,2%); 1005 | } 1006 | } 1007 | 1008 | &.active > a { 1009 | &, 1010 | &:hover, 1011 | &:focus { 1012 | .contrast(@color); 1013 | background-color:@color; 1014 | } 1015 | } 1016 | } 1017 | } 1018 | 1019 | .nav-tabs-color(@color1c); 1020 | 1021 | &.color1 { .nav-tabs-color(@color1a);} 1022 | &.color2 { .nav-tabs-color(@color2a);} 1023 | &.color3 { .nav-tabs-color(@color3a);} 1024 | &.color4 { .nav-tabs-color(@color4a);} 1025 | 1026 | 1027 | } 1028 | 1029 | //table 1030 | 1031 | table { 1032 | max-width: 100%; 1033 | text-shadow:none; 1034 | border-collapse: collapse; 1035 | border-spacing: 0; 1036 | border-color:transparent; 1037 | border-radius:@border-radius-base; 1038 | 1039 | thead, 1040 | tbody, 1041 | tfoot { 1042 | > tr { 1043 | > th, 1044 | > td { 1045 | border-top:none; 1046 | } 1047 | } 1048 | } 1049 | 1050 | tbody + tbody { 1051 | border-top: none; 1052 | } 1053 | 1054 | .table-color(@color) { 1055 | background-color:@color; 1056 | .contrast(@color); 1057 | 1058 | &.table { 1059 | th, 1060 | td { 1061 | border-top-color: @color; 1062 | } 1063 | tbody + tbody { 1064 | border-top-color:@color; 1065 | } 1066 | } 1067 | 1068 | &.table-bordered { 1069 | border:none; 1070 | } 1071 | 1072 | &.table-striped { 1073 | .table-striped-color(darken(@color,5%)); 1074 | } 1075 | 1076 | .table-striped-color(@color) { 1077 | tbody { 1078 | > tr:nth-child(odd) > td, 1079 | > tr:nth-child(odd) > th { 1080 | background-color:darken(@color,1%); 1081 | } 1082 | } 1083 | } 1084 | 1085 | .table-striped-color (@color) when (luma(@color) > @luma-upper-break) { 1086 | tbody { 1087 | > tr:nth-child(odd) > td, 1088 | > tr:nth-child(odd) > th { 1089 | background-color:darken(@color,1%); 1090 | } 1091 | } 1092 | } 1093 | 1094 | .table-striped-color (@color) when (luma(@color) < @luma-lower-break) { 1095 | tbody { 1096 | > tr:nth-child(odd) > td, 1097 | > tr:nth-child(odd) > th { 1098 | background-color:lighten(@color,1%); 1099 | } 1100 | } 1101 | } 1102 | 1103 | &.table-hover { 1104 | tbody { 1105 | tr:hover > td, 1106 | tr:hover > th { 1107 | background-color: lighten(@color,5%); 1108 | } 1109 | } 1110 | } 1111 | } 1112 | 1113 | .table-color(@color1b); 1114 | 1115 | &.color1 { .table-color(@color1b);} 1116 | &.color2 { .table-color(@color2b);} 1117 | &.color3 { .table-color(@color3b);} 1118 | &.color4 { .table-color(@color4b);} 1119 | } 1120 | 1121 | //hr 1122 | 1123 | hr { 1124 | .hr-color(@color) { 1125 | background:@color; 1126 | color:@color; 1127 | border-color:@color; 1128 | } 1129 | 1130 | .hr-color(color1c); 1131 | &.color1 {.hr-color(@color1c);} 1132 | &.color2 {.hr-color(@color2c);} 1133 | &.color3 {.hr-color(@color3c);} 1134 | &.color4 {.hr-color(@color4c);} 1135 | } 1136 | 1137 | //page header 1138 | 1139 | .page-header { 1140 | border-width:2px; 1141 | 1142 | .page-header-color(@color) { 1143 | border-color:@color; 1144 | .contrast(@1pxdeep-bg); 1145 | 1146 | small { 1147 | .contrast(@1pxdeep-bg); 1148 | } 1149 | } 1150 | 1151 | .page-header-color(@color1c); 1152 | &.color1 {.page-header-color(@color1c);} 1153 | &.color2 {.page-header-color(@color2c);} 1154 | &.color3 {.page-header-color(@color3c);} 1155 | &.color4 {.page-header-color(@color4c);} 1156 | } 1157 | 1158 | //modal 1159 | 1160 | .modal-dialog { 1161 | padding-right:0; 1162 | padding-left:0; 1163 | width:100%; 1164 | } 1165 | 1166 | .modal-content { 1167 | .box-shadow(none); 1168 | border:none; 1169 | background:none; 1170 | width:100%; 1171 | } 1172 | 1173 | .modal-header { 1174 | border:none; 1175 | width:60%; 1176 | margin-left:20%; 1177 | padding-left:0; 1178 | padding-right:0; 1179 | 1180 | > .close { 1181 | .contrast(@modal-backdrop-bg); 1182 | margin-top:0; 1183 | .opacity(1); 1184 | padding:14px; //more touch-friendly 1185 | position:relative; 1186 | top:-12px; 1187 | right:-14px; 1188 | } 1189 | } 1190 | 1191 | .modal-title { 1192 | .contrast(@modal-backdrop-bg); 1193 | //text-shadow:none; 1194 | margin-left:0; 1195 | } 1196 | 1197 | .modal-body { 1198 | border-radius:0; 1199 | width:100%; 1200 | padding-left:20%; 1201 | padding-right:20%; 1202 | margin:0; 1203 | 1204 | .modal-body-color(@color) { 1205 | background:@color; 1206 | .contrast(@color); 1207 | } 1208 | 1209 | .modal-body-color(@color1); 1210 | 1211 | &.color1 { .modal-body-color(@color1);} 1212 | &.color1a { .modal-body-color(@color1a);} 1213 | &.color1b { .modal-body-color(@color1b);} 1214 | &.color1c { .modal-body-color(@color1c);} 1215 | &.color2 { .modal-body-color(@color2);} 1216 | &.color2a { .modal-body-color(@color2a);} 1217 | &.color2b { .modal-body-color(@color2b);} 1218 | &.color2c { .modal-body-color(@color2c);} 1219 | &.color3 { .modal-body-color(@color3);} 1220 | &.color3a { .modal-body-color(@color3a);} 1221 | &.color3b { .modal-body-color(@color3b);} 1222 | &.color3c { .modal-body-color(@color3c);} 1223 | &.color4 { .modal-body-color(@color4);} 1224 | &.color4a { .modal-body-color(@color4a);} 1225 | &.color4b { .modal-body-color(@color4b);} 1226 | &.color4c { .modal-body-color(@color4c);} 1227 | } 1228 | 1229 | .modal-footer { 1230 | background:transparent; 1231 | margin-top:0; 1232 | border:none; 1233 | width:60%; 1234 | margin-left:20%; 1235 | padding-left:0; 1236 | padding-right:0; 1237 | } 1238 | 1239 | .modal-backdrop { 1240 | background-color: @modal-backdrop-bg; 1241 | &.fade { .opacity(0); } 1242 | &.in { .opacity(1); } 1243 | 1244 | &:before { 1245 | display:block; 1246 | content:""; 1247 | background:@modal-backdrop-bg; 1248 | width:100%; 1249 | height:50%; 1250 | position:absolute; 1251 | top:0; 1252 | left:0; 1253 | } 1254 | } 1255 | 1256 | .close { 1257 | text-shadow:none; 1258 | } 1259 | 1260 | @media screen and (max-width: @screen-tablet) { 1261 | 1262 | .modal-header, .modal-footer { 1263 | margin-left:4%; 1264 | margin-right:4%; 1265 | width:92%; 1266 | } 1267 | 1268 | .modal-body { 1269 | padding-left:4%; 1270 | padding-right:4%; 1271 | } 1272 | 1273 | } 1274 | 1275 | //panel 1276 | .panel { 1277 | border:none; 1278 | .box-shadow(none); 1279 | 1280 | .panel-color(@color) { 1281 | background:@color; 1282 | .contrast(@color); 1283 | } 1284 | 1285 | .panel-color(@color1c); 1286 | 1287 | &.color1 { .panel-color(@color1);} 1288 | &.color1a { .panel-color(@color1a);} 1289 | &.color1b { .panel-color(@color1b);} 1290 | &.color1c { .panel-color(@color1c);} 1291 | &.color2 { .panel-color(@color2);} 1292 | &.color2a { .panel-color(@color2a);} 1293 | &.color2b { .panel-color(@color2b);} 1294 | &.color2c { .panel-color(@color2c);} 1295 | &.color3 { .panel-color(@color3);} 1296 | &.color3a { .panel-color(@color3a);} 1297 | &.color3b { .panel-color(@color3b);} 1298 | &.color3c { .panel-color(@color3c);} 1299 | &.color4 { .panel-color(@color4);} 1300 | &.color4a { .panel-color(@color4a);} 1301 | &.color4b { .panel-color(@color4b);} 1302 | &.color4c { .panel-color(@color4c);} 1303 | } 1304 | 1305 | .panel-heading, .panel-footer { 1306 | border:none; 1307 | 1308 | } 1309 | 1310 | .panel-body { 1311 | padding-bottom:0; 1312 | } 1313 | 1314 | .panel-footer { 1315 | padding-bottom:15px; 1316 | } 1317 | 1318 | .panel-heading, .panel-body, .panel-footer { 1319 | 1320 | .panel-heading-color(@color) { 1321 | background:@color; 1322 | .contrast(@color); 1323 | } 1324 | 1325 | .panel-heading-color(@color1c); 1326 | 1327 | &.color1 { .panel-heading-color(@color1);} 1328 | &.color1a { .panel-heading-color(@color1a);} 1329 | &.color1b { .panel-heading-color(@color1b);} 1330 | &.color1c { .panel-heading-color(@color1c);} 1331 | &.color2 { .panel-heading-color(@color2);} 1332 | &.color2a { .panel-heading-color(@color2a);} 1333 | &.color2b { .panel-heading-color(@color2b);} 1334 | &.color2c { .panel-heading-color(@color2c);} 1335 | &.color3 { .panel-heading-color(@color3);} 1336 | &.color3a { .panel-heading-color(@color3a);} 1337 | &.color3b { .panel-heading-color(@color3b);} 1338 | &.color3c { .panel-heading-color(@color3c);} 1339 | &.color4 { .panel-heading-color(@color4);} 1340 | &.color4a { .panel-heading-color(@color4a);} 1341 | &.color4b { .panel-heading-color(@color4b);} 1342 | &.color4c { .panel-heading-color(@color4c);} 1343 | } 1344 | 1345 | //carousel 1346 | 1347 | .carousel-control { 1348 | &.left { 1349 | background:transparent; 1350 | } 1351 | 1352 | &.right { 1353 | left: auto; 1354 | right: 0; 1355 | background:transparent; 1356 | } 1357 | 1358 | .icon-nav-defaults() { 1359 | @size:44px; 1360 | font-size:@size; 1361 | line-height:@size; 1362 | text-shadow:none; 1363 | font-weight:bold; 1364 | } 1365 | 1366 | .icon-prev { 1367 | &:before { 1368 | content: '\00ab';// DOUBLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) 1369 | .icon-nav-defaults(); 1370 | } 1371 | } 1372 | 1373 | .icon-next { 1374 | &:before { 1375 | content: '\00bb';// DOUBLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) 1376 | .icon-nav-defaults(); 1377 | } 1378 | } 1379 | } 1380 | 1381 | .carousel-indicators { 1382 | @size:24px; 1383 | @border-radius:2px; 1384 | 1385 | li { 1386 | width: (@size - @border-radius); 1387 | height: (@size - @border-radius); 1388 | border-radius: @size; 1389 | margin:@border-radius; 1390 | } 1391 | 1392 | .active { 1393 | width: (@size + @border-radius); 1394 | height: (@size + @border-radius); 1395 | } 1396 | 1397 | .carousel-indicators-color(@color) { 1398 | li { 1399 | border: @border-radius solid @color; 1400 | } 1401 | 1402 | .active { 1403 | background-color:@color; 1404 | } 1405 | } 1406 | 1407 | .carousel-indicators-color(@color1c); 1408 | 1409 | &.color1{ .carousel-indicators-color(@color1c);} 1410 | &.color2{ .carousel-indicators-color(@color2c);} 1411 | &.color3{ .carousel-indicators-color(@color3c);} 1412 | &.color4{ .carousel-indicators-color(@color4c);} 1413 | } 1414 | 1415 | //list groups 1416 | 1417 | .list-group { 1418 | background:transparent; 1419 | } 1420 | 1421 | .list-group-item { 1422 | .list-group-item-color(@color,@active-color) { 1423 | 1424 | background:@color; 1425 | .contrast(@color); 1426 | border-color:darken(@color,4%); 1427 | 1428 | a& { 1429 | .contrast(@color); 1430 | 1431 | &:hover, 1432 | &:focus { 1433 | background-color: lighten(@color,2%); 1434 | } 1435 | 1436 | > .list-group-item-heading { 1437 | .contrast(@color); 1438 | } 1439 | } 1440 | 1441 | &.active, 1442 | &.active:hover, 1443 | &.active:focus { 1444 | .contrast(@active-color); 1445 | background-color: @active-color; 1446 | .btn-borders(@active-color); 1447 | 1448 | .list-group-item-text { 1449 | color: lighten(@active-color, 40%); 1450 | } 1451 | } 1452 | } 1453 | 1454 | .list-group-item-color(@color1b,@color1c); 1455 | 1456 | &.color1 { .list-group-item-color(@color1b,@color1c);} 1457 | &.color2 { .list-group-item-color(@color2b,@color2c);} 1458 | &.color3 { .list-group-item-color(@color3b,@color3c);} 1459 | &.color4 { .list-group-item-color(@color4b,@color4c);} 1460 | } 1461 | 1462 | // sectionals 1463 | .sectional { 1464 | position:relative; 1465 | padding-top:90px; 1466 | padding-bottom:90px; 1467 | 1468 | .sectional-title { 1469 | position:absolute; 1470 | top:12px; 1471 | width:100%; 1472 | text-align:center; 1473 | text-transform:uppercase; 1474 | font-size:14px; 1475 | .opacity(.65); 1476 | } 1477 | 1478 | .sectional-color(@color) { 1479 | background:@color; 1480 | .contrast(@color); 1481 | } 1482 | 1483 | .sectional-color(@1pxdeep-bg); 1484 | 1485 | &.monochrome {.sectional-color(greyscale(@color1));} 1486 | &.highlight {.sectional-color(lighten(@1pxdeep-bg,6%));} 1487 | 1488 | &.color1 {.sectional-color(@color1);} 1489 | &.color1a {.sectional-color(@color1a);} 1490 | &.color1b {.sectional-color(@color1b);} 1491 | &.color1c {.sectional-color(@color1c);} 1492 | &.color2 {.sectional-color(@color2);} 1493 | &.color2a {.sectional-color(@color2a);} 1494 | &.color2b {.sectional-color(@color2b);} 1495 | &.color2c {.sectional-color(@color2c);} 1496 | &.color3 {.sectional-color(@color3);} 1497 | &.color3a {.sectional-color(@color3a);} 1498 | &.color3b {.sectional-color(@color3b);} 1499 | &.color3c {.sectional-color(@color3c);} 1500 | &.color4 {.sectional-color(@color4);} 1501 | &.color4a {.sectional-color(@color4a);} 1502 | &.color4b {.sectional-color(@color4b);} 1503 | &.color4c {.sectional-color(@color4c);} 1504 | } 1505 | 1506 | //well headline fix 1507 | 1508 | .well { 1509 | h1,h2,h3,h4,h5,h6 { 1510 | &:first-child { 1511 | margin-top:0; 1512 | } 1513 | } 1514 | } 1515 | 1516 | --------------------------------------------------------------------------------