2024-07-27 11:38:37 +02:00
|
|
|
.icon-picker-modal{background-color:rgba(68,69,69,0);bottom:0;left:0;position:fixed;right:0;top:0;transition:background-color .3s ease-out,visibility .3s ease-out;visibility:hidden;z-index:100000}.icon-picker-modal.is-visible{background-color:rgba(68,69,69,.6);visibility:visible}.icon-picker-modal.is-visible .icon-picker-modal__dialog{opacity:1;transform:translate(-50%,-50%)}.icon-picker-modal__dialog{background-color:#fff;border-radius:16px;display:flex;flex-direction:column;height:440px;left:50%;min-width:380px;opacity:0;padding:24px;position:absolute;top:50%;transform:translate(-50%,-55%);transition:transform .3s ease-in-out,opacity .3s ease;z-index:1}.icon-picker-modal__header{align-items:center;display:flex;justify-content:space-between}.icon-picker-modal__header h2{font-size:24px;margin-block-end:0;margin-block-start:0}.icon-picker-modal__header .icon-picker-modal--close{-webkit-appearance:none;background:none;border:none;border-radius:4px;cursor:pointer;margin-left:auto;padding:2px;transition:background-color .3s ease}.icon-picker-modal__header .icon-picker-modal--close:hover{background-color:#f3f3f3}.icon-picker-modal__search{margin:32px 0 24px}.icon-picker-modal__content{display:grid;grid-template-columns:repeat(7,40px);grid-gap:8px;overflow-y:scroll}.icon-picker-modal__content .is-empty{grid-column:1/-1;text-align:center}.icon-picker-modal__content .icon-element{align-items:center;background-color:transparent;border:1px solid #ced4da;border-radius:4px;cursor:pointer;display:flex;height:40px;justify-content:center;transition:background-color .3s ease,border-color .3s ease;width:40px}.icon-picker-modal__content .icon-element i,.icon-picker-modal__content .icon-element svg{color:#0983fd;font-size:24px}.icon-picker-modal__content .icon-element:hover{background-color:#0983fd;border-color:#0983fd}.icon-picker-modal__content .icon-element:hover i,.icon-picker-modal__content .icon-element:hover svg{color:#fff}.icon-picker-modal__content .icon-element.is-selected{background-color:#0983fd;border-color:#0983fd}.icon-picker-modal__content .icon-element.is-selected i,.icon-picker-modal__content .icon-element.is-selected svg{color:#fff}.icon-picker-modal__content .icon-element[hidden]{display:none}.icon-picker-modal__footer{align-self:flex-end;margin-top:auto;padding-top:24px}.icon-picker-modal__content .icon-element i,.icon-picker-modal__content .icon-element svg{color:inherit}.icon-picker-modal__dialog{min-width:400px}
|