"colone image piker"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/j-arens/pen/OWZGQY?limit=all&page=64&q=uikit" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">* { box-sizing: border-box; } html, body { width: 100%; min-height: 100vh; } body { background: #f1f1f1; padding-top: 4em; padding-bottom: 4em; } .postbox { width: 100%; max-width: 1400px; margin: 0 auto; background: #fff; height: auto; } /** dpi sm editor styles **/ #dpi-sm-editor-root .dpi-sm-menu-item-type .uk-form-label { font-size: 1em; } #dpi-sm-editor-root .dpi-sm-menu-item-type label { display: inline-block; } #dpi-sm-editor-root .dpi-sm-menu-item-type label + label { margin-left: 1em; } #dpi-sm-editor-root .dpi-sm-menu-item-type input[type="radio"] { margin-right: .25em; } #dpi-sm-editor-root .dpi-sm-custom-link-options input[type="radio"] { margin-right: .25em; } /** nav bar styles **/ .uk-navbar-nav > li > a { height: 4em !important; } .uk-navbar-dropbar { height: auto; } .dropbar-drag-container { padding: calc(15px - .5em); padding-bottom: 0; display: block; } .dropbar-drag-container[class*="uk-column-1-"] { -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; } .uk-navbar-dropdown-nav { display: inline-block; } .uk-placeholder { margin-bottom: 0 !important; padding: .5em !important; height: 100%; position: relative; background: #fff !important; } .ui-sortable-helper { opacity: 0.7; background: rgba(71, 157, 241, 0.05) !important; border: 1px dashed rgba(71, 157, 241, 0.5) !important; } .ui-sortable-placeholder { visibility: visible !important; border: 1px dashed rgba(71, 157, 241, 0.5) !important; } /** controls **/ .uk-button-dropdown { position: relative; } .uk-dropdown-nav { position: absolute; top: 100%; left: 0; width: 100%; z-index: 9999; background: #fff; display: none; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15); } .uk-dropdown-nav > li > a { padding: 0 !important; } /** columns **/ .drag-column { min-height: 300px; } .ui-sortable-helper::after { background: #013c75; opacity: 0.1; } .column-controls { position: absolute; top: 0; right: -3px; z-index: 2; width: 6em; } .column-controls .uk-button-group { width: 100% !important; } .column-controls button { width: 33.33%; padding: 0; line-height: 0; height: 2em; } .column-controls .uk-placeholder.blank { cursor: pointer; } .column-controls .dropdown-button svg, .column-controls .drag-button svg, .column-controls .delete-button svg { fill: #fff; } .column-controls .dropdown-button svg { position: relative; width: 1.2em; height: 1.2em; } .column-controls .drag-button svg { width: 1.15em; height: 1.15em; } .column-controls .delete-button svg { width: 1.25em; height: 1.25em; } .column-controls .delete-button:hover { background: #ee395b; } /** column type selector **/ .columnType-selector { position: absolute !important; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; background: #fff; padding: 1em; } .columnType-selector .uk-heading-divider { margin-top: 0; } .columnType-selector .back-button { line-height: 0; position: absolute; right: 1em; top: 1.25em; } .columnType-selector .back-button h5 { margin: 0; padding: 0; display: inline-block; } .columnType-selector .back-button svg { width: 1em; height: 1em; position: relative; bottom: 2px; } .columnType-selector label { display: block; margin-bottom: 10px; } .uk-sortable-handle { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .Blank { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .Blank p { margin: 0; } .blank-helper-message { text-align: center; padding-top: 20vh; } .column-image { width: 100%; height: 100%; } .column-image svg { width: 4em; fill: #bbb; display: block; margin: 0 auto; } .image-picker { background: none; border: none; width: 100%; height: 100%; cursor: pointer; } .image-picker:focus { outline: none; } </style></head><body> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.2/css/uikit.min.css" /> <div class="postbox"> <div id="dpi-sm-editor-root" class="uk-padding"> <!-- menu item type --> <form> <fieldset class="uk-fieldset"> <legend class="uk-legend">New Menu Item</legend> <div class="uk-margin"> <input class="uk-input" type="text" placeholder="Menu Item Name"> </div> <div class="dpi-sm-menu-item-type"> <div class="uk-form-label uk-margin-bottom">Menu Item Type</div> <div class="uk-form-controls"> <label><input class="uk-radio" type="radio" name="radio1">Custom Link</label> <label><input class="uk-radio" type="radio" name="radio1">Custom Section</label> </div> </div> </fieldset> </form> <!-- end menu item type --> <hr> <!-- custom section options --> <div class="dpi-sm-custom-section-options"> <!-- controls --> <section class="dpi-sm-editor-controls uk-margin-bottom"> <div class="uk-button-group"> <button class="uk-button uk-button-primary" type="button">+ Add A Column</button> <button class="uk-button uk-button-default">Option</button> </div> <button class="uk-button uk-button-danger uk-align-right">Reset</button> </section> <!-- end controls --> <!-- navbar --> <div class="uk-card uk-card-default uk-background-muted"> <div class="uk-position-relative"> <nav class="uk-navbar-container"> <ul class="uk-navbar-nav"> <li> <a href="#" data-id="1">Item</a> </li> <li> <a href="#" data-id="2">Item</a> </li> </ul> </nav> <div class="uk-navbar-dropbar"> <div class="dropbar-drag-container uk-column-1-2"> <!-- drag column --> <section class="uk-placeholder drag-column"> <!-- column controls --> <div class="column-controls"> <div class="uk-button-group"> <button class="uk-button uk-button-primary dropdown-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480"><path d="M240 346.6 112.2 142 367.8 142 240 346.6m0 75.4 200-320-400 0 200 320z"/></svg> </button> <button class="uk-button uk-button-primary drag-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/></svg> </button> <button class="uk-button uk-button-primary delete-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/></svg> </button> </div> </div> <!-- column controls --> <div class="uk-sortable-handle"> <!-- Column type selector --> <div class="uk-panel columnType-selector"> <button class="uk-button uk-button-text back-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg> <h5>Back</h5> </button> <h5 class="uk-heading-divider">Column Type</h5> <div class="uk-form-controls"> <label><input class="uk-radio" type="radio" name="radio1"> Blank</label> <label><input class="uk-radio" type="radio" name="radio1"> Image</label> <label><input class="uk-radio" type="radio" name="radio1"> Sub Menu</label> <label><input class="uk-radio" type="radio" name="radio1"> Search</label> <label><input class="uk-radio" type="radio" name="radio1"> Shortcode</label> <label><input class="uk-radio" type="radio" name="radio1"> Raw HTML</label> </div> </div> <!-- end column type selector --> </div> </section> <!-- end drag column --> <!-- drag column --> <section class="uk-placeholder drag-column blank"> <!-- column controls --> <div class="column-controls"> <div class="uk-button-group"> <button class="uk-button uk-button-primary dropdown-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480"><path d="M240 346.6 112.2 142 367.8 142 240 346.6m0 75.4 200-320-400 0 200 320z"/></svg> </button> <button class="uk-button uk-button-primary drag-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/></svg> </button> <button class="uk-button uk-button-primary delete-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/></svg> </button> </div> </div> <!-- column controls --> <div class="uk-sortable-handle"> <div class="column-image"> <button class="image-picker"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 4v2h14V4H5zm0 10h4v6h6v-6h4l-7-7-7 7z"/></svg> <span class="uk-text-meta">Click to add an image.</span> </button> </div> </div> </section> <!-- end drag column --> </div> </div> </div> <!-- end navbar --> </div> </div> <!-- end custom section options --> </div> <!-- end dpi-sm-root --> </div> <!-- end postbox --> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script> <script >'use strict'; $('.dropbar-drag-container').sortable({ connectWith: $('.uk-sortable-handle') }); //# sourceURL=pen.js </script> </body></html>

Related: See More

BLK• Design System
Image Crop jQuery
Image Checkbox
masonry Image Gallery

Questions / Comments: