@salla.sa/twilight-components 1.0.60 → 1.0.62
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/example/dist/demo.js +85 -10
- package/example/dist/tailwind.css +143 -174
- package/example/index.html +207 -79
- package/example/tailwind.config.js +3 -0
- package/package.json +1 -1
package/example/dist/demo.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
let counter = 1;
|
|
2
2
|
salla.infiniteScroll.event.onAppend((doc, url, nodes) => nodes.forEach(node => node.innerText = counter++));
|
|
3
|
+
|
|
3
4
|
salla.event.on('rating::ready', rating => rating.order = {
|
|
4
5
|
"id" : 123456,
|
|
5
6
|
"shipping" : {
|
|
@@ -14,13 +15,47 @@ salla.event.on('rating::ready', rating => rating.order = {
|
|
|
14
15
|
{
|
|
15
16
|
"feedback": null,
|
|
16
17
|
"product" : {
|
|
17
|
-
"name" : "
|
|
18
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur",
|
|
19
|
+
"price" : {
|
|
20
|
+
"amount" : 103.5,
|
|
21
|
+
"currency": "SAR"
|
|
22
|
+
},
|
|
23
|
+
"url" : "https://my_store.test/تيشرت/p2051852144",
|
|
24
|
+
"thumbnail" : "---https://source.unsplash.com/DGH1u80sZik/100x80",
|
|
25
|
+
"has_special_price": true,
|
|
26
|
+
"regular_price" : {
|
|
27
|
+
"amount" : 115,
|
|
28
|
+
"currency": "SAR"
|
|
29
|
+
},
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"feedback": null,
|
|
34
|
+
"product" : {
|
|
35
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur",
|
|
18
36
|
"price" : {
|
|
19
37
|
"amount" : 103.5,
|
|
20
38
|
"currency": "SAR"
|
|
21
39
|
},
|
|
22
40
|
"url" : "https://my_store.test/تيشرت/p2051852144",
|
|
23
|
-
"thumbnail" : "https://
|
|
41
|
+
"thumbnail" : "https://source.unsplash.com/2cFZ_FB08UM/100x80",
|
|
42
|
+
"has_special_price": true,
|
|
43
|
+
"regular_price" : {
|
|
44
|
+
"amount" : 115,
|
|
45
|
+
"currency": "SAR"
|
|
46
|
+
},
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"feedback": null,
|
|
51
|
+
"product" : {
|
|
52
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur",
|
|
53
|
+
"price" : {
|
|
54
|
+
"amount" : 103.5,
|
|
55
|
+
"currency": "SAR"
|
|
56
|
+
},
|
|
57
|
+
"url" : "https://my_store.test/تيشرت/p2051852144",
|
|
58
|
+
"thumbnail" : "https://source.unsplash.com/nwOip8AOZz0/100x80",
|
|
24
59
|
"has_special_price": true,
|
|
25
60
|
"regular_price" : {
|
|
26
61
|
"amount" : 115,
|
|
@@ -32,13 +67,13 @@ salla.event.on('rating::ready', rating => rating.order = {
|
|
|
32
67
|
"testimonials_enabled": true,
|
|
33
68
|
"shipping_enabled" : true,
|
|
34
69
|
"products_enabled" : true,
|
|
35
|
-
"thanks_message" : "
|
|
70
|
+
"thanks_message" : "Thank you! <br>We wish you a pleasant shopping"
|
|
36
71
|
});
|
|
37
72
|
|
|
38
73
|
function showOffer() {
|
|
39
|
-
document.querySelector('salla-offer').showOffer({
|
|
40
|
-
"name" : "
|
|
41
|
-
"message" : "
|
|
74
|
+
document.querySelector('salla-offer-modal').showOffer({
|
|
75
|
+
"name" : "Buy one and get one free from the following products",
|
|
76
|
+
"message" : "New Offer",
|
|
42
77
|
"expiry_date" : "2022-12-31",
|
|
43
78
|
"formatted_date": "31 ديسمبر 2022",
|
|
44
79
|
"get" : {
|
|
@@ -46,20 +81,60 @@ function showOffer() {
|
|
|
46
81
|
{
|
|
47
82
|
"id" : 1196968987,
|
|
48
83
|
"is_available" : true,
|
|
49
|
-
"name" : "
|
|
84
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur",
|
|
85
|
+
"price" : {"amount": 100, "currency": "SAR"},
|
|
86
|
+
"url" : "#",
|
|
87
|
+
"thumbnail" : "https://source.unsplash.com/DGH1u80sZik/400x300",
|
|
88
|
+
"has_special_price": false,
|
|
89
|
+
"regular_price" : {"amount": 100, "currency": "SAR"},
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"id" : 1196968987,
|
|
93
|
+
"is_available" : true,
|
|
94
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur ",
|
|
95
|
+
"price" : {"amount": 100, "currency": "SAR"},
|
|
96
|
+
"url" : "#",
|
|
97
|
+
"thumbnail" : "https://source.unsplash.com/2cFZ_FB08UM/400x300",
|
|
98
|
+
"has_special_price": false,
|
|
99
|
+
"regular_price" : {"amount": 100, "currency": "SAR"},
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"id" : 1196968987,
|
|
103
|
+
"is_available" : true,
|
|
104
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur ",
|
|
105
|
+
"price" : {"amount": 100, "currency": "SAR"},
|
|
106
|
+
"url" : "#",
|
|
107
|
+
"thumbnail" : "https://source.unsplash.com/nwOip8AOZz0/400x300",
|
|
108
|
+
"has_special_price": false,
|
|
109
|
+
"regular_price" : {"amount": 100, "currency": "SAR"},
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"id" : 1196968987,
|
|
113
|
+
"is_available" : true,
|
|
114
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur ",
|
|
115
|
+
"price" : {"amount": 100, "currency": "SAR"},
|
|
116
|
+
"url" : "#",
|
|
117
|
+
"thumbnail" : "https://source.unsplash.com/dwKiHoqqxk8/400x300",
|
|
118
|
+
"has_special_price": false,
|
|
119
|
+
"regular_price" : {"amount": 100, "currency": "SAR"},
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"id" : 1196968987,
|
|
123
|
+
"is_available" : true,
|
|
124
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur ",
|
|
50
125
|
"price" : {"amount": 100, "currency": "SAR"},
|
|
51
126
|
"url" : "#",
|
|
52
|
-
"thumbnail" : "https://
|
|
127
|
+
"thumbnail" : "https://source.unsplash.com/LxVxPA1LOVM/400x300",
|
|
53
128
|
"has_special_price": false,
|
|
54
129
|
"regular_price" : {"amount": 100, "currency": "SAR"},
|
|
55
130
|
},
|
|
56
131
|
{
|
|
57
132
|
"id" : 2051852144,
|
|
58
133
|
"is_available" : true,
|
|
59
|
-
"name" : "
|
|
134
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur ",
|
|
60
135
|
"price" : {"amount": 103.5, "currency": "SAR"},
|
|
61
136
|
"url" : "#",
|
|
62
|
-
"thumbnail" : "https://
|
|
137
|
+
"thumbnail" : "https://source.unsplash.com/Nv4QHkTVEaI/400x300",
|
|
63
138
|
"has_special_price": true,
|
|
64
139
|
"regular_price" : {"amount": 115, "currency": "SAR"},
|
|
65
140
|
}
|
|
@@ -797,8 +797,8 @@ video {
|
|
|
797
797
|
margin-bottom: 1rem;
|
|
798
798
|
}
|
|
799
799
|
|
|
800
|
-
.mb-
|
|
801
|
-
margin-bottom:
|
|
800
|
+
.mb-8 {
|
|
801
|
+
margin-bottom: 2rem;
|
|
802
802
|
}
|
|
803
803
|
|
|
804
804
|
.block {
|
|
@@ -865,6 +865,10 @@ video {
|
|
|
865
865
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
866
866
|
}
|
|
867
867
|
|
|
868
|
+
.grid-cols-5 {
|
|
869
|
+
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
870
|
+
}
|
|
871
|
+
|
|
868
872
|
.flex-wrap {
|
|
869
873
|
flex-wrap: wrap;
|
|
870
874
|
}
|
|
@@ -885,14 +889,14 @@ video {
|
|
|
885
889
|
gap: 0.75rem;
|
|
886
890
|
}
|
|
887
891
|
|
|
888
|
-
.gap-4 {
|
|
889
|
-
gap: 1rem;
|
|
890
|
-
}
|
|
891
|
-
|
|
892
892
|
.gap-6 {
|
|
893
893
|
gap: 1.5rem;
|
|
894
894
|
}
|
|
895
895
|
|
|
896
|
+
.gap-4 {
|
|
897
|
+
gap: 1rem;
|
|
898
|
+
}
|
|
899
|
+
|
|
896
900
|
.gap-x-8 {
|
|
897
901
|
-moz-column-gap: 2rem;
|
|
898
902
|
column-gap: 2rem;
|
|
@@ -1295,6 +1299,8 @@ video {
|
|
|
1295
1299
|
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
1296
1300
|
padding-left: 1rem;
|
|
1297
1301
|
padding-right: 1rem;
|
|
1302
|
+
font-size: 0.875rem;
|
|
1303
|
+
line-height: 1.25rem;
|
|
1298
1304
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
1299
1305
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1300
1306
|
transition-duration: 150ms;
|
|
@@ -1303,14 +1309,6 @@ video {
|
|
|
1303
1309
|
|
|
1304
1310
|
.s-branches-select:focus {
|
|
1305
1311
|
border-color: var(--color-main);
|
|
1306
|
-
--tw-ring-color: transparent;
|
|
1307
|
-
}
|
|
1308
|
-
|
|
1309
|
-
@media (min-width: 640px) {
|
|
1310
|
-
.s-branches-select {
|
|
1311
|
-
font-size: 0.875rem;
|
|
1312
|
-
line-height: 1.25rem;
|
|
1313
|
-
}
|
|
1314
1312
|
}
|
|
1315
1313
|
|
|
1316
1314
|
.s-branches-space-v > :not([hidden]) ~ :not([hidden]) {
|
|
@@ -1817,6 +1815,8 @@ video {
|
|
|
1817
1815
|
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
1818
1816
|
padding-left: 1rem;
|
|
1819
1817
|
padding-right: 1rem;
|
|
1818
|
+
font-size: 0.875rem;
|
|
1819
|
+
line-height: 1.25rem;
|
|
1820
1820
|
--tw-text-opacity: 1;
|
|
1821
1821
|
color: rgba(113, 113, 122, var(--tw-text-opacity));
|
|
1822
1822
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
@@ -1827,14 +1827,6 @@ video {
|
|
|
1827
1827
|
|
|
1828
1828
|
.s-localization-modal-select:focus {
|
|
1829
1829
|
border-color: var(--color-main);
|
|
1830
|
-
--tw-ring-color: transparent;
|
|
1831
|
-
}
|
|
1832
|
-
|
|
1833
|
-
@media (min-width: 640px) {
|
|
1834
|
-
.s-localization-modal-select {
|
|
1835
|
-
font-size: 0.875rem;
|
|
1836
|
-
line-height: 1.25rem;
|
|
1837
|
-
}
|
|
1838
1830
|
}
|
|
1839
1831
|
|
|
1840
1832
|
.s-login-modal-sub-title {
|
|
@@ -1857,7 +1849,7 @@ video {
|
|
|
1857
1849
|
border-radius: 0.375rem;
|
|
1858
1850
|
border-width: 1px;
|
|
1859
1851
|
--tw-border-opacity: 1;
|
|
1860
|
-
border-color: rgba(
|
|
1852
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
1861
1853
|
--tw-bg-opacity: 1;
|
|
1862
1854
|
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
|
|
1863
1855
|
padding-top: 1.25rem;
|
|
@@ -1927,23 +1919,24 @@ video {
|
|
|
1927
1919
|
}
|
|
1928
1920
|
|
|
1929
1921
|
.s-login-modal-input {
|
|
1930
|
-
-
|
|
1931
|
-
-moz-appearance: none;
|
|
1932
|
-
appearance: none;
|
|
1922
|
+
margin-bottom: 1rem;
|
|
1933
1923
|
height: 2.5rem;
|
|
1934
1924
|
width: 100%;
|
|
1935
1925
|
border-radius: 0.375rem;
|
|
1926
|
+
border-width: 1px;
|
|
1936
1927
|
--tw-border-opacity: 1;
|
|
1937
|
-
border-color: rgba(
|
|
1928
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
1929
|
+
padding-left: 0.75rem;
|
|
1930
|
+
padding-right: 0.75rem;
|
|
1931
|
+
font-size: 0.875rem;
|
|
1932
|
+
line-height: 1.25rem;
|
|
1938
1933
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
1939
1934
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1940
1935
|
transition-duration: 150ms;
|
|
1941
|
-
transition-duration: 300ms;
|
|
1942
1936
|
}
|
|
1943
1937
|
|
|
1944
1938
|
.s-login-modal-input:focus {
|
|
1945
1939
|
border-color: var(--color-main);
|
|
1946
|
-
--tw-ring-color: transparent;
|
|
1947
1940
|
}
|
|
1948
1941
|
|
|
1949
1942
|
.dark .s-login-modal-input {
|
|
@@ -1953,57 +1946,6 @@ video {
|
|
|
1953
1946
|
background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
|
|
1954
1947
|
}
|
|
1955
1948
|
|
|
1956
|
-
.dark .s-login-modal-input:focus {
|
|
1957
|
-
border-color: var(--color-main);
|
|
1958
|
-
}
|
|
1959
|
-
|
|
1960
|
-
@media (min-width: 640px) {
|
|
1961
|
-
.s-login-modal-input {
|
|
1962
|
-
font-size: 0.875rem;
|
|
1963
|
-
line-height: 1.25rem;
|
|
1964
|
-
}
|
|
1965
|
-
}
|
|
1966
|
-
|
|
1967
|
-
.s-login-modal-otp-input {
|
|
1968
|
-
height: 2.5rem;
|
|
1969
|
-
text-align: center;
|
|
1970
|
-
-webkit-appearance: none;
|
|
1971
|
-
-moz-appearance: none;
|
|
1972
|
-
appearance: none;
|
|
1973
|
-
height: 2.5rem;
|
|
1974
|
-
width: 100%;
|
|
1975
|
-
border-radius: 0.375rem;
|
|
1976
|
-
--tw-border-opacity: 1;
|
|
1977
|
-
border-color: rgba(238, 238, 238, var(--tw-border-opacity));
|
|
1978
|
-
transition-property: background-color, border-color, color, fill, stroke;
|
|
1979
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1980
|
-
transition-duration: 150ms;
|
|
1981
|
-
transition-duration: 300ms;
|
|
1982
|
-
}
|
|
1983
|
-
|
|
1984
|
-
.s-login-modal-otp-input:focus {
|
|
1985
|
-
border-color: var(--color-main);
|
|
1986
|
-
--tw-ring-color: transparent;
|
|
1987
|
-
}
|
|
1988
|
-
|
|
1989
|
-
.dark .s-login-modal-otp-input {
|
|
1990
|
-
--tw-border-opacity: 1;
|
|
1991
|
-
border-color: rgba(82, 82, 91, var(--tw-border-opacity));
|
|
1992
|
-
--tw-bg-opacity: 1;
|
|
1993
|
-
background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
|
|
1994
|
-
}
|
|
1995
|
-
|
|
1996
|
-
.dark .s-login-modal-otp-input:focus {
|
|
1997
|
-
border-color: var(--color-main);
|
|
1998
|
-
}
|
|
1999
|
-
|
|
2000
|
-
@media (min-width: 640px) {
|
|
2001
|
-
.s-login-modal-otp-input {
|
|
2002
|
-
font-size: 0.875rem;
|
|
2003
|
-
line-height: 1.25rem;
|
|
2004
|
-
}
|
|
2005
|
-
}
|
|
2006
|
-
|
|
2007
1949
|
.s-login-modal-link {
|
|
2008
1950
|
margin-top: 1.5rem;
|
|
2009
1951
|
display: block;
|
|
@@ -2249,9 +2191,9 @@ video {
|
|
|
2249
2191
|
border-width: 1px;
|
|
2250
2192
|
border-style: solid;
|
|
2251
2193
|
--tw-border-opacity: 1;
|
|
2252
|
-
border-color: rgba(
|
|
2253
|
-
font-size: 1.
|
|
2254
|
-
line-height:
|
|
2194
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
2195
|
+
font-size: 1.875rem;
|
|
2196
|
+
line-height: 2.25rem;
|
|
2255
2197
|
--tw-text-opacity: 1;
|
|
2256
2198
|
color: rgba(161, 161, 170, var(--tw-text-opacity));
|
|
2257
2199
|
-webkit-margin-end: 0.5rem;
|
|
@@ -2603,6 +2545,8 @@ video {
|
|
|
2603
2545
|
height: 8rem;
|
|
2604
2546
|
overflow: hidden;
|
|
2605
2547
|
border-radius: 0.375rem;
|
|
2548
|
+
--tw-bg-opacity: 1;
|
|
2549
|
+
background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
|
|
2606
2550
|
}
|
|
2607
2551
|
|
|
2608
2552
|
.s-offer-modal-product-image {
|
|
@@ -2631,6 +2575,9 @@ video {
|
|
|
2631
2575
|
line-height: 1.5rem;
|
|
2632
2576
|
line-height: 1.5rem;
|
|
2633
2577
|
color: var(--color-title);
|
|
2578
|
+
transition-property: background-color, border-color, color, fill, stroke;
|
|
2579
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2580
|
+
transition-duration: 150ms;
|
|
2634
2581
|
}
|
|
2635
2582
|
|
|
2636
2583
|
.s-offer-modal-product-name:hover {
|
|
@@ -2706,6 +2653,7 @@ video {
|
|
|
2706
2653
|
}
|
|
2707
2654
|
|
|
2708
2655
|
.s-offer-modal-remember-label {
|
|
2656
|
+
display: flex;
|
|
2709
2657
|
cursor: pointer;
|
|
2710
2658
|
font-size: 0.875rem;
|
|
2711
2659
|
line-height: 1.25rem;
|
|
@@ -2732,7 +2680,7 @@ video {
|
|
|
2732
2680
|
width: 1.5rem;
|
|
2733
2681
|
border-radius: 0.375rem;
|
|
2734
2682
|
--tw-border-opacity: 1;
|
|
2735
|
-
border-color: rgba(
|
|
2683
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
2736
2684
|
color: var(--color-main);
|
|
2737
2685
|
}
|
|
2738
2686
|
|
|
@@ -2885,20 +2833,24 @@ video {
|
|
|
2885
2833
|
}
|
|
2886
2834
|
|
|
2887
2835
|
.s-product-availability-input {
|
|
2836
|
+
margin-bottom: 1rem;
|
|
2888
2837
|
height: 2.5rem;
|
|
2889
2838
|
width: 100%;
|
|
2890
2839
|
border-radius: 0.375rem;
|
|
2840
|
+
border-width: 1px;
|
|
2891
2841
|
--tw-border-opacity: 1;
|
|
2892
|
-
border-color: rgba(
|
|
2842
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
2843
|
+
padding-left: 0.75rem;
|
|
2844
|
+
padding-right: 0.75rem;
|
|
2845
|
+
font-size: 0.875rem;
|
|
2846
|
+
line-height: 1.25rem;
|
|
2893
2847
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
2894
2848
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2895
2849
|
transition-duration: 150ms;
|
|
2896
|
-
transition-duration: 300ms;
|
|
2897
2850
|
}
|
|
2898
2851
|
|
|
2899
2852
|
.s-product-availability-input:focus {
|
|
2900
2853
|
border-color: var(--color-main);
|
|
2901
|
-
--tw-ring-color: transparent;
|
|
2902
2854
|
}
|
|
2903
2855
|
|
|
2904
2856
|
.dark .s-product-availability-input {
|
|
@@ -2908,17 +2860,6 @@ video {
|
|
|
2908
2860
|
background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
|
|
2909
2861
|
}
|
|
2910
2862
|
|
|
2911
|
-
.dark .s-product-availability-input:focus {
|
|
2912
|
-
border-color: var(--color-main);
|
|
2913
|
-
}
|
|
2914
|
-
|
|
2915
|
-
@media (min-width: 640px) {
|
|
2916
|
-
.s-product-availability-input {
|
|
2917
|
-
font-size: 0.875rem;
|
|
2918
|
-
line-height: 1.25rem;
|
|
2919
|
-
}
|
|
2920
|
-
}
|
|
2921
|
-
|
|
2922
2863
|
.s-product-availability-footer {
|
|
2923
2864
|
display: flex;
|
|
2924
2865
|
justify-content: space-between;
|
|
@@ -2958,6 +2899,50 @@ video {
|
|
|
2958
2899
|
color: rgba(239, 68, 68, var(--tw-text-opacity)) !important;
|
|
2959
2900
|
}
|
|
2960
2901
|
|
|
2902
|
+
.s-quantity-input-container {
|
|
2903
|
+
display: flex;
|
|
2904
|
+
height: 2.5rem;
|
|
2905
|
+
align-items: stretch;
|
|
2906
|
+
border-radius: 0.375rem;
|
|
2907
|
+
border-width: 1px;
|
|
2908
|
+
font-size: 0.875rem;
|
|
2909
|
+
line-height: 1.25rem;
|
|
2910
|
+
}
|
|
2911
|
+
|
|
2912
|
+
.s-quantity-input-input {
|
|
2913
|
+
width: 3rem;
|
|
2914
|
+
border-width: 1px;
|
|
2915
|
+
border-top-width: 0px;
|
|
2916
|
+
border-bottom-width: 0px;
|
|
2917
|
+
--tw-border-opacity: 1;
|
|
2918
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
2919
|
+
padding-left: 0.5rem;
|
|
2920
|
+
padding-right: 0.5rem;
|
|
2921
|
+
text-align: center;
|
|
2922
|
+
font-weight: 700;
|
|
2923
|
+
--tw-shadow: 0 0 #0000;
|
|
2924
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
2925
|
+
}
|
|
2926
|
+
|
|
2927
|
+
.s-quantity-input-input:focus {
|
|
2928
|
+
--tw-border-opacity: 1;
|
|
2929
|
+
border-color: rgba(212, 212, 216, var(--tw-border-opacity));
|
|
2930
|
+
}
|
|
2931
|
+
|
|
2932
|
+
.s-quantity-input-button {
|
|
2933
|
+
width: 2.75rem;
|
|
2934
|
+
--tw-text-opacity: 1;
|
|
2935
|
+
color: rgba(161, 161, 170, var(--tw-text-opacity));
|
|
2936
|
+
transition-property: background-color, border-color, color, fill, stroke;
|
|
2937
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2938
|
+
transition-duration: 150ms;
|
|
2939
|
+
transition-duration: 300ms;
|
|
2940
|
+
}
|
|
2941
|
+
|
|
2942
|
+
.s-quantity-input-button:hover {
|
|
2943
|
+
color: var(--color-main);
|
|
2944
|
+
}
|
|
2945
|
+
|
|
2961
2946
|
.s-rating-modal-wrapper {
|
|
2962
2947
|
margin-bottom: 2.5rem;
|
|
2963
2948
|
transition-property: all;
|
|
@@ -3106,22 +3091,24 @@ video {
|
|
|
3106
3091
|
}
|
|
3107
3092
|
|
|
3108
3093
|
.s-rating-modal-comment {
|
|
3094
|
+
margin-bottom: 1rem;
|
|
3109
3095
|
margin-bottom: 0.5rem;
|
|
3110
3096
|
height: 5rem !important;
|
|
3111
|
-
height: 2.5rem;
|
|
3112
3097
|
width: 100%;
|
|
3113
3098
|
border-radius: 0.375rem;
|
|
3099
|
+
border-width: 1px;
|
|
3114
3100
|
--tw-border-opacity: 1;
|
|
3115
|
-
border-color: rgba(
|
|
3101
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
3102
|
+
padding: 0.75rem;
|
|
3103
|
+
font-size: 0.875rem;
|
|
3104
|
+
line-height: 1.25rem;
|
|
3116
3105
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
3117
3106
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3118
3107
|
transition-duration: 150ms;
|
|
3119
|
-
transition-duration: 300ms;
|
|
3120
3108
|
}
|
|
3121
3109
|
|
|
3122
3110
|
.s-rating-modal-comment:focus {
|
|
3123
3111
|
border-color: var(--color-main);
|
|
3124
|
-
--tw-ring-color: transparent;
|
|
3125
3112
|
}
|
|
3126
3113
|
|
|
3127
3114
|
.dark .s-rating-modal-comment {
|
|
@@ -3131,17 +3118,6 @@ video {
|
|
|
3131
3118
|
background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
|
|
3132
3119
|
}
|
|
3133
3120
|
|
|
3134
|
-
.dark .s-rating-modal-comment:focus {
|
|
3135
|
-
border-color: var(--color-main);
|
|
3136
|
-
}
|
|
3137
|
-
|
|
3138
|
-
@media (min-width: 640px) {
|
|
3139
|
-
.s-rating-modal-comment {
|
|
3140
|
-
font-size: 0.875rem;
|
|
3141
|
-
line-height: 1.25rem;
|
|
3142
|
-
}
|
|
3143
|
-
}
|
|
3144
|
-
|
|
3145
3121
|
.s-rating-modal-validation-msg {
|
|
3146
3122
|
position: absolute;
|
|
3147
3123
|
bottom: 0px;
|
|
@@ -3168,10 +3144,18 @@ video {
|
|
|
3168
3144
|
margin-bottom: 0px;
|
|
3169
3145
|
}
|
|
3170
3146
|
|
|
3171
|
-
.s-rating-modal-product-img {
|
|
3147
|
+
.s-rating-modal-product-img-wrap {
|
|
3172
3148
|
height: 3.5rem;
|
|
3173
3149
|
width: 4.5rem;
|
|
3150
|
+
overflow: hidden;
|
|
3174
3151
|
border-radius: 0.375rem;
|
|
3152
|
+
--tw-bg-opacity: 1;
|
|
3153
|
+
background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
|
|
3154
|
+
}
|
|
3155
|
+
|
|
3156
|
+
.s-rating-modal-product-img {
|
|
3157
|
+
height: 100%;
|
|
3158
|
+
width: 100%;
|
|
3175
3159
|
-o-object-fit: cover;
|
|
3176
3160
|
object-fit: cover;
|
|
3177
3161
|
}
|
|
@@ -3273,52 +3257,61 @@ video {
|
|
|
3273
3257
|
color: rgba(161, 161, 170, var(--tw-text-opacity));
|
|
3274
3258
|
}
|
|
3275
3259
|
|
|
3276
|
-
.s-rating-modal-
|
|
3260
|
+
.s-rating-modal-stars-company {
|
|
3261
|
+
margin-bottom: 1.25rem;
|
|
3262
|
+
}
|
|
3263
|
+
|
|
3264
|
+
.s-rating-modal-stars-product {
|
|
3265
|
+
margin-bottom: 0.25rem;
|
|
3266
|
+
}
|
|
3267
|
+
|
|
3268
|
+
.s-rating-modal-bg-gray {
|
|
3269
|
+
--tw-bg-opacity: 1;
|
|
3270
|
+
background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
|
|
3271
|
+
}
|
|
3272
|
+
|
|
3273
|
+
.s-rating-modal-bg-primary {
|
|
3274
|
+
background-color: var(--color-main);
|
|
3275
|
+
}
|
|
3276
|
+
|
|
3277
|
+
.s-rating-stars-wrapper {
|
|
3278
|
+
display: inline-flex;
|
|
3279
|
+
}
|
|
3280
|
+
|
|
3281
|
+
.s-rating-stars-btn-star {
|
|
3277
3282
|
border-width: 0px;
|
|
3278
3283
|
padding-left: 0.125rem;
|
|
3279
3284
|
padding-right: 0.125rem;
|
|
3280
3285
|
--tw-text-opacity: 1;
|
|
3281
|
-
color: rgba(
|
|
3286
|
+
color: rgba(212, 212, 216, var(--tw-text-opacity));
|
|
3282
3287
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
3283
3288
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3284
3289
|
transition-duration: 150ms;
|
|
3285
3290
|
}
|
|
3286
3291
|
|
|
3287
|
-
.s-rating-
|
|
3292
|
+
.s-rating-stars-large {
|
|
3288
3293
|
font-size: 1.5rem;
|
|
3289
3294
|
line-height: 2rem;
|
|
3290
3295
|
}
|
|
3291
3296
|
|
|
3292
|
-
.s-rating-
|
|
3297
|
+
.s-rating-stars-medium {
|
|
3293
3298
|
font-size: 1.25rem;
|
|
3294
3299
|
line-height: 1.75rem;
|
|
3295
3300
|
}
|
|
3296
3301
|
|
|
3297
|
-
.s-rating-
|
|
3298
|
-
|
|
3299
|
-
|
|
3302
|
+
.s-rating-stars-small {
|
|
3303
|
+
font-size: 1.125rem;
|
|
3304
|
+
line-height: 1.75rem;
|
|
3300
3305
|
}
|
|
3301
3306
|
|
|
3302
|
-
.s-rating-
|
|
3307
|
+
.s-rating-stars-hovered {
|
|
3303
3308
|
--tw-text-opacity: 1;
|
|
3304
3309
|
color: rgba(251, 191, 36, var(--tw-text-opacity));
|
|
3305
3310
|
}
|
|
3306
3311
|
|
|
3307
|
-
.s-rating-
|
|
3308
|
-
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
.s-rating-modal-stars-product {
|
|
3312
|
-
margin-bottom: 0.25rem;
|
|
3313
|
-
}
|
|
3314
|
-
|
|
3315
|
-
.s-rating-modal-bg-gray {
|
|
3316
|
-
--tw-bg-opacity: 1;
|
|
3317
|
-
background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
|
|
3318
|
-
}
|
|
3319
|
-
|
|
3320
|
-
.s-rating-modal-bg-primary {
|
|
3321
|
-
background-color: var(--color-main);
|
|
3312
|
+
.s-rating-stars-selected {
|
|
3313
|
+
--tw-text-opacity: 1;
|
|
3314
|
+
color: rgba(251, 191, 36, var(--tw-text-opacity));
|
|
3322
3315
|
}
|
|
3323
3316
|
|
|
3324
3317
|
.s-search-container {
|
|
@@ -3566,16 +3559,18 @@ video {
|
|
|
3566
3559
|
border-radius: 0.375rem;
|
|
3567
3560
|
border-width: 1px;
|
|
3568
3561
|
--tw-border-opacity: 1;
|
|
3569
|
-
border-color: rgba(
|
|
3562
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
3563
|
+
padding-left: 0.75rem;
|
|
3564
|
+
padding-right: 0.75rem;
|
|
3565
|
+
font-size: 0.875rem;
|
|
3566
|
+
line-height: 1.25rem;
|
|
3570
3567
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
3571
3568
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3572
3569
|
transition-duration: 150ms;
|
|
3573
|
-
transition-duration: 300ms;
|
|
3574
3570
|
}
|
|
3575
3571
|
|
|
3576
3572
|
.s-tel-input-control:focus {
|
|
3577
3573
|
border-color: var(--color-main);
|
|
3578
|
-
--tw-ring-color: transparent;
|
|
3579
3574
|
}
|
|
3580
3575
|
|
|
3581
3576
|
.dark .s-tel-input-control {
|
|
@@ -3585,17 +3580,6 @@ video {
|
|
|
3585
3580
|
background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
|
|
3586
3581
|
}
|
|
3587
3582
|
|
|
3588
|
-
.dark .s-tel-input-control:focus {
|
|
3589
|
-
border-color: var(--color-main);
|
|
3590
|
-
}
|
|
3591
|
-
|
|
3592
|
-
@media (min-width: 640px) {
|
|
3593
|
-
.s-tel-input-control {
|
|
3594
|
-
font-size: 0.875rem;
|
|
3595
|
-
line-height: 1.25rem;
|
|
3596
|
-
}
|
|
3597
|
-
}
|
|
3598
|
-
|
|
3599
3583
|
.s-tel-input-error-msg {
|
|
3600
3584
|
margin-bottom: 0.625rem;
|
|
3601
3585
|
display: block;
|
|
@@ -3651,29 +3635,23 @@ video {
|
|
|
3651
3635
|
}
|
|
3652
3636
|
|
|
3653
3637
|
.s-verify-modal-input {
|
|
3654
|
-
height: 2.5rem;
|
|
3655
|
-
-webkit-appearance: none;
|
|
3656
|
-
-moz-appearance: none;
|
|
3657
|
-
appearance: none;
|
|
3658
|
-
border-radius: 0.375rem;
|
|
3659
|
-
text-align: center;
|
|
3660
|
-
font-size: 1.125rem;
|
|
3661
|
-
line-height: 1.75rem;
|
|
3662
|
-
font-weight: 700;
|
|
3663
3638
|
height: 2.5rem;
|
|
3664
3639
|
width: 100%;
|
|
3665
3640
|
border-radius: 0.375rem;
|
|
3641
|
+
border-width: 1px;
|
|
3666
3642
|
--tw-border-opacity: 1;
|
|
3667
|
-
border-color: rgba(
|
|
3643
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
3644
|
+
padding-left: 0.5rem;
|
|
3645
|
+
padding-right: 0.5rem;
|
|
3646
|
+
font-size: 1.125rem;
|
|
3647
|
+
line-height: 1.75rem;
|
|
3668
3648
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
3669
3649
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
3670
3650
|
transition-duration: 150ms;
|
|
3671
|
-
transition-duration: 300ms;
|
|
3672
3651
|
}
|
|
3673
3652
|
|
|
3674
3653
|
.s-verify-modal-input:focus {
|
|
3675
3654
|
border-color: var(--color-main);
|
|
3676
|
-
--tw-ring-color: transparent;
|
|
3677
3655
|
}
|
|
3678
3656
|
|
|
3679
3657
|
.dark .s-verify-modal-input {
|
|
@@ -3683,17 +3661,6 @@ video {
|
|
|
3683
3661
|
background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
|
|
3684
3662
|
}
|
|
3685
3663
|
|
|
3686
|
-
.dark .s-verify-modal-input:focus {
|
|
3687
|
-
border-color: var(--color-main);
|
|
3688
|
-
}
|
|
3689
|
-
|
|
3690
|
-
@media (min-width: 640px) {
|
|
3691
|
-
.s-verify-modal-input {
|
|
3692
|
-
font-size: 0.875rem;
|
|
3693
|
-
line-height: 1.25rem;
|
|
3694
|
-
}
|
|
3695
|
-
}
|
|
3696
|
-
|
|
3697
3664
|
.s-verify-modal-footer {
|
|
3698
3665
|
text-align: center;
|
|
3699
3666
|
}
|
|
@@ -3704,6 +3671,8 @@ video {
|
|
|
3704
3671
|
}
|
|
3705
3672
|
|
|
3706
3673
|
.s-verify-modal-resend-message {
|
|
3674
|
+
font-size: 0.875rem;
|
|
3675
|
+
line-height: 1.25rem;
|
|
3707
3676
|
--tw-text-opacity: 1;
|
|
3708
3677
|
color: rgba(161, 161, 170, var(--tw-text-opacity));
|
|
3709
3678
|
}
|
package/example/index.html
CHANGED
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
</style>
|
|
42
42
|
</head>
|
|
43
43
|
|
|
44
|
-
<body dir="ltr" class="page-show salla-one color-mode-dark ltr font-dubai bg-gray-50"
|
|
44
|
+
<body dir="ltr" class="page-show salla-one color-mode-dark ltr font-dubai bg-gray-50">
|
|
45
45
|
|
|
46
46
|
<!-- Header -->
|
|
47
47
|
<header class="flex-none relative z-50 text-sm leading-6 font-medium bg-white">
|
|
@@ -221,26 +221,6 @@
|
|
|
221
221
|
|
|
222
222
|
<div class="space-y-16">
|
|
223
223
|
|
|
224
|
-
<!-- Login Modal -->
|
|
225
|
-
<section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
|
|
226
|
-
style="scroll-margin-top:6.25rem">
|
|
227
|
-
<div class="pb-6">
|
|
228
|
-
<h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Login & Register Modal</h2>
|
|
229
|
-
<p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
|
|
230
|
-
</div>
|
|
231
|
-
|
|
232
|
-
<!-- Default -->
|
|
233
|
-
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
234
|
-
<div class="col-span-3 xl:col-span-1">
|
|
235
|
-
<h3 class="text-gray-900 font-semibold">Login Modal</h3>
|
|
236
|
-
</div>
|
|
237
|
-
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
238
|
-
<salla-button data-on-click="login::show">Login Component</salla-button>
|
|
239
|
-
<salla-login-modal is-email-allowed is-mobile-allowed is-email-required></salla-login-modal>
|
|
240
|
-
</div>
|
|
241
|
-
</div>
|
|
242
|
-
</section>
|
|
243
|
-
|
|
244
224
|
|
|
245
225
|
<!-- Buttons Section -->
|
|
246
226
|
<section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
|
|
@@ -656,77 +636,225 @@
|
|
|
656
636
|
|
|
657
637
|
</section>
|
|
658
638
|
|
|
659
|
-
</div>
|
|
660
|
-
</div>
|
|
661
639
|
|
|
662
640
|
|
|
663
|
-
|
|
641
|
+
<!-- Login Modal -->
|
|
642
|
+
<section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
|
|
643
|
+
style="scroll-margin-top:6.25rem">
|
|
644
|
+
<div class="pb-6">
|
|
645
|
+
<h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Login & Register Modal</h2>
|
|
646
|
+
<p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
|
|
647
|
+
</div>
|
|
664
648
|
|
|
665
|
-
<div class=" p-3 rounded-md bg-white shadow-sm">
|
|
666
|
-
<h1 class="text-primary border-b border-dashed mb-4">Localization</h1>
|
|
667
|
-
<p class="my-4">Description</p>
|
|
668
|
-
<salla-button wide data-on-click="localization::show">Localization Component</salla-button>
|
|
669
649
|
|
|
670
|
-
|
|
671
|
-
|
|
650
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
651
|
+
<div class="col-span-3 xl:col-span-1">
|
|
652
|
+
<h3 class="text-gray-900 font-semibold">Login Modal</h3>
|
|
653
|
+
</div>
|
|
654
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2" x-data="{ method: 'both' }">
|
|
655
|
+
<salla-button data-on-click="login::show">Login with email</salla-button>
|
|
656
|
+
<salla-button data-on-click="login::show">Login with mobile</salla-button>
|
|
657
|
+
<salla-button data-on-click="login::show">Login with both</salla-button>
|
|
658
|
+
<salla-login-modal
|
|
659
|
+
id="login-modal"
|
|
660
|
+
is-email-allowed
|
|
661
|
+
is-mobile-allowed
|
|
662
|
+
is-email-required></salla-login-modal>
|
|
663
|
+
<!-- <salla-button x-on:click="method = 'email'" data-on-click="login::show">With email </salla-button>
|
|
664
|
+
<salla-button x-on:click="method = 'phone'" data-on-click="login::show">With phone</salla-button>
|
|
665
|
+
<salla-button x-on:click="method = 'both'" data-on-click="login::show">With both</salla-button>
|
|
666
|
+
|
|
667
|
+
<salla-login-modal
|
|
668
|
+
id="login-modal"
|
|
669
|
+
:is-email-allowed="method == 'email' || method == 'both'"
|
|
670
|
+
:is-mobile-allowed="method == 'phone' || method == 'both'"
|
|
671
|
+
is-email-required></salla-login-modal> -->
|
|
672
|
+
</div>
|
|
673
|
+
</div>
|
|
674
|
+
</section>
|
|
672
675
|
|
|
673
|
-
|
|
674
|
-
<
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
676
|
+
<!-- Localization Modal -->
|
|
677
|
+
<section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
|
|
678
|
+
style="scroll-margin-top:6.25rem">
|
|
679
|
+
<div class="pb-6">
|
|
680
|
+
<h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Localization (Language & Currency) Modal</h2>
|
|
681
|
+
<p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
|
|
682
|
+
</div>
|
|
679
683
|
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
684
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
685
|
+
<div class="col-span-3 xl:col-span-1">
|
|
686
|
+
<h3 class="text-gray-900 font-semibold">Localization Modal</h3>
|
|
687
|
+
</div>
|
|
688
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
689
|
+
<salla-button data-on-click="localization::show">Language & Currency</salla-button>
|
|
690
|
+
<salla-localization-modal currency="usd" lanuage="ar"></salla-localization-modal>
|
|
691
|
+
</div>
|
|
692
|
+
</div>
|
|
693
|
+
</section>
|
|
686
694
|
|
|
687
|
-
|
|
688
|
-
<
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
695
|
+
<!-- Search Component -->
|
|
696
|
+
<section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
|
|
697
|
+
style="scroll-margin-top:6.25rem">
|
|
698
|
+
<div class="pb-6">
|
|
699
|
+
<h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Search</h2>
|
|
700
|
+
<p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaLogin.html" class="text-primary">@see</a></p>
|
|
701
|
+
</div>
|
|
693
702
|
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
703
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
704
|
+
<div class="col-span-3 xl:col-span-1">
|
|
705
|
+
<h3 class="text-gray-900 font-semibold">Search Modal</h3>
|
|
706
|
+
</div>
|
|
707
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
708
|
+
<salla-button data-on-click="search::show">Search</salla-button>
|
|
709
|
+
<salla-search></salla-search>
|
|
710
|
+
</div>
|
|
711
|
+
</div>
|
|
712
|
+
|
|
713
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
714
|
+
<div class="col-span-3 xl:col-span-1">
|
|
715
|
+
<h3 class="text-gray-900 font-semibold">Inline Search</h3>
|
|
716
|
+
</div>
|
|
717
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
718
|
+
<salla-search inline height="50" class="w-full"></salla-search>
|
|
719
|
+
</div>
|
|
720
|
+
</div>
|
|
699
721
|
|
|
700
|
-
|
|
701
|
-
<h1 class="text-primary border-b border-dashed mb-4">Mobile Input</h1>
|
|
702
|
-
<p class="my-4">
|
|
703
|
-
Using: <a class="text-primary" href="https://github.com/jackocnr/intl-tel-input" target="_blank">International
|
|
704
|
-
Telephone Input</a>
|
|
705
|
-
</p>
|
|
706
|
-
<salla-tel-input></salla-tel-input>
|
|
707
|
-
</div>
|
|
722
|
+
</section>
|
|
708
723
|
|
|
709
|
-
|
|
710
|
-
<
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
724
|
+
<!-- Offers Component -->
|
|
725
|
+
<section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
|
|
726
|
+
style="scroll-margin-top:6.25rem">
|
|
727
|
+
<div class="pb-6">
|
|
728
|
+
<h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Offers Modal</h2>
|
|
729
|
+
<p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaOffer.html" class="text-primary">@see</a></p>
|
|
730
|
+
</div>
|
|
731
|
+
|
|
732
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
733
|
+
<div class="col-span-3 xl:col-span-1">
|
|
734
|
+
<h3 class="text-gray-900 font-semibold">Offer Modal</h3>
|
|
735
|
+
</div>
|
|
736
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
737
|
+
<salla-button onClick="showOffer()">Offer Modal</salla-button>
|
|
738
|
+
<salla-offer-modal></salla-offer-modal>
|
|
739
|
+
</div>
|
|
740
|
+
</div>
|
|
741
|
+
|
|
742
|
+
</section>
|
|
743
|
+
|
|
744
|
+
<!-- Branches Component -->
|
|
745
|
+
<section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
|
|
746
|
+
style="scroll-margin-top:6.25rem">
|
|
747
|
+
<div class="pb-6">
|
|
748
|
+
<h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Branches Modal</h2>
|
|
749
|
+
<p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaOffer.html" class="text-primary">@see</a></p>
|
|
750
|
+
</div>
|
|
751
|
+
|
|
752
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
753
|
+
<div class="col-span-3 xl:col-span-1">
|
|
754
|
+
<h3 class="text-gray-900 font-semibold">Branches Modal</h3>
|
|
755
|
+
</div>
|
|
756
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
757
|
+
<salla-button data-target="branches-header" data-on-click="branches::show">Choose branche</salla-button>
|
|
758
|
+
<salla-button data-target="branches-single" data-on-click="branches::show">Products availability</salla-button>
|
|
759
|
+
|
|
760
|
+
<salla-branches id="branches-header" position="header"></salla-branches>
|
|
761
|
+
<salla-branches id="branches-single" position="single"></salla-branches>
|
|
762
|
+
</div>
|
|
763
|
+
</div>
|
|
764
|
+
|
|
765
|
+
</section>
|
|
766
|
+
|
|
767
|
+
<!-- Product Availability Component -->
|
|
768
|
+
<section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
|
|
769
|
+
style="scroll-margin-top:6.25rem">
|
|
770
|
+
<div class="pb-6">
|
|
771
|
+
<h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Product Availability
|
|
772
|
+
</h2>
|
|
773
|
+
<p class="text-sm text-gray-500 mt-2">For more info and description <a href="../docs/components/SallaOffer.html" class="text-primary">@see</a></p>
|
|
774
|
+
</div>
|
|
775
|
+
|
|
776
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
777
|
+
<div class="col-span-3 xl:col-span-1">
|
|
778
|
+
<h3 class="text-gray-900 font-semibold">Product Availability Modal</h3>
|
|
779
|
+
</div>
|
|
780
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
781
|
+
<salla-product-availability channels="sms,email"></salla-product-availability>
|
|
782
|
+
</div>
|
|
783
|
+
</div>
|
|
784
|
+
|
|
785
|
+
</section>
|
|
786
|
+
|
|
787
|
+
<!-- International Telephone Input Component -->
|
|
788
|
+
<section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
|
|
789
|
+
style="scroll-margin-top:6.25rem">
|
|
790
|
+
<div class="pb-6">
|
|
791
|
+
<h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">International Telephone Input</h2>
|
|
792
|
+
<p class="text-sm text-gray-500 mt-2">Using: <a class="text-primary" href="https://github.com/jackocnr/intl-tel-input" target="_blank">International
|
|
793
|
+
Telephone Input</a></p>
|
|
794
|
+
</div>
|
|
795
|
+
|
|
796
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
797
|
+
<div class="col-span-3 xl:col-span-1">
|
|
798
|
+
<h3 class="text-gray-900 font-semibold">International
|
|
799
|
+
Telephone Input</h3>
|
|
800
|
+
</div>
|
|
801
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
802
|
+
<salla-tel-input style="width: 360px; max-width: 96%"></salla-tel-input>
|
|
803
|
+
</div>
|
|
804
|
+
</div>
|
|
805
|
+
|
|
806
|
+
</section>
|
|
807
|
+
|
|
808
|
+
<!-- Rating Component -->
|
|
809
|
+
<section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
|
|
810
|
+
style="scroll-margin-top:6.25rem">
|
|
811
|
+
<div class="pb-6">
|
|
812
|
+
<h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Rating</h2>
|
|
813
|
+
<p class="text-sm text-gray-500 mt-2">Discription</p>
|
|
814
|
+
</div>
|
|
815
|
+
|
|
816
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
817
|
+
<div class="col-span-3 xl:col-span-1">
|
|
818
|
+
<h3 class="text-gray-900 font-semibold">Rating</h3>
|
|
819
|
+
</div>
|
|
820
|
+
<div class="col-span-3 flex flex-wrap items-center gap-2">
|
|
821
|
+
<salla-button data-on-click="rating::show">Rating Modal</salla-button>
|
|
822
|
+
<salla-rating-modal></salla-rating-modal>
|
|
823
|
+
</div>
|
|
824
|
+
</div>
|
|
825
|
+
|
|
826
|
+
</section>
|
|
827
|
+
|
|
828
|
+
<!-- Infinite Scroll Component -->
|
|
829
|
+
<section aria-labelledby="buttons-section-heading" id="product-marketing" class="divide-y divide-gray-200"
|
|
830
|
+
style="scroll-margin-top:6.25rem">
|
|
831
|
+
<div class="pb-6">
|
|
832
|
+
<h2 id="buttons-section-heading" class="text-2xl font-extrabold text-gray-900">Infinite Scroll</h2>
|
|
833
|
+
<p class="text-sm text-gray-500 mt-2">
|
|
834
|
+
Using: <a class="text-primary" href="https://infinite-scroll.com/" target="_blank">Infinite Scroll</a>
|
|
835
|
+
<br />
|
|
836
|
+
You can pass <code>autoload</code> attribute for autoload result when scrolling.<br />
|
|
837
|
+
<code><salla-infinite-scroll next-page="***"
|
|
838
|
+
autoload></salla-infinite-scroll></code>
|
|
839
|
+
</p>
|
|
840
|
+
</div>
|
|
841
|
+
|
|
842
|
+
<div id="product-marketing-sections" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
|
|
843
|
+
<div class="col-span-3 xl:col-span-1">
|
|
844
|
+
<h3 class="text-gray-900 font-semibold">Infinite Scroll</h3>
|
|
845
|
+
</div>
|
|
846
|
+
<div class="col-span-3 flex flex-wrap items-center justify-center gap-2">
|
|
847
|
+
<salla-infinite-scroll class="w-full grid grid-cols-5 grid-flow-row gap-6" next-page="infinit-scroll.html?page=2" item=".i-item">
|
|
848
|
+
</salla-infinite-scroll>
|
|
849
|
+
</div>
|
|
850
|
+
</div>
|
|
851
|
+
|
|
852
|
+
</section>
|
|
715
853
|
|
|
716
|
-
<div class="p-3 rounded-md bg-white shadow-sm col-span-2">
|
|
717
|
-
<h1 class="text-primary border-b border-dashed mb-4">Infinite Scroll</h1>
|
|
718
|
-
<p class="my-4">
|
|
719
|
-
Using: <a class="text-primary" href="https://infinite-scroll.com/" target="_blank">Infinite Scroll</a>
|
|
720
|
-
<br />
|
|
721
|
-
You can pass <code>autoload</code> attribute for autoload result when scrolling.<br />
|
|
722
|
-
<code><salla-infinite-scroll next-page="***"
|
|
723
|
-
autoload></salla-infinite-scroll></code>
|
|
724
|
-
</p>
|
|
725
|
-
<salla-infinite-scroll class="grid grid-cols-4 grid-flow-row gap-6 " next-page="infinit-scroll.html?page=2"
|
|
726
|
-
item=".i-item">
|
|
727
|
-
</salla-infinite-scroll>
|
|
728
854
|
</div>
|
|
729
855
|
</div>
|
|
856
|
+
|
|
857
|
+
|
|
730
858
|
<script src="dist/demo.js"></script>
|
|
731
859
|
</body>
|
|
732
860
|
|