bui-css
Version:
A contemporary, approachable css library for prototyping and beyond
1 lines • 25.8 kB
Source Map (JSON)
{"version":3,"sources":["css/base/typography.scss","css/vars/color.scss","css/vars/metrics.scss","css/base/container.scss","css/bui.css","css/base/aspects.scss","css/base/modifiers.scss","css/components/anchor.scss","css/components/list.scss","css/components/nav.scss","css/components/recess.scss","css/components/tile.scss","css/components/table.scss","css/components/blockquote.scss","css/components/button.scss","css/<no source>","css/components/input.scss","css/bui.scss"],"names":[],"mappings":"AAME,wEAAY,AAaZ,8EAAY,AAQd,+BACE,gDAJO,AAKP,iBAAkB,CACnB,AAED,UAEE,WC9BW,AD+BX,8DAtBY,AAuBZ,eE3BY,AF4BZ,gBAAgB,AAChB,iCAAkC,CACnC,AAED,6BACE,eAAgB,CACjB,AAsBD,UAEE,mBAAW,CACZ,AAED,SAEE,mBAAW,CACZ,AAED,QAEE,eAAW,CACZ,AAED,QAEE,mBAAW,CACZ,AAED,+BAEE,mBAAW,CACZ,AAED,UACE,aAAW,CACZ,AAED,WACE,kBAAW,CACZ,AG9FD,WACE,YAAY,AACZ,eAAiB,AACjB,gBDAW,ACCX,cAAc,AACd,kBAAkB,AAClB,SAAU,CACX,ACmFD,cChFE,wBAA2B,AAC3B,qBAAsB,CAMvB,AD4EC,qBC/EE,WAAW,AACX,aAAc,CACf,AAID,iBACE,qBAAa,CACd,AAED,iBACE,sBAAa,CACd,AAND,iBACE,kBAAa,CACd,AAED,iBACE,sBAAa,CACd,AAND,kBACE,qBAAa,CACd,AAED,kBACE,gBAAa,CACd,AAND,gBACE,qBAAa,CACd,AAED,gBACE,gBAAa,CACd,AAND,gBACE,eAAa,CACd,AAED,gBACE,sBAAa,CACd,AAND,gBACE,eAAa,CACd,AAED,gBACE,sBAAa,CACd,AAND,gBACE,qBAAa,CACd,AAED,gBACE,gBAAa,CACd,AAND,gBACE,eAAa,CACd,AAED,gBACE,gBAAa,CACd,ACvBH,QACE,cAAc,AACd,UAAU,AACV,aAAc,CACf,AAED,aAEE,sBLHY,AKIZ,ULVW,CKmBZ,AAZD,2BAMI,ULec,CKVf,AAXH,2CASM,ULkBa,CKjBd,AAIL,OACE,qBLxBW,CKkCZ,AAXD,2CAQM,ULvBQ,CKwBT,AAIL,eACE,sBLnCW,AKoCX,ULhCW,CKyCZ,AAXD,6BAKI,ULTc,CKcf,AAVH,6CAQM,ULNa,CKOd,AAIL,OACE,sBL9CW,AK+CX,ULnDW,CK4DZ,AAXD,cAKI,ULzBc,CK8Bf,AAVH,sBAQM,ULtBa,CKuBd,AAIL,OACE,sBLzDW,AK0DX,ULhEW,CKyEZ,AAXD,cAKI,ULrCc,CK0Cf,AAVH,sBAQM,ULlCa,CKmCd,AAIL,aAEI,sBLhDc,AKiDd,ULtEU,CKuEX,AAJH,2BAOI,sBLpDc,AKqDd,ULnDc,CKoDf,AATH,aAYI,sBLxDc,AKyDd,UL3Dc,CK4Df,AAdH,aAiBI,sBL5Dc,AK6Dd,ULhEc,CKiEf,AAnBH,cAsBI,sBLzFU,AK0FV,ULrEc,CKsEf,AAGH,aAEI,sBLjFc,AKkFd,ULjGU,CKkGX,AAJH,2BAOI,sBLrFc,AKsFd,aLpFiB,CKqFlB,AATH,aAYI,sBLzFc,AK0Fd,UL5Fc,CK6Ff,AAdH,aAiBI,yBL7FiB,AK8FjB,ULjGc,CKkGf,AAnBH,cAsBI,sBLpHU,AKqHV,ULtGc,CKuGf,AAGH,aAEI,sBLlHc,AKmHd,UL5HU,CK6HX,AAJH,2BAOI,sBLtHc,AKuHd,ULrHc,CKsHf,AATH,aAYI,sBL1Hc,AK2Hd,UL7Hc,CK8Hf,AAdH,aAiBI,sBL9Hc,AK+Hd,ULlIc,CKmIf,AAnBH,cAsBI,sBL/IU,AKgJV,ULvIc,CKwIf,AAGH,YAEI,sBLnJa,AKoJb,ULvJU,CKwJX,AAJH,yBAOI,sBLvJa,AKwJb,ULtJa,CKuJd,AATH,YAYI,sBL3Ja,AK4Jb,UL9Ja,CK+Jd,AAdH,YAiBI,sBL/Ja,AKgKb,ULnKa,CKoKd,AAnBH,aAsBI,sBL1KU,AK2KV,ULxKa,CKyKd,AAGH,cAEI,sBLtJe,AKuJf,ULlLU,CKmLX,AAJH,6BAOI,sBL1Je,AK2Jf,ULzJe,CK0JhB,AATH,cAYI,sBL9Je,AK+Jf,ULjKe,CKkKhB,AAdH,cAiBI,sBLlKe,AKmKf,ULtKe,CKuKhB,AAnBH,eAsBI,sBLrMU,AKsMV,UL3Ke,CK4KhB,AAKH,QACE,gBAAiB,CAClB,ACxND,+CAKE,eAAe,AACf,gBAAgB,AAChB,oBAAqB,CAMtB,AAbD,kLAWI,yBAA0B,CAC3B,ACZH,MAGE,eAAgB,CACjB,AAED,2CAIE,iBAAiB,AACjB,0BAA2B,CAC5B,ACZD,KACE,kBAAkB,AAClB,SAAU,CACX,AAED,UACE,oBAAa,AAAb,oBAAa,AAAb,aAAa,AACb,uBAAuB,AAAvB,uBAAuB,AACvB,8BAAmB,AAAnB,6BAAmB,AAAnB,uBAAmB,AAAnB,mBAAmB,AACnB,mBAAe,AAAf,eAAe,AACf,gBAAgB,AAChB,WAAW,AACX,SAAU,CACX,AAED,UACE,eAAe,AACf,oBAAc,AAAd,cAAc,AACd,YAAY,AACZ,iBPnBU,COoBX,AAED,UACE,mBAAY,AAAZ,oBAAY,AAAZ,WAAY,CACb,ACxBD,QAGE,eAAwB,AACxB,eAAoB,AACpB,kBAAkB,AAClB,SAAU,CASX,AAfD,oBASI,YAAa,CACd,AAVH,mBAaI,eAAgB,CACjB,ACXH,4IACE,kBTJU,ASKV,gBTAW,ASCX,YAAY,AACZ,cAAc,AACd,kBAAkB,AAClB,SAAU,CACX,ACRD,aAEE,yBAAyB,AACzB,gBAAgB,AAChB,UAAW,CAmBZ,AAvBD,gGAWI,YAAoC,AAApC,oCAAoC,AACpC,iBAAkB,CAKnB,AAXD,gSASI,kCAAuD,CACxD,ACfL,uBASE,cXZU,AWaV,iBAAkB,CAsBnB,AAhCD,qCAaI,kBAAkB,AAClB,WAAW,AACX,cAAc,AACd,SAAS,AACT,QAAQ,AACR,eAA0B,AAC1B,aAAyB,CAC1B,AApBH,4DAwBI,wEAAoF,CAOrF,AALC,oWAGE,yEAAoG,CACrG,AC9BL,YAIE,wBAAgB,AAAhB,qBAAgB,AAAhB,gBAAgB,AAChB,YAAY,AACZ,cAAW,AACX,iBZVU,AYWV,WAAW,AACX,iBAAkB,CAKnB,AAdD,wBCHA,8ZAAA,ADeI,6BAAqB,AAArB,oBAAqB,CACtB,AEdH,eAEE,WfFW,AeGX,gBAAgB,AAChB,6BfAW,AeCX,sBAAsB,AACtB,edCY,AcAZ,eAAgB,CAoBjB,AA3BD,+VAoBI,wBAAgB,AAAhB,qBAAgB,AAAhB,gBAAgB,AAChB,YAAY,AACZ,cAAc,AACd,aAAa,AACb,iBdzBQ,Ac0BR,cAAe,CAChB,AAGH,SACE,eAAgB,CACjB,ACnBD,UAEE,sBAAsB,AACtB,SAAS,AACT,kBAAkB,AAClB,UAAW,CACZ,AAED,iBAGE,kBAAmB,CACpB","file":"bui.min.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"]}