parallax_color_bars/demo/style.css.map

parallax color bars

{"version":3,"sources":["style.scss","_reset.scss","partials/_section-intro.scss","mixins.scss","partials/_section-features-list.scss"],"names":[],"mappings":"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","file":"style.css","sourcesContent":["@import url('https://fonts.googleapis.com/css?family=Roboto:400,600');\n\n@import \"reset\";\n@import \"mixins\";\n\nbody {\n  font-family: 'Roboto', sans-serif;\n  font-size: 18px;\n\n}\n\n\n.back-img {\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n}\n\n.container {\n  margin: auto;\n\n}\n\nsection {\n  padding: 0 20px;\n}\n\n.rect-outer {\n  position: relative;\n  .rect-inner {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n\n  }\n}\n\n.spacer {\n  height: 200px;\n}\n\n\n.parallax-color-bar-block {\n  .normal-background {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    filter: grayscale(100%);\n\n    &:before {\n      content: '';\n      position: absolute;\n      left: 0;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(0, 0, 0, 0.35);\n    }\n  }\n\n  .color-bar-background {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n  }\n}\n\n\n@import \"partials/section-intro\";\n@import \"partials/section-features-list\";\n","* {\n  box-sizing: border-box;\n}\n\nhtml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font: inherit;\n  vertical-align: baseline;\n}\n\n/* HTML5 display-role reset for older browsers */\n\narticle, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {\n  display: block; }\n\nbody {\n  line-height: 1; }\n\nol, ul {\n  list-style: none; }\n\nblockquote, q {\n  quotes: none; }\n\nblockquote {\n  &:before, &:after {\n    content: '';\n    content: none; } }\n\nq {\n  &:before, &:after {\n    content: '';\n    content: none; } }\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0; }\n\n\ninput, button {\n  padding: 0;\n  margin: 0;\n  border: none;\n\n  &:focus {\n    outline: none;\n  }\n}",".section-intro {\n  position: relative;\n  min-height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: white;\n\n\n  .container {\n    position: relative;\n    z-index: 1;\n  }\n\n\n  .title {\n    font-size: 50px;\n    text-transform: uppercase;\n    font-weight: 600;\n    @include vw-font-size(600, 50);\n  }\n}","@mixin vw-font-size($viewport-width, $font-size, $letter-spacing: null) {\n\n  $vw-context: $viewport-width * 0.01;\n\n  @media (max-width: ($viewport-width * 1px)) {\n    font-size: (($font-size / $vw-context) * 1vw);\n\n    @if ($letter-spacing) {\n      letter-spacing: (($letter-spacing / $vw-context) * 1vw);\n    }\n\n  }\n}\n\n@mixin vw-font-normalize($viewport-width, $font-size) {\n  @media (max-width: ($viewport-width * 1px)) {\n    font-size: ($font-size * 1px);\n  }\n}\n",".section-features {\n  $mobile-size: 800px;\n\n  .container {\n    padding: 100px 0;\n    max-width: 1000px;\n  }\n\n  .feature-item {\n    @media (min-width: $mobile-size + 1px) {\n      display: flex;\n    }\n\n    + .feature-item {\n      padding: 100px 0 0;\n\n      @media (max-width: $mobile-size) {\n        padding: 70px 0 0;\n      }\n    }\n\n    &:nth-child(3n+1) .content-col {\n      background: #A5B5AA;\n    }\n\n    &:nth-child(3n+2) .content-col {\n\n      background: #6C6B7A;\n    }\n\n    &:nth-child(3n+3) .content-col {\n      background: #296F8C;\n    }\n\n    @media (min-width: $mobile-size + 1px) {\n      &:nth-child(even) {\n        flex-direction: row-reverse;\n        .img-col {\n          .img-wrap {\n            right: auto;\n            left: 0;\n          }\n        }\n      }\n    }\n\n    .title {\n      font-size: 30px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 1.5px;\n    }\n    .desc {\n      padding: 20px 0 0;\n      line-height: 1.3;\n      letter-spacing: .5px;\n\n      p + p {\n        margin: 20px 0 0;\n      }\n    }\n\n    .content-col {\n      color: white;\n      padding: 50px;\n      z-index: 1;\n      position: relative;\n\n      @media (max-width: $mobile-size) {\n        padding: 30px;\n      }\n\n      @media (min-width: $mobile-size + 1px) {\n        width: 50%;\n      }\n    }\n\n    .img-col {\n      position: relative;\n\n      @media (min-width: $mobile-size + 1px) {\n        width: 50%;\n      }\n\n      @media (max-width: $mobile-size) {\n        min-height: 400px;\n      }\n\n      .img-wrap {\n        position: absolute;\n        right: 0;\n        top: -20px;\n        width: calc(100% + 40px);\n        height: calc(100% + 40px);\n\n        @media (max-width: $mobile-size) {\n          right: -20px;\n        }\n\n\n        &:before {\n          content: '';\n          position: absolute;\n          left: 0;\n          top: 0;\n          right: 0;\n          bottom: 0;\n          background: rgba(0, 0, 0, 0.15);\n        }\n      }\n    }\n  }\n}"]}