@salla.sa/twilight-components 1.0.60 → 1.0.61
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 +47 -7
- package/example/dist/tailwind.css +123 -154
- package/example/index.html +145 -47
- package/package.json +1 -1
package/example/dist/demo.js
CHANGED
|
@@ -36,9 +36,9 @@ salla.event.on('rating::ready', rating => rating.order = {
|
|
|
36
36
|
});
|
|
37
37
|
|
|
38
38
|
function showOffer() {
|
|
39
|
-
document.querySelector('salla-offer').showOffer({
|
|
40
|
-
"name" : "
|
|
41
|
-
"message" : "
|
|
39
|
+
document.querySelector('salla-offer-modal').showOffer({
|
|
40
|
+
"name" : "Buy one and get one free from the following products",
|
|
41
|
+
"message" : "New Offer",
|
|
42
42
|
"expiry_date" : "2022-12-31",
|
|
43
43
|
"formatted_date": "31 ديسمبر 2022",
|
|
44
44
|
"get" : {
|
|
@@ -46,20 +46,60 @@ function showOffer() {
|
|
|
46
46
|
{
|
|
47
47
|
"id" : 1196968987,
|
|
48
48
|
"is_available" : true,
|
|
49
|
-
"name" : "
|
|
49
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur ",
|
|
50
50
|
"price" : {"amount": 100, "currency": "SAR"},
|
|
51
51
|
"url" : "#",
|
|
52
|
-
"thumbnail" : "https://
|
|
52
|
+
"thumbnail" : "https://source.unsplash.com/DGH1u80sZik/400x300",
|
|
53
|
+
"has_special_price": false,
|
|
54
|
+
"regular_price" : {"amount": 100, "currency": "SAR"},
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
"id" : 1196968987,
|
|
58
|
+
"is_available" : true,
|
|
59
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur ",
|
|
60
|
+
"price" : {"amount": 100, "currency": "SAR"},
|
|
61
|
+
"url" : "#",
|
|
62
|
+
"thumbnail" : "https://source.unsplash.com/2cFZ_FB08UM/400x300",
|
|
63
|
+
"has_special_price": false,
|
|
64
|
+
"regular_price" : {"amount": 100, "currency": "SAR"},
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"id" : 1196968987,
|
|
68
|
+
"is_available" : true,
|
|
69
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur ",
|
|
70
|
+
"price" : {"amount": 100, "currency": "SAR"},
|
|
71
|
+
"url" : "#",
|
|
72
|
+
"thumbnail" : "https://source.unsplash.com/nwOip8AOZz0/400x300",
|
|
73
|
+
"has_special_price": false,
|
|
74
|
+
"regular_price" : {"amount": 100, "currency": "SAR"},
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"id" : 1196968987,
|
|
78
|
+
"is_available" : true,
|
|
79
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur ",
|
|
80
|
+
"price" : {"amount": 100, "currency": "SAR"},
|
|
81
|
+
"url" : "#",
|
|
82
|
+
"thumbnail" : "https://source.unsplash.com/dwKiHoqqxk8/400x300",
|
|
83
|
+
"has_special_price": false,
|
|
84
|
+
"regular_price" : {"amount": 100, "currency": "SAR"},
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"id" : 1196968987,
|
|
88
|
+
"is_available" : true,
|
|
89
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur ",
|
|
90
|
+
"price" : {"amount": 100, "currency": "SAR"},
|
|
91
|
+
"url" : "#",
|
|
92
|
+
"thumbnail" : "https://source.unsplash.com/LxVxPA1LOVM/400x300",
|
|
53
93
|
"has_special_price": false,
|
|
54
94
|
"regular_price" : {"amount": 100, "currency": "SAR"},
|
|
55
95
|
},
|
|
56
96
|
{
|
|
57
97
|
"id" : 2051852144,
|
|
58
98
|
"is_available" : true,
|
|
59
|
-
"name" : "
|
|
99
|
+
"name" : "Lorem ipsum, dolor sit amet consectetur ",
|
|
60
100
|
"price" : {"amount": 103.5, "currency": "SAR"},
|
|
61
101
|
"url" : "#",
|
|
62
|
-
"thumbnail" : "https://
|
|
102
|
+
"thumbnail" : "https://source.unsplash.com/Nv4QHkTVEaI/400x300",
|
|
63
103
|
"has_special_price": true,
|
|
64
104
|
"regular_price" : {"amount": 115, "currency": "SAR"},
|
|
65
105
|
}
|
|
@@ -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 {
|
|
@@ -1295,6 +1295,8 @@ video {
|
|
|
1295
1295
|
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
1296
1296
|
padding-left: 1rem;
|
|
1297
1297
|
padding-right: 1rem;
|
|
1298
|
+
font-size: 0.875rem;
|
|
1299
|
+
line-height: 1.25rem;
|
|
1298
1300
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
1299
1301
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1300
1302
|
transition-duration: 150ms;
|
|
@@ -1303,14 +1305,6 @@ video {
|
|
|
1303
1305
|
|
|
1304
1306
|
.s-branches-select:focus {
|
|
1305
1307
|
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
1308
|
}
|
|
1315
1309
|
|
|
1316
1310
|
.s-branches-space-v > :not([hidden]) ~ :not([hidden]) {
|
|
@@ -1817,6 +1811,8 @@ video {
|
|
|
1817
1811
|
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
1818
1812
|
padding-left: 1rem;
|
|
1819
1813
|
padding-right: 1rem;
|
|
1814
|
+
font-size: 0.875rem;
|
|
1815
|
+
line-height: 1.25rem;
|
|
1820
1816
|
--tw-text-opacity: 1;
|
|
1821
1817
|
color: rgba(113, 113, 122, var(--tw-text-opacity));
|
|
1822
1818
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
@@ -1827,14 +1823,6 @@ video {
|
|
|
1827
1823
|
|
|
1828
1824
|
.s-localization-modal-select:focus {
|
|
1829
1825
|
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
1826
|
}
|
|
1839
1827
|
|
|
1840
1828
|
.s-login-modal-sub-title {
|
|
@@ -1857,7 +1845,7 @@ video {
|
|
|
1857
1845
|
border-radius: 0.375rem;
|
|
1858
1846
|
border-width: 1px;
|
|
1859
1847
|
--tw-border-opacity: 1;
|
|
1860
|
-
border-color: rgba(
|
|
1848
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
1861
1849
|
--tw-bg-opacity: 1;
|
|
1862
1850
|
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
|
|
1863
1851
|
padding-top: 1.25rem;
|
|
@@ -1927,23 +1915,24 @@ video {
|
|
|
1927
1915
|
}
|
|
1928
1916
|
|
|
1929
1917
|
.s-login-modal-input {
|
|
1930
|
-
-
|
|
1931
|
-
-moz-appearance: none;
|
|
1932
|
-
appearance: none;
|
|
1918
|
+
margin-bottom: 1rem;
|
|
1933
1919
|
height: 2.5rem;
|
|
1934
1920
|
width: 100%;
|
|
1935
1921
|
border-radius: 0.375rem;
|
|
1922
|
+
border-width: 1px;
|
|
1936
1923
|
--tw-border-opacity: 1;
|
|
1937
|
-
border-color: rgba(
|
|
1924
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
1925
|
+
padding-left: 0.5rem;
|
|
1926
|
+
padding-right: 0.5rem;
|
|
1927
|
+
font-size: 0.875rem;
|
|
1928
|
+
line-height: 1.25rem;
|
|
1938
1929
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
1939
1930
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1940
1931
|
transition-duration: 150ms;
|
|
1941
|
-
transition-duration: 300ms;
|
|
1942
1932
|
}
|
|
1943
1933
|
|
|
1944
1934
|
.s-login-modal-input:focus {
|
|
1945
1935
|
border-color: var(--color-main);
|
|
1946
|
-
--tw-ring-color: transparent;
|
|
1947
1936
|
}
|
|
1948
1937
|
|
|
1949
1938
|
.dark .s-login-modal-input {
|
|
@@ -1953,57 +1942,6 @@ video {
|
|
|
1953
1942
|
background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
|
|
1954
1943
|
}
|
|
1955
1944
|
|
|
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
1945
|
.s-login-modal-link {
|
|
2008
1946
|
margin-top: 1.5rem;
|
|
2009
1947
|
display: block;
|
|
@@ -2249,9 +2187,9 @@ video {
|
|
|
2249
2187
|
border-width: 1px;
|
|
2250
2188
|
border-style: solid;
|
|
2251
2189
|
--tw-border-opacity: 1;
|
|
2252
|
-
border-color: rgba(
|
|
2253
|
-
font-size: 1.
|
|
2254
|
-
line-height:
|
|
2190
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
2191
|
+
font-size: 1.875rem;
|
|
2192
|
+
line-height: 2.25rem;
|
|
2255
2193
|
--tw-text-opacity: 1;
|
|
2256
2194
|
color: rgba(161, 161, 170, var(--tw-text-opacity));
|
|
2257
2195
|
-webkit-margin-end: 0.5rem;
|
|
@@ -2603,6 +2541,8 @@ video {
|
|
|
2603
2541
|
height: 8rem;
|
|
2604
2542
|
overflow: hidden;
|
|
2605
2543
|
border-radius: 0.375rem;
|
|
2544
|
+
--tw-bg-opacity: 1;
|
|
2545
|
+
background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
|
|
2606
2546
|
}
|
|
2607
2547
|
|
|
2608
2548
|
.s-offer-modal-product-image {
|
|
@@ -2631,6 +2571,9 @@ video {
|
|
|
2631
2571
|
line-height: 1.5rem;
|
|
2632
2572
|
line-height: 1.5rem;
|
|
2633
2573
|
color: var(--color-title);
|
|
2574
|
+
transition-property: background-color, border-color, color, fill, stroke;
|
|
2575
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2576
|
+
transition-duration: 150ms;
|
|
2634
2577
|
}
|
|
2635
2578
|
|
|
2636
2579
|
.s-offer-modal-product-name:hover {
|
|
@@ -2706,6 +2649,7 @@ video {
|
|
|
2706
2649
|
}
|
|
2707
2650
|
|
|
2708
2651
|
.s-offer-modal-remember-label {
|
|
2652
|
+
display: flex;
|
|
2709
2653
|
cursor: pointer;
|
|
2710
2654
|
font-size: 0.875rem;
|
|
2711
2655
|
line-height: 1.25rem;
|
|
@@ -2732,7 +2676,7 @@ video {
|
|
|
2732
2676
|
width: 1.5rem;
|
|
2733
2677
|
border-radius: 0.375rem;
|
|
2734
2678
|
--tw-border-opacity: 1;
|
|
2735
|
-
border-color: rgba(
|
|
2679
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
2736
2680
|
color: var(--color-main);
|
|
2737
2681
|
}
|
|
2738
2682
|
|
|
@@ -2885,20 +2829,24 @@ video {
|
|
|
2885
2829
|
}
|
|
2886
2830
|
|
|
2887
2831
|
.s-product-availability-input {
|
|
2832
|
+
margin-bottom: 1rem;
|
|
2888
2833
|
height: 2.5rem;
|
|
2889
2834
|
width: 100%;
|
|
2890
2835
|
border-radius: 0.375rem;
|
|
2836
|
+
border-width: 1px;
|
|
2891
2837
|
--tw-border-opacity: 1;
|
|
2892
|
-
border-color: rgba(
|
|
2838
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
2839
|
+
padding-left: 0.75rem;
|
|
2840
|
+
padding-right: 0.75rem;
|
|
2841
|
+
font-size: 0.875rem;
|
|
2842
|
+
line-height: 1.25rem;
|
|
2893
2843
|
transition-property: background-color, border-color, color, fill, stroke;
|
|
2894
2844
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2895
2845
|
transition-duration: 150ms;
|
|
2896
|
-
transition-duration: 300ms;
|
|
2897
2846
|
}
|
|
2898
2847
|
|
|
2899
2848
|
.s-product-availability-input:focus {
|
|
2900
2849
|
border-color: var(--color-main);
|
|
2901
|
-
--tw-ring-color: transparent;
|
|
2902
2850
|
}
|
|
2903
2851
|
|
|
2904
2852
|
.dark .s-product-availability-input {
|
|
@@ -2908,17 +2856,6 @@ video {
|
|
|
2908
2856
|
background-color: rgba(82, 82, 91, var(--tw-bg-opacity));
|
|
2909
2857
|
}
|
|
2910
2858
|
|
|
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
2859
|
.s-product-availability-footer {
|
|
2923
2860
|
display: flex;
|
|
2924
2861
|
justify-content: space-between;
|
|
@@ -2958,6 +2895,50 @@ video {
|
|
|
2958
2895
|
color: rgba(239, 68, 68, var(--tw-text-opacity)) !important;
|
|
2959
2896
|
}
|
|
2960
2897
|
|
|
2898
|
+
.s-quantity-input-container {
|
|
2899
|
+
display: flex;
|
|
2900
|
+
height: 2.5rem;
|
|
2901
|
+
align-items: stretch;
|
|
2902
|
+
border-radius: 0.375rem;
|
|
2903
|
+
border-width: 1px;
|
|
2904
|
+
font-size: 0.875rem;
|
|
2905
|
+
line-height: 1.25rem;
|
|
2906
|
+
}
|
|
2907
|
+
|
|
2908
|
+
.s-quantity-input-input {
|
|
2909
|
+
width: 3rem;
|
|
2910
|
+
border-width: 1px;
|
|
2911
|
+
border-top-width: 0px;
|
|
2912
|
+
border-bottom-width: 0px;
|
|
2913
|
+
--tw-border-opacity: 1;
|
|
2914
|
+
border-color: rgba(228, 228, 231, var(--tw-border-opacity));
|
|
2915
|
+
padding-left: 0.5rem;
|
|
2916
|
+
padding-right: 0.5rem;
|
|
2917
|
+
text-align: center;
|
|
2918
|
+
font-weight: 700;
|
|
2919
|
+
--tw-shadow: 0 0 #0000;
|
|
2920
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
2921
|
+
}
|
|
2922
|
+
|
|
2923
|
+
.s-quantity-input-input:focus {
|
|
2924
|
+
--tw-border-opacity: 1;
|
|
2925
|
+
border-color: rgba(212, 212, 216, var(--tw-border-opacity));
|
|
2926
|
+
}
|
|
2927
|
+
|
|
2928
|
+
.s-quantity-input-button {
|
|
2929
|
+
width: 2.75rem;
|
|
2930
|
+
--tw-text-opacity: 1;
|
|
2931
|
+
color: rgba(161, 161, 170, var(--tw-text-opacity));
|
|
2932
|
+
transition-property: background-color, border-color, color, fill, stroke;
|
|
2933
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2934
|
+
transition-duration: 150ms;
|
|
2935
|
+
transition-duration: 300ms;
|
|
2936
|
+
}
|
|
2937
|
+
|
|
2938
|
+
.s-quantity-input-button:hover {
|
|
2939
|
+
color: var(--color-main);
|
|
2940
|
+
}
|
|
2941
|
+
|
|
2961
2942
|
.s-rating-modal-wrapper {
|
|
2962
2943
|
margin-bottom: 2.5rem;
|
|
2963
2944
|
transition-property: all;
|
|
@@ -3171,7 +3152,10 @@ video {
|
|
|
3171
3152
|
.s-rating-modal-product-img {
|
|
3172
3153
|
height: 3.5rem;
|
|
3173
3154
|
width: 4.5rem;
|
|
3155
|
+
overflow: hidden;
|
|
3174
3156
|
border-radius: 0.375rem;
|
|
3157
|
+
--tw-bg-opacity: 1;
|
|
3158
|
+
background-color: rgba(244, 244, 245, var(--tw-bg-opacity));
|
|
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.5rem;
|
|
3564
|
+
padding-right: 0.5rem;
|
|
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,41 +636,159 @@
|
|
|
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>
|
|
694
|
+
|
|
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>
|
|
702
|
+
|
|
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>
|
|
721
|
+
|
|
722
|
+
</section>
|
|
723
|
+
|
|
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>
|
|
686
786
|
|
|
687
|
-
<div class=" p-3 rounded-md bg-white shadow-sm">
|
|
688
|
-
<h1 class="text-primary border-b border-dashed mb-4">Offer</h1>
|
|
689
|
-
<p class="my-4">Description</p>
|
|
690
|
-
<salla-button wide btn-style="outline" onClick="showOffer()">Offer</salla-button>
|
|
691
|
-
<salla-offer></salla-offer>
|
|
692
787
|
</div>
|
|
788
|
+
</div>
|
|
789
|
+
|
|
693
790
|
|
|
791
|
+
<div class="container py-10 grid-cols-2 grid gap-4">
|
|
694
792
|
<div class="p-3 rounded-md bg-white shadow-sm">
|
|
695
793
|
<h1 class="text-primary border-b border-dashed mb-4">Product Availability</h1>
|
|
696
794
|
<p class="my-4">Description</p>
|