thinkful-ui/lib/styleguide/index.js

Shared UI resources for Thinkful.

"use strict";

var _lodash = _interopRequireDefault(require("lodash"));

var _lessVarsToJs = _interopRequireDefault(require("./lessVarsToJs"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

/* babel-plugin-inline-import 'tfstyleguide/colors.less' */
var sgColorsLess = "@black: #000000;\n@gray90: #272727;\n@gray75: #595959;\n@gray50: #979797;\n@gray40: #e2e2e2;\n@gray25: #f3f3f3;\n@white: #ffffff;\n\n@green: #20c200;\n@darkGreen: #147b00;\n@purple: #864bff;\n@darkPurple: #6c29f6;\n@red: #ff0020;\n@blue: #5442ec;\n@darkBlue: #3e2aee;\n@orange: #e68200;\n@lightOrange: #fff6ea;\n@errorOrange: #ffa023;\n@backgroundOrange: #ff6b31;\n";

/* babel-plugin-inline-import 'tfstyleguide/vars.less' */
var sgVarsLess = "/*\n * >> October 2016 <<\n *\n * Thinkful LESS / CSS Style Guide\n * classes starting with __ are for the guide only.\n * required: CSS RESET (not normalize)\n */\n\n@font-size: 16px;\n@line-height: 1.625;\n@line-height-px: ceil(@font-size * @line-height);\n\n@mobile-font-size: 16px;\n@mobile-line-height: 1.625;\n@mobile-line-height-px: @mobile-font-size * @mobile-line-height;\n\n@vertical-grid-basis: 8px;\n\n/* Animation speed */\n@slow: 0.3s;\n\n/*\n *  Variables and Mixins\n */\n@import './colors.less';\n\n/* Breakpoints */\n/* Going down! */\n/* Use these two for drastic changes that are\n   necessary only in mobile contexts */\n/* handheld vertical-only resolution  */\n@tiny: ~'screen and (max-width: 479px)';\n/* handheld horizontal + oddball devices */\n@mobile: ~'screen and (max-width: 639px)';\n\n/* Going up! */\n/* Avoid using @nonmobile AND @mobile if possible!\n   If it's a complex element, use @nonmobile, @tablet ... going up */\n/* non-handheld screens */\n@nonmobile: ~'screen and (min-width: 640px)';\n/* tablet vertical */\n@tablet: ~'screen and (min-width: 768px)';\n/* small laptop / ipad horizontal */\n@big: ~'screen and (min-width: 1024px)';\n/* laptop / desktop full-screen browser */\n@bigger: ~'screen and (min-width: 1192px)';\n/* 'venti' desktop full-screen browser */\n@biggest: ~'screen and (min-width: 1280px)';\n/* What are you, on a imperial star destroyer? */\n@intergalactic: ~'screen and (min-width: 1380px)';\n\n/* FONTS */\n\n.maison-light() {\n  font-family: 'MaisonNeue-Thin', 'Helvetica', sans-serif;\n  font-style: normal;\n}\n.maison-light-italic() {\n  font-family: 'MaisonNeue-Thin', 'Helvetica', sans-serif;\n  font-weight: 300;\n  font-style: oblique;\n}\n\n.maison-regular() {\n  font-family: 'MaisonNeue', 'Helvetica', sans-serif;\n  font-weight: 400;\n  font-style: normal;\n}\n\n.maison-regular-italic() {\n  font-family: 'MaisonNeue', 'Helvetica', sans-serif;\n  font-weight: 400;\n  font-style: oblique;\n}\n\n.maison-bold() {\n  font-family: 'MaisonNeue-Bold', 'Helvetica', sans-serif;\n  font-style: normal;\n}\n\n.maison-bold-italic() {\n  font-family: 'MaisonNeue-Bold', 'Helvetica', sans-serif;\n  font-style: oblique;\n}\n\n.maison-mono-light() {\n  font-family: 'MaisonNeue-Mono', 'Inconsolata', monospace;\n  font-weight: 300;\n  font-style: normal;\n}\n\n.maison-mono-regular() {\n  font-family: 'MaisonNeue-Mono', 'Inconsolata', monospace;\n  font-weight: 400;\n  font-style: normal;\n}\n\n.maison-mono-bold() {\n  font-family: 'MaisonNeue-Mono', 'Inconsolata', monospace;\n  font-weight: 600;\n  font-style: normal;\n}\n\n.monospace() {\n  font-family: 'Ubuntu Mono', 'Menlo', 'Consolas', 'Inconsonata', monospace;\n}\n\n.mark-regular() {\n  font-family: 'Mark-Regular', 'Helvetica', sans-serif;\n  font-weight: 400;\n  font-style: normal;\n}\n\n.mark-bold() {\n  font-family: 'Mark-Bold', 'Helvetica', sans-serif;\n  font-weight: 600;\n  font-style: normal;\n}\n\n/*\n * Grid\n */\n.centered-container() {\n  max-width: 1024px;\n  margin-left: auto;\n  margin-right: auto;\n  padding-left: 40px;\n  padding-right: 40px;\n}\n\n.centered-container-mobile() {\n  padding-left: 16px;\n  padding-right: 16px;\n}\n\n/* Text Mixins */\n.body-text() {\n  .maison-regular;\n  font-size: @font-size;\n  line-height: @line-height;\n}\n\n.body-text-small() {\n  .maison-regular;\n  font-size: 14px;\n  line-height: 16px;\n}\n\n.body-text-strong() {\n  .maison-bold;\n  font-size: @font-size;\n  line-height: @line-height;\n}\n\n.h1-text() {\n  .maison-bold;\n  font-size: 30px;\n  line-height: 34px;\n\n  @media @tablet {\n    font-size: 40px;\n    line-height: 44px;\n  }\n\n  @media @big {\n    font-size: 60px;\n    line-height: 68px;\n  }\n}\n\n.h2-text() {\n  .maison-bold;\n  font-size: 18px;\n  line-height: 24px;\n\n  @media @tablet {\n    font-size: 20px;\n    line-height: 24px;\n  }\n\n  @media @big {\n    font-size: 30px;\n    line-height: 34px;\n  }\n}\n\n.h3-text() {\n  .maison-bold;\n  font-size: 16px;\n  line-height: 20px;\n\n  @media @tablet {\n    font-size: 20px;\n    line-height: 24px;\n  }\n\n  @media @big {\n    font-size: 24px;\n    line-height: 27px;\n  }\n}\n\n.h4-text() {\n  .maison-regular;\n  font-size: 12px;\n  line-height: 16px;\n\n  @media @tablet {\n    font-size: 14px;\n  }\n\n  @media @big {\n    font-size: 22px;\n    line-height: 32px;\n  }\n}\n\n.h5-text() {\n  .maison-regular;\n  font-size: 12px;\n  line-height: 16px;\n\n  @media @big {\n    font-size: 14px;\n  }\n}\n\n.h6-text() {\n  .maison-regular;\n  font-size: 12px;\n  line-height: 16px;\n}\n\n.h1() {\n  .h1-text();\n\n  margin-bottom: 16px;\n  color: @gray90;\n\n  @media @tablet {\n    margin-bottom: 16px;\n  }\n\n  @media @big {\n    margin-bottom: 24px;\n  }\n}\n\n.h2() {\n  .h2-text();\n\n  margin-bottom: 16px;\n  color: @gray90;\n\n  @media @big {\n    margin-bottom: 24px;\n  }\n}\n\n.h3() {\n  .h3-text();\n\n  margin-bottom: 8px;\n  color: @gray90;\n\n  @media @tablet {\n    margin-bottom: 16px;\n  }\n\n  @media @big {\n    margin-bottom: 24px;\n  }\n}\n\n.h4() {\n  .h4-text();\n\n  margin-bottom: 8px;\n  color: @gray90;\n\n  @media @big {\n    margin-bottom: 24px;\n  }\n}\n\n.h5() {\n  .h5-text();\n\n  margin-bottom: 8px;\n  color: @gray75;\n\n  @media @big {\n    margin-bottom: 24px;\n  }\n}\n\n.h6() {\n  .h6-text();\n\n  color: @gray90;\n  margin-bottom: 0;\n}\n\n.button() {\n  .maison-bold;\n  position: relative;\n  display: inline-block;\n  padding: 8px 16px;\n  font-size: 14px;\n  line-height: 24px;\n  min-width: 130px;\n  max-width: 100%;\n  border: 1px solid transparent;\n  text-decoration: none;\n  text-align: center;\n  border-radius: 2px;\n  cursor: pointer;\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  &.button__disabled,\n  &.disabled,\n  &:disabled {\n    pointer-events: none;\n  }\n\n  &:focus {\n    outline-color: @purple;\n  }\n}\n\n.box-shadow-light() {\n  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.1);\n}\n\n.box-shadow-heavy() {\n  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.2);\n}\n";
module.exports = _lodash["default"].assign({}, (0, _lessVarsToJs["default"])(sgVarsLess, {
  resolveVariables: true,
  stripPrefix: true
}), (0, _lessVarsToJs["default"])(sgColorsLess, {
  resolveVariables: true,
  stripPrefix: true
}));