ar-design 0.4.2 → 0.4.3

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 (8) hide show
  1. package/dist/assets/css/components/data-display/table/scroll.css +201 -63
  2. package/dist/assets/css/components/data-display/table/styles.css +796 -292
  3. package/dist/assets/css/components/form/select/styles.css +0 -1
  4. package/dist/components/data-display/table/index.js +31 -6
  5. package/dist/components/form/select/Props.d.ts +3 -0
  6. package/dist/components/form/select/index.js +5 -5
  7. package/dist/components/navigation/pagination/index.js +2 -2
  8. package/package.json +1 -1
package/dist/assets/css/components/data-display/table/scroll.css CHANGED
@@ -1,70 +1,208 @@
1
- .ar-table:is(.scroll) > .content {
2
- max-width: 100%;
3
- overflow: auto;
4
- }
5
- .ar-table:is(.scroll) > .content > table > thead > tr > th {
6
- position: sticky;
7
- top: 0;
8
- }
9
- .ar-table > .content > table th[class^="sticky-"] {
10
- z-index: 50;
11
- }
12
- .ar-table > .content > table .sticky-left {
13
- position: sticky;
14
- left: 0;
15
- }
1
+ .ar-table {
2
+ /* Scroll durumu */
3
+ &:is(.scroll) {
4
+ > .content {
5
+ max-width: 100%;
6
+ overflow: auto;
16
7
 
17
- .ar-table > .content > table .sticky-right {
18
- position: sticky;
19
- right: 0;
20
- }
8
+ > table {
9
+ > thead {
10
+ > tr {
11
+ > th {
12
+ position: sticky;
13
+ top: 0;
14
+ }
15
+ }
16
+ }
17
+ }
18
+ }
19
+ }
21
20
 
22
- .ar-table > .content > table > thead > tr > th.sticky-left.sticky,
23
- .ar-table > .content > table > thead > tr > th.sticky-right.sticky,
24
- .ar-table > .content > table > thead > tr > th.sticky-left.active-sticky,
25
- .ar-table > .content > table > thead > tr > th.sticky-right.active-sticky {
26
- background-color: var(--gray-100);
27
- }
28
- .ar-table > .content > table > thead > tr > th.sticky-left.sticky::after,
29
- .ar-table > .content > table > thead > tr > th.sticky-left.active-sticky::after,
30
- .ar-table > .content > table > thead > tr > th.sticky-right.sticky::after,
31
- .ar-table > .content > table > thead > tr > th.sticky-right.active-sticky::after {
32
- position: absolute;
33
- top: 50%;
34
- transform: translateY(-50%);
35
- right: 0;
36
- content: "";
37
- background-color: var(--gray-200);
38
- width: 1px;
39
- height: 50%;
40
- }
41
- .ar-table > .content > table > thead > tr > th.sticky-right.sticky::after,
42
- .ar-table > .content > table > thead > tr > th.sticky-right.active-sticky::after {
43
- left: 0;
44
- right: auto;
21
+ > .content {
22
+ > table {
23
+ th[class^="sticky-"] {
24
+ z-index: 50;
25
+ }
26
+
27
+ > thead {
28
+ > tr {
29
+ > th {
30
+ &:is(.sticky-left, .sticky-right) {
31
+ &:is(.sticky, .active-sticky) {
32
+ background-color: var(--gray-100);
33
+
34
+ &::after {
35
+ position: absolute;
36
+ top: 50%;
37
+ transform: translateY(-50%);
38
+ content: "";
39
+ background-color: var(--gray-200);
40
+ width: 1px;
41
+ height: 50%;
42
+ }
43
+ }
44
+ }
45
+
46
+ &.sticky-left {
47
+ position: sticky;
48
+ left: 0;
49
+
50
+ &:is(.sticky, .active-sticky) {
51
+ &::after {
52
+ right: 0;
53
+ }
54
+ }
55
+ }
56
+
57
+ &.sticky-right {
58
+ position: sticky;
59
+ right: 0;
60
+
61
+ &:is(.sticky, .active-sticky) {
62
+ &::after {
63
+ left: 0;
64
+ right: auto;
65
+ }
66
+ }
67
+ }
68
+ }
69
+ }
70
+ }
71
+
72
+ > tbody {
73
+ > tr {
74
+ > td {
75
+ &:is(.sticky-left, .sticky-right) {
76
+ &:is(.sticky, .active-sticky) {
77
+ background-color: var(--gray-100);
78
+ }
79
+ }
80
+
81
+ &.sticky-left {
82
+ position: sticky;
83
+ left: 0;
84
+
85
+ &:is(.sticky, .active-sticky) {
86
+ box-shadow: inset -1px 0 0 0 var(--gray-200);
87
+ }
88
+ }
89
+
90
+ &.sticky-right {
91
+ position: sticky;
92
+ right: 0;
93
+
94
+ &.sticky {
95
+ box-shadow: inset 1px 0 0 0 var(--gray-200);
96
+ }
97
+ }
98
+ }
99
+ }
100
+ }
101
+ }
102
+ }
45
103
  }
46
- .ar-table > .content > table > tbody > tr > td.sticky-left.sticky,
47
- .ar-table > .content > table > tbody > tr > td.sticky-right.sticky,
48
- .ar-table > .content > table > tbody > tr > td.sticky-left.active-sticky,
49
- .ar-table > .content > table > tbody > tr > td.sticky-right.active-sticky {
50
- background-color: var(--gray-100);
51
- box-shadow: inset -1px 0 0 0 var(--gray-200);
104
+
105
+ /* --- [KÜÇÜK MOBİL - IPHONE SE VB.] --- */
106
+ /* Çok dar ekranlar için özel düzeltmeler */
107
+ @media (max-width: 375px) {
52
108
  }
53
- .ar-table > .content > table > tbody > tr > td.sticky-right.sticky {
54
- box-shadow: inset 1px 0 0 0 var(--gray-200);
109
+
110
+ /* --- [MOBİL - STANDART] --- */
111
+ /* Ekran 576px ve altına düştüğünde çalışır */
112
+ @media (max-width: 576px) {
55
113
  }
56
- .ar-table > .content > table .sticky-left.active-sticky::after,
57
- .ar-table > .content > table .sticky-right.active-sticky::after {
58
- position: absolute;
59
- top: 50%;
60
- transform: translateY(-50%);
61
- right: 0;
62
- content: "";
63
- background-color: var(--gray-200);
64
- width: 1px;
65
- height: 100%;
114
+
115
+ /* --- [TABLET DİKEY & BÜYÜK TELEFONLAR] --- */
116
+ /* Ekran 768px ve altına düştüğünde çalışır */
117
+ @media (max-width: 768px) {
118
+ .ar-table {
119
+ /* Scroll durumu */
120
+ &:is(.scroll) {
121
+ > .content {
122
+ > table {
123
+ > thead {
124
+ > tr {
125
+ > th {
126
+ }
127
+ }
128
+ }
129
+ }
130
+ }
131
+ }
132
+
133
+ > .content {
134
+ > table {
135
+ th[class^="sticky-"] {
136
+ }
137
+
138
+ > thead {
139
+ > tr {
140
+ > th {
141
+ &:is(.sticky-left, .sticky-right) {
142
+ &:is(.sticky, .active-sticky) {
143
+ &::after {
144
+ }
145
+ }
146
+ }
147
+
148
+ &.sticky-left {
149
+ position: static;
150
+ left: auto;
151
+
152
+ &:is(.sticky, .active-sticky) {
153
+ &::after {
154
+ }
155
+ }
156
+ }
157
+
158
+ &.sticky-right {
159
+ position: static;
160
+ right: auto;
161
+
162
+ &:is(.sticky, .active-sticky) {
163
+ &::after {
164
+ }
165
+ }
166
+ }
167
+ }
168
+ }
169
+ }
170
+
171
+ > tbody {
172
+ > tr {
173
+ > td {
174
+ &:is(.sticky-left, .sticky-right) {
175
+ &:is(.sticky, .active-sticky) {
176
+ background-color: transparent;
177
+ }
178
+ }
179
+
180
+ &.sticky-left {
181
+ position: static;
182
+ left: auto;
183
+
184
+ &:is(.sticky, .active-sticky) {
185
+ box-shadow: none;
186
+ }
187
+ }
188
+
189
+ &.sticky-right {
190
+ position: static;
191
+ right: auto;
192
+
193
+ &.sticky {
194
+ box-shadow: none;
195
+ }
196
+ }
197
+ }
198
+ }
199
+ }
200
+ }
201
+ }
202
+ }
66
203
  }
67
- .ar-table > .content > table .sticky-right.active-sticky::after {
68
- left: 0;
69
- right: auto;
204
+
205
+ /* --- [TABLET & KÜÇÜK LAPTOP] --- */
206
+ /* Ekran 1024px ve altına düştüğünde çalışır */
207
+ @media (max-width: 1024px) {
70
208
  }