static/scss/_buttons.scss

   1 // Buttons
   2 .btn-red900 {
   3   @include button-variant($btn-red900-color, $btn-red900-bg, $btn-red900-border);
   4 }
   5 .btn-white {
   6   @include button-variant($btn-white-color, $btn-white-bg, $btn-white-border);
   7 }
   8 .btn-bluegrey900 {
   9   @include button-variant($btn-bluegrey900-color, $btn-bluegrey900-bg, $btn-bluegrey900-border);
  10 }
  11
  12 button.navbar-toggler div {
  13         font-family: 'Ubuntu', sans-serif;
  14         font-size: 1rem;
  15         display: inline-block;
  16         position: relative;
  17         top: -4px;
  18 }
  19
  20 .btn-group {
  21         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
  22 }
  23
  24 .btn {
  25         height: 36px;
  26         text-transform: uppercase;
  27         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
  28         transition: box-shadow .25s ease-in-out;
  29         &:hover {
  30                 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
  31                 transition: box-shadow .25s ease-in-out;
  32         }
  33         @include media-breakpoint-down(sm) {
  34                 font-size: .875rem;
  35         }
  36 }
  37
  38 .btn-outline-primary,
  39 .btn-outline-secondary {
  40         transition: background-color .25s ease-in-out;
  41         &:hover {
  42                 transition: background-color .25s ease-in-out;
  43         }
  44 }
  45
  46 .btn-light {
  47         box-shadow: none;
  48 }
  49
  50 .btn-xlg {
  51         height: 72px;
  52         margin: 0 36px;
  53         padding-top: 16px;
  54 }
  55
  56 .btn-lg {
  57         height: 48px;
  58         margin: 0 24px;
  59         @include media-breakpoint-down(sm) {
  60                 height: 36px;
  61                 margin: 0 8px;
  62                 padding: 1rem;
  63                 font-size: .875rem;
  64                 line-height: 0;
  65         }
  66 }
  67
  68 .btn-md {
  69         font-size: 0.875rem;
  70         line-height: 1.25rem;
  71         padding: .4rem 1rem .5rem 1rem;
  72 }
  73
  74 .btn-block {
  75         margin: 0 0 1.5rem 0;
  76         @include media-breakpoint-up(md) {
  77                 margin: 0 0 2rem 0;
  78         }
  79         @include media-breakpoint-down(xs) {
  80                 font-size: .875rem;
  81                 line-height: 0;
  82         }
  83 }
  84
  85 button:focus {
  86         outline: none;
  87 }
  88
  89 // Top navigation Donate Button //
  90 .btn-donate {
  91         margin-top: 18px;
  92         font-size: 14px;
  93         font-weight: 400;
  94         line-height: 20px;
  95         padding: 3px 16px 0 5px;
  96         @include media-breakpoint-up(lg) {
  97                 margin-top: 29px;
  98         }
  99         svg {
 100                 vertical-align: -7px;
 101                 margin-right: 5px;
 102         }
 103 }