uccser/cs-field-guide

@import "static/interactives/rgb-mixer/node_modules/nouislider/dist/nouislider";
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

#interactive-rgb-mixer .noUi-pips {
  padding-top: 5px;
}

#interactive-rgb-mixer-container {
  display: flex;
  justify-content: space-between;
  padding-right: 1rem;
}

#interactive-rgb-mixer-result {
    background: rgb(127, 127, 127);
  color: rgb(127, 127, 127);
    border: 1px solid black;
  box-shadow: 0 0 10px;
}

#interactive-rgb-mixer-sliders > div {
  padding-bottom: 5rem;
}

#interactive-rgb-mixer-sliders > div:last-child {
  padding-bottom: 3rem;
}

.interactive-rgb-mixer-slider {
  margin-top: 0.2rem;
}

/* RGB colours */
#interactive-rgb-mixer-sliders > div:nth-child(1) .noUi-connect {
    background: red;
}

#interactive-rgb-mixer-sliders > div:nth-child(2) .noUi-connect {
    background: lime;
}

#interactive-rgb-mixer-sliders > div:nth-child(3) .noUi-connect {
    background: blue;
}

#pixelmania-logo {
  height: 5rem;
}

#interactive-rgb-mixer-colour-code {
  font: 1.5rem "Courier New", monospace;
  word-break: break-word;
}

/* Settings for displaying on different sized screens */
@include media-breakpoint-up(xl) {
  #interactive-rgb-mixer {
    padding: 10rem;
  }
}

@include media-breakpoint-up(lg) {
  #interactive-rgb-mixer {
    padding: 5rem;
  }
}

@include media-breakpoint-up(md) {
  #interactive-rgb-mixer {
    padding: 2rem;
  }
}

@include media-breakpoint-down(sm) {
  // We should avoid using viewport height on mobile devices - https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html
  // Viewport height is used in the centered.html template.
  #csfg-center-page-content {
    height: auto !important;
  }
}