@angelscmf/front 1.0.27 → 1.0.28

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 (4) hide show
  1. package/package.json +1 -1
  2. package/sass/AngelsDesign.scss +1 -0
  3. package/sass/_AngelsScreenRanges.scss +82 -6
  4. package/sass/angelsTags/_a-table.scss +30 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@angelscmf/front",
3
- "version": "1.0.27",
3
+ "version": "1.0.28",
4
4
  "description": "",
5
5
  "license": "UNLICENSED",
6
6
  "author": "",
package/sass/AngelsDesign.scss CHANGED
@@ -20,4 +20,5 @@
20
20
  @forward 'angelsTags/a-igrid';
21
21
  @forward 'angelsTags/a-infra';
22
22
  @forward 'angelsTags/a-page';
23
+ @forward 'angelsTags/a-table';
23
24
  @forward 'angelsAnimation/AngelsAnimations';
package/sass/_AngelsScreenRanges.scss CHANGED
@@ -9,50 +9,110 @@
9
9
 
10
10
  .a-desktops-only {
11
11
 
12
- @media (min-width: $a-desktop-min-width) {
12
+ @media (max-width: $a-laptop-max-width) {
13
13
  display: none;
14
14
  }
15
15
  }
16
16
 
17
17
  .a-mobile-only {
18
- @media (min-width: $a-mobile-min-width) {
18
+ @media (min-width: $a-tablet-min-width) {
19
19
  display: none;
20
20
  }
21
21
  }
22
22
 
23
23
  .a-tablet-only {
24
- @media (min-width: $a-tablet-min-width) and (max-width: $a-tablet-max-width) {
24
+ @media (max-width: $a-mobile-max-width) {
25
+ display: none;
26
+ }
27
+
28
+ @media (min-width: $a-laptop-min-width) {
25
29
  display: none;
26
30
  }
27
31
  }
28
32
 
29
33
  .a-laptop-only {
30
- @media (min-width: $a-laptop-min-width) and (max-width: $a-laptop-max-width) {
34
+ @media (max-width: $a-tablet-max-width) {
35
+ display: none;
36
+ }
37
+
38
+ @media (min-width: $a-desktop-min-width) {
31
39
  display: none;
32
40
  }
33
41
  }
34
42
 
35
43
  .a-desktop-only {
36
- @media (min-width: $a-desktop-min-width) and (max-width: $a-desktop-max-width) {
44
+ @media (max-width: $a-laptop-max-width) {
45
+ display: none;
46
+ }
47
+
48
+ @media (min-width: $a-large-min-width) {
37
49
  display: none;
38
50
  }
39
51
  }
40
52
 
41
53
  .a-large-only {
42
- @media (min-width: $a-large-min-width) and (max-width: $a-large-max-width) {
54
+ @media (max-width: $a-desktop-max-width) {
55
+ display: none;
56
+ }
57
+
58
+ @media (min-width: $a-extra-min-width) {
43
59
  display: none;
44
60
  }
45
61
  }
46
62
 
47
63
  .a-extra-only {
64
+ @media (max-width: $a-large-max-width) {
65
+ display: none;
66
+ }
67
+ }
68
+
69
+ .a-mobile-off {
70
+ @media (max-width: $a-mobile-max-width) {
71
+ display: none;
72
+ }
73
+ }
74
+
75
+ .a-tablet-off {
76
+ @media (min-width: $a-tablet-min-width) and (max-width: $a-tablet-max-width) {
77
+ display: none;
78
+ }
79
+ }
80
+
81
+ .a-laptop-off {
82
+ @media (min-width: $a-laptop-min-width) and (max-width: $a-laptop-max-width) {
83
+ display: none;
84
+ }
85
+ }
86
+
87
+ .a-desktop-off {
88
+ @media (min-width: $a-desktop-min-width) and (max-width: $a-desktop-max-width) {
89
+ display: none;
90
+ }
91
+ }
92
+
93
+ .a-large-off {
94
+ @media (min-width: $a-large-min-width) and (max-width: $a-large-max-width) {
95
+ display: none;
96
+ }
97
+ }
98
+
99
+ .a-extra-off {
48
100
  @media (min-width: $a-extra-min-width) {
49
101
  display: none;
50
102
  }
51
103
  }
52
104
 
105
+
106
+
53
107
  /**
54
108
  * a Range and Less section
55
109
  */
110
+ .a-mobile-and-less {
111
+ @media (min-width: $a-tablet-min-width) {
112
+ display: none;
113
+ }
114
+ }
115
+
56
116
  .a-tablet-and-less {
57
117
  @media (min-width: $a-laptop-min-width) {
58
118
  display: none;
@@ -77,9 +137,19 @@
77
137
  }
78
138
  }
79
139
 
140
+ .a-extra-and-less {
141
+ // It displays always
142
+ }
143
+
144
+
80
145
  /**
81
146
  * a Range and More section
82
147
  */
148
+
149
+ .a-mobile-and-more {
150
+ // It displays always
151
+ }
152
+
83
153
  .a-tablet-and-more {
84
154
  @media (max-width: $a-mobile-max-width) {
85
155
  display: none;
@@ -102,4 +172,10 @@
102
172
  @media (max-width: $a-desktop-max-width) {
103
173
  display: none;
104
174
  }
175
+ }
176
+
177
+ .a-extra-and-more {
178
+ @media (max-width: $a-large-max-width) {
179
+ display: none;
180
+ }
105
181
  }
package/sass/angelsTags/_a-table.scss ADDED
@@ -0,0 +1,30 @@
1
+ :root {
2
+ --a-table-textColor: var(--a-textColor);
3
+ --a-table-verticalGapColor: var(--a-backgroundColor);
4
+ --a-table-verticalGapWidth: 1px;
5
+ --a-table-verticalGapStyle: solid;
6
+ }
7
+
8
+ .a-table {
9
+ color: var(--a-table-textColor);
10
+ border-collapse: collapse;
11
+ background-color: #eeeeee;
12
+
13
+ td,
14
+ th {
15
+ padding: .3em .5em;
16
+ }
17
+
18
+ td+td,
19
+ td+th,
20
+ th+td,
21
+ th+th {
22
+ border-left: var(--a-table-verticalGapWidth) var(--a-table-verticalGapStyle) var(--a-table-verticalGapColor);
23
+ }
24
+
25
+ tr {
26
+ &:nth-child(2n) {
27
+ background-color: #e7e7e7;
28
+ }
29
+ }
30
+ }