vanta/src/skeleton.less at master · tengbao/vanta · GitHub

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
@percentage-offset: -0.45%;
@margin: 1.25%;

.skeleton-percentage-columns() {
  .container { position: relative; width:100%; margin: 0 auto; padding: 0; }
  .container .column, .container .columns {
    float: left; display: inline; margin-left: @margin; margin-right: @margin;
    &.clear { clear: both; }
    &.right { float: right; }
    &.no-float {
      display:inline-block;
      vertical-align:top; float:none; zoom:1;
    }
  }
  // .row                              { margin-bottom: 4.16666667%; }

  /* Nested Column Classes */
  .column.alpha, .columns.alpha     { margin-left: 0; }
  .column.omega, .columns.omega     { margin-right: 0; }

  .container .sixteen.columns.alpha.omega { width: 100%; }

  /* Base Grid */
  .container .one.column,
  .container .one.columns           { width: 4.16666666% + @percentage-offset; }
  .container .two.columns           { width: 10.4166666% + @percentage-offset; }
  .container .three.columns         { width: 16.6666666% + @percentage-offset; }
  .container .four.columns          { width: 22.9166666% + @percentage-offset; }
  .container .five.columns          { width: 29.1666666% + @percentage-offset; }
  .container .six.columns           { width: 35.4166666% + @percentage-offset; }
  .container .seven.columns         { width: 41.6666666% + @percentage-offset; }
  .container .eight.columns         { width: 47.9166666% + @percentage-offset; }
  .container .nine.columns          { width: 54.1666666% + @percentage-offset; }
  .container .ten.columns           { width: 60.4166666% + @percentage-offset; }
  .container .eleven.columns        { width: 66.6666666% + @percentage-offset; }
  .container .twelve.columns        { width: 72.9166666% + @percentage-offset; }
  .container .thirteen.columns      { width: 79.1666666% + @percentage-offset; }
  .container .fourteen.columns      { width: 85.4166666% + @percentage-offset; }
  .container .fifteen.columns       { width: 91.6666666% + @percentage-offset; }
  .container .sixteen.columns       { width: 97.9166666% + @percentage-offset; }

  .container .third.column,
  .container .third.columns         { width: 30.80%; }
  .container .two-thirds.column     { width: 64.58333333333333% + @percentage-offset; }

  /* Offsets */
  .container .offset-one            { padding-left: 6.25%;  }
  .container .offset-two            { padding-left: 12.5%; }
  .container .offset-three          { padding-left: 18.75%; }
  .container .offset-four           { padding-left: 25%; }
  .container .offset-five           { padding-left: 31.25%; }
  .container .offset-six            { padding-left: 37.5%; }
  .container .offset-seven          { padding-left: 43.75%; }
  .container .offset-eight          { padding-left: 50%; }
  .container .offset-nine           { padding-left: 56.25%; }
  .container .offset-ten            { padding-left: 62.5%; }
  .container .offset-eleven         { padding-left: 68.75%; }
  .container .offset-twelve         { padding-left: 75%; }
  .container .offset-thirteen       { padding-left: 81.25%; }
  .container .offset-fourteen       { padding-left: 87.5%; }
  .container .offset-fifteen        { padding-left: 93.75%; }

  .container .offset-one.right            { padding-left: 0; padding-right: 6.25%;  }
  .container .offset-two.right            { padding-left: 0; padding-right: 12.5%; }
  .container .offset-three.right          { padding-left: 0; padding-right: 18.75%; }
  .container .offset-four.right           { padding-left: 0; padding-right: 25%; }
  .container .offset-five.right           { padding-left: 0; padding-right: 31.25%; }
  .container .offset-six.right            { padding-left: 0; padding-right: 37.5%; }
  .container .offset-seven.right          { padding-left: 0; padding-right: 43.75%; }
  .container .offset-eight.right          { padding-left: 0; padding-right: 50%; }
  .container .offset-nine.right           { padding-left: 0; padding-right: 56.25%; }
  .container .offset-ten.right            { padding-left: 0; padding-right: 62.5%; }
  .container .offset-eleven.right         { padding-left: 0; padding-right: 68.75%; }
  .container .offset-twelve.right         { padding-left: 0; padding-right: 75%; }
  .container .offset-thirteen.right       { padding-left: 0; padding-right: 81.25%; }
  .container .offset-fourteen.right       { padding-left: 0; padding-right: 87.5%; }
  .container .offset-fifteen.right        { padding-left: 0; padding-right: 93.75%; }

  .half-offset-left                 { padding-left: 6.25% * 0.5; }
  .half-offset-right                { padding-right: 6.25% * 0.5; }
}

.skeleton-percentage-fixed() {
  .container                        { position: relative; width:100%; margin: 0 auto; padding: 0; }
  .container .column,
  .container .columns               { float: left; display: inline; margin-left: 2.5%; margin-right: 2.5%; }
  // .row                              { margin-bottom: 4.16666667%; }

  /* Nested Column Classes */
  .column.alpha, .columns.alpha     { margin-left: 0; }
  .column.omega, .columns.omega     { margin-right: 0; }

  .container .sixteen.columns.alpha.omega { width: 100%; }

  /* Base Grid */
  .container .one.column,
  .container .one.columns,
  .container .two.columns,
  .container .three.columns,
  .container .four.columns,
  .container .five.columns,
  .container .six.columns,
  .container .seven.columns,
  .container .eight.columns,
  .container .nine.columns,
  .container .ten.columns,
  .container .eleven.columns,
  .container .twelve.columns,
  .container .thirteen.columns,
  .container .fourteen.columns,
  .container .fifteen.columns,
  .container .sixteen.columns,

  .container .third.column,
  .container .third.columns,
  .container .two-thirds.column     { width: 95%; }

  .container .column.half-fixed,
  .container .one.column.half-fixed,
  .container .one.columns.half-fixed,
  .container .two.columns.half-fixed,
  .container .three.columns.half-fixed,
  .container .four.columns.half-fixed,
  .container .five.columns.half-fixed,
  .container .six.columns.half-fixed,
  .container .seven.columns.half-fixed,
  .container .eight.columns.half-fixed,
  .container .nine.columns.half-fixed,
  .container .ten.columns.half-fixed,
  .container .eleven.columns.half-fixed,
  .container .twelve.columns.half-fixed,
  .container .thirteen.columns.half-fixed,
  .container .fourteen.columns.half-fixed,
  .container .fifteen.columns.half-fixed,
  .container .sixteen.columns.half-fixed,

  .container .third.column.half-fixed,
  .container .third.columns.half-fixed,
  .container .two-thirds.half-fixed.column     {
    width: 45% + @percentage-offset;
    display:inline-block;
    vertical-align:top; float:none; zoom:1;
  }

  /* Offsets */
  .container .offset-one,
  .container .offset-two,
  .container .offset-three,
  .container .offset-four,
  .container .offset-five,
  .container .offset-six,
  .container .offset-seven,
  .container .offset-eight,
  .container .offset-nine,
  .container .offset-ten,
  .container .offset-eleven,
  .container .offset-twelve,
  .container .offset-thirteen,
  .container .offset-fourteen,
  .container .offset-fifteen        { padding-left: 0; }

  .container .offset-one.right,
  .container .offset-two.right,
  .container .offset-three.right,
  .container .offset-four.right,
  .container .offset-five.right,
  .container .offset-six.right,
  .container .offset-seven.right,
  .container .offset-eight.right,
  .container .offset-nine.right,
  .container .offset-ten.right,
  .container .offset-eleven.right,
  .container .offset-twelve.right,
  .container .offset-thirteen.right,
  .container .offset-fourteen.right,
  .container .offset-fifteen.right        { padding-right: 0; }

  .half-offset-left { padding-left: 0; }
  .half-offset-right { padding-right: 0; }
}

@media only screen and (min-width: 728px) {
  .skeleton-percentage-columns();
}
@media only screen and (max-width: 727px) {
  .skeleton-percentage-fixed();
}