playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

More popover stuff

pull/214/head
connors 11 years ago
parent
cb10289788
commit
088bcef703
6 changed files with 50 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 8
      dist/ratchet.css
  2. 45
      docs/index.html
  3. 28
      examples/components/classic/index.html
  4. 28
      examples/components/default/index.html
  5. 5
      lib/sass/popovers.scss
  6. 3
      lib/sass/table-views.scss

8
dist/ratchet.css vendored
Unescape View File

@ -475,12 +475,13 @@ strong {
.popover .table-view { .popover .table-view {
width: auto; width: auto;
max-height: 250px; max-height: 300px;
margin-right: 0; margin-right: 0;
margin-bottom: 0; margin-bottom: 0;
margin-left: 0; margin-left: 0;
overflow: auto; overflow: auto;
background-color: #fff; background-color: #fff;
border-radius: 12px;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
@ -933,11 +934,6 @@ input[type="button"] {
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
.popover-content {
overflow: hidden;
border-radius: 12px;
}
.backdrop { .backdrop {
position: fixed; position: fixed;
top: 0; top: 0;

45
docs/index.html
Unescape View File

@ -959,18 +959,16 @@ document
Right Right
</a> </a>
</header> </header>
<div class="popover-content"> <ul class="table-view">
<ul class="table-view"> <li>Item1</li>
<li>Item1</li> <li>Item2</li>
<li>Item2</li> <li>Item3</li>
<li>Item3</li> <li>Item4</li>
<li>Item4</li> <li>Item5</li>
<li>Item5</li> <li>Item6</li>
<li>Item6</li> <li>Item7</li>
<li>Item7</li> <li>Item8</li>
<li>Item8</li> </ul>
</ul>
</div>
</div> </div>
</div> </div>
@ -985,19 +983,16 @@ document
Right Right
&lt;/a&gt; &lt;/a&gt;
&lt;/header&gt; &lt;/header&gt;
&lt;ul class=&quot;table-view&quot;&gt;
&lt;div class=&quot;popover-content&quot;&gt; &lt;li&gt;Item1&lt;/li&gt;
&lt;ul class=&quot;table-view&quot;&gt; &lt;li&gt;Item2&lt;/li&gt;
&lt;li&gt;Item1&lt;/li&gt; &lt;li&gt;Item3&lt;/li&gt;
&lt;li&gt;Item2&lt;/li&gt; &lt;li&gt;Item4&lt;/li&gt;
&lt;li&gt;Item3&lt;/li&gt; &lt;li&gt;Item5&lt;/li&gt;
&lt;li&gt;Item4&lt;/li&gt; &lt;li&gt;Item6&lt;/li&gt;
&lt;li&gt;Item5&lt;/li&gt; &lt;li&gt;Item7&lt;/li&gt;
&lt;li&gt;Item6&lt;/li&gt; &lt;li&gt;Item8&lt;/li&gt;
&lt;li&gt;Item7&lt;/li&gt; &lt;/ul&gt;
&lt;li&gt;Item8&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </pre>

28
examples/components/classic/index.html
Unescape View File

@ -45,21 +45,19 @@
Filter Filter
</a> </a>
</header> </header>
<div class="popover-content"> <ul class="table-view">
<ul class="table-view"> <li>Item1</li>
<li>Item1</li> <li>Item2</li>
<li>Item2</li> <li>Item3</li>
<li>Item3</li> <li class="table-view-divider">With counts</li>
<li class="table-view-divider">With counts</li> <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li> <li>Item2 <span class="count">1</span></li>
<li>Item2 <span class="count">1</span></li> <li>Item3 <span class="count">1</span></li>
<li>Item3 <span class="count">1</span></li> <li class="table-view-divider">With chevrons</li>
<li class="table-view-divider">With chevrons</li> <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> <li>Item2 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li> <li>Item3 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li> </ul>
</ul>
</div>
</div> </div>
<div class="content"> <div class="content">

28
examples/components/default/index.html
Unescape View File

@ -45,21 +45,19 @@
Filter Filter
</a> </a>
</header> </header>
<div class="popover-content"> <ul class="table-view">
<ul class="table-view"> <li>Item1</li>
<li>Item1</li> <li>Item2</li>
<li>Item2</li> <li>Item3</li>
<li>Item3</li> <li class="table-view-divider">With counts</li>
<li class="table-view-divider">With counts</li> <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li> <li>Item2 <span class="count">1</span></li>
<li>Item2 <span class="count">1</span></li> <li>Item3 <span class="count">1</span></li>
<li>Item3 <span class="count">1</span></li> <li class="table-view-divider">With chevrons</li>
<li class="table-view-divider">With chevrons</li> <li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li>
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> <li>Item2 <span class="chevron"></span></li>
<li>Item2 <span class="chevron"></span></li> <li>Item3 <span class="chevron"></span></li>
<li>Item3 <span class="chevron"></span></li> </ul>
</ul>
</div>
</div> </div>
<div class="content"> <div class="content">

5
lib/sass/popovers.scss
Unescape View File

@ -43,11 +43,6 @@
} }
} }
.popover-content {
overflow: hidden;
border-radius: 12px;
}
// Backdrop (used as invisible touch escape) // Backdrop (used as invisible touch escape)
// -------------------------------------------------- // --------------------------------------------------

3
lib/sass/table-views.scss
Unescape View File

@ -124,11 +124,12 @@
.popover .table-view { .popover .table-view {
width: auto; width: auto;
max-height: 250px; max-height: 300px;
margin-right: 0; margin-right: 0;
margin-bottom: 0; margin-bottom: 0;
margin-left: 0; margin-left: 0;
overflow: auto; overflow: auto;
background-color: #fff; background-color: #fff;
border-radius: 12px;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
Write Preview
Loading…
Cancel
Save