diff --git a/spec/e2e/html/810-many-columns.css b/spec/e2e/html/810-many-columns.css index aeb7a78f1..82879c547 100644 --- a/spec/e2e/html/810-many-columns.css +++ b/spec/e2e/html/810-many-columns.css @@ -1,378 +1,372 @@ /* SASS code using https://www.sassmeister.com/ -.grid-stack > .grid-stack-item { +$columns: 60; +@function fixed($float) { + @return calc(round($float * 1000) / 1000); // total 4-5 digits being % +} +.grid-stack-#{$columns} > .grid-stack-item { - $gridstack-columns: 60; - - min-width: (100% / $gridstack-columns); - - @for $i from 1 through $gridstack-columns { - &[gs-w='#{$i}'] { width: (100% / $gridstack-columns) * $i; } - &[gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; } - } - } - */ + min-width: fixed(calc(100% / $columns)); -/* override gridstack,css */ -.grid-stack > .grid-stack-item { - min-width: 1.6666666667%; + @for $i from 1 through $columns - 1 { + &[gs-x='#{$i}'] { left: fixed(calc(100% / $columns) * $i); } + &[gs-w='#{$i+1}'] { width: fixed(calc(100% / $columns) * ($i+1)); } + } } -.grid-stack > .grid-stack-item[gs-w="1"] { - width: 1.6666666667%; +*/ +.grid-stack-60 > .grid-stack-item { + min-width: 1.667%; } -.grid-stack > .grid-stack-item[gs-x="1"] { - left: 1.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="1"] { + left: 1.667%; } -.grid-stack > .grid-stack-item[gs-w="2"] { - width: 3.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="2"] { + width: 3.333%; } -.grid-stack > .grid-stack-item[gs-x="2"] { - left: 3.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="2"] { + left: 3.333%; } -.grid-stack > .grid-stack-item[gs-w="3"] { +.grid-stack-60 > .grid-stack-item[gs-w="3"] { width: 5%; } -.grid-stack > .grid-stack-item[gs-x="3"] { +.grid-stack-60 > .grid-stack-item[gs-x="3"] { left: 5%; } -.grid-stack > .grid-stack-item[gs-w="4"] { - width: 6.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="4"] { + width: 6.667%; } -.grid-stack > .grid-stack-item[gs-x="4"] { - left: 6.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="4"] { + left: 6.667%; } -.grid-stack > .grid-stack-item[gs-w="5"] { - width: 8.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="5"] { + width: 8.333%; } -.grid-stack > .grid-stack-item[gs-x="5"] { - left: 8.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="5"] { + left: 8.333%; } -.grid-stack > .grid-stack-item[gs-w="6"] { +.grid-stack-60 > .grid-stack-item[gs-w="6"] { width: 10%; } -.grid-stack > .grid-stack-item[gs-x="6"] { +.grid-stack-60 > .grid-stack-item[gs-x="6"] { left: 10%; } -.grid-stack > .grid-stack-item[gs-w="7"] { - width: 11.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="7"] { + width: 11.667%; } -.grid-stack > .grid-stack-item[gs-x="7"] { - left: 11.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="7"] { + left: 11.667%; } -.grid-stack > .grid-stack-item[gs-w="8"] { - width: 13.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="8"] { + width: 13.333%; } -.grid-stack > .grid-stack-item[gs-x="8"] { - left: 13.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="8"] { + left: 13.333%; } -.grid-stack > .grid-stack-item[gs-w="9"] { +.grid-stack-60 > .grid-stack-item[gs-w="9"] { width: 15%; } -.grid-stack > .grid-stack-item[gs-x="9"] { +.grid-stack-60 > .grid-stack-item[gs-x="9"] { left: 15%; } -.grid-stack > .grid-stack-item[gs-w="10"] { - width: 16.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="10"] { + width: 16.667%; } -.grid-stack > .grid-stack-item[gs-x="10"] { - left: 16.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="10"] { + left: 16.667%; } -.grid-stack > .grid-stack-item[gs-w="11"] { - width: 18.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="11"] { + width: 18.333%; } -.grid-stack > .grid-stack-item[gs-x="11"] { - left: 18.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="11"] { + left: 18.333%; } -.grid-stack > .grid-stack-item[gs-w="12"] { +.grid-stack-60 > .grid-stack-item[gs-w="12"] { width: 20%; } -.grid-stack > .grid-stack-item[gs-x="12"] { +.grid-stack-60 > .grid-stack-item[gs-x="12"] { left: 20%; } -.grid-stack > .grid-stack-item[gs-w="13"] { - width: 21.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="13"] { + width: 21.667%; } -.grid-stack > .grid-stack-item[gs-x="13"] { - left: 21.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="13"] { + left: 21.667%; } -.grid-stack > .grid-stack-item[gs-w="14"] { - width: 23.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="14"] { + width: 23.333%; } -.grid-stack > .grid-stack-item[gs-x="14"] { - left: 23.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="14"] { + left: 23.333%; } -.grid-stack > .grid-stack-item[gs-w="15"] { +.grid-stack-60 > .grid-stack-item[gs-w="15"] { width: 25%; } -.grid-stack > .grid-stack-item[gs-x="15"] { +.grid-stack-60 > .grid-stack-item[gs-x="15"] { left: 25%; } -.grid-stack > .grid-stack-item[gs-w="16"] { - width: 26.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="16"] { + width: 26.667%; } -.grid-stack > .grid-stack-item[gs-x="16"] { - left: 26.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="16"] { + left: 26.667%; } -.grid-stack > .grid-stack-item[gs-w="17"] { - width: 28.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="17"] { + width: 28.333%; } -.grid-stack > .grid-stack-item[gs-x="17"] { - left: 28.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="17"] { + left: 28.333%; } -.grid-stack > .grid-stack-item[gs-w="18"] { +.grid-stack-60 > .grid-stack-item[gs-w="18"] { width: 30%; } -.grid-stack > .grid-stack-item[gs-x="18"] { +.grid-stack-60 > .grid-stack-item[gs-x="18"] { left: 30%; } -.grid-stack > .grid-stack-item[gs-w="19"] { - width: 31.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="19"] { + width: 31.667%; } -.grid-stack > .grid-stack-item[gs-x="19"] { - left: 31.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="19"] { + left: 31.667%; } -.grid-stack > .grid-stack-item[gs-w="20"] { - width: 33.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="20"] { + width: 33.333%; } -.grid-stack > .grid-stack-item[gs-x="20"] { - left: 33.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="20"] { + left: 33.333%; } -.grid-stack > .grid-stack-item[gs-w="21"] { +.grid-stack-60 > .grid-stack-item[gs-w="21"] { width: 35%; } -.grid-stack > .grid-stack-item[gs-x="21"] { +.grid-stack-60 > .grid-stack-item[gs-x="21"] { left: 35%; } -.grid-stack > .grid-stack-item[gs-w="22"] { - width: 36.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="22"] { + width: 36.667%; } -.grid-stack > .grid-stack-item[gs-x="22"] { - left: 36.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="22"] { + left: 36.667%; } -.grid-stack > .grid-stack-item[gs-w="23"] { - width: 38.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="23"] { + width: 38.333%; } -.grid-stack > .grid-stack-item[gs-x="23"] { - left: 38.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="23"] { + left: 38.333%; } -.grid-stack > .grid-stack-item[gs-w="24"] { +.grid-stack-60 > .grid-stack-item[gs-w="24"] { width: 40%; } -.grid-stack > .grid-stack-item[gs-x="24"] { +.grid-stack-60 > .grid-stack-item[gs-x="24"] { left: 40%; } -.grid-stack > .grid-stack-item[gs-w="25"] { - width: 41.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="25"] { + width: 41.667%; } -.grid-stack > .grid-stack-item[gs-x="25"] { - left: 41.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="25"] { + left: 41.667%; } -.grid-stack > .grid-stack-item[gs-w="26"] { - width: 43.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="26"] { + width: 43.333%; } -.grid-stack > .grid-stack-item[gs-x="26"] { - left: 43.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="26"] { + left: 43.333%; } -.grid-stack > .grid-stack-item[gs-w="27"] { +.grid-stack-60 > .grid-stack-item[gs-w="27"] { width: 45%; } -.grid-stack > .grid-stack-item[gs-x="27"] { +.grid-stack-60 > .grid-stack-item[gs-x="27"] { left: 45%; } -.grid-stack > .grid-stack-item[gs-w="28"] { - width: 46.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="28"] { + width: 46.667%; } -.grid-stack > .grid-stack-item[gs-x="28"] { - left: 46.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="28"] { + left: 46.667%; } -.grid-stack > .grid-stack-item[gs-w="29"] { - width: 48.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="29"] { + width: 48.333%; } -.grid-stack > .grid-stack-item[gs-x="29"] { - left: 48.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="29"] { + left: 48.333%; } -.grid-stack > .grid-stack-item[gs-w="30"] { +.grid-stack-60 > .grid-stack-item[gs-w="30"] { width: 50%; } -.grid-stack > .grid-stack-item[gs-x="30"] { +.grid-stack-60 > .grid-stack-item[gs-x="30"] { left: 50%; } -.grid-stack > .grid-stack-item[gs-w="31"] { - width: 51.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="31"] { + width: 51.667%; } -.grid-stack > .grid-stack-item[gs-x="31"] { - left: 51.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="31"] { + left: 51.667%; } -.grid-stack > .grid-stack-item[gs-w="32"] { - width: 53.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="32"] { + width: 53.333%; } -.grid-stack > .grid-stack-item[gs-x="32"] { - left: 53.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="32"] { + left: 53.333%; } -.grid-stack > .grid-stack-item[gs-w="33"] { +.grid-stack-60 > .grid-stack-item[gs-w="33"] { width: 55%; } -.grid-stack > .grid-stack-item[gs-x="33"] { +.grid-stack-60 > .grid-stack-item[gs-x="33"] { left: 55%; } -.grid-stack > .grid-stack-item[gs-w="34"] { - width: 56.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="34"] { + width: 56.667%; } -.grid-stack > .grid-stack-item[gs-x="34"] { - left: 56.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="34"] { + left: 56.667%; } -.grid-stack > .grid-stack-item[gs-w="35"] { - width: 58.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="35"] { + width: 58.333%; } -.grid-stack > .grid-stack-item[gs-x="35"] { - left: 58.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="35"] { + left: 58.333%; } -.grid-stack > .grid-stack-item[gs-w="36"] { +.grid-stack-60 > .grid-stack-item[gs-w="36"] { width: 60%; } -.grid-stack > .grid-stack-item[gs-x="36"] { +.grid-stack-60 > .grid-stack-item[gs-x="36"] { left: 60%; } -.grid-stack > .grid-stack-item[gs-w="37"] { - width: 61.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="37"] { + width: 61.667%; } -.grid-stack > .grid-stack-item[gs-x="37"] { - left: 61.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="37"] { + left: 61.667%; } -.grid-stack > .grid-stack-item[gs-w="38"] { - width: 63.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="38"] { + width: 63.333%; } -.grid-stack > .grid-stack-item[gs-x="38"] { - left: 63.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="38"] { + left: 63.333%; } -.grid-stack > .grid-stack-item[gs-w="39"] { +.grid-stack-60 > .grid-stack-item[gs-w="39"] { width: 65%; } -.grid-stack > .grid-stack-item[gs-x="39"] { +.grid-stack-60 > .grid-stack-item[gs-x="39"] { left: 65%; } -.grid-stack > .grid-stack-item[gs-w="40"] { - width: 66.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="40"] { + width: 66.667%; } -.grid-stack > .grid-stack-item[gs-x="40"] { - left: 66.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="40"] { + left: 66.667%; } -.grid-stack > .grid-stack-item[gs-w="41"] { - width: 68.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="41"] { + width: 68.333%; } -.grid-stack > .grid-stack-item[gs-x="41"] { - left: 68.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="41"] { + left: 68.333%; } -.grid-stack > .grid-stack-item[gs-w="42"] { +.grid-stack-60 > .grid-stack-item[gs-w="42"] { width: 70%; } -.grid-stack > .grid-stack-item[gs-x="42"] { +.grid-stack-60 > .grid-stack-item[gs-x="42"] { left: 70%; } -.grid-stack > .grid-stack-item[gs-w="43"] { - width: 71.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="43"] { + width: 71.667%; } -.grid-stack > .grid-stack-item[gs-x="43"] { - left: 71.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="43"] { + left: 71.667%; } -.grid-stack > .grid-stack-item[gs-w="44"] { - width: 73.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="44"] { + width: 73.333%; } -.grid-stack > .grid-stack-item[gs-x="44"] { - left: 73.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="44"] { + left: 73.333%; } -.grid-stack > .grid-stack-item[gs-w="45"] { +.grid-stack-60 > .grid-stack-item[gs-w="45"] { width: 75%; } -.grid-stack > .grid-stack-item[gs-x="45"] { +.grid-stack-60 > .grid-stack-item[gs-x="45"] { left: 75%; } -.grid-stack > .grid-stack-item[gs-w="46"] { - width: 76.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="46"] { + width: 76.667%; } -.grid-stack > .grid-stack-item[gs-x="46"] { - left: 76.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="46"] { + left: 76.667%; } -.grid-stack > .grid-stack-item[gs-w="47"] { - width: 78.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="47"] { + width: 78.333%; } -.grid-stack > .grid-stack-item[gs-x="47"] { - left: 78.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="47"] { + left: 78.333%; } -.grid-stack > .grid-stack-item[gs-w="48"] { +.grid-stack-60 > .grid-stack-item[gs-w="48"] { width: 80%; } -.grid-stack > .grid-stack-item[gs-x="48"] { +.grid-stack-60 > .grid-stack-item[gs-x="48"] { left: 80%; } -.grid-stack > .grid-stack-item[gs-w="49"] { - width: 81.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="49"] { + width: 81.667%; } -.grid-stack > .grid-stack-item[gs-x="49"] { - left: 81.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="49"] { + left: 81.667%; } -.grid-stack > .grid-stack-item[gs-w="50"] { - width: 83.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="50"] { + width: 83.333%; } -.grid-stack > .grid-stack-item[gs-x="50"] { - left: 83.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="50"] { + left: 83.333%; } -.grid-stack > .grid-stack-item[gs-w="51"] { +.grid-stack-60 > .grid-stack-item[gs-w="51"] { width: 85%; } -.grid-stack > .grid-stack-item[gs-x="51"] { +.grid-stack-60 > .grid-stack-item[gs-x="51"] { left: 85%; } -.grid-stack > .grid-stack-item[gs-w="52"] { - width: 86.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="52"] { + width: 86.667%; } -.grid-stack > .grid-stack-item[gs-x="52"] { - left: 86.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="52"] { + left: 86.667%; } -.grid-stack > .grid-stack-item[gs-w="53"] { - width: 88.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="53"] { + width: 88.333%; } -.grid-stack > .grid-stack-item[gs-x="53"] { - left: 88.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="53"] { + left: 88.333%; } -.grid-stack > .grid-stack-item[gs-w="54"] { +.grid-stack-60 > .grid-stack-item[gs-w="54"] { width: 90%; } -.grid-stack > .grid-stack-item[gs-x="54"] { +.grid-stack-60 > .grid-stack-item[gs-x="54"] { left: 90%; } -.grid-stack > .grid-stack-item[gs-w="55"] { - width: 91.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="55"] { + width: 91.667%; } -.grid-stack > .grid-stack-item[gs-x="55"] { - left: 91.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="55"] { + left: 91.667%; } -.grid-stack > .grid-stack-item[gs-w="56"] { - width: 93.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="56"] { + width: 93.333%; } -.grid-stack > .grid-stack-item[gs-x="56"] { - left: 93.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="56"] { + left: 93.333%; } -.grid-stack > .grid-stack-item[gs-w="57"] { +.grid-stack-60 > .grid-stack-item[gs-w="57"] { width: 95%; } -.grid-stack > .grid-stack-item[gs-x="57"] { +.grid-stack-60 > .grid-stack-item[gs-x="57"] { left: 95%; } -.grid-stack > .grid-stack-item[gs-w="58"] { - width: 96.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-w="58"] { + width: 96.667%; } -.grid-stack > .grid-stack-item[gs-x="58"] { - left: 96.6666666667%; +.grid-stack-60 > .grid-stack-item[gs-x="58"] { + left: 96.667%; } -.grid-stack > .grid-stack-item[gs-w="59"] { - width: 98.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-w="59"] { + width: 98.333%; } -.grid-stack > .grid-stack-item[gs-x="59"] { - left: 98.3333333333%; +.grid-stack-60 > .grid-stack-item[gs-x="59"] { + left: 98.333%; } -.grid-stack > .grid-stack-item[gs-w="60"] { +.grid-stack-60 > .grid-stack-item[gs-w="60"] { width: 100%; -} -.grid-stack > .grid-stack-item[gs-x="60"] { - left: 100%; } \ No newline at end of file diff --git a/src/gridstack-extra.scss b/src/gridstack-extra.scss index 906bbb48b..b954a312e 100644 --- a/src/gridstack-extra.scss +++ b/src/gridstack-extra.scss @@ -6,7 +6,7 @@ $gridstack-columns-start: 2 !default; $gridstack-columns: 11 !default; @function fixed($float) { - @return calc(round($float * 100) / 100); // total 4 digits being % + @return calc(round($float * 1000) / 1000); // total 4-5 digits being % } @mixin grid-stack-items($columns) { diff --git a/src/gridstack.scss b/src/gridstack.scss index afa00ead2..5cd1f1e06 100644 --- a/src/gridstack.scss +++ b/src/gridstack.scss @@ -7,7 +7,7 @@ $columns: 12 !default; $animation_speed: .3s !default; @function fixed($float) { - @return calc(round($float * 100) / 100); // total 4 digits being % + @return calc(round($float * 1000) / 1000); // total 4-5 digits being % } @mixin vendor($property, $value...){