quasar/src/css/core/flex.styl at v0.14 · hipertracker/quasar · 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
.row, .column, .flex
  display flex
  flex-wrap wrap
  &.inline
    display inline-flex

.row.reverse
  flex-direction row-reverse

.column
  flex-direction column
  &.reverse
    flex-direction column-reverse

.wrap
  flex-wrap wrap
.no-wrap
  flex-wrap nowrap
.reverse-wrap
  flex-wrap wrap-reverse

.col
  flex-basis 0
  flex-grow 1
  min-height 1px

.row
  > .col
    max-width 100%
    width 100%

for $name, $size in $sizes
  .row > .col-{$name}
    width 100%
  .col-{$name}
    min-height 1px
  for $i in (1..$flex-cols)
    .row > .col-{$name}-{$i}
      width 100%
    .col-{$name}-{$i}
      min-height 1px

.row > .col-auto
  width auto
.col-auto
  flex 0 0 auto
.col-grow
  flex 1 1 auto

.order-first
  order -10000
.order-last
  order 10000
.order-none
  order 0

.justify-
  &start
    justify-content flex-start
  &end
    justify-content flex-end
  &center
    justify-content center
  &between
    justify-content space-between
  &around
    justify-content space-around

.items-
  &start
    align-items flex-start
  &end
    align-items flex-end
  &center
    align-items center
  &baseline
    align-items baseline
  &stretch
    align-items stretch

.content-
  &start
    align-content flex-start
  &end
    align-content flex-end
  &center
    align-content center
  &between
    align-content space-between
  &around
    align-content space-around

.self-
  &start
    align-self flex-start
  &end
    align-self flex-end
  &center
    align-self center
  &baseline
    align-self baseline
  &stretch
    align-self stretch

.flex-center
  @extend .items-center
  @extend .justify-center

for $i in (1..$flex-cols)
  .col-{$i}
    flex 0 0 (round($i / $flex-cols * 100, 4))%
  .row > .col-{$i}
    max-width (round($i / $flex-cols * 100, 4))%
  .offset-{$i}
    margin-left (round($i / $flex-cols * 100, 4))%

for $name, $size in $flex-gutter
  .{$name}-gutter
    margin (- $size) 0 0 (- $size)
    > div
      padding $size 0 0 $size

.no-horiz-gutter
  margin-left 0
  > div
    padding-left 0

.no-vert-gutter
  margin-top 0
  > div
    padding-top 0

for $name, $size in $sizes
  @media (min-width $size)
    .col-{$name}
      max-width 100%
      flex-basis 0
      flex-grow 1
    .col-{$name}-auto
      width auto
      flex 0 0 auto

    for $i in (1..$flex-cols)
      .col-{$name}-{$i}
        flex 0 0 (round($i / $flex-cols * 100, 4))%
      .row > .col-{$name}-{$i}
        max-width (round($i / $flex-cols * 100, 4))%
      .offset-{$name}-{$i}
        margin-left (round($i / $flex-cols * 100, 4))%