­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ /* DEMO IMPORT PAGE ========================================================================== */ body[class*="us-demo-import"] { overflow-y: scroll; background: #fff; } .w-importer { padding: 30px 20px; margin-left: -20px; background-color: #fff; } .w-importer-list { display: grid; grid-template-columns: repeat( auto-fill, minmax(500px, 1fr) ); } .w-importer-item { position: relative; overflow: hidden; box-sizing: border-box; -webkit-user-select: none; user-select: none; border-radius: 8px; } .w-importer-item:hover { box-shadow: var(--usof-box-shadow); } .w-importer-item:only-of-type { justify-self: center; } .w-importer-item-radio { position: absolute; visibility: hidden; } .w-importer-item-preview { display: block; text-align: center; padding: 20px 30px 30px; min-height: 270px; } .w-importer-item-title { position: relative; z-index: 5; line-height: 30px; margin: 0 0 10px; transition: color 0.2s; } .w-importer-item.selected .w-importer-item-title { color: #fff; } .w-importer-item-title .btn { display: inline-block; vertical-align: top; font-size: 12px; text-decoration: none; padding: 0 15px; margin: 0 5px; border-radius: 5em; background-color: rgba(0,0,0,0.12); color: inherit; opacity: 0.75; transition: opacity 0.2s; } .w-importer-item-title .btn:hover { opacity: 1; } .w-importer-item-preview img { display: block; max-width: 100%; height: auto; background-color: var(--usof-color-gray-2); } .w-importer-item:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; z-index: 2; background-color: var(--usof-color-blue-50); transform: scale(0.85); pointer-events: none; opacity: 0; transition: opacity 0.2s cubic-bezier(.4,0,.2,1), transform 0.2s cubic-bezier(.4,0,.2,1); } /* Item Options */ .w-importer-item-options { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 100%; overflow: hidden; padding: 70px 30px 30px; box-sizing: border-box; pointer-events: none; color: #fff; transform: scale(0.85); opacity: 0; transition: opacity 0.2s cubic-bezier(.4,0,.2,1), transform 0.2s cubic-bezier(.4,0,.2,1); } .w-importer .usof-button { flex-shrink: 0; font-size: 16px; margin: 20px 0 0; box-shadow: 0 1px 0 rgba(0,0,0,0.15); background-color: #fff; color: var(--usof-color-gray-80); } .w-importer .usof-button:not([disabled]):hover { color: var(--usof-color-blue-50); } .w-importer-item-options-h { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .w-importer .usof-checkbox { display: block; padding-bottom: 8px; } .w-importer .usof-checkbox.child { margin-left: 28px; } .w-importer .usof-checkbox input[type="checkbox"] { border: none; background-color: #fff !important; } .w-importer .usof-checkbox-text { font-size: 14px; font-weight: 600; white-space: nowrap; } .w-importer .usof-checkbox-note { display: inline-block; vertical-align: bottom; cursor: default; } .w-importer .usof-checkbox-note a { box-shadow: none !important; color: var(--usof-color-blue-10); } .w-importer .usof-checkbox-note a:hover { color: #fff; } /* checked */ .w-importer input[type="checkbox"]:checked:before { color: var(--usof-color-blue-50) !important; } /* disabled */ .w-importer input[type="checkbox"][disabled] { cursor: not-allowed; } .w-importer input[type="checkbox"][disabled] ~ .usof-checkbox-text { cursor: not-allowed; } /* Messages */ .w-importer-message { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 100%; overflow: hidden; padding: 70px 50px 30px; text-align: center; box-sizing: border-box; pointer-events: none; color: #fff; transform: scale(0.85); opacity: 0; transition: opacity 0.4s cubic-bezier(.4,0,.2,1), transform 0.4s cubic-bezier(.4,0,.2,1); } .w-importer-message h2 { font-size: 2em; line-height: 1.4; margin: 0; color: inherit; } .w-importer-message p { font-size: 1.2em; } .w-importer-message.done p { max-width: 320px; } .w-importer-message a { box-shadow: none !important; color: inherit; } .w-importer-message a:hover { color: #000; } /* Selected Item */ .w-importer-item.selected:before { transform: scale(1); opacity: 1; } .w-importer-item.selected .w-importer-item-options { pointer-events: auto; transform: scale(1); opacity: 1; } /* Importing */ .w-importer.importing .w-importer-title, .w-importer.importing .w-importer-note, .w-importer.importing .w-importer-item:not(.selected) { pointer-events: none; opacity: 0.3; } .w-importer.importing .w-importer-item.selected .w-importer-item-options { pointer-events: none; transform: scale(0.85); opacity: 0; } .w-importer.importing .w-importer-item.selected .w-importer-message.progress { pointer-events: auto; transform: scale(1); opacity: 1; } /* Done (success or error) */ .w-importer.importing.success .w-importer-item.selected:before { background-color: var(--usof-color-green-40); } .w-importer.importing.error .w-importer-item.selected:before { background-color: var(--usof-color-red-30); } .w-importer.importing.success .w-importer-item.selected .w-importer-message.progress, .w-importer.importing.error .w-importer-item.selected .w-importer-message.progress { pointer-events: none; transform: scale(0.85); opacity: 0; } .w-importer.importing.success .w-importer-item.selected .w-importer-message.done, .w-importer.importing.error .w-importer-item.selected .w-importer-message.done { pointer-events: auto; transform: scale(1); opacity: 1; } .rtl .w-importer { margin-left: 0; margin-right: -20px; } .rtl .w-importer .usof-checkbox.child { margin-left: 0; margin-right: 28px; } @media (max-width: 782px) { .w-importer { margin-left: -10px; } .rtl .w-importer { margin: 0 -10px 0 0; } } @media (max-width: 480px) { .w-importer-list { margin: 0 -20px; } .w-importer-item-preview { border: none; padding: 20px; } .w-importer-item-options { padding: 70px 20px 20px; } }