quasar/src/css/core/flex.styl at v0.17 · 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
fr(selector, name, i = '')
  unquote(replace(unquote('<i>'), unquote(i), replace(unquote('<name>'), unquote(name), unquote(selector))))

fe(selector, name, noProc, i = '')
  if noProc
    return fr(selector, name, i)
  return unquote(join(',', fr(selector, '', i) fr(selector, name, i)))

fg($name, $size)
  $noProcNotZero = $size > 0
  @media (min-width $size)
    {fe('.col<name>', $name, $noProcNotZero)}
      &, &-auto, &-grow
        .row > &, .flex > &
          width auto
          min-width 0
          max-width 100%
        .column > &, .flex > &
          height auto
          min-height 0
          max-height 100%
      &
        flex 10**4 1 0%
      &-auto
        flex 0 0 auto
      &-grow
        flex 1 0 auto

    for $i in (0..$flex-cols)
      $ic = s('%s', $i)
      {fe('.col<name>-<i>', $name, $noProcNotZero, $ic)}
        @extend .col{$name}-auto
      .row
        {fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
          height auto
          width (round($i / $flex-cols * 100, 4))%
        if $i != 0 || $name != ''
          {fe('> .offset<name>-<i>', $name, $noProcNotZero, $ic)}
            margin-left (round($i / $flex-cols * 100, 4))%
      .column
        {fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
          height (round($i / $flex-cols * 100, 4))%
          width auto

.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

.order-
  &first
    order -10000
  &last
    order 10000
  &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
  &stretch
    align-content stretch
  &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 $name, $size in $flex-gutter
  .gutter-
    &x-{$name}
      margin-left (- $size)
      > div
        padding-left $size
    &y-{$name}
      margin-top (- $size)
      > div
        padding-top $size
    &{$name}
      @extends .gutter-x-{$name}, .gutter-y-{$name}
      > div
        @extends .gutter-x-{$name} > div, .gutter-y-{$name} > div

for $name, $size in $sizes
  fg(s('-%s', unquote($name)), $size)