css/bootstrap/_custom.scss

   1 // Nick
   2
   3 $footer-link-color: darken(theme-color("success"), 10%);
   4 $footer-link-hover-color: darken($footer-link-color, 10%);
   5
   6 // apply this to a div inside the body tag
   7 // prevents page shifting to left/right as scrollbar appears/disappears
   8 // it works by calculating the width of the scrollbar and then adding
   9 // the corresponding amount of padding to left to keep things centered
  10 // see https://stackoverflow.com/questions/45524214/how-do-i-stop-my-web-content-from-shifting-left-when-the-vertical-scrollbar-appe
  11 .scrollbar-fix {
  12   padding-left: calc(100vw - 100%);
  13 }
  14
  15 // place a container div around entire page, and then use this
  16 // to make the background on navbar or footer appear full-width
  17 .extend-background {
  18   margin-left: calc(-.5 * (100vw - 100%));
  19   margin-right: calc(-.5 * (100vw - 100%));
  20   padding-left: calc(.5 * (100vw - 100%));
  21   padding-right: calc(.5 * (100vw - 100%));
  22 }
  23
  24 // needed for svg icons inside buttons, card headers, etc
  25 // creates an inline element with correct width but no height
  26 // the svg is positioned within this to vertically centre on a capital letter
  27 $icon-sizes: (
  28   24: 24px,
  29   32: 32px,
  30   48: 48px,
  31   64: 64px
  32 );
  33 @each $icon-size, $icon-size-px in $icon-sizes {
  34   .icon#{$icon-size}-outer {
  35     display: inline-block;
  36     position: relative;
  37     width: $icon-size-px;
  38     height: 0;
  39     vertical-align: baseline;
  40   }
  41   .icon#{$icon-size}-inner {
  42     position: absolute;
  43     left: 0px;
  44     top: calc(-.5 * $icon-size-px - .35em); // .35em = approx half cap height
  45     width: $icon-size-px;
  46     height: $icon-size-px;
  47     fill: currentColor;
  48     stroke: currentColor;
  49   }
  50 }
  51
  52 // use this to display the pi symbol without horrible blocky look in Sans
  53 .serif {
  54   font-family: $font-family-serif;
  55 }
  56
  57 // apply this to table to get an icon with vertically centred text next to it
  58 .icon-and-text {
  59   vertical-align: middle;
  60   td {
  61     padding: .25em .5em;
  62   }
  63 }
  64
  65 .search-results li {
  66   margin-bottom: .5em;
  67 }
  68
  69 footer, .footer {
  70   padding-top: 35px;
  71   padding-bottom: 25px;
  72   background-color: $gray-400;
  73   a {
  74     color: $footer-link-color;
  75
  76     &:hover,
  77     &:focus {
  78       color: $footer-link-hover-color;
  79       //background-color: $footer-link-hover-bg;
  80     }
  81   }
  82 }