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 // use within a container to extend the background to left/right
  22 .container-background {
  23   margin-left: calc(-.5 * (100vw - 100%));
  24   margin-right: calc(-.5 * (100vw - 100%));
  25   padding-left: calc(.5 * (100vw - 100%));
  26   padding-right: calc(.5 * (100vw - 100%));
  27 }
  28
  29 // use within a grid column to extend the background to left/right
  30 .grid-gutter-background {
  31   margin-left: -.5 * $grid-gutter-width;
  32   margin-right: -.5 * $grid-gutter-width;
  33   padding-left: .5 * $grid-gutter-width;
  34   padding-right: .5 * $grid-gutter-width;
  35 }
  36
  37 // similar to bootstrap's navbar class, but appears to the side
  38 // responsive in a fairly sophisticated way, with 5 different modes:
  39 // >= xs: appears above content, toggleable, animates vertically
  40 // >= md: appears to left of content, toggleable, animates horizontally
  41 // >= xl: appears to left of content, always visible
  42 // >= 2xl: same as xl but has a right margin half the width of the sidebar
  43 // >= 3xl: same as xl but has a right margin the same width as the sidebar
  44 // (the last way gives a balanced look, as the content is along the middle)
  45 // note: flex item cannot be smaller than its contents with overflow visible,
  46 // so to be safe (when screen so small that a word cannot fit) make it hidden
  47 .sidebar-outer {
  48   // note: the following properties are set via javascript using inline style:
  49   // height: 0px if hidden and animation is vertical, otherwise content height
  50   // flex-basis: 0px if hidden and animation is horizontal, otherwise 350px
  51   // transition-property: flex-basis / height during animation, otherwise none
  52   flex-grow: 0;
  53   flex-shrink: 0;
  54   padding-left: 0;
  55   padding-right: 0;
  56   overflow: hidden;
  57   @include media-breakpoint-up(md) {
  58     position: sticky;
  59     top: 0;
  60     max-height: 100vh;
  61     overflow-y: auto;
  62   }
  63   transition: none .35s ease;
  64   background-color: $gray-200;
  65 }
  66 .sidebar-inner {
  67   padding-left: $grid-gutter-width * .5;
  68   padding-right: $grid-gutter-width * .5;
  69   @include media-breakpoint-up(md) {
  70     width: 350px;
  71     min-height: 100vh;
  72   }
  73 }
  74 .sidebar-toggle {
  75   @include media-breakpoint-up(xl) {
  76     display: none;
  77   }
  78 }
  79 .sidebar-content {
  80   overflow: hidden;
  81   // the following gives an effect more like .container, as the text wrap
  82   // becomes predictable after a certain screen size, but text is biased
  83   // to the left on larger screens, I prefer to have it wider and centred
  84   //max-width: 1280px;
  85 }
  86 .sidebar-dummy {
  87   flex: 0 0 0px;
  88   padding-left: 0px;
  89   padding-right: 0px;
  90   overflow: hidden;
  91   @include media-breakpoint-up(2xl) {
  92     flex-basis: 175px;
  93   }
  94   @include media-breakpoint-up(3xl) {
  95     flex-basis: 350px;
  96   }
  97 }
  98
  99 // used in blog posts for a responsive N-column layout
 100 .rowN {
 101   display: flex;
 102   flex-wrap: wrap;
 103   //margin-left: $grid-gutter-width * -.5;
 104   //margin-right: $grid-gutter-width * -.5;
 105 }
 106 .rowN-header {
 107   display: none;
 108   @include media-breakpoint-up(2xl) {
 109     display: flex;
 110   }
 111 }
 112 .col7 {
 113   padding-left: $grid-gutter-width * .5;
 114   padding-right: $grid-gutter-width * .5;
 115   flex: 1 0 100%;
 116   @include media-breakpoint-up(2xl) {
 117     flex-basis: 14.285714%;
 118     max-width: 14.285714%;
 119   }
 120   border: 2px solid white;
 121   hyphens: auto;
 122 }
 123 .col7-2 {
 124   padding-left: $grid-gutter-width * .5;
 125   padding-right: $grid-gutter-width * .5;
 126   flex: 1 0 100%;
 127   @include media-breakpoint-up(2xl) {
 128     flex-basis: 28.571429%;
 129     max-width: 28.571429%;
 130   }
 131   border: 2px solid white;
 132   hyphens: auto;
 133 }
 134 .colN-data {
 135   background-color: theme-color-level("primary", $alert-bg-level);
 136 }
 137 .colN-header {
 138   background-color: theme-color-level("success", $alert-bg-level);
 139 }
 140
 141 // use after .img-fluid
 142 .img-fluid-1-3 {
 143   max-width: 33.333333%
 144 }
 145 .img-fluid-2-3 {
 146   max-width: 66.666667%
 147 }
 148
 149 // needed for svg icons inside buttons, card headers, etc
 150 // creates an inline element with correct width but no height
 151 // the svg is positioned within this to vertically centre on a capital letter
 152 $icon-sizes: (
 153   24: 24px,
 154   32: 32px,
 155   48: 48px,
 156   64: 64px
 157 );
 158 @each $icon-size, $icon-size-px in $icon-sizes {
 159   .icon#{$icon-size}-outer {
 160     display: inline-block;
 161     position: relative;
 162     width: $icon-size-px;
 163     height: 0;
 164     vertical-align: baseline;
 165   }
 166   .icon#{$icon-size}-inner {
 167     position: absolute;
 168     left: 0px;
 169     top: calc(-.5 * $icon-size-px - .35em); // .35em = approx half cap height
 170     width: $icon-size-px;
 171     height: $icon-size-px;
 172     fill: currentColor;
 173     stroke: currentColor;
 174   }
 175 }
 176
 177 // use this to display the pi symbol without horrible blocky look in Sans
 178 .serif {
 179   font-family: $font-family-serif;
 180 }
 181
 182 // use this with bootstrap's grid system to make an icon with text beside it
 183 // the icon can take up to 1/2 of the width, but not more than its N-px width
 184 // note: flex item cannot be smaller than its contents with overflow visible,
 185 // so to be safe (when screen so small that a word cannot fit) make it hidden
 186 // note: col has position: relative, and I believe this is so that stretched
 187 // links will fill the column, but we want them to fill the row in this case
 188 .col-icon128 {
 189   flex: 0 1 calc(128px + $grid-gutter-width);
 190   overflow: hidden;
 191   position: static;
 192 }
 193 .col-icon256 {
 194   flex: 0 1 calc(256px + $grid-gutter-width);
 195   overflow: hidden;
 196   position: static;
 197 }
 198 .col-text {
 199   flex: 1 0 50%;
 200   overflow: hidden;
 201   position: static;
 202 }
 203
 204 .page-header {
 205   background-color: theme-color-level("primary", $alert-bg-level);
 206 }
 207
 208 .page-footer {
 209   background-color: $gray-400;
 210   a {
 211     color: $footer-link-color;
 212
 213     &:hover,
 214     &:focus {
 215       color: $footer-link-hover-color;
 216       //background-color: $footer-link-hover-bg;
 217     }
 218   }
 219 }