utilities.text/_utilities.text.scss at master · iotacss/utilities.text · 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
// Text Utility


// Options

$iota-utils-text              : true;

$iota-utils-text-namespace    : 'text-' !default;
$iota-utils-text-left-name    : 'left' !default;
$iota-utils-text-right-name   : 'right' !default;
$iota-utils-text-center-name  : 'center' !default;

$iota-utils-text-res          : false !default;
$iota-utils-text-breakpoints  : $iota-global-breakpoints !default;


// Helper Local Utilities

$iota-utils-text-var-text: $iota-global-utilities-namespace + $iota-utils-text-namespace;


// Text Utilities

.#{$iota-utils-text-var-text + $iota-utils-text-left-name} {
  @include _iota-direction-property('text-align', 'left');
}

.#{$iota-utils-text-var-text + $iota-utils-text-right-name} {
  @include _iota-direction-property('text-align', 'right');
}

.#{$iota-utils-text-var-text + $iota-utils-text-center-name} {
  text-align: center !important;
}


// Text Responsive Utilities

@if ($iota-utils-text-res == true) {

  @each $breakpoint-name, $breakpoint-size in $iota-utils-text-breakpoints {

    @media #{$breakpoint-size} {

      .#{$iota-utils-text-var-text + $iota-utils-text-left-name + $iota-global-breakpoint-separator + $breakpoint-name} {
        @include _iota-direction-property('text-align', 'left');
      }

      .#{$iota-utils-text-var-text + $iota-utils-text-right-name + $iota-global-breakpoint-separator + $breakpoint-name} {
        @include _iota-direction-property('text-align', 'right');
      }

      .#{$iota-utils-text-var-text + $iota-utils-text-center-name + $iota-global-breakpoint-separator + $breakpoint-name} {
        text-align: center !important;
      }

    }

  }

}