@shawnsandy/mix/dist/fp/index.css.map

AtomMix--A toolkit for generating utility classes, components and styles-sheets for your design system, style-guide or website from SASS MAPS

{"version":3,"sources":["..\\sass\\foundations\\_html.scss","..\\sass\\foundations\\_extensions.scss","..\\sass\\foundations\\_settings.scss","..\\sass\\foundations\\_typography.scss","..\\sass\\foundations\\_nav.scss","..\\tokens\\_tokens.scss","..\\sass\\foundations\\_button.scss","..\\sass\\foundations\\_main.scss","..\\sass\\foundations\\_banner.scss","..\\sass\\foundations\\_grid.scss","..\\sass\\foundations\\_code.scss","..\\sass\\foundations\\input.scss","..\\sass\\foundations\\_list.scss"],"names":[],"mappings":"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","file":"index.css","sourceRoot":"..\\..\\src","sourcesContent":["@mixin mix-html {\r\n  html {\r\n    font-family: $mx-font-default;\r\n    -webkit-font-smoothing: antialiased !important;\r\n    height: 100% !important;\r\n    font-size: 85%;\r\n\r\n    @media all and (min-width: 580px) {\r\n      font-size: 95%;\r\n    }\r\n\r\n    @media all and (min-width: 1380px) {\r\n      font-size: 100%;\r\n    }\r\n    background-color: #fff;\r\n    min-width: 375px;\r\n  }\r\n\r\n  * {\r\n    // transition: width 0.95s ease-in;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  body {\r\n    padding: 0 !important;\r\n    background-color: $mx-bg;\r\n    color: $mx-default-color;\r\n    max-width: 1980px;\r\n    margin: 0 auto;\r\n\r\n    @media print {\r\n      > *:not(main) {\r\n        display: none;\r\n      }\r\n    }\r\n    > nav,\r\n    > header,\r\n    > main,\r\n    > section,\r\n    > footer {\r\n      // padding: 2rem 0;\r\n      // > * + * {\r\n      //   margin-top: 3rem;\r\n      // }\r\n      > div,\r\n      > section,\r\n      > aside,\r\n      > article {\r\n        max-width: 90%;\r\n        margin: 0 auto;\r\n        @media screen and (min-width: 1280px) {\r\n          max-width: 1600px;\r\n          width: 80%;\r\n        }\r\n        @media screen and (min-width: 1980px) {\r\n          max-width: 1920px;\r\n        }\r\n      }\r\n      @content;\r\n    }\r\n\r\n    > nav {\r\n      padding: 0 0;\r\n    }\r\n\r\n    > header {\r\n      background-color: $mx-header-bg;\r\n      background-image: $mx-header-bg-img;\r\n      color: $mx-default-color;\r\n      min-height: $mx-header-vh;\r\n      @media screen and (min-width: 1280px) {\r\n      }\r\n    }\r\n\r\n    > footer {\r\n      min-height: $mx-footer-vh;\r\n      display: flex;\r\n      align-items: center;\r\n      align-content: stretch;\r\n      margin: 2rem 0 0;\r\n      background-color: $mx-footer-bg;\r\n      p {\r\n        text-align: center;\r\n      }\r\n      color: $mx-footer-color;\r\n    }\r\n\r\n  p {\r\n    span:first-of-type {\r\n      font-size: 1.3rem;\r\n      @extend %roboto;\r\n      }\r\n  }\r\n\r\n    section {\r\n      aside {\r\n        padding: 1rem;\r\n      }\r\n    }\r\n\r\n    hr {\r\n      border-top: 1px solid $mx-whitesmoke;\r\n      margin: 3rem 0;\r\n    }\r\n  }\r\n  [aria-hidden] {\r\n    display: none;\r\n  }\r\n\r\n}\r\n","%scrollbars {\r\n  &::-webkit-scrollbar {\r\n    width: 0.7rem;\r\n    border-radius: 4px;\r\n    &:hover {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  &::-webkit-scrollbar-track {\r\n    // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);\r\n    // border: 1px solid rgba(0,0,0,0.5);\r\n    background-color: rgba(0, 0, 0, 0.2);\r\n    border-radius: 1rem;\r\n  }\r\n\r\n  &::-webkit-scrollbar-thumb {\r\n    cursor: pointer;\r\n    background-color: gray;\r\n    //   outline: 1px solid slategrey;\r\n    border-radius: 1rem;\r\n  }\r\n}\r\n\r\n%btn-large {\r\n  font-size: 1.2rem;\r\n}\r\n\r\n%roboto {\r\n  font-family: \"Roboto Slab\", serif;\r\n  // font-weight: 500;\r\n}\r\n","$mx-default-color: rgba(0, 0, 0, 0.8);\r\n$mx-white: #fff !default;\r\n$mx-transparent: transparent !default;\r\n$mx-whitesmoke: snow !default;\r\n$mx-silver: silver !default;\r\n$mx-gray: gray !default;\r\n$mx-lightgray: lightgray !default;\r\n$mx-lightblue: lightblue !default;\r\n$mx-blue: #0366d6 !default;\r\n$mx-dark-blue: darkblue !default;\r\n$mx-font-default: “Segoe UI”, BlinkMacSystemFont,\r\n  “Oxygen”, “Ubuntu”, “Cantarell”, “Fira Sans”, “Droid Sans”, “Helvetica Neue” ,\r\n  sans-serif !default;\r\n$mx-bg: $mx-white !default;\r\n$mx-main-vh: 40vh !default;\r\n$mx-header-vh: 55vh !default;\r\n$mx-header-bg: transparent !default;\r\n$mx-header-bg-img: none !default;\r\n$mx-header-color: $mx-default-color !default;\r\n$mx-footer-vh: 10vh !default;\r\n$mx-footer-bg: $mx-default-color !default;\r\n$mx-footer-color: $mx-white;\r\n$mx-nav-min-height: 5rem !default;\r\n$mx-nav-bg: $mx-transparent !default;\r\n$mx-nav-bg-hover: darken(rgba(0, 0, 0, 0.1), 20%) !default;\r\n$mx-button-bg: $mx-default-color;\r\n$mx-button-color: $mx-white;\r\n$mx-grid-cols: 4;\r\n","@mixin mix-typography {\r\n  h1,\r\n  h2,\r\n  h3,\r\n  h4,\r\n  h5 {\r\n    line-height: 1.5;\r\n    color: inherit;\r\n    margin: 0rem 0 1.05rem;\r\n    font-weight: 500;\r\n  }\r\n\r\n  h1 {\r\n    font-size: 5rem;\r\n    word-break: break-all;\r\n  }\r\n\r\n  h2 {\r\n    font-size: 3rem;\r\n  }\r\n\r\n  h3 {\r\n    font-size: 2.5rem;\r\n  }\r\n\r\n  h4 {\r\n    font-size: 1.777rem;\r\n  }\r\n\r\n  h5 {\r\n    font-size: 1.4rem;\r\n  }\r\n\r\n  small,\r\n  .text_small {\r\n    font-size: 0.75rem;\r\n  }\r\n\r\n  p {\r\n    line-height: 1.7;\r\n  }\r\n  @content;\r\n}\r\n","/**\r\n * navbar\r\n */\r\n\r\n@mixin mix-navbar {\r\n  nav[aria-label] {\r\n    background-color: $mx-nav-bg;\r\n    @include mix-nav();\r\n    @include mix-nav-links();\r\n    &:first-of-type {\r\n      @media all and (min-width: 980px) {\r\n        min-height: $mx-layout-height-vh-10;\r\n        height: $mx-nav-min-height;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n// base navbar\r\n@mixin mix-nav {\r\n  > section,\r\n  > div,\r\n  > ul {\r\n    height: 100%;\r\n    @media all and (min-width: 960px) {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n    }\r\n\r\n    //  navigation logo\r\n    h1 {\r\n      margin: 0;\r\n      display: inline-flex;\r\n      height: inherit;\r\n      word-break: normal;\r\n      margin: 0 1rem 0 0;\r\n      padding: 0 1rem 0 0;\r\n      height: $mx-nav-min-height;\r\n      * + * {\r\n        margin-left: 0.5rem;\r\n      }\r\n      img {\r\n        max-height: 70%;\r\n        width: auto;\r\n        // padding: 0.3rem;\r\n        // margin: 0.3rem;\r\n      }\r\n      span {\r\n        font-size: 1.5rem;\r\n        color: $mx-default-color;\r\n      }\r\n    }\r\n    [aria-hidden] {\r\n      display: inline-flex;\r\n      @media all and (min-width: 980px) {\r\n        display: none;\r\n      }\r\n    }\r\n  }\r\n  ul {\r\n    padding: 0;\r\n    list-style: none;\r\n  }\r\n  div {\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    a {\r\n      display: inline-flex;\r\n    }\r\n  }\r\n}\r\n\r\n// Nav links\r\n@mixin mix-nav-links {\r\n  a,\r\n  li {\r\n    text-align: center;\r\n    display: flex;\r\n    align-items: center;\r\n    height: 100% !important;\r\n    font-size: smaller;\r\n    padding: 0.5rem;\r\n\r\n    &[aria-label*=\"logo\"],\r\n    &[aria-label*=\"branding\"] {\r\n      text-align: center;\r\n      height: 100% !important;\r\n      &:hover,\r\n      &:focus {\r\n        background-color: transparent;\r\n      }\r\n    }\r\n    text-decoration: none;\r\n    &:hover,\r\n    &:focus {\r\n      background-color: $mx-nav-bg-hover;\r\n      opacity: 0.95;\r\n    }\r\n\r\n    @media all and (min-width: 980px) {\r\n      padding: 0 1.5rem;\r\n    }\r\n  }\r\n\r\n  li {\r\n    a {\r\n      padding: 0;\r\n    }\r\n  }\r\n}\r\n","\r\n/*\r\n  Do not edit directly\r\n  Generated on Sat, 06 Jun 2020 20:11:06 GMT\r\n*/\r\n\r\n$mx-button-padding: 0 1.5rem !default;\r\n$mx-buttons-btn-height: 2.5rem !default;\r\n$mx-buttons-btn-padding: 0 1.5rem !default;\r\n$mx-buttons-btn-display: inline-block !default;\r\n$mx-buttons-btn-text-align: center !default;\r\n$mx-buttons-btn-transition: all .2s !default;\r\n$mx-buttons-btn-border: none !default;\r\n$mx-buttons-btn-focus-border: none !default;\r\n$mx-buttons-btn-focus-outline: none !default;\r\n$mx-buttons-btn-pill-border-radius: 9999rem !default;\r\n$mx-buttons-btn-rounded-border-radius: 0.31rem !default;\r\n$mx-color-black: #000000 !default;\r\n$mx-color-white: #ffffff !default;\r\n$mx-color-gray: #6a737d !default;\r\n$mx-color-lightgray: #d3d3d3 !default;\r\n$mx-color-red: #d73a49 !default;\r\n$mx-color-blue: #0366d6 !default;\r\n$mx-color-orange: #f66a0a !default;\r\n$mx-color-yellow: #ffd33d !default;\r\n$mx-color-green: #008000 !default;\r\n$mx-font-size-group-default: 1rem !default; // default font size 16px.\r\n$mx-font-size-group-1-sm: 0.702rem !default; // 11px - used for fine print\r\n$mx-font-size-group-2-sm: 0.79rem !default; // 12px great for notes small text.\r\n$mx-font-size-group-3-sm: 0.889rem !default; // 14px sidebar, links, navs, product list\r\n$mx-font-size-group-4-md: 1.26rem !default; // 18px great for long posts, blogs\r\n$mx-font-size-group-5-md: 1.424rem !default; // 22px\r\n$mx-font-size-group-6-md: 1.602rem !default; // 25px\r\n$mx-font-size-group-7-lg: 1.802rem !default; // 28px descriptions...\r\n$mx-font-size-group-8-lg: 2.369rem !default; // 37px descriptions...\r\n$mx-font-size-group-9-lg: 3.157rem !default; // 50px descriptions...\r\n$mx-font-size-group-10-xl: 4.209rem !default; // 67px descriptions...\r\n$mx-font-size-group-11-xl: 5.61rem !default; // 90px descriptions...\r\n$mx-font-size-group-12-xl: 7.478rem !default; // 120px descriptions...\r\n$mx-font-weight-medium: 500 !default; // descriptions...\r\n$mx-font-weight-bold: 700 !default; // descriptions...\r\n$mx-letter-spacing-group-1-sm: 1rem !default;\r\n$mx-layout-height-vh-5: 5vh !default;\r\n$mx-layout-height-vh-10: 10vh !default;\r\n$mx-layout-height-vh-20: 20vh !default;\r\n$mx-layout-height-vh-30: 30vh !default;\r\n$mx-layout-height-vh-40: 40vh !default;\r\n$mx-layout-height-vh-50: 50vh !default;\r\n$mx-layout-height-vh-60: 60vh !default;\r\n$mx-layout-height-vh-70: 70vh !default;\r\n$mx-layout-height-vh-80: 80vh !default;\r\n$mx-layout-height-vh-90: 90vh !default;\r\n$mx-layout-height-vh-100: 100vh !default;\r\n$mx-layout-width-vw-5: 5vw !default;\r\n$mx-layout-width-vw-10: 10vw !default;\r\n$mx-layout-width-vw-20: 20vw !default;\r\n$mx-layout-width-vw-30: 30vw !default;\r\n$mx-layout-width-vw-40: 40vw !default;\r\n$mx-layout-width-vw-50: 50vw !default;\r\n$mx-layout-width-vw-60: 60vw !default;\r\n$mx-layout-width-vw-70: 70vw !default;\r\n$mx-layout-width-vw-80: 80vw !default;\r\n$mx-layout-width-vw-90: 90vw !default;\r\n$mx-layout-width-vw-100: 100vw !default;\r\n$mx-links-primary-color: #000000 !default;\r\n$mx-links-primary-hover-color: #010101 !default;\r\n$mx-nav-nav-bar-display: flex !default;\r\n$mx-nav-nav-bar-align-items: center !default;\r\n$mx-nav-nav-bar-height: 60px !default;\r\n$mx-nav-nav-bar-elm-padding: 0 1rem !default;\r\n$mx-nav-nav-bar-list-display: flex !default;\r\n$mx-nav-nav-bar-list-flex-direction: row !default;\r\n$mx-nav-nav-bar-list-list-style: none !default;\r\n$mx-nav-nav-bar-list-margin: auto 0 !default;\r\n$mx-nav-nav-bar-sm-height: 20rem !important !default;\r\n$mx-nav-nav-bar-md-height: 40rem !important !default;\r\n$mx-nav-nav-bar-lg-height: 80rem !important !default;\r\n$mx-nav-nav-bar-xl-height: 100rem !important !default;\r\n$mx-truncate-clip-box-overflow: hidden !default;\r\n$mx-truncate-clip-box-position: relative !default;\r\n$mx-truncate-clip-box-line-height: 1rem !default;\r\n$mx-truncate-clip-box-max-height: 3rem !default;\r\n$mx-truncate-clip-box-text-align: null !default;\r\n$mx-truncate-clip-box-margin-right: -1rem !default;\r\n$mx-truncate-clip-box-padding-right: 1rem !default;\r\n$mx-truncate-clip-box-before-content: \"...\" !default;\r\n$mx-truncate-clip-box-before-position: absolute !default;\r\n$mx-truncate-clip-box-before-right: 0 !default;\r\n$mx-truncate-clip-box-before-bottom: 0 !default;\r\n$mx-truncate-clip-box-after-content: \"\" !default;\r\n$mx-truncate-clip-box-after-position: absolute !default;\r\n$mx-truncate-clip-box-after-right: 0 !default;\r\n$mx-truncate-clip-box-after-width: 1rem !default;\r\n$mx-truncate-clip-box-after-height: 1rem !default;\r\n$mx-truncate-clip-box-after-background: transparent !default;\r\n\r\n$tokens: (\r\n  'button-padding': $mx-button-padding,\r\n  'buttons': (\r\n    'btn': (\r\n      'height': $mx-buttons-btn-height,\r\n      'padding': $mx-buttons-btn-padding,\r\n      'display': $mx-buttons-btn-display,\r\n      'text-align': $mx-buttons-btn-text-align,\r\n      'transition': $mx-buttons-btn-transition,\r\n      'border': $mx-buttons-btn-border,\r\n      'focus': (\r\n        'border': $mx-buttons-btn-focus-border,\r\n        'outline': $mx-buttons-btn-focus-outline\r\n      ),\r\n      'pill': (\r\n        'border-radius': $mx-buttons-btn-pill-border-radius\r\n      ),\r\n      'rounded': (\r\n        'border-radius': $mx-buttons-btn-rounded-border-radius\r\n      )\r\n    )\r\n  ),\r\n  'color': (\r\n    'black': $mx-color-black,\r\n    'white': $mx-color-white,\r\n    'gray': $mx-color-gray,\r\n    'lightgray': $mx-color-lightgray,\r\n    'red': $mx-color-red,\r\n    'blue': $mx-color-blue,\r\n    'orange': $mx-color-orange,\r\n    'yellow': $mx-color-yellow,\r\n    'green': $mx-color-green\r\n  ),\r\n  'font': (\r\n    'size': (\r\n      'group': (\r\n        'default': $mx-font-size-group-default,\r\n        '1sm': $mx-font-size-group-1-sm,\r\n        '2sm': $mx-font-size-group-2-sm,\r\n        '3sm': $mx-font-size-group-3-sm,\r\n        '4md': $mx-font-size-group-4-md,\r\n        '5md': $mx-font-size-group-5-md,\r\n        '6md': $mx-font-size-group-6-md,\r\n        '7lg': $mx-font-size-group-7-lg,\r\n        '8lg': $mx-font-size-group-8-lg,\r\n        '9lg': $mx-font-size-group-9-lg,\r\n        '10xl': $mx-font-size-group-10-xl,\r\n        '11xl': $mx-font-size-group-11-xl,\r\n        '12xl': $mx-font-size-group-12-xl\r\n      )\r\n    ),\r\n    'weight': (\r\n      'medium': $mx-font-weight-medium,\r\n      'bold': $mx-font-weight-bold\r\n    )\r\n  ),\r\n  'letter': (\r\n    'spacing': (\r\n      'group': (\r\n        '1sm': $mx-letter-spacing-group-1-sm\r\n      )\r\n    )\r\n  ),\r\n  'layout': (\r\n    'height': (\r\n      'vh-5': $mx-layout-height-vh-5,\r\n      'vh-10': $mx-layout-height-vh-10,\r\n      'vh-20': $mx-layout-height-vh-20,\r\n      'vh-30': $mx-layout-height-vh-30,\r\n      'vh-40': $mx-layout-height-vh-40,\r\n      'vh-50': $mx-layout-height-vh-50,\r\n      'vh-60': $mx-layout-height-vh-60,\r\n      'vh-70': $mx-layout-height-vh-70,\r\n      'vh-80': $mx-layout-height-vh-80,\r\n      'vh-90': $mx-layout-height-vh-90,\r\n      'vh-100': $mx-layout-height-vh-100\r\n    ),\r\n    'width': (\r\n      'vw5': $mx-layout-width-vw-5,\r\n      'vw10': $mx-layout-width-vw-10,\r\n      'vw20': $mx-layout-width-vw-20,\r\n      'vw30': $mx-layout-width-vw-30,\r\n      'vw40': $mx-layout-width-vw-40,\r\n      'vw50': $mx-layout-width-vw-50,\r\n      'vw60': $mx-layout-width-vw-60,\r\n      'vw70': $mx-layout-width-vw-70,\r\n      'vw80': $mx-layout-width-vw-80,\r\n      'vw90': $mx-layout-width-vw-90,\r\n      'vw100': $mx-layout-width-vw-100\r\n    )\r\n  ),\r\n  'links': (\r\n    'primary': (\r\n      'color': $mx-links-primary-color,\r\n      'hover': (\r\n        'color': $mx-links-primary-hover-color\r\n      )\r\n    )\r\n  ),\r\n  'nav': (\r\n    'nav-bar': (\r\n      'display': $mx-nav-nav-bar-display,\r\n      'align-items': $mx-nav-nav-bar-align-items,\r\n      'height': $mx-nav-nav-bar-height,\r\n      'elm': (\r\n        'padding': $mx-nav-nav-bar-elm-padding\r\n      ),\r\n      'list': (\r\n        'display': $mx-nav-nav-bar-list-display,\r\n        'flex-direction': $mx-nav-nav-bar-list-flex-direction,\r\n        'list-style': $mx-nav-nav-bar-list-list-style,\r\n        'margin': $mx-nav-nav-bar-list-margin\r\n      ),\r\n      'sm': (\r\n        'height': $mx-nav-nav-bar-sm-height\r\n      ),\r\n      'md': (\r\n        'height': $mx-nav-nav-bar-md-height\r\n      ),\r\n      'lg': (\r\n        'height': $mx-nav-nav-bar-lg-height\r\n      ),\r\n      'xl': (\r\n        'height': $mx-nav-nav-bar-xl-height\r\n      )\r\n    )\r\n  ),\r\n  'truncate': (\r\n    'clip-box': (\r\n      'overflow': $mx-truncate-clip-box-overflow,\r\n      'position': $mx-truncate-clip-box-position,\r\n      'line-height': $mx-truncate-clip-box-line-height,\r\n      'max-height': $mx-truncate-clip-box-max-height,\r\n      'text-align': $mx-truncate-clip-box-text-align,\r\n      'margin-right': $mx-truncate-clip-box-margin-right,\r\n      'padding-right': $mx-truncate-clip-box-padding-right,\r\n      'before': (\r\n        'content': $mx-truncate-clip-box-before-content,\r\n        'position': $mx-truncate-clip-box-before-position,\r\n        'right': $mx-truncate-clip-box-before-right,\r\n        'bottom': $mx-truncate-clip-box-before-bottom\r\n      ),\r\n      'after': (\r\n        'content': $mx-truncate-clip-box-after-content,\r\n        'position': $mx-truncate-clip-box-after-position,\r\n        'right': $mx-truncate-clip-box-after-right,\r\n        'width': $mx-truncate-clip-box-after-width,\r\n        'height': $mx-truncate-clip-box-after-height,\r\n        'background': $mx-truncate-clip-box-after-background\r\n      )\r\n    )\r\n  )\r\n);\r\n","// styles a link as button rel=action=\"action payment\"\r\n\r\n\r\n$button-color: $mx-button-color;\r\n$button-bg: $mx-button-bg;\r\n@mixin mix-button {\r\n  [role*=\"button\"],\r\n  button {\r\n   \r\n    // Display\r\n    @supports (align-items: center) {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      align-self: start; // Optional - see \"Gotchas\"\r\n    }\r\n    border: none;\r\n    font-family: inherit;\r\n    cursor: pointer;\r\n    text-decoration: none;\r\n\r\n    // Visual\r\n    background-color: $button-bg;\r\n    color: $button-color;\r\n    border-radius: 2px;\r\n    // border-color: darken($mx-lightgray, 5);\r\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.13);\r\n    transition: background-color 0.95s ease-out;\r\n    font-size: smaller;\r\n\r\n    // Size\r\n    padding: 0.8rem 1.6rem;\r\n    min-height: 44px;\r\n\r\n    // Text\r\n    text-align: center;\r\n    line-height: 1.1;\r\n\r\n    &:hover,\r\n    &:active {\r\n      background-color: lighten($button-bg, 15%);\r\n      color: darken($button-color, 10%);\r\n    }\r\n\r\n    &:focus {\r\n      outline-style: solid;\r\n      outline-color: transparent;\r\n      box-shadow: 0 0 0 1px darken($button-color, 50);\r\n    }\r\n\r\n    &[type=\"submit\"],\r\n    &[aria-label] {\r\n      @extend %btn-large;\r\n      // background-color: $mx-blue;\r\n      border-color: transparent;\r\n      color: $mx-white;\r\n      &:hover {\r\n        // background-color: darken($mx-blue, 10);\r\n      }\r\n    }\r\n    span {\r\n      display: flex;\r\n    }\r\n  }\r\n}\r\n","@mixin mix-main {\r\n  main {\r\n    min-height: $mx-main-vh;\r\n    // padding: 2rem 0;\r\n    > section {\r\n      width: 100%;\r\n      article {\r\n        padding: 1rem;\r\n        width: 100%;\r\n        font-size: 1;\r\n        > * + * {\r\n          margin-top: 2rem;\r\n        }\r\n      }\r\n\r\n      article + aside,\r\n      [role=\"complementary\"] {\r\n        width: 100%;\r\n        padding: 1rem;\r\n        font-size: 0.95rem;\r\n      }\r\n      @media all and (min-width: 1280px) {\r\n        display: flex;\r\n        align-items: flex-start;\r\n        article + aside,\r\n        [role=\"complementary\"] {\r\n          min-width: 25%;\r\n          max-width: 25%;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n","@mixin mix-banner {\r\n  header {\r\n    > section,\r\n    > [role=\"banner\"] {\r\n      min-height: inherit;\r\n      min-width: inherit;\r\n      font-size: larger;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex-direction: column;\r\n      box-sizing: border-box;\r\n      padding: 1rem;\r\n      text-align: center;\r\n      h1,\r\n      h2,\r\n      h3,\r\n      h4,\r\n      h5 {\r\n        margin-top: 0;\r\n      }\r\n      p {\r\n        font-size: 1.4rem;\r\n      }\r\n      padding: 3rem 0;\r\n      > div > * + * {\r\n        margin-top: 1rem;\r\n      }\r\n      @content;\r\n    }\r\n  }\r\n}\r\n","@mixin mix-flex-grid {\r\n  section {\r\n    > [role=\"list\"] {\r\n      padding: 3rem 0;\r\n      box-sizing: border-box;\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      justify-content: flex-start;\r\n\r\n      [role=\"listitem\"] {\r\n        // flex-basis: 100%;\r\n        flex: 1 1 33%;\r\n        padding: 1rem;\r\n        line-height: 1.6;\r\n      }\r\n\r\n      @media all and (min-width: 580px) and (mmax-width: 980px) {\r\n        footer {\r\n          [role=\"listitem\"] {\r\n            max-width: auto;\r\n            flex: 1 1 100%;\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n","@mixin mix-code-area {\r\n  code {\r\n    background-color: $mx-default-color;\r\n    color: $mx-silver;\r\n    width: 99%;\r\n    border-radius: 2px;\r\n    display: flex;\r\n    min-height: 1.5rem;\r\n    > span {\r\n      padding: 0 .5rem;\r\n      display: inline-flex;\r\n      width: auto;\r\n      font-size: 0.8rem !important;\r\n    }\r\n    overflow: hidden;\r\n    overflow-y: auto;\r\n    // display: block;\r\n    // @extend %scrollbars;\r\n    > textarea {\r\n      width: 99%;\r\n      height: 300px;\r\n      background-color: transparent;\r\n      color: $mx-silver;\r\n      // padding: 1.5rem;\r\n      margin: 1rem;\r\n      font-size: 1.2rem;\r\n      line-height: 1.5;\r\n      font-family: monospace;\r\n      border-color: transparent;\r\n      resize: none;\r\n      outline: none;\r\n      @extend %scrollbars;\r\n    }\r\n  }\r\n}\r\n","@mixin mix-inputs {\r\n  label[for] {\r\n    &::before {\r\n      content: \"\\2911\";\r\n    }\r\n    font-size: 0.9rem;\r\n    display: block;\r\n    & + input,\r\n    & + textarea,\r\n    & + select {\r\n      background-color: $mx-whitesmoke;\r\n      display: flex;\r\n      margin: 0.1rem 0 1rem;\r\n      padding: 0.5rem;\r\n      font-size: 0.9rem;\r\n      width: 100%;\r\n      &::placeholder {\r\n        font-style: italic;\r\n        color: lightgrey;\r\n      }\r\n      &[type=\"email\"] {\r\n        // margin: 1rem 0 0;\r\n      }\r\n    }\r\n    & + select {\r\n      -moz-appearance: none;\r\n      -webkit-appearance: none;\r\n      appearance: none;\r\n      // background-color: #fff;\r\n      background-image: url(\"data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E\");\r\n      background-repeat: no-repeat, repeat;\r\n      background-position: right 0.7em top 50%, 0 0;\r\n      background-size: 0.65em auto, 100%;\r\n    }\r\n\r\n    & + textarea {\r\n      min-height: 150px;\r\n    }\r\n  }\r\n  // label[for*=\"email\"]::before {\r\n  //   content: \"\\0040\";\r\n  // }\r\n}\r\n","@mixin mix-list {\r\n  ol, ul, dl {\r\n    margin-left: .0rem;\r\n    padding-left: 1.5rem;\r\n    > * + * {\r\n      margin-top: .7rem;\r\n    }\r\n  }\r\n\r\n  span  {\r\n    > ol, ul {\r\n      list-style: none;\r\n      margin-left: .0rem;\r\n      padding-left: 0rem;\r\n    }\r\n  }\r\n}\r\n"]}