Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-20 21:11:52 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

create offset classes

Browse source
This commit is contained in:
Marcos Moura 2016-12-14 04:37:37 -02:00
parent b83236d628
commit d5c0c5139b
3 changed files with 89 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
docs/src/pages/ui-elements/Layout.vue
View file

@ -64,6 +64,72 @@
</div>
</example-box>
<example-box card-title="Sizes and Offset">
<div class="layout-demo grid" slot="demo">
<md-layout md-gutter class="color">
<md-layout md-flex="50"></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout md-flex="33"></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout></md-layout>
<md-layout md-flex="33" md-flex-offset="33"></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout md-flex="75"></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout md-flex="50"></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout md-flex="25" md-flex-offset="25"></md-layout>
<md-layout md-flex="25"></md-layout>
</md-layout>
</div>
<div slot="code">
<code-block lang="xml">
</code-block>
</div>
</example-box>
<example-box card-title="Direction">
<div class="layout-demo grid" slot="demo">
<md-layout class="column-size" md-gutter>
<md-layout md-column md-gutter class="color">
<md-layout md-flex="20"></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-column md-gutter class="color">
<md-layout md-flex="50"></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
</md-layout>
</md-layout>
</div>
<div slot="code">
<code-block lang="xml">
</code-block>
</div>
</example-box>
<example-box card-title="Gutters">
<div class="layout-demo grid" slot="demo">
<md-layout class="no-gutter color">
@ -104,67 +170,6 @@
</code-block>
</div>
</example-box>
<example-box card-title="Sizes">
<div class="layout-demo grid" slot="demo">
<md-layout md-gutter class="color">
<md-layout md-flex="50"></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout md-flex="33"></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout></md-layout>
<md-layout md-flex="66"></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout md-flex="75"></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-gutter class="color">
<md-layout md-flex="50"></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
</md-layout>
</div>
<div slot="code">
<code-block lang="xml">
</code-block>
</div>
</example-box>
<example-box card-title="Direction">
<div class="layout-demo grid" slot="demo">
<md-layout class="column-size" md-gutter>
<md-layout md-column md-gutter class="color">
<md-layout md-flex="20"></md-layout>
<md-layout></md-layout>
</md-layout>
<md-layout md-column md-gutter class="color">
<md-layout md-flex="50"></md-layout>
<md-layout></md-layout>
<md-layout></md-layout>
</md-layout>
</md-layout>
</div>
<div slot="code">
<code-block lang="xml">
</code-block>
</div>
</example-box>
</div>
</docs-component>
</page-content>

21
src/components/mdLayout/mdLayout.scss
View file

@ -93,24 +93,37 @@ $sizes: (8, 16, 24, 40);
.md-flex#{$size}-33 {
min-width: 33.33333%;
max-width: 33.33333%;
flex: 0 1 33.33333%;
}
.md-flex#{$size}-66 {
min-width: 33.33333%;
max-width: 33.33333%;
flex: 0 1 66.66666%;
}
@for $i from 0 through 20 {
@if $size == '' {
.md-flex-offset-33 {
margin-left: 33.33333%;
}
.md-flex-offset-66 {
margin-left: 66.66666%;
}
}
@for $i from 1 through 20 {
$counter: $i * 5;
.md-flex#{$size}-#{$counter} {
min-width: #{$counter + '%'};
max-width: #{$counter + '%'};
flex: 0 1 #{$counter + '%'};
}
@if $size == '' {
.md-flex-offset-#{$counter} {
margin-left: #{$counter + '%'};
}
}
}
}

7
src/components/mdLayout/mdLayout.vue
View file

@ -30,7 +30,8 @@
mdFlexSmall: [String, Number, Boolean],
mdFlexMedium: [String, Number, Boolean],
mdFlexLarge: [String, Number, Boolean],
mdFlexXlarge: [String, Number, Boolean]
mdFlexXlarge: [String, Number, Boolean],
mdFlexOffset: [String, Number]
},
computed: {
classes() {
@ -62,6 +63,10 @@
}
}
if (this.mdFlexOffset) {
classes['md-flex-offset-' + this.mdFlexOffset] = true;
}
this.generateFlexClasses('', 'mdFlex', classes);
this.generateFlexClasses('xsmall', 'mdFlexXsmall', classes);
this.generateFlexClasses('small', 'mdFlexSmall', classes);