From 012d8825aa09295e22b88f9c31f254a2fb438344 Mon Sep 17 00:00:00 2001 From: Louis Lazaris Date: Thu, 23 May 2019 00:27:57 -0400 Subject: [PATCH 01/33] Fixed markup for nested lists It's a common mistake, but HTML lists should be nested so that a list is in between the opening and closing tags for a given list item. I've corrected it in these examples. Most browsers handle it fine but it's best to use correct HTML, just in case there's a browser or platform that doesn't parse it correctly. --- docs/content/docs/content/lists.md | 90 +++++++++++++++++------------- 1 file changed, 51 insertions(+), 39 deletions(-) diff --git a/docs/content/docs/content/lists.md b/docs/content/docs/content/lists.md index e2bbdf6..41bbe41 100644 --- a/docs/content/docs/content/lists.md +++ b/docs/content/docs/content/lists.md @@ -9,23 +9,27 @@ description: PaperCSS Lists
  • Do this
  • Then this
  • Finally this
    • -
  • Then we'll go one deeper
    • -
      -
    1. Dillon
      2. -
    2. Francis
      3. +
    3. Then we'll go one deeper
        -
      1. What if we went...
        2. -
      2. One more deeper?
        3. -
          -
        1. DJ
          2. -
        2. Hanzel
          3. +
        3. Dillon
          4. +
        4. Francis
            -
          1. Five levels should be enough
            2. -
          2. Right?
            3. +
          3. What if we went...
            4. +
          4. One more deeper? +
              +
            1. DJ
              2. +
            2. Hanzel +
                +
              1. Five levels should be enough
                2. +
              2. Right?
                3. +
              +
              3. +
            +
          -
        +
      -
    +
  • But don't forget this
    • @@ -33,22 +37,26 @@ description: PaperCSS Lists @@ -68,23 +76,27 @@ description: PaperCSS Lists
  • Do this
  • Then this
  • Finally this
    • -
  • Then we'll go one deeper
    • -
      +
    1. Then we'll go one deeper +
      1. Dillon
        2. -
      2. Francis
        3. -
          -
        1. What if we went...
          2. -
        2. One more deeper?
          3. +
        3. Francis
            -
          1. DJ
            2. -
          2. Hanzel
            3. -
              -
            1. Five levels should be enough
              2. -
            2. Right?
              3. -
            +
          3. What if we went...
            4. +
          4. One more deeper? +
              +
            1. DJ
              2. +
            2. Hanzel +
                +
              1. Five levels should be enough
                2. +
              2. Right?
                3. +
              +
              3. +
            +
          -
        -
      +
      2. +
    +
  • But don't forget this
    • From c6da9aee812423e325576aaf986868ac4803e287 Mon Sep 17 00:00:00 2001 From: William Entriken Date: Tue, 30 Jul 2019 13:05:53 -0400 Subject: [PATCH 02/33] Fix styling of word GitHub --- docs/content/_index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/_index.md b/docs/content/_index.md index 001c899..d12862a 100644 --- a/docs/content/_index.md +++ b/docs/content/_index.md @@ -7,12 +7,12 @@ weight: -270 #### Download Download the latest version (1.6.1) using either of the links below. Or -download an older release via Github. +download an older release via GitHub.
    CSS File Minified CSS File - Github Releases + GitHub Releases
    #### NPM From cbbdce4d9e415aa85477b2e55da5cd8a0c2ea4d6 Mon Sep 17 00:00:00 2001 From: rhyneav Date: Sun, 18 Aug 2019 13:09:58 -0400 Subject: [PATCH 03/33] Update broken url --- docs/layouts/partials/nav/sidebar.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/layouts/partials/nav/sidebar.html b/docs/layouts/partials/nav/sidebar.html index eabf07a..99b137f 100644 --- a/docs/layouts/partials/nav/sidebar.html +++ b/docs/layouts/partials/nav/sidebar.html @@ -25,7 +25,7 @@ {{ end }}
    -

    Made with 💛 by Rhyne and some fantastic contributors!

    +

    Made with 💛 by Rhyne and some fantastic contributors!

    From fc54f0cf7fed5abc279eba705df257472607a98a Mon Sep 17 00:00:00 2001 From: Renato Byrro Date: Fri, 23 Aug 2019 15:21:43 -0300 Subject: [PATCH 04/33] Fix link to License in About page --- docs/content/about.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/about.md b/docs/content/about.md index 69d3ae3..314f54b 100644 --- a/docs/content/about.md +++ b/docs/content/about.md @@ -9,6 +9,6 @@ PaperCSS was originally made by [@rhyneav](https://github.com/rhyneav) to be som 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. -Feel free to use it for wireframes, webapps, blogs, or whatever else you can think of! It is licensed under the [ISC License](https://github.com/papercss/papercss/blob/master/license), so use it wherever you want to. +Feel free to use it for wireframes, webapps, blogs, or whatever else you can think of! It is licensed under the [ISC License](https://github.com/papercss/papercss/blob/master/LICENSE.md), so use it wherever you want to. If you are new to Git or SCSS, 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](https://github.com/papercss/papercss) for more info! From fc4ede380a6f493522ae7e6ed2ddc95998c89aff Mon Sep 17 00:00:00 2001 From: Kevin Koester Date: Fri, 10 Jul 2020 11:44:26 +0200 Subject: [PATCH 05/33] Fixes #202 Fixes Bug where the content would be aligned right next to the tabs on larger screens. See: https://github.com/papercss/papercss/issues/202 --- src/components/_tabs.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/_tabs.scss b/src/components/_tabs.scss index 1d8fb84..af55fe0 100644 --- a/src/components/_tabs.scss +++ b/src/components/_tabs.scss @@ -2,6 +2,7 @@ .content { display: none; padding: 0.75rem 0 0; + flex-basis: 100%; } input { From 5ee5960e849890275b9c4c70dc9b5b39d1bb8eb2 Mon Sep 17 00:00:00 2001 From: Jan Bajena Date: Thu, 30 Jul 2020 21:43:39 +0200 Subject: [PATCH 06/33] Support multiple tab components Hi, first of all thank you for your cool framework. I really have fun working with it :) I'm building an app for building flashcard sets in which I decided to use tabs component for switching between different languages. However I've noticed that current version assumes that there'll only be a single tab component on the page. I overcame it in my project by changing `=` (attribute equals) selector to `$=` (attribute ends with) selector. This allows me to generate different tab IDs for different flashcards, like this: ```ruby <% tab_name = "tabs_#{word.id}" %> <% tab1_id = "#{tab_name}_tab1" %> <% tab2_id = "#{tab_name}_tab2" %>

    <%= word.question %>

    <% if word.question_example %>

    <%= word.question_example %>

    <% end %>

    <%= word.answer %>

    <% if word.answer_example %>

    <%= word.answer_example %>

    <% end %>
    ``` Here's a video to present how it works after the change: https://www.loom.com/share/6de1e443314f44f49c7b91e9b5875c93 Hope someone finds it useful --- src/components/_tabs.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/_tabs.scss b/src/components/_tabs.scss index 1d8fb84..1c15e46 100644 --- a/src/components/_tabs.scss +++ b/src/components/_tabs.scss @@ -13,7 +13,7 @@ } @for $num from 1 through 5 { - &[id='tab#{$num}']:checked~div[id='content#{$num}'] { + &[id$='tab#{$num}']:checked~div[id$='content#{$num}'] { display: block; } } From 33ca19d77a63cd4c418553ce01978781f68a795d Mon Sep 17 00:00:00 2001 From: Rhyne Vlaservich Date: Sat, 1 Aug 2020 15:14:46 -0400 Subject: [PATCH 07/33] Fix gulp default command to start dev server --- gulpfile.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulpfile.js b/gulpfile.js index c27648e..9666978 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -64,6 +64,6 @@ gulp.task('lint-css', function() { })); }) -gulp.task('default', gulp.series('sass', 'minify-css', 'hugo-build')); +gulp.task('default', gulp.series('sass', 'minify-css', 'hugo-server')); gulp.task('build', gulp.series('sass', 'minify-css', 'hugo-build')); gulp.task('postinstall', gulp.series('sass', 'minify-css')); From 1570e3ba33b7e6a6418181ecfefdf7a562a85c3f Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Wed, 30 Jan 2019 12:36:11 +0100 Subject: [PATCH 08/33] Outline buttons --- docs/content/docs/components/buttons.md | 18 ++++++++++++++++++ package.json | 2 +- src/components/_buttons.scss | 22 +++++++++++++++++++++- src/core/_config.scss | 7 +++++++ 4 files changed, 47 insertions(+), 2 deletions(-) diff --git a/docs/content/docs/components/buttons.md b/docs/content/docs/components/buttons.md index 3a1efe5..8728105 100644 --- a/docs/content/docs/components/buttons.md +++ b/docs/content/docs/components/buttons.md @@ -53,3 +53,21 @@ Inspired by [Imperfect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX) ``` + +### Outline colors + + + + + +Danger + +#### Code: + +```html + + + + +Danger +``` \ No newline at end of file diff --git a/package.json b/package.json index 04d7aa2..33a0ba3 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "build": "node node_modules/gulp/bin/gulp.js build", "test": "echo \"Error: no test specified\" && exit 1", "postinstall": "gulp postinstall", - "stylelint": "node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'" + "stylelint": "node node_modules/stylelint/bin/stylelint.js 'src/**/*.scss'" }, "repository": { "type": "git", diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss index ca793f2..d68ace0 100644 --- a/src/components/_buttons.scss +++ b/src/components/_buttons.scss @@ -72,7 +72,6 @@ a { } } - @each $colorName, $color, $color-light, $color-text in $colors { .alert-#{$colorName} { background-color: $color-light; @@ -94,3 +93,24 @@ a { } } } + +@each $colorName, $color, $color-light, $color-text in $colors-outline { + button.btn-#{$colorName}, + .paper-btn.btn-#{$colorName}, + [type='button'].btn-#{$colorName} { + background-color: $white; + border-color: darken($color-light, 10%); + color: $color-text; + + &:hover { + border-color: $color; + background-color: $color-light; + } + + &:hover { + &:active { + background-color: darken($color-light, 10%); + } + } + } +} diff --git a/src/core/_config.scss b/src/core/_config.scss index d0d8ebd..a9fc21c 100644 --- a/src/core/_config.scss +++ b/src/core/_config.scss @@ -45,6 +45,13 @@ $colors: (primary, $primary, $primary-light, $primary-text), (warning, $warning, $warning-light, $warning-text), (danger, $danger, $danger-light, $danger-text), (muted, $muted, $muted-light, $muted-text); + +$colors-outline: (primary-outline, $primary, $primary-light, $primary), + (secondary-outline, $secondary, $secondary-light, $secondary-text), + (success-outline, $success, $success-light, $success-text), + (warning-outline, $warning, $warning-light, $warning-text), + (danger-outline, $danger, $danger-light, $danger-text), + (muted-outline, $muted, $muted-light, $muted-text); /* stylelint-enable */ /** From 800a5cd80f6b4f2066590e735d9a808e768ca995 Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Wed, 30 Jan 2019 12:49:36 +0100 Subject: [PATCH 09/33] Outline buttons - stylelint fix --- src/components/_buttons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss index d68ace0..814ebfd 100644 --- a/src/components/_buttons.scss +++ b/src/components/_buttons.scss @@ -103,8 +103,8 @@ a { color: $color-text; &:hover { - border-color: $color; background-color: $color-light; + border-color: $color; } &:hover { From 6f9f0ccda028928ceed1d828f9f5df3f8adf3038 Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Wed, 30 Jan 2019 15:49:57 +0100 Subject: [PATCH 10/33] 'paper-btn' class added to linkbutton example. Sorry I left it 1st time. --- docs/content/docs/components/buttons.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/docs/components/buttons.md b/docs/content/docs/components/buttons.md index 8728105..e64c0d9 100644 --- a/docs/content/docs/components/buttons.md +++ b/docs/content/docs/components/buttons.md @@ -60,7 +60,7 @@ Inspired by [Imperfect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX) -Danger +Danger #### Code: @@ -69,5 +69,5 @@ Inspired by [Imperfect Buttons](https://codepen.io/tmrDevelops/pen/VeRvKX) -Danger +Danger ``` \ No newline at end of file From 53ffaa02f7976a29dabd848df23d886b7101c2e7 Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Fri, 1 Feb 2019 17:36:54 +0100 Subject: [PATCH 11/33] outline colormap removed --- src/components/_buttons.scss | 14 +++++++++----- src/core/_config.scss | 7 ------- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/src/components/_buttons.scss b/src/components/_buttons.scss index 814ebfd..1f10d93 100644 --- a/src/components/_buttons.scss +++ b/src/components/_buttons.scss @@ -94,13 +94,17 @@ a { } } -@each $colorName, $color, $color-light, $color-text in $colors-outline { - button.btn-#{$colorName}, - .paper-btn.btn-#{$colorName}, - [type='button'].btn-#{$colorName} { +@each $colorName, $color, $color-light, $color-text in $colors { + button.btn-#{$colorName}-outline, + .paper-btn.btn-#{$colorName}-outline, + [type='button'].btn-#{$colorName}-outline { background-color: $white; border-color: darken($color-light, 10%); - color: $color-text; + @if $colorName == primary { + color: $color; + } @else { + color: $color-text; + } &:hover { background-color: $color-light; diff --git a/src/core/_config.scss b/src/core/_config.scss index a9fc21c..d0d8ebd 100644 --- a/src/core/_config.scss +++ b/src/core/_config.scss @@ -45,13 +45,6 @@ $colors: (primary, $primary, $primary-light, $primary-text), (warning, $warning, $warning-light, $warning-text), (danger, $danger, $danger-light, $danger-text), (muted, $muted, $muted-light, $muted-text); - -$colors-outline: (primary-outline, $primary, $primary-light, $primary), - (secondary-outline, $secondary, $secondary-light, $secondary-text), - (success-outline, $success, $success-light, $success-text), - (warning-outline, $warning, $warning-light, $warning-text), - (danger-outline, $danger, $danger-light, $danger-text), - (muted-outline, $muted, $muted-light, $muted-text); /* stylelint-enable */ /** From cf2deae2ea8c7edd0f0dbee16279d1c9546f2b41 Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Thu, 31 Jan 2019 19:07:06 +0100 Subject: [PATCH 12/33] Switch components --- docs/content/docs/components/forms.md | 198 +++++++++++++++++++++++ src/components/_forms.scss | 218 ++++++++++++++++++++++++++ 2 files changed, 416 insertions(+) diff --git a/docs/content/docs/components/forms.md b/docs/content/docs/components/forms.md index faa56f1..214fb79 100644 --- a/docs/content/docs/components/forms.md +++ b/docs/content/docs/components/forms.md @@ -64,6 +64,105 @@ description: PaperCSS Forms This is the second check +
    + Some Switch +

    Default - standard outline style (square & circle)

    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +

    Type2 - inline style (square & circle)

    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +

    Type3 - tile style (square & circle)

    + + + +
    #### Code: @@ -124,4 +223,103 @@ description: PaperCSS Forms This is the second check +
    + Some Switch +

    Default - standard outline style (square & circle)

    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +

    Type2 - inline style (square & circle)

    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +

    Type3 - tile style (square & circle)

    + + + +
    ``` diff --git a/src/components/_forms.scss b/src/components/_forms.scss index 0e5887e..902146a 100644 --- a/src/components/_forms.scss +++ b/src/components/_forms.scss @@ -119,6 +119,224 @@ select { } } } + + .paper-switch-label, + .paper-switch-2-label { + float:left; + cursor: pointer; + } + + .paper-switch-label { + margin: -6px 10px 0 0; + } + + .paper-switch-2-label { + margin: 0 10px 0 0; + } + + .paper-switch, + .paper-switch-2 { + float: left; + position: relative; + display: block; + margin: 0 10px 0 0; + + input { + opacity: 0; + width: 0; + height: 0; + + &:checked + .paper-switch-slider { + background-color: #d0dbc2; + } + + &:checked + .paper-switch-slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); + } + + &:focus + .paper-switch-slider { + box-shadow: 0 0 1px #2196f3; + } + + } + + .paper-switch-slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + -webkit-transition: .4s; + transition: .4s; + border: 2px solid $primary; + border-bottom-left-radius: 15px 255px; + border-bottom-right-radius: 225px 15px; + border-top-left-radius: 255px 15px; + border-top-right-radius: 15px 225px; + + &::before { + position: absolute; + content: ''; + left: 4px; + -webkit-transition: .4s; + transition: .4s; + background: $secondary; + border-bottom-left-radius: 15px 255px; + border-bottom-right-radius: 225px 15px; + border-top-left-radius: 255px 15px; + border-top-right-radius: 15px 225px; + } + + } + + .paper-switch-slider.round { + border: 2px solid $primary; + border-bottom-left-radius: .7rem 1rem; + border-bottom-right-radius: 1rem .9rem; + border-top-left-radius: 1rem 1rem; + border-top-right-radius: 1rem .6rem; + + &::before { + left: 4px; + background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20viewBox%3D'0%200%20100%20100'%3E%3Cpath%20fill%3D'%230071de'%20d%3D'M49.346,46.341c-3.79-2.005,3.698-10.294,7.984-8.89%20c8.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%20c9.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%20c-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%20c-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%20c3.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%20c0.643,4.698,0.646,10.775-3.811,13.746'%3E%3C/path%3E%3C/svg%3E") left center no-repeat; + border-bottom-left-radius: .7rem 1rem; + border-bottom-right-radius: 1rem .9rem; + border-top-left-radius: 1rem 1rem; + border-top-right-radius: 1rem .6rem; + } + + } + + } + + .paper-switch { + width: 60px; + height: 12px; + + .paper-switch-slider { + + &::before { + height: 20px; + width: 20px; + bottom: -6px; + } + + } + + .paper-switch-slider.round { + + &::before { + height: 23px; + width: 23px; + bottom: -7px; + } + + } + + } + + .paper-switch-2 { + width: 50px; + height: 22px; + + .paper-switch-slider { + + &::before { + height: 14px; + width: 14px; + bottom: 2px; + } + + } + + .paper-switch-slider.round { + + &::before { + height: 14px; + width: 14px; + bottom: 2px; + } + + } + + } + + .paper-switch-tile { + float: left; + -webkit-perspective: 1000px; + perspective: 1000px; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + display: block; + width: 80px; + height: 80px; + position: relative; + margin: 40px 0 0 40px; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + cursor: pointer; + + &:hover { + + .paper-switch-tile-card { + -webkit-transform: rotateX(30deg); + transform: rotateX(30deg); + box-shadow: 2px 8px 4px -5px rgba(0,0,0,.2); + } + + & :checked + .paper-switch-tile-card { + transform: rotateX(150deg); + -webkit-transform: rotateX(150deg); + background-color:transparent; + box-shadow: 0px 10px 15px -15px rgba(0,0,0,.9); + } + + } + + input { + display: none; + + &:checked + .paper-switch-tile-card{ + transform: rotateX(180deg); + -webkit-transform: rotateX(180deg); + } + + } + + } + + .paper-switch-tile-card { + position: relative; + height: 100%; + width: 100%; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-transition: all 600ms; + transition: all 600ms; + border-color: transparent; + background-color: transparent; + + div { + position: absolute; + height: 100%; + width: 100%; + text-align: center; + line-height: 70px; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + box-shadow: 2px 8px 8px -5px rgba(0,0,0,.3); + } + + .paper-switch-tile-card-back { + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); + } + + } + } fieldset.form-group { From ea2635161d71ad951ba08b888fbd40ab79b89da5 Mon Sep 17 00:00:00 2001 From: Phreshhh Date: Thu, 31 Jan 2019 19:44:16 +0100 Subject: [PATCH 13/33] Switch components - stylelint fix 1 :) --- docs/content/docs/components/forms.md | 4 +- src/components/_forms.scss | 69 ++++++++++++--------------- 2 files changed, 32 insertions(+), 41 deletions(-) diff --git a/docs/content/docs/components/forms.md b/docs/content/docs/components/forms.md index 214fb79..dc14505 100644 --- a/docs/content/docs/components/forms.md +++ b/docs/content/docs/components/forms.md @@ -140,7 +140,7 @@ description: PaperCSS Forms
    -

    Type3 - tile style (square & circle)

    +

    Type3 - Tile style

    -

    Type3 - tile style (square & circle)

    +

    Type3 - Tile style