mirror of
https://github.com/papercss/papercss
synced 2024-06-01 13:32:42 +02:00
Merge branch 'develop' into master
This commit is contained in:
Rhyne
GitHub
commit
0c4cd1d701
50
index.html
50
index.html
|
|
@ -4,7 +4,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
|
||||
<title>PaperCSS · the less formal CSS framework</title>
|
||||
|
||||
<meta name="description" content="The less formal CSS framework.">
|
||||
|
|
@ -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>
|
||||
|
|
@ -53,6 +53,8 @@
|
|||
<li><a href="#code">Code</a></li>
|
||||
<li><a href="#tables">Tables</a></li>
|
||||
<li><a href="#popovers">Popovers</a></li>
|
||||
<li><a href="#cards">Cards</a></li>
|
||||
<li><a href="#badges">Badges</a></li>
|
||||
<li><a href="#colors">Colors</a></li>
|
||||
<li><a href="#borders">Borders & shadows</a></li>
|
||||
<li><a href="#utilities">Utilities</a></li>
|
||||
|
|
@ -257,6 +259,21 @@
|
|||
<button class="disabled">Disabled</button>
|
||||
<button disabled>Disabled</button></pre>
|
||||
</div>
|
||||
<h4>Colors</h4>
|
||||
<input type="button" class="paper-btn btn-primary" value="Primary"/>
|
||||
<input type="button" class="btn-secondary" value="Secondary"/>
|
||||
<button class="btn-success">Success</button>
|
||||
<button class="btn-warning">Warning</button>
|
||||
<button class="btn-danger">Danger</button>
|
||||
<div class="docs">
|
||||
<pre>
|
||||
<input type="button" class="paper-btn btn-primary" value="Primary"/>
|
||||
<input type="button" class="btn-secondary" value="Secondary"/>
|
||||
<button class="btn-success">Success</button>
|
||||
<button class="btn-warning">Warning</button>
|
||||
<button class="btn-danger">Danger</button>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div id="forms" class="section">
|
||||
<h2>Forms</h2>
|
||||
|
|
@ -594,46 +611,45 @@ 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>
|
||||
<p popover="Popover on left" popover-position="left">Popover left position</p>
|
||||
<p popover="Popover on top" popover-position="top">Popover top position</p>
|
||||
<p popover="Popover on bottom" popover-position="bottom">Popover bottom position</p>
|
||||
<p popover="Popover on right" popover-position="right">Popover right position</p></pre>
|
||||
<p popover-left="Popover on left">Popover left position</p>
|
||||
<p popover-top="Popover on top">Popover top position</p>
|
||||
<p popover-bottom="Popover on bottom">Popover bottom position</p>
|
||||
<p popover-right="Popover on right">Popover right position</p></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>
|
||||
<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button></pre>
|
||||
<button popover-top="Popover on top">Popover on top and on a button!</button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="colors" class="section">
|
||||
<div id="cards" class="section">
|
||||
<h2>Cards</h2>
|
||||
<h4>Full card example</h4>
|
||||
<p>It is possible to not put all the sub-classes like card-title, card-subtitle, card-text, ... But instead the framework will recognize the element properly if it's a h4, h5, p, ... And you need to put all this content on a div with card class.</p>
|
||||
|
|
@ -746,7 +762,7 @@ function add(x, y) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div id="badges" class="section">
|
||||
<h2>Badges</h2>
|
||||
<h4>Default</h4>
|
||||
<p>You can customize badges colors with secondary, success, warning, danger classes.</p>
|
||||
|
|
|
|||
|
|
@ -12,24 +12,14 @@
|
|||
background-color: @muted;
|
||||
color: white;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background-color: @primary;
|
||||
.make-badge-color-classes(@i: length(@colors)) when (@i > 0) {
|
||||
.make-badge-color-classes(@i - 1);
|
||||
@color: extract(@colors, @i);
|
||||
.badge.@{color} {
|
||||
background-color: @@color;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background-color: @secondary;
|
||||
}
|
||||
|
||||
&.success {
|
||||
background-color: @success;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
background-color: @warning;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
background-color: @danger;
|
||||
}
|
||||
}
|
||||
.make-badge-color-classes();
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
border: 2px solid @primary;
|
||||
}
|
||||
.border-white {
|
||||
border-color: #FFF;
|
||||
border-color: @white;
|
||||
}
|
||||
.border-dotted {
|
||||
border-style: dotted;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
button, .paper-btn, input[type="button"] {
|
||||
button, .paper-btn, [type="button"] {
|
||||
.shadow;
|
||||
align-self:center;
|
||||
background:transparent;
|
||||
transition:all .5s ease;
|
||||
transition:all .5s ease, background-color .1s ease;
|
||||
color: @primary;
|
||||
display: inline;
|
||||
outline:none;
|
||||
border:solid 2px @primary;
|
||||
.border;
|
||||
|
|
@ -44,4 +46,20 @@ a {
|
|||
text-decoration: none;
|
||||
color: @primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.make-button-color-classes(@i: length(@colors)) when (@i > 0) {
|
||||
.make-button-color-classes(@i - 1);
|
||||
@color: extract(@colors, @i);
|
||||
button.btn-@{color}, .paper-btn.btn-@{color}, [type="button"].btn-@{color} {
|
||||
border-color: @@color;
|
||||
background-color: ~"@{@{color}-light}";
|
||||
color: ~"@{@{color}-text}";
|
||||
&:hover:active{
|
||||
@darkcolour: ~"@{color}-light";
|
||||
background-color: darken(@@darkcolour, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.make-button-color-classes();
|
||||
|
|
@ -8,7 +8,7 @@ code {
|
|||
kbd {
|
||||
padding: 2px 4px;
|
||||
font-size: 80%;
|
||||
color: #fff;
|
||||
color: @white;
|
||||
background-color: @primary;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,17 @@
|
|||
@danger-light: lighten(@danger, 45%);
|
||||
@muted-light: lighten(@muted, 35%);
|
||||
|
||||
@white-dark: rgba(0, 0, 0, .03);
|
||||
@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);
|
||||
|
||||
@primary-text: #FFF;
|
||||
@secondary-text: @primary;
|
||||
@success-text: @primary;
|
||||
@warning-text: @primary;
|
||||
@danger-text: @primary;
|
||||
@muted-text: @primary;
|
||||
|
||||
@colors: primary, secondary, success, warning, danger, muted;
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ hr:after {
|
|||
}
|
||||
.paper {
|
||||
border: 1px solid @primary-light;
|
||||
background-color: #FFF;
|
||||
background-color: @main-background;
|
||||
padding: 2rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
input, select {
|
||||
display: block;
|
||||
background:transparent;
|
||||
color:#41403E;
|
||||
color:@primary;
|
||||
outline:none;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
|
|
@ -75,15 +75,13 @@ input, select {
|
|||
|
||||
/* the checked style using the :checked pseudo class */
|
||||
input[type="radio"]:checked + span:before {
|
||||
// We need to escape the color because the "#" found in a hex color will cause the Firefox to not render the image
|
||||
@escaped-color: escape(@secondary);
|
||||
@radio-fill: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='@{escaped-color}' d='M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89 c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837 c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079 c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826 c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371 c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262 c0.643,4.698,0.646,10.775-3.811,13.746'></path></svg>";
|
||||
@escaped-svg: escape("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path fill='@{secondary}' d='M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89 c8.713,2.852,4.352,20.922-4.901,20.269c-4.684-0.33-12.616-7.405-14.38-11.818c-2.375-5.938,7.208-11.688,11.624-13.837 c9.078-4.42,18.403-3.503,22.784,6.651c4.049,9.378,6.206,28.09-1.462,36.276c-7.091,7.567-24.673,2.277-32.357-1.079 c-11.474-5.01-24.54-19.124-21.738-32.758c3.958-19.263,28.856-28.248,46.044-23.244c20.693,6.025,22.012,36.268,16.246,52.826 c-5.267,15.118-17.03,26.26-33.603,21.938c-11.054-2.883-20.984-10.949-28.809-18.908C9.236,66.096,2.704,57.597,6.01,46.371 c3.059-10.385,12.719-20.155,20.892-26.604C40.809,8.788,58.615,1.851,75.058,12.031c9.289,5.749,16.787,16.361,18.284,27.262 c0.643,4.698,0.646,10.775-3.811,13.746'></path></svg>");
|
||||
@radio-fill: "data:image/svg+xml,@{escaped-svg}";
|
||||
background: url(@radio-fill) left center no-repeat;
|
||||
}
|
||||
input[type="checkbox"]:checked + span:before {
|
||||
// We need to escape the color because the "#" found in a hex color will cause the Firefox to not render the image
|
||||
@escaped-color: escape(@secondary);
|
||||
@check-fill: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path stroke='@{escaped-color}' fill-opacity='0' stroke-width='16' d='m13,62c0.61067,1.6 1.3045,2.3045 1.75717,2.75716c0.72683,0.72684 1.24283,1.24284 2.07617,2.07617c0.54133,0.54133 1.04116,1.06035 1.82833,1.82383c0.5781,0.5607 1.00502,0.96983 2.02633,1.74417c0.55877,0.42365 1.191,0.84034 1.884,1.284c1.16491,0.74577 1.59777,1.00147 2.5,1.55067c0.4692,0.28561 1.43689,0.86868 1.93067,1.16534c0.99711,0.59904 1.99667,1.19755 2.49283,1.49866c0.98501,0.59779 1.47073,0.89648 1.94733,1.2c1.3971,0.88972 1.83738,1.19736 2.7,1.7955c0.42201,0.29262 1.24022,0.87785 2.05583,1.41917c0.79531,0.52785 1.59376,1.0075 2.38,1.43867c0.74477,0.40842 1.45167,0.75802 2.37817,1.22517c0.76133,0.38387 1.54947,0.82848 2.40717,1.41084c0.7312,0.49647 1.49563,1.08231 2.27884,1.258c0.35564,0.07978 0.14721,-0.95518 0.35733,-1.86867c0.18092,-0.78651 0.98183,-1.2141 0.99983,-2.07867c0.02073,-0.99529 0.07916,-1.79945 0.42533,-2.56133c0.43607,-0.95973 0.53956,-1.66774 0.79617,-2.68183c0.18888,-0.74645 0.39764,-1.31168 0.7785,-2.6235c0.20865,-0.71867 0.41483,-1.48614 0.708,-2.28c0.15452,-0.41843 0.77356,-1.73138 1.348,-2.64133c0.30581,-0.48443 0.65045,-0.97043 1.0065,-1.4745c0.74776,-1.05863 1.1531,-1.60163 1.9375,-2.77084c0.40621,-0.60548 0.80272,-1.23513 1.2045,-1.8765c0.40757,-0.65062 0.81464,-1.31206 1.2315,-1.9755c0.41946,-0.66757 0.83374,-1.34258 1.73067,-2.648c0.44696,-0.65053 0.91436,-1.28356 1.386,-1.9095c0.46972,-0.6234 0.94725,-1.2364 1.422,-1.8465c0.94116,-1.20947 1.86168,-2.40844 2.30367,-3.0105c0.438,-0.59664 0.86246,-1.19396 1.27501,-1.7895c0.40743,-0.58816 0.80352,-1.17234 1.185,-1.7535c1.10526,-1.68381 1.44079,-2.23511 1.77633,-2.7705c0.32878,-0.52461 0.96306,-1.5459 1.27467,-2.04c0.60654,-0.96177 1.20782,-1.88193 1.51051,-2.325c0.59013,-0.86381 1.17888,-1.68032 1.46416,-2.075c0.5498,-0.76063 1.31747,-1.8231 1.77883,-2.4895c0.43918,-0.63437 0.85266,-1.25267 1.45717,-2.15717c0.59549,-0.891 0.96531,-1.46814 1.51466,-2.22933c0.58413,-0.80936 1.12566,-1.40253 1.83801,-2.12333c0.61304,-0.62031 0.45171,-1.48306 0.7045,-2.34733c0.25668,-0.87762 0.75447,-1.62502 1,-2.40983c0.25128,-0.8032 0.7633,-1.39453 1.33217,-2.25417c0.54528,-0.82398 0.73415,-1.6714 1.31516,-2.336c0.55639,-0.63644 1.38658,-1.22588 1.8595,-1.9c0.5082,-0.72441 0.78867,-1.4 1.60266,-1.56667l0.71184,-0.4905'></path></svg>";
|
||||
@escaped-svg: escape("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path stroke='@{secondary}' fill-opacity='0' stroke-width='16' d='m13,62c0.61067,1.6 1.3045,2.3045 1.75717,2.75716c0.72683,0.72684 1.24283,1.24284 2.07617,2.07617c0.54133,0.54133 1.04116,1.06035 1.82833,1.82383c0.5781,0.5607 1.00502,0.96983 2.02633,1.74417c0.55877,0.42365 1.191,0.84034 1.884,1.284c1.16491,0.74577 1.59777,1.00147 2.5,1.55067c0.4692,0.28561 1.43689,0.86868 1.93067,1.16534c0.99711,0.59904 1.99667,1.19755 2.49283,1.49866c0.98501,0.59779 1.47073,0.89648 1.94733,1.2c1.3971,0.88972 1.83738,1.19736 2.7,1.7955c0.42201,0.29262 1.24022,0.87785 2.05583,1.41917c0.79531,0.52785 1.59376,1.0075 2.38,1.43867c0.74477,0.40842 1.45167,0.75802 2.37817,1.22517c0.76133,0.38387 1.54947,0.82848 2.40717,1.41084c0.7312,0.49647 1.49563,1.08231 2.27884,1.258c0.35564,0.07978 0.14721,-0.95518 0.35733,-1.86867c0.18092,-0.78651 0.98183,-1.2141 0.99983,-2.07867c0.02073,-0.99529 0.07916,-1.79945 0.42533,-2.56133c0.43607,-0.95973 0.53956,-1.66774 0.79617,-2.68183c0.18888,-0.74645 0.39764,-1.31168 0.7785,-2.6235c0.20865,-0.71867 0.41483,-1.48614 0.708,-2.28c0.15452,-0.41843 0.77356,-1.73138 1.348,-2.64133c0.30581,-0.48443 0.65045,-0.97043 1.0065,-1.4745c0.74776,-1.05863 1.1531,-1.60163 1.9375,-2.77084c0.40621,-0.60548 0.80272,-1.23513 1.2045,-1.8765c0.40757,-0.65062 0.81464,-1.31206 1.2315,-1.9755c0.41946,-0.66757 0.83374,-1.34258 1.73067,-2.648c0.44696,-0.65053 0.91436,-1.28356 1.386,-1.9095c0.46972,-0.6234 0.94725,-1.2364 1.422,-1.8465c0.94116,-1.20947 1.86168,-2.40844 2.30367,-3.0105c0.438,-0.59664 0.86246,-1.19396 1.27501,-1.7895c0.40743,-0.58816 0.80352,-1.17234 1.185,-1.7535c1.10526,-1.68381 1.44079,-2.23511 1.77633,-2.7705c0.32878,-0.52461 0.96306,-1.5459 1.27467,-2.04c0.60654,-0.96177 1.20782,-1.88193 1.51051,-2.325c0.59013,-0.86381 1.17888,-1.68032 1.46416,-2.075c0.5498,-0.76063 1.31747,-1.8231 1.77883,-2.4895c0.43918,-0.63437 0.85266,-1.25267 1.45717,-2.15717c0.59549,-0.891 0.96531,-1.46814 1.51466,-2.22933c0.58413,-0.80936 1.12566,-1.40253 1.83801,-2.12333c0.61304,-0.62031 0.45171,-1.48306 0.7045,-2.34733c0.25668,-0.87762 0.75447,-1.62502 1,-2.40983c0.25128,-0.8032 0.7633,-1.39453 1.33217,-2.25417c0.54528,-0.82398 0.73415,-1.6714 1.31516,-2.336c0.55639,-0.63644 1.38658,-1.22588 1.8595,-1.9c0.5082,-0.72441 0.78867,-1.4 1.60266,-1.56667l0.71184,-0.4905'></path></svg>");
|
||||
@check-fill: "data:image/svg+xml,@{escaped-svg}";
|
||||
background: url(@check-fill) left center no-repeat;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: #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-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%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue