bui-css/lib/css/bui.css.map

A contemporary, approachable css library for prototyping and beyond

{"version":3,"sources":["base/typography.scss","vars/color.scss","vars/metrics.scss","base/container.scss","bui.css","base/aspects.scss","base/modifiers.scss","components/anchor.scss","components/list.scss","components/nav.scss","components/recess.scss","components/tile.scss","components/table.scss","components/blockquote.scss","components/button.scss","<no source>","components/input.scss","bui.scss"],"names":[],"mappings":"AAME,wEAAY;AAaZ,8EAAY;AAQd;EACE,gDAJO;EAKP,kBAAkB,EACnB;;AAED;EAEE,WC9BW;ED+BX,8DAtBY;EAuBZ,eE3BY;EF4BZ,gBAAgB;EAChB,kCAAkC,EACnC;;AAED;EACE,gBAAgB,EACjB;;AAsBD;EAEE,oBAAW,EACZ;;AAED;EAEE,oBAAW,EACZ;;AAED;EAEE,gBAAW,EACZ;;AAED;EAEE,oBAAW,EACZ;;AAED;EAEE,oBAAW,EACZ;;AAED;EACE,cAAW,EACZ;;AAED;EACE,mBAAW,EACZ;;AG9FD;EACE,YAAY;EACZ,eAAiB;EACjB,gBDAW;ECCX,cAAc;EACd,kBAAkB;EAClB,UAAU,EACX;;ACmFD;EChFE,2BAA2B;EAC3B,sBAAsB,EAMvB;ED4EC;IC/EE,WAAW;IACX,cAAc,EACf;;AAID;EACE,sBAAa,EACd;;AAED;EACE,uBAAa,EACd;;AAND;EACE,mBAAa,EACd;;AAED;EACE,uBAAa,EACd;;AAND;EACE,sBAAa,EACd;;AAED;EACE,iBAAa,EACd;;AAND;EACE,sBAAa,EACd;;AAED;EACE,iBAAa,EACd;;AAND;EACE,gBAAa,EACd;;AAED;EACE,uBAAa,EACd;;AAND;EACE,gBAAa,EACd;;AAED;EACE,uBAAa,EACd;;AAND;EACE,sBAAa,EACd;;AAED;EACE,iBAAa,EACd;;AAND;EACE,gBAAa,EACd;;AAED;EACE,iBAAa,EACd;ACvBH;EACE,cAAc;EACd,UAAU;EACV,cAAc,EACf;;AAED;EAEE,sBLHY;EKIZ,WLVW,EKmBZ;EAZD;IAMI,WLec,EKVf;IAXH;MASM,WLkBa,EKjBd;;AAIL;EACE,sBLxBW;EKyBX,WLjBY,EK0Bb;EAXD;IAKI,WLpBU,EKyBX;IAVH;MAQM,WLvBQ,EKwBT;;AAIL;EACE,sBLnCW;EKoCX,WLhCW,EKyCZ;EAXD;IAKI,WLTc,EKcf;IAVH;MAQM,WLNa,EKOd;;AAIL;EACE,sBL9CW;EK+CX,WLnDW,EK4DZ;EAXD;IAKI,WLzBc,EK8Bf;IAVH;MAQM,WLtBa,EKuBd;;AAIL;EACE,sBLzDW;EK0DX,WLhEW,EKyEZ;EAXD;IAKI,WLrCc,EK0Cf;IAVH;MAQM,WLlCa,EKmCd;;AAIL;EAEI,sBLhDc;EKiDd,WLtEU,EKuEX;;AAJH;EAOI,sBLpDc;EKqDd,WLnDc,EKoDf;;AATH;EAYI,sBLxDc;EKyDd,WL3Dc,EK4Df;;AAdH;EAiBI,sBL5Dc;EK6Dd,WLhEc,EKiEf;;AAnBH;EAsBI,sBLzFU;EK0FV,WLrEc,EKsEf;;AAGH;EAEI,sBLjFc;EKkFd,WLjGU,EKkGX;;AAJH;EAOI,sBLrFc;EKsFd,cLpFiB,EKqFlB;;AATH;EAYI,sBLzFc;EK0Fd,WL5Fc,EK6Ff;;AAdH;EAiBI,yBL7FiB;EK8FjB,WLjGc,EKkGf;;AAnBH;EAsBI,sBLpHU;EKqHV,WLtGc,EKuGf;;AAGH;EAEI,sBLlHc;EKmHd,WL5HU,EK6HX;;AAJH;EAOI,sBLtHc;EKuHd,WLrHc,EKsHf;;AATH;EAYI,sBL1Hc;EK2Hd,WL7Hc,EK8Hf;;AAdH;EAiBI,sBL9Hc;EK+Hd,WLlIc,EKmIf;;AAnBH;EAsBI,sBL/IU;EKgJV,WLvIc,EKwIf;;AAGH;EAEI,sBLnJa;EKoJb,WLvJU,EKwJX;;AAJH;EAOI,sBLvJa;EKwJb,WLtJa,EKuJd;;AATH;EAYI,sBL3Ja;EK4Jb,WL9Ja,EK+Jd;;AAdH;EAiBI,sBL/Ja;EKgKb,WLnKa,EKoKd;;AAnBH;EAsBI,sBL1KU;EK2KV,WLxKa,EKyKd;;AAGH;EAEI,sBLtJe;EKuJf,WLlLU,EKmLX;;AAJH;EAOI,sBL1Je;EK2Jf,WLzJe,EK0JhB;;AATH;EAYI,sBL9Je;EK+Jf,WLjKe,EKkKhB;;AAdH;EAiBI,sBLlKe;EKmKf,WLtKe,EKuKhB;;AAnBH;EAsBI,sBLrMU;EKsMV,WL3Ke,EK4KhB;AAKH;EACE,iBAAiB,EAClB;;ACxND;EAKE,eAAe;EACf,gBAAgB;EAChB,qBAAqB,EAMtB;EAbD;IAWI,0BAA0B,EAC3B;;ACZH;EAGE,gBAAgB,EACjB;;AAED;EAIE,iBAAiB;EACjB,2BAA2B,EAC5B;;ACZD;EACE,kBAAkB;EAClB,UAAU,EACX;;AAED;EACE,oBAAa;EAAb,oBAAa;EAAb,aAAa;EACb,uBAAuB;MAAvB,uBAAuB;EACvB,8BAAmB;EAAnB,6BAAmB;MAAnB,uBAAmB;UAAnB,mBAAmB;EACnB,mBAAe;MAAf,eAAe;EACf,gBAAgB;EAChB,WAAW;EACX,UAAU,EACX;;AAED;EACE,eAAe;EACf,oBAAc;MAAd,cAAc;EACd,YAAY;EACZ,kBPnBU,EOoBX;;AAED;EACE,mBAAY;MAAZ,oBAAY;UAAZ,YAAY,EACb;;ACxBD;EAGE,eAAwB;EACxB,eAAoB;EACpB,kBAAkB;EAClB,UAAU,EASX;EAfD;IASI,aAAa,EACd;EAVH;IAaI,gBAAgB,EACjB;ACXH;EACE,kBTJU;ESKV,gBTAW;ESCX,YAAY;EACZ,cAAc;EACd,kBAAkB;EAClB,UAAU,EACX;;ACRD;EAEE,yBAAyB;EACzB,gBAAgB;EAChB,WAAW,EAmBZ;EAvBD;IAWI,YAAoC;IAApC,oCAAoC;IACpC,kBAAkB,EAKnB;IAXD;MASI,uCAAuD,EACxD;ACfL;EASE,cXZU;EWaV,kBAAkB,EAsBnB;EAhCD;IAaI,kBAAkB;IAClB,WAAW;IACX,cAAc;IACd,SAAS;IACT,QAAQ;IACR,eAA0B;IAC1B,cAAyB,EAC1B;EApBH;IAwBI,iFAAoF,EAOrF;IALC;MAGE,oFAAoG,EACrG;AC9BL;EAIE,wBAAgB;KAAhB,qBAAgB;UAAhB,gBAAgB;EAChB,YAAY;EACZ,cAAW;EACX,iBZVU;EYWV,WAAW;EACX,kBAAkB,EAKnB;EAdD;ICHA,+ZAAA;IDeI,6BAAqB;YAArB,qBAAqB,EACtB;;AEdH;EAEE,WfFW;EeGX,gBAAgB;EAChB,6BfAW;EeCX,sBAAsB;EACtB,edCY;EcAZ,gBAAgB,EAoBjB;EA3BD;IAoBI,wBAAgB;OAAhB,qBAAgB;YAAhB,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,aAAa;IACb,iBdzBQ;Ic0BR,eAAe,EAChB;;AAGH;EACE,gBAAgB,EACjB;;ACnBD;EAEE,sBAAsB;EACtB,SAAS;EACT,kBAAkB;EAClB,WAAW,EACZ;;AAED;EAGE,mBAAmB,EACpB","file":"bui.css","sourcesContent":["@import '../vars/color';\n@import '../vars/metrics';\n\n$bui-font-family: false !default;\n\n@if not $bui-font-family {\n  @import url('https://fonts.googleapis.com/css?family=Muli:400,600,800');\n  $bui-font-family:\n    'Muli',\n    'Roboto',\n    'Droid Sans',\n    helvetica,\n    arial,\n    sans-serif;\n}\n\n$bui-script-family: false !default;\n\n@if not $bui-script-family {\n  @import url('https://fonts.googleapis.com/css?family=Merriweather:400i,700i');\n  $bui-script-family:\n    'Merriweather',\n    'Garamond',\n    georgia,\n    serif;\n}\n\n.script {\n  font-family: $bui-script-family;\n  font-style: italic;\n}\n\nbody,\nhtml {\n  color: $c-deep;\n  font-family: $bui-font-family;\n  font-size: $ty-base;\n  font-weight: 400;\n  text-rendering: optimizeLegibility;\n}\n\n.title {\n  font-weight: 800;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nstrong {\n  @extend .title;\n}\n\np,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\npre {\n  @extend .tile;\n}\n\nh1,\n._xxxl {\n  font-size: #{$ty-xxxl / $ty-base}em;\n}\n\nh2,\n._xxl {\n  font-size: #{$ty-xxl / $ty-base}em;\n}\n\nh3,\n._xl {\n  font-size: #{$ty-xl / $ty-base}em;\n}\n\nh4,\n._lg {\n  font-size: #{$ty-lg / $ty-base}em;\n}\n\nh5,\n._md {\n  font-size: #{$ty-md / $ty-base}em;\n}\n\n._sm {\n  font-size: #{$ty-sm / $ty-base}em;\n}\n\n._xs {\n  font-size: #{$ty-xs / $ty-base}em;\n}\n\np,\nh6 {\n  @extend ._sm;\n}\n\nsmall {\n  @extend ._xs;\n}\n","/* Greyscale */\n$c-black: #000; /* Shark */\n$c-dark: #222; /* Shark */\n$c-dark-shadow: rgba(34, 34, 34, 0.87);\n$c-deep: #555; /* Chicago */\n$c-deep-shadow: rgba(34, 34, 34, 0.69);\n$c-loud: #ccc; /* Cloud */\n$c-loud-shadow: rgba(34, 34, 34, 0.25);\n$c-soft: #eee; /* Gallery */\n$c-soft-shadow: rgba(34, 34, 34, 0.06);\n$c-white: #fff; /* White */\n\n/* Hot : Red */\n$c-hot-dark: #510; /* Redwood */\n$c-hot-deep: #932; /* Totem Pole */\n$c-hot-loud: #f75; /* Persimmon */\n$c-hot-soft: #fdc; /* Tuft Bush */\n\n/* Loud : Yellow */\n$c-warm-dark: #430; /* Madras */\n$c-warm-deep: #864; /* Kumera */\n$c-warm-loud: #fc5; /* Golden Tainoi */\n$c-warm-soft: #fec; /* Oasis */\n\n/* Cool : Green */\n$c-cool-dark: #233; /* Outer Space */\n$c-cool-deep: #187; /* Pine Green */\n$c-cool-loud: #6db; /* Puerto Rico */\n$c-cool-soft: #d4f4e4; /* Granny Apple */\n\n/* Main : Blue */\n$c-main-dark: #235; /* Cello */\n$c-main-deep: #26a; /* Matisse */\n$c-main-loud: #9cf; /* Malibu */\n$c-main-soft: #def; /* Link Water */\n\n/* Extra : Violet */\n$c-extra-dark: #423; /* Livid Brown */\n$c-extra-deep: #746; /* Cosmic */\n$c-extra-loud: #dad; /* Light Wisteria */\n$c-extra-soft: #edf; /* Moon Raker */\n","$sp-md: 18px;\n$sp-sm: 10px;\n$sp-xs: 8px;\n\n$bp-lg: 1280px;\n$bp-md: 880px;\n\n$ty-n: 4px;\n\n$ty-base: 15px;\n$ty-xs: $ty-base - $ty-n / 2;\n$ty-sm: $ty-base;\n$ty-md: $ty-base + $ty-n * 1;\n$ty-lg: $ty-base + $ty-n * 2;\n$ty-xl: $ty-base + $ty-n * 3;\n$ty-xxl: $ty-base + $ty-n * 5;\n$ty-xxxl: $ty-base + $ty-n * 8;\n","@import '../vars/metrics';\n\n.container {\n  margin: auto;\n  padding: $sp-md 0;\n  max-width: $bp-md;\n  overflow: auto;\n  position: relative;\n  z-index: 1;\n}\n","/* Greyscale */\n/* Shark */\n/* Shark */\n/* Chicago */\n/* Cloud */\n/* Gallery */\n/* White */\n/* Hot : Red */\n/* Redwood */\n/* Totem Pole */\n/* Persimmon */\n/* Tuft Bush */\n/* Loud : Yellow */\n/* Madras */\n/* Kumera */\n/* Golden Tainoi */\n/* Oasis */\n/* Cool : Green */\n/* Outer Space */\n/* Pine Green */\n/* Puerto Rico */\n/* Granny Apple */\n/* Main : Blue */\n/* Cello */\n/* Matisse */\n/* Malibu */\n/* Link Water */\n/* Extra : Violet */\n/* Livid Brown */\n/* Cosmic */\n/* Light Wisteria */\n/* Moon Raker */\n@import url(\"https://fonts.googleapis.com/css?family=Muli:400,600,800\");\n@import url(\"https://fonts.googleapis.com/css?family=Merriweather:400i,700i\");\n.script, blockquote,\n.blockquote {\n  font-family: \"Merriweather\", \"Garamond\", georgia, serif;\n  font-style: italic; }\n\nbody,\nhtml {\n  color: #555;\n  font-family: \"Muli\", \"Roboto\", \"Droid Sans\", helvetica, arial, sans-serif;\n  font-size: 15px;\n  font-weight: 400;\n  text-rendering: optimizeLegibility; }\n\n.title, h1,\nh2,\nh3,\nh4,\nh5,\nstrong {\n  font-weight: 800; }\n\nh1,\n._xxxl {\n  font-size: 3.13333em; }\n\nh2,\n._xxl {\n  font-size: 2.33333em; }\n\nh3,\n._xl {\n  font-size: 1.8em; }\n\nh4,\n._lg {\n  font-size: 1.53333em; }\n\nh5,\n._md,\nblockquote,\n.blockquote {\n  font-size: 1.26667em; }\n\n._sm, p,\nh6 {\n  font-size: 1em; }\n\n._xs, small {\n  font-size: 0.86667em; }\n\n.container {\n  margin: auto;\n  padding: 18px 0;\n  max-width: 880px;\n  overflow: auto;\n  position: relative;\n  z-index: 1; }\n\n[class*=\"-ex-\"] {\n  background-position: center;\n  background-size: cover; }\n  [class*=\"-ex-\"]::before {\n    content: '';\n    display: block; }\n\n._21-ex-9::before {\n  padding-top: 42.85714%; }\n\n._9-ex-21::before {\n  padding-top: 233.33333%; }\n\n._16-ex-9::before {\n  padding-top: 56.25%; }\n\n._9-ex-16::before {\n  padding-top: 177.77778%; }\n\n._15-ex-10::before {\n  padding-top: 66.66667%; }\n\n._10-ex-15::before {\n  padding-top: 150%; }\n\n._7-ex-5::before {\n  padding-top: 71.42857%; }\n\n._5-ex-7::before {\n  padding-top: 140%; }\n\n._5-ex-3::before {\n  padding-top: 60%; }\n\n._3-ex-5::before {\n  padding-top: 166.66667%; }\n\n._4-ex-3::before {\n  padding-top: 75%; }\n\n._3-ex-4::before {\n  padding-top: 133.33333%; }\n\n._3-ex-2::before {\n  padding-top: 66.66667%; }\n\n._2-ex-3::before {\n  padding-top: 150%; }\n\n._2-ex-1::before {\n  padding-top: 50%; }\n\n._1-ex-2::before {\n  padding-top: 200%; }\n\n/* Greyscale */\n/* Shark */\n/* Shark */\n/* Chicago */\n/* Cloud */\n/* Gallery */\n/* White */\n/* Hot : Red */\n/* Redwood */\n/* Totem Pole */\n/* Persimmon */\n/* Tuft Bush */\n/* Loud : Yellow */\n/* Madras */\n/* Kumera */\n/* Golden Tainoi */\n/* Oasis */\n/* Cool : Green */\n/* Outer Space */\n/* Pine Green */\n/* Puerto Rico */\n/* Granny Apple */\n/* Main : Blue */\n/* Cello */\n/* Matisse */\n/* Malibu */\n/* Link Water */\n/* Extra : Violet */\n/* Livid Brown */\n/* Cosmic */\n/* Light Wisteria */\n/* Moon Raker */\n/* Margins & Spacing */\n._tight {\n  margin: 0 auto;\n  padding: 0;\n  overflow: auto; }\n\nbody,\n._white {\n  background-color: #fff;\n  color: #555; }\n  body [href],\n  ._white [href] {\n    color: #26a; }\n    body [href]:visited,\n    ._white [href]:visited {\n      color: #746; }\n\n._dark {\n  background-color: #222;\n  color: #fff; }\n  ._dark [href] {\n    color: #fff; }\n    ._dark [href]:visited {\n      color: #fff; }\n\n._deep, .recess {\n  background-color: #555;\n  color: #eee; }\n  ._deep [href], .recess [href] {\n    color: #def; }\n    ._deep [href]:visited, .recess [href]:visited {\n      color: #edf; }\n\n._loud {\n  background-color: #ccc;\n  color: #222; }\n  ._loud [href] {\n    color: #235; }\n    ._loud [href]:visited {\n      color: #423; }\n\n._soft {\n  background-color: #eee;\n  color: #222; }\n  ._soft [href] {\n    color: #26a; }\n    ._soft [href]:visited {\n      color: #746; }\n\n._main._dark {\n  background-color: #235;\n  color: #fff; }\n\n._main._deep, ._main.recess {\n  background-color: #26a;\n  color: #def; }\n\n._main._loud {\n  background-color: #9cf;\n  color: #235; }\n\n._main._soft {\n  background-color: #def;\n  color: #235; }\n\n._main._white {\n  background-color: #fff;\n  color: #235; }\n\n._cool._dark {\n  background-color: #233;\n  color: #fff; }\n\n._cool._deep, ._cool.recess {\n  background-color: #187;\n  color: #d4f4e4; }\n\n._cool._loud {\n  background-color: #6db;\n  color: #233; }\n\n._cool._soft {\n  background-color: #d4f4e4;\n  color: #233; }\n\n._cool._white {\n  background-color: #fff;\n  color: #233; }\n\n._warm._dark {\n  background-color: #430;\n  color: #fff; }\n\n._warm._deep, ._warm.recess {\n  background-color: #864;\n  color: #fec; }\n\n._warm._loud {\n  background-color: #fc5;\n  color: #430; }\n\n._warm._soft {\n  background-color: #fec;\n  color: #430; }\n\n._warm._white {\n  background-color: #fff;\n  color: #430; }\n\n._hot._dark {\n  background-color: #510;\n  color: #fff; }\n\n._hot._deep, ._hot.recess {\n  background-color: #932;\n  color: #fdc; }\n\n._hot._loud {\n  background-color: #f75;\n  color: #510; }\n\n._hot._soft {\n  background-color: #fdc;\n  color: #510; }\n\n._hot._white {\n  background-color: #fff;\n  color: #510; }\n\n._extra._dark {\n  background-color: #423;\n  color: #fff; }\n\n._extra._deep, ._extra.recess {\n  background-color: #746;\n  color: #edf; }\n\n._extra._loud {\n  background-color: #dad;\n  color: #423; }\n\n._extra._soft {\n  background-color: #edf;\n  color: #423; }\n\n._extra._white {\n  background-color: #fff;\n  color: #423; }\n\n/* Text & Alignment */\n._right {\n  text-align: right; }\n\na,\n.action,\nbutton,\n.btn,\n.anchor,\n[onclick],\n[href] {\n  cursor: pointer;\n  font-weight: 600;\n  text-decoration: none; }\n  a:hover, a:focus,\n  .action:hover,\n  button:hover,\n  .btn:hover,\n  .action:focus,\n  button:focus,\n  .btn:focus,\n  .anchor:hover,\n  .anchor:focus,\n  [onclick]:hover,\n  [onclick]:focus,\n  [href]:hover,\n  [href]:focus {\n    text-decoration: underline; }\n\n.list {\n  list-style: none; }\n\n.bullet-point-list,\n.list.bullet-point-list {\n  list-style: unset;\n  list-style-position: inside; }\n\n.nav {\n  position: relative;\n  z-index: 1; }\n\n.nav-list {\n  display: flex;\n  align-content: flex-end;\n  flex-direction: row;\n  flex-wrap: wrap;\n  list-style: none;\n  width: auto;\n  padding: 0; }\n\n.nav-item {\n  cursor: pointer;\n  flex-shrink: 0;\n  min-width: 0;\n  padding: 10px 18px; }\n\n.nav-fill {\n  flex-grow: 1; }\n\n.recess {\n  margin: -36px 0;\n  padding: 18px 0;\n  position: relative;\n  z-index: 0; }\n  .recess:first-child {\n    margin-top: 0; }\n  .recess:last-child {\n    margin-bottom: 0; }\n\n/* Greyscale */\n/* Shark */\n/* Shark */\n/* Chicago */\n/* Cloud */\n/* Gallery */\n/* White */\n/* Hot : Red */\n/* Redwood */\n/* Totem Pole */\n/* Persimmon */\n/* Tuft Bush */\n/* Loud : Yellow */\n/* Madras */\n/* Kumera */\n/* Golden Tainoi */\n/* Oasis */\n/* Cool : Green */\n/* Outer Space */\n/* Pine Green */\n/* Puerto Rico */\n/* Granny Apple */\n/* Main : Blue */\n/* Cello */\n/* Matisse */\n/* Malibu */\n/* Link Water */\n/* Extra : Violet */\n/* Livid Brown */\n/* Cosmic */\n/* Light Wisteria */\n/* Moon Raker */\n.tile, p,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\npre, .list, .bullet-point-list,\n.list.bullet-point-list, .table th,\n.table td,\n.list th,\n.list td, blockquote,\n.blockquote {\n  padding: 10px 18px;\n  max-width: 880px;\n  margin: auto;\n  overflow: auto;\n  position: relative;\n  z-index: 1; }\n\n.table,\n.list {\n  border-collapse: collapse;\n  list-style: none;\n  width: 100%; }\n  .table tr,\n  .table li,\n  .table .row,\n  .table .list-item,\n  .list tr,\n  .list li,\n  .list .row,\n  .list .list-item {\n    border: none;\n    border-bottom: 1px solid transparent;\n    position: relative; }\n    ._striped .table tr:nth-child(2n), ._striped\n    .table li:nth-child(2n), ._striped\n    .table .row:nth-child(2n), ._striped\n    .table .list-item:nth-child(2n), ._striped\n    .list tr:nth-child(2n), ._striped\n    .list li:nth-child(2n), ._striped\n    .list .row:nth-child(2n), ._striped\n    .list .list-item:nth-child(2n) {\n      background-color: rgba(18, 18, 18, 0.03); }\n\n/* Greyscale */\n/* Shark */\n/* Shark */\n/* Chicago */\n/* Cloud */\n/* Gallery */\n/* White */\n/* Hot : Red */\n/* Redwood */\n/* Totem Pole */\n/* Persimmon */\n/* Tuft Bush */\n/* Loud : Yellow */\n/* Madras */\n/* Kumera */\n/* Golden Tainoi */\n/* Oasis */\n/* Cool : Green */\n/* Outer Space */\n/* Pine Green */\n/* Puerto Rico */\n/* Granny Apple */\n/* Main : Blue */\n/* Cello */\n/* Matisse */\n/* Malibu */\n/* Link Water */\n/* Extra : Violet */\n/* Livid Brown */\n/* Cosmic */\n/* Light Wisteria */\n/* Moon Raker */\nblockquote,\n.blockquote {\n  margin: 0 18px;\n  position: relative; }\n  blockquote::before,\n  .blockquote::before {\n    position: absolute;\n    content: '';\n    display: block;\n    bottom: 0;\n    right: 0;\n    height: 14.14214px;\n    width: 14.14214px; }\n  blockquote, blockquote::before,\n  .blockquote,\n  .blockquote::before {\n    background: linear-gradient(-45deg, transparent 10px, rgba(34, 34, 34, 0.06) 10px); }\n    ._loud blockquote,\n    ._deep blockquote, .recess blockquote,\n    ._dark blockquote, ._loud blockquote::before,\n    ._deep blockquote::before, .recess blockquote::before,\n    ._dark blockquote::before, ._loud\n    .blockquote,\n    ._deep\n    .blockquote,\n    .recess\n    .blockquote,\n    ._dark\n    .blockquote, ._loud\n    .blockquote::before,\n    ._deep\n    .blockquote::before,\n    .recess\n    .blockquote::before,\n    ._dark\n    .blockquote::before {\n      background: linear-gradient(-45deg, transparent 10px, rgba(255, 255, 255, 0.31) 10px); }\n\n/* Greyscale */\n/* Shark */\n/* Shark */\n/* Chicago */\n/* Cloud */\n/* Gallery */\n/* White */\n/* Hot : Red */\n/* Redwood */\n/* Totem Pole */\n/* Persimmon */\n/* Tuft Bush */\n/* Loud : Yellow */\n/* Madras */\n/* Kumera */\n/* Golden Tainoi */\n/* Oasis */\n/* Cool : Green */\n/* Outer Space */\n/* Pine Green */\n/* Puerto Rico */\n/* Granny Apple */\n/* Main : Blue */\n/* Cello */\n/* Matisse */\n/* Malibu */\n/* Link Water */\n/* Extra : Violet */\n/* Livid Brown */\n/* Cosmic */\n/* Light Wisteria */\n/* Moon Raker */\nbutton,\n.btn {\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  padding: 8px 18px;\n  margin: 1px;\n  text-align: center; }\n  button:hover,\n  .btn:hover {\n    filter: saturate(1.1); }\n\ninput,\ntextarea {\n  color: #222;\n  border-radius: 0;\n  box-shadow: inset 0 -1px #ccc;\n  box-sizing: border-box;\n  font-size: 15px;\n  font-weight: 500; }\n  input[type=text], input[type=number], input[type=color], input[type=date], input[type=file], input[type=month], input[type=password], input[type=range], input[type=time],\n  textarea[type=text],\n  textarea[type=number],\n  textarea[type=color],\n  textarea[type=date],\n  textarea[type=file],\n  textarea[type=month],\n  textarea[type=password],\n  textarea[type=range],\n  textarea[type=time] {\n    appearance: none;\n    border: none;\n    display: block;\n    height: 2.4em;\n    padding: 8px 10px;\n    max-width: 100%; }\n\ntextarea {\n  overflow: hidden; }\n\nhtml,\nbody {\n  box-sizing: border-box;\n  margin: 0;\n  overflow-x: hidden;\n  width: 100%; }\n\n*,\n*::before,\n*::after {\n  box-sizing: inherit; }\n","$aspects: (\n  21: 9,\n  16: 9,\n  15: 10,\n  7: 5,\n  5: 3,\n  4: 3,\n  3: 2,\n  2: 1,\n);\n\n[class*=\"-ex-\"] {\n  background-position: center;\n  background-size: cover;\n\n  &::before {\n    content: '';\n    display: block;\n  }\n}\n\n@each $x, $y in $aspects {\n  ._#{$x}-ex-#{$y}::before {\n    padding-top: #{$y / $x * 100%};\n  }\n\n  ._#{$y}-ex-#{$x}::before {\n    padding-top: #{$x / $y * 100%};\n  }\n}\n","@import '../vars/color';\n@import '../vars/metrics';\n\n/* Margins & Spacing */\n\n._tight {\n  margin: 0 auto;\n  padding: 0;\n  overflow: auto;\n}\n\nbody,\n._white {\n  background-color: $c-white;\n  color: $c-deep;\n\n  & [href] {\n    color: $c-main-deep;\n\n    &:visited {\n      color: $c-extra-deep;\n    }\n  }\n}\n\n._dark {\n  background-color: $c-dark;\n  color: $c-white;\n\n  & [href] {\n    color: $c-white;\n\n    &:visited {\n      color: $c-white;\n    }\n  }\n}\n\n._deep {\n  background-color: $c-deep;\n  color: $c-soft;\n\n  & [href] {\n    color: $c-main-soft;\n\n    &:visited {\n      color: $c-extra-soft;\n    }\n  }\n}\n\n._loud {\n  background-color: $c-loud;\n  color: $c-dark;\n\n  & [href] {\n    color: $c-main-dark;\n\n    &:visited {\n      color: $c-extra-dark;\n    }\n  }\n}\n\n._soft {\n  background-color: $c-soft;\n  color: $c-dark;\n\n  & [href] {\n    color: $c-main-deep;\n\n    &:visited {\n      color: $c-extra-deep;\n    }\n  }\n}\n\n._main {\n  &._dark {\n    background-color: $c-main-dark;\n    color: $c-white;\n  }\n\n  &._deep {\n    background-color: $c-main-deep;\n    color: $c-main-soft;\n  }\n\n  &._loud {\n    background-color: $c-main-loud;\n    color: $c-main-dark;\n  }\n\n  &._soft {\n    background-color: $c-main-soft;\n    color: $c-main-dark;\n  }\n\n  &._white {\n    background-color: $c-white;\n    color: $c-main-dark;\n  }\n}\n\n._cool {\n  &._dark {\n    background-color: $c-cool-dark;\n    color: $c-white;\n  }\n\n  &._deep {\n    background-color: $c-cool-deep;\n    color: $c-cool-soft;\n  }\n\n  &._loud {\n    background-color: $c-cool-loud;\n    color: $c-cool-dark;\n  }\n\n  &._soft {\n    background-color: $c-cool-soft;\n    color: $c-cool-dark;\n  }\n\n  &._white {\n    background-color: $c-white;\n    color: $c-cool-dark;\n  }\n}\n\n._warm {\n  &._dark {\n    background-color: $c-warm-dark;\n    color: $c-white;\n  }\n\n  &._deep {\n    background-color: $c-warm-deep;\n    color: $c-warm-soft;\n  }\n\n  &._loud {\n    background-color: $c-warm-loud;\n    color: $c-warm-dark;\n  }\n\n  &._soft {\n    background-color: $c-warm-soft;\n    color: $c-warm-dark;\n  }\n\n  &._white {\n    background-color: $c-white;\n    color: $c-warm-dark;\n  }\n}\n\n._hot {\n  &._dark {\n    background-color: $c-hot-dark;\n    color: $c-white;\n  }\n\n  &._deep {\n    background-color: $c-hot-deep;\n    color: $c-hot-soft;\n  }\n\n  &._loud {\n    background-color: $c-hot-loud;\n    color: $c-hot-dark;\n  }\n\n  &._soft {\n    background-color: $c-hot-soft;\n    color: $c-hot-dark;\n  }\n\n  &._white {\n    background-color: $c-white;\n    color: $c-hot-dark;\n  }\n}\n\n._extra {\n  &._dark {\n    background-color: $c-extra-dark;\n    color: $c-white;\n  }\n\n  &._deep {\n    background-color: $c-extra-deep;\n    color: $c-extra-soft;\n  }\n\n  &._loud {\n    background-color: $c-extra-loud;\n    color: $c-extra-dark;\n  }\n\n  &._soft {\n    background-color: $c-extra-soft;\n    color: $c-extra-dark;\n  }\n\n  &._white {\n    background-color: $c-white;\n    color: $c-extra-dark;\n  }\n}\n\n/* Text & Alignment */\n\n._right {\n  text-align: right;\n}\n","a,\n.action,\n.anchor,\n[onclick],\n[href] {\n  cursor: pointer;\n  font-weight: 600;\n  text-decoration: none;\n\n  &:hover,\n  &:focus {\n    text-decoration: underline;\n  }\n}\n",".list {\n  @extend .tile;\n\n  list-style: none;\n}\n\n.bullet-point-list,\n.list.bullet-point-list {\n  @extend .tile;\n\n  list-style: unset;\n  list-style-position: inside;\n}\n",".nav {\n  position: relative;\n  z-index: 1;\n}\n\n.nav-list {\n  display: flex;\n  align-content: flex-end;\n  flex-direction: row;\n  flex-wrap: wrap;\n  list-style: none;\n  width: auto;\n  padding: 0;\n}\n\n.nav-item {\n  cursor: pointer;\n  flex-shrink: 0;\n  min-width: 0;\n  padding: $sp-sm $sp-md;\n}\n\n.nav-fill {\n  flex-grow: 1;\n}\n",".recess {\n  @extend ._deep;\n\n  margin: #{-$sp-md * 2} 0;\n  padding: #{$sp-md} 0;\n  position: relative;\n  z-index: 0;\n\n  &:first-child {\n    margin-top: 0;\n  }\n\n  &:last-child {\n    margin-bottom: 0;\n  }\n}\n","@import '../vars/color';\n@import '../vars/metrics';\n\n.tile {\n  padding: $sp-sm $sp-md;\n  max-width: $bp-md;\n  margin: auto;\n  overflow: auto;\n  position: relative;\n  z-index: 1;\n}\n","@import '../vars/metrics';\n\n.table,\n.list {\n  border-collapse: collapse;\n  list-style: none;\n  width: 100%;\n\n  tr,\n  li,\n  .row,\n  .list-item {\n    border: none;\n    border-bottom: 1px solid transparent;\n    position: relative;\n\n    ._striped &:nth-child(2n) {\n      background-color: mix($c-soft-shadow, transparent, 50%);\n    }\n  }\n\n  th,\n  td {\n    @extend .tile;\n  }\n}\n","@import '../vars/color';\n@import '../vars/metrics';\n\nblockquote,\n.blockquote {\n  @extend .tile;\n  @extend .script;\n  @extend ._md;\n\n  $tab-size: $sp-sm;\n  $sqrt2: 1.4142135623730951;\n\n  margin: 0 $sp-md;\n  position: relative;\n\n  &::before {\n    position: absolute;\n    content: '';\n    display: block;\n    bottom: 0;\n    right: 0;\n    height: $tab-size * $sqrt2;\n    width: $tab-size * $sqrt2;\n  }\n\n  &,\n  &::before {\n    background: linear-gradient(-45deg, transparent $tab-size, $c-soft-shadow $tab-size);\n\n    ._loud &,\n    ._deep &,\n    ._dark & {\n      background: linear-gradient(-45deg, transparent $tab-size, transparentize($c-white, 0.69) $tab-size);\n    }\n  }\n}\n","@import '../vars/color';\n@import '../vars/metrics';\n\nbutton,\n.btn {\n  @extend .action;\n\n  appearance: none;\n  border: none;\n  font-size: #{$ty-sm / $ty-base}em;\n  padding: $sp-xs $sp-md;\n  margin: 1px;\n  text-align: center;\n\n  &:hover {\n    filter: saturate(1.1);\n  }\n}\n",null,"@import '../vars/metrics';\n\ninput,\ntextarea {\n  color: $c-dark;\n  border-radius: 0;\n  box-shadow: inset 0 -1px $c-loud;\n  box-sizing: border-box;\n  font-size: $ty-base; // not relative\n  font-weight: 500;\n\n  &[type=text],\n  &[type=number],\n  &[type=color],\n  // &[type=checkbox],\n  // &[type=radio],\n  &[type=date],\n  &[type=file],\n  &[type=month],\n  &[type=password],\n  &[type=range],\n  &[type=time] {\n    appearance: none;\n    border: none;\n    display: block;\n    height: 2.4em;\n    padding: $sp-xs $sp-sm;\n    max-width: 100%;\n  }\n}\n\ntextarea {\n  overflow: hidden;\n}\n","@import './base/typography';\n@import './base/container';\n@import './base/aspects';\n@import './base/modifiers';\n@import './components/anchor';\n@import './components/list';\n@import './components/nav';\n@import './components/recess';\n@import './components/tile';\n@import './components/table';\n@import './components/blockquote';\n@import './components/button';\n@import './components/input';\n\nhtml,\nbody {\n  box-sizing: border-box;\n  margin: 0;\n  overflow-x: hidden;\n  width: 100%;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: inherit;\n}\n"]}