Merge branch 'develop' into feature-RefactorBadgeColours

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

index.html

@@ -259,6 +259,21 @@
 <button class="disabled">Disabled</button>
 &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>
@@ -634,7 +649,6 @@ function add(x, y) {
 &lt;button popover="Popover on top" popover-position="top"&gt;Popover on top and on a button!&lt;/button&gt;</pre>
       </div>
     </div>
-
     <div id="cards" class="section">
       <h2>Cards</h2>
       <h4>Full card example</h4>

src/buttons.less

@@ -1,15 +1,16 @@
-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;
     font-size: 1rem;
     padding: .75rem .75rem;
     cursor: pointer;
-    .shadow;
     &.btn-large {
         .shadow-large;
         font-size:2rem;
@@ -46,4 +47,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();

src/colors.less

@@ -13,6 +13,14 @@
 @danger-light: lighten(@danger, 45%);
 @muted-light: lighten(@muted, 35%);
 
+
+@primary-text: #FFF;
+@secondary-text: @primary;
+@success-text: @primary;
+@warning-text: @primary;
+@danger-text: @primary;
+@muted-text: @primary;
+
 @white-dark: rgba(0, 0, 0, .03);
 
 @colors: primary, secondary, success, warning, danger, muted;