deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-26 09:20:15 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #5 from TotomInc/popovers

Browse source 
Popovers added
This commit is contained in:
Rhyne 2017-10-31 07:51:04 -04:00 committed by GitHub
parent c4ea6d501d 9bdc858714
commit 024356e107
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 127 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
index.html
View file

@ -429,7 +429,7 @@ function add(x, y) {
</tr>
<tr>
<td>2</td>
<td>Eric Claption</td>
<td>Eric Clapton</td>
<td>Musician</td>
<td>Ohio, USA</td>
</tr>
@ -460,7 +460,7 @@ function add(x, y) {
</tr>
<tr>
<td>2</td>
<td>Eric Claption</td>
<td>Eric Clapton</td>
<td>Musician</td>
<td>Ohio, USA</td>
</tr>
@ -491,7 +491,7 @@ function add(x, y) {
</tr>
<tr>
<td>2</td>
<td>Eric Claption</td>
<td>Eric Clapton</td>
<td>Musician</td>
<td>Ohio, USA</td>
</tr>
@ -523,7 +523,7 @@ function add(x, y) {
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;Eric Claption&lt;/td&gt;
&lt;td&gt;Eric Clapton&lt;/td&gt;
&lt;td&gt;Musician&lt;/td&gt;
&lt;td&gt;Ohio, USA&lt;/td&gt;
&lt;/tr&gt;
@ -541,6 +541,47 @@ function add(x, y) {
&lt;table class=&quot;table-alternating&quot;&gt;</pre>
</div>
</div>
<div class="section">
<h2>Popovers</h2>
<h4>Basic usage</h4>
<p>You can add popovers, also called tooltips, on your elements. popover attribute is the popover text content, popover-position attribute can be: top, left, right, bottom.</p>
<div class="row flex-spaces">
<div class="sm-3 col">
<p popover="Popover on left" popover-position="left">Popover left position</p>
</div>
<div class="sm-3 col">
<p popover="Popover on top" popover-position="top">Popover top position</p>
</div>
<div class="sm-3 col">
<p popover="Popover on bottom" popover-position="bottom">Popover bottom position</p>
</div>
<div class="sm-3 col">
<p popover="Popover on right" popover-position="right">Popover right position</p>
</div>
</div>
<div class="docs">
<pre>
&lt;p popover="Popover on left" popover-position="left"&gt;Popover left position&lt;/p&gt;
&lt;p popover="Popover on top" popover-position="top"&gt;Popover top position&lt;/p&gt;
&lt;p popover="Popover on bottom" popover-position="bottom"&gt;Popover bottom position&lt;/p&gt;
&lt;p popover="Popover on right" popover-position="right"&gt;Popover right position&lt;/p&gt;</pre>
</div>
<p>But you can also popover on pretty much any element you want, it can be on a button, on a table cell, ...</p>
<div class="row flex-center">
<div class="sm-6 col">
<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button>
</div>
</div>
<div class="docs">
<pre>
&lt;button popover="Popover on top" popover-position="top"&gt;Popover on top and on a button!&lt;/button&gt;</pre>
</div>
</div>
<div class="section">
<h2>Colors</h2>
<h4>Text</h4>

80
src/popovers.less Normal file
View file

@ -0,0 +1,80 @@
// Core popover
[popover] {
position: relative;
margin: 24px;
}
// Popover hover trigger
[popover]:hover {
&::after {
transition: opacity .2s ease-out;
opacity: 1;
}
}
// Creating popover::after element
[popover]::after {
content: attr(popover);
position: absolute;
top: -6px;
left: 50%;
opacity: 0;
padding: 4px 2px;
min-width: 80px;
font-size: 0.7em;
text-align: center;
color: #fff;
background: rgba(0,0,0,0.7);
transition: opacity .25s ease-out;
transform: translateX(-50%) translateY(-100%);
.border;
}
// Popover positioning: left, right, top, bottom
[popover-position='left']::before {
left: 0%;
top: 50%;
margin-left: -12px;
transform: translatey(-50%) rotate(-90deg);
}
[popover-position='left']::after {
left: 0%;
top: 50%;
margin-left: -8px;
transform: translateX(-100%) translateY(-50%);
}
[popover-position='top']::before {
left: 50%;
}
[popover-position='top']::after {
left: 50%;
}
[popover-position='bottom']::before {
top:100%;
margin-top: 8px;
transform: translateX(-50%) translatey(-100%) rotate(-180deg);
}
[popover-position='bottom']::after {
top: 100%;
margin-top: 8px;
transform: translateX(-50%) translateY(0%);
}
[popover-position='right']::before {
left: 100%;
top: 50%;
margin-left: 1px;
transform: translatey(-50%) rotate(90deg);
}
[popover-position='right']::after {
left: 100%;
top: 50%;
margin-left: 8px;
transform: translateX(0%) translateY(-50%);
}

3
src/styles.less
View file

@ -12,4 +12,5 @@
@import (less) "./code.less";
@import (less) "./tables.less";
@import (less) "./images.less";
@import (less) "./utilities.less";
@import (less) "./utilities.less";
@import (less) "./popovers.less";