@morozeckiy/dd-lib 0.7.55 → 0.7.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/fesm2022/morozeckiy-dd-lib.mjs +141 -9
  2. package/fesm2022/morozeckiy-dd-lib.mjs.map +1 -1
  3. package/lib/core/services/validators.service.d.ts +2 -2
  4. package/lib/lib-svg/lib-svg.component.d.ts +3 -0
  5. package/lib/lib-svg-viewer/lib-svg-viewer.component.d.ts +28 -0
  6. package/morozeckiy-dd-lib-0.7.63.tgz +0 -0
  7. package/package.json +1 -1
  8. package/public-api.d.ts +1 -0
  9. package/assets/fonts/ALS_Sirius_Bold_0.95.otf +0 -0
  10. package/assets/fonts/ALS_Sirius_Medium_1.6.otf +0 -0
  11. package/assets/fonts/ALS_Sirius_Regular_0.95.otf +0 -0
  12. package/assets/images/png/404-d.png +0 -0
  13. package/assets/images/png/404.png +0 -0
  14. package/assets/images/png/error-page-d.png +0 -0
  15. package/assets/images/png/error-page.png +0 -0
  16. package/assets/images/png/iphone.png +0 -0
  17. package/assets/images/png/not-found-d.png +0 -0
  18. package/assets/images/png/not-found.png +0 -0
  19. package/assets/images/png/tech-works-d.png +0 -0
  20. package/assets/images/png/tech-works.png +0 -0
  21. package/assets/images/svg/actogone-accept.svg +0 -4
  22. package/assets/images/svg/all.svg +0 -4
  23. package/assets/images/svg/appgalery.svg +0 -32
  24. package/assets/images/svg/appstore.svg +0 -26
  25. package/assets/images/svg/arrow-down-red.svg +0 -12
  26. package/assets/images/svg/arrow-up-green.svg +0 -12
  27. package/assets/images/svg/back-arrow.svg +0 -11
  28. package/assets/images/svg/burger.svg +0 -5
  29. package/assets/images/svg/calendar.svg +0 -13
  30. package/assets/images/svg/check-green.svg +0 -10
  31. package/assets/images/svg/check-white.svg +0 -5
  32. package/assets/images/svg/circle-no.svg +0 -4
  33. package/assets/images/svg/clear.svg +0 -11
  34. package/assets/images/svg/close.svg +0 -4
  35. package/assets/images/svg/danger_t.svg +0 -5
  36. package/assets/images/svg/dd-m.svg +0 -11
  37. package/assets/images/svg/dd.svg +0 -29
  38. package/assets/images/svg/dobrodel.svg +0 -15
  39. package/assets/images/svg/down-chevron.svg +0 -11
  40. package/assets/images/svg/download.svg +0 -14
  41. package/assets/images/svg/eds-2-m.svg +0 -34
  42. package/assets/images/svg/eds-2.svg +0 -34
  43. package/assets/images/svg/eds-m.svg +0 -31
  44. package/assets/images/svg/eds.svg +0 -84
  45. package/assets/images/svg/entry.svg +0 -5
  46. package/assets/images/svg/error-hint.svg +0 -5
  47. package/assets/images/svg/esia.svg +0 -4
  48. package/assets/images/svg/eye-off.svg +0 -12
  49. package/assets/images/svg/eye.svg +0 -15
  50. package/assets/images/svg/file.svg +0 -12
  51. package/assets/images/svg/filter.svg +0 -11
  52. package/assets/images/svg/googleapp.svg +0 -28
  53. package/assets/images/svg/grid.svg +0 -6
  54. package/assets/images/svg/health-m.svg +0 -45
  55. package/assets/images/svg/health.svg +0 -115
  56. package/assets/images/svg/info-circle.svg +0 -14
  57. package/assets/images/svg/info_t.svg +0 -5
  58. package/assets/images/svg/left-chevron.svg +0 -10
  59. package/assets/images/svg/list-search.svg +0 -7
  60. package/assets/images/svg/logout.svg +0 -5
  61. package/assets/images/svg/mail-exclamation.svg +0 -13
  62. package/assets/images/svg/max-filter.svg +0 -18
  63. package/assets/images/svg/moon.svg +0 -3
  64. package/assets/images/svg/my-m.svg +0 -80
  65. package/assets/images/svg/my.svg +0 -141
  66. package/assets/images/svg/news.svg +0 -6
  67. package/assets/images/svg/next.svg +0 -6
  68. package/assets/images/svg/paperclip.svg +0 -12
  69. package/assets/images/svg/pen-edit.svg +0 -4
  70. package/assets/images/svg/pgu-mo-m.svg +0 -306
  71. package/assets/images/svg/pgu-mo.svg +0 -586
  72. package/assets/images/svg/plug-d.svg +0 -61
  73. package/assets/images/svg/plug.svg +0 -61
  74. package/assets/images/svg/plus.svg +0 -4
  75. package/assets/images/svg/preset.svg +0 -11
  76. package/assets/images/svg/prev.svg +0 -6
  77. package/assets/images/svg/print.svg +0 -12
  78. package/assets/images/svg/printer.svg +0 -18
  79. package/assets/images/svg/question-white-g.svg +0 -14
  80. package/assets/images/svg/question.svg +0 -14
  81. package/assets/images/svg/red-close.svg +0 -11
  82. package/assets/images/svg/reload.svg +0 -11
  83. package/assets/images/svg/right-chevron.svg +0 -10
  84. package/assets/images/svg/rustore.svg +0 -35
  85. package/assets/images/svg/search.svg +0 -13
  86. package/assets/images/svg/send.svg +0 -13
  87. package/assets/images/svg/set-avatar.svg +0 -7
  88. package/assets/images/svg/shared-logo.svg +0 -29
  89. package/assets/images/svg/small-round-loader.svg +0 -19
  90. package/assets/images/svg/sort.svg +0 -15
  91. package/assets/images/svg/star.svg +0 -3
  92. package/assets/images/svg/success_t.svg +0 -5
  93. package/assets/images/svg/sun.svg +0 -4
  94. package/assets/images/svg/tg.svg +0 -5
  95. package/assets/images/svg/toggle_arrow_left.svg +0 -8
  96. package/assets/images/svg/toggle_arrow_right.svg +0 -9
  97. package/assets/images/svg/trash.svg +0 -14
  98. package/assets/images/svg/trophy.svg +0 -8
  99. package/assets/images/svg/user-empty-d.svg +0 -12
  100. package/assets/images/svg/user-empty.svg +0 -12
  101. package/assets/images/svg/user.svg +0 -4
  102. package/assets/images/svg/vk.svg +0 -5
  103. package/assets/images/svg/warning_t.svg +0 -5
  104. package/assets/json/rating.json +0 -881
  105. package/assets/scss/common.scss +0 -395
  106. package/assets/scss/fonts.scss +0 -23
  107. package/assets/scss/grid.scss +0 -158
  108. package/assets/scss/keyframes.scss +0 -26
  109. package/assets/scss/mixins.scss +0 -123
  110. package/assets/scss/reset.scss +0 -154
  111. package/assets/scss/theme.scss +0 -68
  112. package/assets/scss/titles.scss +0 -299
  113. package/assets/scss/vars-dark.scss +0 -140
  114. package/assets/scss/vars-light.scss +0 -140
  115. package/assets/scss/vars.scss +0 -4
  116. package/assets/styles.scss +0 -13
  117. package/morozeckiy-dd-lib-0.7.54.tgz +0 -0
  118. package/morozeckiy-dd-lib-0.7.55.tgz +0 -0
@@ -1,395 +0,0 @@
1
- @use '../scss/mixins' as *;
2
- @use '../scss/fonts' as *;
3
- @use '../scss/vars' as *;
4
- @use '../scss/grid' as *;
5
-
6
- html {
7
- font-family: 'ALS_Sirius', Roboto, Helvetica, Arial, san-serif, serif; /* 1 */
8
- -ms-text-size-adjust: 100%; /* 2 */
9
- -webkit-text-size-adjust: 100%; /* 2 */
10
- color: var(--light-black-color);
11
- }
12
-
13
- .root-container {
14
- min-height: calc(100vh - var(--header-height));
15
- background-color: var(--main-bgc);
16
- //overflow: hidden; //выпадашка поиска в подписка гор воды закатывается под футер
17
- }
18
-
19
- .main-width {
20
- width: 100%;
21
- max-width: var(--main-body-width);
22
- margin: 0 auto;
23
- }
24
-
25
- .g-container {
26
- max-width: var(--main-body-width);
27
- margin: 0 auto;
28
-
29
- @include below($mini-desktop) {
30
- padding-left: var(--side-padding);
31
- padding-right: var(--side-padding);
32
- }
33
-
34
- @include below($mobile) {
35
- padding-left: var(--side-padding-mobile);
36
- padding-right: var(--side-padding-mobile);
37
- }
38
- }
39
-
40
- .g-overlay {
41
- position: fixed;
42
- top: 0;
43
- left: 0;
44
- z-index: 1000;
45
- width: 100%;
46
- height: 100%;
47
- background: #251c2cb2;
48
- backdrop-filter: blur(10px);
49
- -webkit-backdrop-filter: blur(10px);
50
- }
51
-
52
- .g-table {
53
- border: 1px solid var(--gray-color-200);
54
- border-radius: 24px;
55
- overflow: hidden;
56
-
57
- @include below($tablet) {
58
- border: none;
59
- border-radius: 0;
60
- }
61
-
62
- &__body {
63
- overflow: auto;
64
- }
65
-
66
- &__header,
67
- &__item {
68
- display: flex;
69
- padding: 12px 20px;
70
- font-size: 14px;
71
- line-height: 24px;
72
- color: var(--light-black-color);
73
-
74
- &:not(:last-child) {
75
- border-bottom: 1px solid var(--gray-color-200);
76
-
77
- @include below($tablet) {
78
- margin-bottom: 16px;
79
- }
80
- }
81
-
82
- @include below($tablet) {
83
- position: relative;
84
- display: block;
85
- padding: 16px;
86
- border-radius: 24px;
87
- border: 1px solid var(--disabled-bgc);
88
- background-color: var(--gray-color-300);
89
- }
90
- }
91
-
92
- &__header {
93
- color: var(--second-gray-color);
94
- background-color: var(--gray-bgc-2);
95
- }
96
-
97
- &__cell {
98
- &.numb {
99
- width: 5%;
100
-
101
- @include below($tablet) {
102
- display: inline-flex;
103
- margin-bottom: 8px;
104
- padding: 0 8px;
105
- border-radius: 10px;
106
- width: auto;
107
- height: 32px;
108
- line-height: 32px;
109
- background-color: var(--disabled-color);
110
- color: var(--white-color);
111
- }
112
- }
113
- }
114
- }
115
-
116
- .half-width {
117
- width: 50%;
118
- }
119
-
120
-
121
- .full-width {
122
- width: 100%;
123
- }
124
-
125
- .full-height {
126
- height: 100%;
127
- }
128
-
129
- .full-size {
130
- height: 100%;
131
- width: 100%;
132
- }
133
-
134
- .pos-relative {
135
- position: relative;
136
- }
137
-
138
- .pos-absolute {
139
- position: absolute;
140
- }
141
-
142
- .d-block {
143
- display: block;
144
- }
145
-
146
- .d-inline-flex {
147
- display: inline-flex;
148
- }
149
-
150
- .d-flex {
151
- display: flex;
152
-
153
- &.f-1 {
154
- flex: 1;
155
- }
156
- }
157
-
158
- .d-grid {
159
- display: grid;
160
- }
161
-
162
- .flex-column {
163
- display: flex;
164
- flex-direction: column;
165
- }
166
-
167
- .flex-gap-column {
168
- display: flex;
169
- flex-direction: column;
170
- gap: 8px;
171
- }
172
-
173
- .align-center {
174
- align-items: center;
175
- }
176
-
177
- .align-start {
178
- align-items: flex-start;
179
- }
180
-
181
- .align-end {
182
- align-items: flex-end;
183
- }
184
-
185
- .justify-between {
186
- justify-content: space-between;
187
- }
188
-
189
- .justify-end {
190
- justify-content: flex-end;
191
- }
192
-
193
- .justify-start {
194
- justify-content: flex-start;
195
- }
196
-
197
- .justify-around {
198
- justify-content: space-around;
199
- }
200
-
201
- .justify-center {
202
- justify-content: center;
203
- }
204
-
205
- .flex-wrap {
206
- flex-wrap: wrap;
207
- }
208
-
209
- .fixed {
210
- position: fixed;
211
- }
212
-
213
- ::-webkit-scrollbar {
214
- width: 4px;
215
- margin-bottom: 15px;
216
- }
217
-
218
- ::-webkit-scrollbar-track {
219
- background-color: var(--input-gray-bgc);
220
- margin-bottom: 15px;
221
- }
222
-
223
- ::-webkit-scrollbar-thumb {
224
- background-color: rgba(130, 129, 129, 0.47);
225
- border-radius: 20px;
226
- }
227
-
228
- .gray-svg {
229
- filter: contrast(0);
230
- }
231
-
232
- .opacity-3 {
233
- opacity: 0.3;
234
- }
235
-
236
- .black-svg {
237
- filter: brightness(0);
238
- }
239
-
240
- .disabled {
241
- pointer-events: none;
242
- cursor: auto;
243
- }
244
-
245
- .bg-center,
246
- .bg-contain,
247
- .bg-cover {
248
- background-repeat: no-repeat;
249
- background-position: center;
250
- }
251
-
252
- .bg-contain {
253
- background-size: contain;
254
- }
255
-
256
- .bg-cover {
257
- background-size: cover;
258
- }
259
-
260
- .empty-photo {
261
- background: url('../images/svg/user-empty.svg') no-repeat center;
262
- width: 100px;
263
- height: 100px;
264
- }
265
-
266
- .cdk-overlay-pane {
267
- &.right {
268
- margin-left: 35px;
269
- }
270
-
271
- &.left {
272
- margin-right: 35px;
273
- }
274
-
275
- &.top {
276
- margin-bottom: 16px;
277
- }
278
-
279
- &.bottom {
280
- margin-top: 16px;
281
- }
282
-
283
- &.toast-top {
284
- margin-top: -20px;
285
- }
286
- }
287
-
288
- .column-tablet {
289
- @include below($tablet) {
290
- flex-direction: column;
291
- align-items: baseline;
292
- }
293
- }
294
-
295
- .show-tablet {
296
- display: none !important;
297
-
298
- @include below($tablet) {
299
- display: block !important;
300
- }
301
- }
302
-
303
- .column-mobile {
304
- @include below($mobile) {
305
- flex-direction: column;
306
- align-items: baseline;
307
- }
308
- }
309
-
310
- .show-mobile {
311
- display: none !important;
312
-
313
- @include below($mobile) {
314
- display: block !important;
315
- }
316
- }
317
-
318
- .tablet-flex {
319
- @include below($tablet) {
320
- display: flex !important;
321
- }
322
- }
323
-
324
- .mobile-flex {
325
- @include below($mobile) {
326
- display: flex !important;
327
- }
328
- }
329
-
330
- .hide-tablet {
331
- @include below($tablet) {
332
- display: none !important;
333
- }
334
- }
335
-
336
- .hide-mobile {
337
- @include below($mobile) {
338
- display: none !important;
339
- }
340
- }
341
-
342
- .cup {
343
- cursor: pointer;
344
- }
345
-
346
- .dd-default-table {
347
- border-radius: 24px;
348
- border: 1px solid var(--shared-bgc);
349
- overflow: auto;
350
-
351
- &__header {
352
- padding: 12px 20px;
353
- display: flex;
354
- background-color: var(--gray-bgc-2);
355
- color: var(--second-gray-color);
356
- font-size: 14px;
357
- font-weight: 400;
358
- line-height: 24px;
359
- text-align: left;
360
- }
361
-
362
- &__item {
363
- padding: 12px 20px;
364
- display: flex;
365
- }
366
- }
367
-
368
- .dd-default-table-cell {
369
- &:nth-child(1) {
370
- width: 5%;
371
- }
372
-
373
- &:nth-child(2) {
374
- width: 35%;
375
- }
376
-
377
- &:nth-child(3) {
378
- width: 30%;
379
- }
380
-
381
- &:nth-child(4) {
382
- width: 30%;
383
- }
384
- }
385
-
386
- @include offsets('');
387
- @include grid('', $col-count);
388
-
389
- @include below($tablet) {
390
- @include offsets('t-');
391
- }
392
-
393
- @include below($mobile) {
394
- @include offsets('m-');
395
- }
@@ -1,23 +0,0 @@
1
- @font-face {
2
- font-family: 'ALS_Sirius';
3
- src: url('../fonts/ALS_Sirius_Regular_0.95.otf');
4
- font-weight: 400;
5
- font-style: normal;
6
- font-display: swap;
7
- }
8
-
9
- @font-face {
10
- font-family: 'ALS_Sirius';
11
- src: url('../fonts/ALS_Sirius_Medium_1.6.otf');
12
- font-weight: 500;
13
- font-style: normal;
14
- font-display: swap;
15
- }
16
-
17
- @font-face {
18
- font-family: 'ALS_Sirius';
19
- src: url('../fonts/ALS_Sirius_Bold_0.95.otf');
20
- font-weight: 700;
21
- font-style: normal;
22
- font-display: swap;
23
- }
@@ -1,158 +0,0 @@
1
-
2
- /* autoprefixer grid: autoplace */
3
- $col-count: 3;
4
- $col-md-count: 6;
5
- $col-lg-count: 12;
6
-
7
- @mixin grid($prefix, $col-count) {
8
- @for $i from 1 through $col-count {
9
- .col#{$prefix}-#{$i} {
10
- /* autoprefixer grid: ignore next */
11
- grid-column-end: span $i;
12
- -ms-grid-column-span: $i * 2 - 1 ;
13
- min-width: 0; // fix for overflow hidden in ff
14
- }
15
- }
16
-
17
- @for $i from 1 through $col-count - 1 {
18
- .push#{$prefix}-#{$i} {
19
- /* autoprefixer grid: ignore next */
20
- grid-column-start: $i + 1;
21
- -ms-grid-column: $i * 2;
22
- }
23
- }
24
- }
25
-
26
-
27
- .container {
28
- box-sizing: border-box;
29
- padding: 0 16px;
30
- margin: 0 auto;
31
- }
32
-
33
- .grid-row {
34
- display: grid;
35
- grid-template-columns: repeat($col-count, 1fr);
36
- grid-template-rows: auto;
37
- grid-gap: 32px;
38
-
39
- @include grid('', $col-count);
40
- }
41
-
42
- .grid-none {
43
- display: block;
44
- }
45
-
46
- .masonry {
47
- display: grid;
48
- @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
49
- display: -ms-grid;
50
- }
51
- column-gap: 32px;
52
- row-gap: 16px;
53
- }
54
-
55
-
56
- @media all and (min-width: 768px) {
57
- .container {
58
- padding: 0 64px;
59
- }
60
-
61
- .grid-row,
62
- .grid-row-md {
63
- display: grid;
64
- grid-template-columns: repeat($col-md-count, 1fr);
65
- grid-template-rows: auto;
66
- grid-gap: 32px;
67
-
68
- @include grid('-md', $col-md-count);
69
- }
70
-
71
- .grid-none-md {
72
- display: block;
73
- }
74
-
75
- .masonry {
76
- grid-template-columns: repeat(1, minmax(566px,1fr));
77
- -ms-grid-columns: minmax(400px, 1fr) minmax(400px, 1fr);
78
-
79
- &.masonry-ie {
80
- content: '';
81
- display: table;
82
- clear: both;
83
- .masonry-brick {
84
- float: left;
85
- width: 46%;
86
- margin: 0 2% 32px 2%;
87
- }
88
- }
89
- }
90
- }
91
-
92
- @media all and (min-width: 1140px) {
93
- .container, .container-lg {
94
- max-width: 1366px;
95
- padding: 0 72px;
96
- margin: 0 auto;
97
- }
98
-
99
- .grid-row,
100
- .grid-row-lg {
101
- display: grid;
102
- grid-template-columns: repeat($col-lg-count, 1fr);
103
- grid-template-rows: auto;
104
- grid-gap: 32px;
105
-
106
- &.base-9 {
107
- display: grid;
108
- grid-template-columns: repeat(9, 1fr);
109
- grid-template-rows: auto;
110
- }
111
-
112
- @include grid('-lg', $col-lg-count);
113
- }
114
-
115
- .grid-none-lg {
116
- display: block;
117
- }
118
-
119
- .masonry {
120
- grid-template-columns: repeat(2, minmax(300px,1fr));
121
- }
122
- }
123
-
124
- @media print {
125
- @mixin grid($prefix, $col-count) {
126
- @for $i from 1 through $col-count {
127
- .col#{$prefix}-#{$i} {
128
- /* autoprefixer grid: ignore next */
129
- grid-column-end: span $i;
130
- -ms-grid-column-span: $i * 2 - 1 ;
131
- }
132
- }
133
-
134
- @for $i from 1 through $col-count - 1 {
135
- .push#{$prefix}-#{$i} {
136
- /* autoprefixer grid: ignore next */
137
- grid-column-start: $i + 1;
138
- -ms-grid-column: $i * 2;
139
- }
140
- }
141
- }
142
-
143
-
144
- .container {
145
- box-sizing: border-box;
146
- padding: 0 16px;
147
- margin: 0;
148
- }
149
-
150
- .grid-row {
151
- display: grid;
152
- grid-template-columns: repeat($col-count, 1fr);
153
- grid-template-rows: auto;
154
- grid-gap: 32px;
155
-
156
- @include grid('', $col-count);
157
- }
158
- }
@@ -1,26 +0,0 @@
1
- @keyframes shift {
2
- 0% {
3
- transform: translateX(-100%);
4
- }
5
- 100% {
6
- transform: translateX(0);
7
- }
8
- }
9
-
10
- @keyframes filter-show {
11
- 0% {
12
- transform: translateY(-10%);
13
- }
14
- 100% {
15
- transform: translateY(0);
16
- }
17
- }
18
-
19
- @keyframes rotation {
20
- 0% {
21
- transform: rotate(0deg);
22
- }
23
- 100% {
24
- transform: rotate(360deg);
25
- }
26
- }
@@ -1,123 +0,0 @@
1
- // =============================================================================
2
- // Медиа запросы
3
- // =============================================================================
4
-
5
- // меньше указанной величины (по умолчанию ширина)
6
- @mixin below($width, $orientation: 'width') {
7
- @media screen and (max-#{$orientation}: $width) {
8
- @content;
9
- }
10
- }
11
-
12
- // больше указанной величины (по умолчанию ширина)
13
- @mixin above($width, $orientation: 'width') {
14
- @media screen and (min-#{$orientation}: $width) {
15
- @content;
16
- }
17
- }
18
-
19
- // между первой и второй величиной (по умолчанию ширина)
20
- @mixin between($minWidth, $maxWidth, $orientation: 'width') {
21
- @media screen and (min-#{$orientation}: $minWidth) and (max-#{$orientation}: $maxWidth) {
22
- @content;
23
- }
24
- }
25
-
26
- // =============================================================================
27
- // String Replace (вспомогательный миксин для font-face)
28
- // =============================================================================
29
-
30
- @function str-replace($string, $search, $replace: '') {
31
- $index: str-index($string, $search);
32
-
33
- @if $index {
34
- @return str-slice($string, 1, $index - 1) + $replace +
35
- str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
36
- }
37
-
38
- @return $string;
39
- }
40
-
41
- // =============================================================================
42
- // Font Face
43
- // =============================================================================
44
-
45
- // $name - название для font-family
46
- // $path - путь к шрифту без формата
47
- // $weight - font-weight
48
- // $style - font-style
49
- // $exts - форматы шрифта, которые используются
50
- @mixin font-face($name, $path, $weight: null, $style: null, $exts: otf eot woff2 woff ttf svg) {
51
- $src: null;
52
-
53
- $extmods: (
54
- eot: '?',
55
- svg: '#' + str-replace($name, ' ', '_'),
56
- );
57
-
58
- $formats: (
59
- otf: 'opentype',
60
- ttf: 'truetype',
61
- );
62
-
63
- @each $ext in $exts {
64
- $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
65
- $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
66
- $src: append($src, url(quote($path + '.' + $extmod)) format(quote($format)), comma);
67
- }
68
-
69
- @font-face {
70
- font-family: quote($name);
71
- font-style: $style;
72
- font-weight: $weight;
73
- src: $src;
74
- }
75
- }
76
-
77
- @mixin offsets($prefix) {
78
- @for $i from 0 through 24 {
79
- .#{$prefix}mt-#{$i * 4} {
80
- margin-top: #{$i * 4}px;
81
- }
82
-
83
- .#{$prefix}mb-#{$i * 4} {
84
- margin-bottom: #{$i * 4}px;
85
- }
86
-
87
- .#{$prefix}ml-#{$i * 4} {
88
- margin-left: #{$i * 4}px;
89
- }
90
-
91
- .#{$prefix}mr-#{$i * 4} {
92
- margin-right: #{$i * 4}px;
93
- }
94
-
95
- .#{$prefix}m-#{$i * 4} {
96
- margin: #{$i * 4}px;
97
- }
98
-
99
- .#{$prefix}pt-#{$i * 4} {
100
- padding-top: #{$i * 4}px;
101
- }
102
-
103
- .#{$prefix}pb-#{$i * 4} {
104
- padding-bottom: #{$i * 4}px;
105
- }
106
-
107
- .#{$prefix}pl-#{$i * 4} {
108
- padding-left: #{$i * 4}px;
109
- }
110
-
111
- .#{$prefix}pr-#{$i * 4} {
112
- padding-right: #{$i * 4}px;
113
- }
114
-
115
- .#{$prefix}p-#{$i * 4} {
116
- padding: #{$i * 4}px;
117
- }
118
-
119
- .#{$prefix}gap-#{$i * 4} {
120
- gap: #{$i * 4}px;
121
- }
122
- }
123
- }