Merge remote-tracking branch 'refs/remotes/rhyneav/develop'

2024-06-02 05:52:30 +02:00 · 2017-11-21 19:00:22 +00:00 · 2017-11-21 19:00:22 +00:00 · e98f8deaab
parent a26d9fd7e1 67029e5c78
commit e98f8deaab
13 changed files with 282 additions and 149 deletions
--- a/PULL_REQUEST_TEMPLATE.md
+++ b/PULL_REQUEST_TEMPLATE.md
@ -0,0 +1,15 @@
+## Brief description
+
+...
+
+## Developer Certificate of Origin
+
+- [ ] I certify that these changes according to the Developer Certificate of Origin 1.1 as described at <https://developercertificate.org/>.
+
+## Sample pictures
+
+...
+
+## Further details
+
+...
--- a/README.md
+++ b/README.md
@ -3,20 +3,42 @@

 ## Demo & Docs
 View the demo & docs at [getpapercss.com](https://www.getpapercss.com)
+
 ![Preview](/img/screenshots/preview.gif)

 ## Download
 [![Download](/img/screenshots/download.PNG)][download]
 [![Download](/img/screenshots/download-minified.PNG)][download-minified]

-## About
-I got tired of mODerN STylEs and clean pages on the internet. I also wanted to learn more about Flexbox and Less. So I made PaperCSS to solve these two challenges of mine :)
+### NPM
+PaperCSS is now available on NPM as of version 1.1.0. Install with `npm install papercss --save` and find the CSS in:
+- node_modules/papercss/dist/paper.css
+- node_modules/papercss/dist/paper.min.css

-The goal of PaperCSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it.
+### CDN
+Don't want to download it? That's cool. You can just link to PaperCSS via unpkg's CDN. You can use either:
+- https://unpkg.com/papercss@1.1.0/dist/paper.css
+- https://unpkg.com/papercss@1.1.0/dist/paper.min.css

-While I'm proud of how it's turned out so far, I think there's a lot that can still be done to make it better. Such things as refactoring, adding more utility classes and more border types (like dashed/dotted) could really polish off this framework. That's why it's open sourced and available for pull requests!
-
-If you are new to Git or Less, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process.
+## Quick Start
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <link rel="stylesheet" href="https://unpkg.com/papercss@1.1.0/dist/paper.min.css">
+  <title>Document</title>
+</head>
+<body>
+  <div class="paper container">
+    <h1>Some Fresh Title</h1>
+    <p>This is where some content would go.</p>
+  </div>
+</body>
+</html>
+```

 ## Customizing
 To customize PaperCSS, clone the Git repo, run `npm install`, and make any chages to the .less files within /src
@ -36,7 +58,7 @@ Here's the full workflow for customization:

 ### Adding a new color
 - Go to file `src/color.less`
- Add a new varable and assign it to a color hex value
+- Add a new variable and assign it to a color hex value
 - Add the new variable to the list of colors
 - Add a new variable for the light variation
 - Once `npm start` or `npm run build` has been run then it will create the new css so that the new color can be used as a text, border or background
@ -49,14 +71,27 @@ Similar to customizing, make sure you have Git, Node, and NPM on your system.
 - run `git clone https://github.com/[your_username]/papercss.git`
 - change directories to papercss `cd papercss`
 - run `npm install`
- create a new branch for your contribution `git checkout -b my-feature`
+- switch to the develop branch `git checkout develop`. This is the branch where features are added. Checking it out will set up the remote tracking to the develop branch on Github.
+- create a new branch for your feature off of the develop branch `git checkout -b feature-thing develop`. Please be sure to prepend your new feature branch with "feature-"
 - Start the local server to view changes with `npm start`
 - _code and stuff_
 - Once done, commit and push your changes to your fork
 - Finally, open a pull request on this repo. Be sure to include any pictures and details on what you changed!
+- Once approved, your changes will be merged to the develop branch where it will eventually be added to a release that ends up in the master branch. Check out [Vincent Driessen's blog post](http://nvie.com/posts/a-successful-git-branching-model/), [GitFlow](https://datasift.github.io/gitflow/IntroducingGitFlow.html), or [#27](https://github.com/rhyneav/papercss/issues/27) for more details on how this works.
+
+Note: If you have a hotfix, create your hotfix branch off of the master branch instead of develop: `git checkout -b hotfix-1.X.X master`
+
+## About
+I got tired of mODerN STylEs and clean pages on the internet. I also wanted to learn more about Flexbox and Less. So I made PaperCSS to solve these two challenges of mine :)
+
+The goal of PaperCSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as `paper-button`. Because of this, adding PaperCSS to a markdown generated page should instantly paper-ize it.
+
+While I'm proud of how it's turned out so far, I think there's a lot that can still be done to make it better. Such things as refactoring, adding more utility classes and more border types (like dashed/dotted) could really polish off this framework. That's why it's open sourced and available for pull requests!
+
+If you are new to Git or Less, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process.

 ## Credits
 Shouts outs to Tiffany Rayside for creating Imperfect Buttons, which was an inspiration for this project. https://codepen.io/tmrDevelops/pen/VeRvKX

-[download]: https://github.com/rhyneav/papercss/releases/download/v1.0.0/paper.css
-[download-minified]: https://github.com/rhyneav/papercss/releases/download/v1.0.0/paper.min.css
+[download]: https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.css
+[download-minified]: https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.min.css
--- a/index.html
+++ b/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 @@
 &lt;button class="disabled"&gt;Disabled&lt;/button&gt;
 &lt;button disabled&gt;Disabled&lt;/button&gt;</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>
+  &lt;input type="button" class="paper-btn btn-primary" value="Primary"/&gt;
+  &lt;input type="button" class="btn-secondary" value="Secondary"/&gt;
+  &lt;button class="btn-success"&gt;Success&lt;/button&gt;
+  &lt;button class="btn-warning"&gt;Warning&lt;/button&gt;
+  &lt;button class="btn-danger"&gt;Danger&lt;/button&gt;
+          </pre>
+        </div>
    </div>
    <div id="forms" class="section">
      <h2>Forms</h2>
@ -594,47 +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>
-&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="colors" class="section">
-    <div 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>
@ -700,7 +715,7 @@ function add(x, y) {
            <p class="card-text">You can also place image on the bottom of the card.</p>
            <button>Let me go here!</button>
          </div>
-          <img class="image-bottom" src="http://via.placeholder.com/550x250" alt="Card example image">
+          <img class="image-bottom" src="https://unsplash.it/550/250" alt="Card example image">
        </div>
      </div>

@ -713,7 +728,7 @@ function add(x, y) {
    &lt;p class="card-text"&gt;You can also place image on the bottom of the card.&lt;/p&gt;
    &lt;button&gt;Let me go here!&lt;/button&gt;
  &lt;/div&gt;
-  &lt;img class="image-bottom" src="http://via.placeholder.com/550x250" alt="Card example image"&gt;
+  &lt;img class="image-bottom" src="https://unsplash.it/550/250" alt="Card example image"&gt;
 &lt;/div&gt;</pre>
      </div>

@ -747,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>
@ -1042,13 +1057,47 @@ function add(x, y) {
        </div>
    </div>
    <div class="section">
-      <h2 id="download">Download</h2>
+      <h2 id="download">Download and Link</h2>
+      <h4>Download</h4>
      <p>Download the latest version (1.1.0) using either of the links below. Or download an older release via Github.</p>
      <div class="row flex-spaces text-center">
        <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.css">CSS File</a>
        <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases/download/v1.1.0/paper.min.css">Minified CSS File</a>
        <a class="paper-btn margin" href="https://github.com/rhyneav/papercss/releases">Github Releases</a>
      </div>
+      <h4>NPM</h4>
+      <p>PaperCSS is now available on NPM as of version 1.1.0. Install with <code>npm install papercss --save</code> and find the CSS in:</p>
+      <ul>
+        <li>node_modules/papercss/dist/paper.css</li>
+        <li>node_modules/papercss/dist/paper.min.css</li>
+      </ul>
+      <h4>CDN</h4>
+      <p>Don't want to download it? That's cool. You can just link to PaperCSS via <a href="https://unpkg.com/#/">unpkg's CDN</a>. You can use either:</p>
+      <ul>
+        <li><a href="https://unpkg.com/papercss@1.1.0/dist/paper.css">https://unpkg.com/papercss@1.1.0/dist/paper.css</a></li>
+        <li><a href="https://unpkg.com/papercss@1.1.0/dist/paper.min.css">https://unpkg.com/papercss@1.1.0/dist/paper.min.css</a></li>
+      </ul>
+      <p>Here's a quck snippet to get started with PaperCSS:</p>
+      <div class="docs">
+        <pre>
+&lt;!DOCTYPE html&gt;
+&lt;html lang=&quot;en&quot;&gt;
+&lt;head&gt;
+  &lt;meta charset=&quot;UTF-8&quot;&gt;
+  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
+  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
+  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/papercss@1.1.0/dist/paper.min.css&quot;&gt;
+  &lt;title&gt;Document&lt;/title&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;div class=&quot;paper container&quot;&gt;
+    &lt;h1&gt;Some Fresh Title&lt;/h1&gt;
+    &lt;p&gt;This is where some content would go.&lt;/p&gt;
+  &lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+      </div>
+      <h4>Build it Yourself</h4>
      <p>If you'd rather customize things, you can build the CSS yourself via the git repo</p>
      <ol>
        <li><code>git clone [repo url]</code></li>
@ -1066,7 +1115,7 @@ function add(x, y) {
      <p>If you are new to Git or Less, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process. Check out the Git repo for more info!</p>
    </div>
    <div class="row flex-right">
-      <p>Made with 💛 by <a href="https://vlaservi.ch" target="_blank">Rhyne</a></p>
+      <p>Made with 💛 by <a href="https://vlaservi.ch" target="_blank">Rhyne</a> and some <a href="https://github.com/rhyneav/papercss/graphs/contributors">fantastic contributors</a>!</p>
    </div>
  </div>
 </body>
--- a/src/badges.less
+++ b/src/badges.less
@ -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();
--- a/src/borders.less
+++ b/src/borders.less
@ -41,7 +41,7 @@
    border: 2px solid @primary;
 }
 .border-white {
-    border-color: #FFF;
+    border-color: @white;
 }
 .border-dotted {
    border-style: dotted;
--- a/src/buttons.less
+++ b/src/buttons.less
@ -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,9 +27,6 @@ button, .paper-btn, input[type="button"] {
        display: block;
        width: 100%;
    }
-    &:hover{
-        .shadow-hover;
-    }
    &.disabled, &[disabled]{
        .disabled;
    }
@ -46,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();
--- a/src/cards.less
+++ b/src/cards.less
@ -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 {
--- a/src/code.less
+++ b/src/code.less
@ -8,7 +8,7 @@ code {
 kbd {
    padding: 2px 4px;
    font-size: 80%;
-    color: #fff;
+    color: @white;
    background-color: @primary;
    border-radius: 3px;
 }
--- a/src/colors.less
+++ b/src/colors.less
@ -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;

--- a/src/container.less
+++ b/src/container.less
@ -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;
--- a/src/forms.less
+++ b/src/forms.less
@ -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;
        }
    }
--- a/src/popovers.less
+++ b/src/popovers.less
@ -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%);
+  }
 }
--- a/src/shadows.less
+++ b/src/shadows.less
@ -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);
        }
    }
 }