OrionCSS/07 - utilities/_utilities.position.scss at master · WebDevLuke/OrionCSS · 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
//--------------------------------------------------------------------------------------------------------------------------------------
// POSITION UTILITY
//--------------------------------------------------------------------------------------------------------------------------------------

/*
Simple utility classes to add position properties to elements
*/


// STANDARD
//--------------------------------------------------------------------------------------------------------------------------------------

.u-position-relative {
	position:relative !important;
}

.u-position-absolute {
	position:absolute !important;
}

.u-position-fixed {
	position:fixed !important;
}


// RESPONSIVE
//--------------------------------------------------------------------------------------------------------------------------------------

// Changes position when breakpoint is hit
// Example: .u-position-relative@md
@each $bp-name, $bp-value in $mq-breakpoints {
	@include mq(#{$bp-name}) {
		.u-position-relative\@#{$bp-name} {
			position:relative !important;
		}

		.u-position-absolute\@#{$bp-name} {
			position:absolute !important;
		}

		.u-position-fixed\@#{$bp-name} {
			position:fixed !important;
		}
	}
}

// Changes position until breakpoint is hit
// Example: .u-position-relative@max-md
@each $bp-name, $bp-value in $mq-breakpoints {
	@include mq($until: #{$bp-name}) {
		.u-position-relative\@max-#{$bp-name} {
			position:relative !important;
		}

		.u-position-absolute\@max-#{$bp-name} {
			position:absolute !important;
		}

		.u-position-fixed\@max-#{$bp-name} {
			position:fixed !important;
		}
	}
}