@brizy/ui/lib/ImagePlaceholder/style/index.css

React elements in Brizy style

.brz-ui-image-preview,.brz-ui-modal{pointer-events:none}.brz-ui-image-preview.zoom-appear,.brz-ui-image-preview.zoom-enter,.brz-ui-modal.zoom-appear,.brz-ui-modal.zoom-enter{transform:none;opacity:0;animation-duration:.3s;user-select:none}.brz-ui-image-preview-mask,.brz-ui-modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;height:100%;background-color:rgba(0,0,0,.45)}.brz-ui-image-preview-mask-hidden,.brz-ui-modal-mask-hidden{display:none}.brz-ui-image-preview-wrap,.brz-ui-modal-wrap{position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;outline:0;-webkit-overflow-scrolling:touch}.brz-ui-icon__svg svg{fill:var(--brz-ui-global-icon-color,var(--brz-ui-icon-color,var(--color-gray,#777f86)));color:var(--brz-ui-global-icon-color,var(--brz-ui-icon-color,var(--color-gray,#777f86)));font-size:var(--brz-ui-icon-size, 16px);transition:.3s ease-in-out}.brz-ui-icon__svg:hover svg{fill:var(--brz-ui-global-icon-hover-color,var(--brz-ui-icon-hover-color,var(--brz-ui-global-icon-color,var(--brz-ui-icon-color,var(--color-gray,#777f86)))));color:var(--brz-ui-global-icon-hover-color,var(--brz-ui-icon-hover-color,var(--brz-ui-global-icon-color,var(--brz-ui-icon-color,var(--color-gray,#777f86)))))}.brz-ui-icon__svg--inherit.anticon,.brz-ui-icon__svg--inherit.anticon svg{color:inherit}.brz-ui-icon__img{mask:var(--brz-ui-icon-image-source,none);background:var(--brz-ui-global-icon-color,var(--brz-ui-icon-color,var(--color-gray,#777f86)));background-repeat:no-repeat;mask-repeat:no-repeat;mask-size:var(--brz-ui-icon-size,16px);width:var(--brz-ui-icon-size,16px);height:var(--brz-ui-icon-size,16px);transition:background .3s ease-in-out}.brz-ui-icon__img:hover{background:var(--brz-ui-global-icon-hover-color,var(--brz-ui-icon-hover-color,var(--brz-ui-global-icon-color,var(--brz-ui-icon-color,var(--color-gray,#777f86)))))}.brz-ui-icon__img .brz-ui-icon__svg--inherit{background:inherit}.brz-ui-image-placeholder{box-sizing:border-box;border:1px solid #d2d7db;border-radius:2px;background-color:var(--color-gray-lightest,#f1f1f1);display:flex;align-items:center;justify-content:center;position:relative}.brz-ui-image-placeholder.brz-ui-image-placeholder__xxsmall{width:36px;height:36px}.brz-ui-image-placeholder.brz-ui-image-placeholder__xxsmall .brz-ui-icon__svg{position:absolute;top:calc(50% - 8.5px)}.brz-ui-image-placeholder.brz-ui-image-placeholder__xxsmall .brz-ui-icon__svg svg{font-size:17px}.brz-ui-image-placeholder.brz-ui-image-placeholder__xsmall{width:60px;height:60px}.brz-ui-image-placeholder.brz-ui-image-placeholder__small{width:76.8px;height:76.8px}.brz-ui-image-placeholder.brz-ui-image-placeholder__middle{height:133px;width:179px}.brz-ui-image-placeholder.brz-ui-image-placeholder__large{padding-top:100%}.brz-ui-image-placeholder.brz-ui-image-placeholder__large .brz-ui-icon__svg,.brz-ui-image-placeholder.brz-ui-image-placeholder__middle .brz-ui-icon__svg,.brz-ui-image-placeholder.brz-ui-image-placeholder__small .brz-ui-icon__svg,.brz-ui-image-placeholder.brz-ui-image-placeholder__xsmall .brz-ui-icon__svg{position:absolute;top:calc(50% - 14px)}.brz-ui-image-placeholder.brz-ui-image-placeholder__large .brz-ui-icon__svg svg,.brz-ui-image-placeholder.brz-ui-image-placeholder__middle .brz-ui-icon__svg svg,.brz-ui-image-placeholder.brz-ui-image-placeholder__small .brz-ui-icon__svg svg,.brz-ui-image-placeholder.brz-ui-image-placeholder__xsmall .brz-ui-icon__svg svg{font-size:28px}.brz-ui-image-placeholder__multiple{border:none;background-color:transparent}.brz-ui-image-placeholder__multiple .brz-ui-image-placeholder__multi-border{position:absolute;border-radius:2px;border:1px solid rgba(210,215,219,.3);background-color:rgba(247,247,247,.3)}.brz-ui-image-placeholder__multiple .brz-ui-image-placeholder__multi-border:after,.brz-ui-image-placeholder__multiple .brz-ui-image-placeholder__multi-border:before{content:"";height:100%;width:100%;position:absolute;border-radius:2px}.brz-ui-image-placeholder__multiple .brz-ui-image-placeholder__multi-border:before{background-color:rgba(247,247,247,.6);border:1px solid rgba(210,215,219,.6)}.brz-ui-image-placeholder__multiple .brz-ui-image-placeholder__multi-border:after{background-color:#f7f7f7;border:1px solid #d2d7db}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__large .brz-ui-icon__svg,.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__middle .brz-ui-icon__svg{top:calc(50% - 28px);left:calc(50% - 27px)}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__large .brz-ui-image-placeholder__multi-border,.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__middle .brz-ui-image-placeholder__multi-border{height:calc(100% - 21px);width:calc(100% - 24px);top:21px;left:24px}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__large .brz-ui-image-placeholder__multi-border:before,.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__middle .brz-ui-image-placeholder__multi-border:before{right:12px;bottom:12px}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__large .brz-ui-image-placeholder__multi-border:after,.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__middle .brz-ui-image-placeholder__multi-border:after{right:25px;bottom:25px}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__small .brz-ui-image-placeholder__multi-border,.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__xsmall .brz-ui-image-placeholder__multi-border{height:calc(100% - 21px);width:calc(100% - 21px);top:21px;left:21px}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__small .brz-ui-image-placeholder__multi-border:before,.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__xsmall .brz-ui-image-placeholder__multi-border:before{right:12px;bottom:12px}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__small .brz-ui-image-placeholder__multi-border:after,.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__xsmall .brz-ui-image-placeholder__multi-border:after{right:25px;bottom:25px}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__xxsmall .brz-ui-icon__svg{top:calc(50% - 12px);left:calc(50% - 12px)}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__xxsmall .brz-ui-icon__svg svg{font-size:12px}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__xxsmall .brz-ui-image-placeholder__multi-border{height:calc(100% - 14px);width:calc(100% - 14px);top:14px;left:14px}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__xxsmall .brz-ui-image-placeholder__multi-border:before{right:6px;bottom:6px}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__xxsmall .brz-ui-image-placeholder__multi-border:after{right:13px;bottom:13px}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__small .brz-ui-icon__svg{top:calc(50% - 28px);left:calc(50% - 28px)}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__xsmall .brz-ui-icon__svg{top:calc(50% - 25px);left:calc(50% - 25px)}.brz-ui-image-placeholder__multiple.brz-ui-image-placeholder__xsmall .brz-ui-icon__svg svg{font-size:21px}