mirror of
https://github.com/papercss/papercss
synced 2024-06-08 08:52:25 +02:00
Merge branch 'develop' into patch-1
This commit is contained in:
Nilanno
GitHub
commit
b869b5ae86
|
|
@ -21,7 +21,7 @@ Don't want to download it? That's cool. You can just link to PaperCSS via unpkg'
|
|||
- https://unpkg.com/papercss@1.1.0/dist/paper.min.css
|
||||
|
||||
## Quick Start
|
||||
```
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
|
|
|||
BIN
img/favicon.ico
Normal file
BIN
img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
69
index.html
69
index.html
|
|
@ -4,9 +4,12 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
|
||||
<title>PaperCSS · the less formal CSS framework</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
|
||||
|
||||
<meta name="description" content="The less formal CSS framework.">
|
||||
<meta name="author" content="Rhyneav and PaperCSS contributors.">
|
||||
|
||||
|
|
@ -20,8 +23,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 +56,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 +262,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>
|
||||
|
|
@ -282,6 +302,14 @@
|
|||
<label>Disabled</label>
|
||||
<input type="text" placeholder="Disabled" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Large Input</label>
|
||||
<textarea placeholder="Large input"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>No Resize</label>
|
||||
<textarea class="no-resize" placeholder="No resize"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select>
|
||||
|
|
@ -332,6 +360,14 @@
|
|||
<label>Disabled</label>
|
||||
<input type="text" placeholder="Disabled" disabled>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Large Input</label>
|
||||
<textarea placeholder="Large input"> </textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>No Resize</label>
|
||||
<textarea class="no-resize" placeholder="No resize"> </textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Select</label>
|
||||
<select>
|
||||
|
|
@ -594,46 +630,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 +781,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;
|
||||
|
|
@ -10,6 +12,7 @@ button, .paper-btn, input[type="button"] {
|
|||
padding: .75rem .75rem;
|
||||
cursor: pointer;
|
||||
.shadow;
|
||||
.shadow-hover;
|
||||
&.btn-large {
|
||||
.shadow-large;
|
||||
font-size:2rem;
|
||||
|
|
@ -24,14 +27,14 @@ button, .paper-btn, input[type="button"] {
|
|||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
&:hover{
|
||||
&:hover {
|
||||
.shadow-hover;
|
||||
}
|
||||
&:active {
|
||||
border-color: hsla(0,0%,0%,.2);
|
||||
transition: none;
|
||||
}
|
||||
&.disabled, &[disabled]{
|
||||
&.disabled, &[disabled] {
|
||||
.disabled;
|
||||
}
|
||||
}
|
||||
|
|
@ -51,3 +54,19 @@ a {
|
|||
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();
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
.card {
|
||||
.shadow;
|
||||
.shadow-hover;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
word-wrap: break-word;
|
||||
border: 2px solid @muted-light;
|
||||
|
||||
&:hover {
|
||||
.shadow-hover;
|
||||
}
|
||||
border: 2px solid @muted-light;
|
||||
|
||||
.card-header,
|
||||
.card-footer {
|
||||
|
|
|
|||
|
|
@ -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,3 +1,27 @@
|
|||
@columnNames: col, sm, md, lg;
|
||||
@columnSizes: 0px, 768px, 992px, 1200px;
|
||||
|
||||
@numberOfColumns: 12;
|
||||
|
||||
.make-column-class(@name, @size, @n, @p: 1) when (@p =< @n) {
|
||||
@percent: (@p * 100% / @n);
|
||||
.@{name}-@{p} {
|
||||
.col-size(@percent);
|
||||
}
|
||||
|
||||
.make-column-class(@name, @size, @n, (@p + 1));
|
||||
}
|
||||
|
||||
.make-column-classes(@n, @j: 1) when (@j =< length(@columnNames)) {
|
||||
@columnName: extract(@columnNames, @j);
|
||||
@columnSize: extract(@columnSizes, @j);
|
||||
@media (min-width: @columnSize) {
|
||||
.make-column-class(@columnName, @columnSize, @n);
|
||||
}
|
||||
|
||||
.make-column-classes(@n, @j + 1);
|
||||
}
|
||||
|
||||
.center-all() {
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
|
|
@ -11,47 +35,6 @@
|
|||
flex: 0 0 @percent;
|
||||
max-width: @percent;
|
||||
}
|
||||
.generate-col(@n, @i: 1) when (@i =< @n) {
|
||||
@percent: (@i * 100% / @n);
|
||||
.col-@{i} {
|
||||
.col-size(@percent);
|
||||
}
|
||||
.generate-col(@n, (@i + 1));
|
||||
}
|
||||
|
||||
.generate-sm(@n, @i: 1) when (@i =< @n) {
|
||||
@percent: (@i * 100% / @n);
|
||||
@media (min-width: 768px) {
|
||||
.sm-@{i} {
|
||||
.col-size(@percent);
|
||||
}
|
||||
}
|
||||
.generate-sm(@n, (@i + 1));
|
||||
}
|
||||
.generate-md(@n, @i: 1) when (@i =< @n) {
|
||||
@percent: (@i * 100% / @n);
|
||||
@media (min-width: 992px) {
|
||||
.md-@{i} {
|
||||
.col-size(@percent);
|
||||
}
|
||||
}
|
||||
.generate-md(@n, (@i + 1));
|
||||
}
|
||||
.generate-lg(@n, @i: 1) when (@i =< @n) {
|
||||
@percent: (@i * 100% / @n);
|
||||
@media (min-width: 1200px) {
|
||||
.lg-@{i} {
|
||||
.col-size(@percent);
|
||||
}
|
||||
}
|
||||
.generate-lg(@n, (@i + 1));
|
||||
}
|
||||
.generate-columns(@n) {
|
||||
.generate-col(@n);
|
||||
.generate-sm(@n);
|
||||
.generate-md(@n);
|
||||
.generate-lg(@n);
|
||||
}
|
||||
.row {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
|
@ -118,7 +101,7 @@
|
|||
width: auto;
|
||||
flex: 1 1 0px;
|
||||
}
|
||||
.generate-columns(12);
|
||||
.make-column-classes(@numberOfColumns);
|
||||
.align-top {
|
||||
-webkit-align-self: flex-start;
|
||||
-ms-flex-item-align: start;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ html {
|
|||
font-family: @body-font, sans-serif;
|
||||
color: @font-color;
|
||||
}
|
||||
p, a, button, table, thead, tbody, th, tr, td, input, select, option {
|
||||
p, a, button, table, thead, tbody, th, tr, td, input, textarea, select, option {
|
||||
font-family: @body-font, sans-serif;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
input, select {
|
||||
input, select, textarea {
|
||||
display: block;
|
||||
background:transparent;
|
||||
color:#41403E;
|
||||
color:@primary;
|
||||
outline:none;
|
||||
border-top-left-radius: 255px 15px;
|
||||
border-top-right-radius: 15px 225px;
|
||||
|
|
@ -32,6 +32,16 @@ input, select {
|
|||
.input-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
textarea{
|
||||
max-width: 100%;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
textarea.no-resize{
|
||||
resize: none;
|
||||
}
|
||||
|
||||
// TODO: make these classes implicit. We can find out what class to apply based on its type
|
||||
.paper-radio, .paper-check {
|
||||
display: block;
|
||||
|
|
@ -75,15 +85,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%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,32 @@
|
|||
@shadow-color-regular: hsla(0,0%,0%,.2);
|
||||
@shadow-color-hover: hsla(0,0%,0%,.3);
|
||||
|
||||
@shadow-small: 10px 19px 17px -13px @shadow-color-regular;
|
||||
@shadow-regular: 15px 28px 25px -18px @shadow-color-regular;
|
||||
@shadow-large: 20px 38px 34px -26px @shadow-color-regular;
|
||||
@shadow-hover: 2px 8px 8px -5px @shadow-color-hover;
|
||||
|
||||
.shadow {
|
||||
-webkit-box-shadow: 15px 28px 25px -18px hsla(0,0%,0%,.2);
|
||||
-moz-box-shadow: 15px 28px 25px -18px hsla(0,0%,0%,.2);
|
||||
box-shadow: 15px 28px 25px -18px hsla(0,0%,0%,.2);
|
||||
transition:all .5s ease;
|
||||
-webkit-box-shadow: @shadow-regular;
|
||||
-moz-box-shadow: @shadow-regular;
|
||||
box-shadow: @shadow-regular;
|
||||
transition: all .5s ease;
|
||||
&.shadow-large {
|
||||
-webkit-box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
|
||||
-moz-box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
|
||||
box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
|
||||
-webkit-box-shadow: @shadow-large;
|
||||
-moz-box-shadow: @shadow-large;
|
||||
box-shadow: @shadow-large;
|
||||
}
|
||||
&.shadow-small {
|
||||
-webkit-box-shadow: 10px 19px 17px -13px hsla(0,0%,0%,.2);
|
||||
-moz-box-shadow: 10px 19px 17px -13px hsla(0,0%,0%,.2);
|
||||
box-shadow: 10px 19px 17px -13px hsla(0,0%,0%,.2);
|
||||
-webkit-box-shadow: @shadow-small;
|
||||
-moz-box-shadow: @shadow-small;
|
||||
box-shadow: @shadow-small;
|
||||
}
|
||||
&.shadow-hover {
|
||||
&:hover{
|
||||
-webkit-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
-moz-box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
|
||||
-webkit-box-shadow: @shadow-hover;
|
||||
-moz-box-shadow: @shadow-hover;
|
||||
box-shadow: @shadow-hover;
|
||||
transform: translate(0, 2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue