simple-media-manager
Version:
an es6 media manager
1 lines • 1.48 kB
CSS
.media-manager{background-color:#fff;box-shadow:0 10px 20px rgba(0,0,0,.19),0 6px 6px rgba(0,0,0,.23);font-family:Arial,serif;border-radius:7px;margin:auto;width:calc(100% - 80px);height:calc(100% - 80px);position:absolute;top:40px;right:0;left:0;z-index:2}.media-manager__header{padding:12px 10px;border-radius:7px 7px 0 0;background-color:#fafbfd}.media-manager__title{color:#212121;margin:0;font-size:17px}.media-manager__action-bar{padding:5px}.media-manager__content{display:flex;flex-wrap:wrap;max-height:calc(100% - 139px);overflow-y:scroll}.media-manager__item{width:10%;display:inline-block}.media-manager__item:after{content:"";display:block;padding-top:100%}.media-manager__item--active{width:calc(10% - 6px);border:3px solid #333}.media-manager__trash-icon{color:#fff;position:absolute;bottom:5px;right:5px}.media-manager__button{padding:10px;border:none;color:#fff;font-size:14px;text-transform:uppercase;background-color:transparent;font-weight:600}.media-manager__button--upload{font-size:13px;color:#212121;font-weight:400}.media-manager__button--confirm{color:#536dfe}.media-manager__button--cancel{color:#bdbdbd}.media-manager__footer{background-color:#fafbfd;padding:5px;border-radius:0 0 7px 7px;display:flex;flex-direction:row-reverse;position:absolute;bottom:0;width:calc(100% - 10px)}.media-manager__overlay{background-color:#000;opacity:.5;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:none}.media-manager__overlay--active{display:block}