Skip to content

Commit cae7faa

Browse files
rstoenescurstoenescu
committed
Merge branch 'dev' of github.com:quasarframework/quasar into dev
2 parents 62bb89b + 54e76ca commit cae7faa

File tree

4 files changed

+66
-32
lines changed

4 files changed

+66
-32
lines changed

‎quasar/dev/components/css/flex-addon.vue‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@
168168
<small class="pull-right q-px-xs text-orange gt-lg">XL</small>
169169
</h1>
170170
<div class="test-flex row" style="height: 300px;">
171-
<div class="col-1">
171+
<div class="col-1 full-height">
172172
<div class="column">
173173
<div class="col-3">
174174
.col-3
@@ -184,7 +184,7 @@
184184
</div>
185185
</div>
186186
</div>
187-
<div class="col-1">
187+
<div class="col-1 full-height">
188188
<div class="column">
189189
<div class="col-auto">
190190
.col-auto
@@ -208,7 +208,7 @@
208208
</div>
209209
</div>
210210
</div>
211-
<div class="col-1">
211+
<div class="col-1 full-height">
212212
<div class="column">
213213
<div class="col-auto">
214214
.col-auto
@@ -220,7 +220,7 @@
220220
</div>
221221
</div>
222222
</div>
223-
<div class="col-1">
223+
<div class="col-1 full-height">
224224
<div class="column">
225225
<div class="col-auto">
226226
.col-auto
@@ -236,7 +236,7 @@
236236
</div>
237237
</div>
238238
</div>
239-
<div class="col-2">
239+
<div class="col-2 full-height">
240240
<div class="column">
241241
<div class="col-auto">
242242
.col-auto
@@ -252,7 +252,7 @@
252252
</div>
253253
</div>
254254
</div>
255-
<div class="col-2">
255+
<div class="col-2 full-height">
256256
<div class="column">
257257
<div class="col-grow">
258258
.col-grow
@@ -264,7 +264,7 @@
264264
</div>
265265
</div>
266266
</div>
267-
<div class="col-2">
267+
<div class="col-2 full-height">
268268
<div class="column">
269269
<div class="col-auto">
270270
.col-auto
@@ -276,7 +276,7 @@
276276
</div>
277277
</div>
278278
</div>
279-
<div class="col-1">
279+
<div class="col-1 full-height">
280280
<div class="column">
281281
<div class="col-grow">
282282
.col-grow
@@ -288,7 +288,7 @@
288288
</div>
289289
</div>
290290
</div>
291-
<div class="col-1">
291+
<div class="col-1 full-height">
292292
<div class="column">
293293
<div class="col-grow">
294294
.col-grow
@@ -611,15 +611,15 @@
611611
</div>
612612

613613
<h1>
614-
Responsive - .column.row-md.column-lg.q-gutter-sm.q-gutter-md-xs.q-gutter-lg-md - height 500px
614+
Responsive - .column.row-md.column-lg.q-col-gutter-sm.q-col-gutter-sm-md.q-col-gutter-md-lg.q-col-gutter-lg-xl - height 500px
615615
<small class="pull-right q-px-xs text-red">XS</small>
616616
<small class="pull-right q-px-xs text-purple gt-xs">SM</small>
617617
<small class="pull-right q-px-xs text-indigo gt-sm">MD</small>
618618
<small class="pull-right q-px-xs text-green gt-md">LG</small>
619619
<small class="pull-right q-px-xs text-orange gt-lg">XL</small>
620620
</h1>
621621
<div class="test-flex q-pa-xl">
622-
<div class="column row-md column-lg q-gutter-sm q-gutter-md-xs q-gutter-lg-md" style="height: 500px;">
622+
<div class="column row-md column-lg q-col-gutter-sm q-col-gutter-sm-md q-col-gutter-md-lg q-col-gutter-lg-xl" style="height: 500px;">
623623
<div class="col-4 col-lg-2 row">
624624
<div class="fit">.col-4.col-lg-2</div>
625625
</div>
@@ -677,7 +677,6 @@
677677
@extends .test-flex-demo .test-flex [class^='column']
678678
> div
679679
white-space nowrap
680-
padding 1em 0 1em .2em
681680
text-overflow ellipsis
682681
.placeholder
683682
display inline-block

‎quasar/dev/components/css/flex-gutter.vue‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,44 @@
11
<template>
2-
<div class="q-layout-padding q-gutter-demo">
2+
<div class="q-layout-padding q-col-gutter-demo">
33
<h1>Default</h1>
4-
<div class="my-container" v-for="n in ['none', 'xs', 'sm', 'md', 'lg', 'xl']" :key="`q-gutter_xy_${n}`">
5-
<div class="row" :class="`q-gutter-${n}`">
4+
<div class="my-container" v-for="n in ['none', 'xs', 'sm', 'md', 'lg', 'xl']" :key="`q-col-gutter_xy_${n}`">
5+
<div class="row" :class="`q-col-gutter-${n}`">
66
<div class="col-4" v-for="n in 5" :key="n">
77
<div class="my-content">&nbsp;</div>
88
</div>
99
</div>
1010
</div>
1111

1212
<h1>Horizontal</h1>
13-
<div class="my-container" v-for="n in ['none', 'xs', 'sm', 'md', 'lg', 'xl']" :key="`q-gutter_x_${n}`">
14-
<div class="row" :class="`q-gutter-x-${n} q-gutter-y-sm`">
13+
<div class="my-container" v-for="n in ['none', 'xs', 'sm', 'md', 'lg', 'xl']" :key="`q-col-gutter_x_${n}`">
14+
<div class="row" :class="`q-col-gutter-x-${n} q-col-gutter-y-sm`">
1515
<div class="col-4" v-for="n in 5" :key="n">
1616
<div class="my-content">&nbsp;</div>
1717
</div>
1818
</div>
1919
</div>
2020

2121
<h1>Vertical</h1>
22-
<div class="my-container" v-for="n in ['none', 'xs', 'sm', 'md', 'lg', 'xl']" :key="`q-gutter_y_${n}`">
23-
<div class="row" :class="`q-gutter-x-sm q-gutter-y-${n}`">
22+
<div class="my-container" v-for="n in ['none', 'xs', 'sm', 'md', 'lg', 'xl']" :key="`q-col-gutter_y_${n}`">
23+
<div class="row" :class="`q-col-gutter-x-sm q-col-gutter-y-${n}`">
2424
<div class="col-4" v-for="n in 5" :key="n">
2525
<div class="my-content">&nbsp;</div>
2626
</div>
2727
</div>
2828
</div>
2929

30+
<h1>Backgrounds test</h1>
31+
<div class="bg-yellow" style="border: 1px solid transparent;">
32+
<div class="row q-col-gutter-lg" style="border: 1px solid red;">
33+
<div class="col-4" v-for="n in 12" :key="n">
34+
<div class="bg-grey-4">Col 4</div>
35+
</div>
36+
</div>
37+
</div>
38+
3039
<h1>QInput example</h1>
3140
<div>
32-
<div class="row q-gutter-sm">
41+
<div class="row q-col-gutter-sm">
3342
<div class="col-12">
3443
<q-input inverted v-model="model" float-label="col-12" />
3544
</div>
@@ -64,7 +73,7 @@ export default {
6473
</script>
6574

6675
<style lang="stylus">
67-
.q-gutter-demo
76+
.q-col-gutter-demo
6877
.my-container + .my-container
6978
margin-top 25px
7079
.my-container

‎quasar/src/css/core/flex.styl‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ fg($name, $size)
2929
for $i in (0..$flex-cols)
3030
$ic = s('%s', $i)
3131
{fe('.col<name>-<i>', $name, $noProcNotZero, $ic)}
32-
@extend .col{$name}-auto
32+
@extends .col{$name}-auto
3333
.row
3434
{fe('> .col<name>-<i>', $name, $noProcNotZero, $ic)}
3535
height auto
@@ -122,8 +122,8 @@ fg($name, $size)
122122
align-self stretch
123123

124124
.flex-center
125-
@extend .items-center
126-
@extend .justify-center
125+
@extends .items-center
126+
@extends .justify-center
127127

128128
for $name, $size in $flex-gutter
129129
.q-gutter
@@ -137,8 +137,21 @@ for $name, $size in $flex-gutter
137137
margin-top $size
138138
&-{$name}
139139
@extends .q-gutter-x-{$name}, .q-gutter-y-{$name}
140+
.q-col-gutter
141+
&-x-{$name}
142+
margin-left (- $size / 2)
143+
margin-right (- $size / 2)
144+
> *
145+
padding-left ($size / 2)
146+
padding-right ($size / 2)
147+
&-y-{$name}
148+
margin-top (- $size / 2)
149+
margin-bottom (- $size / 2)
140150
> *
141-
@extends .q-gutter-x-{$name} > *, .q-gutter-y-{$name} > *
151+
padding-top ($size / 2)
152+
padding-bottom ($size / 2)
153+
&-{$name}
154+
@extends .q-col-gutter-x-{$name}, .q-col-gutter-y-{$name}
142155

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

‎quasar/src/css/flex-addon.styl‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -159,23 +159,36 @@ fg($name, $size)
159159
align-self stretch
160160

161161
{fr('.flex<name>-center', $name)}
162-
@extend .items{$name}-center
163-
@extend .justify{$name}-center
162+
@extends .items{$name}-center
163+
@extends .justify{$name}-center
164164

165165
for $gname, $gsize in $flex-gutter
166-
{fr('.q-gutter<name>-', $name)}
167-
&x-{$gname}
166+
{fr('.q-gutter<name>', $name)}
167+
&-x-{$gname}
168168
margin-left (- $gsize)
169169
> *
170170
margin-left $gsize
171-
&y-{$gname}
171+
&-y-{$gname}
172172
margin-top (- $gsize)
173173
> *
174174
margin-top $gsize
175-
&{$gname}
175+
&-{$gname}
176176
@extends .q-gutter{$name}-x-{$gname}, .q-gutter{$name}-y-{$gname}
177+
{fr('.q-col-gutter<name>', $name)}
178+
&-x-{$gname}
179+
margin-left (- $gsize / 2)
180+
margin-right (- $gsize / 2)
177181
> *
178-
@extends .q-gutter{$name}-x-{$gname} > *, .q-gutter{$name}-y-{$gname} > *
182+
padding-left ($gsize / 2)
183+
padding-right ($gsize / 2)
184+
&-y-{$gname}
185+
margin-top (- $gsize / 2)
186+
margin-bottom (- $gsize / 2)
187+
> *
188+
padding-top ($gsize / 2)
189+
padding-bottom ($gsize / 2)
190+
&-{$gname}
191+
@extends .q-col-gutter{$name}-x-{$gname}, .q-col-gutter{$name}-y-{$gname}
179192

180193
for $name2, $size2 in $sizes
181194
if $size >= $size2

0 commit comments

Comments
 (0)