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

Merge pull request #34 from wintercounter/feature-short-popover-attributes

Browse source 
Feature short popover attributes
This commit is contained in:
Rhyne 2017-11-13 19:02:34 -05:00 committed by GitHub
parent 952bbbf605 23e6e895e2
commit f5096d9609
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 92 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
index.html
View file

@ -20,8 +20,8 @@
<meta property="og:description" content="The less formal CSS framework">
<!-- Styles -->
<link rel="stylesheet" href="/dist/paper.css">
<link rel="stylesheet" href="/demo.css">
<link rel="stylesheet" href="./dist/paper.css">
<link rel="stylesheet" href="./demo.css">
</head>
<body>
@ -611,42 +611,42 @@ function add(x, y) {
<div id="popovers" 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>
<p>You can add popovers, also called tooltips, on your elements. popover-[position] attribute is the popover text content and it 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>
<p popover-left="Popover on left">Popover left position</p>
</div>
<div class="sm-3 col">
<p popover="Popover on top" popover-position="top">Popover top position</p>
<p popover-top="Popover on top">Popover top position</p>
</div>
<div class="sm-3 col">
<p popover="Popover on bottom" popover-position="bottom">Popover bottom position</p>
<p popover-bottom="Popover on bottom">Popover bottom position</p>
</div>
<div class="sm-3 col">
<p popover="Popover on right" popover-position="right">Popover right position</p>
<p popover-right="Popover on 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>
&lt;p popover-left="Popover on left"&gt;Popover left position&lt;/p&gt;
&lt;p popover-top="Popover on top"&gt;Popover top position&lt;/p&gt;
&lt;p popover-bottom="Popover on bottom"&gt;Popover bottom position&lt;/p&gt;
&lt;p popover-right="Popover on 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>
<button popover-top="Popover on 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>
&lt;button popover-top="Popover on top"&gt;Popover on top and on a button!&lt;/button&gt;</pre>
</div>
</div>
<div id="cards" class="section">

1
src/colors.less
View file

@ -14,6 +14,7 @@
@muted-light: lighten(@muted, 35%);
@white-dark: rgba(0, 0, 0, 0.3);
@light-dark: rgba(0, 0, 0, 0.7);
@white: rgba(255, 255, 255, 1);
@main-background: rgba(255, 255, 255, 1);

142
src/popovers.less
View file

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