From e21ea5cc8872565863b0eb43c9108fd4a2d38a1c Mon Sep 17 00:00:00 2001 From: Afzal Sayed Date: Fri, 24 Nov 2017 22:16:11 +0530 Subject: [PATCH 1/7] Adding a back to top button feature --- index.html | 6 ++++-- src/back2top.less | 20 ++++++++++++++++++++ src/styles.less | 1 + 3 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 src/back2top.less diff --git a/index.html b/index.html index bb4a3f4..7d42001 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@
-
+

PaperCSS

@@ -62,7 +62,9 @@
  • Alerts
    • - +
    + ^ +

    Flexbox

    Flexgrid

    diff --git a/src/back2top.less b/src/back2top.less new file mode 100644 index 0000000..434305a --- /dev/null +++ b/src/back2top.less @@ -0,0 +1,20 @@ +.to-top { + opacity: 1; + display: inline-block; + padding: 1em; + position: fixed; + bottom: 1em; + right: 1em; + .paper-btn { + padding: 0.6em 1em; + background: white; + border-top-left-radius: 185px 160px; + border-top-right-radius: 200px 195px; + border-bottom-right-radius: 160px 195px; + border-bottom-left-radius: 185px 190px; + } +} + +.demo-title:hover + .to-top { + opacity: 0; +} \ No newline at end of file diff --git a/src/styles.less b/src/styles.less index c44d16e..c22317d 100644 --- a/src/styles.less +++ b/src/styles.less @@ -17,3 +17,4 @@ @import (less) "./cards.less"; @import (less) "./badges.less"; @import (less) "./alerts.less"; +@import (less) "./back2top.less"; From 1dc3adaf52495224e9de4b042595973d7dec08c2 Mon Sep 17 00:00:00 2001 From: Afzal Sayed Date: Sat, 25 Nov 2017 20:47:10 +0530 Subject: [PATCH 2/7] Added tabs feature --- index.html | 107 ++++++++++++++++++++++++++++++++++++++++++++++++ src/styles.less | 1 + src/tabs.less | 37 +++++++++++++++++ 3 files changed, 145 insertions(+) create mode 100644 src/tabs.less diff --git a/index.html b/index.html index bb4a3f4..d2b8eb4 100644 --- a/index.html +++ b/index.html @@ -60,6 +60,7 @@
  • Utilities
  • Images
  • Alerts
    • +
  • Tabs
    • @@ -1056,6 +1057,112 @@ function add(x, y) { </div>
    +
    +

    Tabs

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

    + Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter + rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. +

    +

    + Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. + Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. +

    +
    + +
    +

    + Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball + t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine + chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock. + Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork + chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. + Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami + beef ribs. +

    +
    + +
    +

    + Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter + rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs. +

    +

    + Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. + Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison. +

    +
    + +
    +

    + Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball + t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine + chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock. + Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork + chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank. + Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami + beef ribs. +

    +
    +
    +
    + 
    +    <div class="row flex-spaces tabs">
+      <input id="tab1" type="radio" name="tabs" checked>
+      <label for="tab1">Tab 1</label>
+      
+      <input id="tab2" type="radio" name="tabs">
+      <label for="tab2">Tab 2</label>
+      
+      <input id="tab3" type="radio" name="tabs">
+      <label for="tab3">Tab 3</label>
+      
+      <input id="tab4" type="radio" name="tabs">
+      <label for="tab4">Tab 4</label>
+  
+      <div class="content" id="content1">
+        <p>
+          Bacon ipsum dolor sit amet beef venison beef ribs kielbasa...
+        </p>
+        <p>
+          Brisket meatball turkey short loin boudin leberkas meatloaf...
+        </p>
+      </div>
+      <div class="content" id="content2">
+        <p>
+          Bacon ipsum dolor sit amet landjaeger sausage brisket...
+        </p>
+      </div>
+      <div class="content" id="content3">
+        <p>
+          Bacon ipsum dolor sit amet beef venison beef ribs kielbasa...
+        </p>
+        <p>
+          Brisket meatball turkey short loin boudin leberkas meatloaf...
+        </p>
+      </div>
+      <div class="content" id="content4">
+        <p>
+          Bacon ipsum dolor sit amet landjaeger sausage brisket...
+        </p>
+      </div>
+    </div>
    +
    +
    +

    Download and Link

    Download

    diff --git a/src/styles.less b/src/styles.less index c44d16e..6cf9eee 100644 --- a/src/styles.less +++ b/src/styles.less @@ -17,3 +17,4 @@ @import (less) "./cards.less"; @import (less) "./badges.less"; @import (less) "./alerts.less"; +@import (less) "./tabs.less"; \ No newline at end of file diff --git a/src/tabs.less b/src/tabs.less new file mode 100644 index 0000000..73a4b45 --- /dev/null +++ b/src/tabs.less @@ -0,0 +1,37 @@ +.tabs { + .content { + display: none; + padding: 0.75rem 0 0; + } + + input { + display: none; + } + + label { + display: inline-block; + margin: 0 0 -1px; + padding: 0.75rem 0.75rem; + font-weight: 600; + text-align: center; + color: @primary-light; + } + + label:hover { + color: @muted; + cursor: pointer; + } + + input:checked+label { + color: @primary; + border-bottom: solid 3px @secondary; + } + + #tab1:checked~#content1, + #tab2:checked~#content2, + #tab3:checked~#content3, + #tab4:checked~#content4 { + display: block; + } + +} \ No newline at end of file From dd9c203c23e6d03294fb4fb381aa603cbbc8c1c3 Mon Sep 17 00:00:00 2001 From: Afzal Sayed Date: Mon, 27 Nov 2017 11:48:05 +0530 Subject: [PATCH 3/7] Added loop for dynamic selection of tabs id --- src/tabs.less | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/tabs.less b/src/tabs.less index 73a4b45..648b894 100644 --- a/src/tabs.less +++ b/src/tabs.less @@ -27,11 +27,12 @@ border-bottom: solid 3px @secondary; } - #tab1:checked~#content1, - #tab2:checked~#content2, - #tab3:checked~#content3, - #tab4:checked~#content4 { - display: block; + .loop(@num) when (@num > 0) { + .loop((@num - 1)); + input[id^= ~"tab@{num}"]:checked~div[id^= ~"content@{num}"]{ + display:block; + } } - + + .loop(5); } \ No newline at end of file From 93ce4731784e55abb34a22bebe0f9b8db9398ea5 Mon Sep 17 00:00:00 2001 From: Afzal Sayed Date: Mon, 27 Nov 2017 18:00:48 +0530 Subject: [PATCH 4/7] small bug fix in id selection --- src/tabs.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tabs.less b/src/tabs.less index 648b894..21ef056 100644 --- a/src/tabs.less +++ b/src/tabs.less @@ -29,7 +29,7 @@ .loop(@num) when (@num > 0) { .loop((@num - 1)); - input[id^= ~"tab@{num}"]:checked~div[id^= ~"content@{num}"]{ + input[id = ~"tab@{num}"]:checked~div[id = ~"content@{num}"]{ display:block; } } From 8bbcb2e3710e2ea167d99d52f211050514f1731f Mon Sep 17 00:00:00 2001 From: Yazed Jamal Date: Mon, 27 Nov 2017 21:00:28 +0000 Subject: [PATCH 5/7] added class for inline list --- index.html | 7 +++++++ src/lists.less | 4 ++++ 2 files changed, 11 insertions(+) diff --git a/index.html b/index.html index 61b82ad..bcda14a 100644 --- a/index.html +++ b/index.html @@ -445,6 +445,13 @@
  • And now we're are the top!
    • +

    Inline List

    +
      +
    • Item 1
      • +
    • Item 2
      • +
    • Item 3
      • +
    • Item 4
      • + 
     <ol>
diff --git a/src/lists.less b/src/lists.less
index 053a6bc..07b5078 100644
--- a/src/lists.less
+++ b/src/lists.less
@@ -41,4 +41,8 @@ ul {
             }
         }
     }
+    &.inline li{
+        display: inline;
+        margin-left: 5px;
+    }
 }
\ No newline at end of file

From 218a8eb5705b0cea9ee97caa9104193f995e9083 Mon Sep 17 00:00:00 2001
From: Paul Mandel 
Date: Tue, 28 Nov 2017 10:45:30 -0800
Subject: [PATCH 6/7] Imprefect Buttons -> Imperfect Buttons

---
 index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 82af0cb..fad9493 100644
--- a/index.html
+++ b/index.html
@@ -232,7 +232,7 @@

    Buttons

    -

    Insprired by Imprefect Buttons

    +

    Insprired by Imperfect Buttons

    @@ -246,7 +246,7 @@ 
    -<p>Insprired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imprefect Buttons</a></p>
+<p>Insprired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imperfect Buttons</a></p>
 <button class="btn-large">Large</button>
 <button>Default</button>
 <button class="btn-small">Small</button>

From 8beaf6b2822935c00d3d2bdb82679a372482f2d6 Mon Sep 17 00:00:00 2001
From: Afzal Sayed 
Date: Fri, 1 Dec 2017 12:29:54 +0530
Subject: [PATCH 7/7] moved to demo.css file

---
 demo.css          | 19 +++++++++++++++++++
 src/back2top.less | 20 --------------------
 2 files changed, 19 insertions(+), 20 deletions(-)
 delete mode 100644 src/back2top.less

diff --git a/demo.css b/demo.css
index 345c00e..edfe182 100644
--- a/demo.css
+++ b/demo.css
@@ -13,4 +13,23 @@ body {
 }
 .summary a {
     color: #41403e;    
+}
+.to-top {
+    opacity: 1;
+    display: inline-block;
+    padding: 1em;
+    position: fixed;
+    bottom: 1em;
+    right: 1em
+}
+.to-top .paper-btn {
+    padding: .6em 1em;
+    background: #fff;
+    border-top-left-radius: 185px 160px;
+    border-top-right-radius: 200px 195px;
+    border-bottom-right-radius: 160px 195px;
+    border-bottom-left-radius: 185px 190px
+}
+.demo-title:hover + .to-top {
+    opacity: 0
 }
\ No newline at end of file
diff --git a/src/back2top.less b/src/back2top.less
deleted file mode 100644
index 434305a..0000000
--- a/src/back2top.less
+++ /dev/null
@@ -1,20 +0,0 @@
-.to-top {
-    opacity: 1;
-    display: inline-block;
-    padding: 1em;
-    position: fixed;
-    bottom: 1em;
-    right: 1em;
-    .paper-btn {
-    padding: 0.6em 1em;
-    background: white;
-    border-top-left-radius: 185px 160px;
-    border-top-right-radius: 200px 195px;
-    border-bottom-right-radius: 160px 195px;
-    border-bottom-left-radius: 185px 190px;
-    }
-}
-
-.demo-title:hover + .to-top {
-    opacity: 0;
-}
\ No newline at end of file