UNPKG

2.48 kBSCSSView Raw
1/**
2* Display utilities
3*
4* Naming convention gl-display-{property-value}
5*/
6@mixin gl-display-none {
7 display: none;
8}
9
10@mixin gl-sm-display-none {
11 @include gl-media-breakpoint-up(sm) {
12 @include gl-display-none;
13 }
14}
15
16@mixin gl-md-display-none {
17 @include gl-media-breakpoint-up(md) {
18 @include gl-display-none;
19 }
20}
21
22@mixin gl-lg-display-none {
23 @include gl-media-breakpoint-up(lg) {
24 @include gl-display-none;
25 }
26}
27
28@mixin gl-display-flex {
29 display: flex;
30}
31
32@mixin gl-sm-display-flex {
33 @include gl-media-breakpoint-up(sm) {
34 @include gl-display-flex;
35 }
36}
37
38@mixin gl-md-display-flex {
39 @include gl-media-breakpoint-up(md) {
40 @include gl-display-flex;
41 }
42}
43
44@mixin gl-lg-display-flex {
45 @include gl-media-breakpoint-up(lg) {
46 @include gl-display-flex;
47 }
48}
49
50@mixin gl-display-inline-flex {
51 display: inline-flex;
52}
53
54@mixin gl-sm-display-inline-flex {
55 @include gl-media-breakpoint-up(sm) {
56 @include gl-display-inline-flex;
57 }
58}
59
60@mixin gl-md-display-inline-flex {
61 @include gl-media-breakpoint-up(md) {
62 @include gl-display-inline-flex;
63 }
64}
65
66@mixin gl-lg-display-inline-flex {
67 @include gl-media-breakpoint-up(lg) {
68 @include gl-display-inline-flex;
69 }
70}
71
72@mixin gl-display-block {
73 display: block;
74}
75
76@mixin gl-sm-display-block {
77 @include gl-media-breakpoint-up(sm) {
78 @include gl-display-block;
79 }
80}
81
82@mixin gl-md-display-block {
83 @include gl-media-breakpoint-up(md) {
84 @include gl-display-block;
85 }
86}
87
88@mixin gl-lg-display-block {
89 @include gl-media-breakpoint-up(lg) {
90 @include gl-display-block;
91 }
92}
93
94@mixin gl-display-inline {
95 display: inline;
96}
97
98@mixin gl-sm-display-inline {
99 @include gl-media-breakpoint-up(sm) {
100 @include gl-display-inline;
101 }
102}
103
104@mixin gl-display-inline-block {
105 display: inline-block;
106}
107
108@mixin gl-sm-display-inline-block {
109 @include gl-media-breakpoint-up(sm) {
110 @include gl-display-inline-block;
111 }
112}
113
114@mixin gl-md-display-inline-block {
115 @include gl-media-breakpoint-up(md) {
116 @include gl-display-inline-block;
117 }
118}
119
120@mixin gl-lg-display-inline-block {
121 @include gl-media-breakpoint-up(lg) {
122 @include gl-display-inline-block;
123 }
124}
125
126@mixin gl-display-table {
127 display: table;
128}
129
130@mixin gl-display-table-row {
131 display: table-row;
132}
133
134@mixin gl-display-table-cell {
135 display: table-cell;
136}
137
138@mixin gl-display-grid {
139 display: grid;
140}
141
142@mixin gl-lg-display-table-cell {
143 @include gl-media-breakpoint-up(lg) {
144 @include gl-display-table-cell;
145 }
146}