Statistics
| Branch: | Tag: | Revision:

root / snf-astakos-app / astakos / im / static / im / less / scaffolding.less @ 27993be5

History | View | Annotate | Download (3 kB)

1
/*
2
 * Scaffolding
3
 * Basic and global styles for generating a grid system, structural layout, and page templates
4
 * ------------------------------------------------------------------------------------------- */
5

    
6

    
7
// STRUCTURAL LAYOUT
8
// -----------------
9

    
10
body {
11
  background-color: @white;
12
  margin: 0;
13
  #font > .sans-serif(normal,@basefont,@baseline);
14
  color: @grayDark;
15
}
16

    
17
// Container (centered, fixed-width layouts)
18
.container {
19
  .fixed-container();
20
}
21

    
22
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
23
.container-fluid {
24
  position: relative;
25
  min-width: 940px;
26
  padding-left: 20px;
27
  padding-right: 20px;
28
  .clearfix();
29
  > .sidebar {
30
    position: absolute;
31
    top: 0;
32
    left: 20px;
33
    width: 220px;
34
  }
35
  // TODO in v2: rename this and .popover .content to be more specific
36
  > .content {
37
    margin-left: 240px;
38
  }
39
}
40

    
41

    
42
// BASE STYLES
43
// -----------
44

    
45
// Links
46
a {
47
  color: @linkColor;
48
  text-decoration: none;
49
  line-height: inherit;
50
  font-weight: inherit;
51
  &:hover {
52
    color: @linkColorHover;
53
    text-decoration: underline;
54
  }
55
}
56

    
57
// Quick floats
58
.pull-right {
59
  float: right;
60
}
61
.pull-left {
62
  float: left;
63
}
64

    
65
// Toggling content
66
.hide {
67
  display: none;
68
}
69
.show {
70
  display: block;
71
}
72

    
73

    
74
// GRID SYSTEM
75
// -----------
76
// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
77

    
78
.row {
79
  .clearfix();
80
  margin-left: -@gridGutterWidth;
81
}
82

    
83
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7)
84
// Credit to @dhg for the idea
85
.row > [class*="span"] {
86
  .gridColumn();
87
}
88

    
89
// Default columns
90
.span1     { .columns(1); }
91
.span2     { .columns(2); }
92
.span3     { .columns(3); }
93
.span4     { .columns(4); }
94
.span5     { .columns(5); }
95
.span6     { .columns(6); }
96
.span7     { .columns(7); }
97
.span8     { .columns(8); }
98
.span9     { .columns(9); }
99
.span10    { .columns(10); }
100
.span11    { .columns(11); }
101
.span12    { .columns(12); }
102
.span13    { .columns(13); }
103
.span14    { .columns(14); }
104
.span15    { .columns(15); }
105
.span16    { .columns(16); }
106

    
107
// For optional 24-column grid
108
.span17    { .columns(17); }
109
.span18    { .columns(18); }
110
.span19    { .columns(19); }
111
.span20    { .columns(20); }
112
.span21    { .columns(21); }
113
.span22    { .columns(22); }
114
.span23    { .columns(23); }
115
.span24    { .columns(24); }
116

    
117
// Offset column options
118
.row {
119
  > .offset1   { .offset(1); }
120
  > .offset2   { .offset(2); }
121
  > .offset3   { .offset(3); }
122
  > .offset4   { .offset(4); }
123
  > .offset5   { .offset(5); }
124
  > .offset6   { .offset(6); }
125
  > .offset7   { .offset(7); }
126
  > .offset8   { .offset(8); }
127
  > .offset9   { .offset(9); }
128
  > .offset10  { .offset(10); }
129
  > .offset11  { .offset(11); }
130
  > .offset12  { .offset(12); }
131
}
132

    
133
// Unique column sizes for 16-column grid
134
.span-one-third     { width: 300px; }
135
.span-two-thirds    { width: 620px; }
136
.row {
137
  > .offset-one-third   { margin-left: 340px; }
138
  > .offset-two-thirds  { margin-left: 660px; }
139
}