-
Notifications
You must be signed in to change notification settings - Fork 1
/
_plumber-box.scss
83 lines (75 loc) · 2.38 KB
/
_plumber-box.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
// PLUMBER BOX - Plumber extension to align boxes to the baseline grid
// https://github.com/jamonserrano/plumber-box
// https://jamonserrano.github.io/plumber-sass
// Copyright 2017 Viktor Honti
// MIT License
@mixin plumber-box(
$margin: 0 0,
$border: 0px 0px,
$padding: 0 0,
$grid-height: null
) {
// *** MAKE SURE THAT PLUMBER IS INCLUDED ***
@if not function-exists(-plumber-get-default) {
@error 'Plumber-box depends on plumber-sass. Please install and include plumber-sass first';
}
// *** VALIDATE PARAMETERS ***
// if grid-height is missing try to get it from Plumber defaults
@if not $grid-height {
$grid-height: -plumber-get-default(grid-height);
}
@if not $grid-height {
// no luck :(
@error '$grid-height must be passed as a parameter or defined with -plumber-set-defaults';
} @else if unitless($grid-height) or $grid-height <= 0 {
// got it, check validity
@error '$grid-height parameter must be a positive unit, got #{$grid-height} instead';
}
// if margin has one value use it for both top and bottom
@if length($margin) == 1 {
$top: $margin;
$margin: ($top $top);
}
// check validity
@each $value in $margin {
@if not -plumber-is-integer($value) {
@error '$margin values must be integers, got #{$value} instead';
}
}
// if margin has one value use it for both top and bottom
@if length($border) == 1 {
$top: $border;
$border: ($top $top);
}
// check validity
@each $value in $border {
@if unitless($value) and $value == 0 {
$value: 0px;
}
@else if unit($value) != 'px' or $value < 0 {
@error '$border values must be non-negative pixels, got #{$value} instead';
}
}
// if padding has one value use it for both top and bottom
@if length($padding) == 1 {
$top: $padding;
$padding: ($top $top);
}
// check validity
@each $value in $padding {
@if not -plumber-is-integer($value) or $value < 0 {
@error '$padding values must be non-negative integers, got #{$value} instead';
}
}
// *** CSS OUTPUT ***
@each $position, $index in (top: 1, bottom: 2) {
margin-#{$position}: nth($margin, $index) * $grid-height;
$currentPadding: nth($padding, $index);
$currentBorder: nth($border, $index);
@if $currentBorder > 0 and $currentPadding == 0 {
@error 'Cannot use borders with 0 padding';
}
padding-#{$position}: calc(#{$currentPadding * $grid-height} - #{$currentBorder});
border-#{$position}-width: $currentBorder;
}
}