drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Layout support reponsive

Browse source 
Layout support reponsive
This commit is contained in:
梁灏 2016-12-09 15:42:22 +08:00
parent 43509ad876
commit 84a351dfdc
7 changed files with 380 additions and 285 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/styles/common/layout.less
View file

@ -52,3 +52,37 @@
}
.make-grid();
// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.
.make-grid(-xs);
// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.
@media (min-width: @screen-sm-min) {
.make-grid(-sm);
}
// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.
@media (min-width: @screen-md-min) {
.make-grid(-md);
}
// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.
@media (min-width: @screen-lg-min) {
.make-grid(-lg);
}

30
src/styles/mixins/layout.less
View file

@ -9,13 +9,13 @@
.clearfix;
}
.float-grid-columns() {
.float-grid-columns(@class) {
.col(@index) { // initial
@item: ~".@{col-prefix-cls}-span-@{index}";
@item: ~".@{col-prefix-cls}-span@{class}-@{index}";
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) { // general
@item: ~".@{col-prefix-cls}-span-@{index}";
@item: ~".@{col-prefix-cls}-span@{class}-@{index}";
.col((@index + 1), ~"@{list}, @{item}");
}
.col(@index, @list) when (@index > @grid-columns) { // terminal
@ -27,28 +27,28 @@
.col(1); // kickstart it
}
.loop-grid-columns(@index) when (@index > 0) {
.@{col-prefix-cls}-span-@{index} {
.loop-grid-columns(@index, @class) when (@index > 0) {
.@{col-prefix-cls}-span@{class}-@{index} {
display: block;
width: percentage((@index / @grid-columns));
}
.@{col-prefix-cls}-push-@{index} {
.@{col-prefix-cls}@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
.@{col-prefix-cls}-pull-@{index} {
.@{col-prefix-cls}@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
.@{col-prefix-cls}-offset-@{index} {
.@{col-prefix-cls}@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
.@{col-prefix-cls}-order-@{index} {
.@{col-prefix-cls}@{class}-order-@{index} {
order: @index;
}
.loop-grid-columns((@index - 1));
.loop-grid-columns((@index - 1), @class);
}
.loop-grid-columns(@index) when (@index = 0) {
.@{col-prefix-cls}-@{index} {
.loop-grid-columns(@index, @class) when (@index = 0) {
.@{col-prefix-cls}@{class}-@{index} {
display: none;
}
.@{col-prefix-cls}-push-@{index} {
@ -59,7 +59,7 @@
}
}
.make-grid() {
.float-grid-columns();
.loop-grid-columns(@grid-columns);
.make-grid(@class: ~'') {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class);
}

21
src/styles/themes/default/custom.less
View file

@ -112,6 +112,27 @@
// Tag
@tag-font-size : 12px;
// Media queries breakpoints
// Extra small screen / phone
@screen-xs : 480px;
@screen-xs-min : @screen-xs;
@screen-xs-max : (@screen-xs-min - 1);
// Small screen / tablet
@screen-sm : 768px;
@screen-sm-min : @screen-sm;
@screen-sm-max : (@screen-sm-min - 1);
// Medium screen / desktop
@screen-md : 992px;
@screen-md-min : @screen-md;
@screen-md-max : (@screen-md-min - 1);
// Large screen / wide desktop
@screen-lg : 1200px;
@screen-lg-min : @screen-lg;
@screen-lg-max : (@screen-lg-min - 1);
// Z-index
@zindex-spin : 8;
@zindex-affix : 10;