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 {
  21         height: 36px;
  22         text-transform: uppercase;
  23         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15), 0 1px 2px 0 rgba(0, 0, 0, .25);
  24         transition: box-shadow .25s ease-in-out;
  25         &:hover {
  26                 box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .15), 0 3px 6px 0 rgba(0, 0, 0, .25);
  27                 transition: box-shadow .25s ease-in-out;
  28         }
  29         @include media-breakpoint-down(sm) {
  30                 font-size: .875rem;
  31         }
  32 }
  33
  34 .btn-outline-primary,
  35 .btn-outline-secondary {
  36         transition: background-color .25s ease-in-out;
  37         &:hover {
  38                 transition: background-color .25s ease-in-out;
  39         }
  40 }
  41
  42 .btn-xlg {
  43         height: 72px;
  44         margin: 0 36px;
  45         padding-top: 16px;
  46 }
  47
  48 .btn-lg {
  49         height: 48px;
  50         margin: 0 24px;
  51         @include media-breakpoint-down(sm) {
  52                 height: 36px;
  53                 margin: 0 8px;
  54                 padding: 1rem;
  55                 font-size: .875rem;
  56                 line-height: 0;
  57         }
  58 }
  59
  60 .btn-md {
  61         font-size: 0.875rem;
  62         line-height: 1.25rem;
  63         padding: .4rem 1rem .5rem 1rem;
  64 }
  65
  66 .btn-block {
  67         margin: 0 0 1.5rem 0;
  68         @include media-breakpoint-up(md) {
  69                 margin: 0 0 2rem 0;
  70         }
  71         @include media-breakpoint-down(xs) {
  72                 font-size: .875rem;
  73                 line-height: 0;
  74         }
  75 }
  76
  77 button:focus {
  78         outline: none;
  79 }
  80
  81 // Top navigation Donate Button //
  82 .btn-donate {
  83         margin-top: 18px;
  84         font-size: 14px;
  85         font-weight: 400;
  86         line-height: 20px;
  87         padding: 3px 16px 0 5px;
  88         @include media-breakpoint-up(lg) {
  89                 margin-top: 29px;
  90         }
  91         svg {
  92                 vertical-align: -7px;
  93                 margin-right: 5px;
  94         }
  95 }