adjust c-form-add-remove to have tip down on the bottom

dev-app/app.html

@@ -24,7 +24,7 @@
  state="${link.isActive ? 'active' : ''}"
  >
  </c-nav-horizontal-item>
- <c-nav-horizontal-item position="right" href="https://github.com/bindable-ui/bindable" title="v1.0.11"></c-nav-horizontal-item>
+ <c-nav-horizontal-item position="right" href="https://github.com/bindable-ui/bindable" title="v1.0.13"></c-nav-horizontal-item>
  </c-nav-horizontal>
  </l-box>
  </l-sidebar>

dev-app/routes/components/forms/add-remove/properties/index.html

@@ -18,7 +18,16 @@
  <l-stack spacing="var(--s-3)">
  <c-h3>left-title &amp; right-title</c-h3>
  <c-code-sample>
- <c-form-add-remove title-left="Left Title Here" list-left.two-way="leftVals" title-right="Right Title Here" list-right.two-way="rightVals" is-loading-left.bind="true" is-loading-more-right.bind="true"></c-form-add-remove>
+ <c-form-add-remove
+ tip-left-content="tip here"
+ tip-right-content="tip here right"
+ title-left="Left Title Here"
+ list-left.two-way="leftVals"
+ title-right="Right Title Here"
+ list-right.two-way="rightVals"
+ is-loading-left.bind="true"
+ is-loading-more-right.bind="true"
+ ></c-form-add-remove>
  </c-code-sample>
  </l-stack>
  <br>
@@ -30,7 +39,15 @@
  <l-stack spacing="var(--s-3)">
  <c-h3>reorder</c-h3>
  <c-code-sample>
- <c-form-add-remove title-left="Left Title" list-left.two-way="leftVals" title-right="Reorder Option" list-right.two-way="rightVals" reorder.bind="true"></c-form-add-remove>
+ <c-form-add-remove
+ tip-left-content="tip here"
+ tip-right-content="tip here right"
+ title-left="Left Title"
+ list-left.two-way="leftVals"
+ title-right="Reorder Option"
+ list-right.two-way="rightVals"
+ reorder.bind="true"
+ ></c-form-add-remove>
  </c-code-sample>
  </l-stack>
  <br>
@@ -42,7 +59,13 @@
  <l-stack spacing="var(--s-3)">
  <c-h3>state disabled</c-h3>
  <c-code-sample>
- <c-form-add-remove state="disabled" title-left="Disabled Left List" list-left.two-way="leftVals" title-right="Disabled Right List" list-right.two-way="rightVals"></c-form-add-remove>
+ <c-form-add-remove
+ state="disabled"
+ title-left="Disabled Left List"
+ list-left.two-way="leftVals"
+ title-right="Disabled Right List"
+ list-right.two-way="rightVals"
+ ></c-form-add-remove>
  </c-code-sample>
  </l-stack>
  <br>
@@ -54,7 +77,13 @@
  <l-stack spacing="var(--s-3)">
  <c-h3>state hidden</c-h3>
  <c-code-sample>
- <c-form-add-remove state="hidden" title-left="Hidden Left List" list-left.two-way="leftVals" title-right="Hidden Right List" list-right.two-way="rightVals"></c-form-add-remove>
+ <c-form-add-remove
+ state="hidden"
+ title-left="Hidden Left List"
+ list-left.two-way="leftVals"
+ title-right="Hidden Right List"
+ list-right.two-way="rightVals"
+ ></c-form-add-remove>
  </c-code-sample>
  </l-stack>
  </div>

package.json

@@ -1,7 +1,7 @@
 {
  "name": "@bindable-ui/bindable",
  "description": "An Aurelia component library",
- "version": "1.0.12",
+ "version": "1.0.13",
  "repository": {
  "type": "git",
  "url": "https://github.com/bindable-ui/bindable"

src/components/forms/select/c-form-add-remove/c-form-add-remove.html

@@ -21,7 +21,7 @@
  actions.bind="actionsLeft"
  >
  <span slot="tip" show.bind="tipLeftContent">
- <c-tip side="top" icon-tip.bind="true" arrow-position="leftEdge" size="medium">
+ <c-tip side="bottom" icon-tip.bind="true" arrow-position="leftEdge" size="medium">
  <div slot="trigger">
  <c-icon icon="question"></c-icon>
  </div>
@@ -64,8 +64,10 @@
  actions.bind="actionsRight"
  >
  <span slot="tip" show.bind="tipRightContent">
- <c-tip side="top" icon-tip.bind="true" arrow-position="rightEdge" size="medium">
- <div slot="trigger"><c-icon icon="question"></c-icon></div>
+ <c-tip side="bottom" icon-tip.bind="true" arrow-position="rightEdge" size="medium">
+ <div slot="trigger">
+ <c-icon icon="question"></c-icon>
+ </div>
  <div slot="content">
  <c-p color="var(--c_white)">${tipRightContent}</c-p>
  </div>

src/components/forms/select/c-form-select/c-form-select.css

@@ -157,10 +157,10 @@ select.error{
 
 .loader{
  position: absolute;
- top: 0;
+ top: 60px;
  bottom: 0;
  width: 100%;
- min-height: 120px;
+ min-height: 109px;
 }
 
 .loading-more{