box shadows on buttons

[people/shoehn/ipfire.org.git] / static / scss / style.scss

diff --git a/static/scss/style.scss b/static/scss/style.scss
index ac7064b1c2a92225b2f4206a27e522643dd6f38c..571157dc7183a9c49bee1f4af09105cd078eeed0 100644 (file)
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -55,6 +55,18 @@
 
 .btn {
        text-transform: uppercase;
+       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
+       transition: box-shadow .25s ease-in-out;
+       &:hover {
+               box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
+               transition: box-shadow .25s ease-in-out;
+       }
+       svg {
+               margin-right: .75rem;
+               height: 17px;
+               width: auto;
+               transform: translateY(2px);
+       }
 }
 
 .btn-lg {
@@ -189,6 +201,42 @@ section#fireinfo {
 
 footer {
        padding: 3rem 0 0 0;
+       h4 {
+               margin-bottom: 1.25rem;
+       }
+       ul {
+               li {
+                       font-size: $small-font-size;
+                       margin-bottom: .75rem;
+                       a {
+                               color: $blue-grey-900;
+                               text-decoration: none;
+                               &:hover {
+                                       color: $blue-grey-600;
+                                       text-decoration: underline;
+                               }
+                       }
+               }
+       }
+       .btn-lg {
+               margin-bottom: 2.75rem;
+               svg {
+                       width: 20px;
+                       height: auto;
+                       margin-right: 1.125rem;
+                       transform: translateY(2px);
+               }
+       }
+       .btn-sm {
+               box-shadow: none;
+               &:hover {
+                       box-shadow: none;
+               }
+               svg {
+                       width: auto;
+                       height: 28px;
+               }
+       }
 }
 
 .feature_icons {
@@ -227,4 +275,10 @@ footer {
 
 .btn-red900 {
   @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
+}
+.btn-white {
+  @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
+}
+.btn-bluegrey900 {
+  @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
 }
\ No newline at end of file