// scss-lint:disable SelectorDepth // scss-lint:disable NestingDepth // scss-lint:disable SelectorFormat // scss-lint:disable ImportantRule // scss-lint:disable IdSelector // MarvinJs modal .modal-marvin-js { background: transparent; font-size: $font-size-base; padding: 0 !important; .modal-dialog { height: 100%; margin: 0; padding: 0; width: auto; } .modal-content { border: 0; box-shadow: none; height: 100%; padding: 0; width: auto; } .modal-header { background: $color-white; display: flex; flex-direction: row; height: 60px; line-height: 40px; padding: 10px 15px; text-align: center; .file-save-link { flex-shrink: 0; margin: 0 20px 0 0; } .file-name { align-items: center; display: flex; flex-shrink: 0; float: left; margin-right: auto; input { border-radius: 5px; box-shadow: none; color: $color-black; height: 40px; margin-left: 5px; outline: 0; padding: 5px 10px; position: relative; width: 350px; } } } .modal-body { height: calc(100% - 60px); #marvinjs-editor { height: 100%; overflow: hidden; position: relative; width: 100%; #marvinjs-sketch { border-right: 1px solid $color-gainsboro; float: left; min-height: 450px; min-width: 500px; overflow: hidden; } } .sketch-container { @include md-card-style; cursor: pointer; margin: 10px; overflow: hidden; padding: 10px; position: relative; .sketch-image { height: 100%; width: 100%; } .sketch-name { color: $brand-primary; font-size: 16px; line-height: 18px; margin: 10px auto; overflow: hidden; text-align: center; width: 160px; } .sketch-object { color: $color-emperor; font-size: 12px; opacity: .6; text-align: center; } } } } #new-step-sketch { .sketch-container { display: grid; float: left; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); width: 100%; } } .new-marvinjs-upload-button { .new-marvinjs-upload-icon { display: inline-block; height: 1.5em; width: 1.5em; img { height: 100%; width: 100%; } } } .mce-i-marvinjs::before { background-image: url("/images/icon_small/marvinjs.svg"); content: ""; display: block; height: 32px; left: -8px; line-height: 16px; position: relative; top: -8px; width: 32px; } .modal-promo-marvin-js { .modal-header { padding-left: 35px; } }