Blame view

WebRoot/static/ace/css/less/bootstrap/mixins/grid.less 4.13 KB
ad5081d3   孙向锦   初始化项目
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
  // Grid system
  //
  // Generate semantic grid columns with these mixins.
  
  // Centered container element
  .container-fixed(@gutter: @grid-gutter-width) {
    margin-right: auto;
    margin-left: auto;
    padding-left:  (@gutter / 2);
    padding-right: (@gutter / 2);
    &:extend(.clearfix all);
  }
  
  // Creates a wrapper for a series of columns
  .make-row(@gutter: @grid-gutter-width) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
    &:extend(.clearfix all);
  }
  
  // Generate the extra small columns
  .make-xs-column(@columns; @gutter: @grid-gutter-width) {
    position: relative;
    float: left;
    width: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
    min-height: 1px;
    padding-left:  (@gutter / 2);
    padding-right: (@gutter / 2);
  }
  .make-xs-column-offset(@columns) {
    margin-left: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
  }
  .make-xs-column-push(@columns) {
    left: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
  }
  .make-xs-column-pull(@columns) {
    right: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
  }
  
  // Generate the small columns
  .make-sm-column(@columns; @gutter: @grid-gutter-width) {
    position: relative;
    min-height: 1px;
    padding-left:  (@gutter / 2);
    padding-right: (@gutter / 2);
  
    @media (min-width: @screen-sm-min) {
      float: left;
      width: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
    }
  }
  .make-sm-column-offset(@columns) {
    @media (min-width: @screen-sm-min) {
      margin-left: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
    }
  }
  .make-sm-column-push(@columns) {
    @media (min-width: @screen-sm-min) {
      left: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
    }
  }
  .make-sm-column-pull(@columns) {
    @media (min-width: @screen-sm-min) {
      right: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
    }
  }
  
  // Generate the medium columns
  .make-md-column(@columns; @gutter: @grid-gutter-width) {
    position: relative;
    min-height: 1px;
    padding-left:  (@gutter / 2);
    padding-right: (@gutter / 2);
  
    @media (min-width: @screen-md-min) {
      float: left;
      width: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
    }
  }
  .make-md-column-offset(@columns) {
    @media (min-width: @screen-md-min) {
      margin-left: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
    }
  }
  .make-md-column-push(@columns) {
    @media (min-width: @screen-md-min) {
      left: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
    }
  }
  .make-md-column-pull(@columns) {
    @media (min-width: @screen-md-min) {
      right: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
    }
  }
  
  // Generate the large columns
  .make-lg-column(@columns; @gutter: @grid-gutter-width) {
    position: relative;
    min-height: 1px;
    padding-left:  (@gutter / 2);
    padding-right: (@gutter / 2);
  
    @media (min-width: @screen-lg-min) {
      float: left;
      width: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
    }
  }
  .make-lg-column-offset(@columns) {
    @media (min-width: @screen-lg-min) {
      margin-left: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
    }
  }
  .make-lg-column-push(@columns) {
    @media (min-width: @screen-lg-min) {
      left: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
    }
  }
  .make-lg-column-pull(@columns) {
    @media (min-width: @screen-lg-min) {
      right: ~`(""+((@{columns} / @{grid-columns}) * 100)).substring(0, (@{columns} / @{grid-columns} < 0.1 ? 5 : 6))+"%"`;
    }
  }