Blame view

src/styles/mixins/layout.less 1.62 KB
7fa943eb   梁灏   init
1
2
3
4
  @row-prefix-cls: ~"@{css-prefix}row";
  @col-prefix-cls: ~"@{css-prefix}col";
  
  .make-row(@gutter: @grid-gutter-width) {
4dfacfca   梁灏   publish Tooltip c...
5
      position: relative;
7fa943eb   梁灏   init
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
      margin-left: (@gutter / -2);
      margin-right: (@gutter / -2);
      height: auto;
      .clearfix;
  }
  
  .float-grid-columns() {
      .col(@index) { // initial
          @item: ~".@{col-prefix-cls}-span-@{index}";
          .col((@index + 1), @item);
      }
      .col(@index, @list) when (@index =< @grid-columns) { // general
          @item: ~".@{col-prefix-cls}-span-@{index}";
          .col((@index + 1), ~"@{list}, @{item}");
      }
      .col(@index, @list) when (@index > @grid-columns) { // terminal
          @{list} {
              float: left;
              flex: 0 0 auto;
          }
      }
      .col(1); // kickstart it
  }
  
  .loop-grid-columns(@index) when (@index > 0) {
      .@{col-prefix-cls}-span-@{index} {
          display: block;
          width: percentage((@index / @grid-columns));
      }
      .@{col-prefix-cls}-push-@{index} {
          left: percentage((@index / @grid-columns));
      }
      .@{col-prefix-cls}-pull-@{index} {
          right: percentage((@index / @grid-columns));
      }
      .@{col-prefix-cls}-offset-@{index} {
          margin-left: percentage((@index / @grid-columns));
      }
      .@{col-prefix-cls}-order-@{index} {
          order: @index;
      }
      .loop-grid-columns((@index - 1));
  }
  
  .loop-grid-columns(@index) when (@index = 0) {
      .@{col-prefix-cls}-@{index} {
          display: none;
      }
      .@{col-prefix-cls}-push-@{index} {
          left: auto;
      }
      .@{col-prefix-cls}-pull-@{index} {
          right: auto;
      }
  }
  
  .make-grid() {
      .float-grid-columns();
      .loop-grid-columns(@grid-columns);
  }