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 // uses negative margin to force content to be drawn under the scrollbar
   9 // (this is useful for modals since scrollbar disappears during a modal)
  10 // note: intended to be used with div.container which adds padding for
  11 // media sizes sm and above, don't do it for xs to avoid losing content
  12 .scrollbar-fix-outer {
  13   overflow-x: hidden;
  14 }
  15 .scrollbar-fix-inner {
  16   @include media-breakpoint-up(sm) {
  17     margin-right: calc(100% - 100vw);
  18   }
  19 }
  20
  21 // place a container div around entire page, and then use this
  22 // to make the background on navbar or footer appear full-width
  23 .extend-background {
  24   margin-left: calc(-.5 * (100vw - 100%));
  25   margin-right: calc(-.5 * (100vw - 100%));
  26   padding-left: calc(.5 * (100vw - 100%));
  27   padding-right: calc(.5 * (100vw - 100%));
  28 }
  29
  30 // use within a grid column to extend the background to left/right
  31 .grid-gutter-background {
  32   margin-left: -.5 * $grid-gutter-width;
  33   margin-right: -.5 * $grid-gutter-width;
  34   padding-left: .5 * $grid-gutter-width;
  35   padding-right: .5 * $grid-gutter-width;
  36 }
  37
  38 .sidebar {
  39   position: sticky;
  40   top: 0;
  41   max-height: 100vh;
  42   overflow-y: auto;
  43   background-color: $gray-200;
  44 }
  45
  46 // needed for svg icons inside buttons, card headers, etc
  47 // creates an inline element with correct width but no height
  48 // the svg is positioned within this to vertically centre on a capital letter
  49 $icon-sizes: (
  50   24: 24px,
  51   32: 32px,
  52   48: 48px,
  53   64: 64px
  54 );
  55 @each $icon-size, $icon-size-px in $icon-sizes {
  56   .icon#{$icon-size}-outer {
  57     display: inline-block;
  58     position: relative;
  59     width: $icon-size-px;
  60     height: 0;
  61     vertical-align: baseline;
  62   }
  63   .icon#{$icon-size}-inner {
  64     position: absolute;
  65     left: 0px;
  66     top: calc(-.5 * $icon-size-px - .35em); // .35em = approx half cap height
  67     width: $icon-size-px;
  68     height: $icon-size-px;
  69     fill: currentColor;
  70     stroke: currentColor;
  71   }
  72 }
  73
  74 // use this to display the pi symbol without horrible blocky look in Sans
  75 .serif {
  76   font-family: $font-family-serif;
  77 }
  78
  79 // apply this to table to get an icon with vertically centred text next to it
  80 .icon-and-text {
  81   vertical-align: middle;
  82   td {
  83     padding: .25em .5em;
  84   }
  85 }
  86
  87 .search-results li {
  88   margin-bottom: .5em;
  89 }
  90
  91 .page-header {
  92   background-color: theme-color-level("primary", $alert-bg-level);
  93 }
  94
  95 .page-footer {
  96   background-color: $gray-400;
  97   a {
  98     color: $footer-link-color;
  99
 100     &:hover,
 101     &:focus {
 102       color: $footer-link-hover-color;
 103       //background-color: $footer-link-hover-bg;
 104     }
 105   }
 106 }