{"version":3,"sources":["../../src/extras/scss/qube-demo.scss","dist/css/qube-demo.css","../../src/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"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","sourcesContent":["/**\n * Qube — Demo Page Adjustments\n */\n\n// Dependencies\n@import \"../../scss/functions\";\n@import \"../../scss/mixins\";\n@import '../../scss/variables';\n\n// Page loader\n.loader {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: #fff;\n  z-index: 1500;\n  transition: opacity 500ms ease-in-out;\n}\n\n.page-loader {\n  width: 40px;\n  height: 40px;\n  margin: auto;\n  top: 50%;\n  left: 50%;\n  position: absolute;\n  margin-top: -20px;\n  margin-left: -20px;\n  background-color: #333;\n  background: theme-color(\"primary\");\n  border-radius: 100%;\n  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);\n  -webkit-animation: pulse-load 1200ms infinite ease-in-out;\n  animation: pulse-load 1200ms infinite ease-in-out;\n}\n\n// Page loader animations.\n@-webkit-keyframes pulse-load {\n  0% {\n    -webkit-transform: scale(0)\n  }\n  100% {\n    -webkit-transform: scale(1.0);\n    opacity: 0;\n  }\n}\n\n@keyframes pulse-load {\n  0% {\n    -webkit-transform: scale(0);\n    transform: scale(0);\n  }\n  100% {\n    -webkit-transform: scale(1.0);\n    transform: scale(1.0);\n    opacity: 0;\n  }\n}\n\n.fb-share-button > span,\n.fb-like > span {\n  height: 34px !important;\n}\n\n// Welcome sections.\n.welcome {\n  background: $white;\n  height: 100vh;\n  text-align: center;\n  overflow: hidden;\n  position: relative;\n\n  h1 {\n    font-size: 6.25rem;\n    font-weight: bold;\n    letter-spacing: -0.05em;\n    margin-top: 35vh;\n    margin-bottom: 20px;\n    color: #1f2429;\n    line-height: 1;\n\n    @include media-breakpoint-down(xs) {\n      font-size: 5.90rem;\n    }\n  }\n\n  .inner-wrapper {\n    position: relative;\n    z-index: 3;\n\n    > p {\n      margin-bottom: 20px;\n      color: #5f738e;\n      transition-delay: 150ms;\n    }\n\n    > .action-links {\n      transition-delay: 300ms;\n    }\n  }\n\n  .product-by {\n    position: relative;\n    z-index: 3;\n    margin-bottom: 30px;\n\n    a:hover {\n      text-decoration: none;\n    }\n\n    p {\n      font-size: 10px;\n      color: #b1b4bd;\n      text-transform: uppercase;\n      margin: 0;\n    }\n\n    img {\n      max-width: 180px;\n    }\n  }\n\n  &:before,\n  &:after {\n    content: '';\n    position: absolute;\n    width: 50vw;\n    height: 80vh;\n    transform: rotate(-25deg);\n    z-index: 1;\n  }\n\n  &:before {\n    left: -15vw;\n    top: -30%;\n    background: #fff;\n    background: -moz-linear-gradient(left, #e2e7ef 0%, #ffffff 100%);\n    background: -webkit-linear-gradient(left, #e2e7ef 0%, #ffffff 100%);\n    background: linear-gradient(to right, #e2e7ef 0%, #ffffff 100%);\n    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e7ef', endColorstr='#ffffff', GradientType=1); // Responsive\n\n    @include media-breakpoint-down(md) {\n      left: -30%;\n    }\n\n    @include media-breakpoint-down(sm) {\n      left: -35%;\n    }\n  }\n\n  &:after {\n    right: -5vw;\n    top: -15%;\n    background: #ffffff;\n    background: -moz-linear-gradient(left, #ffffff 0%, #e2e7ef 100%);\n    background: -webkit-linear-gradient(left, #ffffff 0%, #e2e7ef 100%);\n    background: linear-gradient(to right, #ffffff 0%, #e2e7ef 100%);\n    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e7ef', GradientType=1); // Responsive\n    @include media-breakpoint-down(md) {\n      right: -17%;\n    }\n  }\n}\n\n.cube {\n  will-change: transform;\n  position: absolute;\n  left: 50%;\n  transform: translate(-50%);\n  top: 40px;\n  width: 300px;\n  z-index: 2;\n}\n\n// Page content adjustments.\n.page-content {\n  position: relative;\n  background: #fafafa;\n  padding-top: 5.3125rem;\n\n  &:before {\n    content: '';\n    height: 500px;\n    width: 100%;\n    position: absolute;\n    top: 0;\n    right: 0;\n    background: -moz-linear-gradient(top, #ffffff 0%, #fafafa 100%);\n    background: -webkit-linear-gradient(top, #ffffff 0%, #fafafa 100%);\n    background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);\n    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa', GradientType=0);\n  }\n\n  // Color swatches wrapper.\n  .color-wrapper {\n    float: left;\n    @include media-breakpoint-down(xs) {\n      float: none;\n      max-width: 230px;\n      margin: 0 auto;\n    }\n  }\n\n  .color {\n    padding: 25px 20px;\n    text-align: center;\n    background: $white;\n    margin-bottom: 30px;\n    box-shadow: 0 0 25px rgba(40, 47, 60, .05), 0 20px 25px rgba(40, 47, 60, .05), 0 3px 4px rgba(40, 47, 60, .05);\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    .swatch {\n      position: relative;\n      border-radius: 50%;\n      margin: 0 auto 15px auto;\n      width: 110px;\n      height: 110px;\n    }\n\n    .title {\n      display: inline-block;\n      font-family: $headings-font-family;\n      width: 100%;\n      font-size: 1rem;\n    }\n\n    .hex-value {\n      font-family: $font-family-monospace;\n      color: #8f99ac;\n      font-size: 12px;\n      text-transform: uppercase;\n    }\n  }\n  .content {\n    .example {\n      margin: 45px 0 60px 0;\n\n      &.emphasized {\n        padding: 25px 20px;\n        background: $white;\n        box-shadow: 0 0 25px rgba(40, 47, 60, .05), 0 20px 25px rgba(40, 47, 60, .05), 0 3px 4px rgba(40, 47, 60, .05);\n      }\n    }\n\n    .table {\n      background: $white;\n      box-shadow: 0 0 25px rgba(40, 47, 60, .05), 0 20px 25px rgba(40, 47, 60, .05), 0 3px 4px rgba(40, 47, 60, .05);\n\n      &-striped tbody tr:nth-of-type(odd) {\n        background-color: #f7f8fb;\n      }\n\n      td,\n      th {\n        padding: 30px 25px;\n      }\n\n      th {\n        padding: 15px 25px;\n        font-size: 11px;\n        font-weight: 300;\n        text-transform: uppercase;\n        line-height: 1;\n        color: #9ba4ae;\n        border: none;\n      }\n\n      tbody {\n        td {\n          font-size: 0.8125rem;\n          vertical-align: middle;\n          h1,\n          h2,\n          h3,\n          h4,\n          h5,\n          h6,\n          p {\n            margin: 0;\n            line-height: 1;\n          }\n\n          p {\n            font-size: 1rem !important;\n          }\n        }\n      }\n    }\n  }\n}\n\n// Utilities\n@include media-breakpoint-down(sm) {\n  .sm-hidden {\n    display: none;\n  }\n}\n\n.ll-image {\n  text-indent: -9000px;\n}\n\n.hidden {\n  opacity: 0;\n}\n\n.slide-in {\n  will-change: transform;\n  opacity: 0;\n  transform: translateY(50%);\n  transition: transform 850ms cubic-bezier(0.785, 0.135, 0.150, 0.860), opacity 850ms cubic-bezier(0.785, 0.135, 0.150, 0.860);\n\n  &.visible {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n//\n// Examples\n//\n\n// Icons\n.icons-example {\n  .icons-example-wrapper {\n    padding: 100px 0;\n    @media (max-width: 850px) {\n      min-width: 100%;\n    }\n\n    &.material-icons {\n      background: #1C1E21;\n    }\n\n    &.font-awesome {\n      background: #212529;\n    }\n  }\n}\n\n// Buttons\n.example-buttons {\n  @media (max-width: 1199px) {\n    .buttons-wrapper {\n      button {\n        margin: 0 5px;\n      }\n    }\n  }\n\n  @media (max-width: 850px) {\n    .buttons-wrapper {\n      flex-flow: column !important;\n      flex-flow: wrap;\n\n      button {\n        min-width: 30%;\n        margin-bottom: 20px;\n        flex: 1;\n      }\n    }\n  }\n\n  @media (max-width: 450px) {\n    .buttons-wrapper button {\n      min-width: 50%;\n    }\n  }\n}\n\n// Cards\n@include media-breakpoint-down(md) {\n  #cards .last {\n    display: block !important;\n  }\n}\n\n@include media-breakpoint-down(sm) {\n  #cards .card {\n    max-width: 350px;\n    display: table;\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n\n// Progress bars\n@include media-breakpoint-down(sm) {\n  #progress-bars {\n    .pb-widths {\n      margin-bottom: $spacer * 1.25;\n    }\n  }\n}\n\n\n// Popups/Popovers\n#popups-popovers {\n  @include media-breakpoint-down(sm) {\n    .row>div {\n      margin-bottom: $spacer * 1.25;\n    }\n  }\n\n  @media (max-width: 420px) {\n    button {\n      display: block;\n      width: 100%;\n      margin-bottom: 10px;\n    }\n  }\n}\n\n// Badges\n#badges {\n  @include media-breakpoint-down(sm) {\n    .badge {\n      display: table;\n      margin-left: auto;\n      margin-right: auto;\n      margin-bottom: 10px;\n      width: 100%;\n    }\n  }\n}\n\n// Forms\n#forms {\n  @include media-breakpoint-down(sm) {\n    .custom-dropdown-example {\n      margin-bottom: $spacer;\n    }\n  }\n}\n\n// Custom controls\n@include media-breakpoint-down(sm) {\n  .custom-controls-example {\n    width: 100%;\n    max-width: 100%;\n    flex: none;\n    display: block;\n    padding: 0 !important;\n    margin-bottom: $spacer;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n\n\n#documentation {\n  border-top: 1px solid #ddd;\n}\n\n// Footer\n.footer-cta {\n  padding: 100px 0;\n}\n\n.main-footer a:hover { text-decoration: none; }\n","@charset \"UTF-8\";\n/**\n * Qube — Demo Page Adjustments\n */\n.loader {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: #fff;\n  z-index: 1500;\n  transition: opacity 500ms ease-in-out;\n}\n\n.page-loader {\n  width: 40px;\n  height: 40px;\n  margin: auto;\n  top: 50%;\n  left: 50%;\n  position: absolute;\n  margin-top: -20px;\n  margin-left: -20px;\n  background-color: #333;\n  background: #2586ff;\n  border-radius: 100%;\n  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);\n  -webkit-animation: pulse-load 1200ms infinite ease-in-out;\n  animation: pulse-load 1200ms infinite ease-in-out;\n}\n\n@-webkit-keyframes pulse-load {\n  0% {\n    -webkit-transform: scale(0);\n  }\n  100% {\n    -webkit-transform: scale(1);\n    opacity: 0;\n  }\n}\n\n@keyframes pulse-load {\n  0% {\n    -webkit-transform: scale(0);\n    transform: scale(0);\n  }\n  100% {\n    -webkit-transform: scale(1);\n    transform: scale(1);\n    opacity: 0;\n  }\n}\n\n.fb-share-button > span,\n.fb-like > span {\n  height: 34px !important;\n}\n\n.welcome {\n  background: #fff;\n  height: 100vh;\n  text-align: center;\n  overflow: hidden;\n  position: relative;\n}\n\n.welcome h1 {\n  font-size: 6.25rem;\n  font-weight: bold;\n  letter-spacing: -0.05em;\n  margin-top: 35vh;\n  margin-bottom: 20px;\n  color: #1f2429;\n  line-height: 1;\n}\n\n@media (max-width: 575.98px) {\n  .welcome h1 {\n    font-size: 5.90rem;\n  }\n}\n\n.welcome .inner-wrapper {\n  position: relative;\n  z-index: 3;\n}\n\n.welcome .inner-wrapper > p {\n  margin-bottom: 20px;\n  color: #5f738e;\n  transition-delay: 150ms;\n}\n\n.welcome .inner-wrapper > .action-links {\n  transition-delay: 300ms;\n}\n\n.welcome .product-by {\n  position: relative;\n  z-index: 3;\n  margin-bottom: 30px;\n}\n\n.welcome .product-by a:hover {\n  text-decoration: none;\n}\n\n.welcome .product-by p {\n  font-size: 10px;\n  color: #b1b4bd;\n  text-transform: uppercase;\n  margin: 0;\n}\n\n.welcome .product-by img {\n  max-width: 180px;\n}\n\n.welcome:before, .welcome:after {\n  content: '';\n  position: absolute;\n  width: 50vw;\n  height: 80vh;\n  -webkit-transform: rotate(-25deg);\n          transform: rotate(-25deg);\n  z-index: 1;\n}\n\n.welcome:before {\n  left: -15vw;\n  top: -30%;\n  background: #fff;\n  background: linear-gradient(to right, #e2e7ef 0%, #ffffff 100%);\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e7ef', endColorstr='#ffffff', GradientType=1);\n}\n\n@media (max-width: 991.98px) {\n  .welcome:before {\n    left: -30%;\n  }\n}\n\n@media (max-width: 767.98px) {\n  .welcome:before {\n    left: -35%;\n  }\n}\n\n.welcome:after {\n  right: -5vw;\n  top: -15%;\n  background: #ffffff;\n  background: linear-gradient(to right, #ffffff 0%, #e2e7ef 100%);\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e7ef', GradientType=1);\n}\n\n@media (max-width: 991.98px) {\n  .welcome:after {\n    right: -17%;\n  }\n}\n\n.cube {\n  will-change: transform;\n  position: absolute;\n  left: 50%;\n  -webkit-transform: translate(-50%);\n          transform: translate(-50%);\n  top: 40px;\n  width: 300px;\n  z-index: 2;\n}\n\n.page-content {\n  position: relative;\n  background: #fafafa;\n  padding-top: 5.3125rem;\n}\n\n.page-content:before {\n  content: '';\n  height: 500px;\n  width: 100%;\n  position: absolute;\n  top: 0;\n  right: 0;\n  background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa', GradientType=0);\n}\n\n.page-content .color-wrapper {\n  float: left;\n}\n\n@media (max-width: 575.98px) {\n  .page-content .color-wrapper {\n    float: none;\n    max-width: 230px;\n    margin: 0 auto;\n  }\n}\n\n.page-content .color {\n  padding: 25px 20px;\n  text-align: center;\n  background: #fff;\n  margin-bottom: 30px;\n  box-shadow: 0 0 25px rgba(40, 47, 60, 0.05), 0 20px 25px rgba(40, 47, 60, 0.05), 0 3px 4px rgba(40, 47, 60, 0.05);\n}\n\n.page-content .color:last-child {\n  margin-right: 0;\n}\n\n.page-content .color .swatch {\n  position: relative;\n  border-radius: 50%;\n  margin: 0 auto 15px auto;\n  width: 110px;\n  height: 110px;\n}\n\n.page-content .color .title {\n  display: inline-block;\n  font-family: \"IBM Plex Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  width: 100%;\n  font-size: 1rem;\n}\n\n.page-content .color .hex-value {\n  font-family: \"Fira Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n  color: #8f99ac;\n  font-size: 12px;\n  text-transform: uppercase;\n}\n\n.page-content .content .example {\n  margin: 45px 0 60px 0;\n}\n\n.page-content .content .example.emphasized {\n  padding: 25px 20px;\n  background: #fff;\n  box-shadow: 0 0 25px rgba(40, 47, 60, 0.05), 0 20px 25px rgba(40, 47, 60, 0.05), 0 3px 4px rgba(40, 47, 60, 0.05);\n}\n\n.page-content .content .table {\n  background: #fff;\n  box-shadow: 0 0 25px rgba(40, 47, 60, 0.05), 0 20px 25px rgba(40, 47, 60, 0.05), 0 3px 4px rgba(40, 47, 60, 0.05);\n}\n\n.page-content .content .table-striped tbody tr:nth-of-type(odd) {\n  background-color: #f7f8fb;\n}\n\n.page-content .content .table td,\n.page-content .content .table th {\n  padding: 30px 25px;\n}\n\n.page-content .content .table th {\n  padding: 15px 25px;\n  font-size: 11px;\n  font-weight: 300;\n  text-transform: uppercase;\n  line-height: 1;\n  color: #9ba4ae;\n  border: none;\n}\n\n.page-content .content .table tbody td {\n  font-size: 0.8125rem;\n  vertical-align: middle;\n}\n\n.page-content .content .table tbody td h1,\n.page-content .content .table tbody td h2,\n.page-content .content .table tbody td h3,\n.page-content .content .table tbody td h4,\n.page-content .content .table tbody td h5,\n.page-content .content .table tbody td h6,\n.page-content .content .table tbody td p {\n  margin: 0;\n  line-height: 1;\n}\n\n.page-content .content .table tbody td p {\n  font-size: 1rem !important;\n}\n\n@media (max-width: 767.98px) {\n  .sm-hidden {\n    display: none;\n  }\n}\n\n.ll-image {\n  text-indent: -9000px;\n}\n\n.hidden {\n  opacity: 0;\n}\n\n.slide-in {\n  will-change: transform;\n  opacity: 0;\n  -webkit-transform: translateY(50%);\n          transform: translateY(50%);\n  transition: opacity 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86);\n  transition: transform 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86);\n  transition: transform 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86), -webkit-transform 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.slide-in.visible {\n  -webkit-transform: translateY(0);\n          transform: translateY(0);\n  opacity: 1;\n}\n\n.icons-example .icons-example-wrapper {\n  padding: 100px 0;\n}\n\n@media (max-width: 850px) {\n  .icons-example .icons-example-wrapper {\n    min-width: 100%;\n  }\n}\n\n.icons-example .icons-example-wrapper.material-icons {\n  background: #1C1E21;\n}\n\n.icons-example .icons-example-wrapper.font-awesome {\n  background: #212529;\n}\n\n@media (max-width: 1199px) {\n  .example-buttons .buttons-wrapper button {\n    margin: 0 5px;\n  }\n}\n\n@media (max-width: 850px) {\n  .example-buttons .buttons-wrapper {\n    -ms-flex-flow: column !important;\n        flex-flow: column !important;\n    -ms-flex-flow: wrap;\n        flex-flow: wrap;\n  }\n  .example-buttons .buttons-wrapper button {\n    min-width: 30%;\n    margin-bottom: 20px;\n    -ms-flex: 1;\n        flex: 1;\n  }\n}\n\n@media (max-width: 450px) {\n  .example-buttons .buttons-wrapper button {\n    min-width: 50%;\n  }\n}\n\n@media (max-width: 991.98px) {\n  #cards .last {\n    display: block !important;\n  }\n}\n\n@media (max-width: 767.98px) {\n  #cards .card {\n    max-width: 350px;\n    display: table;\n    margin-left: auto;\n    margin-right: auto;\n  }\n}\n\n@media (max-width: 767.98px) {\n  #progress-bars .pb-widths {\n    margin-bottom: 1.875rem;\n  }\n}\n\n@media (max-width: 767.98px) {\n  #popups-popovers .row > div {\n    margin-bottom: 1.875rem;\n  }\n}\n\n@media (max-width: 420px) {\n  #popups-popovers button {\n    display: block;\n    width: 100%;\n    margin-bottom: 10px;\n  }\n}\n\n@media (max-width: 767.98px) {\n  #badges .badge {\n    display: table;\n    margin-left: auto;\n    margin-right: auto;\n    margin-bottom: 10px;\n    width: 100%;\n  }\n}\n\n@media (max-width: 767.98px) {\n  #forms .custom-dropdown-example {\n    margin-bottom: 1.5rem;\n  }\n}\n\n@media (max-width: 767.98px) {\n  .custom-controls-example {\n    width: 100%;\n    max-width: 100%;\n    -ms-flex: none;\n        flex: none;\n    display: block;\n    padding: 0 !important;\n    margin-bottom: 1.5rem;\n  }\n  .custom-controls-example:last-child {\n    margin-bottom: 0;\n  }\n}\n\n#documentation {\n  border-top: 1px solid #ddd;\n}\n\n.footer-cta {\n  padding: 100px 0;\n}\n\n.main-footer a:hover {\n  text-decoration: none;\n}\n/*# sourceMappingURL=qube-demo.css.map */","// Breakpoint viewport sizes and media queries.\n//\n// Breakpoints are defined as a map of (name: minimum width), order from small to large:\n//\n//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n//\n// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n\n// Name of the next breakpoint, or null for the last breakpoint.\n//\n//    >> breakpoint-next(sm)\n//    md\n//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    md\n//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n//    md\n@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {\n  $n: index($breakpoint-names, $name);\n  @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);\n}\n\n// Minimum breakpoint width. Null for the smallest (first) breakpoint.\n//\n//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    576px\n@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {\n  $min: map-get($breakpoints, $name);\n  @return if($min != 0, $min, null);\n}\n\n// Maximum breakpoint width. Null for the largest (last) breakpoint.\n// The maximum value is calculated as the minimum of the next one less 0.02px\n// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.\n// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n// See https://bugs.webkit.org/show_bug.cgi?id=178261\n//\n//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    767.98px\n@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {\n  $next: breakpoint-next($name, $breakpoints);\n  @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);\n}\n\n// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.\n// Useful for making responsive utilities.\n//\n//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"\"  (Returns a blank string)\n//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n//    \"-sm\"\n@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {\n  @return if(breakpoint-min($name, $breakpoints) == null, \"\", \"-#{$name}\");\n}\n\n// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n// Makes the @content apply to the given breakpoint and wider.\n@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  @if $min {\n    @media (min-width: $min) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {\n  $max: breakpoint-max($name, $breakpoints);\n  @if $max {\n    @media (max-width: $max) {\n      @content;\n    }\n  } @else {\n    @content;\n  }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($lower, $breakpoints);\n  $max: breakpoint-max($upper, $breakpoints);\n\n  @if $min != null and $max != null {\n    @media (min-width: $min) and (max-width: $max) {\n      @content;\n    }\n  } @else if $max == null {\n    @include media-breakpoint-up($lower, $breakpoints) {\n      @content;\n    }\n  } @else if $min == null {\n    @include media-breakpoint-down($upper, $breakpoints) {\n      @content;\n    }\n  }\n}\n\n// Media between the breakpoint's minimum and maximum widths.\n// No minimum for the smallest breakpoint, and no maximum for the largest one.\n// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {\n  $min: breakpoint-min($name, $breakpoints);\n  $max: breakpoint-max($name, $breakpoints);\n\n  @if $min != null and $max != null {\n    @media (min-width: $min) and (max-width: $max) {\n      @content;\n    }\n  } @else if $max == null {\n    @include media-breakpoint-up($name, $breakpoints) {\n      @content;\n    }\n  } @else if $min == null {\n    @include media-breakpoint-down($name, $breakpoints) {\n      @content;\n    }\n  }\n}"]}