Skip to content

Commit c2e9dcf

Browse files
chromicechromice
committed
Finish implementation of base-nudge.
1 parent 4e87455 commit c2e9dcf

File tree

5 files changed

+101
-9
lines changed

5 files changed

+101
-9
lines changed

‎order.less‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -651,25 +651,38 @@
651651
@-column-width: round((100% / @base * @span), 8);
652652
@-column-gutter: round(((@base - @span) / @base * @grid-gutter), 8);
653653
@-column-nudge: unit(@nudge, px);
654-
.-get-width-calc(@-column-width, @-column-gutter, @-column-nudge);
655-
.-get-offset-calc(@-column-width, (@grid-gutter - @-column-gutter), @-column-nudge);
654+
@-base-nudge: unit((@span / @base * @base-nudge), px);
655+
.-get-width-calc(@-column-width, @-column-gutter, @-column-nudge, @-base-nudge);
656+
.-get-offset-calc(@-column-width, (@grid-gutter - @-column-gutter), @-column-nudge, @-base-nudge);
656657

657658
// IE8, Opera mini, Android and older versions of Safari:
658659
@-base-width: (@grid-width * @base / @grid-columns);
659660
@-gutter: (percentage(@grid-gutter / @-base-width));
660-
@grid-width-fallback: (@-column-width - percentage(@-column-gutter / @-base-width) + percentage(@-column-nudge / @-base-width));
661+
@grid-width-fallback: (@-column-width - percentage(@-column-gutter / @-base-width) + percentage(@-column-nudge / @-base-width) - percentage(@-base-nudge / @-base-width));
661662
@grid-offset-fallback: (@grid-width-fallback + @-gutter);
662663
}
663-
.-get-width-calc (@-width, @-gutter, @-nudge) when (@-nudge = 0) {
664+
.-get-width-calc (@-width, @-gutter, @-nudge, @-base-nudge) when (@-nudge = 0) and (@-base-nudge = 0) {
664665
@grid-width-calc: @-width ~"-" @-gutter;
665666
}
666-
.-get-width-calc (@-width, @-gutter, @-nudge) when (default()) {
667+
.-get-width-calc (@-width, @-gutter, @-nudge, @-base-nudge) when (@-nudge = 0) and not(@-base-nudge = 0) {
668+
@grid-width-calc: @-width ~"-" @-gutter ~"-" @-base-nudge;
669+
}
670+
.-get-width-calc (@-width, @-gutter, @-nudge, @-base-nudge) when not(@-nudge = 0) and (@-base-nudge = 0) {
667671
@grid-width-calc: @-width ~"-" @-gutter ~"+" @-nudge;
668672
}
669-
.-get-offset-calc (@-width, @-gutter, @-nudge) when (@-nudge = 0) {
673+
.-get-width-calc (@-width, @-gutter, @-nudge, @-base-nudge) when (default()) {
674+
@grid-width-calc: @-width ~"-" @-gutter ~"+" @-nudge ~"-" @-base-nudge;
675+
}
676+
.-get-offset-calc (@-width, @-gutter, @-nudge, @-base-nudge) when (@-nudge = 0) and (@-base-nudge = 0) {
670677
@grid-offset-calc: @-width ~"+" @-gutter;
671678
}
672-
.-get-offset-calc (@-width, @-gutter, @-nudge) when (default()) {
679+
.-get-offset-calc (@-width, @-gutter, @-nudge, @-base-nudge) when (@-nudge = 0) and not(@-base-nudge = 0) {
680+
@grid-offset-calc: @-width ~"+" @-gutter ~"-" @-base-nudge;
681+
}
682+
.-get-offset-calc (@-width, @-gutter, @-nudge, @-base-nudge) when not(@-nudge = 0) and (@-base-nudge = 0) {
673683
@grid-offset-calc: @-width ~"+" @-gutter ~"+" @-nudge;
674684
}
685+
.-get-offset-calc (@-width, @-gutter, @-nudge, @-base-nudge) when (default()) {
686+
@grid-offset-calc: @-width ~"+" @-gutter ~"+" @-nudge ~"-" @-base-nudge;
687+
}
675688
}

‎tests/index.html‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
<html lang="en">
33
<meta charset="utf-8">
44
<title>Order.less library specification</title>
5-
<!--
65
<link rel="stylesheet" href="stylesheet.css">
7-
-->
6+
<!--
87
<link rel="stylesheet/less" type="text/css" href="stylesheet.less">
98
<script>
109
less = {
1110
env: "development"
1211
};
1312
</script>
1413
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.2.0/less.min.js"></script>
14+
-->
1515
<body>
1616
<div class="Test">
1717
<h1 class="Test-title"><a href="https://github.com/chromice/order.less">Order.less</a> library specification</h1>
@@ -157,6 +157,29 @@ <h3 class="Test-it">renders 5 floated blocks wrapping around 2 children</h3>
157157
<div class="grid-block"></div>
158158
</div>
159159
</div>
160+
<h3 class="Test-it">renders 5 floated blocks wrapping around 2 children, when parent blocks have no padding</h3>
161+
<div class="Test-run" id="grid-10-5-blocks-2-children-2">
162+
<div class="grid-block">
163+
<div class="grid-block"></div>
164+
<div class="grid-block"></div>
165+
</div>
166+
<div class="grid-block">
167+
<div class="grid-block"></div>
168+
<div class="grid-block"></div>
169+
</div>
170+
<div class="grid-block">
171+
<div class="grid-block"></div>
172+
<div class="grid-block"></div>
173+
</div>
174+
<div class="grid-block">
175+
<div class="grid-block"></div>
176+
<div class="grid-block"></div>
177+
</div>
178+
<div class="grid-block">
179+
<div class="grid-block"></div>
180+
<div class="grid-block"></div>
181+
</div>
182+
</div>
160183

161184
<h2 class="Test-describe">Modular scale</h2>
162185

‎tests/index.png‎

-1.08 MB
Loading

‎tests/stylesheet.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,34 @@
248248
#grid-10-5-blocks-2-children .grid-block .grid-block:first-child {
249249
margin-left: 0;
250250
}
251+
#grid-10-5-blocks-2-children-2 .grid-block {
252+
width: 19.57446809%;
253+
width: calc(20% - 16px + 12px);
254+
margin-left: 0.85106383%;
255+
margin-left: calc(0% + 0px + 8px);
256+
}
257+
#grid-10-5-blocks-2-children-2 .grid-block:first-child {
258+
margin-left: -0.63829787%;
259+
margin-left: calc(0% + 0px + -6px);
260+
}
261+
#grid-10-5-blocks-2-children-2 .grid-block:last-child {
262+
margin-right: -0.63829787%;
263+
margin-right: calc(0% + 0px + -6px);
264+
}
265+
#grid-10-5-blocks-2-children-2 .grid-block .grid-block {
266+
width: 41.4893617%;
267+
width: calc(50% - 10px - 6px);
268+
margin-left: 10.63829787%;
269+
margin-left: calc(0% + 0px + 20px);
270+
}
271+
#grid-10-5-blocks-2-children-2 .grid-block .grid-block:first-child {
272+
margin-left: 3.19148936%;
273+
margin-left: calc(0% + 0px + 6px);
274+
}
275+
#grid-10-5-blocks-2-children-2 .grid-block .grid-block:last-child {
276+
margin-right: 3.19148936%;
277+
margin-right: calc(0% + 0px + 6px);
278+
}
251279
html {
252280
font-size: 16px;
253281
}

‎tests/stylesheet.less‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,6 +270,34 @@
270270
}
271271
}
272272
}
273+
#grid-10-5-blocks-2-children-2 {
274+
@-nudge: 6px;
275+
.use-column-grid(alt);
276+
277+
.grid-block {
278+
.width(2, (@-nudge * 2));
279+
.margin-left((@grid-gutter - @-nudge * 2));
280+
281+
&:first-child {
282+
.margin-left((@-nudge * -1));
283+
}
284+
&:last-child {
285+
.margin-right((@-nudge * -1));
286+
}
287+
288+
.grid-block {
289+
.width(1, 2, (@-nudge * 2));
290+
.margin-left(@grid-gutter, 2, (@-nudge * 2));
291+
292+
&:first-child {
293+
.margin-left((@-nudge), 2, (@-nudge * 2));
294+
}
295+
&:last-child {
296+
.margin-right((@-nudge), 2, (@-nudge * 2));
297+
}
298+
}
299+
}
300+
}
273301

274302

275303
// = = = = = = = = =

0 commit comments

Comments
 (0)