@micromag/screen-urbania-recommendation 0.3.410 → 0.3.418

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{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;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;-o-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;-o-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;-o-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{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(34,34,34,.9);display:-ms-flexbox;display:flex;justify-content:center;left:50%;position:fixed;top:50%;-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);-o-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);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);z-index:2}.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);-o-transition: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{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:#fff;border-radius:50%;bottom:10px;-webkit-box-shadow:0 0 2px rgba(0,0,0,.25);box-shadow:0 0 2px rgba(0,0,0,.25);display:-ms-flexbox;display:flex;height:30px;justify-content:center;left:10px;pointer-events:none;position:absolute;-webkit-transition:all .1s;-o-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{-ms-flex-pack:center;display:-ms-flexbox;display:flex;justify-content:center;left:0;overflow:hidden;position:absolute;top:100%;-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;margin-left:2px;padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{border-bottom:1px solid #000;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{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;padding-top:3px;text-transform:uppercase}.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{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{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{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;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;-o-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;-o-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;-o-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{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(34,34,34,.9);display:-ms-flexbox;display:flex;justify-content:center;left:50%;position:fixed;top:50%;-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);-o-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);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);z-index:2}.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);-o-transition: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{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:#fff;border-radius:50%;bottom:10px;-webkit-box-shadow:0 0 2px rgba(0,0,0,.25);box-shadow:0 0 2px rgba(0,0,0,.25);display:-ms-flexbox;display:flex;height:30px;justify-content:center;left:10px;pointer-events:none;position:absolute;-webkit-transition:all .1s;-o-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{-ms-flex-pack:center;display:-ms-flexbox;display:flex;justify-content:center;left:0;overflow:hidden;position:absolute;top:100%;-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{overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{border-bottom:1px solid #000;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{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;padding-top:3px;text-transform:uppercase}.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)}}

package/es/index.js

@@ -3,9 +3,9 @@ import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
-import PropTypes$1 from 'prop-types';
+import PropTypes from 'prop-types';
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
-import { PropTypes } from '@micromag/core';
+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';
@@ -24,25 +24,26 @@ import Visual from '@micromag/element-visual';
 var styles = {"container":"micromag-screen-urbania-recommendation-container","visualButton":"micromag-screen-urbania-recommendation-visualButton","close":"micromag-screen-urbania-recommendation-close","backgroundTextContainer":"micromag-screen-urbania-recommendation-backgroundTextContainer","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","backgroundText":"micromag-screen-urbania-recommendation-backgroundText","didAnimate":"micromag-screen-urbania-recommendation-didAnimate","animateFromBottom":"micromag-screen-urbania-recommendation-animateFromBottom","slideFromBottom":"micromag-screen-urbania-recommendation-slideFromBottom","animateFromTop":"micromag-screen-urbania-recommendation-animateFromTop","slideFromTop":"micromag-screen-urbania-recommendation-slideFromTop","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","footer":"micromag-screen-urbania-recommendation-footer","closeIcon":"micromag-screen-urbania-recommendation-closeIcon","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","modalOpened":"micromag-screen-urbania-recommendation-modalOpened","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","transitioning":"micromag-screen-urbania-recommendation-transitioning","iconContainer":"micromag-screen-urbania-recommendation-iconContainer","icon":"micromag-screen-urbania-recommendation-icon","text":"micromag-screen-urbania-recommendation-text","categoryContainer":"micromag-screen-urbania-recommendation-categoryContainer","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
 
 var propTypes = {
-  category: PropTypes.headingElement,
-  visual: PropTypes$1.shape({
-    image: PropTypes.visualElement,
-    visualLayout: PropTypes$1.oneOf(['label-bottom', 'label-top'])
+  layout: PropTypes.string,
+  category: PropTypes$1.headingElement,
+  visual: PropTypes.shape({
+    image: PropTypes$1.visualElement
   }),
-  title: PropTypes.headingElement,
-  date: PropTypes.textElement,
-  location: PropTypes.textElement,
-  description: PropTypes.textElement,
-  sponsor: PropTypes.textElement,
-  spacing: PropTypes$1.number,
-  header: PropTypes.header,
-  footer: PropTypes.footer,
-  background: PropTypes.backgroundElement,
-  current: PropTypes$1.bool,
-  active: PropTypes$1.bool,
-  className: PropTypes$1.string
+  title: PropTypes$1.headingElement,
+  date: PropTypes$1.textElement,
+  location: PropTypes$1.textElement,
+  description: PropTypes$1.textElement,
+  sponsor: PropTypes$1.textElement,
+  spacing: PropTypes.number,
+  header: PropTypes$1.header,
+  footer: PropTypes$1.footer,
+  background: PropTypes$1.backgroundElement,
+  current: PropTypes.bool,
+  active: PropTypes.bool,
+  className: PropTypes.string
 };
 var defaultProps = {
+  layout: null,
   category: null,
   visual: null,
   title: null,
@@ -60,7 +61,8 @@ var defaultProps = {
 };
 var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   var _ref9, _ref10;
-  var category = _ref.category,
+  var layout = _ref.layout,
+    category = _ref.category,
     visual = _ref.visual,
     title = _ref.title,
     date = _ref.date,
@@ -114,9 +116,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     setDidAnimate = _useState4[1];
   var _ref2 = visual || {},
     _ref2$image = _ref2.image,
-    image = _ref2$image === void 0 ? null : _ref2$image,
-    _ref2$visualLayout = _ref2.visualLayout,
-    visualLayout = _ref2$visualLayout === void 0 ? null : _ref2$visualLayout; // note: image can be a video
+    image = _ref2$image === void 0 ? null : _ref2$image; // note: image can be a video
   var _ref3 = image || {},
     _ref3$type = _ref3.type,
     type = _ref3$type === void 0 ? null : _ref3$type,
@@ -358,7 +358,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, /*#__PURE__*/React.createElement(Close, {
     className: styles.closeIcon
   })) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React.createElement(Container, {
-    className: classNames([styles.textCard, (_ref10 = {}, _defineProperty(_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref10, styles.visualBottom, visualLayout === 'label-top'), _defineProperty(_ref10, styles.appear, backgroundAnimationStarted), _defineProperty(_ref10, styles.modalOpened, visualModalTransitioning || visualModalOpened), _defineProperty(_ref10, styles.hidden, !current && isView && !isPreview), _ref10)])
+    className: classNames([styles.textCard, (_ref10 = {}, _defineProperty(_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref10, styles.visualBottom, layout === 'bottom'), _defineProperty(_ref10, styles.appear, backgroundAnimationStarted), _defineProperty(_ref10, styles.modalOpened, visualModalTransitioning || visualModalOpened), _defineProperty(_ref10, styles.hidden, !current && isView && !isPreview), _ref10)])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.visualContainer, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)])
   }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -412,7 +412,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     active: active,
     shouldLoad: mediaShouldLoad
   }), visualModalClosed ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.iconContainer, _defineProperty({}, styles.visualBottom, visualLayout === 'label-top')])
+    className: classNames([styles.iconContainer, _defineProperty({}, styles.visualBottom, layout === 'bottom')])
   }, isVideo ? /*#__PURE__*/React.createElement(MuteIcon, {
     color: "#000",
     className: styles.icon
@@ -560,7 +560,18 @@ var definition = [{
     }]
   }),
   component: UrbaniaRecommendation$1,
+  layouts: ['top', 'bottom'],
   fields: [{
+    name: 'layout',
+    type: 'screen-layout',
+    label: defineMessage({
+      id: "4iBXj2",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Layout"
+      }]
+    })
+  }, {
     name: 'sponsor',
     type: 'text-element',
     label: defineMessage({
@@ -591,19 +602,6 @@ var definition = [{
           "value": "Image"
         }]
       })
-    }, {
-      name: 'visualLayout',
-      type: 'button-layout',
-      types: ['label-bottom', 'label-top'],
-      defaultValue: 'label-bottom',
-      isHorizontal: true,
-      label: defineMessage({
-        id: "OPxJx/",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Layout"
-        }]
-      })
     }]
   }, {
     name: 'category',

package/lib/index.js

@@ -47,10 +47,10 @@ var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
 var styles = {"container":"micromag-screen-urbania-recommendation-container","visualButton":"micromag-screen-urbania-recommendation-visualButton","close":"micromag-screen-urbania-recommendation-close","backgroundTextContainer":"micromag-screen-urbania-recommendation-backgroundTextContainer","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","backgroundText":"micromag-screen-urbania-recommendation-backgroundText","didAnimate":"micromag-screen-urbania-recommendation-didAnimate","animateFromBottom":"micromag-screen-urbania-recommendation-animateFromBottom","slideFromBottom":"micromag-screen-urbania-recommendation-slideFromBottom","animateFromTop":"micromag-screen-urbania-recommendation-animateFromTop","slideFromTop":"micromag-screen-urbania-recommendation-slideFromTop","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","footer":"micromag-screen-urbania-recommendation-footer","closeIcon":"micromag-screen-urbania-recommendation-closeIcon","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","modalOpened":"micromag-screen-urbania-recommendation-modalOpened","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","transitioning":"micromag-screen-urbania-recommendation-transitioning","iconContainer":"micromag-screen-urbania-recommendation-iconContainer","icon":"micromag-screen-urbania-recommendation-icon","text":"micromag-screen-urbania-recommendation-text","categoryContainer":"micromag-screen-urbania-recommendation-categoryContainer","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
 
 var propTypes = {
+  layout: PropTypes__default["default"].string,
   category: core.PropTypes.headingElement,
   visual: PropTypes__default["default"].shape({
-    image: core.PropTypes.visualElement,
-    visualLayout: PropTypes__default["default"].oneOf(['label-bottom', 'label-top'])
+    image: core.PropTypes.visualElement
   }),
   title: core.PropTypes.headingElement,
   date: core.PropTypes.textElement,
@@ -66,6 +66,7 @@ var propTypes = {
   className: PropTypes__default["default"].string
 };
 var defaultProps = {
+  layout: null,
   category: null,
   visual: null,
   title: null,
@@ -83,7 +84,8 @@ var defaultProps = {
 };
 var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   var _ref9, _ref10;
-  var category = _ref.category,
+  var layout = _ref.layout,
+    category = _ref.category,
     visual = _ref.visual,
     title = _ref.title,
     date = _ref.date,
@@ -137,9 +139,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     setDidAnimate = _useState4[1];
   var _ref2 = visual || {},
     _ref2$image = _ref2.image,
-    image = _ref2$image === void 0 ? null : _ref2$image,
-    _ref2$visualLayout = _ref2.visualLayout,
-    visualLayout = _ref2$visualLayout === void 0 ? null : _ref2$visualLayout; // note: image can be a video
+    image = _ref2$image === void 0 ? null : _ref2$image; // note: image can be a video
   var _ref3 = image || {},
     _ref3$type = _ref3.type,
     type = _ref3$type === void 0 ? null : _ref3$type,
@@ -381,7 +381,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(components.Close, {
     className: styles.closeIcon
   })) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
-    className: classNames__default["default"]([styles.textCard, (_ref10 = {}, _defineProperty__default["default"](_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref10, styles.visualBottom, visualLayout === 'label-top'), _defineProperty__default["default"](_ref10, styles.appear, backgroundAnimationStarted), _defineProperty__default["default"](_ref10, styles.modalOpened, visualModalTransitioning || visualModalOpened), _defineProperty__default["default"](_ref10, styles.hidden, !current && isView && !isPreview), _ref10)])
+    className: classNames__default["default"]([styles.textCard, (_ref10 = {}, _defineProperty__default["default"](_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref10, styles.visualBottom, layout === 'bottom'), _defineProperty__default["default"](_ref10, styles.appear, backgroundAnimationStarted), _defineProperty__default["default"](_ref10, styles.modalOpened, visualModalTransitioning || visualModalOpened), _defineProperty__default["default"](_ref10, styles.hidden, !current && isView && !isPreview), _ref10)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.visualContainer, _defineProperty__default["default"]({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)])
   }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -435,7 +435,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     active: active,
     shouldLoad: mediaShouldLoad
   }), visualModalClosed ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.iconContainer, _defineProperty__default["default"]({}, styles.visualBottom, visualLayout === 'label-top')])
+    className: classNames__default["default"]([styles.iconContainer, _defineProperty__default["default"]({}, styles.visualBottom, layout === 'bottom')])
   }, isVideo ? /*#__PURE__*/React__default["default"].createElement(components.MuteIcon, {
     color: "#000",
     className: styles.icon
@@ -583,7 +583,18 @@ var definition = [{
     }]
   }),
   component: UrbaniaRecommendation$1,
+  layouts: ['top', 'bottom'],
   fields: [{
+    name: 'layout',
+    type: 'screen-layout',
+    label: reactIntl.defineMessage({
+      id: "4iBXj2",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Layout"
+      }]
+    })
+  }, {
     name: 'sponsor',
     type: 'text-element',
     label: reactIntl.defineMessage({
@@ -614,19 +625,6 @@ var definition = [{
           "value": "Image"
         }]
       })
-    }, {
-      name: 'visualLayout',
-      type: 'button-layout',
-      types: ['label-bottom', 'label-top'],
-      defaultValue: 'label-bottom',
-      isHorizontal: true,
-      label: reactIntl.defineMessage({
-        id: "OPxJx/",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Layout"
-        }]
-      })
     }]
   }, {
     name: 'category',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-recommendation",
-    "version": "0.3.410",
+    "version": "0.3.418",
     "private": false,
     "description": "",
     "keywords": [
@@ -50,18 +50,18 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.410",
-        "@micromag/element-background": "^0.3.410",
-        "@micromag/element-button": "^0.3.410",
-        "@micromag/element-container": "^0.3.410",
-        "@micromag/element-footer": "^0.3.410",
-        "@micromag/element-header": "^0.3.410",
-        "@micromag/element-heading": "^0.3.410",
-        "@micromag/element-layout": "^0.3.410",
-        "@micromag/element-scroll": "^0.3.410",
-        "@micromag/element-text": "^0.3.410",
-        "@micromag/element-visual": "^0.3.410",
-        "@micromag/transforms": "^0.3.410",
+        "@micromag/core": "^0.3.418",
+        "@micromag/element-background": "^0.3.418",
+        "@micromag/element-button": "^0.3.418",
+        "@micromag/element-container": "^0.3.418",
+        "@micromag/element-footer": "^0.3.418",
+        "@micromag/element-header": "^0.3.418",
+        "@micromag/element-heading": "^0.3.418",
+        "@micromag/element-layout": "^0.3.418",
+        "@micromag/element-scroll": "^0.3.418",
+        "@micromag/element-text": "^0.3.418",
+        "@micromag/element-visual": "^0.3.418",
+        "@micromag/transforms": "^0.3.418",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -72,5 +72,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "3d20200b811ff19c75de0697a4c4543101bf755b"
+    "gitHead": "b88d067aa5c016ffdbc031902e1c387160d51f9b"
 }