postcss-joqd/_helpers.css at master · IKAcc/postcss-joqd · 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

/*
=================================================================================================
# 8 Helpers
-------------------------------------------------------------------------------------------------
*/

  /*
  =============================================================================================
  # 8.1 Alignments
  ---------------------------------------------------------------------------------------------
  */

    .align-right{text-align: right}

    .align-center{text-align: center}

    .align-left{text-align: left}

    .align-top{align-self: flex-start}

    .align-middle{align-self: center}

    .align-bottom{align-self: flex-end}

    .align-content-top{
      align-items: flex-start;
      align-content: flex-start}

    .align-content-middle{
      align-items: center;
      align-content: center}

    .align-content-bottom{
      align-items: flex-end;
      align-content: flex-end}

  /*
  =============================================================================================
  # 8.2 Ratio
  ---------------------------------------------------------------------------------------------
  */

    .ratio-golden{
      @mixin aspect-ratio 1.618, 1;
    }

    .ratio-4-3{
      @mixin aspect-ratio 4, 3;
    }

    .ratio-16-9{
      @mixin aspect-ratio 16, 9;
    }

  /*
  =================================================================================================
  # 8.2 Maximum Lines
  -------------------------------------------------------------------------------------------------
  */

    [class*='max-line-']{
      display: block;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      position: relative;
      overflow: hidden;
      &:after{
        content: '';
        bottom: 0; left: 0;
        display: block;
        position: absolute;
        width: calc($gutter * 3)}
    }

    @for $i from 1 to 5{
      .max-line-$(i){
        @mixin max-line $i, $line-height, transparent;
      }
    }

  /*
  =================================================================================================
  # 8.3 Spacing
  -------------------------------------------------------------------------------------------------
  */

    .relative{position: relative}

    .padding{padding: calc($gutter / 2) !important}
    .no-padding{padding: 0 !important}
    .half-padding{padding: calc($gutter / 4) !important}
    .double-padding{padding: $gutter !important}

    .gaps{padding: * calc($gutter / 2) !important}
    .no-gaps{padding: * 0 !important}
    .half-gaps{padding: * calc($gutter / 4) !important}
    .double-gaps{padding: * $gutter !important}

    .gutter{padding: calc($gutter / 2) * !important}
    .no-gutter{padding: 0 * !important}
    .half-gutter{padding: calc($gutter / 4) * !important}
    .double-gutter{padding: $gutter  * !important}

    .no-margin{margin: 0 !important}

    .full-width{width: 100%}
    .full-height{height: 100%}