From 203630eaccff71882a5a461e189f86ed4cb0032e Mon Sep 17 00:00:00 2001 From: Fraham Date: Thu, 2 Nov 2017 16:08:22 +0000 Subject: [PATCH 01/35] Adding colours and hover:active to buttons --- index.html | 15 +++++++++++++++ src/buttons.less | 25 +++++++++++++++++++++---- src/colors.less | 6 ++++++ 3 files changed, 42 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 6b0934f..0239fe2 100644 --- a/index.html +++ b/index.html @@ -215,6 +215,21 @@ </div> </div> +

Colors

+ + + + + +
+ 
+  <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>
+
+

Forms

diff --git a/src/buttons.less b/src/buttons.less index 90fa550..7458150 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -1,15 +1,16 @@ -button, .paper-btn { +button, .paper-btn, [type="button"] { + .shadow; align-self:center; background:transparent; - transition:all .5s ease; + transition:background-color .1s ease; color: @primary; + display: inline; outline:none; border:solid 2px @primary; .border; font-size: 1rem; padding: .75rem .75rem; cursor: pointer; - .shadow; &.btn-large { .shadow-large; font-size:2rem; @@ -43,4 +44,20 @@ a { text-decoration: none; color: @primary; } -} \ No newline at end of file +} + +.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(); \ No newline at end of file diff --git a/src/colors.less b/src/colors.less index 8aae2b6..c75b210 100644 --- a/src/colors.less +++ b/src/colors.less @@ -11,6 +11,12 @@ @warning-light: lighten(@warning, 30%); @danger-light: lighten(@danger, 45%); +@primary-text: #FFF; +@secondary-text: @primary; +@success-text: @primary; +@warning-text: @primary; +@danger-text: @primary; + @colors: primary, secondary, success, warning, danger; .make-text-color-classes(@i: length(@colors)) when (@i > 0) { From da5428e495cf8293d3afd32b0fe95cd436c61c37 Mon Sep 17 00:00:00 2001 From: Fraham Date: Fri, 3 Nov 2017 12:51:23 +0000 Subject: [PATCH 02/35] Fix @muted-text issue --- src/colors.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/colors.less b/src/colors.less index 191b0ef..2ecfc36 100644 --- a/src/colors.less +++ b/src/colors.less @@ -19,6 +19,7 @@ @success-text: @primary; @warning-text: @primary; @danger-text: @primary; +@muted-text: @primary; @white-dark: rgba(0, 0, 0, .03); From ef5824da814a1ba4066cfacc82722b45ef6e86d8 Mon Sep 17 00:00:00 2001 From: Fraham Date: Sun, 5 Nov 2017 16:47:38 +0000 Subject: [PATCH 03/35] Shadow issue fixed --- src/buttons.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/buttons.less b/src/buttons.less index db84276..e1babfc 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -2,7 +2,7 @@ button, .paper-btn, [type="button"] { .shadow; align-self:center; background:transparent; - transition:background-color .1s ease; + transition:all .5s ease, background-color .1s ease; color: @primary; display: inline; outline:none; From 2782d67e85f84862bb92e45412c6b651ec72ad14 Mon Sep 17 00:00:00 2001 From: Fraham Date: Mon, 6 Nov 2017 20:33:02 +0000 Subject: [PATCH 04/35] Fixes #14 --- src/borders.less | 2 +- src/code.less | 2 +- src/colors.less | 4 +++- src/container.less | 2 +- src/forms.less | 2 +- src/popovers.less | 4 ++-- 6 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/borders.less b/src/borders.less index 3463b3d..3082295 100644 --- 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; diff --git a/src/code.less b/src/code.less index c0724ec..043867c 100644 --- 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; } diff --git a/src/colors.less b/src/colors.less index 0ce528d..1017834 100644 --- a/src/colors.less +++ b/src/colors.less @@ -13,7 +13,9 @@ @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); +@white: rgba(255, 255, 255, 1); +@main-background: rgba(255, 255, 255, 1); @colors: primary, secondary, success, warning, danger, muted; diff --git a/src/container.less b/src/container.less index 600b524..e2364cd 100644 --- 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; diff --git a/src/forms.less b/src/forms.less index 5d01803..e75355f 100644 --- 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; diff --git a/src/popovers.less b/src/popovers.less index 4b0d727..ae14931 100644 --- a/src/popovers.less +++ b/src/popovers.less @@ -23,8 +23,8 @@ min-width: 80px; font-size: 0.7em; text-align: center; - color: #fff; - background: rgba(0,0,0,0.7); + color: @white; + background: @white-dark; transition: opacity .25s ease-out; transform: translateX(-50%) translateY(-100%); .border; From 1151c6671b045102cd762e4074d3dcdfc7d56b74 Mon Sep 17 00:00:00 2001 From: rhyneav Date: Tue, 7 Nov 2017 09:59:28 -0500 Subject: [PATCH 05/35] Update README for contributing to develop branch --- README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c2e85b4..b546c56 100644 --- a/README.md +++ b/README.md @@ -42,18 +42,21 @@ Here's the full workflow for customization: - 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 ## Contributing -This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be afraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process. +This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be xafraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process. Similar to customizing, make sure you have Git, Node, and NPM on your system. - fork the repo via the fork button in the upper left - 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` +- 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` ## Credits Shouts outs to Tiffany Rayside for creating Imperfect Buttons, which was an inspiration for this project. https://codepen.io/tmrDevelops/pen/VeRvKX From 0d1156edadd6f8e6798a1719931aee04c50dc7b0 Mon Sep 17 00:00:00 2001 From: rhyneav Date: Tue, 7 Nov 2017 10:12:03 -0500 Subject: [PATCH 06/35] Add more details to commiting documentation --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index b546c56..9fd1127 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ 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` +- 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_ From dd310fa00222a21650dee220b2ce32751222982f Mon Sep 17 00:00:00 2001 From: rhyneav Date: Tue, 7 Nov 2017 10:14:26 -0500 Subject: [PATCH 07/35] fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9fd1127..d035467 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ Here's the full workflow for customization: - 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 ## Contributing -This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be xafraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process. +This project is open source and contributions are very welcomed. It is also as beginner friendly as possible, so don't be afraid to jump in if you've never contributed to any Git project before! Feel free to reach out if you are new and need help with the process. Similar to customizing, make sure you have Git, Node, and NPM on your system. - fork the repo via the fork button in the upper left From 88eb6c2f20f4733859d5e25a5b873f59690fc38f Mon Sep 17 00:00:00 2001 From: Fraham Date: Tue, 7 Nov 2017 15:39:56 +0000 Subject: [PATCH 08/35] Refactor so that it follows the colour standard --- src/badges.less | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/src/badges.less b/src/badges.less index bfd7f3c..2bf16c7 100644 --- 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; - } -} \ No newline at end of file +.make-badge-color-classes(); \ No newline at end of file From 832fe78226da209ad7242613e19fddae2148cd1c Mon Sep 17 00:00:00 2001 From: Fraham Date: Tue, 7 Nov 2017 15:40:17 +0000 Subject: [PATCH 09/35] Adding cards and badges to the summary --- index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 0885f1d..5cbbc09 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + PaperCSS · the less formal CSS framework @@ -53,6 +53,8 @@
  • Code
  • Tables
  • Popovers
    • +
  • Cards
    • +
  • Badges
  • Colors
  • Borders & shadows
  • Utilities
    • @@ -632,7 +634,7 @@ function add(x, y) { <button popover="Popover on top" popover-position="top">Popover on top and on a button!</button>
    - +

    Cards

    From a40bdddba686e6aab60aef65c21a8ad8bc6fc923 Mon Sep 17 00:00:00 2001 From: Fraham Date: Wed, 8 Nov 2017 17:47:03 +0000 Subject: [PATCH 10/35] Fix summary for cards --- index.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 5cbbc09..0f8dedb 100644 --- a/index.html +++ b/index.html @@ -635,8 +635,7 @@ function add(x, y) {
    -
    -
    +

    Cards

    Full card example

    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.

    @@ -749,7 +748,7 @@ function add(x, y) {
    -
    +

    Badges

    Default

    You can customize badges colors with secondary, success, warning, danger classes.

    From 02819a9a8c47616b2e1c4f02ac307b15495e51a2 Mon Sep 17 00:00:00 2001 From: Viktor Vincze Date: Mon, 13 Nov 2017 15:38:57 +0100 Subject: [PATCH 11/35] Shorter popover attributes --- index.html | 26 ++++----- src/popovers.less | 142 +++++++++++++++++++++++++--------------------- 2 files changed, 91 insertions(+), 77 deletions(-) diff --git a/index.html b/index.html index 8c6d9cd..bb4a3f4 100644 --- a/index.html +++ b/index.html @@ -20,8 +20,8 @@ - - + + @@ -611,42 +611,42 @@ function add(x, y) {

    Popovers

    Basic usage

    -

    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.

    +

    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.

    -

    Popover left position

    +

    Popover left position

    -

    Popover top position

    +

    Popover top position

    -

    Popover bottom position

    +

    Popover bottom position

    -

    Popover right position

    +

    Popover right position

    -<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>
    +<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>

    But you can also popover on pretty much any element you want, it can be on a button, on a table cell, ...

    - + 
    -<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>
    diff --git a/src/popovers.less b/src/popovers.less index ae14931..4c94bd6 100644 --- 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: @white-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%); + } } From 23e6e895e2694f797f260bbabc0165384c62bb3b Mon Sep 17 00:00:00 2001 From: Viktor Vincze Date: Mon, 13 Nov 2017 17:29:46 +0100 Subject: [PATCH 12/35] Restore old background color --- src/colors.less | 1 + src/popovers.less | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/colors.less b/src/colors.less index 5f126c9..2b748b4 100644 --- a/src/colors.less +++ b/src/colors.less @@ -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); diff --git a/src/popovers.less b/src/popovers.less index 4c94bd6..eca9183 100644 --- a/src/popovers.less +++ b/src/popovers.less @@ -25,7 +25,7 @@ font-size: 0.7em; text-align: center; color: @white; - background: @white-dark; + background: @light-dark; transition: opacity .25s ease-out; transform: translateX(-50%) translateY(-100%); .border; From ca0e42c515d6dd96e52391db33f09472f451d74a Mon Sep 17 00:00:00 2001 From: Viktor Vincze Date: Mon, 13 Nov 2017 17:43:04 +0100 Subject: [PATCH 13/35] Fixes #1 --- src/forms.less | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/forms.less b/src/forms.less index 8c0c9d1..9dca3c9 100644 --- a/src/forms.less +++ b/src/forms.less @@ -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,"; + @escaped-svg: escape(""); + @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,"; + @escaped-svg: escape(""); + @check-fill: "data:image/svg+xml,@{escaped-svg}"; background: url(@check-fill) left center no-repeat; } } From 4145220a2d0f29c04dc63951f7a856e2d8b4a1c6 Mon Sep 17 00:00:00 2001 From: Maciej Matuszewski Date: Sun, 19 Nov 2017 14:40:28 +0100 Subject: [PATCH 14/35] Use variable references for shadows --- src/shadows.less | 35 ++++++++++++++++++++++------------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/src/shadows.less b/src/shadows.less index 87999fa..645ee59 100644 --- 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 4px -6px @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); + transform: translate(0, -3px); + -webkit-box-shadow: @shadow-hover; + -moz-box-shadow: @shadow-hover; + box-shadow: @shadow-hover; } } } From 1907ea6e69d9e4ddfb99a8c53540a36345362cfe Mon Sep 17 00:00:00 2001 From: Maciej Matuszewski Date: Sun, 19 Nov 2017 14:58:19 +0100 Subject: [PATCH 15/35] Add translate to hovered elements with shadow --- src/shadows.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/shadows.less b/src/shadows.less index 645ee59..3627713 100644 --- a/src/shadows.less +++ b/src/shadows.less @@ -4,7 +4,7 @@ @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 4px -6px @shadow-color-hover; +@shadow-hover: 2px 8px 8px -5px @shadow-color-hover; .shadow { -webkit-box-shadow: @shadow-regular; @@ -23,10 +23,10 @@ } &.shadow-hover { &:hover{ - transform: translate(0, -3px); -webkit-box-shadow: @shadow-hover; -moz-box-shadow: @shadow-hover; box-shadow: @shadow-hover; + transform: translate(0, 2px); } } } From 53aaa4c3084c716b0de0dcec6ba5f89c666bfbe1 Mon Sep 17 00:00:00 2001 From: Maciej Matuszewski Date: Sun, 19 Nov 2017 14:58:39 +0100 Subject: [PATCH 16/35] Remove duplicated :hover selector --- src/buttons.less | 4 +--- src/cards.less | 7 ++----- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/src/buttons.less b/src/buttons.less index f056a3d..0a60031 100644 --- a/src/buttons.less +++ b/src/buttons.less @@ -10,6 +10,7 @@ button, .paper-btn, input[type="button"] { padding: .75rem .75rem; cursor: pointer; .shadow; + .shadow-hover; &.btn-large { .shadow-large; font-size:2rem; @@ -24,9 +25,6 @@ button, .paper-btn, input[type="button"] { display: block; width: 100%; } - &:hover{ - .shadow-hover; - } &.disabled, &[disabled]{ .disabled; } diff --git a/src/cards.less b/src/cards.less index f02c5d9..a259a44 100644 --- 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 { From 62bdc57e2d0d319fb9f0b09c916ff0d98bae4020 Mon Sep 17 00:00:00 2001 From: Afzal Sayed Date: Sun, 19 Nov 2017 21:22:55 +0530 Subject: [PATCH 17/35] Created and added favicon --- img/favicon.ico | Bin 0 -> 16958 bytes index.html | 3 +++ 2 files changed, 3 insertions(+) create mode 100644 img/favicon.ico diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..fe3d5588ba437f174d9bb5b0c6c4f4bd44fc179d GIT binary patch literal 16958 zcmeI3Sxl5y6vxM>KH7)sOZ!lhKG^iZrph92xQoc5fD0fXf(nc%i?|?)f`H3lT&EJS zYSkvFpvA4VMFklZr8TKq6C13x7NexpT4Q1&r|19a9fz&G2c0S7^dp!1&E?$T``z^{ z_cNJ#@sGd1iGROu>Oab4>T5EY`g7tUQ!XczzpksPscE?XsL?dse`J?wL-|PqDM&KP}t2(;OWW`<{eHDr-(%aAxiL z^;BoGQElzH|1{Oq*3#LtHFW08S^9Lx4x`O@?2wd6BF}yBZRO#^Jp6jrb*`??7>}5j z5*~@{Z+Gv$Jw9OK&BGqbzjN2FKD?Iw;;H-*)26?}Ytn5`_i{3X9yHKRYMK>g_vN ztN(A@xIx$}l$|_%2257xU9RZ=WV2bD|MKMq8ZmN|oga4oGbhdgSMW0f^XsjD=Pz6! z_z6`1zX|;8!?D5_p|k#1pFU%^N6`jv0zdcXR$cyM$Bwt*pT^_AwYAl03xF%e|J0({U%Pf)8~&&_p#Kx+%w>K({V#t_ft?>ZaKfB9Za@Cx z;%AfY`oB6azYTxtf`x9+AH{JhU4HBpO8-NimY(kR{Mf^F`EypRwDV*9&r3?CtJkj4 zvE#>S*X}*Uwj{0NIMSvqo2j(4jH;`v>A{2MZnu#u_J71Ib@`Vq&!M5rt@MAi!C;Q* zA#RBAfX^!7Gs+R`LpwD#Hj3N975t%7!nFB0Zfo!PHgE+$eE+)kZ)R4Oogd>oIAk)dTAfE*wr-=nd-u`7LlvA3(Pz7M z(*{eiVIN}rD}Lkwfq``Y{(Y@BQ2aP|Ac<*8WO05$*Z&E>AGpDRxV>fL#x6Nv7b0b{ zey!@D9_GTK%E~V5IsU;F{5Zp*YyUd(qhI&!|M#&B|In=23HCNXTSUjiI%0Nt?+SjL zW9be*>Qo&)+U2u5{^9iL)5aR3=D|QOZ+iUrv7<<*_lh6SC>hfdSqXoJ!}tgPiIZP- z`rPdcF%PiDDt_3T_4W1b#X5Xe{P4L-m?W|i{;b6>*MIPTed?PI&)ii(aA>G~4xny@ z#u}jbF-Ij#5?Kj9`^s6*dA|OE;rNM@UEy{p$DCK|;PbWPiw-jF3lx7q;3TKaVC{(~zlBErru?f<}_AgA$TPU`X_-lO=@hvntv?Ypeg&)2X2NS_Sy zvd{lP-oA9Xp`lY*$3oTr(9tAgS|TgrFM7$3b9^PGrH+r=>HW={Hz_DM#LkZYhc?uS zn<#$h=n^K0tc2fU*=X;7Kh|Rki`E*0F9G zoX?a>m?W|i{?f8CJ3s2-tY%t9CauoTe_{J>pcN}~DRJ&RBTj}fqPUS`{R;`5Of4-f zI{0?~H{uKuCW)+szoMd&hH(EmGU?ufeG<=uKOa5PVuz6Gf1D+jFiB)3{CDpBN_l0yx3cfmJ<5^dS?@o^ zI+B!IwUOcvpE~WXgh?VRpd`^Sni z2G8^+syy~ literal 0 HcmV?d00001 diff --git a/index.html b/index.html index bb4a3f4..18a89ab 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,9 @@ PaperCSS · the less formal CSS framework + + + From 7c89b5a0a2e42de0b526e111d1c470eafe57d993 Mon Sep 17 00:00:00 2001 From: Afzal Sayed Date: Mon, 20 Nov 2017 21:20:37 +0530 Subject: [PATCH 18/35] Added support for textarea --- index.html | 8 ++++++++ src/fonts.less | 2 +- src/forms.less | 2 +- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index bb4a3f4..6db196b 100644 --- a/index.html +++ b/index.html @@ -299,6 +299,10 @@
    +
    + + +
    +
    + + +