object.box/_object.box.scss at master · treeframework/object.box · GitHub

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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
// =============================================================================
//
// Name:          Box
//
// Description:   Boxes off content.
//
// Block:         `o-box`
//
// Modifiers:     `o-box--tiny`
//                `o-box--small`
//                `o-box--large`
//                `o-box--huge`
//
// Markup:
//
// <div class="o-box">...</div>
//
// <div class="o-box  o-box--large">...</div>
//
// =============================================================================


// Variables
// =============================================================================

// Predefine the variables below in order to alter and enable specific features.

$tree-box-namespace:         $tree-namespace !default;

$tree-box-padding:           $tree-base-spacing-unit !default;
$tree-box-padding--tiny:       quarter($tree-box-padding) !default;
$tree-box-padding--small:        halve($tree-box-padding) !default;
$tree-box-padding--large:       double($tree-box-padding) !default;
$tree-box-padding--huge:     quadruple($tree-box-padding) !default;

$tree-enable-box--flush:     false !default;
$tree-enable-box--tiny:      false !default;
$tree-enable-box--small:     false !default;
$tree-enable-box--large:     false !default;
$tree-enable-box--huge:      false !default;


// =============================================================================
// Block: `o-box`
// =============================================================================

// 1. So we can apply the `.o-box` class to naturally-inline elements.

.#{$tree-box-namespace}o-box {
    @extend %u-clearfix;
    display: block; // [1]
    padding: $tree-box-padding;

    > :last-child {
        margin-bottom: 0;
    }

}


@if ($tree-enable-box--flush == true) {

    // Modifier: `o-box--flush`
    // =========================================================================

    .#{$tree-box-namespace}o-box--flush {
        padding: 0;
    }

}

@if ($tree-enable-box--tiny == true) {

    // Modifier: `o-box--tiny`
    // =========================================================================

    .#{$tree-box-namespace}o-box--tiny {
        padding: $tree-box-padding--tiny;
    }

}

@if ($tree-enable-box--small == true) {

    // Modifier: `o-box--small`
    // =========================================================================

    .#{$tree-box-namespace}o-box--small {
        padding: $tree-box-padding--small;
    }

}

@if ($tree-enable-box--large == true) {

    // Modifier: `o-box--large`
    // =========================================================================

    .#{$tree-box-namespace}o-box--large {
        padding: $tree-box-padding--large;
    }

}

@if ($tree-enable-box--huge == true) {

    // Modifier: `o-box--huge`
    // =========================================================================

    .#{$tree-box-namespace}o-box--huge {
        padding: $tree-box-padding--huge;
    }

}