@brizy/ui
Version:
React elements in Brizy style
1 lines • 8.72 kB
CSS
.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-multiupload{height:100%;width:100%;margin-bottom:-9px;display:flex;flex-wrap:wrap}.brz-ui-multiupload__onclicksettings{cursor:pointer}.brz-ui-multiupload__main:before{content:"Main";position:absolute;top:11px;left:0;font-size:12px;line-height:1;font-weight:600;color:var(--color-white,#fff);background-color:var(--color-blue,#3dbfe8);padding:4px 8px}.brz-ui-multiupload__single{display:flex;align-items:center;justify-content:center;position:relative;border:1px solid var(--color-gray-light,#d5d9db);border-radius:3px;margin:0 9px 9px 0;float:left;background-color:var(--color-gray-light,#d5d9db)}.brz-ui-multiupload__single .brz-ui-multiupload__settings{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background-color:var(--color-white,#fff);opacity:0}.brz-ui-multiupload__single:hover .brz-ui-multiupload__settings{opacity:1}.brz-ui-multiupload__single-remove{position:absolute;opacity:0;top:-8px;right:-8px;height:16px;width:16px;border-radius:16px;line-height:16px;background-color:var(--brz-ui-global-input-background,var(--brz-ui-input-background,var(--color-white,#fff)));box-shadow:0 1px 4px 0 rgba(0,0,0,.14);z-index:5;cursor:pointer;display:flex;align-items:center;justify-content:center}.brz-ui-multiupload__single:hover .brz-ui-multiupload__single-remove{opacity:1}.brz-ui-multiupload__single .anticon-loading{font-size:14px}.brz-ui-multiupload__single img,.brz-ui-multiupload__single-remove img{display:block;width:100%;height:100%;object-fit:cover}.brz-ui-multiupload__add{display:flex;align-items:center;font-size:0;line-height:1;color:var(--brz-ui-global-input-color,var(--brz-ui-input-color,var(--color-dark,#212733)))}.brz-ui-multiupload__add .brz-ui-icon__svg{margin-inline-end:7px;font-size:16px;color:var(--brz-ui-global-input-color,var(--brz-ui-input-color,var(--color-dark,#212733)))}.brz-ui-multiupload__add .brz-ui-icon__svg svg{color:inherit}.brz-ui-multiupload__add-text{font-size:14px;line-height:16px;transition:color .3s ease-in-out}.brz-ui-multiupload__label{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--color-gray-light,#d5d9db);background-color:var(--brz-ui-global-input-background,var(--brz-ui-input-background,var(--color-white,#fff)));color:#21252b;font-size:14px;font-weight:600;letter-spacing:0;border-radius:3px;margin-right:9px;margin-bottom:9px;line-height:1}.brz-ui-multiupload__label:hover{border-color:var(--color-gray-light,#d5d9db)}.brz-ui-multiupload__label:hover .brz-ui-icon__svg,.brz-ui-multiupload__label:hover .brz-ui-multiupload__add{color:var(--color-blue,#3dbfe8)}.brz-ui-multiupload__label input{display:none}.brz-ui-multiupload--small .brz-ui-multiupload__single{width:76.8px;height:76.8px}.brz-ui-multiupload--small .brz-ui-multiupload__single .anticon{margin-right:0}.brz-ui-multiupload--small .brz-ui-multiupload__label{width:76.8px;height:76.8px}.brz-ui-multiupload--small .brz-ui-multiupload__label .brz-ui-multiupload__add .brz-ui-icon__svg{margin-right:0}.brz-ui-multiupload--middle .brz-ui-multiupload__label,.brz-ui-multiupload--middle .brz-ui-multiupload__single{width:118px;height:118px}.brz-ui-multiupload--large .brz-ui-multiupload__label,.brz-ui-multiupload--large .brz-ui-multiupload__single{width:215px;height:215px}.brz-ui-multiupload--disabled{cursor:not-allowed}.brz-ui-multiupload--disabled .brz-ui-multiupload__label,.brz-ui-multiupload--disabled .brz-ui-multiupload__single{cursor:not-allowed;pointer-events:none}.brz-ui-multiupload .brz-ui-upload.brz-ui-upload-select-picture-card{display:block;float:none;width:auto;height:auto;margin:0;border:none}.brz-ui-multiupload .brz-ui-upload.brz-ui-upload-select-picture-card>.brz-ui-upload{display:block;padding:0}.brz-ui-multiupload__error{width:100%;height:100%;padding:0 15px;background:var(--color-white,#fff);color:var(--color-red,red);font-weight:600;font-size:13px;line-height:16px;display:flex;justify-content:center;align-items:center;text-align:center}.brz-ui-multiupload__virtualized-wrapper{width:100%}.brz-ui-multiupload__virtualized-wrapper .brz-ui-multiupload__virtualized-list{display:grid;gap:9px;padding-right:14px}.brz-ui-multiupload__virtualized-wrapper .brz-ui-multiupload__virtualized-list-item{width:100%;height:100%;padding:var(--brz-ui-grid-item-padding-top,0) var(--brz-ui-grid-item-padding-right,0) var(--brz-ui-grid-item-padding-bottom,0) var(--brz-ui-grid-item-padding-left,0)}.brz-ui-multiupload__virtualized-wrapper .brz-ui-multiupload__virtualized-list-item .brz-ui-multiupload__single{width:100%;height:100%;margin:0;aspect-ratio:1}.brz-ui-multiupload__virtualized-wrapper .brz-ui-multiupload__label{width:100%;height:100%;aspect-ratio:1;margin:0}.brz-ui-multiupload__virtualized-wrapper .brz-ui-image-with-capture figure img{aspect-ratio:1}.brz-ui-multiupload__virtualized-wrapper--small .brz-ui-multiupload__virtualized-list{grid-template-columns:repeat(auto-fill,minmax(76.8px,1fr))}.brz-ui-multiupload__virtualized-wrapper--small .brz-ui-multiupload__virtualized-list .brz-ui-multiupload__label,.brz-ui-multiupload__virtualized-wrapper--small .brz-ui-multiupload__virtualized-list-item{max-width:118px;max-height:118px}.brz-ui-multiupload__virtualized-wrapper--middle .brz-ui-multiupload__virtualized-list{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}.brz-ui-multiupload__virtualized-wrapper--middle .brz-ui-multiupload__virtualized-list .brz-ui-multiupload__label{max-width:215px;max-height:215px}.brz-ui-multiupload__virtualized-wrapper--middle .brz-ui-multiupload__virtualized-list-item{max-height:215px;min-height:76.8px;max-width:215px;min-width:76.8px}.brz-ui-multiupload__virtualized-wrapper--large .brz-ui-multiupload__virtualized-list{grid-template-columns:repeat(auto-fill,minmax(215px,1fr));padding-right:14px}.brz-ui-multiupload__virtualized-wrapper--large .brz-ui-multiupload__virtualized-list-item{min-width:118px;max-width:215px;max-height:215px}.brz-ui-multiupload__virtualized-wrapper--auto .brz-ui-multiupload__virtualized-list{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:calc(2vw - var(--brz-ui-grid-list-row-gap,0px)) 2vw;padding-right:14px}.brz-ui-multiupload__virtualized-wrapper--auto .brz-ui-multiupload__virtualized-list-item{min-width:118px}.brz-ui-multiupload__virtualized-wrapper::-webkit-scrollbar{width:6px}.brz-ui-multiupload__virtualized-wrapper::-webkit-scrollbar-thumb{background:#d5d9db;border-radius:3px}.brz-ui-multiupload__virtualized-wrapper::-webkit-scrollbar-thumb:hover{background:#d1d3d4}.brz-ui-multiupload__virtualized-wrapper::-webkit-scrollbar-track-piece:start{background:0 0}.brz-ui-multiupload__virtualized-wrapper--auto::-webkit-scrollbar-track-piece:start{margin-top:15px}