1 | @mixin str-truncated($max-width: 82%) {
|
2 | display: inline-block;
|
3 | overflow: hidden;
|
4 | text-overflow: ellipsis;
|
5 | vertical-align: top;
|
6 | white-space: nowrap;
|
7 | max-width: $max-width;
|
8 | }
|
9 |
|
10 | @mixin mask-chevron-down {
|
11 | mask-image: url('#{$gl-icon-chevron-down}');
|
12 | mask-repeat: no-repeat;
|
13 | mask-position: center;
|
14 | mask-size: cover;
|
15 | }
|
16 |
|
17 | @mixin gl-fluid-font-size($min, $max) {
|
18 | @include gl-responsive-property('font-size', $min, $max);
|
19 | }
|
20 |
|
21 | @mixin gl-fluid-line-height($min, $max) {
|
22 | @include gl-responsive-property('line-height', $min, $max);
|
23 | }
|
24 |
|
25 |
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 | @mixin gl-responsive-property($property, $min, $max) {
|
38 | #{$property}: clamp-between($min, $max);
|
39 | }
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 | @mixin gl-focus(
|
47 | $size: null,
|
48 | $color: false,
|
49 | $important: false,
|
50 | $inset: false,
|
51 | $focus-ring: $focus-ring,
|
52 | $outline: false,
|
53 | $outline-offset: $outline-offset
|
54 | ) {
|
55 | @if $inset == true {
|
56 | @if $color {
|
57 | box-shadow: inset 0 0 0 $outline-width $blue-400,
|
58 | inset 0 0 0 #{$outline-width + $outline-offset} $white,
|
59 | inset 0 0 0 #{$outline-width + $outline-offset + 1px} $color,
|
60 | $focus-ring-inset if-important($important);
|
61 | outline: none if-important($important);
|
62 | } @else if $outline == true {
|
63 | outline: $focus-ring-outline if-important($important);
|
64 | outline-offset: $outline-offset;
|
65 | } @else {
|
66 | box-shadow: inset 0 0 0 $outline-width $blue-400, $focus-ring-inset if-important($important);
|
67 | outline: none if-important($important);
|
68 | }
|
69 | } @else if $color {
|
70 | box-shadow: inset 0 0 0 $gl-border-size-1 $color, $focus-ring if-important($important);
|
71 | outline: none if-important($important);
|
72 | } @else if $outline == true {
|
73 | outline: $focus-ring-outline if-important($important);
|
74 | outline-offset: $outline-offset;
|
75 | } @else {
|
76 | box-shadow: $focus-ring if-important($important);
|
77 | outline: none if-important($important);
|
78 | }
|
79 | }
|
80 |
|
81 | @mixin gl-bg-gradient-blur($direction, $color) {
|
82 | background-image: linear-gradient(to $direction, $transparent-rgba, $color 33%);
|
83 | }
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 | @mixin gl-media-breakpoint-up($name) {
|
92 | $min: map-get($breakpoints, $name);
|
93 | @if $min == null {
|
94 | @error "#{$name} is not a valid breakpoint for this @media query.";
|
95 | }
|
96 | @if $min != 0 {
|
97 | @media (min-width: $min) {
|
98 | @content;
|
99 | }
|
100 | } @else {
|
101 | @content;
|
102 | }
|
103 | }
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 | @mixin gl-media-breakpoint-down($name) {
|
117 | $max: map-get($breakpoints, $name);
|
118 | @if ($max == null or $max == 0) {
|
119 | @error "#{$name} is not a valid breakpoint for this @media query.";
|
120 | }
|
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 | $breakpoint-max-range-precision: 0.02px;
|
127 |
|
128 | @media (max-width: $max - $breakpoint-max-range-precision) {
|
129 | @content;
|
130 | }
|
131 | }
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 |
|
140 | @function get-font-size-variable($size, $fixed) {
|
141 | @if $fixed == true {
|
142 | @if map-has-key($gl-font-sizes-fixed, $size) {
|
143 | @return map-get($gl-font-sizes-fixed, $size);
|
144 | } @else {
|
145 | @error "#{$size} is not a valid fixed font size property";
|
146 | @return null;
|
147 | }
|
148 | } @else {
|
149 | @if map-has-key($gl-font-sizes, $size) {
|
150 | @return map-get($gl-font-sizes, $size);
|
151 | } @else {
|
152 | @error "#{$size} is not a valid font size property";
|
153 | @return null;
|
154 | }
|
155 | }
|
156 | }
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 | @mixin gl-heading-scale($size, $fixed: false) {
|
169 | font-weight: $gl-font-weight-heading;
|
170 | margin-top: 0;
|
171 | font-size: get-font-size-variable($size, $fixed);
|
172 |
|
173 |
|
174 | @if ($size <= 500) {
|
175 | letter-spacing: $gl-letter-spacing-heading;
|
176 | } @else {
|
177 | letter-spacing: $gl-letter-spacing-heading-reduced;
|
178 | }
|
179 |
|
180 |
|
181 | @if ($size == 800) {
|
182 | line-height: $gl-line-height-heading-display;
|
183 | } @else {
|
184 | line-height: $gl-line-height-heading;
|
185 | }
|
186 | }
|