@micromag/screen-urbania-recommendation 0.3.606 → 0.3.608

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-close,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundTextContainer{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-recommendation-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-recommendation-disabled.micromag-screen-urbania-recommendation-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-recommendation-hidden.micromag-screen-urbania-recommendation-container{display:none;visibility:hidden}.micromag-screen-urbania-recommendation-placeholder.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{padding:6px;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-recommendation-container{-ms-flex-align:start;align-items:flex-start}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{z-index:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundTextContainer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText{color:#f28d77;font-family:Agrandir,sans-serif;font-size:100px;font-style:italic;font-weight:900;height:100%;line-height:.9;text-align:center;text-transform:uppercase;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out;white-space:nowrap;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-hidden{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-didAnimate{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-animateFromBottom{-webkit-animation:micromag-screen-urbania-recommendation-slideFromBottom 1.2s cubic-bezier(.85,0,.15,1);animation:micromag-screen-urbania-recommendation-slideFromBottom 1.2s cubic-bezier(.85,0,.15,1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0;-webkit-transform:translateY(100%) rotate(180deg);-ms-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-animateFromTop{-webkit-animation:micromag-screen-urbania-recommendation-slideFromTop 1.2s cubic-bezier(.85,0,.15,1);animation:micromag-screen-urbania-recommendation-slideFromTop 1.2s cubic-bezier(.85,0,.15,1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);-ms-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{width:calc(100% - 10px)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor{padding:5px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory{height:20%;left:10px;padding:10px;position:absolute;top:calc(100% - 24px);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-footer{-webkit-transition:opacity .2 ease-out;transition:opacity .2 ease-out;z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-footer.micromag-screen-urbania-recommendation-disabled{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-close{color:#000;position:absolute;right:10px;top:10px;z-index:3}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-closeIcon{height:1.5em;width:1.5em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard{background-color:#fff;border-radius:10px;-webkit-box-shadow:4px 4px 4px rgba(0,0,0,.25);box-shadow:4px 4px 4px rgba(0,0,0,.25);color:#000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;margin:0 auto;-webkit-transition:height .4s cubic-bezier(.36,0,.66,-.56),opacity .4s ease;transition:height .4s cubic-bezier(.36,0,.66,-.56),opacity .4s ease;width:90%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#adadad}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-appear{-webkit-animation:micromag-screen-urbania-recommendation-appear .5s cubic-bezier(.65,0,.35,1);animation:micromag-screen-urbania-recommendation-appear .5s cubic-bezier(.65,0,.35,1);-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard .micromag-screen-urbania-recommendation-visualContainer{border-top-left-radius:10px;border-top-right-radius:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom .micromag-screen-urbania-recommendation-visualContainer{border-bottom-left-radius:10px;border-bottom-right-radius:10px;border-top-left-radius:0;border-top-right-radius:0;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-modalOpened{height:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-hidden{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;max-height:250px;overflow:hidden;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer.micromag-screen-urbania-recommendation-modalOpened{border-radius:0;overflow:auto}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px;line-height:1;padding:5px 10px 3px;text-align:center;text-transform:uppercase;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-hasVisual{position:absolute}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(34,34,34,0);height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper.micromag-screen-urbania-recommendation-modalOpened{display:-ms-flexbox;display:flex;left:50%;position:fixed;top:50%;z-index:2;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(34,34,34,.9);justify-content:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:background-color .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),backdrop-filter .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton{display:block;margin:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton.micromag-screen-urbania-recommendation-transitioning{-webkit-transition:-webkit-transform .4s cubic-bezier(.36,0,.66,-.56);transition:-webkit-transform .4s cubic-bezier(.36,0,.66,-.56);transition:transform .4s cubic-bezier(.36,0,.66,-.56);transition:transform .4s cubic-bezier(.36,0,.66,-.56),-webkit-transform .4s cubic-bezier(.36,0,.66,-.56)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton:hover{-webkit-filter:saturate(1.1);filter:saturate(1.1)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton:hover>.micromag-screen-urbania-recommendation-iconContainer{opacity:.8;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-iconContainer{bottom:10px;display:-ms-flexbox;display:flex;left:10px;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;background-color:#fff;border-radius:50%;-webkit-box-shadow:0 0 2px rgba(0,0,0,.25);box-shadow:0 0 2px rgba(0,0,0,.25);height:30px;justify-content:center;pointer-events:none;-webkit-transition:all .1s;transition:all .1s;width:30px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-iconContainer.micromag-screen-urbania-recommendation-visualBottom{bottom:25px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-icon{height:14px;width:14px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-text{display:-ms-flexbox;display:flex;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryContainer{display:-ms-flexbox;display:flex;left:0;position:absolute;top:100%;-ms-flex-pack:center;justify-content:center;overflow:hidden;-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;white-space:nowrap}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{font-family:Agrandir Tight,sans-serif;font-size:28px;font-weight:900;padding:12px 10px 6px;text-align:center;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{background-color:#343434;padding:10px;width:20%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent{margin-left:auto;padding:14px 8px 14px 0;position:relative;width:80%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#e9e9e9;display:none;margin-left:2px;padding:10px;visibility:hidden}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{word-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{font-family:Agrandir Tight,sans-serif;font-size:1.2rem;font-weight:700;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{font-family:Agrandir Tight,sans-serif;padding-top:3px;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-border{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-top:1px solid #000;display:block;height:0;margin:0;padding:0;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{font-size:14px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{font-size:12px;font-weight:700}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date p,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location p,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor p{font-weight:inherit;margin-bottom:0;margin-top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{font-family:Agrandir Tight,sans-serif;font-size:12px;font-weight:300;padding-top:3px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{font-weight:inherit;margin-bottom:.5em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p:last-child{margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-recommendation-container.micromag-screen-urbania-recommendation-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-webkit-keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}to{opacity:1}}@keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}to{opacity:1}}@-webkit-keyframes micromag-screen-urbania-recommendation-slideFromBottom{0%{opacity:0;-webkit-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@keyframes micromag-screen-urbania-recommendation-slideFromBottom{0%{opacity:0;-webkit-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@-webkit-keyframes micromag-screen-urbania-recommendation-slideFromTop{0%{opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@keyframes micromag-screen-urbania-recommendation-slideFromTop{0%{opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}
+.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-close,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundTextContainer{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-recommendation-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-recommendation-disabled.micromag-screen-urbania-recommendation-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-recommendation-hidden.micromag-screen-urbania-recommendation-container{display:none;visibility:hidden}.micromag-screen-urbania-recommendation-placeholder.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{padding:6px;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-recommendation-container{-ms-flex-align:start;align-items:flex-start}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{z-index:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundTextContainer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText{color:#f28d77;font-family:Agrandir,sans-serif;font-size:100px;font-style:italic;font-weight:900;height:100%;line-height:.9;text-align:center;text-transform:uppercase;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);-webkit-transition:opacity .3s ease-out;transition:opacity .3s ease-out;white-space:nowrap;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-hidden{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-didAnimate{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-animateFromBottom{-webkit-animation:micromag-screen-urbania-recommendation-slideFromBottom 1.2s cubic-bezier(.85,0,.15,1);animation:micromag-screen-urbania-recommendation-slideFromBottom 1.2s cubic-bezier(.85,0,.15,1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0;-webkit-transform:translateY(100%) rotate(180deg);-ms-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-animateFromTop{-webkit-animation:micromag-screen-urbania-recommendation-slideFromTop 1.2s cubic-bezier(.85,0,.15,1);animation:micromag-screen-urbania-recommendation-slideFromTop 1.2s cubic-bezier(.85,0,.15,1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);-ms-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{width:calc(100% - 10px)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor{padding:5px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory{height:20%;left:10px;padding:10px;position:absolute;top:calc(100% - 24px);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-footer{-webkit-transition:opacity .2 ease-out;transition:opacity .2 ease-out;z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-footer.micromag-screen-urbania-recommendation-disabled{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-close{color:#000;position:absolute;right:10px;top:10px;z-index:3}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-closeIcon{height:1.5em;width:1.5em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard{background-color:#fff;border-radius:10px;-webkit-box-shadow:4px 4px 4px rgba(0,0,0,.25);box-shadow:4px 4px 4px rgba(0,0,0,.25);color:#000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;margin:0 auto;-webkit-transition:height .4s cubic-bezier(.36,0,.66,-.56),opacity .4s ease;transition:height .4s cubic-bezier(.36,0,.66,-.56),opacity .4s ease;width:90%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#adadad}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-appear{-webkit-animation:micromag-screen-urbania-recommendation-appear .5s cubic-bezier(.65,0,.35,1);animation:micromag-screen-urbania-recommendation-appear .5s cubic-bezier(.65,0,.35,1);-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard .micromag-screen-urbania-recommendation-visualContainer{border-top-left-radius:10px;border-top-right-radius:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom .micromag-screen-urbania-recommendation-visualContainer{border-bottom-left-radius:10px;border-bottom-right-radius:10px;border-top-left-radius:0;border-top-right-radius:0;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-modalOpened{height:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-hidden{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;max-height:250px;overflow:hidden;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer.micromag-screen-urbania-recommendation-modalOpened{border-radius:0;overflow:auto}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px;line-height:1;padding:5px 10px 3px;text-align:center;text-transform:uppercase;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-hasVisual{position:absolute}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper{-webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(34,34,34,0);height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper.micromag-screen-urbania-recommendation-modalOpened{display:-ms-flexbox;display:flex;left:50%;position:fixed;top:50%;z-index:2;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(34,34,34,.9);justify-content:center;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:background-color .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),backdrop-filter .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton{display:block;margin:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton.micromag-screen-urbania-recommendation-transitioning{-webkit-transition:-webkit-transform .4s cubic-bezier(.36,0,.66,-.56);transition:-webkit-transform .4s cubic-bezier(.36,0,.66,-.56);transition:transform .4s cubic-bezier(.36,0,.66,-.56);transition:transform .4s cubic-bezier(.36,0,.66,-.56),-webkit-transform .4s cubic-bezier(.36,0,.66,-.56)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton.micromag-screen-urbania-recommendation-disabled{cursor:auto;pointer-events:none}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton:hover{-webkit-filter:saturate(1.1);filter:saturate(1.1)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton:hover>.micromag-screen-urbania-recommendation-iconContainer{opacity:.8;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-iconContainer{bottom:10px;display:-ms-flexbox;display:flex;left:10px;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;background-color:#fff;border-radius:50%;-webkit-box-shadow:0 0 2px rgba(0,0,0,.25);box-shadow:0 0 2px rgba(0,0,0,.25);height:30px;justify-content:center;pointer-events:none;-webkit-transition:all .1s;transition:all .1s;width:30px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-iconContainer.micromag-screen-urbania-recommendation-visualBottom{bottom:25px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-iconContainer.micromag-screen-urbania-recommendation-hidden{display:none;visibility:hidden}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-icon{height:14px;width:14px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-text{display:-ms-flexbox;display:flex;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryContainer{display:-ms-flexbox;display:flex;left:0;position:absolute;top:100%;-ms-flex-pack:center;justify-content:center;overflow:hidden;-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;white-space:nowrap}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{font-family:Agrandir Tight,sans-serif;font-size:28px;padding:12px 10px 6px;text-align:center;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{background-color:#343434;padding:10px;width:20%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent{margin-left:auto;padding:14px 8px 14px 0;position:relative;width:80%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#e9e9e9;display:none;margin-left:2px;padding:10px;visibility:hidden}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{word-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{font-family:Agrandir Tight,sans-serif;font-size:1.2rem;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{font-family:Agrandir Tight,sans-serif;padding-top:3px;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-border{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-top:1px solid #000;display:block;height:0;margin:0;padding:0;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{font-size:14px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{font-size:12px;font-weight:700}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date p,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location p,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor p{font-weight:inherit;margin-bottom:0;margin-top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{font-family:Agrandir Tight,sans-serif;font-size:12px;padding-top:3px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{font-weight:inherit;margin-bottom:.5em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p:last-child{margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-recommendation-container.micromag-screen-urbania-recommendation-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-webkit-keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}to{opacity:1}}@keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}to{opacity:1}}@-webkit-keyframes micromag-screen-urbania-recommendation-slideFromBottom{0%{opacity:0;-webkit-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@keyframes micromag-screen-urbania-recommendation-slideFromBottom{0%{opacity:0;-webkit-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@-webkit-keyframes micromag-screen-urbania-recommendation-slideFromTop{0%{opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@keyframes micromag-screen-urbania-recommendation-slideFromTop{0%{opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}

package/es/index.js

@@ -9,7 +9,7 @@ import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { Close, ScreenElement, PlaceholderImage, MuteIcon, FullscreenIcon, PlaceholderText, PlaceholderTitle } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerInteraction, useScreenRenderContext, useViewerContainer } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useResizeObserver, useActivityDetector, useDebounce } from '@micromag/core/hooks';
-import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromText } from '@micromag/core/utils';
+import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import Button from '@micromag/element-button';
 import Container from '@micromag/element-container';
@@ -38,6 +38,8 @@ var propTypes = {
   header: PropTypes$1.header,
   footer: PropTypes$1.footer,
   background: PropTypes$1.backgroundElement,
+  cardBoxStyle: PropTypes$1.boxStyle,
+  withoutZoom: PropTypes.bool,
   current: PropTypes.bool,
   active: PropTypes.bool,
   preload: PropTypes.bool,
@@ -56,6 +58,8 @@ var defaultProps = {
   header: null,
   footer: null,
   background: null,
+  cardBoxStyle: null,
+  withoutZoom: false,
   current: true,
   active: true,
   preload: true,
@@ -74,6 +78,8 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     header = _ref.header,
     footer = _ref.footer,
     background = _ref.background,
+    cardBoxStyle = _ref.cardBoxStyle,
+    withoutZoom = _ref.withoutZoom,
     current = _ref.current,
     active = _ref.active,
     preload = _ref.preload,
@@ -119,17 +125,17 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     setDidAnimate = _useState4[1];
   var _ref2 = visual || {},
     _ref2$image = _ref2.image,
-    image = _ref2$image === void 0 ? null : _ref2$image; // note: image can be a video
+    image = _ref2$image === undefined ? null : _ref2$image; // note: image can be a video
   var _ref3 = image || {},
     _ref3$type = _ref3.type,
-    type = _ref3$type === void 0 ? null : _ref3$type,
+    type = _ref3$type === undefined ? null : _ref3$type,
     _ref3$metadata = _ref3.metadata,
-    videoMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata;
+    videoMetadata = _ref3$metadata === undefined ? null : _ref3$metadata;
   var _ref4 = videoMetadata || {},
     _ref4$width = _ref4.width,
-    videoWidth = _ref4$width === void 0 ? 0 : _ref4$width,
+    videoWidth = _ref4$width === undefined ? 0 : _ref4$width,
     _ref4$height = _ref4.height,
-    videoHeight = _ref4$height === void 0 ? 0 : _ref4$height;
+    videoHeight = _ref4$height === undefined ? 0 : _ref4$height;
   var hasVisual = image !== null;
   var isVideo = type === 'video';
   var isVideoLandscape = hasVisual && isVideo && videoWidth > videoHeight;
@@ -159,12 +165,12 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   var _useResizeObserver = useResizeObserver(),
     textContainerRef = _useResizeObserver.ref,
     _useResizeObserver$en = _useResizeObserver.entry.contentRect,
-    textContainerRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
+    textContainerRect = _useResizeObserver$en === undefined ? null : _useResizeObserver$en;
   var _ref5 = textContainerRect || {},
     _ref5$width = _ref5.width,
-    textContainerWidth = _ref5$width === void 0 ? 0 : _ref5$width,
+    textContainerWidth = _ref5$width === undefined ? 0 : _ref5$width,
     _ref5$height = _ref5.height,
-    textContainerHeight = _ref5$height === void 0 ? 0 : _ref5$height;
+    textContainerHeight = _ref5$height === undefined ? 0 : _ref5$height;
   var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
     visualModalTransitioning = _useState8[0],
@@ -176,10 +182,10 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   var visualModalClosed = !visualModalTransitioning && !visualModalOpened;
   var _ref6 = background || {},
     _ref6$text = _ref6.text,
-    backgroundText = _ref6$text === void 0 ? null : _ref6$text;
+    backgroundText = _ref6$text === undefined ? null : _ref6$text;
   var _ref7 = backgroundText || {},
     _ref7$body = _ref7.body,
-    backgroundTextBody = _ref7$body === void 0 ? null : _ref7$body,
+    backgroundTextBody = _ref7$body === undefined ? null : _ref7$body,
     backgroundTextStyle = _ref7.textStyle;
   var finalBackgroundText = useMemo(function () {
     function distributeTextEqually(text) {
@@ -323,15 +329,53 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     }
   }, [activityDetected, showControls, isVideo, hideControls]);
   useDebounce(toggleControlsVisibility, activityDetected, 1000);
-  var _ref9 = title || {},
-    _ref9$textStyle = _ref9.textStyle,
-    textStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
-  var _ref10 = textStyle || {},
-    _ref10$color = _ref10.color,
-    color = _ref10$color === void 0 ? null : _ref10$color;
-  var _ref11 = color || {},
-    _ref11$color = _ref11.color,
-    titleColor = _ref11$color === void 0 ? null : _ref11$color;
+
+  // Default font weights for urbania styles
+  var _useMemo = useMemo(function () {
+      var _ref9 = title || {},
+        _ref9$textStyle = _ref9.textStyle,
+        finalTitleTextStyle = _ref9$textStyle === undefined ? null : _ref9$textStyle;
+      var _ref10 = finalTitleTextStyle || {},
+        _ref10$color = _ref10.color,
+        titleStyleColor = _ref10$color === undefined ? null : _ref10$color,
+        _ref10$fontFamily = _ref10.fontFamily,
+        titleFontFamily = _ref10$fontFamily === undefined ? null : _ref10$fontFamily;
+      var _ref11 = titleStyleColor || {},
+        _ref11$color = _ref11.color,
+        finalTitleColor = _ref11$color === undefined ? null : _ref11$color;
+      var finalTitleFontWeight = titleFontFamily === null ? 700 : null;
+      var _ref12 = category || {},
+        _ref12$textStyle = _ref12.textStyle,
+        finalCategoryTextStyle = _ref12$textStyle === undefined ? null : _ref12$textStyle;
+      var _ref13 = finalCategoryTextStyle || {},
+        _ref13$fontFamily = _ref13.fontFamily,
+        categoryFontFamily = _ref13$fontFamily === undefined ? null : _ref13$fontFamily;
+      var finalCategoryFontWeight = categoryFontFamily === null ? 900 : null;
+      var _ref14 = description || {},
+        _ref14$textStyle = _ref14.textStyle,
+        finalDescriptionTextStyle = _ref14$textStyle === undefined ? null : _ref14$textStyle;
+      var _ref15 = finalDescriptionTextStyle || {},
+        _ref15$fontFamily = _ref15.fontFamily,
+        descriptionFontFamily = _ref15$fontFamily === undefined ? null : _ref15$fontFamily;
+      var finalDescriptionFontWeight = descriptionFontFamily === null ? 300 : null;
+      return {
+        titleColor: finalTitleColor,
+        titleTextStyle: finalTitleTextStyle,
+        titleFontWeight: finalTitleFontWeight,
+        categoryTextStyle: finalCategoryTextStyle,
+        categoryFontWeight: finalCategoryFontWeight,
+        descriptionTextStyle: finalDescriptionTextStyle,
+        descriptionFontWeight: finalDescriptionFontWeight
+      };
+    }, [title, category, description]),
+    titleTextStyle = _useMemo.titleTextStyle,
+    titleColor = _useMemo.titleColor,
+    titleFontWeight = _useMemo.titleFontWeight,
+    categoryTextStyle = _useMemo.categoryTextStyle,
+    categoryFontWeight = _useMemo.categoryFontWeight,
+    descriptionTextStyle = _useMemo.descriptionTextStyle,
+    descriptionFontWeight = _useMemo.descriptionFontWeight;
+  var layoutStyle = !isPlaceholder ? getStyleFromBox(cardBoxStyle) : null;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder)]),
     "data-screen-ready": true
@@ -350,9 +394,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     withArrow: !visualModalOpened
   }, /*#__PURE__*/React.createElement(Layout, {
     className: styles.layout,
-    width: width
-    // height={height}
-    ,
+    width: width,
     style: !isPlaceholder ? {
       padding: spacing,
       paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing / 2,
@@ -373,7 +415,8 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, /*#__PURE__*/React.createElement(Close, {
     className: styles.closeIcon
   })) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React.createElement(Container, {
-    className: classNames([styles.textCard, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.visualBottom, layout === 'bottom'), styles.appear, backgroundAnimationStarted), styles.modalOpened, visualModalTransitioning || visualModalOpened), styles.hidden, !current && isView && !isPreview)])
+    className: classNames([styles.textCard, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.visualBottom, layout === 'bottom'), styles.appear, backgroundAnimationStarted), styles.modalOpened, visualModalTransitioning || visualModalOpened), styles.hidden, !current && isView && !isPreview)]),
+    style: layoutStyle
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.visualContainer, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)])
   }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -400,9 +443,9 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
       height: 'auto'
     }
   }, /*#__PURE__*/React.createElement(Button, {
-    className: classNames([styles.visualButton, _defineProperty({}, styles.transitioning, visualModalTransitioning)]),
+    className: classNames([styles.visualButton, _defineProperty(_defineProperty({}, styles.transitioning, visualModalTransitioning), styles.disabled, withoutZoom)]),
     onClick: onClickVisual,
-    disabled: isPreview || backgroundAnimationStarted || visualModalOpened,
+    disabled: isPreview || backgroundAnimationStarted || visualModalOpened || withoutZoom,
     focusable: current && !isPreview && !visualModalOpened,
     "aria-label": intl.formatMessage({
       id: "XHO5Ua",
@@ -436,7 +479,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     active: active,
     shouldLoad: mediaShouldLoad
   }), visualModalClosed ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.iconContainer, _defineProperty({}, styles.visualBottom, layout === 'bottom')])
+    className: classNames([styles.iconContainer, _defineProperty(_defineProperty({}, styles.visualBottom, layout === 'bottom'), styles.hidden, withoutZoom)])
   }, isVideo ? /*#__PURE__*/React.createElement(MuteIcon, {
     color: "#000",
     className: styles.icon
@@ -474,7 +517,11 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     }
   }, /*#__PURE__*/React.createElement(Heading, Object.assign({
     className: styles.category
-  }, category))) : null), /*#__PURE__*/React.createElement("div", {
+  }, category, {
+    textStyle: _objectSpread(_objectSpread({}, categoryTextStyle), {}, {
+      fontWeight: categoryFontWeight
+    })
+  }))) : null), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.textContent, _defineProperty({}, styles.isPlaceholder, isPlaceholder)])
   }, /*#__PURE__*/React.createElement(ScreenElement, {
     key: "title",
@@ -492,7 +539,11 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     className: styles.titleContainer
   }, /*#__PURE__*/React.createElement(Heading, Object.assign({
     className: styles.title
-  }, title)), /*#__PURE__*/React.createElement("hr", {
+  }, title, {
+    textStyle: _objectSpread(_objectSpread({}, titleTextStyle), {}, {
+      fontWeight: titleFontWeight
+    })
+  })), /*#__PURE__*/React.createElement("hr", {
     className: styles.border,
     style: {
       borderColor: titleColor
@@ -537,7 +588,11 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     isEmpty: !hasDescription
   }, hasDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({
     className: styles.description
-  }, description)) : null)))) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
+  }, description, {
+    textStyle: _objectSpread(_objectSpread({}, descriptionTextStyle), {}, {
+      fontWeight: descriptionFontWeight
+    })
+  })) : null)))) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Spacer, {
     key: "spacer-cta-bottom"
   }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
     key: "footer",
@@ -700,6 +755,39 @@ var definition = [{
         "value": "Background"
       }]
     })
+  }, {
+    id: 'recommendation',
+    type: 'fields',
+    isList: true,
+    label: defineMessage({
+      id: "hPXJzA",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Box params"
+      }]
+    }),
+    fields: [{
+      name: 'cardBoxStyle',
+      type: 'box-style-form',
+      label: defineMessage({
+        id: "1yNxAl",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Card box style"
+        }]
+      })
+    }, {
+      name: 'withoutZoom',
+      type: 'toggle',
+      defaultValue: false,
+      label: defineMessage({
+        id: "ehuj8A",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Without image zoom"
+        }]
+      })
+    }]
   }, {
     name: 'header',
     type: 'header',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-recommendation",
-    "version": "0.3.606",
+    "version": "0.3.608",
     "private": false,
     "description": "",
     "keywords": [
@@ -60,18 +60,18 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.606",
-        "@micromag/element-background": "^0.3.606",
-        "@micromag/element-button": "^0.3.606",
-        "@micromag/element-container": "^0.3.606",
-        "@micromag/element-footer": "^0.3.606",
-        "@micromag/element-header": "^0.3.606",
-        "@micromag/element-heading": "^0.3.606",
-        "@micromag/element-layout": "^0.3.606",
-        "@micromag/element-scroll": "^0.3.606",
-        "@micromag/element-text": "^0.3.606",
-        "@micromag/element-visual": "^0.3.606",
-        "@micromag/transforms": "^0.3.606",
+        "@micromag/core": "^0.3.608",
+        "@micromag/element-background": "^0.3.608",
+        "@micromag/element-button": "^0.3.608",
+        "@micromag/element-container": "^0.3.608",
+        "@micromag/element-footer": "^0.3.608",
+        "@micromag/element-header": "^0.3.608",
+        "@micromag/element-heading": "^0.3.608",
+        "@micromag/element-layout": "^0.3.608",
+        "@micromag/element-scroll": "^0.3.608",
+        "@micromag/element-text": "^0.3.608",
+        "@micromag/element-visual": "^0.3.608",
+        "@micromag/transforms": "^0.3.608",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -82,5 +82,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "0e2ee772952cc24e6824806bd23a7c65c8858c73"
+    "gitHead": "02f8cfe4dde0c33bec9ed7c3bdb671cd8acf78bc"
 }