shards-ui/dist/css/shards-extras.min.css.map

A free, modern and lightweight Bootstrap 4 UI toolkit for web makers.

{"version":3,"sources":["../../src/extras/scss/_agency-landing.scss","../../node_modules/bootstrap/scss/mixins/_breakpoints.scss","../../src/extras/scss/_app-promo.scss"],"names":[],"mappings":"AACA,iCAII,SAAA,SACA,OAAA,MACA,WAAA,MACA,WAAA,gDAAA,UAAA,OAAA,OAAA,MACA,gBAAA,MARJ,wCAWM,SAAA,SACA,QAAA,EACA,QAAA,GACA,IAAA,EACA,KAAA,EACA,MAAA,EACA,OAAA,EACA,QAAA,GACA,WAAA,QCqDF,4BDxEJ,gDAwBQ,WAAA,QAIJ,yBA5BJ,kDA8BQ,UAAA,UA9BR,uCAsCI,SAAA,SAtCJ,6CAwCM,QAAA,GACA,MAAA,KACA,OAAA,IACA,WAAA,QACA,SAAA,SACA,KAAA,IACA,YAAA,MACA,OAAA,MA/CN,uCAsDM,cAAA,IACA,UAAA,KACA,OAAA,KACA,YAAA,KACA,WAAA,OACA,WAAA,EAAA,IAAA,IAAA,iBAAA,CAAA,EAAA,IAAA,KAAA,kBACA,UAAA,KA5DN,iCAkEI,cAAA,IAAA,MAAA,QAlEJ,wCAuEI,WAAA,QAvEJ,8CA4EI,UAAA,KACA,SAAA,OE7EJ,mCAKQ,SAAA,SACA,OAAA,MACA,WAAA,MACA,WAAA,2CAAA,UAAA,OAAA,OAAA,MACA,gBAAA,MATR,0CAYU,SAAA,SACA,QAAA,EACA,QAAA,GACA,IAAA,EACA,KAAA,EACA,MAAA,EACA,OAAA,EACA,QAAA,GACA,WAAA,QDoDN,4BCxEJ,mCAyBU,OAAA,KAzBV,wDA2BiC,QAAA,MD6C7B,4BCxEJ,mCA+BU,OAAA,KA/BV,kDAkCY,YAAA,OACA,WAAA,QAIJ,yBAvCR,oDAwC6B,UAAA,UAxC7B,kDA4CyB,UAAA,IA5CzB,yCAkDQ,SAAA,SAlDR,+CAqDU,QAAA,GACA,MAAA,KACA,OAAA,IACA,WAAA,QACA,SAAA,SACA,KAAA,IACA,YAAA,MACA,OAAA,MA5DV,+DAkEY,KAAA,EACA,YAAA,EAnEZ,0CA0EQ,WAAA,iDAAA,UAAA,OAAA,OAAA,MACA,gBAAA,MA3ER,iDA8EU,QAAA,GACA,SAAA,SACA,IAAA,EACA,KAAA,EACA,OAAA,EACA,MAAA,EACA,WAAA,QACA,QAAA,GArFV,8CAyFU,UAAA,MACA,SAAA,SACA,QAAA,EACA,IAAA,IACA,KAAA,KACA,kBAAA,qBAAA,UAAA,qBACA,WAAA,EAAA,KAAA,KAAA,eAAA,CAAA,EAAA,KAAA,MAAA,qBDvBN,4BCxEJ,8CAmGY,QAAA,MACA,SAAA,OACA,kBAAA,aAAA,UAAA,aACA,OAAA,EAAA,MAtGZ,yCA8GU,cAAA,IACA,UAAA,KACA,OAAA,KACA,YAAA,KACA,WAAA,OACA,WAAA,EAAA,IAAA,IAAA,iBAAA,CAAA,EAAA,IAAA,KAAA,kBACA,UAAA,KD5CN,4BCxEJ,yCAuHY,aAAA,kBAvHZ,8CA6HQ,OAAA,KA7HR,mCAiIiB,cAAA,IAAA,MAAA,QAjIjB,0CAoIwB,WAAA,QApIxB,gDAwIQ,UAAA,KACA,SAAA,ODjEJ,4BCxEJ,4CAAA,2CA+I0B,MAAA","sourcesContent":["// Landing page styles.\n.shards-landing-page--1 {\n  // Welcome section\n  // Sets up the background cover image and the overlay gradient.\n  .welcome {\n    position: relative;\n    height: 100vh;\n    min-height: 700px;\n    background: url('../images/agency-landing/welcome-cover.jpg') no-repeat center center fixed;\n    background-size: cover;\n\n    &:before {\n      position: absolute;\n      z-index: 0;\n      content: '';\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      opacity: .8;\n      background: theme-color(\"primary\");\n    }\n\n    @include media-breakpoint-down(sm) {\n      .inner-wrapper {\n        text-align: center;\n      }\n    }\n\n    @media (max-width: 400px) {\n      .welcome-heading {\n        font-size: 2.415rem;\n      }\n    }\n  }\n\n  // Custom section title styling.\n  // Adds the small border at the bottom of each section title.\n  .section-title {\n    position: relative;\n    &:after {\n      content: '';\n      width: 30px;\n      height: 2px;\n      background: theme-color(\"primary\");\n      position: absolute;\n      left: 50%;\n      margin-left: -15px;\n      bottom: -20px;\n    }\n  }\n\n  // Features\n  .feature {\n    .icon {\n      border-radius: 50%;\n      min-width: 65px;\n      height: 65px;\n      line-height: 65px;\n      text-align: center;\n      box-shadow: 0 2px 4px rgba(#212529, .1), 0 7px 14px rgba(#212529, .1);\n      font-size: 27px;\n    }\n  }\n\n  // Better separation between sections.\n  .section {\n    border-bottom: 1px solid lighten($blueish-grey, 54);\n  }\n\n  // Add a different tint to some sections.\n  .section-invert {\n    background: #f9fafc;\n  }\n\n  // Testimonials Section\n  .testimonials .avatar {\n    max-width: 80px;\n    overflow: hidden;\n  }\n}\n","// 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}\n","// App promo landing page styles.\n.shards-app-promo-page--1 {\n\n      // Welcome section.\n      // Sets up the background cover image and the overlay gradient.\n      .welcome {\n        position: relative;\n        height: 100vh;\n        min-height: 700px;\n        background: url('../images/app-promo/welcome-cover.jpg') no-repeat center center fixed;\n        background-size: cover;\n\n        &:before {\n          position: absolute;\n          z-index: 0;\n          content: '';\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          opacity: .9;\n          background: theme-color(\"dark\");\n        }\n\n        // Responsive adjustments.\n        @include media-breakpoint-down(md) {\n          height: auto;\n\n          .header-social-icons { display: none; }\n        }\n\n        @include media-breakpoint-down(sm) {\n          height: auto;\n\n          .inner-wrapper {\n            padding-top: $spacer * 3;\n            text-align: center;\n          }\n        }\n\n        @media (max-width: 400px) {\n          .welcome-heading { font-size: 2.415rem; }\n        }\n\n        // Fine tuning the width as there's no utility class for 85 (yet).\n        .iphone-mockup { max-width: 85%; }\n      }\n\n      // Custom section title styling.\n      // Adds the small border at the bottom of each section title.\n      .section-title {\n        position: relative;\n\n        &:after {\n          content: '';\n          width: 30px;\n          height: 2px;\n          background: theme-color(\"success\");\n          position: absolute;\n          left: 50%;\n          margin-left: -15px;\n          bottom: -20px;\n        }\n\n        // Modifier that positions the bottom border in the left side.\n        &.underline--left {\n          &:after {\n            left: 0;\n            margin-left: 0;\n          }\n        }\n      }\n\n      // App screenshot.\n      .app-screenshot {\n        background: url('../images/app-promo/features-background.jpg') no-repeat center center fixed;\n        background-size: cover;\n\n        &:before {\n          content: '';\n          position: absolute;\n          top: 0;\n          left: 0;\n          bottom: 0;\n          right: 0;\n          background: theme-color(\"light\");\n          opacity: .6;\n        }\n\n        img {\n          max-width: 300px;\n          position: absolute;\n          z-index: 1;\n          top: 50%;\n          left: 100%;\n          transform: translate(-50%, -50%);\n          box-shadow: 0 13px 25px rgba(#000000, .05),\n                      0 60px 100px rgba(#C0C0C0, .5);\n\n          @include media-breakpoint-down(md) {\n            display: table;\n            position: static;\n            transform: translate(0);\n            margin: 0 auto;\n          }\n        }\n      }\n\n      // Product feature (individual elements).\n      .feature {\n        .icon {\n          border-radius: 50%;\n          min-width: 65px;\n          height: 65px;\n          line-height: 65px;\n          text-align: center;\n          box-shadow: 0 2px 4px rgba(#212529, .1), 0 7px 14px rgba(#212529, .1);\n          font-size: 27px;\n\n          @include media-breakpoint-down(sm) {\n            margin-right: $spacer !important;\n          }\n        }\n      }\n\n      .blog .card-img-top {\n        height: 100%;\n      }\n\n      // Better separation between sections.\n      .section { border-bottom: 1px solid lighten($blueish-grey, 54); }\n\n      // Section background variation for better separation.\n      .section-invert { background: #f9fafc; }\n\n      // Testimonials section avatar styling.\n      .testimonials .avatar {\n        max-width: 80px;\n        overflow: hidden;\n      }\n\n      // Subscribe box.\n      .subscribe {\n        @include media-breakpoint-down(sm) {\n          input, button { width: 100%; }\n        }\n      }\n    }\n"]}