Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
patterns.less 5.48 KiB
1 
/*
2 
	Patterns.less
3 
	Repeatable UI elements outside the base styles provided from the scaffolding
4 
*/
5
6
7 
/* Top bar
8 
-------------------------------------------------- */
9
10 
body {
11 
  padding-top: 60px;
12 
  background-position: 0 40px;
13 
}
14 
div.topbar {
15 
  #gradient > .vertical(#333, #222);
16 
  position: fixed;
17 
  top: 0;
18 
  left: 0;
19 
  right: 0;
20 
  z-index: 1000;
21 
  height: 40px;
22 
  .box-shadow(0 1px 3px rgba(0,0,0,.5));
23 
  a {
24 
    color: #999;
25 
    &:hover {
26 
      color: #fff;
27 
      text-decoration: none;
28 
      background-color: rgba(255,255,255,.05);
29 
    }
30 
  }
31 
  a#logo,
32 
  ul li a {
33 
    float: left;
34 
    padding: 0 10px;
35 
    line-height: 40px;
36 
  }
37 
  // Logo
38 
  a#logo {
39 
    margin-left: -10px;
40 
    margin-right: 10px;
41 
    color: @gray-light;
42 
    font-size: 20px;
43 
    font-weight: 200;
44 
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
45 
    img {
46 
      float: left;
47 
      margin-top: 9px;
48 
      margin-right: 6px;
49 
    }
50 
    span {
51 
    }
52 
  }
53 
  // Nav items
54 
  ul {
55 
    float: left;
56 
    margin: 0;
57 
    li {
58 
      display: inline;
59 
      a {
60
61 
      }
62 
      &.active a {
63 
        color: #fff;
64 
        background-color: rgba(0,0,0,.5);
65 
      }
66 
    }
67 
  }
68 
}
69
70 
/* Page Headers
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
-------------------------------------------------- */ div.page-header { margin-bottom: @baseline - 1; border-bottom: 1px solid #ddd; .border-radius(6px 6px 0 0); .box-shadow(0 1px 0 rgba(255,255,255,.5)); h1 { margin-bottom: 0; } } /* Error Styles -------------------------------------------------- */ // One-liner alert bars div.alert-message { #gradient > .vertical(transparent, rgba(0,0,0,0.15)); background-color: @gray-lighter; margin-bottom: @baseline; padding: 10px 15px 9px; .border-radius(6px); color: #fff; border-bottom: 1px solid rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.25); p { color: #fff; margin-bottom: 0; + p { margin-top: 5px; } } &.error { background-color: lighten(@red, 25%); } &.warning { background-color: lighten(@yellow, 15%); } &.success { background-color: lighten(@green, 15%); } &.info { background-color: lighten(@blue, 15%); } a.close { float: right; margin-top: -2px; opacity: .5; color: #fff; font-size: 20px; font-weight: bold; text-shadow: 0 1px 0 rgba(0,0,0,.5); .border-radius(3px); &:hover { opacity: 1; text-decoration: none; } } } // Block-level Alerts div.block-message { margin-bottom: @baseline; padding: 14px 19px; color: #333; color: rgba(0,0,0,.8); text-shadow: 0 1px 0 rgba(255,255,255,.25); .border-radius(6px); p {
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
font-size: 13px; line-height: 18px; color: #333; color: rgba(0,0,0,.8); margin-right: 30px; margin-bottom: 0; } ul { margin-bottom: 0; } strong { display: block; } a.close { display: block; color: #333; color: rgba(0,0,0,.5); text-shadow: 0 1px 1px rgba(255,255,255,.75); } &.error { background: lighten(@red, 55%); border: 1px solid lighten(@red, 50%); } &.warning { background: lighten(@yellow, 35%); border: 1px solid lighten(@yellow, 25%) } &.success { background: lighten(@green, 45%); border: 1px solid lighten(@green, 35%) } &.info { background: lighten(@blue, 45%); border: 1px solid lighten(@blue, 40%); } } /* Navigation -------------------------------------------------- */ // Common tab and pill styles ul.tabs, ul.pills { margin: 0 0 20px; padding: 0; .clearfix(); li { display: inline; a { display: inline; float: left; width: auto; } } } // Basic Tabs ul.tabs { width: 100%; border-bottom: 1px solid #ccc; li { a { margin-bottom: -1px; margin-right: 2px; padding: 0 15px; line-height: (@baseline * 2) - 1; .border-radius(3px 3px 0 0); &:hover { background: #f5f5f5; border-bottom: 1px solid #ccc;
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
} } &.active a { background: #fff; padding: 0 14px; border: 1px solid #ccc; border-bottom: 0; color: @gray; } } } // Basic pill nav ul.pills { li { a { margin: 5px 3px 5px 0; padding: 0 15px; text-shadow: 0 1px 1px #fff; line-height: 30px; .border-radius(15px); &:hover { background: @link-hover-color; color: #fff; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.25); } } &.active a { background: @link-color; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.25); } } } /* Pagination -------------------------------------------------- */ div.pagination { height: @baseline * 2; margin: @baseline 0; ul { float: left; margin: 0; border: 1px solid rgba(0,0,0,.15); .border-radius(3px); .box-shadow(0 1px 2px rgba(0,0,0,.075); li { display: inline; a { display: inline; float: left; padding: 0 14px; line-height: (@baseline * 2) - 2; border-right: 1px solid rgba(0,0,0,.15); text-decoration: none; } a:hover, &.active a { background-color: lighten(@blue, 45%); } &.disabled a, &.disabled a:hover { background-color: none; color: @gray-light; } &.next a, &:last-child a { border: 0;
281282283284285286287288289290291292293294295296297298299
} } } } /* Wells -------------------------------------------------- */ div.well { background: #f5f5f5; margin-bottom: 20px; padding: 19px; min-height: 20px; border: 1px solid #ddd; .border-radius(4px); .box-shadow(inset 0 1px 1px rgba(0,0,0,.075); }