Skip to content

Instantly share code, notes, and snippets.

@mlebkowski

mlebkowski/dabblet.css

Created March 15, 2012 11:15
Download ZIP

Revisions

  1. mlebkowski created this gist Mar 15, 2012.
    157 changes: 157 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,157 @@
    /**
    * grid layout for forms
    */
    fieldset, form, input, select, ul, li, label { margin: 0; padding: 0; border: 0; list-style: none; }
    body {
    font: 13px Arial, 'Helvetica Neue', Helvetica, sans-serif;
    }

    .container12 {
    width: 960px;
    margin: 0 10px;
    }
    .grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8 {
    margin: 0 10px;
    float: left;
    }
    .grid3 {
    width: 220px;
    }
    .grid4 {
    width: 300px;
    }
    .grid5 {
    width: 380px;
    }
    .grid7 {
    width: 540px;
    }
    .container12 fieldset > ul > li {
    clear: both;
    padding-top: 10px;
    }
    .containter12 label {
    text-align: right;
    line-height: 25px;
    }
    .elements li {
    line-height: 19px;
    margin: 0 0 7px;
    border: 1px solid silver;
    border-radius: 6px;
    padding: 2px 28px 2px 6px;
    position: relative;
    zoom: 1;
    background-color: white; /* tu moze jakiś fallback z PNG? */
    background: -webkit-linear-gradient(top, #fff, #eee);

    }
    .ui-delete {
    position: absolute;
    cursor: pointer;
    right: 0;
    width: 23px;
    top: 0;
    bottom: 0;
    border-left: 1px solid silver;
    background: url(http://local.znanylekarz.pl/img/delete12.png) no-repeat 5px 6px;
    }
    .ui-move {
    background: url(http://local.znanylekarz.pl/img/move.png) no-repeat center center;
    position: absolute;
    top: 0;
    left: 0;
    width: 23px;
    height:23px;
    cursor: move;
    }
    .ui-sortable li {
    padding-left: 23px;
    }
    .ui-sortable-disabled .ui-move {
    display: none;
    }
    .ui.sortable-disabled li {
    padding-left: 6px;
    }

    .images .elements li {
    float: left;
    margin: 0 10px 10px 0;
    padding-right: 22px;
    background: white;
    border-color: #eaeaea;
    }
    .images .elements .ui-delete {
    border: none;
    }
    .images .elements .ui-move {
    top: auto;
    left: auto;
    bottom: 0;
    right: 1px;
    }
    .images .elements img {
    height: 75px;
    padding: 1px 0;
    display: block;
    }

    /** Hidden file input */

    .hiddenfileinput:hover a {
    text-decoration: underline;
    }
    .hiddenfileinput input {
    opacity: .01;
    width: 100px;
    position: absolute;
    cursor: pointer;
    }


    /** Kontrolki: */

    input, textarea {
    display: block;
    margin: 0 0 7px;
    border: 1px solid #D7D7D7;
    padding: 3px 1%;
    line-height: 17px;
    width: 98%;
    }
    textarea {
    padding: 3px 1%;
    text-indent: 0;
    height: 8em;
    }
    select {
    width: 100%;
    }



    .fixSelect li {
    height: 25px;
    }
    .fixSelect select {
    border: 1px solid #D7D7D7;
    margin: 3px 0;
    }

    /** Status i guziki */
    .action a, a.editObject {
    color: #3C9AD0;
    margin-right: 12px;
    }
    .action {
    clear: both;
    margin: 0 0 0 6px;
    line-height: 25px;
    width: 528px;
    }
    .action .error {
    color: red;
    font-weight: bold;
    font-size: .9em;
    }
    95 changes: 95 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@

    <form method="" action="" class="container12">
    <fieldset>
    <ul>
    <li>
    <label class="grid3">
    Feugue scilis ulputat
    </label>
    <div class="item grid4"><div class="multiple_elements">
    <ul class="elements">
    <li>Modion lum qui augiat in aliquis andrero. <b class="ui ui-delete"></b></li>
    <li>Habitasse ligula laore velis il sim nissi tatumsan auguero; teisl verci autet <b class="ui ui-delete"></b></li>
    <li>veriusto veliqui nis. Laortie lute facilisis aliquipsum quatuer mus nonsenibh velenis volut etiam faciliq. <b class="ui ui-delete"></b></li>
    </ul>
    <p class="action">
    <a class="more">+ dodaj</a>
    <a class="save">zapisz</a>
    <span class="status">Status message: Vulluptatet tatisit adipiscing justo volumsan </span>
    </p>
    <div></div>
    </li>
    <li>
    <label class="grid3">Velis: </label>
    <div class="item grid7">
    <ul>
    <li><input type="text" value="Quat olenit peraese, venenatis "> </li>
    <li><input type="text"> </li>
    </ul>
    <div class="action">
    <span class="error"> To pole nie może być puste </span>
    </div>
    </div>
    </li>
    <li>
    <label class="grid3">Eglebegle: </label>
    <div class="item grid7">
    <ul class="fixSelect">
    <li><select><option>Vullan sim eugiamcorer coreetue aciliqu accumsandre </option></select> </li>
    <li><select><option> Henissi volut velenisit molestie lorper </select> </li>
    <li><select><option>--Wybierz</option></select></li>
    </ul>
    <div class="action">
    <a>zapisz</a>
    </div>
    </div>
    </li>
    <li>
    <label class="grid3">Vulla exerat elesto:</label>
    <div class="item grid7">
    <div class="textedit">
    <textarea name="about">Malesuada acidunt dolum,

    hendre amet, nulputpatum enissim,

    sustrud msandre aliquet tatet modit.</textarea>
    <div class="action"><a>edytuj</a></div>
    </div>
    </li>
    <li>
    <label class="grid3">Dolorer nullut ostrud quisi:</label>
    <div class="item grid7">
    <div class="multiple_elements html images">
    <ul class="elements">
    <li> <a href="http://static-test.znanylekarz.pl/doctor_photo/e9225a/e9225aff62e93ed0909023e1288b532e_huge.jpg" class="lightbox"><img src="http://static.znanylekarz.pl/doctor_photo/e9225a/e9225aff62e93ed0909023e1288b532e_basic.jpg" alt="" data-id="e9225aff62e93ed0909023e1288b532e_e9225a_jpg" data-key="5095"></a> <b class="ui ui-delete"></b> <b class="ui ui-move"></b> </li>
    <li> <a href="http://static-test.znanylekarz.pl/doctor_photo/77c789/77c7898bfb2664c7e5328c67866d6ecb_huge.jpg" class="lightbox"><img src="http://static.znanylekarz.pl/doctor_photo/77c789/77c7898bfb2664c7e5328c67866d6ecb_basic.jpg" alt="" data-id="77c7898bfb2664c7e5328c67866d6ecb_77c789_jpg" data-key="5093"></a> <b class="ui ui-delete"></b> <b class="ui ui-move"></b> </li>
    <li> <a href="http://static-test.znanylekarz.pl/doctor_photo/c53af3/c53af3366cd0fffebe0085d099f73c5d_huge.jpg" class="lightbox"><img src="http://static.znanylekarz.pl/doctor_photo/c53af3/c53af3366cd0fffebe0085d099f73c5d_basic.jpg" alt="" data-id="c53af3366cd0fffebe0085d099f73c5d_c53af3_jpg" data-key="5097"></a> <b class="ui ui-delete"></b> <b class="ui ui-move"></b> </li>
    <li> <a href="http://static-test.znanylekarz.pl/doctor_photo/453992/453992d0a20e907dcc78ba1bb8a794f2_huge.jpg" class="lightbox"><img src="http://static.znanylekarz.pl/doctor_photo/453992/453992d0a20e907dcc78ba1bb8a794f2_basic.jpg" alt="" data-id="453992d0a20e907dcc78ba1bb8a794f2_453992_jpg" data-key="5099"></a> <b class="ui ui-delete"></b> <b class="ui ui-move"></b> </li>
    <li> <a href="http://static-test.znanylekarz.pl/doctor_photo/de170c/de170c69adf2d708c1be3070a156e22e_huge.jpg" class="lightbox"><img src="http://static.znanylekarz.pl/doctor_photo/de170c/de170c69adf2d708c1be3070a156e22e_basic.jpg" alt="" data-id="de170c69adf2d708c1be3070a156e22e_de170c_jpg" data-key="5101"></a> <b class="ui ui-delete"></b> <b class="ui ui-move"></b> </li>
    <li> <a href="http://static-test.znanylekarz.pl/doctor_photo/1b6dfb/1b6dfb1b7dc130ffbc963273a23db05b_huge.jpg" class="lightbox"><img src="http://static.znanylekarz.pl/doctor_photo/1b6dfb/1b6dfb1b7dc130ffbc963273a23db05b_basic.jpg" alt="" data-id="1b6dfb1b7dc130ffbc963273a23db05b_1b6dfb_jpg" data-key="5103"></a> <b class="ui ui-delete"></b> <b class="ui ui-move"></b> </li>
    </ul>
    <div class="action">
    <p class="hiddenfileinput">
    <input type="file" name="photos" multiple="" accept="image/*">
    <a>Wgraj plik</a>
    </p>
    </div>
    </div>
    </div>
    </li>
    <li>
    <label class="grid3">Ipisl lutat dapibus feugiamet. </label>
    <div class="item grid7">
    <div class="multiple_items html">
    <ul class="elements ui-sortable"> <li> <b>Prywatna Specjalistyczna Praktyka Lekarska Rafał Więcek</b><br>ul. ul. os. Hutnicze 6/134 <br>Kraków 31-918, woj. małopolskie<br>tel. 698 115 115<br><a href="http://local.znanylekarz.pl/ajax?method=object.change.edit&amp;config=address&amp;object_id=35599&amp;item_id=85117" class="editObject editItem widerWindow" data-id="85117" data-key="85117">Edytuj</a> <b class="ui ui-delete"></b><b class="ui ui-move"></b> </li>
    <li> <b>Warmińsko-Mazurskie Centrum Słuchu i Mowy "Medincus"</b><br>ul. Obrońców Tobruku 1/1 <br>Działoszyn 10-561, woj. łódzkie<br><a href="http://local.znanylekarz.pl/ajax?method=object.change.edit&amp;config=address&amp;object_id=35599&amp;item_id=147849" class="editObject editItem widerWindow" data-id="147849" data-key="147849">Edytuj</a> <b class="ui ui-delete"></b><b class="ui ui-move"></b> </li>
    <li> <b>Prywatna Specjalistyczna Praktyka Lekarska Rafał Więcek</b><br>ul. ul. Słomczyńskiego 12/16 <br>Kraków 31-234, woj. małopolskie<br>tel. 666 833 388<br><a href="http://local.znanylekarz.pl/ajax?method=object.change.edit&amp;config=address&amp;object_id=35599&amp;item_id=18411" class="editObject editItem widerWindow" data-id="18411" data-key="18411">Edytuj</a> <b class="ui ui-delete"></b><b class="ui ui-move"></b> </li>
    </ul>
    </div>
    </div>
    </li>


    </ul>
    </fieldset>
    </form>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split","seethrough":"","prefixfree":"1","page":"html"}