@andreyshpigunov/x 0.5.18 → 0.5.21

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.
package/index.html CHANGED
@@ -19,7 +19,7 @@
19
19
  "functionName": "headerAnimation"
20
20
  }'>
21
21
  <header class="header flex aic sticky t0 px5 m:px6 l:px8 unselectable">
22
- <div class="header-version nowrap">0.5.18</div>
22
+ <div class="header-version nowrap">0.5.21</div>
23
23
  <div class="header-logo mxa">
24
24
  <a role="button" x-scrollto="#top">
25
25
  <img src="assets/img/logo.png" alt="x" />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@andreyshpigunov/x",
3
- "version": "0.5.18",
3
+ "version": "0.5.21",
4
4
  "x-js": "dist/x.js",
5
5
  "app-js": "assets/js/app.js",
6
6
  "targets": {
@@ -58,7 +58,10 @@ All right reserved.
58
58
  .hidden-next (s,m,l,xl)
59
59
  .block (s,m,l,xl)
60
60
  .inline (s,m,l,xl)
61
- .inlineBlock (s,m,l,xl)
61
+ .inlineBlock (s,m,l,xl)
62
+ .table (s,m,l,xl)
63
+ .flex (s,m,l,xl)
64
+ .grid (s,m,l,xl)
62
65
  .fullscreen
63
66
  .max (s,m,l,xl)
64
67
  .w[10-190] step 10 (s,m,l,xl)
@@ -215,8 +218,9 @@ html.touch .touch-hide { display: none }
215
218
  .fix { position: fixed }
216
219
  .rel { position: relative }
217
220
  .abs { position: absolute }
218
- .ins { position: absolute; inset: 0 }
219
221
 
222
+ .inset { inset: 0 }
223
+ .fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
220
224
 
221
225
  /* !- Object fit */
222
226
  .fit-cover { object-fit: cover }
@@ -538,13 +542,15 @@ html.touch .touch-hide { display: none }
538
542
 
539
543
  /* !- Width, height */
540
544
  .fullscreen {
541
- min-width: 100vh;
542
- min-height: 100vh;
543
- }
544
- .max {
545
- width: 100%;
546
- max-width: 100%;
547
- }
545
+ width: 100vw;
546
+ height: 100vh;
547
+ }
548
+ .wmax { width: 100%; }
549
+ .hmax { width: 100%; }
550
+ .wscreen { width: 100vw; }
551
+ .hscreen { height: 100vh; }
552
+ .max { max-width: 100%; }
553
+ .hmax { max-height: 100%; }
548
554
 
549
555
  @for $i from 10 to 190 by 10 {
550
556
  .w$(i) { width: $(i)px }
@@ -12,24 +12,21 @@ All right reserved.
12
12
  .icon[10-60] step 2 (m,l) - icon size in px
13
13
  */
14
14
 
15
- [class*=icon],
16
- [class*=icon] > svg,
17
- [class*=icon] > img {
15
+ .icon,
16
+ .icon > svg,
17
+ .icon > img {
18
18
  display: inline-block;
19
19
  width: 1em;
20
20
  height: 1em;
21
21
  max-width: none;
22
22
  max-height: none;
23
23
  }
24
- [class*=icon] > svg,
25
- [class*=icon] > img {
26
- display: block;
27
- }
28
24
 
29
25
  @for $i from 10 to 60 by 2 {
30
26
  .icon$(i),
31
27
  .icon$(i) > svg,
32
28
  .icon$(i) > img {
29
+ display: inline-block;
33
30
  width: calc($(i)rem / 10);
34
31
  height: calc($(i)rem / 10);
35
32
  }
@@ -40,6 +37,7 @@ All right reserved.
40
37
  .m\:icon$(i),
41
38
  .m\:icon$(i) > svg,
42
39
  .m\:icon$(i) > img {
40
+ display: inline-block;
43
41
  width: calc($(i)rem / 10);
44
42
  height: calc($(i)rem / 10);
45
43
  }
@@ -51,8 +49,14 @@ All right reserved.
51
49
  .l\:icon$(i),
52
50
  .l\:icon$(i) > svg,
53
51
  .l\:icon$(i) > img {
52
+ display: inline-block;
54
53
  width: calc($(i)rem / 10);
55
54
  height: calc($(i)rem / 10);
56
55
  }
57
56
  }
58
57
  }
58
+
59
+ [class*=icon] > svg,
60
+ [class*=icon] > img {
61
+ display: block;
62
+ }