CSS-Helper/helper.scss at master · Matildevoldsen/CSS-Helper · 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
$spaceamounts:(1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110);
$sides:(top, bottom, left, right);

@each $space in $spaceamounts {
  @each $side in $sides {
    .m-#{str-slice($side, 0, 1)}-#{$space} {
      margin-#{$side}: #{$space}px !important;
    }

    .p-#{str-slice($side, 0, 1)}-#{$space} {
      padding-#{$side}: #{$space}px !important;
    }
  }
}

@mixin display-flex() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

//Flex Container
.container {
  @include display-flex();
  width:auto;
  padding:0;
  margin:0;
  height:auto;
  align-items: center;
  justify-content:center;
}


//Aligning text to the set position.
.align-text-left {text-align: left !important;}

.align-text-center {text-align: center !important;}

.align-text-right {text-align: right !important;}


//Align left & Align Center should be applied to the main element.
.align-left {@include display-flex(); justify-content: space-between;}

.align-right {@include display-flex(); justify-content: space-between;}

.align-center {@include display-flex();justify-content: center; align-items: center;}