@epigraph/configurator 1.0.0-alpha.0
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 +93 -0
- package/dist/epigraph-configurator.css +2 -0
- package/dist/epigraph-configurator.js +3 -0
- package/package.json +82 -0
package/README.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
<!-- # User Documentation -->
|
|
2
|
+
|
|
3
|
+
# INTRODUCTION
|
|
4
|
+
|
|
5
|
+
The "Epigraph Configurator" web component is meant to be a wrapper around "Epigraph's Configurator Core" web component. The Configurator web component aims at providing a fully functional configurator for our clients with a default UI along with some customisation options.
|
|
6
|
+
Even though we provide a default UI for our clients, the goal is always to allow the client developers to expand on top of these existing functionalities or even replace it entirely.
|
|
7
|
+
|
|
8
|
+
### Some Useful Links:
|
|
9
|
+
|
|
10
|
+
- [Web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
|
|
11
|
+
|
|
12
|
+
## SETTING UP DEV ENVIRONMENT (For Epigraph Devs Only)
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
To setup a dev environment please refer to this repository tagged below, which aims to automate the process as mugh as possible:
|
|
17
|
+
|
|
18
|
+
[epigraph-configurator-dev-env](https://github.com/epigraph-us/epigraph-configurator-dev-env)
|
|
19
|
+
|
|
20
|
+
## USAGE
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
### Importing the Web Component
|
|
25
|
+
|
|
26
|
+
In order to import the web component on your page, you must import the the script in your head tag:
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<head>
|
|
30
|
+
<!-- Import other scripts above and below this. -->
|
|
31
|
+
<script src="https://unpkg.com/@epigraph/configurator"></script>
|
|
32
|
+
</head>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Once the web component is imported, there are two primary modes that we intended the Epigraph Configurator to be used as. Irrespective of the mode that you choose to setup the configurator in, we have tried to make the process as similar as possible.
|
|
36
|
+
|
|
37
|
+
### With the default UI:
|
|
38
|
+
|
|
39
|
+
This is the usage that we mostly expect our client to use. This is the quickest mode to get started with embedding a configurator on any website that runs on modern browsers.
|
|
40
|
+
|
|
41
|
+
To start with setting up a fully functional product configurator on your website:
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<!-- A client-access-key can only be linked to a single domain, so if you would like to whitelist your staging URL as well, please request a separate key for the same. -->
|
|
45
|
+
<epigraph-configurator id="wcEpigraphConfigurator" client-access-key="<key-provided-by-epigraph>"/></epigraph-configurator>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Without UI:
|
|
49
|
+
|
|
50
|
+
This mode allows the developers to use only the configurator core and build a UI on top of it from scratch. Even though we allows our customers to embed the epigraph-configurator-core directly on their websites, we do not recommend that. If you already have a custom UI in mind for what you wish for the configurator to look like. The recommended way is to import the epigraph-configurator web component on the webpage and set it's mode to disable UI.
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<!-- A client-access-key can only be linked to a single domain, so if you would like to whitelist your staging URL as well, please request a separate key for the same. -->
|
|
54
|
+
<epigraph-configurator
|
|
55
|
+
id="wcEpigraphConfigurator"
|
|
56
|
+
client-access-key="<key-provided-by-epigraph>"
|
|
57
|
+
disable-ui
|
|
58
|
+
></epigraph-configurator>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Working with the API
|
|
62
|
+
|
|
63
|
+
Once you choose to move forward with a configurator mode, use the Core API documentation to interact with the configurator and expand on top of it's capabilities.
|
|
64
|
+
|
|
65
|
+
Epigraph API exposes it's core's API on the HTML element itself and the uses the same internally as well. To access the same, all you should have to do it keep a reference to the web component that was attached to the webpage:
|
|
66
|
+
|
|
67
|
+
```html
|
|
68
|
+
<head>
|
|
69
|
+
<!-- Import other scripts above and below this. -->
|
|
70
|
+
<script src="https://unpkg.com/@epigraph/configurator"></script>
|
|
71
|
+
</head>
|
|
72
|
+
|
|
73
|
+
<!-- A client-access-key can only be linked to a single domain, so if you would like to whitelist your staging URL as well, please request a separate key for the same. -->
|
|
74
|
+
<epigraph-configurator
|
|
75
|
+
id="wcEpigraphConfigurator"
|
|
76
|
+
client-access-key="<key-provided-by-epigraph>"
|
|
77
|
+
></epigraph-configurator>
|
|
78
|
+
|
|
79
|
+
<script>
|
|
80
|
+
const EPIGRAPH_CONFIGURATOR_WC = document.querySelector(
|
|
81
|
+
"wcEpigraphConfigurator"
|
|
82
|
+
);
|
|
83
|
+
const IS_API_INITIALISED = EPIGRAPH_CONFIGURATOR_WC.api.isReady(); // returns true if the api is avilable to be used
|
|
84
|
+
// TODO: We are even planning to add an "coreApi:ready" event on the configurator web component for you to subscribe to
|
|
85
|
+
|
|
86
|
+
if (IS_API_INITIALISED === false) {
|
|
87
|
+
// You could choose to abort the process and remove the web component if the api isn't available.
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// If the API was initialised and ready to be used. For example:
|
|
91
|
+
// EPIGRAPH_CONFIGURATOR_WC.api.<anyMethodFromTheApi>();
|
|
92
|
+
</script>
|
|
93
|
+
```
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap);.react-tabs{-webkit-tap-highlight-color:transparent}.react-tabs__tab-list{border-bottom:1px solid #aaa;margin:0 0 10px;padding:0}.react-tabs__tab{border:1px solid transparent;border-bottom:none;bottom:-1px;cursor:pointer;display:inline-block;list-style:none;padding:6px 12px;position:relative}.react-tabs__tab--selected{background:#fff;border-color:#aaa;border-radius:5px 5px 0 0;color:#000}.react-tabs__tab--disabled{color:GrayText;cursor:default}.react-tabs__tab:focus{outline:none}.react-tabs__tab:focus:after{background:#fff;bottom:-5px;content:"";height:5px;left:-4px;position:absolute;right:-4px}.react-tabs__tab-panel{display:none}.react-tabs__tab-panel--selected{display:block}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide--draggable>.splide__slider>.splide__track,.splide--draggable>.splide__track{-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide--fade>.splide__slider>.splide__track>.splide__list,.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,.splide--fade>.splide__track>.splide__list>.splide__slide{left:0;opacity:0;position:absolute;top:0;z-index:0}.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{opacity:1;position:relative;z-index:1}.splide--rtl{direction:rtl}.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,.splide--ttb.is-active>.splide__track>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important;transform-style:preserve-3d}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide__progress__bar{width:0}.splide{outline:none;position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{-ms-flex-negative:0;backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;list-style-type:none!important;margin:0;outline:none;position:relative}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__track{overflow:hidden;position:relative;z-index:0}[data-rsbs-overlay]{background:#fff;background:var(--rsbs-bg,#fff);border-top-left-radius:16px;border-top-left-radius:var(--rsbs-overlay-rounded,16px);border-top-right-radius:16px;border-top-right-radius:var(--rsbs-overlay-rounded,16px);display:flex;flex-direction:column;height:0;height:var(--rsbs-overlay-h,0);transform:translateZ(0);transform:translate3d(0,var(--rsbs-overlay-translate-y,0),0);will-change:height}[data-rsbs-overlay]:focus{outline:none}[data-rsbs-is-blocking=false] [data-rsbs-overlay]{box-shadow:0 -5px 60px 0 rgba(38,89,115,.11),0 -1px 0 rgba(38,89,115,.05)}[data-rsbs-overlay],[data-rsbs-root]:after{margin-left:env(safe-area-inset-left);margin-left:var(--rsbs-ml,env(safe-area-inset-left));margin-right:env(safe-area-inset-right);margin-right:var(--rsbs-mr,env(safe-area-inset-right));max-width:auto;max-width:var(--rsbs-max-w,auto)}[data-rsbs-backdrop],[data-rsbs-overlay],[data-rsbs-root]:after{-ms-scroll-chaining:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;bottom:0;left:0;overscroll-behavior:none;position:fixed;right:0;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:3}[data-rsbs-backdrop]{background-color:rgba(0,0,0,.6);background-color:var(--rsbs-backdrop-bg,rgba(0,0,0,.6));bottom:-60px;cursor:pointer;opacity:1;top:-60px;will-change:opacity}[data-rsbs-is-dismissable=false] [data-rsbs-backdrop]{cursor:ns-resize}[data-rsbs-root]:after{background:#fff;background:var(--rsbs-bg,#fff);content:"";height:1px;pointer-events:none;transform:scaleY(0);transform:scaleY(var(--rsbs-antigap-scale-y,0));transform-origin:bottom;will-change:transform}[data-rsbs-footer],[data-rsbs-header]{cursor:ns-resize;flex-shrink:0;padding:16px}[data-rsbs-header]{box-shadow:0 1px 0 rgba(46,59,66,.125);box-shadow:0 1px 0 rgba(46,59,66,calc(var(--rsbs-content-opacity,1)*.125));padding-bottom:8px;padding-top:calc(20px + env(safe-area-inset-top));text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1}[data-rsbs-header]:before{background-color:rgba(0,0,0,.14);background-color:var(--rsbs-handle-bg,rgba(0,0,0,.14));border-radius:2px;content:"";display:block;height:4px;left:50%;position:absolute;top:calc(8px + env(safe-area-inset-top));transform:translateX(-50%);width:36px}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){[data-rsbs-header]:before{transform:translateX(-50%) scaleY(.75)}}[data-rsbs-has-header=false] [data-rsbs-header]{box-shadow:none;padding-top:calc(12px + env(safe-area-inset-top))}[data-rsbs-scroll]{-webkit-tap-highlight-color:revert;-webkit-touch-callout:revert;-ms-scroll-chaining:none;-webkit-overflow-scrolling:touch;flex-grow:1;flex-shrink:1;overflow:auto;overscroll-behavior:contain;-webkit-user-select:auto;-ms-user-select:auto;-moz-user-select:auto;user-select:auto}[data-rsbs-scroll]:focus{outline:none}[data-rsbs-has-footer=false] [data-rsbs-content]{padding-bottom:env(safe-area-inset-bottom)}[data-rsbs-content]{overflow:hidden}[data-rsbs-footer]{box-shadow:0 -1px 0 rgba(46,59,66,.125),0 2px 0 #fff;box-shadow:0 -1px 0 rgba(46,59,66,calc(var(--rsbs-content-opacity,1)*.125)),0 2px 0 var(--rsbs-bg,#fff);overflow:hidden;padding-bottom:calc(16px + env(safe-area-inset-bottom));z-index:1}[data-rsbs-is-dismissable=false][data-rsbs-state=closing] [data-rsbs-footer]>*,[data-rsbs-is-dismissable=false][data-rsbs-state=closing] [data-rsbs-header]>*,[data-rsbs-is-dismissable=false][data-rsbs-state=closing] [data-rsbs-scroll]>*,[data-rsbs-is-dismissable=false][data-rsbs-state=opening] [data-rsbs-footer]>*,[data-rsbs-is-dismissable=false][data-rsbs-state=opening] [data-rsbs-header]>*,[data-rsbs-is-dismissable=false][data-rsbs-state=opening] [data-rsbs-scroll]>*,[data-rsbs-is-dismissable=true] [data-rsbs-footer]>*,[data-rsbs-is-dismissable=true] [data-rsbs-header]>*,[data-rsbs-is-dismissable=true] [data-rsbs-scroll]>*{opacity:1;opacity:var(--rsbs-content-opacity,1)}[data-rsbs-is-dismissable=false][data-rsbs-state=closing] [data-rsbs-backdrop],[data-rsbs-is-dismissable=false][data-rsbs-state=opening] [data-rsbs-backdrop],[data-rsbs-is-dismissable=true] [data-rsbs-backdrop]{opacity:1;opacity:var(--rsbs-backdrop-opacity,1)}[data-rsbs-state=closed],[data-rsbs-state=closing]{pointer-events:none}*{--hotspot-inner-circle-border-color:#e52438;--product-tour-dot-background-color:#e52438;--product-tour-current-dot-background-color:#fff;--hotspot-button-background-color:#fff;--hotspot-button-border-color:#e52438;--primary-color:#e52438;--secondary-color:#e52438;--visited-color:#949494;box-sizing:border-box;font-family:Inter,helvetica,sans-serif}epigraph-configurator-core{height:100%;width:100%}#epigraph-configurator-core-slot{border-radius:12px 12px 12px 12px;height:100%;overflow:hidden;position:relative;width:100%}#root,body,html{align-content:center;align-items:center;display:flex;flex-direction:row;height:100%;justify-content:space-evenly;margin:0;overflow:hidden;padding:0;width:100%}body{background:#fff;overflow:hidden}.loading{color:var(--primary-color)}.shadowRoot{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.mainCanvas{background:#fff}.annotation{align-items:center;background:#000;border:none;border-radius:20px;color:#f0f0f0;cursor:pointer;display:flex;font-size:8px;font-weight:300;gap:5px;justify-content:center;letter-spacing:1px;outline:none;padding:2px 10px}.annotation:hover{opacity:.8}.content{background:#202035;border-radius:5px;color:#fff;padding:10px 15px;text-align:left;-webkit-transform:translate3d(50%,0,0);transform:translate3d(50%,0,0)}.ItemsParent{background-color:#e0e0e0ee;border-radius:15%;bottom:0;margin:5px;position:absolute;right:0}.Item{user-drag:none;-webkit-user-drag:none;cursor:grab;height:75px;padding:15px;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;width:75px}.Item:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}.cursorImg{height:0;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:0}.active{height:50px;opacity:1;width:50px;z-index:99}.heading{font-size:2rem;font-weight:700;padding:1rem}.description{font-size:1rem;padding:0 1rem}.overlayUI{align-content:center;align-items:center;border:1px solid #f5f5f5;box-shadow:4px 4px 24px rgba(0,0,0,.08);display:flex;flex-direction:row;height:100%;justify-content:center;max-height:800px;max-width:1440px;padding:0;position:absolute;width:100%}.shellCanvas{border-radius:12px 12px 0 0;height:85%;position:relative;width:100%}.shellSideMenu{height:100%;width:30%}.ignore{pointer-events:none}.interactable{pointer-events:all}.arButton{bottom:3vh;left:2vh;position:absolute}.sideMenu{align-content:center;align-items:flex-start;background:#fff;-webkit-filter:drop-shadow(-4px 4px 12px rgba(0,0,0,.05));filter:drop-shadow(-4px 4px 12px rgba(0,0,0,.05));flex-direction:column;height:100%;justify-content:space-between;max-width:27.5rem;min-width:24.5rem;width:31%}.sideMenu,.sideMenuTabs{display:flex;position:relative}.sideMenuTabs{align-items:flex-end;box-shadow:-4px 4px 8px rgba(0,0,0,.05);gap:0;height:5rem;justify-content:center;width:100%;z-index:1}.sideMenuTabs .button{align-items:center;color:#333;display:flex;flex-direction:column;font-size:1rem;font-weight:600;justify-content:center;opacity:1;padding-bottom:1.125rem;text-transform:uppercase;width:33%}.sideMenuTabs .button .icon,.sideMenuTabs .button span{opacity:.5}.activeSideMenuTab .icon,.activeSideMenuTab span{opacity:1!important}.sideMenuTabs .button:hover{border-bottom:1px solid #333}.activeSideMenuTab{border-bottom:2px solid #333!important}.sideMenuTabs .button .icon{margin-bottom:.5rem;width:22px}.sideMenuContent{background:#fff;height:calc(100% - 9rem);left:0;position:absolute;top:5rem;width:100%}.leftShell{align-content:center;height:100%;justify-content:center;min-width:50%;position:relative;width:69%}.leftShell,.title{align-items:flex-start;display:flex;flex-direction:column}.title{box-sizing:border-box;justify-content:flex-start;margin:0;padding-left:4.25rem;padding-top:2.375rem}.title h1{color:#333;font-size:1.75rem;font-weight:600;line-height:2rem;text-align:left;text-transform:uppercase}.title h1:nth-child(2){font-weight:300;margin-top:.25rem}.bottomBar{align-items:center;background-color:#333;bottom:0;display:flex;height:4rem;justify-content:flex-end;left:0;min-height:4rem;padding:1vh;position:absolute;width:100%}.bottomBar.right{border-radius:12px 12px 0 0;justify-content:space-between;padding:.5rem 24px}.bottomBar:hover{background-color:#1f1f1f}.bottomBar .cartButton{position:relative}.bottomBar .reviewButton{color:#fff;font-size:18px;margin-right:12px}.bottomBar div{color:#fff;font-size:1.125rem;font-weight:700}.bottomBar .cartNumber{align-items:center;background:var(--primary-color);border-radius:50%;color:#fff;display:flex;height:2rem;justify-content:center;margin-left:.5rem;padding:.5rem;position:relative;width:2rem}.button{cursor:pointer;font-weight:700}.leftBottomBarButton{border:2px solid #ccc!important;border-radius:4px;color:#fff;font-size:14px;margin:1vh;padding:12px;text-align:center;width:80px}*{scrollbar-color:blue transparent;scrollbar-width:8px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background-color:#c4c4c4;border:none;border-radius:0}.shellCanvasTopOptions{position:absolute;right:2rem;top:2rem}.shellCanvasBottomOptions{bottom:2rem;display:flex;flex-direction:column;justify-content:flex-end;position:absolute;right:2rem;z-index:4}.shellCanvasBottomOptions img:first-child{margin-bottom:1rem}.hotspotDrawer .drawerContent{padding:2rem}.hotspotDrawer h2{font-weight:700;text-transform:uppercase}.uiModal{align-items:center;display:flex;height:100%;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:.2s ease;-webkit-transition:.2s ease;width:100%;z-index:30}.uiModal.open{opacity:1;pointer-events:all}.uiModal .modalOverlay{background:rgba(51,51,51,.4);height:100%;left:0;position:absolute;top:0;width:100%}.uiModal .modalDialog{align-items:center;background:#fff;border-radius:.75rem;display:flex;flex-direction:column;justify-content:center;padding:4.5rem 4.5rem 3.5rem;position:relative;width:50%;z-index:32}.uiModal .modalDialog .modalHeading{color:#333;font-size:1.5rem;font-weight:700;margin:0 0 2.5rem;text-transform:uppercase}.uiModal .modalDialog input{border:.5px solid #333;border-radius:.25rem;color:#333;font-weight:300;padding:.75rem 1.375rem;width:100%}.uiModal .modalDialog button{background:var(--primary-color);border:none;border-radius:.25rem;box-shadow:none;color:#fff;cursor:pointer;font-size:.875rem;font-weight:500;margin:2.25rem 0 0;outline:none;padding:.75rem 1.875rem;text-align:center}.uiModal .modalDialog .modalCloseContainer{display:flex;justify-content:flex-end;position:absolute;right:26px;top:16px;width:100%}.uiModal .modalDialog .modalCloseContainer button{background:transparent;border:none;cursor:pointer;margin:0;outline:none;padding:0}.uiModal .modalDialog .modalCloseContainer button img{width:1.5rem}.removeAllColorOverridesButton{background-color:initial;border:1px solid #333;border-radius:3px;color:#333;cursor:pointer;font-family:Inter;font-weight:700;height:44px;margin-bottom:1rem;transition:.2s;width:100%}.removeAllColorOverridesButton:hover{background-color:#333;color:#fff;transition:.25s}.Toastify__toast-container--bottom-right{bottom:4rem!important}.Toastify__close-button{align-self:center!important}.viewInYourSpace{z-index:213}.viewInYourSpace-AR{height:10%;position:absolute;width:90%;z-index:213}h1{line-height:2;margin:0;text-align:center}h2{font-weight:400;margin:0 0 .5em}.tabs input{opacity:0;position:absolute;z-index:-1}.row{display:flex}.row .col{flex:1 1}.row .col:last-child{margin-left:1em}.tabs{border-radius:8px}.tab,.tabs{overflow:hidden}.tab{color:#fff;width:100%}.tab-label{align-items:center;background:#fff;color:#000;cursor:pointer;display:flex;font-size:16px;font-weight:600;justify-content:space-between;padding:1rem 1.5rem;position:relative;text-transform:uppercase}.tab-label img{height:auto;width:1.6rem}.tab-label span{max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.accordionTab:nth-child(2n) .tab-content,.accordionTab:nth-child(2n) .tab-label{background:#f8f8f8}.tab-label:hover{background:#f7f7f7}.tab-label .ellipsis{background:#fff;border:2px solid #e52438;border-radius:50%;box-sizing:border-box;height:20px;margin-right:12px;width:20px}.tabs .tab-content{background:#fff;color:#000;height:0;overflow:hidden;padding:0 1em;transition:.15s ease-out}.tab:nth-child(2n) .tab-content{background:#f5f5f5}.tab-close{background:#2c3e50;cursor:pointer;display:flex;font-size:.75em;justify-content:flex-end;padding:1em}.tab-close:hover{background:#1a252f}input:checked+.tab-label .accordion-closed{display:none}input+.tab-label .accordion-closed,input:checked+.tab-label .accordion-open{display:flex}input+.tab-label .accordion-open{display:none}h1,h2,h3,h4,h5,p{margin:0}.hotspot-content{padding:2.5rem 2rem}.hotspot-content h2{font-size:1.3rem;font-weight:700;margin-bottom:1rem;text-transform:uppercase}.carousel{margin-top:1rem;padding-bottom:1rem}.carousel img{max-height:280px;min-height:280px;width:auto}.carousel video{height:100%;max-width:100%}.carouselTabParent{align-items:center;display:flex;height:100%;justify-content:center;max-height:30vh;width:100%}.splide__pagination{display:none!important}.splide__arrows{bottom:-52px;display:flex;justify-content:center;position:absolute;width:100%}.splide__arrow--prev{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.splide__arrow{background:transparent;border:none;box-shadow:none;padding:1rem;transition:.1s}.splide__arrow svg{height:1rem;width:1rem}.splide__arrow:disabled{opacity:.3;pointer-events:none}.col{border-radius:12px}.container{padding:28px 46px 2.5rem}.col,.container{height:100%;overflow-y:scroll}.col{padding:0}.container::-webkit-scrollbar{display:none}.container .subheading{font-size:.75rem;font-weight:300;margin-bottom:1.5rem;margin-top:0;text-transform:uppercase}.item-grid{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;position:relative;row-gap:3.125rem}.item-grid .imageContainer{background:#fff;border-radius:.6rem;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;cursor:pointer;height:6rem;position:relative;transition:.2s ease;width:6rem}.item-grid .imageContainer .contentContainer{align-items:center;background:#fff;border-radius:.6rem;box-shadow:0 2px 8px rgba(0,0,0,.1);-webkit-box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;flex-direction:column;height:100%;justify-content:center;left:0;margin:0;padding:8px;position:absolute;top:0;transition:.2s ease;width:100%}.splide__arrow{cursor:pointer;pointer-events:all}.item-grid .imageContainer .addCartButton{align-items:center;background:var(--primary-color);border:none;border-bottom-left-radius:.6rem;border-bottom-right-radius:.6rem;bottom:0;color:#fff;cursor:pointer;display:none;font-size:.625rem;font-weight:600;height:auto;justify-content:center;left:0;line-height:.75rem;padding:.5rem;position:absolute;text-transform:uppercase;transition:all .2s ease;-webkit-transition:all .2s ease;width:100%}.item-grid .imageContainer .addCartButton.added{background:#333}.item-grid .imageContainer .infoButton{background:none;border:0;cursor:pointer;margin:0;opacity:0;padding:0;pointer-events:none;position:absolute;right:.25rem;top:.25rem;transition:all .2s ease;-webkit-transition:all .2s ease;z-index:8}.item-grid .imageContainer .contentOverlay{align-items:center;background:rgba(51,51,51,.2);border-radius:.6rem;display:flex;height:100%;justify-content:center;left:0;opacity:0;position:absolute;top:0;transition:.5s;width:100%;z-index:3}.item-grid .imageContainer .contentOverlay img{-webkit-filter:invert(96%) sepia(3%) saturate(312%) hue-rotate(315deg) brightness(114%) contrast(100%);filter:invert(96%) sepia(3%) saturate(312%) hue-rotate(315deg) brightness(114%) contrast(100%);width:1.875rem}.item-grid .contentContainer:hover .contentOverlay{opacity:1;transition:.5s}.item-grid .imageContainer .itemDetails{bottom:-2.25rem;font-size:.685rem;justify-content:center;opacity:0;padding:.75rem 0;position:absolute;text-align:center;width:100%}.item-grid .imageContainer .itemDetails:hover{text-decoration:underline}.item-grid .imageContainer .contentContainer:hover .itemDetails{opacity:1}.item-grid .imageContainer.active .contentContainer{border:2px solid var(--primary-color)}.item-grid img{max-height:100%;max-width:100%}.container .subContainer:first-child{margin-top:0}.sideMenu .mobileExpandButton{display:none}.bottomBar .cartButton img{width:2rem}.mobileElementsModal,.mobileTabContent,.sideMenu .sideMenuTabContainer{display:none}.infoModal{align-items:center;background:#fff;border-radius:.75rem .75rem 0 0;box-shadow:0 4.96px 19.84px rgba(0,0,0,.1);display:flex;flex-direction:column;height:100%;justify-content:flex-start;left:0;opacity:0;pointer-events:none;position:absolute;text-align:center;top:0;transition:all .2s ease;-webkit-transition:all .2s ease;width:100%;z-index:15}.infoModal.open{opacity:1;pointer-events:all}.infoModal .categoryLink{align-items:center;color:#333;display:flex;gap:.75rem;left:3.625rem;position:absolute;text-decoration:none;top:2.625rem}.infoModal .categoryLink:hover{text-decoration:underline}.infoModal .categoryLink .categoryTitle{font-size:1.25rem;font-weight:700}.infoModal .infoModalImageContainer{align-items:center;background:#fff;border-radius:.8rem;display:flex;flex-direction:column;height:12.5rem;justify-content:center;margin-top:8.375rem;position:relative;width:auto}.infoModal .itemImage{height:100%;width:auto}.infoModal button{background:transparent;border:none;cursor:pointer;outline:none}.infoModal .closeButton{position:absolute;right:1.5rem;top:1.5rem}.infoModal .closeButton img{width:1.5rem}.infoModal .openNewTab{color:#333;font-size:.75rem;margin-top:1rem;position:relative;text-decoration:underline}.infoModal .itemTitle{font-size:1.25rem;font-weight:400;margin-top:1rem;max-width:60%}.infoModal .itemDescription{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;font-size:1rem;line-height:1.25rem;max-width:70%;overflow:hidden}.infoModal .infoModalDimensions{color:#333;font-size:.875rem;font-weight:700;margin-top:1rem;opacity:.4}.infoModal .infoModalActions{margin-top:3.75rem}.infoModal .infoModalActions button{background:#f8f8f8;color:#333;font-size:1.25rem;font-weight:700;padding:.6875rem;pointer-events:none;text-align:center;width:65%}.addToCartDisabled{background:#00000057!important;cursor:not-allowed!important;opacity:.75}.previewCartModal{align-items:flex-start;background:#fff;border-radius:.75rem .75rem 0 0;box-shadow:0 4.96px 19.84px rgba(0,0,0,.1);display:flex;flex-direction:column;height:calc(100% + 5rem);justify-content:flex-start;left:0;opacity:0;overflow:hidden;padding-top:5.75rem;pointer-events:none;position:absolute;top:-5rem;transition:all .2s ease;-webkit-transition:all .2s ease;width:100%;z-index:16}.previewCartModal .cartTitle{font-size:1.25rem;font-weight:700;left:2rem;position:absolute;top:2.5rem}.previewCartModal.open{opacity:1;pointer-events:all}.previewCartModal.mobile{display:none}.previewCartModal .previewCartContent{height:100%;overflow:auto;padding:0 1.5rem;position:absolute;width:100%}.previewCartModal .checkoutButton{align-items:center;background:var(--primary-color);border-radius:.25rem;color:#fff;display:flex;justify-content:center;padding:.6875rem 1rem;position:relative;text-align:center;width:20.625rem}.previewCartModal .checkoutButton:disabled{background:#00000057!important;cursor:not-allowed!important;opacity:.75}.previewCartModal .checkoutButton img{margin-left:.25rem}.previewCartModal .checkoutButton span{font-size:.6875rem;font-weight:700;text-transform:uppercase}.previewCartModal button{background:transparent;border:none;cursor:pointer;outline:none}.previewCartModal .closeButton{position:absolute;right:1.5rem;top:1.5rem}.previewCartModal .closeButton img{width:1.5rem}.cartItem{align-items:flex-start;display:flex;max-width:90%}.cartItem:nth-child(n+1){margin-bottom:1rem}.cartItem .cartItemImage{align-items:center;background:#fff;border-radius:.25rem;box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;height:6.25rem;justify-content:center;margin-right:1rem;padding:.5rem;width:6.25rem}.cartItem .cartItemImage img{height:auto;max-height:100%;max-width:100%;width:100%}.cartItem .cartItemDetails{display:flex;flex-direction:column;justify-content:flex-start;padding-top:.75rem;width:calc(100% - 6.25rem)}.cartItem .cartItemDetails h4{font-size:.75rem;font-weight:400;padding-top:.25rem}.cartItem .cartRow{align-items:center;display:flex;gap:1rem;justify-content:flex-start;margin-top:1rem;width:100%}.cartItem .itemCount{font-size:.75rem}.cartItem .qtyContainer{color:var(--primary-color);display:flex;gap:.5rem;margin-right:1.75rem}.cartItem .qtyContainer span{display:none}.cartItem .qtyContainer button{color:var(--primary-color)}.cartItem .qtyContainer input{background:#eee;border:none;border-radius:3px;color:#333;padding:.25rem .5rem;width:1.7rem}.cartItem .deleteCartButton{color:#333;display:flex;font-size:.6875rem;margin-top:.5rem;text-decoration:underline}.cartItem .deleteCartButton:hover{color:var(--primary-color)}.cartItem .itemPrice{font-size:.8125rem}.color-grid{display:flex;gap:1rem}.colorSelector{cursor:pointer}.colorSelector .colorThumbnailContainer{position:relative}.colorSelector .colorThumbnailContainer .colorThumbnail{border-radius:50%;height:5rem;width:5rem}.colorSelector .colorThumbnailContainer .checkMark{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}.colorSelector .colorThumbnailContainer .checkMark img{-webkit-filter:invert(100%) sepia(100%) saturate(2%) hue-rotate(188deg) brightness(101%);filter:invert(100%) sepia(100%) saturate(2%) hue-rotate(188deg) brightness(101%);opacity:0;transition:all .1s ease;width:45%}.colorSelector.selected .colorThumbnailContainer .checkMark img{opacity:1}.colorSelector .colorDetails{margin-top:.5rem;text-align:center}.colorSelector .colorDetails p{color:#333;font-size:.75rem;margin:0}.colorSelector .colorDetails p:first-child{font-weight:600}.colorSelector .colorDetails p:nth-child(2){font-weight:400}.itemGridDivider{border-bottom:.5px solid #c4c4c4;height:0;margin-bottom:1rem;margin-top:2.625rem;width:100%}@media only screen and (max-width:768px){body{background:#fff}.overlayUI{justify-content:center;padding:2rem 0 0}.leftShell,.overlayUI{align-content:flex-start;align-items:flex-start;flex-direction:column;height:100%;position:relative}.leftShell{justify-content:flex-start;padding:0;width:100%}.sideMenu{align-content:flex-end;align-items:flex-start;background:#f5f5f5;border:none;border-radius:12px;bottom:0;flex-direction:column;height:auto;justify-content:flex-end;max-width:none;min-width:100px;min-width:none;padding:0;position:absolute;width:100%;z-index:3}.sideMenu .desktop,.sideMenuContent,.sideMenuTabs{display:none}.sideMenu .viewInSpaceButton{width:9rem}.sideMenu .bottomBar{position:relative;width:100%;z-index:4}.bottomBar .reviewButton{font-size:.875rem;margin-right:.5rem}.bottomBar .cartButton img{width:1.25rem}.sideMenu .mobileExpandButton{align-items:center;background:#f5f5f5;border-top-left-radius:.75rem;border-top-right-radius:.75rem;display:flex;font-size:.75rem;justify-content:center;padding:1.25rem 0;position:relative;transition:all .2s ease;width:100%}.sideMenu.open .mobileExpandButton{padding:.25rem 0}.sideMenu.open .mobileExpandButton span{display:none}.sideMenu .mobileExpandButton button{align-items:center;background:#333;border:none;border-radius:50%;box-shadow:none;display:flex;height:1.5rem;justify-content:center;position:absolute;right:1.5rem;top:-1rem;width:1.5rem;z-index:5}.sideMenu .mobileExpandButton button img{-webkit-filter:invert(1);filter:invert(1)}epigraph-configurator-core{height:100%;width:100%}#epigraph-configurator-core-slot{height:70%;transition:all .2s ease;-webkit-transition:all .2s ease}#epigraph-configurator-core-slot.menuOpen{height:60%}.sideMenu .sideMenuTabContainer{display:none;height:0}.sideMenu.open .sideMenuTabContainer{display:block;height:auto;width:100%}.sideMenu.open .mobileExpandButton button img{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.sideMenu .sideMenuTabContainer .mobileTab{display:flex}.sideMenu .sideMenuTabContainer .firstMobileTabs img{height:auto;margin-bottom:.5rem;width:1.5rem}.sideMenu .firstMobileTabs{border-bottom:.25px solid #888;display:flex;height:auto;justify-content:center;margin:0;padding:0 2.5rem;width:100%}.sideMenu .firstMobileTabs .mobileTab{align-items:center;background:transparent;border-radius:0;color:#333;display:flex;flex-direction:column;font-size:.875rem;font-weight:600;height:3rem;justify-content:flex-end;opacity:.5;padding:.75rem 0;text-transform:uppercase;width:6rem}.sideMenu .react-tabs__tab--selected{background:none;border:none;border-radius:0}.react-tabs__tab{padding:0!important}.sideMenu .firstMobileTabs .react-tabs__tab--selected .mobileTab{border-bottom:1px solid #888;opacity:1}.sideMenu .secondMobileTabs{display:flex;gap:1rem;height:auto;justify-content:flex-start;margin:1.5rem 0 1.25rem;overflow:auto;padding:0 1rem;width:100%}.sideMenu .secondMobileTabs::-webkit-scrollbar{display:none}.sideMenu .secondMobileTabs .mobileTab{color:#c4c4c4;font-size:.75rem;font-weight:500;padding:0;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sideMenu .secondMobileTabs .mobileTab.scrolled{color:#333;font-weight:700}.sideMenu .secondMobileTabs .react-tabs__tab{padding:0;width:100%}.sideMenu .secondMobileTabs .react-tabs__tab--selected .mobileTab{border-bottom:1px solid #333}.item-grid{grid-gap:12px 16px;align-items:center;display:grid;gap:12px 16px;grid-template-columns:1fr 1fr 1fr 1fr;justify-items:center;padding:0 1rem}.imageContainer{align-items:center;background:transparent;border-radius:.375rem;cursor:pointer;display:flex;flex-direction:column;height:7.5rem;justify-content:flex-start;padding:0;position:relative;width:100%}.imageContainer .contentContainer,.imageContainer:hover .contentContainer{align-items:center;background:#fff;border-radius:.375rem;display:flex;flex-direction:column;height:5rem;justify-content:center;left:0;top:0;width:5rem}.imageContainer .contentContainer .contentOverlay{display:none}.imageContainer .itemDetails{bottom:0;display:flex;font-size:.75rem;position:absolute;text-align:center}.imageContainer img{background:#fff;border-radius:.25rem;margin-right:0;max-width:100%;padding:.5rem}.imageContainer .infoButton{display:none}.imageContainer:hover .addCartButton,.imageContainer:hover .itemDetails{display:flex}.mobileTabContent{display:block;padding-bottom:1.25rem}.mobileElementsModal{align-items:center;display:flex;height:100%;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.mobileElementsModal.open{opacity:1;pointer-events:all}.mobileElementsModal .overlay{background:rgba(31,31,31,.7);height:100%;left:0;position:absolute;top:0;width:100%;z-index:2}.mobileElementsModal .modalContent{background:#fff;border-radius:.75rem;box-shadow:0 1.89333px 7.57333px rgba(0,0,0,.1);display:flex;flex-direction:column;height:auto;margin-top:-25%;overflow:hidden;position:relative;width:8.9rem;z-index:4}.mobileElementsModal .modalContent .contentContainer{padding:.5rem}.mobileElementsModal .modalContent .thumbnailImage{display:flex;justify-content:center;max-height:6.4rem;width:100%}.mobileElementsModal .modalContent .thumbnailImage img{max-height:100%;max-width:100%}.mobileElementsModal .addCartButton{align-items:center;background:#fff;border:none;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.05);color:#333;display:block;font-size:1.25rem;height:2rem;justify-content:center;position:absolute;right:1.25rem;top:.875rem;width:2rem}.mobileElementsModal .itemDetails{align-items:flex-start;display:block;display:flex;flex-direction:row;font-size:.85rem;margin-top:.25rem;max-width:100%}.mobileElementsModal .itemDetails p{max-width:50%}.mobileElementsModal .itemDetails img{margin-left:.25rem;margin-top:.25rem;width:.7rem}.mobileElementsModal .cartOptions{align-items:center;background:#fff;border-radius:2.6rem;display:flex;justify-content:space-between;left:.5rem;overflow:hidden;position:relative;top:.5rem;width:calc(100% - 1rem)}.mobileElementsModal .cartOptions button{background:#fff;border:none;box-shadow:0 .946667px 2.84px rgba(0,0,0,.05);font-size:1.125rem;height:1.75rem;outline:none;width:1.75rem}.mobileElementsModal .cartOptions .cartCount{color:#e52438;font-size:1rem}.mobileElementsModal .confirmCartButton{align-items:center;background:#e52438;border:none;color:#fff;display:flex;font-size:.6875rem;font-weight:900;justify-content:center;margin-top:.25rem;padding:.5rem;width:100%}.mobileGrid{align-items:flex-start;display:flex;flex-direction:row;gap:1rem;grid-template-columns:none;justify-content:flex-start;justify-items:flex-start;overflow-x:auto;padding-left:1rem;padding-right:1rem;width:100%}.mobileGrid::-webkit-scrollbar{display:none}.itemGridDivider{background:transparent;border-right:.5px solid #c4c4c4;height:5rem;margin:0;width:1px}.previewCartModal.mobile{display:flex}.previewCartModal{height:calc(100% - 4rem);top:0;z-index:800}.previewCartModal .checkoutButton{bottom:0;left:0;margin:auto;position:relative;text-align:center;width:100%}.previewCartModal .checkoutButton img{-webkit-filter:invert(100%) sepia(100%) saturate(2%) hue-rotate(188deg) brightness(101%);filter:invert(100%) sepia(100%) saturate(2%) hue-rotate(188deg) brightness(101%)}.previewCartModal .checkoutButton:disabled{opacity:.75}.previewCartModal .previewCartButtonContainer{align-items:center;bottom:0;box-shadow:0 -4px 12px rgba(0,0,0,.05);display:flex;gap:.75rem;left:0;padding:.6875rem .9rem;position:absolute;width:100%}body{margin:0}.title{padding:0 0 0 1.375rem}.title h1{font-size:1.25rem;line-height:1.4rem}.removeAllColorOverridesButton{margin-bottom:0}}
|
|
2
|
+
/*# sourceMappingURL=main.5083b19b.css.map*/
|