@thefittingroom/shop-ui 1.3.0 → 1.3.2
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/README.md +16 -0
- package/dist/esm/index.js +15 -3
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/index.min.js +113 -113
- package/dist/esm/tfr-size-rec.d.ts +6 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,6 +32,8 @@ export type TfrCssVariables = {
|
|
|
32
32
|
white?: string
|
|
33
33
|
muted?: string
|
|
34
34
|
dark?: string
|
|
35
|
+
grey?: string
|
|
36
|
+
lightGrey?: string
|
|
35
37
|
|
|
36
38
|
// Main div stlyes
|
|
37
39
|
mainBorderColor?: string
|
|
@@ -49,6 +51,12 @@ export type TfrCssVariables = {
|
|
|
49
51
|
subtitleFont?: string
|
|
50
52
|
rowFont?: string
|
|
51
53
|
ctaFont?: string
|
|
54
|
+
|
|
55
|
+
// Size Selector
|
|
56
|
+
sizeSelectorTextColor?: string
|
|
57
|
+
sizeSelectorBgColor?: string
|
|
58
|
+
sizeSelectorBgColorHover?: string
|
|
59
|
+
sizeSelectorBgColorActive?: string
|
|
52
60
|
}
|
|
53
61
|
|
|
54
62
|
// UI Hooks
|
|
@@ -92,6 +100,8 @@ tfr.setBrandUserId(brandUserId)
|
|
|
92
100
|
--tfr-muted: #a7a7a7;
|
|
93
101
|
|
|
94
102
|
--tfr-dark: #121212;
|
|
103
|
+
--tfr-grey: #878787;
|
|
104
|
+
--tfr-light-grey: #f5f5f5;
|
|
95
105
|
|
|
96
106
|
/* Main */
|
|
97
107
|
--tfr-main-border-color: rgba(18, 18, 18, 0.55);
|
|
@@ -110,6 +120,12 @@ tfr.setBrandUserId(brandUserId)
|
|
|
110
120
|
--tfr-subtitle-font: var(--tfr-main-font);
|
|
111
121
|
--tfr-row-font: var(--tfr-main-font);
|
|
112
122
|
--tfr-cta-font: var(--tfr-main-font);
|
|
123
|
+
|
|
124
|
+
/* Size Selector */
|
|
125
|
+
--tfr-size-selector-text-color: var(--tfr-white);
|
|
126
|
+
--tfr-size-selector-bg-color: var(--tfr-grey);
|
|
127
|
+
--tfr-size-selector-bg-color-hover: var(--tfr-light-grey);
|
|
128
|
+
--tfr-size-selector-bg-color-active: var(--tfr-dark);
|
|
113
129
|
}
|
|
114
130
|
```
|
|
115
131
|
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* thefittingroom v1.3.
|
|
2
|
+
* thefittingroom v1.3.2 (2024-06-25T18:13:42.216Z)
|
|
3
3
|
* Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
|
|
4
4
|
*/
|
|
5
5
|
function loadImageRecursive(imageURL, imageURLs) {
|
|
@@ -23549,7 +23549,7 @@ n(css$6,{});
|
|
|
23549
23549
|
var css$5 = "@media screen and (max-width:702px){.tfr-modal-title-logo-container{display:flex;flex-direction:column}}@media screen and (min-width:600px){.tfr-modal-content-container{border-radius:10px;height:auto}}@media screen and (max-width:599px){.tfr-mobile-hidden{display:none}.tfr-modal-content-container{min-height:100vh}.trf-logo-title{margin-bottom:10px}.tfr-modal-content-flex{height:calc(100vh - 76px)}}@media screen and (max-width:500px){.tfr-fieldset{width:90%}.tfr-how-it-works-item{flex-direction:column}.tfr-try-on-content{margin-left:0;margin-top:20px}}";
|
|
23550
23550
|
n(css$5,{});
|
|
23551
23551
|
|
|
23552
|
-
var css$4 = "#tfr-size-recommendations{background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;font-family:var(--tfr-main-font);padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations,#tfr-size-recommendations-container{align-items:center;flex-direction:column;justify-content:center}#tfr-size-recommendations-container{display:none;width:100%}#tfr-size-rec-login-svg{display:none}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-subtitle{font-family:var(--tfr-subtitle-font);margin-bottom:6px}#tfr-size-rec-subtitle,#tfr-size-rec-title{font-size:16px;font-weight:700}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;width:100%}.tfr-size-rec-table-row:first-of-type{border-top-width:2px}.tfr-size-rec-table-row{align-items:center;border-top:var(--tfr-main-border-width) solid var(--tfr-main-border-color);display:flex;font-family:var(--tfr-row-font);height:40px;justify-content:center}.tfr-size-rec-table-cell-left,.tfr-size-rec-table-cell-right{flex:1 1 0px}.tfr-size-rec-table-cell-left{font-weight:700;margin-right:70px;text-align:right}.tfr-size-rec-table-cell-right{margin-left:16px}.tfr-size-rec-table-cell-right.perfect{color:var(--tfr-brand-color)}#tfr-size-rec-size{display:inline-block}#tfr-size-rec-size>.tfr-size-rec-login-cta{font-weight:500;margin-left:10px}.tfr-size-rec-login-cta,.tfr-size-rec-table-cell-right{font-size:12px}.tfr-size-rec-login-cta{color:var(--tfr-muted);display:flex}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none;font-family:var(--tfr-cta-font)}#tfr-size-rec-action{cursor:pointer;font-size:16px;margin-top:14px;text-decoration:underline}#tfr-size-rec-select{background-color
|
|
23552
|
+
var css$4 = "#tfr-size-recommendations{background-color:var(--tfr-main-bg-color);border:var(--tfr-main-border-width) solid var(--tfr-main-border-color);border-radius:var(--tfr-main-border-radius);color:var(--tfr-dark);display:flex;font-family:var(--tfr-main-font);padding:var(--tfr-main-v-padding) var(--tfr-main-h-padding);width:var(--tfr-main-width)}#tfr-size-recommendations,#tfr-size-recommendations-container{align-items:center;flex-direction:column;justify-content:center}#tfr-size-recommendations-container{display:none;width:100%}#tfr-size-rec-login-svg{display:none}#tfr-size-rec-title{align-items:center;display:flex;font-family:var(--tfr-title-font);margin-bottom:8px}#tfr-size-rec-subtitle{font-family:var(--tfr-subtitle-font);margin-bottom:6px}#tfr-size-rec-subtitle,#tfr-size-rec-title{font-size:16px;font-weight:700}#tfr-size-rec-table{display:flex;flex-direction:column;font-size:12px;width:100%}.tfr-size-rec-table-row:first-of-type{border-top-width:2px}.tfr-size-rec-table-row{align-items:center;border-top:var(--tfr-main-border-width) solid var(--tfr-main-border-color);display:flex;font-family:var(--tfr-row-font);height:40px;justify-content:center}.tfr-size-rec-table-cell-left,.tfr-size-rec-table-cell-right{flex:1 1 0px}.tfr-size-rec-table-cell-left{font-weight:700;margin-right:70px;text-align:right}.tfr-size-rec-table-cell-right{margin-left:16px}.tfr-size-rec-table-cell-right.perfect{color:var(--tfr-brand-color)}#tfr-size-rec-size{display:inline-block}#tfr-size-rec-size>.tfr-size-rec-login-cta{font-weight:500;margin-left:10px}.tfr-size-rec-login-cta,.tfr-size-rec-table-cell-right{font-size:12px}.tfr-size-rec-login-cta{color:var(--tfr-muted);display:flex}#tfr-size-rec-action-login,#tfr-size-rec-action-logout{display:none;font-family:var(--tfr-cta-font)}#tfr-size-rec-action{cursor:pointer;font-size:16px;margin-top:14px;text-decoration:underline}#tfr-size-rec-select{background-color:var(--tfr-size-selector-bg-color);border-radius:8px;box-shadow:0 4px 4px 0 rgba(0,0,0,.3);color:var(--tfr-size-selector-text-color);display:none;font-size:14px;margin-bottom:20px;margin-top:10px}#tfr-size-rec-select,.tfr-size-rec-select-button{align-items:center;height:35px;justify-content:center}.tfr-size-rec-select-button{cursor:pointer;display:flex;transition:all .15s ease-in;width:80px}.tfr-size-rec-select-button:hover:not(.active){background-color:var(--tfr-size-selector-bg-color-hover);opacity:.7}.tfr-size-rec-select-button.active{background-color:var(--tfr-size-selector-bg-color-active);height:45px}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:first-of-type{border-bottom-left-radius:8px;border-top-left-radius:8px}.tfr-size-rec-select-button.active,.tfr-size-rec-select-button:last-of-type{border-bottom-right-radius:8px;border-top-right-radius:8px}.tfr-powered-by{align-items:center;display:flex;font-size:10px;margin-top:10px}.tfr-powered-by-logo{margin:0 4px}.tfr-powered-by-logo,.tfr-powered-by-logo img{height:24px}.tfr-powered-by-text-bold{font-weight:700}#tfr-size-recommendation-error{color:#8d0000;display:none}";
|
|
23553
23553
|
n(css$4,{});
|
|
23554
23554
|
|
|
23555
23555
|
var css$3 = ".tfr-mt-10{margin-top:10px}.tfr-mt-20{margin-top:20px}.tfr-mt-15{margin-top:15px}.tfr-mt-30{margin-top:30px}.mt-40{margin-top:40px}.tfr-mb-40{margin-bottom:40px}.tfr-mb-20{margin-bottom:20px}.tfr-mr-10{margin-right:10px}.tfr-mr-15{margin-right:15px}.tfr-mt-50{margin-top:50px}.tfr-mt-60{margin-top:60px}.tfr-mb-60{margin-bottom:60px}.tfr-mr-20{margin-right:20px}.tfr-mt-15-p{margin-top:15%}.tfr-mb-13-p{margin-bottom:13%}.tfr-m-h-auto{margin-left:auto;margin-right:auto}.tfr-pt-20{padding-top:20px}.tfr-pb-50{padding-bottom:50px}.tfr-p-20{padding:20px}.tfr-pr-20{padding-right:20px}.tfr-pl-20{padding-left:20px}.tfr-pb-7-p{padding-bottom:7%}";
|
|
@@ -23561,7 +23561,7 @@ n(css$2,{});
|
|
|
23561
23561
|
var css$1 = ".tfr-title-font{font-family:Poppins,sans-serif}.tfr-body-font{font-family:Roboto,sans-serif}.tfr-light-24-300{font-size:24px;font-weight:300}.tfr-light-24-500{font-size:24px;font-weight:500}.tfr-light-22-300{font-size:22px;font-weight:300}.tfr-light-16-300{font-size:16px;font-weight:300}.tfr-medium-16-default{font-size:16px}.tfr-12-default{font-size:12px}.tfr-14-default{font-size:14px}.tfr-16-default{font-size:16px}";
|
|
23562
23562
|
n(css$1,{});
|
|
23563
23563
|
|
|
23564
|
-
var css = ":root{--tfr-brand-color:#209da7;--tfr-black:#000;--tfr-red:red;--tfr-white:#fff;--tfr-muted:#a7a7a7;--tfr-dark:#121212;--tfr-main-border-color:hsla(0,0%,7%,.55);--tfr-main-border-radius:0;--tfr-main-border-width:1px;--tfr-main-bg-color:inherit;--tfr-main-width:440px;--tfr-main-v-padding:14px;--tfr-main-h-padding:20px;--tfr-main-font:inherit;--tfr-title-font:var(--tfr-main-font);--tfr-subtitle-font:var(--tfr-main-font);--tfr-row-font:var(--tfr-main-font);--tfr-cta-font:var(--tfr-main-font)}";
|
|
23564
|
+
var css = ":root{--tfr-brand-color:#209da7;--tfr-black:#000;--tfr-red:red;--tfr-white:#fff;--tfr-muted:#a7a7a7;--tfr-dark:#121212;--tfr-grey:#878787;--tfr-light-grey:#f5f5f5;--tfr-main-border-color:hsla(0,0%,7%,.55);--tfr-main-border-radius:0;--tfr-main-border-width:1px;--tfr-main-bg-color:inherit;--tfr-main-width:440px;--tfr-main-v-padding:14px;--tfr-main-h-padding:20px;--tfr-main-font:inherit;--tfr-title-font:var(--tfr-main-font);--tfr-subtitle-font:var(--tfr-main-font);--tfr-row-font:var(--tfr-main-font);--tfr-cta-font:var(--tfr-main-font);--tfr-size-selector-text-color:var(--tfr-white);--tfr-size-selector-bg-color:var(--tfr-grey);--tfr-size-selector-bg-color-hover:var(--tfr-light-grey);--tfr-size-selector-bg-color-active:var(--tfr-dark)}";
|
|
23565
23565
|
n(css,{});
|
|
23566
23566
|
|
|
23567
23567
|
const ErrorModal = (props) => {
|
|
@@ -36765,6 +36765,10 @@ class TfrSizeRec {
|
|
|
36765
36765
|
r.style.setProperty('--tfr-muted', cssVariables.muted);
|
|
36766
36766
|
if (cssVariables.dark)
|
|
36767
36767
|
r.style.setProperty('--tfr-dark', cssVariables.dark);
|
|
36768
|
+
if (cssVariables.grey)
|
|
36769
|
+
r.style.setProperty('--tfr-grey', cssVariables.grey);
|
|
36770
|
+
if (cssVariables.lightGrey)
|
|
36771
|
+
r.style.setProperty('--tfr-light-grey', cssVariables.lightGrey);
|
|
36768
36772
|
if (cssVariables.mainBorderColor)
|
|
36769
36773
|
r.style.setProperty('--tfr-main-border-color', cssVariables.mainBorderColor);
|
|
36770
36774
|
if (cssVariables.mainBorderRadius)
|
|
@@ -36789,6 +36793,14 @@ class TfrSizeRec {
|
|
|
36789
36793
|
r.style.setProperty('--tfr-row-font', cssVariables.rowFont);
|
|
36790
36794
|
if (cssVariables.ctaFont)
|
|
36791
36795
|
r.style.setProperty('--tfr-cta-font', cssVariables.ctaFont);
|
|
36796
|
+
if (cssVariables.sizeSelectorTextColor)
|
|
36797
|
+
r.style.setProperty('--tfr-size-selector-text-color', cssVariables.sizeSelectorTextColor);
|
|
36798
|
+
if (cssVariables.sizeSelectorBgColor)
|
|
36799
|
+
r.style.setProperty('--tfr-size-selector-bg-color', cssVariables.sizeSelectorBgColor);
|
|
36800
|
+
if (cssVariables.sizeSelectorBgColorHover)
|
|
36801
|
+
r.style.setProperty('--tfr-size-selector-bg-color-hover', cssVariables.sizeSelectorBgColorHover);
|
|
36802
|
+
if (cssVariables.sizeSelectorBgColorActive)
|
|
36803
|
+
r.style.setProperty('--tfr-size-selector-bg-color-active', cssVariables.sizeSelectorBgColorActive);
|
|
36792
36804
|
}
|
|
36793
36805
|
}
|
|
36794
36806
|
|