56 lines
1.5 KiB
Plaintext
56 lines
1.5 KiB
Plaintext
|
|
||
|
|
//- ====================================
|
||
|
|
//- POSITIONING
|
||
|
|
//- ====================================
|
||
|
|
.sixteen.columns(id="position")
|
||
|
|
h3 Positioning
|
||
|
|
|
||
|
|
p
|
||
|
|
| Element notifications and Global notifications can
|
||
|
|
| be vertically repositioned to:
|
||
|
|
code "top"
|
||
|
|
| ,
|
||
|
|
code "middle"
|
||
|
|
| or
|
||
|
|
code "bottom"
|
||
|
|
| and horozontally repositioned to:
|
||
|
|
code "left"
|
||
|
|
| ,
|
||
|
|
code "center"
|
||
|
|
| or
|
||
|
|
code "right"
|
||
|
|
| .
|
||
|
|
|
||
|
|
p: pre.prettyprint.runnable
|
||
|
|
| $(".pos-demo").notify(
|
||
|
|
| "I'm left of the box",
|
||
|
|
| { position:"left" }
|
||
|
|
| );
|
||
|
|
|
||
|
|
p.center
|
||
|
|
| We can position the notification around this
|
||
|
|
span.box.pos-demo box
|
||
|
|
|
||
|
|
p(style='padding-top: 30px') Use this positioning tool to see all possible position combinations
|
||
|
|
|
||
|
|
div(style="padding: 30px;")
|
||
|
|
label.inline(for="pos-elem") Element
|
||
|
|
input(type="radio", id="pos-elem", value="elem", name="pos-type", checked="checked")
|
||
|
|
label.inline(for="pos-glob") Global
|
||
|
|
input(type="radio", id="pos-glob", value="glob", name="pos-type")
|
||
|
|
|
||
|
|
div(style="margin-left: 60px")
|
||
|
|
input.pos-chooser(data-thickness=".3",
|
||
|
|
data-width='100',
|
||
|
|
data-height='100',
|
||
|
|
data-max="12",
|
||
|
|
data-cursor="true",
|
||
|
|
data-fgColor='#080',
|
||
|
|
data-displayInput="false",
|
||
|
|
data-angleOffset='-15',
|
||
|
|
data-linecap='round')
|
||
|
|
p.center
|
||
|
|
span An awesome cool
|
||
|
|
span.box.pos-chooser-demo larrrggggeeee box
|
||
|
|
|