├── .eslintrc ├── .gitignore ├── .jscsrc ├── .scss-lint.yml ├── CONTRIBUTING.md ├── JDRF Marketing UI Kit.sketch ├── LICENSE.txt ├── README.md ├── dist ├── css │ ├── design-system.css │ └── design-system.min.css ├── fonts │ └── gotham │ │ ├── black │ │ ├── gotham-black-webfont.eot │ │ ├── gotham-black-webfont.svg │ │ ├── gotham-black-webfont.ttf │ │ ├── gotham-black-webfont.woff │ │ ├── gotham-black-webfont.woff2 │ │ ├── gotham-blackitalic-webfont.eot │ │ ├── gotham-blackitalic-webfont.svg │ │ ├── gotham-blackitalic-webfont.ttf │ │ ├── gotham-blackitalic-webfont.woff │ │ └── gotham-blackitalic-webfont.woff2 │ │ ├── bold │ │ ├── gotham-bold-webfont.eot │ │ ├── gotham-bold-webfont.svg │ │ ├── gotham-bold-webfont.ttf │ │ ├── gotham-bold-webfont.woff │ │ ├── gotham-bold-webfont.woff2 │ │ ├── gotham-bolditalic-webfont.eot │ │ ├── gotham-bolditalic-webfont.svg │ │ ├── gotham-bolditalic-webfont.ttf │ │ ├── gotham-bolditalic-webfont.woff │ │ └── gotham-bolditalic-webfont.woff2 │ │ ├── book │ │ ├── gotham-book-webfont.eot │ │ ├── gotham-book-webfont.svg │ │ ├── gotham-book-webfont.ttf │ │ ├── gotham-book-webfont.woff │ │ ├── gotham-book-webfont.woff2 │ │ ├── gotham-bookitalic-webfont.eot │ │ ├── gotham-bookitalic-webfont.svg │ │ ├── gotham-bookitalic-webfont.ttf │ │ ├── gotham-bookitalic-webfont.woff │ │ └── gotham-bookitalic-webfont.woff2 │ │ ├── light │ │ ├── gotham-light-webfont.eot │ │ ├── gotham-light-webfont.svg │ │ ├── gotham-light-webfont.ttf │ │ ├── gotham-light-webfont.woff │ │ ├── gotham-light-webfont.woff2 │ │ ├── gotham-lightitalic-webfont.eot │ │ ├── gotham-lightitalic-webfont.svg │ │ ├── gotham-lightitalic-webfont.ttf │ │ ├── gotham-lightitalic-webfont.woff │ │ └── gotham-lightitalic-webfont.woff2 │ │ ├── medium │ │ ├── gotham-medium-webfont.eot │ │ ├── gotham-medium-webfont.svg │ │ ├── gotham-medium-webfont.ttf │ │ ├── gotham-medium-webfont.woff │ │ ├── gotham-medium-webfont.woff2 │ │ ├── gotham-mediumitalic-webfont.eot │ │ ├── gotham-mediumitalic-webfont.svg │ │ ├── gotham-mediumitalic-webfont.ttf │ │ ├── gotham-mediumitalic-webfont.woff │ │ └── gotham-mediumitalic-webfont.woff2 │ │ ├── thin │ │ ├── gotham-thin-webfont.eot │ │ ├── gotham-thin-webfont.svg │ │ ├── gotham-thin-webfont.ttf │ │ ├── gotham-thin-webfont.woff │ │ ├── gotham-thin-webfont.woff2 │ │ ├── gotham-thinitalic-webfont.eot │ │ ├── gotham-thinitalic-webfont.svg │ │ ├── gotham-thinitalic-webfont.ttf │ │ ├── gotham-thinitalic-webfont.woff │ │ └── gotham-thinitalic-webfont.woff2 │ │ ├── ultra │ │ ├── gotham-ultra-webfont.eot │ │ ├── gotham-ultra-webfont.svg │ │ ├── gotham-ultra-webfont.ttf │ │ ├── gotham-ultra-webfont.woff │ │ ├── gotham-ultra-webfont.woff2 │ │ ├── gotham-ultraitalic-webfont.eot │ │ ├── gotham-ultraitalic-webfont.svg │ │ ├── gotham-ultraitalic-webfont.ttf │ │ ├── gotham-ultraitalic-webfont.woff │ │ └── gotham-ultraitalic-webfont.woff2 │ │ └── xlight │ │ ├── gotham-xlight-webfont.eot │ │ ├── gotham-xlight-webfont.svg │ │ ├── gotham-xlight-webfont.ttf │ │ ├── gotham-xlight-webfont.woff │ │ ├── gotham-xlight-webfont.woff2 │ │ ├── gotham-xlightitalic-webfont.eot │ │ ├── gotham-xlightitalic-webfont.svg │ │ ├── gotham-xlightitalic-webfont.ttf │ │ ├── gotham-xlightitalic-webfont.woff │ │ └── gotham-xlightitalic-webfont.woff2 └── js │ └── design-system.js ├── gulpfile.js ├── package.json ├── src ├── fonts │ └── gotham │ │ ├── black │ │ ├── gotham-black-webfont.eot │ │ ├── gotham-black-webfont.svg │ │ ├── gotham-black-webfont.ttf │ │ ├── gotham-black-webfont.woff │ │ ├── gotham-black-webfont.woff2 │ │ ├── gotham-blackitalic-webfont.eot │ │ ├── gotham-blackitalic-webfont.svg │ │ ├── gotham-blackitalic-webfont.ttf │ │ ├── gotham-blackitalic-webfont.woff │ │ └── gotham-blackitalic-webfont.woff2 │ │ ├── bold │ │ ├── gotham-bold-webfont.eot │ │ ├── gotham-bold-webfont.svg │ │ ├── gotham-bold-webfont.ttf │ │ ├── gotham-bold-webfont.woff │ │ ├── gotham-bold-webfont.woff2 │ │ ├── gotham-bolditalic-webfont.eot │ │ ├── gotham-bolditalic-webfont.svg │ │ ├── gotham-bolditalic-webfont.ttf │ │ ├── gotham-bolditalic-webfont.woff │ │ └── gotham-bolditalic-webfont.woff2 │ │ ├── book │ │ ├── gotham-book-webfont.eot │ │ ├── gotham-book-webfont.svg │ │ ├── gotham-book-webfont.ttf │ │ ├── gotham-book-webfont.woff │ │ ├── gotham-book-webfont.woff2 │ │ ├── gotham-bookitalic-webfont.eot │ │ ├── gotham-bookitalic-webfont.svg │ │ ├── gotham-bookitalic-webfont.ttf │ │ ├── gotham-bookitalic-webfont.woff │ │ └── gotham-bookitalic-webfont.woff2 │ │ ├── light │ │ ├── gotham-light-webfont.eot │ │ ├── gotham-light-webfont.svg │ │ ├── gotham-light-webfont.ttf │ │ ├── gotham-light-webfont.woff │ │ ├── gotham-light-webfont.woff2 │ │ ├── gotham-lightitalic-webfont.eot │ │ ├── gotham-lightitalic-webfont.svg │ │ ├── gotham-lightitalic-webfont.ttf │ │ ├── gotham-lightitalic-webfont.woff │ │ └── gotham-lightitalic-webfont.woff2 │ │ ├── medium │ │ ├── gotham-medium-webfont.eot │ │ ├── gotham-medium-webfont.svg │ │ ├── gotham-medium-webfont.ttf │ │ ├── gotham-medium-webfont.woff │ │ ├── gotham-medium-webfont.woff2 │ │ ├── gotham-mediumitalic-webfont.eot │ │ ├── gotham-mediumitalic-webfont.svg │ │ ├── gotham-mediumitalic-webfont.ttf │ │ ├── gotham-mediumitalic-webfont.woff │ │ └── gotham-mediumitalic-webfont.woff2 │ │ ├── thin │ │ ├── gotham-thin-webfont.eot │ │ ├── gotham-thin-webfont.svg │ │ ├── gotham-thin-webfont.ttf │ │ ├── gotham-thin-webfont.woff │ │ ├── gotham-thin-webfont.woff2 │ │ ├── gotham-thinitalic-webfont.eot │ │ ├── gotham-thinitalic-webfont.svg │ │ ├── gotham-thinitalic-webfont.ttf │ │ ├── gotham-thinitalic-webfont.woff │ │ └── gotham-thinitalic-webfont.woff2 │ │ ├── ultra │ │ ├── gotham-ultra-webfont.eot │ │ ├── gotham-ultra-webfont.svg │ │ ├── gotham-ultra-webfont.ttf │ │ ├── gotham-ultra-webfont.woff │ │ ├── gotham-ultra-webfont.woff2 │ │ ├── gotham-ultraitalic-webfont.eot │ │ ├── gotham-ultraitalic-webfont.svg │ │ ├── gotham-ultraitalic-webfont.ttf │ │ ├── gotham-ultraitalic-webfont.woff │ │ └── gotham-ultraitalic-webfont.woff2 │ │ └── xlight │ │ ├── gotham-xlight-webfont.eot │ │ ├── gotham-xlight-webfont.svg │ │ ├── gotham-xlight-webfont.ttf │ │ ├── gotham-xlight-webfont.woff │ │ ├── gotham-xlight-webfont.woff2 │ │ ├── gotham-xlightitalic-webfont.eot │ │ ├── gotham-xlightitalic-webfont.svg │ │ ├── gotham-xlightitalic-webfont.ttf │ │ ├── gotham-xlightitalic-webfont.woff │ │ └── gotham-xlightitalic-webfont.woff2 ├── js │ ├── app.js │ └── ripple.js └── scss │ ├── _badges.scss │ ├── _button-group.scss │ ├── _buttons.scss │ ├── _cards.scss │ ├── _custom-forms.scss │ ├── _elevations.scss │ ├── _fonts.scss │ ├── _forms.scss │ ├── _grid.scss │ ├── _mixins.scss │ ├── _nav.scss │ ├── _normalize.scss │ ├── _reboot.scss │ ├── _type.scss │ ├── _utilities-background.scss │ ├── _utilities-responsive.scss │ ├── _utilities-spacing.scss │ ├── _utilities.scss │ ├── _variables.scss │ ├── mixins │ ├── _border-radius.scss │ ├── _breakpoints.scss │ ├── _buttons.scss │ ├── _clearfix.scss │ ├── _elevations.scss │ ├── _forms.scss │ ├── _grid-framework.scss │ ├── _grid.scss │ ├── _hover.scss │ ├── _labels.scss │ ├── _lists.scss │ ├── _pulls.scss │ ├── _reset-text.scss │ ├── _resize.scss │ ├── _screen-reader.scss │ ├── _size.scss │ ├── _tab-focus.scss │ ├── _text-emphasis.scss │ └── _text-hide.scss │ ├── style.scss │ └── vendor │ └── _ripple.scss ├── tasks ├── README.md ├── fonts.js ├── scripts.js ├── styles.js └── test.js └── tests ├── acceptance ├── animations │ ├── loading.js │ └── ripple.js ├── buttons │ ├── block.js │ ├── checkbox.js │ ├── flat.js │ ├── iconleft.js │ ├── icons.js │ ├── large.js │ ├── outline.js │ ├── primary.js │ ├── radio.js │ ├── righticon.js │ ├── small.js │ ├── text.js │ ├── toggleiconbar.js │ └── togglesegment.js ├── cards │ ├── content-header-footer.js │ ├── content-header.js │ ├── content-type-image-text.js │ ├── content-type-image-title-text-button.js │ ├── content-type-image-title-text-list-links.js │ ├── content-type-program.js │ ├── content-type-title-text-links.js │ ├── featured-header-footer-momentum-line.js │ ├── featured-header.js │ └── image-cap.js ├── example.js ├── forms │ ├── date.js │ ├── email.js │ ├── telephone.js │ ├── text.js │ └── textarea.js ├── sidenav │ └── sidenav.js └── typography │ ├── anchors.js │ ├── blockquote.js │ ├── display.js │ ├── families.js │ ├── headings.js │ ├── inline.js │ ├── lead.js │ └── paragraph.js └── unit-tests ├── cleanup.js ├── index.js ├── ripple ├── index.js ├── set-animation.js └── set-color-opacity.js └── setup.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "jquery": true, 5 | "node": true 6 | }, 7 | "globals": { 8 | "require": true, 9 | "describe": true, 10 | "description": true, 11 | "module": true, 12 | "chai": true, 13 | "it": true 14 | }, 15 | "rules": { 16 | "accessor-pairs": [2], 17 | "block-scoped-var": [2], 18 | "brace-style": [2], 19 | "callback-return": [2, ["callback", "cb", "next"]], 20 | "camelcase": [2], 21 | "comma-dangle": [2], 22 | "comma-spacing": [2, {"before": false, "after": true}], 23 | "comma-style": [2, "last"], 24 | "complexity": [2, 20], 25 | "consistent-return": [0], 26 | "consistent-this": [2, "self"], 27 | "constructor-super": [2], 28 | "curly": [2], 29 | "default-case": [2], 30 | "dot-notation": [2], 31 | "dot-location": [2], 32 | "eqeqeq": [2], 33 | "eol-last": [2], 34 | "func-style": [2, "expression"], 35 | "global-require": [2], 36 | "guard-for-in": [0], 37 | "handle-callback-err": [2, "^err(or)?$"], 38 | "id-length": [0], 39 | "id-match": [2, ""], 40 | "indent": [2, "tab", {"SwitchCase": 1}], 41 | "init-declarations": [0], 42 | "keyword-spacing": [2], 43 | "max-depth": [2, 6], 44 | "max-len": [2, 100, 4], 45 | "max-nested-callbacks": [0], 46 | "max-params": [2, 3], 47 | "max-statements": [0], 48 | "new-cap": [0], 49 | "new-parens": [2], 50 | "newline-after-var": [2], 51 | "no-alert": [2], 52 | "no-array-constructor": [2], 53 | "no-bitwise": [0], 54 | "no-caller": [2], 55 | "no-case-declarations": [2], 56 | "no-catch-shadow": [2], 57 | "no-class-assign": [2], 58 | "no-cond-assign": [2], 59 | "no-console": [0], 60 | "no-const-assign": [2], 61 | "no-constant-condition": [0], 62 | "no-continue": [0], 63 | "no-control-regex": [2], 64 | "no-debugger": [2], 65 | "no-delete-var": [2], 66 | "no-div-regex": [0], 67 | "no-dupe-args": [2], 68 | "no-dupe-class-members": [2], 69 | "no-dupe-keys": [2], 70 | "no-duplicate-case": [2], 71 | "no-else-return": [0], 72 | "no-empty-character-class": [2], 73 | "no-empty-pattern": [2], 74 | "no-empty": [2], 75 | "no-eq-null": [2], 76 | "no-eval": [2], 77 | "no-ex-assign": [2], 78 | "no-extend-native": [2], 79 | "no-extra-bind": [2], 80 | "no-extra-boolean-cast": [2], 81 | "no-extra-parens": [2], 82 | "no-extra-semi": [2], 83 | "no-fallthrough": [2], 84 | "no-floating-decimal": [2], 85 | "no-func-assign": [2], 86 | "no-implicit-coercion": [2], 87 | "no-implicit-globals": [0], 88 | "no-implied-eval": [2], 89 | "no-inline-comments": [0], 90 | "no-inner-declarations": [2], 91 | "no-invalid-regexp": [2], 92 | "no-invalid-this": [0], 93 | "no-irregular-whitespace": [2], 94 | "no-iterator": [2], 95 | "no-label-var": [2], 96 | "no-labels": [0], 97 | "no-lone-blocks": [2], 98 | "no-lonely-if": [2], 99 | "no-loop-func": [2], 100 | "no-magic-numbers": [0], 101 | "no-mixed-requires": [0], 102 | "no-multi-spaces": [2], 103 | "no-mixed-spaces-and-tabs": [2], 104 | "no-multi-str": [2], 105 | "no-multiple-empty-lines": [2], 106 | "no-native-reassign": [2], 107 | "no-negated-condition": [0], 108 | "no-negated-in-lhs": [2], 109 | "no-nested-ternary": [2], 110 | "no-new-func": [0], 111 | "no-new-object": [2], 112 | "no-new-require": [0], 113 | "no-new-wrappers": [2], 114 | "no-new": [2], 115 | "no-obj-calls": [2], 116 | "no-octal-escape": [2], 117 | "no-octal": [2], 118 | "no-param-reassign": [0], 119 | "no-path-concat": [2], 120 | "no-plusplus": [0], 121 | "no-process-env": [2], 122 | "no-process-exit": [0], 123 | "no-proto": [2], 124 | "no-redeclare": [2], 125 | "no-regex-spaces": [2], 126 | "no-restricted-imports": [0], 127 | "no-restricted-syntax": [0], 128 | "no-return-assign": [2], 129 | "no-script-url": [2], 130 | "no-self-compare": [2], 131 | "no-sequences": [2], 132 | "no-shadow-restricted-names": [2], 133 | "no-shadow": [2], 134 | "no-spaced-func": [2], 135 | "no-sparse-arrays": [2], 136 | "no-sync": [0], 137 | "no-ternary": [0], 138 | "no-this-before-super": [2], 139 | "no-throw-literal": [2], 140 | "no-trailing-spaces": [2], 141 | "no-undef-init": [2], 142 | "no-undef": [2], 143 | "no-undefined": [0], 144 | "no-unexpected-multiline": [2], 145 | "no-unneeded-ternary": [2], 146 | "no-unreachable": [2], 147 | "no-unused-expressions": [2], 148 | "no-unused-vars": [2], 149 | "no-use-before-define": [0], 150 | "no-useless-call": [2], 151 | "no-useless-concat": [2], 152 | "no-var": [0], 153 | "no-void": [0], 154 | "no-with": [2], 155 | "no-warning-comments": [2], 156 | "object-shorthand": [0], 157 | "one-var": [0], 158 | "operator-assignment": [2, "always"], 159 | "prefer-arrow-callback": [0], 160 | "prefer-const": [0], 161 | "prefer-reflect": [0], 162 | "prefer-rest-params": [0], 163 | "prefer-spread": [0], 164 | "prefer-template": [0], 165 | "quotes": [2, "single"], 166 | "quote-props": [0], 167 | "require-yield": [0], 168 | "semi-spacing": [2], 169 | "semi": [2, "always"], 170 | "sort-imports": [0], 171 | "sort-vars": [0], 172 | "space-before-blocks": [2], 173 | "space-before-function-paren": [2, "never"], 174 | "space-in-parens": [2, "always"], 175 | "space-infix-ops": [2], 176 | "space-unary-ops": [2], 177 | "strict": [2, "safe"], 178 | "use-isnan": [2], 179 | "valid-jsdoc": [2], 180 | "valid-typeof": [2], 181 | "vars-on-top": [0], 182 | "wrap-iife": [2, "any"], 183 | "wrap-regex": [2], 184 | "yoda": [2] 185 | } 186 | } 187 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS created files 2 | .DS_Store 3 | 4 | # npm created files 5 | *.log 6 | node_modules 7 | 8 | # PhantomCSS file dirs 9 | failures 10 | screenshots 11 | -------------------------------------------------------------------------------- /.jscsrc: -------------------------------------------------------------------------------- 1 | { 2 | "disallowKeywords": [ 3 | "with" 4 | ], 5 | "disallowKeywordsOnNewLine": [ 6 | "else" 7 | ], 8 | "disallowMultipleSpaces": false, 9 | "disallowMixedSpacesAndTabs": true, 10 | "disallowMultipleLineBreaks": true, 11 | "disallowMultipleLineStrings": true, 12 | "disallowMultipleVarDecl": false, 13 | "disallowNewlineBeforeBlockStatements": true, 14 | "disallowSpaceAfterObjectKeys": true, 15 | "disallowSpaceAfterPrefixUnaryOperators": true, 16 | "disallowSpacesInCallExpression": true, 17 | "disallowSpacesInFunctionDeclaration": { 18 | "beforeOpeningRoundBrace": true 19 | }, 20 | "disallowSpacesInsideArrayBrackets": "all", 21 | "disallowSpacesInsideObjectBrackets": "all", 22 | "disallowSpacesInsideParentheses": false, 23 | "disallowTrailingWhitespace": true, 24 | "maximumLineLength": null, 25 | "requireCamelCaseOrUpperCaseIdentifiers": true, 26 | "requireCapitalizedConstructors": true, 27 | "requireCurlyBraces": [ 28 | "if", 29 | "else", 30 | "for", 31 | "while", 32 | "do", 33 | "try", 34 | "catch" 35 | ], 36 | "requireDotNotation": true, 37 | "requireLineFeedAtFileEnd": true, 38 | "requireOperatorBeforeLineBreak": true, 39 | "requireSemicolons": true, 40 | "requireSpaceAfterBinaryOperators": true, 41 | "requireSpaceAfterKeywords": [ 42 | "if", 43 | "else", 44 | "for", 45 | "while", 46 | "do", 47 | "switch", 48 | "return", 49 | "try", 50 | "catch" 51 | ], 52 | "requireSpaceBeforeBinaryOperators": [ 53 | "=", 54 | "+=", 55 | "-=", 56 | "*=", 57 | "/=", 58 | "%=", 59 | "<<=", 60 | ">>=", 61 | ">>>=", 62 | "&=", 63 | "|=", 64 | "^=", 65 | "+=", 66 | "+", 67 | "-", 68 | "*", 69 | "/", 70 | "%", 71 | "<<", 72 | ">>", 73 | ">>>", 74 | "&", 75 | "|", 76 | "^", 77 | "&&", 78 | "||", 79 | "===", 80 | "==", 81 | ">=", 82 | "<=", 83 | "<", 84 | ">", 85 | "!=", 86 | "!==" 87 | ], 88 | "requireSpaceBeforeBlockStatements": true, 89 | "requireSpaceBeforeObjectValues": true, 90 | "requireSpacesInAnonymousFunctionExpression": { 91 | "beforeOpeningCurlyBrace": true, 92 | }, 93 | "requireSpacesInConditionalExpression": true, 94 | "requireSpacesInForStatement": true, 95 | "requireSpacesInFunctionDeclaration": { 96 | "beforeOpeningCurlyBrace": true 97 | }, 98 | "validateIndentation": "\t", 99 | "validateParameterSeparator": ", ", 100 | "validateQuoteMarks": "'" 101 | } 102 | -------------------------------------------------------------------------------- /.scss-lint.yml: -------------------------------------------------------------------------------- 1 | linters: 2 | 3 | BangFormat: 4 | enabled: true 5 | space_before_bang: true 6 | space_after_bang: false 7 | 8 | BorderZero: 9 | enabled: true 10 | 11 | ChainedClasses: 12 | enabled: true 13 | 14 | ColorKeyword: 15 | enabled: false 16 | 17 | ColorVariable: 18 | enabled: true 19 | 20 | Comment: 21 | enabled: false 22 | 23 | DebugStatement: 24 | enabled: true 25 | 26 | DeclarationOrder: 27 | enabled: true 28 | 29 | DuplicateProperty: 30 | enabled: true 31 | 32 | ElsePlacement: 33 | enabled: true 34 | style: same_line 35 | 36 | EmptyLineBetweenBlocks: 37 | enabled: true 38 | ignore_single_line_blocks: false 39 | 40 | EmptyRule: 41 | enabled: true 42 | 43 | FinalNewline: 44 | enabled: true 45 | present: true 46 | 47 | HexLength: 48 | enabled: true 49 | style: short 50 | 51 | HexNotation: 52 | enabled: true 53 | style: lowercase 54 | 55 | HexValidation: 56 | enabled: true 57 | 58 | IdSelector: 59 | enabled: true 60 | 61 | ImportantRule: 62 | enabled: true 63 | 64 | ImportPath: 65 | enabled: true 66 | leading_underscore: false 67 | filename_extension: false 68 | 69 | Indentation: 70 | enabled: true 71 | character: tab 72 | width: 1 73 | 74 | LeadingZero: 75 | enabled: true 76 | style: exclude_zero 77 | 78 | MergeableSelector: 79 | enabled: true 80 | force_nesting: false 81 | 82 | NameFormat: 83 | enabled: false 84 | 85 | NestingDepth: 86 | enabled: true 87 | max_depth: 3 88 | 89 | PlaceholderInExtend: 90 | enabled: true 91 | 92 | PropertySortOrder: 93 | enabled: false 94 | ignore_unspecified: false 95 | 96 | PropertySpelling: 97 | enabled: true 98 | extra_properties: [] 99 | 100 | PropertyUnites: 101 | global: ['em', 'rem', '%'] 102 | properties: 103 | border: ['px'] 104 | line-height: [] 105 | margin: ['em', 'rem'] 106 | 107 | PseudoElement: 108 | enabled: true 109 | 110 | QualifyingElement: 111 | enabled: true 112 | allow_element_with_attribute: false 113 | allow_element_with_class: false 114 | allow_element_with_id: false 115 | 116 | SelectorDepth: 117 | enabled: true 118 | max_depth: 3 119 | 120 | SelectorFormat: 121 | enabled: false 122 | 123 | Shorthand: 124 | enabled: true 125 | 126 | SingleLinePerProperty: 127 | enabled: true 128 | allow_single_line_rule_sets: false 129 | 130 | SingleLinePerSelector: 131 | enabled: true 132 | 133 | SpaceAfterComma: 134 | enabled: true 135 | 136 | SpaceAfterPropertyColon: 137 | enabled: true 138 | style: one_space 139 | 140 | SpaceAfterPropertyName: 141 | enabled: true 142 | 143 | SpaceAfterVariableName: 144 | enabled: true 145 | 146 | SpaceAroundOperator: 147 | enabled: true 148 | 149 | SpaceBeforeBrace: 150 | enabled: true 151 | style: space 152 | allow_single_line_padding: false 153 | 154 | SpaceBetweenParens: 155 | enabled: true 156 | spaces: 0 157 | 158 | StringQuotes: 159 | enabled: true 160 | style: single_quotes 161 | 162 | TrailingSemicolon: 163 | enabled: true 164 | 165 | TrailingZero: 166 | enabled: true 167 | 168 | TransitionAll: 169 | enabled: true 170 | 171 | UnnecessaryMantissa: 172 | enabled: true 173 | 174 | UnnecessaryParentReference: 175 | enabled: true 176 | 177 | UrlFormat: 178 | enabled: true 179 | 180 | UrlQuotes: 181 | enabled: true 182 | 183 | VariableForProperty: 184 | enabled: true 185 | 186 | VendorPrefixes: 187 | enabled: true 188 | identifier_list: base 189 | include: [] 190 | exclude: [] 191 | 192 | ZeroUnit: 193 | enabled: true 194 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Design System 2 | 3 | JDRF's Design System is a method of enabling every vendor of [JDRF](https://www.jdrf.org) to apply the same level of branding to their sites. We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and answers some questions that you may have. 4 | 5 | ## Our Development Process 6 | 7 | All of the team will be working directly on GitHub. 8 | 9 | ### Test Suite 10 | 11 | Use `npm run test` to run the full test suite with PhantomCSS and eventually PhantomJS. 12 | 13 | Just make sure to run the whole test suite before submitting a pull request! Any PR without tests will be rejected. 14 | 15 | ### Pull Requests 16 | 17 | **Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github) 18 | 19 | The core team will be monitoring for pull requests. 20 | 21 | *Before* submitting a pull request, please make sure the following is done… 22 | 23 | 1. Fork the repo and create your branch from `master`. 24 | 2. If you've added code that should be tested, add tests! 25 | 3. Ensure the test suite passes (`npm run test`). 26 | 4. You have not committed compiled files (anything from the dist folder) 27 | 28 | ## Bugs 29 | 30 | ### Where to Find Known Issues 31 | 32 | We will be using GitHub Issues for our public bugs. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist. 33 | 34 | ### Reporting New Issues 35 | 36 | The best way to get your bug fixed is to provide a reduced test case. jsFiddle, jsBin, and other sites provide a way to give live examples. All issues should be reported through [Github](https://github.com/JDRF/design-system/issues). 37 | 38 | ## JS Style Guide 39 | 40 | If you are unsure about something, looking at [Airbnb's Style Guide](https://github.com/airbnb/javascript) will guide you in the right direction. 41 | 42 | ## License 43 | 44 | By contributing to JDRF Design System, you agree that your contributions will be licensed under its MIT license. 45 | -------------------------------------------------------------------------------- /JDRF Marketing UI Kit.sketch: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/JDRF Marketing UI Kit.sketch -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016, JDRF 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JDRF Design System 2 | 3 | > Build web experiences that feel beautifully at home in the JDRF ecosystem — without needing to write any CSS or Javascript. 4 | 5 | # Using Design System 6 | To use Design System, copy/download the file found in the [dist folder](https://github.com/JDRF/design-system/tree/master/dist/css) to your website. This file contains all current components and provides support for any needed icons, typography, or styling. We recommend including it in the `HEAD` html tag for use throughout your website/application. 7 | ```` 8 | 9 | ```` 10 | If font files are needed for the website/application, copy/download the font files found in the [dist folder](https://github.com/JDRF/design-system/tree/master/dist/fonts/gotham). It's recommended to place the font folder in a similar path to the CSS files. 11 | ```` 12 | └── ./ 13 | ├── css/ 14 | └── design-system.css 15 | └── fonts/ 16 | └── gotham/ 17 | ```` 18 | 19 | If icons are a requirement, Design System already includes all necessary styles, but requires the font file from Google's CDN. Include this in the `HEAD` html tag right before the Design System css file. 20 | ```` 21 | 22 | 23 | ```` 24 | 25 | # Design System Pieces 26 | Below are the different available Design System elements. If possible, an element is built upon existing Bootstrap-v4 components. 27 | ### Components 28 | * Badges 29 | * Bootstrap Doc Reference: [here](http://v4-alpha.getbootstrap.com/components/label/) 30 | * Template Path in gh-pages: `src/materials/components/badges.html` 31 | * Style Path: `src/scss/_badges.scss`, `src/scss/_variables.scss` 32 | * Example: [here](http://jdrf.github.io/design-system/dist/components.html#badges) 33 | * Buttons 34 | * Bootstrap Doc Reference: [here](http://v4-alpha.getbootstrap.com/components/buttons/) 35 | * Template Path in gh-pages: `src/materials/components/buttons.html` 36 | * Style Path: `src/scss/_buttons.scss`, `src/scss/mixins/_buttons.scss`, `src/scss/_variables.scss` 37 | * Example: [here](http://jdrf.github.io/design-system/dist/components.html#buttons) 38 | * Cards 39 | * Bootstrap Doc Reference: [here](http://v4-alpha.getbootstrap.com/components/card/) 40 | * Template Path in gh-pages: `src/materials/components/cards.html` 41 | * Style Path: `src/scss/_cards.scss`, `src/scss/_variables.scss` 42 | * Example: [here](http://jdrf.github.io/design-system/dist/components.html#cards) 43 | * Side Navigation 44 | * Bootstrap Doc Reference: N/A 45 | * Template Path in gh-pages: `src/materials/components/navigation.html` 46 | * Style Path: `src/scss/_nav.scss` 47 | * Example: [here](http://jdrf.github.io/design-system/dist/components.html#side-navigation) 48 | 49 | ### Content 50 | * Colors 51 | * Bootstrap Doc Reference: N/A 52 | * Template Path in gh-pages: `src/materials/content/colors.html`, `src/data/toolkit.yml` 53 | * Style Path: `src/scss/_variables.scss` 54 | * Example: [here](http://jdrf.github.io/design-system/dist/content.html#colors) 55 | * Icons 56 | * Bootstrap Doc Reference: N/A 57 | * Template Path in gh-pages: `src/materials/content/icons.html` 58 | * Style Path: N/A 59 | * Example: [here](http://jdrf.github.io/design-system/dist/content.html#icons) 60 | * Typography 61 | * Bootstrap Doc Reference: [here](http://v4-alpha.getbootstrap.com/content/typography/) 62 | * Template Path in gh-pages: `src/materials/content/typography.html` 63 | * Style Path: `src/scss/_type.scss`, `src/scss/_variables.scss` 64 | * Example: [here](http://jdrf.github.io/design-system/dist/content.html#typography) 65 | 66 | ###Layout 67 | * Elevation 68 | * Bootstrap Doc Reference: N/A 69 | * Template Path in gh-pages: `src/materials/layout/elevation.html` 70 | * Style Path: `src/scss/_elevations.scss`, `src/scss/_variables.scss` 71 | * Example: [here](http://jdrf.github.io/design-system/dist/layout.html#elevation) 72 | * Grid 73 | * Bootstrap Doc Reference: [here](http://v4-alpha.getbootstrap.com/layout/grid/) 74 | * Template Path in gh-pages: `src/materials/layout/grid.html` 75 | * Style Path: `src/scss/_grid.scss`, `src/scss/mixins/_grid.scss` 76 | * Example: [here](http://jdrf.github.io/design-system/dist/layout.html#grid) 77 | 78 | 79 | # Contributing 80 | 81 | ### Installation 82 | This will require that the master branch to be setup in a sub folder at ./design-system. Be sure that you have switched to the gh-pages branch and cloned another copy of the repo (master branch) into your working directory. The structure should be similar to below. 83 | 84 | ```` 85 | # Fork the repo in GitHub 86 | git clone https://github.com//design-system.git 87 | git remote add upstream https://github.com/JDRF/design-system.git 88 | git checkout -b gh-pages upstream/gh-pages 89 | git push origin gh-pages 90 | git clone https://github.com//design-system.git 91 | ```` 92 | Now your file structure matches the below, you can run the next below command to npm install and build the correct files. 93 | ```` 94 | └── working-directory (gh-pages branch) 95 | ├── /design-system/ (master branch) 96 | ├── /dist/ 97 | ├── /src/ 98 | ├── gulpfile.js 99 | └── package.json 100 | ```` 101 | 102 | ``` 103 | npm run pull 104 | ``` 105 | 106 | To find available commands from this recommended setup, please visit the [gh-pages](https://github.com/JDRF/design-system/tree/gh-pages) branch 107 | 108 | ### Pull Requests 109 | Please review the contributing doc found [here](https://github.com/JDRF/design-system/blob/master/CONTRIBUTING.md) 110 | 111 | ### Tests 112 | Tests can be run from the master branch. There are two kinds of testing currently in the Design System - Visual Regression and Unit Tests. Visual Regression relies on PhantomCSS and CasperJS as tools and the gh-pages static site as a visual source. As a result, the testing actually gets executed from that branch when the environment is setup properly (see Installation above). Unit Tests rely on Tape and Node scripting for generating mocks and tests. 113 | 114 | * Visual Regression Tests 115 | ```` 116 | npm run visual-tests 117 | ```` 118 | * Unit Tests 119 | ```` 120 | npm run unit-tests 121 | ```` 122 | * Running all tests 123 | ```` 124 | npm test 125 | ```` 126 | 127 | Visual Regression tests are run from a parent directory that relies on the above specified directory structure. See the [gh-pages README](https://github.com/JDRF/design-system/tree/gh-pages) for information on testing. 128 | 129 | ### Semantic Versioning and Releases 130 | We're using Semantic Versioning to increment the release phases of the Design System. This helps us to track major changes as well as minor changes and patches. We can also view a history of the project's [releases on Github](https://github.com/JDRF/design-system/releases) due to Semantic Versioning. 131 | 132 | A Semantic Version number usually looks something like this - `v0.0.1`. The digit placement helps identify whether the release is a major release, a minor release, or a patch. See the example below for reference. 133 | 134 | ```` 135 | MAJOR.MINOR.PATCH 136 | 137 | 1.0.0 = Major Release 138 | 1.1.0 = Minor changes to Major Release 1.0.0 139 | 1.0.1 = Patch/Bug fixes to Major Release 1.0.0 140 | 2.0.0 = A new Major Release 141 | ```` 142 | 143 | To create a new release, we have to tag our `master` branch with the new release number. This can be done directly on Github. 144 | 145 | For further instructions on how to tag a release, visit Github's documentation on [creating releases](https://help.github.com/articles/creating-releases/). 146 | 147 | For further instructions on how to link to a release, visit Github's documentation on [linking to releases](https://help.github.com/articles/linking-to-releases/). 148 | 149 | # Current Release Status 150 | We are currently at a pre-release version of [v0.0.1](https://github.com/JDRF/design-system/releases). While the Design System is functional, it is still a work in progress build tool wise and design wise. 151 | -------------------------------------------------------------------------------- /dist/fonts/gotham/black/gotham-black-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/black/gotham-black-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/black/gotham-black-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/black/gotham-black-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/black/gotham-black-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/black/gotham-black-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/black/gotham-black-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/black/gotham-black-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/black/gotham-blackitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/black/gotham-blackitalic-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/black/gotham-blackitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/black/gotham-blackitalic-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/black/gotham-blackitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/black/gotham-blackitalic-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/black/gotham-blackitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/black/gotham-blackitalic-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/bold/gotham-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/bold/gotham-bold-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/bold/gotham-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/bold/gotham-bold-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/bold/gotham-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/bold/gotham-bold-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/bold/gotham-bold-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/bold/gotham-bold-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/bold/gotham-bolditalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/bold/gotham-bolditalic-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/bold/gotham-bolditalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/bold/gotham-bolditalic-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/bold/gotham-bolditalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/bold/gotham-bolditalic-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/bold/gotham-bolditalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/bold/gotham-bolditalic-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/book/gotham-book-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/book/gotham-book-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/book/gotham-book-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/book/gotham-book-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/book/gotham-book-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/book/gotham-book-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/book/gotham-book-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/book/gotham-book-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/book/gotham-bookitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/book/gotham-bookitalic-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/book/gotham-bookitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/book/gotham-bookitalic-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/book/gotham-bookitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/book/gotham-bookitalic-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/book/gotham-bookitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/book/gotham-bookitalic-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/light/gotham-light-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/light/gotham-light-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/light/gotham-light-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/light/gotham-light-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/light/gotham-light-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/light/gotham-light-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/light/gotham-light-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/light/gotham-light-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/light/gotham-lightitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/light/gotham-lightitalic-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/light/gotham-lightitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/light/gotham-lightitalic-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/light/gotham-lightitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/light/gotham-lightitalic-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/light/gotham-lightitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/light/gotham-lightitalic-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/medium/gotham-medium-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/medium/gotham-medium-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/medium/gotham-medium-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/medium/gotham-medium-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/medium/gotham-medium-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/medium/gotham-medium-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/medium/gotham-medium-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/medium/gotham-medium-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/medium/gotham-mediumitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/medium/gotham-mediumitalic-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/medium/gotham-mediumitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/medium/gotham-mediumitalic-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/medium/gotham-mediumitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/medium/gotham-mediumitalic-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/medium/gotham-mediumitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/medium/gotham-mediumitalic-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/thin/gotham-thin-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/thin/gotham-thin-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/thin/gotham-thin-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/thin/gotham-thin-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/thin/gotham-thin-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/thin/gotham-thin-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/thin/gotham-thin-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/thin/gotham-thin-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/thin/gotham-thinitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/thin/gotham-thinitalic-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/thin/gotham-thinitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/thin/gotham-thinitalic-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/thin/gotham-thinitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/thin/gotham-thinitalic-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/thin/gotham-thinitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/thin/gotham-thinitalic-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/ultra/gotham-ultra-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/ultra/gotham-ultra-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/ultra/gotham-ultra-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/ultra/gotham-ultra-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/ultra/gotham-ultra-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/ultra/gotham-ultra-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/ultra/gotham-ultra-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/ultra/gotham-ultra-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/ultra/gotham-ultraitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/ultra/gotham-ultraitalic-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/ultra/gotham-ultraitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/ultra/gotham-ultraitalic-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/ultra/gotham-ultraitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/ultra/gotham-ultraitalic-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/ultra/gotham-ultraitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/ultra/gotham-ultraitalic-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/xlight/gotham-xlight-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/xlight/gotham-xlight-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/xlight/gotham-xlight-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/xlight/gotham-xlight-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/xlight/gotham-xlight-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/xlight/gotham-xlight-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/xlight/gotham-xlight-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/xlight/gotham-xlight-webfont.woff2 -------------------------------------------------------------------------------- /dist/fonts/gotham/xlight/gotham-xlightitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/xlight/gotham-xlightitalic-webfont.eot -------------------------------------------------------------------------------- /dist/fonts/gotham/xlight/gotham-xlightitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/xlight/gotham-xlightitalic-webfont.ttf -------------------------------------------------------------------------------- /dist/fonts/gotham/xlight/gotham-xlightitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/xlight/gotham-xlightitalic-webfont.woff -------------------------------------------------------------------------------- /dist/fonts/gotham/xlight/gotham-xlightitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/dist/fonts/gotham/xlight/gotham-xlightitalic-webfont.woff2 -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | del = require('del'), 3 | plugins = require('gulp-load-plugins')({ 4 | rename: { 5 | 'gulp-scss-lint': 'scsslint', 6 | 'gulp-clean-css': 'minifycss', 7 | 'gulp-autoprefixer' : 'prefix', 8 | } 9 | }), 10 | paths = { 11 | bootstrap: { 12 | scripts: './node_modules/bootstrap/dist/js/bootstrap.js', 13 | styles: './node_modules/bootstrap/' 14 | }, 15 | scripts: './src/js/**/*.js', 16 | styles: './src/scss/style.scss' 17 | }, 18 | comments = ['/**', 19 | ' * <%= pkg.name %> - <%= pkg.description %>', 20 | ' * @version v<%= pkg.version %>', 21 | ' * @link <%= pkg.homepage %>', 22 | ' * @license <%= pkg.license %>', 23 | ' */', 24 | ''].join('\n'); 25 | 26 | plugins.merge = require('merge-stream'); 27 | plugins.runSequence = require('run-sequence'); 28 | plugins.pkg = require('./package.json'); 29 | 30 | function getTask(task) { 31 | return require('./tasks/' + task)(gulp, plugins, comments); 32 | } 33 | 34 | // Clean the dist directory 35 | gulp.task('clean', function() { 36 | return del(['dist', 'screenshots', 'failures']); 37 | }); 38 | 39 | gulp.task('clean:css', function() { 40 | return del(['dist/css']); 41 | }); 42 | 43 | gulp.task('clean:js', function() { 44 | return del(['dist/js']); 45 | }); 46 | 47 | // Compile all scripts together 48 | gulp.task('scripts', ['clean:js'], getTask('scripts')); 49 | 50 | // Compile all sass files together 51 | gulp.task('styles', ['clean:css'], getTask('styles')); 52 | 53 | gulp.task('fonts', ['clean'], getTask('fonts')); 54 | 55 | gulp.task('test', getTask('test')); 56 | 57 | // Rerun the task when a file changes 58 | gulp.task('watch', function() { 59 | gulp.watch(paths.scripts, ['scripts']); 60 | gulp.watch(paths.styles, ['styles']); 61 | }); 62 | 63 | gulp.task('default', ['clean'], function () { 64 | plugins.runSequence([ 65 | 'fonts', 66 | 'styles', 67 | 'scripts', 68 | ]); 69 | }); 70 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jdrf-design-system", 3 | "version": "0.0.2", 4 | "description": "JDRF Digital Design System", 5 | "author": "Patrick McKowen ", 6 | "contributors": [ 7 | { 8 | "name": "Nick Smith", 9 | "email": "fuhton@gmail.com" 10 | } 11 | ], 12 | "scripts": { 13 | "prepull": "git checkout master && git pull origin master", 14 | "pull": "npm install && gulp", 15 | "build": "npm install && gulp", 16 | "visual-test": "cd .. && npm run test && cd -", 17 | "unit-test": "node tests/unit-tests | tap-spec && node tests/unit-tests/cleanup.js", 18 | "test": "npm run unit-test && npm run visual-test", 19 | "clean": "gulp clean && rm -rf node_modules" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/JDRF/design-system" 24 | }, 25 | "bugs": { 26 | "url": "https://github.com/JDRF/design-system/issues" 27 | }, 28 | "homepage": "https://github.com/JDRF/design-system#readme", 29 | "keywords": [ 30 | "Style Guide", 31 | "JDRF", 32 | "Bootstrap" 33 | ], 34 | "license": "MIT", 35 | "devDependencies": { 36 | "bootstrap": "4.0.0-alpha.2", 37 | "del": "^2.2.0", 38 | "gulp-autoprefixer": "^3.1.0", 39 | "gulp-clean-css": "^2.0.9", 40 | "gulp-concat": "^2.6.0", 41 | "gulp-css-namespace": "^0.1.4", 42 | "gulp-eslint": "^2.0.0", 43 | "gulp-header": "^1.8.2", 44 | "gulp-jscs": "^3.0.2", 45 | "gulp-notify": "^2.2.0", 46 | "gulp-rename": "^1.2.2", 47 | "gulp-replace": "^0.5.4", 48 | "gulp-sass": "^2.3.1", 49 | "gulp-scss-lint": "^0.4.0", 50 | "jquery": "^2.2.4", 51 | "material-icons": "^0.1.0", 52 | "merge-stream": "^1.0.0", 53 | "run-sequence": "^1.2.1", 54 | "tap-spec": "^4.1.1", 55 | "tape": "^4.5.1" 56 | }, 57 | "dependencies": { 58 | "gulp": "^3.9.1", 59 | "gulp-load-plugins": "^1.2.4", 60 | "node-sass": "^3.7.0" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/fonts/gotham/black/gotham-black-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/black/gotham-black-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/black/gotham-black-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/black/gotham-black-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/black/gotham-black-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/black/gotham-black-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/black/gotham-black-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/black/gotham-black-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/black/gotham-blackitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/black/gotham-blackitalic-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/black/gotham-blackitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/black/gotham-blackitalic-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/black/gotham-blackitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/black/gotham-blackitalic-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/black/gotham-blackitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/black/gotham-blackitalic-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/bold/gotham-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/bold/gotham-bold-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/bold/gotham-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/bold/gotham-bold-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/bold/gotham-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/bold/gotham-bold-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/bold/gotham-bold-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/bold/gotham-bold-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/bold/gotham-bolditalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/bold/gotham-bolditalic-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/bold/gotham-bolditalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/bold/gotham-bolditalic-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/bold/gotham-bolditalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/bold/gotham-bolditalic-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/bold/gotham-bolditalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/bold/gotham-bolditalic-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/book/gotham-book-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/book/gotham-book-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/book/gotham-book-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/book/gotham-book-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/book/gotham-book-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/book/gotham-book-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/book/gotham-book-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/book/gotham-book-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/book/gotham-bookitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/book/gotham-bookitalic-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/book/gotham-bookitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/book/gotham-bookitalic-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/book/gotham-bookitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/book/gotham-bookitalic-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/book/gotham-bookitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/book/gotham-bookitalic-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/light/gotham-light-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/light/gotham-light-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/light/gotham-light-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/light/gotham-light-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/light/gotham-light-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/light/gotham-light-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/light/gotham-light-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/light/gotham-light-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/light/gotham-lightitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/light/gotham-lightitalic-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/light/gotham-lightitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/light/gotham-lightitalic-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/light/gotham-lightitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/light/gotham-lightitalic-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/light/gotham-lightitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/light/gotham-lightitalic-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/medium/gotham-medium-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/medium/gotham-medium-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/medium/gotham-medium-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/medium/gotham-medium-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/medium/gotham-medium-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/medium/gotham-medium-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/medium/gotham-medium-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/medium/gotham-medium-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/medium/gotham-mediumitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/medium/gotham-mediumitalic-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/medium/gotham-mediumitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/medium/gotham-mediumitalic-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/medium/gotham-mediumitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/medium/gotham-mediumitalic-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/medium/gotham-mediumitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/medium/gotham-mediumitalic-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/thin/gotham-thin-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/thin/gotham-thin-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/thin/gotham-thin-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/thin/gotham-thin-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/thin/gotham-thin-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/thin/gotham-thin-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/thin/gotham-thin-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/thin/gotham-thin-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/thin/gotham-thinitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/thin/gotham-thinitalic-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/thin/gotham-thinitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/thin/gotham-thinitalic-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/thin/gotham-thinitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/thin/gotham-thinitalic-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/thin/gotham-thinitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/thin/gotham-thinitalic-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/ultra/gotham-ultra-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/ultra/gotham-ultra-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/ultra/gotham-ultra-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/ultra/gotham-ultra-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/ultra/gotham-ultra-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/ultra/gotham-ultra-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/ultra/gotham-ultra-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/ultra/gotham-ultra-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/ultra/gotham-ultraitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/ultra/gotham-ultraitalic-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/ultra/gotham-ultraitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/ultra/gotham-ultraitalic-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/ultra/gotham-ultraitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/ultra/gotham-ultraitalic-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/ultra/gotham-ultraitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/ultra/gotham-ultraitalic-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/xlight/gotham-xlight-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/xlight/gotham-xlight-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/xlight/gotham-xlight-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/xlight/gotham-xlight-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/xlight/gotham-xlight-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/xlight/gotham-xlight-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/xlight/gotham-xlight-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/xlight/gotham-xlight-webfont.woff2 -------------------------------------------------------------------------------- /src/fonts/gotham/xlight/gotham-xlightitalic-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/xlight/gotham-xlightitalic-webfont.eot -------------------------------------------------------------------------------- /src/fonts/gotham/xlight/gotham-xlightitalic-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/xlight/gotham-xlightitalic-webfont.ttf -------------------------------------------------------------------------------- /src/fonts/gotham/xlight/gotham-xlightitalic-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/xlight/gotham-xlightitalic-webfont.woff -------------------------------------------------------------------------------- /src/fonts/gotham/xlight/gotham-xlightitalic-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JDRF/design-system/6639f622efdac504720673bfb8a1d411601b97b6/src/fonts/gotham/xlight/gotham-xlightitalic-webfont.woff2 -------------------------------------------------------------------------------- /src/js/app.js: -------------------------------------------------------------------------------- 1 | // : init 2 | 'use strict'; 3 | 4 | ( function() { 5 | 6 | //check for IE9 and lower, return if we are in IE9 or lower 7 | if ( navigator.appVersion.indexOf( 'MSIE 9.', 'MSIE 8.' ) !== -1 ) { 8 | 9 | jQuery( document ).ready( function() { 10 | var loaderBtn = $( document.querySelector( '.ds-btn-loading' ) ); 11 | var loaderSpinner = $( document.querySelector( '.ds-spinner' ) ); 12 | 13 | loaderSpinner.remove(); 14 | loaderBtn.text( 'Loading...' ); 15 | loaderBtn.addClass( 'ds-btn-ie-fallback' ); 16 | } ); 17 | 18 | return; 19 | 20 | } else { 21 | 22 | jQuery( document ).ready( function() { 23 | var ripple = window.ripple( '.ds-btn', { 24 | debug: false, // Turn Ripple.js logging on/off 25 | on: 'mousedown', // The event to trigger a ripple effect 26 | 27 | opacity: 0.4, // The opacity of the ripple 28 | color: 'auto', // Set the background color. 29 | multi: false, // Allow multiple ripples per element 30 | 31 | duration: 0.5, // The duration of the ripple 32 | exclude: ['ds-no-ripple'], //Exclude ripple on this selector 33 | 34 | // Filter function for modifying the speed of the ripple 35 | rate: function( pxPerSecond ) { 36 | return pxPerSecond; 37 | }, 38 | 39 | easing: 'linear' // The CSS3 easing function of the ripple 40 | } ); 41 | 42 | ripple.init(); 43 | 44 | } ); 45 | 46 | jQuery( document ).ready( function() { 47 | var labels = jQuery( '.ds-form-label-relative' ); 48 | 49 | labels.each( function() { 50 | var fontFamily = $( this ).css( 'font-family' ); 51 | var color = $( this ).css( 'color' ); 52 | var sibling = $( this ).next(); 53 | 54 | sibling.on( 'focus', function() { 55 | $( this ).css( { 56 | 'color': '#0073cf', 57 | 'font-family': '"Gotham Medium", sans-serif' 58 | } ); 59 | }.bind( this ) ); 60 | 61 | sibling.on( 'focusout', function() { 62 | $( this ).css( { 63 | 'color': color, 64 | 'font-family': fontFamily 65 | } ); 66 | }.bind( this ) ); 67 | 68 | } ); 69 | } ); 70 | } 71 | 72 | } )(); 73 | -------------------------------------------------------------------------------- /src/js/ripple.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var jQuery = typeof jQuery !== 'undefined' ? window.jQuery : global.jQuery; 4 | var doc = typeof window !== 'undefined' ? document : global.document; 5 | var win = typeof window !== 'undefined' ? window : global.window; 6 | 7 | ( function( $ ) { 8 | 9 | win.ripple = function( selector, options ) { 10 | 11 | var init = function() { 12 | 13 | var self = this; 14 | 15 | self.selector = selector; 16 | self.defaults = { 17 | debug: false, 18 | on: 'mousedown', 19 | 20 | opacity: 0.4, 21 | color: 'auto', 22 | multi: false, 23 | 24 | duration: 0.7, 25 | rate: function( pxPerSecond ) { 26 | return pxPerSecond; 27 | }, 28 | 29 | exclude: ['ds-no-ripple'], 30 | 31 | easing: 'linear' 32 | }; 33 | 34 | self.defaults = $.extend( {}, self.defaults, options ); 35 | 36 | $( doc ).on( self.defaults.on, self.selector, rippleTrigger.bind( self ) ); 37 | 38 | }; 39 | 40 | var rippleTrigger = function( e ) { 41 | 42 | var $this = $( e.target ); 43 | var $ripple; 44 | var settings; 45 | 46 | var excludeClasses = this.defaults.exclude; 47 | var removeRipple = false; 48 | 49 | if ( Array.isArray( excludeClasses ) ) { 50 | $.each( excludeClasses, function( index, value ) { 51 | if ( $this.hasClass( value ) ) { 52 | removeRipple = true; 53 | } 54 | } ); 55 | 56 | if ( removeRipple === true ) { 57 | return; 58 | } 59 | } 60 | 61 | // Add ds-has-ripple class 62 | $this.addClass( 'ds-has-ripple' ); 63 | 64 | // This instances settings 65 | settings = $.extend( {}, this.defaults, $this.data() ); 66 | 67 | // Create the ripple element 68 | if ( settings.multi || !settings.multi && $this.find( '.ds-ripple' ).length === 0 ) { 69 | $ripple = $( '' ).addClass( 'ds-ripple' ); 70 | $ripple.appendTo( $this ); 71 | 72 | // Set ripple size 73 | setRippleSize( $ripple, $this ); 74 | 75 | // Give the user the ability to change the rate of the animation 76 | // based on element width 77 | if ( settings.rate && typeof settings.rate === 'function' ) { 78 | //settings duration = to returned new duration 79 | settings.duration = this.setAnimationRate( $ripple, settings ); 80 | } 81 | 82 | // Set the color and opacity 83 | settings.color = setColorOpacity( $ripple, settings, $this ); 84 | 85 | $ripple.css( { 86 | background: settings.color, 87 | animationDuration: settings.duration.toString() + 's', 88 | animationTimingFunction: settings.easing, 89 | opacity: settings.opacity 90 | } ); 91 | } 92 | 93 | // Ensure we always have the ripple element 94 | if ( !settings.multi ) { 95 | $ripple = $this.find( '.ds-ripple' ); 96 | } 97 | 98 | // Kill animation 99 | $ripple.removeClass( 'ds-ripple-animate' ); 100 | 101 | /** 102 | * We want to delete the ripple elements if we allow multiple so we dont 103 | * sacrifice any page performance. We don't do this on single ripples 104 | * because once it has rendered, we only need to trigger paints thereafter. 105 | */ 106 | if ( settings.multi ) { 107 | $ripple.one( 'animationend webkitAnimationEnd oanimationend MSAnimationEnd', 108 | function() { 109 | $( this ).remove(); 110 | } 111 | ); 112 | } 113 | 114 | // Set position and animate 115 | setPosAnimation( $ripple, $this, e ); 116 | }; 117 | 118 | var setRippleSize = function( $rippleSpan, el ) { 119 | var $selector = el; 120 | 121 | // Set ripple size 122 | if ( !$rippleSpan.height() && !$rippleSpan.width() ) { 123 | var size = Math.max( $selector.outerWidth(), $selector.outerHeight() ); 124 | 125 | $rippleSpan.css( { 126 | height: size, 127 | width: size 128 | } ); 129 | } 130 | }; 131 | 132 | var setAnimationRate = function( $rippleSpan, userSettings ) { 133 | // rate = pixels per second 134 | var rate = Math.round( $rippleSpan.width() / userSettings.duration ); 135 | 136 | // new amount of pixels per second 137 | var filteredRate = userSettings.rate( rate ); 138 | 139 | // Determine the new duration for the animation 140 | var newDuration = $rippleSpan.width() / filteredRate; 141 | 142 | // Set the new duration if it has not changed 143 | if ( userSettings.duration.toFixed( 2 ) !== newDuration.toFixed( 2 ) ) { 144 | return newDuration; 145 | } 146 | 147 | return userSettings.duration; 148 | 149 | }; 150 | 151 | var setColorOpacity = function( $rippleSpan, userSettings, el ) { 152 | // Set the color and opacity 153 | var color = userSettings.color === 'auto' ? el.css( 'color' ) : userSettings.color; 154 | 155 | return color; 156 | }; 157 | 158 | var setPosAnimation = function( $rippleSpan, el, event ) { 159 | var $this = el, 160 | $event = event; 161 | 162 | // Retrieve coordinates 163 | var x = $event.pageX - $this.offset().left - $rippleSpan.width() / 2; 164 | var y = $event.pageY - $this.offset().top - $rippleSpan.height() / 2; 165 | 166 | // Set position and animate 167 | $rippleSpan.css( { 168 | top: y + 'px', 169 | left: x + 'px' 170 | } ); 171 | 172 | $rippleSpan.addClass( 'ds-ripple-animate' ); 173 | 174 | return $rippleSpan; 175 | }; 176 | 177 | return { 178 | init: init, 179 | setAnimationRate: setAnimationRate, 180 | setColorOpacity: setColorOpacity 181 | }; 182 | 183 | }; 184 | 185 | } )( jQuery, doc ); 186 | -------------------------------------------------------------------------------- /src/scss/_badges.scss: -------------------------------------------------------------------------------- 1 | @import 'scss/labels'; 2 | @import 'scss/nav'; 3 | 4 | /** 5 | * In Bootstrap v4, Badges are replaced by Labels 6 | * Bootstrap overwrites: labels.scss 7 | */ 8 | 9 | // Label 10 | .label { 11 | font-weight: normal; 12 | padding: 0.25rem 0.5rem; 13 | border-radius: 0.75rem; 14 | } 15 | 16 | // Colors 17 | .label-outline { 18 | border: 1px solid $text-primary; 19 | background-color: $jdrf-white; 20 | color: $text-primary; 21 | } 22 | 23 | // Headings 24 | h1, 25 | .h1, 26 | h2, 27 | .h2 { 28 | .label { 29 | font-family: $headings-font-family; 30 | } 31 | } 32 | 33 | // Button 34 | .btn { 35 | &-primary, 36 | &-flat { 37 | .label-default { 38 | background-color: $jdrf-white; 39 | color: $jdrf-blue; 40 | } 41 | } 42 | 43 | &-link, 44 | &-primary-outline { 45 | .label-default { 46 | background-color: $jdrf-blue; 47 | color: $jdrf-white; 48 | } 49 | } 50 | } 51 | 52 | .nav-pills { 53 | .nav-link { 54 | padding: .625rem 1rem; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /src/scss/_button-group.scss: -------------------------------------------------------------------------------- 1 | @import "scss/button-group"; 2 | 3 | .btn-group, 4 | .btn-group-vertical { 5 | @include border-radius($border-radius); 6 | 7 | .btn { 8 | background-color: $jdrf-white; 9 | color: $jdrf-blue; 10 | border-color: $jdrf-blue; 11 | @include no-elevation; 12 | 13 | &:hover, 14 | &:active, 15 | &.active, 16 | &:focus { 17 | background-color: $jdrf-blue; 18 | color: $jdrf-white; 19 | } 20 | } 21 | 22 | > .btn:last-child { 23 | border-top-right-radius: $btn-border-radius; 24 | border-bottom-right-radius: $btn-border-radius; 25 | } 26 | 27 | &.btn-icon-group { 28 | @include elevation-1; 29 | 30 | .btn { 31 | padding: 0.625rem 1rem; 32 | font-size: 1.25rem; 33 | line-height: 1.25rem; 34 | color: $text-secondary; 35 | background-color: $jdrf-white; 36 | border-color: $grey-2; 37 | border-width: 1px; 38 | 39 | &:hover, 40 | &:active, 41 | &.active, 42 | &:focus { 43 | background-color: $grey-4; 44 | border-color: $grey-4; 45 | } 46 | 47 | &:before { 48 | display: block; 49 | } 50 | } 51 | } 52 | } 53 | 54 | .checkbox-buttons, 55 | .radio-buttons { 56 | &.btn-group { 57 | .btn { 58 | margin-left: 0.25rem; 59 | margin-right: 0.25rem; 60 | border-radius: $btn-border-radius; 61 | 62 | &:first-child { 63 | margin-left: 0; 64 | } 65 | 66 | &:last-child { 67 | margin-right: 0; 68 | } 69 | } 70 | } 71 | } -------------------------------------------------------------------------------- /src/scss/_buttons.scss: -------------------------------------------------------------------------------- 1 | /* Bootstrap overwrites: buttons.scss */ 2 | 3 | .btn { 4 | display: inline-block; 5 | vertical-align: middle; 6 | height: 40px; 7 | cursor: pointer; 8 | user-select: none; 9 | font-family: $btn-font; 10 | text-transform: $btn-font-transform; 11 | text-align: center; 12 | white-space: nowrap; 13 | border: $input-btn-border-width solid transparent; 14 | @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); 15 | @include transition(all .2s ease-in-out); 16 | 17 | &:active, 18 | &.active { 19 | background-image: none; 20 | outline: 0; 21 | @include elevation-3; 22 | 23 | &:focus, 24 | &.focus { 25 | @include tab-focus(); 26 | outline: 0; 27 | } 28 | } 29 | 30 | @include hover-focus { 31 | text-decoration: none; 32 | outline: 0; 33 | } 34 | 35 | &.focus { 36 | text-decoration: none; 37 | outline: 0; 38 | } 39 | 40 | &.disabled, 41 | &:disabled { 42 | cursor: $cursor-disabled; 43 | @include no-elevation; 44 | } 45 | 46 | &.material-icons { 47 | font-family: 'Material Icons'; 48 | } 49 | } 50 | 51 | a.btn.disabled, 52 | fieldset[disabled] a.btn { 53 | pointer-events: none; 54 | } 55 | 56 | .btn-primary { 57 | @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); 58 | } 59 | .btn-secondary { 60 | @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border); 61 | } 62 | .btn-info { 63 | @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border); 64 | } 65 | .btn-success { 66 | @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border); 67 | } 68 | .btn-warning { 69 | @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); 70 | } 71 | .btn-danger { 72 | @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); 73 | } 74 | 75 | .btn-primary-outline { 76 | @include button-outline-variant($btn-primary-bg); 77 | @include no-elevation; 78 | 79 | &:active, 80 | &.active { 81 | @include no-elevation; 82 | } 83 | 84 | @include hover-focus { 85 | @include no-elevation; 86 | } 87 | 88 | &.focus { 89 | @include no-elevation; 90 | } 91 | } 92 | .btn-secondary-outline { 93 | @include button-outline-variant($btn-secondary-border); 94 | } 95 | .btn-info-outline { 96 | @include button-outline-variant($btn-info-bg); 97 | } 98 | .btn-success-outline { 99 | @include button-outline-variant($btn-success-bg); 100 | } 101 | .btn-warning-outline { 102 | @include button-outline-variant($btn-warning-bg); 103 | } 104 | .btn-danger-outline { 105 | @include button-outline-variant($btn-danger-bg); 106 | } 107 | 108 | .btn-link { 109 | padding-left: 0.5rem; 110 | padding-right: 0.5rem; 111 | font-weight: normal; 112 | color: darken($btn-primary-bg, 3%); 113 | background-color: transparent; 114 | @include border-radius($border-radius); 115 | @include no-elevation; 116 | 117 | &:active, 118 | &.active, 119 | &:focus { 120 | background-color: $grey-3; 121 | text-decoration: none; 122 | @include no-elevation; 123 | } 124 | 125 | @include hover { 126 | background-color: $grey-3; 127 | text-decoration: none; 128 | } 129 | 130 | @include hover-focus { 131 | background-color: $grey-3; 132 | text-decoration: none; 133 | } 134 | 135 | &:disabled { 136 | color: $btn-link-disabled-color; 137 | 138 | @include hover-focus { 139 | color: $btn-link-disabled-color; 140 | background: none; 141 | } 142 | } 143 | } 144 | 145 | .btn-flat { 146 | @include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border); 147 | @include no-elevation; 148 | 149 | @include hover { 150 | @include elevation-2; 151 | } 152 | 153 | &:focus, 154 | &.focus, 155 | &:active, 156 | &.active, 157 | .open > &.dropdown-toggle { 158 | @include elevation-2; 159 | } 160 | 161 | &.disabled, 162 | &:disabled { 163 | @include no-elevation; 164 | } 165 | } 166 | 167 | .btn-lg { 168 | @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-md, $line-height-md, $btn-border-radius-lg); 169 | height: 48px; 170 | 171 | &.btn-primary-outline { 172 | border-width: $input-btn-border-width-lg; 173 | } 174 | } 175 | .btn-sm { 176 | @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm); 177 | height: 32px; 178 | } 179 | 180 | .btn-block { 181 | display: block; 182 | width: 100%; 183 | padding: $btn-block-y $btn-block-x; 184 | 185 | &:hover { 186 | @include elevation-3; 187 | } 188 | 189 | &:focus, 190 | &.focus, 191 | &:active, 192 | &.active { 193 | @include elevation-3; 194 | } 195 | 196 | &.disabled, 197 | &:disabled { 198 | @include no-elevation; 199 | } 200 | } 201 | 202 | .btn-block + .btn-block { 203 | margin-top: 5px; 204 | } 205 | 206 | input[type="submit"], 207 | input[type="reset"], 208 | input[type="button"] { 209 | &.btn-block { 210 | width: 100%; 211 | } 212 | } 213 | 214 | .btn-icon { 215 | height: auto; 216 | 217 | &:before { 218 | display: block; 219 | } 220 | 221 | span { 222 | display: inline-block; 223 | vertical-align: middle; 224 | } 225 | 226 | &.btn { 227 | padding-top: .4375rem; 228 | padding-bottom: .4375rem; 229 | } 230 | 231 | &.btn-lg { 232 | padding-top: .6875rem; 233 | padding-bottom: .6875rem; 234 | } 235 | 236 | &.btn-sm { 237 | padding-top: .1875rem; 238 | padding-bottom: .1875rem; 239 | } 240 | } 241 | 242 | .btn-loading { 243 | min-width: 100px; 244 | 245 | &:not(.ds-btn-ie-fallback) { 246 | padding: 0.5rem 1rem; 247 | } 248 | 249 | .spinner { 250 | @include animation('spinner-animation 2s linear infinite'); 251 | width: 20px; 252 | height: 20px; 253 | } 254 | 255 | .path { 256 | stroke-dasharray: 90; 257 | stroke-dashoffset: 0; 258 | transform-origin: center; 259 | stroke-linecap: round; 260 | @include animation( 261 | 'spinner-dash 1.5s ease-in-out infinite', 262 | 'spinner-colors 6s ease-in-out infinite' 263 | ); 264 | } 265 | } 266 | 267 | @include keyframes( spinner-animation ) { 268 | 100%{ 269 | transform: rotate(360deg); 270 | } 271 | } 272 | 273 | @include keyframes( spinner-colors ) { 274 | 100%, 0%{ 275 | stroke: $jdrf-white; 276 | } 277 | 40%{ 278 | stroke: $jdrf-white; 279 | } 280 | 66%{ 281 | stroke: $jdrf-white; 282 | } 283 | 80%, 90%{ 284 | stroke: $jdrf-white; 285 | } 286 | } 287 | 288 | @include keyframes( spinner-dash ) { 289 | 0%{ 290 | stroke-dasharray: 1,200; 291 | stroke-dashoffset: 0; 292 | } 293 | 50%{ 294 | stroke-dasharray: 89,200; 295 | stroke-dashoffset: -35px; 296 | } 297 | 100%{ 298 | stroke-dasharray: 89,200; 299 | stroke-dashoffset: -124px; 300 | } 301 | } 302 | -------------------------------------------------------------------------------- /src/scss/_cards.scss: -------------------------------------------------------------------------------- 1 | @import 'scss/card'; 2 | @import 'scss/list-group'; 3 | 4 | /* Bootstrap overwrites: card.scss */ 5 | 6 | .card { 7 | border: 0; 8 | border-radius: $border-radius; 9 | @include elevation-1; 10 | } 11 | 12 | // Images 13 | .card-img { 14 | max-width: 100%; 15 | border-radius: 0; 16 | } 17 | 18 | .card-img-top { 19 | max-width: 100%; 20 | box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12); 21 | } 22 | 23 | .card-block + .card-img-top { 24 | border-radius: 0; 25 | } 26 | 27 | .card-img-left { 28 | max-width: 100%; 29 | border-radius: $border-radius 0 0 $border-radius; 30 | } 31 | 32 | .card-img-center { 33 | display: block; 34 | margin-left: auto; 35 | margin-right: auto; 36 | } 37 | 38 | // Text 39 | .text-center { 40 | text-align: center; 41 | } 42 | 43 | .text-address { 44 | font-size: $font-size-md; 45 | font-family: $font-medium; 46 | color: $text-muted; 47 | 48 | strong { 49 | color: $text-primary; 50 | } 51 | } 52 | 53 | .text-address-link { 54 | .material-icons { 55 | vertical-align: middle; 56 | font-size: $font-size-md; 57 | color: $text-disabled; 58 | } 59 | } 60 | 61 | .card-text-wrapper { 62 | p:last-child { 63 | margin-bottom: 0; 64 | } 65 | 66 | + .card-block { 67 | padding-top: 0.5rem; 68 | } 69 | } 70 | 71 | .card-title { 72 | margin-bottom: 1rem; 73 | color: $jdrf-dark-blue; 74 | } 75 | 76 | .card-subtitle { 77 | font-family: $card-subtitle-font-family; 78 | font-size: $card-subtitle-font-size; 79 | line-height: $card-subtitle-line-height; 80 | color: $text-muted; 81 | 82 | .material-icons { 83 | margin-right: 0.5rem; 84 | vertical-align: middle; 85 | font-size: 1.25rem; 86 | } 87 | } 88 | 89 | .card-text { 90 | margin-bottom: 1rem; 91 | } 92 | 93 | // Layout 94 | .card-header { 95 | padding: 0.75rem 1.5rem; 96 | font-family: $card-header-font-family; 97 | font-size: $card-header-font-size; 98 | line-height: $card-header-line-height; 99 | color: $text-muted; 100 | background-color: $jdrf-white; 101 | border-bottom: 1px solid $card-header-border-color; 102 | 103 | &.h1, &.h2, &.h3, &.h4, &.h5, &.h6 { 104 | margin-bottom: 0; 105 | } 106 | } 107 | 108 | .card-footer { 109 | border: 0; 110 | background-color: $jdrf-white; 111 | } 112 | 113 | .card-block { 114 | padding: 1rem; 115 | 116 | &-btns { 117 | padding: 0.5rem; 118 | } 119 | 120 | .card-title { 121 | margin-bottom: 0.5rem; 122 | } 123 | 124 | .btn { 125 | &.btn-link { 126 | margin-right: 0; 127 | margin-bottom: 0; 128 | } 129 | } 130 | } 131 | 132 | // List 133 | .list-group-item { 134 | .card & { 135 | padding: 1rem; 136 | } 137 | } 138 | 139 | // Featured card 140 | .card-featured { 141 | .card-hero-block { 142 | @if $enable-flex {} @else { 143 | @include media-breakpoint-up(md) { 144 | display: table-cell; 145 | vertical-align: top; 146 | } 147 | } 148 | 149 | &-1 { 150 | padding-bottom: 0; 151 | 152 | @include media-breakpoint-up(md) { 153 | width: 42.995%; 154 | padding: 1.5rem 0 2rem 1.5rem; 155 | } 156 | } 157 | 158 | &-2 { 159 | @include media-breakpoint-up(md) { 160 | width: 57.005%; 161 | padding: 1.5rem 1.5rem 2rem; 162 | } 163 | } 164 | } 165 | 166 | .card-img { 167 | width: 100%; 168 | height: auto; 169 | @extend .card-img-center; 170 | border: 1px solid $text-dividers; 171 | } 172 | 173 | .card-title { 174 | @include media-breakpoint-up(md) { 175 | margin-bottom: 1rem; 176 | } 177 | } 178 | 179 | .card-subtitle { 180 | margin-bottom: 0.75rem; 181 | 182 | + .btn { 183 | margin-top: 0.25rem; 184 | } 185 | } 186 | 187 | .card-header { 188 | width: 100%; 189 | border: none; 190 | box-shadow: 0px 1px 0px 0px $card-header-border-color; 191 | @extend .text-center; 192 | 193 | @include media-breakpoint-up(md) { 194 | text-align: left; 195 | } 196 | } 197 | 198 | .card-footer { 199 | .card-link { 200 | font-size: $paragraph-size; 201 | } 202 | } 203 | } 204 | 205 | // Featured card hero with momentum line 206 | .card-featured-hero { 207 | @include media-breakpoint-up(md) { 208 | height: 440px; 209 | } 210 | 211 | @include media-breakpoint-up(lg) { 212 | height: 340px; 213 | } 214 | 215 | @include media-breakpoint-up(xl) { 216 | height: 330px; 217 | } 218 | 219 | .card-header { 220 | padding-left: 0; 221 | padding-top: 1rem; 222 | padding-bottom: 1rem; 223 | } 224 | 225 | .card-subtitle { 226 | margin-bottom: 1rem; 227 | } 228 | 229 | .card-content-wrapper { 230 | height: 100%; 231 | overflow: hidden; 232 | 233 | .card-hero-block-left, 234 | .card-hero-block-right { 235 | background-color: $jdrf-white; 236 | 237 | @include media-breakpoint-up(md) { 238 | position: relative; 239 | width: 50%; 240 | height: 100%; 241 | } 242 | } 243 | 244 | .card-hero-block-left { 245 | @include media-breakpoint-up(md) { 246 | float: left; 247 | } 248 | 249 | .card-hero-bg { 250 | width: 100%; 251 | height: 100%; 252 | background-size: cover; 253 | background-repeat: no-repeat; 254 | background-position: 50% 50%; 255 | 256 | @include media-breakpoint-up(md) { 257 | background-image: none; 258 | border-top-left-radius: $border-radius; 259 | border-bottom-left-radius: $border-radius; 260 | } 261 | 262 | img { 263 | width: 100%; 264 | height: auto; 265 | } 266 | } 267 | 268 | &:after { 269 | content: ""; 270 | position: absolute; 271 | top: 0; 272 | z-index: 1; 273 | display: none; 274 | width: 100%; 275 | height: 100%; 276 | transform: skewX(-10deg); 277 | background-color: $jdrf-white; 278 | 279 | @include media-breakpoint-up(md) { 280 | display: block; 281 | right: -62%; 282 | } 283 | 284 | @include media-breakpoint-up(lg) { 285 | right: -75%; 286 | } 287 | 288 | @include media-breakpoint-up(xl) { 289 | right: -87%; 290 | } 291 | } 292 | } 293 | 294 | .card-hero-block-right { 295 | @include media-breakpoint-up(md) { 296 | z-index: 10; 297 | float: right; 298 | border-top-right-radius: $border-radius; 299 | border-bottom-right-radius: $border-radius; 300 | } 301 | 302 | .card-block { 303 | padding-top: 1rem; 304 | padding-bottom: 0; 305 | 306 | @include media-breakpoint-up(md) { 307 | padding-top: 2.5rem; 308 | padding-left: 0; 309 | } 310 | } 311 | } 312 | } 313 | 314 | .card-footer { 315 | position: relative; 316 | padding: 0 1rem 1.375rem; 317 | 318 | @include media-breakpoint-up(md) { 319 | padding-left: 0; 320 | } 321 | 322 | .btn { 323 | @include media-breakpoint-up(md) { 324 | position: absolute; 325 | top: 0; 326 | left: -9px; 327 | } 328 | } 329 | } 330 | } 331 | 332 | // Hero columns 333 | .card-hero-group { 334 | @if $enable-flex { 335 | @include media-breakpoint-up(md) { 336 | display: flex; 337 | flex-flow: row wrap; 338 | } 339 | } @else { 340 | @include media-breakpoint-up(md) { 341 | display: table; 342 | table-layout: fixed; 343 | } 344 | } 345 | 346 | .card-footer { 347 | padding: .25rem 0 0; 348 | } 349 | } 350 | 351 | // Image cap card 352 | .card-image-cap { 353 | .card-subtitle { 354 | padding-bottom: 0.375rem; 355 | } 356 | } 357 | 358 | // Content card 359 | .card-content { 360 | .card-block { 361 | padding: 1.5rem; 362 | } 363 | 364 | .card-footer { 365 | padding-top: 0.5rem; 366 | padding-bottom: 2rem; 367 | } 368 | 369 | address { 370 | font-size: $paragraph-size; 371 | 372 | strong { 373 | color: $jdrf-black; 374 | } 375 | } 376 | } 377 | 378 | // Content type Program card 379 | .card-program { 380 | border-left: 4px solid $jdrf-blue; 381 | border-radius: $border-radius; 382 | @include elevation-1; 383 | 384 | @if $enable-flex { 385 | display: flex; 386 | flex-flow: row wrap; 387 | } @else { 388 | display: table; 389 | table-layout: fixed; 390 | } 391 | 392 | .card-block { 393 | &-1 { 394 | width: 60%; 395 | padding-left: 1.75rem; 396 | border-radius: $border-radius 0 0 $border-radius; 397 | 398 | @if $enable-flex {} @else { 399 | display: table-cell; 400 | vertical-align: top; 401 | } 402 | 403 | @include media-breakpoint-up(md) { 404 | width: 80%; 405 | } 406 | } 407 | 408 | &-2 { 409 | width: 40%; 410 | border-radius: 0 $border-radius $border-radius 0; 411 | text-align: right; 412 | 413 | @if $enable-flex {} @else { 414 | display: table-cell; 415 | vertical-align: top; 416 | } 417 | 418 | @include media-breakpoint-up(md) { 419 | width: 20%; 420 | } 421 | } 422 | } 423 | 424 | .card-subtitle { 425 | margin-top: 0; 426 | margin-bottom: 0.5rem; 427 | font-size: $paragraph-size; 428 | 429 | @include media-breakpoint-up(md) { 430 | font-size: $paragraph-size-sm; 431 | } 432 | } 433 | 434 | .card-title { 435 | margin-bottom: 0.5rem; 436 | font-size: $font-size-h5; 437 | line-height: $h5-lineheight; 438 | 439 | @include media-breakpoint-up(md) { 440 | font-size: $font-size-h2; 441 | line-height: $h2-lineheight; 442 | } 443 | } 444 | 445 | .card-location { 446 | margin-bottom: 0; 447 | color: $text-secondary; 448 | font-size: $paragraph-size; 449 | 450 | @include media-breakpoint-up(md) { 451 | font-size: $paragraph-size-sm; 452 | } 453 | 454 | .material-icons { 455 | font-size: 1rem; 456 | } 457 | } 458 | 459 | .card-category { 460 | color: $text-secondary; 461 | font-size: $paragraph-size-x-sm; 462 | 463 | @include media-breakpoint-up(md) { 464 | font-size: $paragraph-size; 465 | } 466 | } 467 | } 468 | -------------------------------------------------------------------------------- /src/scss/_custom-forms.scss: -------------------------------------------------------------------------------- 1 | @import "scss/custom-forms"; 2 | 3 | .c-select { 4 | padding: $input-padding-y $input-padding-x; 5 | background: #fff url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBpZD0iaWNfYXJyb3dfZHJvcF9kb3duXzI0cHgiPjxwYXRoIGQ9Ik03IDEwbDUgNSA1LTV6IiBmaWxsPSIjNzU3NTc1Ii8+PC9zdmc+) no-repeat right .75rem center; 6 | 7 | //dotted outline fix for Firefox 8 | &:-moz-focusring { 9 | color: transparent; 10 | text-shadow: 0 0 0 #000; 11 | } 12 | } -------------------------------------------------------------------------------- /src/scss/_elevations.scss: -------------------------------------------------------------------------------- 1 | /* Design System Custom - No Bootstrap Default */ 2 | 3 | @import "mixins/elevations"; 4 | 5 | .no-elevation { 6 | @include no-elevation; 7 | } 8 | 9 | .elevation-1 { 10 | @include elevation-1; 11 | } 12 | 13 | .elevation-2 { 14 | @include elevation-2; 15 | } 16 | 17 | .elevation-3 { 18 | @include elevation-3; 19 | } 20 | 21 | .elevation-4 { 22 | @include elevation-4; 23 | } 24 | 25 | .elevation-5 { 26 | @include elevation-5; 27 | } -------------------------------------------------------------------------------- /src/scss/_fonts.scss: -------------------------------------------------------------------------------- 1 | /* Design System Custom - No Bootstrap Default */ 2 | 3 | $fonts: 4 | 'Gotham Thin' '../fonts/gotham/thin/gotham-thin-webfont' 100 normal 'gothamthin', 5 | 'Gotham Light' '../fonts/gotham/light/gotham-light-webfont' 200 normal 'gothamlight', 6 | 'Gotham Light Italic' '../fonts/gotham/light/gotham-lightitalic-webfont' 200 italic 'gothamlight_italic', 7 | 'Gotham Book' '../fonts/gotham/book/gotham-book-webfont' 300 normal 'gothambook', 8 | 'Gotham Book Italic' '../fonts/gotham/book/gotham-bookitalic-webfont' 300 italic 'gothambook_italic', 9 | 'Gotham Medium' '../fonts/gotham/medium/gotham-medium-webfont' 500 normal 'gothammedium', 10 | 'Gotham Medium Italic' '../fonts/gotham/medium/gotham-mediumitalic-webfont' 500 italic 'gothammedium_italic', 11 | 'Gotham Bold' '../fonts/gotham/bold/gotham-bold-webfont' 700 normal 'gothambold', 12 | 'Gotham Bold Italic' '../fonts/gotham/bold/gotham-bolditalic-webfont' 700 italic 'gothambold_italic'; 13 | 14 | @each $font in $fonts { 15 | @font-face { 16 | font-family: nth($font, 1); 17 | src: url(nth($font, 2) + '.eot'); 18 | src: url(nth($font, 2) + '.eot?#iefix') format('embedded-opentype'), 19 | url(nth($font, 2) + '.woff2') format('woff2'), 20 | url(nth($font, 2) + '.woff') format('woff'), 21 | url(nth($font, 2) + '.ttf') format('truetype'), 22 | url(nth($font, 2) + '.svg#' + nth($font, 5)) format('svg'); 23 | font-weight: nth($font, 3); 24 | font-style: nth($font, 4); 25 | } 26 | } -------------------------------------------------------------------------------- /src/scss/_forms.scss: -------------------------------------------------------------------------------- 1 | @import "scss/forms"; 2 | 3 | /* Bootstrap overwrites: forms.scss */ 4 | 5 | .form-inline { 6 | &:not(.ds-row) { 7 | .form-group { 8 | @include media-breakpoint-up(md) { 9 | width: auto; 10 | } 11 | } 12 | } 13 | 14 | .form-group { 15 | margin-bottom: 1rem; 16 | display: block; 17 | 18 | @include media-breakpoint-up(md) { 19 | display: inline-block; 20 | } 21 | } 22 | 23 | .form-control { 24 | width: 100%; 25 | } 26 | } 27 | 28 | .form-group { 29 | position: relative; 30 | margin-bottom: 0.75rem; 31 | } 32 | 33 | textarea { 34 | &.form-control { 35 | min-height: 144px; 36 | resize: vertical; 37 | } 38 | } 39 | 40 | .form-control-label { 41 | font-family: $font-medium; 42 | font-size: $input-label-font-size; 43 | line-height: $input-label-line-height; 44 | color: $input-label-color; 45 | padding: 0.25rem 0; 46 | @include clearfix(); 47 | 48 | fieldset & { 49 | width: 100%; 50 | } 51 | 52 | .disabled &, 53 | &.disabled { 54 | background-color: $grey-1; 55 | border-color: $grey-4; 56 | } 57 | 58 | .has-filled &, 59 | .has-success & { 60 | font-family: $font-regular; 61 | color: $grey-7; 62 | } 63 | 64 | fieldset:disabled & { 65 | color: $grey-6; 66 | } 67 | 68 | &.label-required { 69 | > span { 70 | color: $brand-danger; 71 | float: none; 72 | font-family: $font-regular; 73 | font-size: 20px; 74 | font-weight: bold; 75 | font-style: normal; 76 | font-stretch: normal; 77 | line-height: 1; 78 | text-align: left; 79 | } 80 | } 81 | 82 | &.label-optional { 83 | > span { 84 | float: none; 85 | font-family: $font-regular; 86 | font-size: 15px; 87 | font-weight: normal; 88 | font-style: normal; 89 | font-stretch: normal; 90 | line-height: 1.33; 91 | text-align: left; 92 | } 93 | } 94 | 95 | > span { 96 | font-family: $font-italic; 97 | font-style: italic; 98 | color: $grey-7; 99 | float: right; 100 | } 101 | } 102 | 103 | .form-control.form-relative { 104 | margin-top: 0; 105 | } 106 | 107 | .form-control-label.form-label-relative { 108 | position: relative; 109 | } 110 | 111 | .form-control { 112 | //normal line-height vertically aligns placeholder in Safari 113 | line-height: normal; 114 | 115 | &:not(textarea) { 116 | height: 48px; 117 | } 118 | 119 | fieldset & { 120 | margin-top: 28px; 121 | margin-bottom: 4px; 122 | } 123 | 124 | fieldset:disabled & { 125 | border-color: $grey-4; 126 | } 127 | 128 | .hidden-labels & { 129 | margin-top: 0; 130 | } 131 | 132 | .has-filled &, 133 | .has-success & { 134 | border-color: $grey-4; 135 | } 136 | 137 | &:focus { 138 | border-color: $input-border-focus; 139 | } 140 | } 141 | 142 | .form-control:focus ~ .form-control-label { 143 | font-family: $font-medium; 144 | color: $input-border-focus; 145 | } 146 | 147 | label { 148 | display: block; 149 | 150 | &.form-control-label { 151 | position: absolute; 152 | top: 0; 153 | left: 0; 154 | } 155 | 156 | .disabled &, 157 | &.disabled { 158 | color: $grey-6; 159 | 160 | .has-danger &, 161 | .has-success & { 162 | color: $grey-6; 163 | } 164 | } 165 | 166 | &.checkbox-custom { 167 | &:not(.ds-disabled) { 168 | .has-danger &, 169 | .has-success & { 170 | color: $jdrf-black; 171 | } 172 | } 173 | } 174 | } 175 | 176 | .text-help, 177 | .text-label { 178 | font-family: $font-medium; 179 | font-size: $input-label-font-size; 180 | } 181 | 182 | p.text-label { 183 | margin-bottom: 1rem; 184 | } 185 | 186 | .text-label { 187 | .has-danger & { 188 | color: $brand-danger; 189 | } 190 | 191 | .has-success & { 192 | color: $brand-success; 193 | } 194 | 195 | span { 196 | font-family: $font-regular; 197 | color: $grey-7; 198 | } 199 | } 200 | 201 | .radio-inline + .radio-inline, 202 | .checkbox-inline + .checkbox-inline { 203 | margin-left: 0; 204 | 205 | @include media-breakpoint-up(md) { 206 | margin-left: 1.5rem; 207 | } 208 | } 209 | 210 | .radio-inline { 211 | margin-bottom: .5rem; 212 | } 213 | 214 | .checkbox-inline { 215 | margin-bottom: .75rem; 216 | } 217 | 218 | .radio-inline, 219 | .checkbox-inline { 220 | display: block; 221 | margin-left: 0; 222 | padding-left: 0; 223 | 224 | @include media-breakpoint-up(md) { 225 | padding-left: 0; 226 | display: inline-block; 227 | } 228 | } 229 | 230 | .radio-custom, 231 | .checkbox-custom { 232 | position: relative; 233 | 234 | input[type="radio"], 235 | input[type="checkbox"] { 236 | position: absolute; 237 | top: 0; 238 | left: 0; 239 | opacity: 0; 240 | margin: 0; 241 | padding: 0; 242 | } 243 | 244 | span { 245 | position: relative; 246 | padding-left: 2rem; 247 | text-align: left; 248 | cursor: pointer; 249 | } 250 | 251 | input[type="radio"] ~ span:before, 252 | input[type="checkbox"] ~ span:before { 253 | position: absolute; 254 | top: -2px; 255 | left: 0; 256 | width: 24px; 257 | height: 24px; 258 | font-family: 'Material Icons'; 259 | font-size: 24px; 260 | line-height: 24px; 261 | color: $grey-7; 262 | cursor: pointer; 263 | } 264 | 265 | input[type="radio"]:checked ~ span:before, 266 | input[type="checkbox"]:checked ~ span:before { 267 | color: $jdrf-blue; 268 | } 269 | 270 | &.disabled { 271 | input[type="radio"] ~ span:before, 272 | input[type="checkbox"] ~ span:before { 273 | color: $grey-6; 274 | cursor: $cursor-disabled; 275 | } 276 | } 277 | } 278 | 279 | .radio-custom { 280 | input[type="radio"] ~ span:before { 281 | content: "\e836"; 282 | } 283 | 284 | input[type="radio"]:checked ~ span:before { 285 | content: "\e837"; 286 | } 287 | 288 | input[type="radio"]:focus ~ span:before { 289 | box-shadow: 0 0 6px 0 rgba(0,115,207,.75),inset 0 0 3px 0 rgba(0,115,207,.25); 290 | border-radius: 50%; 291 | } 292 | } 293 | 294 | .checkbox-custom { 295 | input[type="checkbox"] ~ span:before { 296 | content: "\e835"; 297 | } 298 | 299 | input[type="checkbox"]:checked ~ span:before { 300 | content: "\e834"; 301 | } 302 | 303 | input[type="checkbox"]:focus ~ span:before { 304 | box-shadow: 0 0 6px 0 rgba(0,115,207,.75),inset 0 0 3px 0 rgba(0,115,207,.25); 305 | } 306 | } 307 | 308 | /* 309 | * Place icons before "fake" labels in validation 310 | * Checkbox groups 311 | */ 312 | .checkbox-group { 313 | .text-help { 314 | margin-bottom: 1rem; 315 | } 316 | 317 | &.has-danger, 318 | &.has-success { 319 | .text-help { 320 | position: relative; 321 | padding-left: 2rem; 322 | background-repeat: no-repeat; 323 | background-position: center left; 324 | background-size: 1.4625rem; 325 | } 326 | } 327 | 328 | &.has-danger { 329 | .text-help { 330 | background-image: url($form-icon-danger); 331 | } 332 | } 333 | 334 | &.has-success { 335 | .text-help { 336 | background-image: url($form-icon-success); 337 | } 338 | } 339 | } 340 | 341 | .form-address { 342 | [class*="ds-col-"] { 343 | 344 | .form-control-label { 345 | padding-left: 0.9375rem; 346 | padding-right: 0.9375rem; 347 | } 348 | 349 | .form-label-relative { 350 | padding-left: 0; 351 | padding-right: 0; 352 | } 353 | 354 | } 355 | 356 | div[class*="ds-col-"] { 357 | position: static; 358 | 359 | @include media-breakpoint-up(md) { 360 | position: relative; 361 | } 362 | } 363 | } 364 | -------------------------------------------------------------------------------- /src/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | @import "scss/grid"; 2 | 3 | /* Bootstrap overwrites: grid.scss */ -------------------------------------------------------------------------------- /src/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins"; 2 | 3 | /* Bootstrap overwrites: mixins.scss */ 4 | 5 | @mixin animation($animate...) { 6 | $max: length($animate); 7 | $animations: ''; 8 | 9 | @for $i from 1 through $max { 10 | $animations: #{$animations + nth($animate, $i)}; 11 | 12 | @if $i < $max { 13 | $animations: #{$animations + ", "}; 14 | } 15 | } 16 | 17 | animation: $animations; 18 | } 19 | 20 | @mixin keyframes($animationName) { 21 | @keyframes #{$animationName} { 22 | @content; 23 | } 24 | } 25 | 26 | @mixin font-italic( $font ) { 27 | font-family: $font; 28 | font-style: italic; 29 | } -------------------------------------------------------------------------------- /src/scss/_nav.scss: -------------------------------------------------------------------------------- 1 | @import "scss/nav"; 2 | 3 | /* Bootstrap overwrites: nav.scss */ 4 | 5 | .sidebar { 6 | max-width: 260px; 7 | 8 | .nav-item { 9 | .nav-link { 10 | width: 100%; 11 | padding: 1rem 0 1rem 1.5rem; 12 | font-family: $font-medium; 13 | font-size: 0.875rem; 14 | line-height: 1rem; 15 | color: $text-default; 16 | border-left: 2px solid $grey-4; 17 | 18 | &:hover { 19 | color: $brand-primary; 20 | background-color: $grey-2; 21 | } 22 | 23 | &.current { 24 | border-color: $brand-primary; 25 | color: $brand-primary; 26 | } 27 | } 28 | 29 | > .nav { 30 | display: none; 31 | &.current, &.nav-show { 32 | display: block; 33 | } 34 | .nav-link { 35 | padding-left: 2.5rem; 36 | font-family: $font-regular; 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/scss/_normalize.scss: -------------------------------------------------------------------------------- 1 | @import "scss/normalize"; 2 | 3 | /* Bootstrap overwrites: normalize.scss */ 4 | -------------------------------------------------------------------------------- /src/scss/_reboot.scss: -------------------------------------------------------------------------------- 1 | @import "scss/reboot"; 2 | 3 | /* Bootstrap overwrites: reboot.scss */ 4 | 5 | 6 | body { 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } -------------------------------------------------------------------------------- /src/scss/_type.scss: -------------------------------------------------------------------------------- 1 | /* Bootstrap overwrites: type.scss */ 2 | 3 | p { 4 | margin-bottom: $paragraph-lineheight; 5 | font-size: $paragraph-size; 6 | line-height: $paragraph-lineheight; 7 | 8 | @include media-breakpoint-up(sm) { 9 | margin-bottom: $paragraph-lineheight-sm; 10 | font-size: $paragraph-size-sm; 11 | line-height: $paragraph-lineheight-sm; 12 | } 13 | } 14 | 15 | b, 16 | strong { 17 | font-family: $font-medium; 18 | font-weight: normal; 19 | 20 | em, 21 | i { 22 | @include font-italic( $font-medium-italic ); 23 | } 24 | } 25 | 26 | em, 27 | i { 28 | @include font-italic( $font-italic ); 29 | } 30 | 31 | h1, 32 | h2, 33 | h3, 34 | h4, 35 | h5, 36 | h6, 37 | .h1, 38 | .h2, 39 | .h3, 40 | .h4, 41 | .h5, 42 | .h6 { 43 | font-weight: $headings-font-weight; 44 | color: $headings-color; 45 | } 46 | 47 | h1, 48 | h2, 49 | .h1, 50 | .h2 { 51 | font-family: $headings-font-family; 52 | } 53 | 54 | h4, 55 | .h4, 56 | h5, 57 | .h5, 58 | h6, 59 | .h6 { 60 | font-family: $font-medium; 61 | } 62 | 63 | h1, 64 | .h1 { 65 | margin-bottom: $h1-lineheight / 2; 66 | font-size: $font-size-h1; 67 | line-height: $h1-lineheight; 68 | 69 | @include media-breakpoint-up(sm) { 70 | margin-bottom: $h1-lineheight-sm / 2; 71 | font-size: $font-size-h1-sm; 72 | line-height: $h1-lineheight-sm; 73 | } 74 | 75 | @include media-breakpoint-up(md) { 76 | margin-bottom: $h1-lineheight-md / 2; 77 | font-size: $font-size-h1-md; 78 | line-height: $h1-lineheight-md; 79 | } 80 | } 81 | 82 | h2, 83 | .h2 { 84 | margin-bottom: $h2-lineheight / 2; 85 | font-size: $font-size-h2; 86 | line-height: $h2-lineheight; 87 | 88 | @include media-breakpoint-up(sm) { 89 | margin-bottom: $h2-lineheight-sm / 2; 90 | font-size: $font-size-h2-sm; 91 | line-height: $h2-lineheight-sm; 92 | } 93 | 94 | @include media-breakpoint-up(md) { 95 | margin-bottom: $h2-lineheight-md / 2; 96 | font-size: $font-size-h2-md; 97 | line-height: $h2-lineheight-md; 98 | } 99 | } 100 | 101 | h3, 102 | .h3 { 103 | margin-bottom: $h3-lineheight / 2; 104 | font-family: $font-regular; 105 | font-size: $font-size-h3; 106 | line-height: $h3-lineheight; 107 | 108 | @include media-breakpoint-up(sm) { 109 | font-family: $font-medium; 110 | font-size: $font-size-h3-sm; 111 | } 112 | } 113 | 114 | h4, 115 | .h4 { 116 | margin-bottom: $h4-lineheight / 2; 117 | font-size: $font-size-h4; 118 | line-height: $h4-lineheight; 119 | } 120 | 121 | h5, 122 | .h5 { 123 | margin-bottom: $h5-lineheight / 2; 124 | font-size: $font-size-h5; 125 | line-height: $h5-lineheight; 126 | } 127 | 128 | h6, 129 | .h6 { 130 | margin-bottom: $h6-lineheight / 2; 131 | font-size: $font-size-h6; 132 | line-height: $h6-lineheight; 133 | } 134 | 135 | .lead { 136 | font-family: $font-light; 137 | font-size: $lead-font-size; 138 | line-height: $lead-line-height; 139 | 140 | @include media-breakpoint-up(sm) { 141 | font-size: $lead-font-size-sm; 142 | /* same line height as XS */ 143 | } 144 | 145 | @include media-breakpoint-up(md) { 146 | font-size: $lead-font-size-md; 147 | line-height: $lead-line-height-md; 148 | } 149 | } 150 | 151 | .display-1, 152 | .display-2 { 153 | font-family: $font-light; 154 | } 155 | 156 | .display-1 { 157 | font-size: $display1-size; 158 | line-height: $display1-size; 159 | 160 | @include media-breakpoint-up(md) { 161 | font-size: $display1-size-md; 162 | line-height: $display1-size-md; 163 | } 164 | 165 | @include media-breakpoint-up(lg) { 166 | font-size: $display1-size-lg; 167 | line-height: $display1-size-lg; 168 | } 169 | } 170 | 171 | .display-2 { 172 | font-size: $display2-size; 173 | line-height: $display2-size; 174 | 175 | @include media-breakpoint-up(md) { 176 | font-size: $display2-size-md; 177 | line-height: $display2-size-md; 178 | } 179 | 180 | @include media-breakpoint-up(lg) { 181 | font-size: $display2-size-lg; 182 | line-height: $display2-size-lg; 183 | } 184 | } 185 | 186 | .display-3 { 187 | font-size: $display3-size; 188 | font-weight: $display3-weight; 189 | } 190 | .display-4 { 191 | font-size: $display4-size; 192 | font-weight: $display4-weight; 193 | } 194 | 195 | hr { 196 | margin-top: $spacer-y; 197 | margin-bottom: $spacer-y; 198 | border: 0; 199 | border-top: $hr-border-width solid $hr-border-color; 200 | } 201 | 202 | small, 203 | .small { 204 | font-size: 80%; 205 | font-weight: normal; 206 | } 207 | 208 | mark, 209 | .mark { 210 | padding: .2em; 211 | background-color: $state-warning-bg; 212 | } 213 | 214 | .list-unstyled { 215 | @include list-unstyled; 216 | } 217 | 218 | .list-inline { 219 | @include list-unstyled; 220 | } 221 | 222 | .list-inline-item { 223 | display: inline-block; 224 | 225 | &:not(:last-child) { 226 | margin-right: $list-inline-padding; 227 | } 228 | } 229 | 230 | .dl-horizontal { 231 | margin-right: -$grid-gutter-width; 232 | margin-left: -$grid-gutter-width; 233 | @include clearfix; 234 | } 235 | 236 | .initialism { 237 | font-size: 90%; 238 | text-transform: uppercase; 239 | } 240 | 241 | .blockquote { 242 | padding: ($spacer / 2) $spacer; 243 | margin-bottom: $spacer; 244 | font-size: $blockquote-font-size; 245 | border-left: .25rem solid $blockquote-border-color; 246 | } 247 | 248 | .blockquote-footer { 249 | display: block; 250 | font-size: 80%; // back to default font-size 251 | line-height: $line-height; 252 | color: $blockquote-small-color; 253 | 254 | &::before { 255 | content: "\2014 \00A0"; // em dash, nbsp 256 | } 257 | } 258 | 259 | .blockquote-reverse { 260 | padding-right: $spacer; 261 | padding-left: 0; 262 | text-align: right; 263 | border-right: .25rem solid $blockquote-border-color; 264 | border-left: 0; 265 | } 266 | 267 | .blockquote-reverse .blockquote-footer { 268 | &::before { 269 | content: ""; 270 | } 271 | 272 | &::after { 273 | content: "\00A0 \2014"; // nbsp, em dash 274 | } 275 | } 276 | 277 | 278 | 279 | -------------------------------------------------------------------------------- /src/scss/_utilities-background.scss: -------------------------------------------------------------------------------- 1 | @import "scss/utilities-background"; 2 | 3 | /* Bootstrap overwrites: utilities-background.scss */ -------------------------------------------------------------------------------- /src/scss/_utilities-responsive.scss: -------------------------------------------------------------------------------- 1 | @import "scss/utilities-responsive"; 2 | 3 | /* Bootstrap overwrites: utilities-responsive.scss */ -------------------------------------------------------------------------------- /src/scss/_utilities-spacing.scss: -------------------------------------------------------------------------------- 1 | @import "scss/utilities-spacing"; 2 | 3 | /* Bootstrap overwrites: utilities-spacing.scss */ -------------------------------------------------------------------------------- /src/scss/_utilities.scss: -------------------------------------------------------------------------------- 1 | @import "scss/utilities"; 2 | 3 | /* Bootstrap overwrites: utilities.scss */ 4 | -------------------------------------------------------------------------------- /src/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | @import "scss/variables"; 2 | 3 | /* Variable overwrite naming conventions are based on Bootstrap. 4 | * 5 | * If overwriting an existing Bootstrap var, keep the same name. 6 | * 7 | * If creating a new variable related to an original Bootstrap var, 8 | * keep the variable name from Bootstrap, and append to that name. 9 | * 10 | * Example: 11 | * $font-size = original Bootstrap variable (still in use) 12 | * $font-size-lg = custom variable based on the above 13 | * $font-size-sm = custom variable based on the above 14 | */ 15 | 16 | /* == Grid ======== */ 17 | 18 | $grid-breakpoints: ( 19 | xs: 0, 20 | sm: 360px, 21 | md: 768px, 22 | lg: 992px, 23 | xl: 1200px 24 | ); 25 | 26 | $container-max-widths: ( 27 | sm: 576px, 28 | md: 720px, 29 | lg: 940px, 30 | xl: 1088px 31 | ); 32 | 33 | /* == Colors ======== */ 34 | 35 | $jdrf-blue: #0073cf; 36 | $jdrf-dark-blue: #002855; 37 | 38 | $jdrf-green: #00a862; 39 | $jdrf-purple: #a75ccc; 40 | $jdrf-magenta: #e01279; 41 | $jdrf-orange: #fa6323; 42 | $jdrf-white: #ffffff; 43 | $jdrf-black: #212121; 44 | 45 | $accent-blue: #09bcef; 46 | $accent-green: #8cd600; 47 | $accent-orange: #fcd116; 48 | 49 | $pro-walk: $jdrf-orange; 50 | $pro-ride: $jdrf-green; 51 | $pro-diy: $jdrf-magenta; 52 | $pro-gala: #6e267b; 53 | $pro-peak: #aa72bf; 54 | $pro-golf: #5b6334; 55 | $pro-voice:#fdb823; 56 | 57 | $grey-1: #fafafa; 58 | $grey-2: #f5f5f5; 59 | $grey-3: #eeeeee; 60 | $grey-4: #e0e0e0; 61 | $grey-5: #bdbdbd; 62 | $grey-6: #9e9e9e; 63 | $grey-7: #757575; 64 | 65 | $text-primary: $jdrf-black; 66 | $text-secondary: $grey-7; 67 | $text-disabled: $grey-6; 68 | $text-dividers: $grey-4; 69 | 70 | $text-reverse-primary: $jdrf-white; 71 | $text-reverse-secondary: rgba(255, 255, 255, 0.76); 72 | $text-reverse-disabled: rgba(255, 255, 255, 0.50); 73 | 74 | $gray-dark: $grey-7; 75 | $gray: $grey-5; 76 | $gray-light: $grey-3; 77 | $gray-lighter: $grey-2; 78 | $gray-lightest: $grey-1; 79 | 80 | $brand-primary: $jdrf-blue; 81 | $btn-primary-bg: $jdrf-blue; 82 | $btn-primary-border: $jdrf-blue; 83 | 84 | $btn-secondary-color: $jdrf-white; 85 | $btn-secondary-bg: $jdrf-blue; 86 | $btn-secondary-border: $jdrf-blue; 87 | 88 | $link-hover-color: $jdrf-blue; 89 | $btn-link-disabled-color: $grey-6; 90 | 91 | $label-default-bg: $grey-6; 92 | 93 | /* == Fonts ======== */ 94 | 95 | $text-default: $text-primary; 96 | $text-muted: $text-secondary; 97 | 98 | $font-thin: "Gotham Thin", sans-serif; 99 | $font-light: "Gotham Light", sans-serif; 100 | $font-light-italic: "Gotham Light Italic", sans-serif; 101 | $font-regular: "Gotham Book", sans-serif; 102 | $font-italic: "Gotham Book Italic", sans-serif; 103 | $font-medium: "Gotham Medium", sans-serif; 104 | $font-medium-italic: "Gotham Medium Italic", sans-serif; 105 | $font-bold: "Gotham Bold", sans-serif; 106 | $font-bold-italic: "Gotham Bold Italic", sans-serif; 107 | 108 | $font-family-base: $font-regular; 109 | 110 | $font-size-sm: 0.8125rem; /* 13px */ 111 | $line-height-sm: 0.8125rem; /* 13px */ 112 | $font-size-md: 0.875rem; /* 14px */ 113 | $line-height-md: 0.875rem; /* 14px */ 114 | $font-size-base: 1rem; /* 16px */ 115 | $line-height-base: 1rem; /* 16px */ 116 | $font-size-lg: 1.125rem; ; /* 18px */ 117 | $line-height-lg: 1.125rem; ; /* 18px */ 118 | 119 | $display1-size: 3.5rem; /* 56px */ 120 | $display1-size-md: 3.75rem; /* 60px */ 121 | $display1-size-lg: 4.5rem; /* 72px */ 122 | 123 | $display2-size: 3rem; /* 48px */ 124 | $display2-size-md: 3.5rem; /* 56px */ 125 | $display2-size-lg: 3.75rem; /* 60px */ 126 | 127 | $lead-font-size: 1rem; 128 | $lead-line-height: 1.5rem; 129 | 130 | $lead-font-size-sm: 1.125rem; 131 | 132 | $lead-font-size-md: 1.25rem; 133 | $lead-line-height-md: 1.75rem; 134 | 135 | $paragraph-size-x-sm: 0.75rem; /* 12px */ 136 | $paragraph-lineheight-x-sm: 1.125rem; /* 18px */ 137 | 138 | $paragraph-size: 0.875rem; /* 14px */ 139 | $paragraph-lineheight: 1.25rem; /* 20px */ 140 | 141 | $paragraph-size-sm: 1rem; /* 16px */ 142 | $paragraph-lineheight-sm: 1.5rem; /* 24px */ 143 | 144 | /* Headings: Mobile sizes, SM/MD up */ 145 | $headings-font-weight: 400; 146 | 147 | $font-size-h1: 2rem; /* 32px */ 148 | $font-size-h1-sm: 2.25rem; /* 36px */ 149 | $font-size-h1-md: 3rem; /* 48px */ 150 | 151 | $font-size-h2: 1.5rem; /* 24px */ 152 | $font-size-h2-sm: 1.75rem; /* 28px */ 153 | $font-size-h2-md: 2.25rem; /* 36px */ 154 | 155 | $font-size-h3: 1.25rem; /* 20px */ 156 | $font-size-h3-sm: 1.5rem; /* 24px */ 157 | 158 | $font-size-h4: 1.25rem; 159 | $font-size-h5: 1rem; 160 | $font-size-h6: 0.875rem; 161 | 162 | $h1-lineheight: 2.25rem; /* 36px */ 163 | $h1-lineheight-sm: 2.5rem; /* 40px */ 164 | $h1-lineheight-md: 3.5rem; /* 56px */ 165 | 166 | $h2-lineheight: 1.75rem; /* 28px */ 167 | $h2-lineheight-sm: 2rem; /* 32px */ 168 | $h2-lineheight-md: 2.5rem; /* 40px */ 169 | 170 | $h3-lineheight: 1.75rem; /* 28px */ 171 | 172 | $h4-lineheight: 1.75rem; 173 | $h5-lineheight: 1.5rem; 174 | $h6-lineheight: 1.25rem; 175 | 176 | /* == Buttons ======== */ 177 | 178 | $btn-font: $font-medium; 179 | $btn-font-transform: uppercase; 180 | $btn-font-size: 0.875rem; /* 14px */ 181 | $btn-line-height: 0.875rem; /* 14px */ 182 | 183 | $btn-block-y: 0.75rem; /* 12px */ 184 | $btn-block-x: 0.75rem; /* 12px */ 185 | 186 | $btn-padding-x: 1rem; /* 16px */ 187 | $btn-padding-y: 0.75rem; /* 12px */ 188 | $btn-padding-y-lg: 1rem; /* 16px */ 189 | $btn-padding-x-lg: 1.5rem; /* 24px */ 190 | $btn-padding-y-sm: 0.5rem; /* 8px */ 191 | $btn-padding-x-sm: 0.75rem; /* 12px */ 192 | 193 | /* Border radius at 2px */ 194 | $border-radius: 2px; 195 | $border-radius-lg: 2px; 196 | $border-radius-sm: 2px; 197 | $btn-border-radius: $border-radius; 198 | $btn-border-radius-lg: $border-radius; 199 | $btn-border-radius-sm: $border-radius; 200 | 201 | /* Border width at 2px */ 202 | $input-btn-border-width: 1px; 203 | $input-btn-border-width-lg: 2px; 204 | 205 | /* Cards */ 206 | $card-spacer-y: 0.625rem; 207 | $card-spacer-x: 1.5rem; 208 | $card-header-font-size: 1rem; 209 | $card-header-line-height: 1rem; 210 | $card-header-font-family: $font-medium; 211 | $card-header-border-color: $grey-4; 212 | $card-subtitle-font-size: 0.875rem; 213 | $card-subtitle-line-height: 1.25rem; 214 | $card-subtitle-font-family: $font-medium; 215 | 216 | /* == Forms ======== */ 217 | 218 | $input-border-color: $grey-6; 219 | $input-border-radius: 2px; 220 | $input-padding-y: 13px; 221 | $input-padding-x: 12px; 222 | $input-color: $jdrf-black; 223 | $input-color-placeholder: $grey-6; 224 | $input-label-font-size: 0.9375rem; 225 | $input-label-line-height: 1.25rem; 226 | $input-label-color: $jdrf-black; 227 | $input-border-focus: $jdrf-blue; 228 | $brand-success: #009456; 229 | $brand-danger: #d7006d; 230 | $input-bg-disabled: $grey-1; 231 | 232 | $form-icon-success: "data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBpZD0iaWNfY2hlY2tfMjRweCI+PHBhdGggZD0iTTkgMTYuMTdMNC44MyAxMmwtMS40MiAxLjQxTDkgMTkgMjEgN2wtMS40MS0xLjQxeiIgZmlsbD0iIzAwOTQ1NiIvPjwvc3ZnPg=="; 233 | $form-icon-danger: "data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBpZD0iaWNfZXJyb3JfMjRweCI+PHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTJoMnYyem0wLTRoLTJWN2gydjZ6IiBmaWxsPSIjZTAxMjc5Ii8+PC9zdmc+"; -------------------------------------------------------------------------------- /src/scss/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/border-radius"; 2 | 3 | /* Bootstrap @import "scss/mixins/border-radius.scss */ 4 | -------------------------------------------------------------------------------- /src/scss/mixins/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/breakpoints"; 2 | 3 | /* Bootstrap @import "scss/mixins/breakpoints.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | /* Bootstrap @import "scss/mixins/buttons.scss */ 2 | 3 | @mixin button-variant($color, $background, $border) { 4 | font-family: $btn-font; 5 | color: $color; 6 | text-transform: $btn-font-transform; 7 | background-color: $background; 8 | border-color: $border; 9 | @include elevation-1; 10 | @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius); 11 | 12 | @include hover { 13 | color: $color; 14 | @include elevation-3; 15 | } 16 | 17 | &:focus, 18 | &.focus { 19 | color: $color; 20 | @include elevation-3; 21 | } 22 | 23 | &:active, 24 | &.active, 25 | .open > &.dropdown-toggle { 26 | color: $color; 27 | // Remove the gradient for the pressed/active state 28 | background-image: none; 29 | @include elevation-3; 30 | 31 | &:hover, 32 | &:focus, 33 | &.focus { 34 | color: $color; 35 | } 36 | } 37 | 38 | &.disabled, 39 | &:disabled { 40 | color: $grey-6; 41 | background-color: $grey-4; 42 | border-color: $grey-4; 43 | @include no-elevation; 44 | 45 | &:focus, 46 | &.focus { 47 | color: $grey-6; 48 | background-color: $grey-4; 49 | border-color: $grey-4; 50 | } 51 | 52 | @include hover { 53 | color: $grey-6; 54 | background-color: $grey-4; 55 | border-color: $grey-4; 56 | } 57 | } 58 | } 59 | 60 | @mixin button-outline-variant($color) { 61 | font-family: $btn-font; 62 | text-transform: $btn-font-transform; 63 | color: darken($color, 3%); 64 | background-image: none; 65 | background-color: transparent; 66 | border-color: darken($color, 3%); 67 | @include elevation-1; 68 | 69 | 70 | &:focus, 71 | &.focus, 72 | &:active, 73 | &.active, 74 | .open > &.dropdown-toggle { 75 | color: $jdrf-white; 76 | background-color: $color; 77 | @include elevation-3; 78 | } 79 | 80 | @include hover { 81 | color: $jdrf-white; 82 | background-color: $color; 83 | @include elevation-3; 84 | } 85 | 86 | &.disabled, 87 | &:disabled { 88 | color: $grey-6; 89 | border-color: $grey-6; 90 | background-color: transparent; 91 | @include no-elevation; 92 | 93 | &:focus, 94 | &.focus { 95 | color: $grey-6; 96 | border-color: $grey-6; 97 | background-color: transparent; 98 | } 99 | 100 | @include hover { 101 | color: $grey-6; 102 | border-color: $grey-6; 103 | background-color: transparent; 104 | } 105 | } 106 | } -------------------------------------------------------------------------------- /src/scss/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/clearfix"; 2 | 3 | /* Bootstrap @import "scss/mixins/clearfix.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_elevations.scss: -------------------------------------------------------------------------------- 1 | //Design System Elevations 2 | 3 | 4 | @mixin no-elevation() { 5 | box-shadow: none; 6 | } 7 | 8 | @mixin elevation-1() { 9 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.2); 10 | } 11 | 12 | @mixin elevation-2() { 13 | box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.24), 0 0 4px 0 rgba(0, 0, 0, 0.12); 14 | } 15 | 16 | @mixin elevation-3() { 17 | box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.24), 0 2px 8px 0 rgba(0, 0, 0, 0.12); 18 | } 19 | 20 | @mixin elevation-4() { 21 | box-shadow: 0 14px 28px 0 rgba(0, 0, 0, 0.25), 0 10px 10px 0 rgba(0, 0, 0, 0.26); 22 | } 23 | 24 | @mixin elevation-5() { 25 | box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.3), 0 16px 12px 0 rgba(0, 0, 0, 0.22); 26 | } -------------------------------------------------------------------------------- /src/scss/mixins/_forms.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/forms"; 2 | 3 | /* Bootstrap @import "scss/mixins/forms.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_grid-framework.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/grid-framework"; 2 | 3 | /* Bootstrap @import "scss/mixins/grid-framework.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_grid.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/grid"; 2 | 3 | /* Bootstrap @import "scss/mixins/grid.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_hover.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/hover"; 2 | 3 | /* Bootstrap @import "scss/mixins/hover.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_labels.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/labels"; 2 | 3 | /* Bootstrap @import "scss/mixins/labels.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_lists.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/lists"; 2 | 3 | /* Bootstrap @import "scss/mixins/lists.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_pulls.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/pulls"; 2 | 3 | /* Bootstrap @import "scss/mixins/pulls.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_reset-text.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/reset-text"; 2 | 3 | /* Bootstrap @import "scss/mixins/reset-text.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_resize.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/resize"; 2 | 3 | /* Bootstrap @import "scss/mixins/resize.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_screen-reader.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/screen-reader"; 2 | 3 | /* Bootstrap @import "scss/mixins/screen-reader.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_size.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/size"; 2 | 3 | /* Bootstrap @import "scss/mixins/size.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_tab-focus.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/tab-focus"; 2 | 3 | /* Bootstrap @import "scss/mixins/tab-focus.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_text-emphasis.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/text-emphasis"; 2 | 3 | /* Bootstrap @import "scss/mixins/text-emphasis.scss */ -------------------------------------------------------------------------------- /src/scss/mixins/_text-hide.scss: -------------------------------------------------------------------------------- 1 | @import "scss/mixins/text-hide"; 2 | 3 | /* Bootstrap @import "scss/mixins/text-hide.scss */ -------------------------------------------------------------------------------- /src/scss/style.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Overwrite files that import Bootstrap components individually 3 | */ 4 | 5 | // Core variables and mixins 6 | @import 'variables'; 7 | @import 'mixins'; 8 | 9 | // Core variables and mixins overwrites 10 | @import 'mixins/border-radius'; 11 | @import 'mixins/buttons'; 12 | @import 'mixins/elevations'; 13 | 14 | // Reset and dependencies 15 | @import 'normalize'; 16 | 17 | // Components 18 | @import 'nav'; 19 | 20 | // Core CSS 21 | @import 'reboot'; 22 | @import 'fonts'; 23 | @import 'type'; 24 | @import 'grid'; 25 | @import 'forms'; 26 | @import 'custom-forms'; 27 | @import 'buttons'; 28 | @import 'button-group'; 29 | @import 'elevations'; 30 | @import 'cards'; 31 | @import 'badges'; 32 | 33 | // Utility classes 34 | @import 'utilities'; 35 | @import 'utilities-background'; 36 | @import 'utilities-spacing'; 37 | @import 'utilities-responsive'; 38 | 39 | // Vendor 40 | @import 'vendor/ripple'; 41 | -------------------------------------------------------------------------------- /src/scss/vendor/_ripple.scss: -------------------------------------------------------------------------------- 1 | /*! Ripple.js v1.2.1 2 | * The MIT License (MIT) 3 | * Copyright (c) 2014 Jacob Kelley */ 4 | 5 | .has-ripple { 6 | position: relative; 7 | overflow: hidden; 8 | transform: translate3d(0,0,0); 9 | } 10 | 11 | .ripple { 12 | display: block; 13 | position: absolute; 14 | pointer-events: none; 15 | border-radius: 50%; 16 | transform: scale(0); 17 | background: #fff; 18 | opacity: 1; 19 | } 20 | 21 | .ripple-animate { 22 | animation: ripple; 23 | } 24 | 25 | @keyframes ripple { 26 | 100% { 27 | opacity: 0; 28 | transform: scale(2); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /tasks/README.md: -------------------------------------------------------------------------------- 1 | # Gulp Visual Workflow 2 | 3 | ## Stylesheet Flow for master branch (dev env) 4 | 5 | ```` 6 | └── design-system 7 | │ 8 | └── /dist 9 | │ │ 10 | │ └── /css/design-system.css (3. Combines css-files.css & sass-files.css into final file) 11 | │ 12 | └── /node_modules 13 | │ │ 14 | │ └── /material-icons/css/material-icons.css (2. Concats into css-files.css) 15 | │ 16 | └── /src 17 | │ │ 18 | │ └── /scss/style.scss (1. Concats into sass-files.css) 19 | │ 20 | └── /tasks 21 | │ 22 | └─ /styles.js (tasks that run from gulpfile.js) 23 | ```` 24 | 25 | Styles begin in `src/scss/` where each file is importing Bootstrap's matching file (if applicable) or following the same convention for overwrites. Each file is then imported into style.scss using `@import`. 26 | 27 | ### Flow for styles.js in the tasks folder 28 | 29 | `var sassStream` is responsible for pointing out the path of our styles.scss for us to work with. 30 | 31 | Our styles.scss file gets run through scss linter for Sass errors. 32 | 33 | We're including the path to Bootstrap so we can reference that path in our stylesheet imports in `src/_buttons.scss/_grid.scss/_mixins.scss` etc. 34 | 35 | It then concatenates (combines) all the styles from the sassStream into a file called "sass-files.css". 36 | 37 | Next it concatenates the material icons from node_modules into a file called "css-files.css". 38 | 39 | The stream called `stream` combines the two files that were created from the sassStream and cssStream (icons), the sass-files.css and css-files.css, and merges them into one final file called "design-system.css". This file gets stored in the `dist/css` path. This file should contain all styles from `src/style.scss` and `node_modules/material-icons/css/material-icons.css`. -------------------------------------------------------------------------------- /tasks/fonts.js: -------------------------------------------------------------------------------- 1 | module.exports = function (gulp, plugins, config) { 2 | return function () { 3 | var stream = gulp.src(__dirname + '/../src/fonts/**/**/*') 4 | .pipe(gulp.dest(__dirname + '/../dist/fonts')); 5 | return stream; 6 | }; 7 | }; 8 | -------------------------------------------------------------------------------- /tasks/scripts.js: -------------------------------------------------------------------------------- 1 | module.exports = function (gulp, plugins, comments) { 2 | return function () { 3 | var stream = gulp.src([ 4 | // Don't include bootstrap yet. Proof of future Concept 5 | './node_modules/jquery/dist/jquery.min.js', 6 | './node_modules/bootstrap/dist/js/umd/button.js', 7 | __dirname + '/../src/js/**/*.js', 8 | ]) 9 | // JSCS 10 | .pipe(plugins.jscs()) 11 | .pipe(plugins.jscs.reporter()) 12 | 13 | // ESLINT 14 | .pipe(plugins.eslint()) 15 | .pipe(plugins.eslint.format()) 16 | .pipe(plugins.eslint.failAfterError()) 17 | 18 | // Replace classes with namespaced classes 19 | .pipe(plugins.replace('\'active\'', '\'ds-active\'')) 20 | .pipe(plugins.replace('\'btn\'', '\'ds-btn\'')) 21 | .pipe(plugins.replace('.active', '.ds-active')) 22 | .pipe(plugins.replace('.btn', '.ds-btn')) 23 | .pipe(plugins.replace('ds-activeElement', 'activeElement')) 24 | .pipe(plugins.replace('ds-active++', 'active++')) 25 | .pipe(plugins.replace('ds-active||', 'active||')) 26 | 27 | .pipe(plugins.concat('design-system.js')) 28 | .pipe(plugins.header(comments, {pkg : plugins.pkg})) 29 | .pipe(gulp.dest(__dirname + '/../dist/js')); 30 | return stream; 31 | }; 32 | }; 33 | -------------------------------------------------------------------------------- /tasks/styles.js: -------------------------------------------------------------------------------- 1 | module.exports = function (gulp, plugins, comments) { 2 | 3 | return function () { 4 | //the sass source files directory (Bootstrap overwrites) 5 | var sassStream = gulp.src([ 6 | __dirname + '/../src/scss/style.scss' 7 | ]) 8 | //SCSS LINT 9 | .pipe(plugins.scsslint({ 10 | 'config': './.scss-lint.yml' 11 | })) 12 | //include bootstrap so we can use @import in sass 13 | .pipe(plugins.sass({ 14 | includePaths: [ 15 | './node_modules/bootstrap/' 16 | ], 17 | })) 18 | .on('error', plugins.notify.onError(function (error) { 19 | return 'Error: ' + error.message; 20 | }))
 21 | .pipe(plugins.cssNamespace({ 22 | namespace: 'ds', 23 | exclude: [ 24 | 'material-icons' 25 | ] 26 | })) 27 | .pipe(plugins.prefix({ 28 | browsers: ['last 2 versions', 'ie 9'] 29 | })) 30 | /* 31 | * After scss lint and including bootstrap path, 32 | * rename to plain css in a file called sass-files.css 33 | */ 34 | .pipe(plugins.rename('sass-files.css')); 35 | 36 | //grab the material icons stylesheet and rename to css-files.css 37 | var cssStream = gulp.src('./node_modules/material-icons/css/material-icons.css') 38 | .pipe(plugins.rename('css-files.css')); 39 | 40 | //merge sass-files.css and css-files.css into design-system.css in the dist dir 41 | var stream = plugins.merge(sassStream, cssStream) 42 | .pipe(plugins.concat('design-system.css')) 43 | .pipe(plugins.header(comments, {pkg : plugins.pkg})) 44 | .pipe(gulp.dest(__dirname + '/../dist/css')) 45 | .pipe(plugins.minifycss()) 46 | .pipe(plugins.header(comments, {pkg : plugins.pkg})) 47 | .pipe(plugins.rename('design-system.min.css')) 48 | .pipe(gulp.dest(__dirname + '/../dist/css')); 49 | 50 | return stream; 51 | }; 52 | 53 | }; 54 | -------------------------------------------------------------------------------- /tasks/test.js: -------------------------------------------------------------------------------- 1 | module.exports = function (gulp, plugins) { 2 | return function () { 3 | 4 | // Define which tests to run 5 | var src = __dirname + '/../tests/acceptance/**/*.js', 6 | exclude = '!' + __dirname + '/../tests/acceptance/forms/*.js'; 7 | 8 | if ( 'undefined' !== typeof plugins.gutil.env.test_dir ) { 9 | src = __dirname + '/../tests/acceptance/' + plugins.gutil.env.test_dir + '/*.js'; 10 | if ( 'undefined' !== typeof plugins.gutil.env.test_dir ) { 11 | src = __dirname + '/../tests/acceptance/' + plugins.gutil.env.test_dir + '/' + plugins.gutil.env.test_file + '.js'; 12 | } 13 | } 14 | 15 | var stream = gulp.src([ src, exclude ]) 16 | .pipe(plugins.phantomcss({ 17 | // gulp-phantomcss overrides the default option value. 18 | // PR submitted. 19 | screenshots: __dirname + '/../screenshots', 20 | comparisonResultRoot: __dirname + '/../results', 21 | failedComparisonsRoot: __dirname + '/../failures', 22 | })); 23 | return stream; 24 | }; 25 | }; 26 | -------------------------------------------------------------------------------- /tests/acceptance/animations/loading.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-btn-loading', 'Animation Loading'); 5 | }); 6 | casper.run(); 7 | -------------------------------------------------------------------------------- /tests/acceptance/animations/ripple.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-btn-ripple', 'Animation Ripple'); 5 | }); 6 | casper.run(); 7 | -------------------------------------------------------------------------------- /tests/acceptance/buttons/block.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-btn-block', 'Block Button'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-ds-btn-block-active', 'Block (Hover) Button'); 8 | }). 9 | then(function(){ 10 | phantomcss.screenshot('#phantom-ds-btn-block-disabled', 'Block (Disabled) Button'); 11 | }); 12 | 13 | casper.run(); -------------------------------------------------------------------------------- /tests/acceptance/buttons/checkbox.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-checkbox-buttons', 'Checkbox Buttons'); 5 | }); 6 | 7 | casper.run(); 8 | -------------------------------------------------------------------------------- /tests/acceptance/buttons/flat.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-btn-flat', 'Flat Button'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-ds-btn-flat-active', 'Flat (Hover) Button'); 8 | }). 9 | then(function(){ 10 | phantomcss.screenshot('#phantom-ds-btn-flat-disabled', 'Flat (Disabled) Button'); 11 | }); 12 | 13 | casper.run(); 14 | -------------------------------------------------------------------------------- /tests/acceptance/buttons/iconleft.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/content.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-btn-left-icon-lg', 'Left Icon Large Button'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-ds-btn-left-icon-normal', 'Left Icon Regular Button'); 8 | }). 9 | then(function(){ 10 | phantomcss.screenshot('#phantom-ds-btn-left-icon-sm', 'Left Icon Small Button'); 11 | }); 12 | 13 | casper.run(); -------------------------------------------------------------------------------- /tests/acceptance/buttons/icons.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/content.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-btn-icon-primary', 'Icon Only Primary Button'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-ds-btn-icon-outline', 'Icon Only Outline Button'); 8 | }). 9 | then(function(){ 10 | phantomcss.screenshot('#phantom-ds-btn-icon-flat', 'Icon Only Flat Button'); 11 | }); 12 | 13 | casper.run(); -------------------------------------------------------------------------------- /tests/acceptance/buttons/large.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-btn-lg', 'Large Button'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-ds-btn-lg-active', 'Large (Hover) Button'); 8 | }). 9 | then(function(){ 10 | phantomcss.screenshot('#phantom-ds-btn-lg-disabled', 'Large (Disabled) Button'); 11 | }); 12 | 13 | casper.run(); -------------------------------------------------------------------------------- /tests/acceptance/buttons/outline.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-btn-outline', 'Primary Outline Button'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-ds-btn-outline-active', 'Primary Outline (Hover) Button'); 8 | }). 9 | then(function(){ 10 | phantomcss.screenshot('#phantom-ds-btn-outline-disabled', 'Primary Outline (Disabled) Button'); 11 | }); 12 | 13 | casper.run(); 14 | -------------------------------------------------------------------------------- /tests/acceptance/buttons/primary.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-btn-primary', 'Primary Button'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-ds-btn-primary-active', 'Primary (Hover) Button'); 8 | }). 9 | then(function(){ 10 | phantomcss.screenshot('#phantom-ds-btn-primary-disabled', 'Primary (Disabled) Button'); 11 | }); 12 | 13 | casper.run(); 14 | -------------------------------------------------------------------------------- /tests/acceptance/buttons/radio.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-radio-buttons', 'Radio Buttons'); 5 | }); 6 | 7 | casper.run(); 8 | -------------------------------------------------------------------------------- /tests/acceptance/buttons/righticon.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/content.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-btn-right-icon-lg', 'Right Icon Large Button'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-ds-btn-right-icon-normal', 'Right Icon Regular Button'); 8 | }). 9 | then(function(){ 10 | phantomcss.screenshot('#phantom-ds-btn-right-icon-sm', 'Right Icon Small Button'); 11 | }); 12 | 13 | casper.run(); -------------------------------------------------------------------------------- /tests/acceptance/buttons/small.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-btn-sm', 'Small Button'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-ds-btn-sm-active', 'Small (Hover) Button'); 8 | }). 9 | then(function(){ 10 | phantomcss.screenshot('#phantom-ds-btn-sm-disabled', 'Small (Disabled) Button'); 11 | }); 12 | 13 | casper.run(); -------------------------------------------------------------------------------- /tests/acceptance/buttons/text.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-btn-link', 'Text Button'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-ds-btn-link-active', 'Text (Hover) Button'); 8 | }). 9 | then(function(){ 10 | phantomcss.screenshot('#phantom-ds-btn-link-disabled', 'Text (Disabled) Button'); 11 | }); 12 | 13 | casper.run(); 14 | -------------------------------------------------------------------------------- /tests/acceptance/buttons/toggleiconbar.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-toggle-icon-bar', 'Toggle Icon Bar'); 5 | }); 6 | 7 | casper.run(); 8 | -------------------------------------------------------------------------------- /tests/acceptance/buttons/togglesegment.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-toggle-segment', 'Toggle Segment Buttons'); 5 | }); 6 | 7 | casper.run(); 8 | -------------------------------------------------------------------------------- /tests/acceptance/cards/content-header-footer.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-card-content-header-footer', 'Content Card - Header & Footer'); 5 | }); 6 | casper.run(); 7 | -------------------------------------------------------------------------------- /tests/acceptance/cards/content-header.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-card-content-header', 'Content Card - Header'); 5 | }); 6 | casper.run(); 7 | -------------------------------------------------------------------------------- /tests/acceptance/cards/content-type-image-text.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-card-content-type-image-text', 'Content Type Card - Image & Text'); 5 | }); 6 | casper.run(); 7 | -------------------------------------------------------------------------------- /tests/acceptance/cards/content-type-image-title-text-button.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-card-content-type-image-title-text-button', 'Content Type Card - Image, Title, Text, & Button'); 5 | }); 6 | casper.run(); 7 | -------------------------------------------------------------------------------- /tests/acceptance/cards/content-type-image-title-text-list-links.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-card-content-type-image-title-text-list-links', 'Content Type Card - Image, Title, Text, List, & Links'); 5 | }); 6 | casper.run(); 7 | -------------------------------------------------------------------------------- /tests/acceptance/cards/content-type-program.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-card-content-type-program', 'Content Type Card - Program'); 5 | }); 6 | casper.run(); 7 | -------------------------------------------------------------------------------- /tests/acceptance/cards/content-type-title-text-links.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-card-content-type-title-text-links', 'Content Type Card - Title, Text, & Links'); 5 | }); 6 | casper.run(); 7 | -------------------------------------------------------------------------------- /tests/acceptance/cards/featured-header-footer-momentum-line.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-card-featured-hero', 'Featured Card - Hero Image with Momentum Line Mask, Header, & Footer'); 5 | }); 6 | casper.run(); 7 | -------------------------------------------------------------------------------- /tests/acceptance/cards/featured-header.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-card-featured', 'Featured Card - Header'); 5 | }); 6 | casper.run(); 7 | -------------------------------------------------------------------------------- /tests/acceptance/cards/image-cap.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-card-image-cap', 'Image Cap Card'); 5 | }); 6 | casper.run(); 7 | -------------------------------------------------------------------------------- /tests/acceptance/example.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000'). 3 | then(function(){ 4 | phantomcss.screenshot('.f-header-center', 'JDRF Design System'); 5 | }); 6 | 7 | casper.run(); 8 | -------------------------------------------------------------------------------- /tests/acceptance/forms/date.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('label[for=phantom-exampleInputDate]', 'Date Field Label'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-exampleInputDate', 'Date Field'); 8 | }); 9 | 10 | casper.run(); 11 | -------------------------------------------------------------------------------- /tests/acceptance/forms/email.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('label[for=phantom-exampleInputEmail1]', 'Email Field Label'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-exampleInputEmail1', 'Email Field'); 8 | }); 9 | 10 | casper.run(); 11 | -------------------------------------------------------------------------------- /tests/acceptance/forms/telephone.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('label[for=phantom-exampleInputTel]', 'Telephone Field Label'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-exampleInputTel', 'Telephone Field'); 8 | }); 9 | 10 | casper.run(); 11 | -------------------------------------------------------------------------------- /tests/acceptance/forms/text.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('label[for=phantom-exampleInputText1]', 'Text Field Label'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-exampleInputText1', 'Text Field'); 8 | }); 9 | 10 | casper.run(); 11 | -------------------------------------------------------------------------------- /tests/acceptance/forms/textarea.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('label[for=phantom-exampleTextarea]', 'Textarea Field Label'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-exampleTextarea', 'Textarea Field'); 8 | }); 9 | 10 | casper.run(); 11 | -------------------------------------------------------------------------------- /tests/acceptance/sidenav/sidenav.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/components.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-sidebar-single', 'Sidebar Single Level'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-sidebar-two', 'Sidebar Two Levels'); 8 | }); 9 | 10 | casper.run(); -------------------------------------------------------------------------------- /tests/acceptance/typography/anchors.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/content.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-anchors', 'Anchor Links'); 5 | }); 6 | 7 | casper.run(); 8 | 9 | -------------------------------------------------------------------------------- /tests/acceptance/typography/blockquote.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/content.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-blockquote', 'Blockquote'); 5 | }); 6 | 7 | casper.run(); 8 | -------------------------------------------------------------------------------- /tests/acceptance/typography/display.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/content.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-display-1', 'Display One'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-ds-display-2', 'Display Two'); 8 | }); 9 | 10 | casper.run(); 11 | -------------------------------------------------------------------------------- /tests/acceptance/typography/families.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/content.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-font-families', 'Font Families'); 5 | }); 6 | 7 | casper.run(); -------------------------------------------------------------------------------- /tests/acceptance/typography/headings.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/content.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-heading-1', 'Heading One'); 5 | }). 6 | then(function(){ 7 | phantomcss.screenshot('#phantom-ds-heading-2', 'Heading Two'); 8 | }). 9 | then(function(){ 10 | phantomcss.screenshot('#phantom-ds-heading-3', 'Heading Three'); 11 | }). 12 | then(function(){ 13 | phantomcss.screenshot('#phantom-ds-heading-4', 'Heading Four'); 14 | }). 15 | then(function(){ 16 | phantomcss.screenshot('#phantom-ds-heading-5', 'Heading Five'); 17 | }). 18 | then(function(){ 19 | phantomcss.screenshot('#phantom-ds-heading-6', 'Heading Six'); 20 | }); 21 | 22 | casper.run(); 23 | -------------------------------------------------------------------------------- /tests/acceptance/typography/inline.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/content.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-inline-elements', 'Inline Text Elements'); 5 | }); 6 | 7 | casper.run(); 8 | -------------------------------------------------------------------------------- /tests/acceptance/typography/lead.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/content.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-lead', 'Lead Paragraph'); 5 | }); 6 | 7 | casper.run(); 8 | -------------------------------------------------------------------------------- /tests/acceptance/typography/paragraph.js: -------------------------------------------------------------------------------- 1 | casper. 2 | start('http://localhost:3000/dist/content.html'). 3 | then(function(){ 4 | phantomcss.screenshot('#phantom-ds-paragraph', 'Paragraph'); 5 | }); 6 | 7 | casper.run(); 8 | 9 | -------------------------------------------------------------------------------- /tests/unit-tests/cleanup.js: -------------------------------------------------------------------------------- 1 | function cleanup() { 2 | delete global.jQuery; 3 | delete global.document; 4 | delete global.window; 5 | } 6 | 7 | cleanup(); 8 | -------------------------------------------------------------------------------- /tests/unit-tests/index.js: -------------------------------------------------------------------------------- 1 | // Add in any global vars, but be sure also add them to the cleanup task 2 | var setup = require('./setup').setup(); 3 | 4 | // Add any additional unit testing folders 5 | var ripple = require('./ripple'); 6 | -------------------------------------------------------------------------------- /tests/unit-tests/ripple/index.js: -------------------------------------------------------------------------------- 1 | var setAnimation = require('./set-animation'); 2 | var setColorOpacity = require('./set-color-opacity'); 3 | -------------------------------------------------------------------------------- /tests/unit-tests/ripple/set-animation.js: -------------------------------------------------------------------------------- 1 | var test = require('tape'); 2 | var tapSpec = require('tap-spec'); 3 | // Uses node globals since there is no window to attach to. 4 | var ripple = require('../../../src/js/ripple'); 5 | 6 | test('Duration test for RippleJS', function (t) { 7 | t.plan(2); 8 | 9 | var r = window.ripple(), 10 | options = { 11 | duration : 0.7, 12 | rate : function() { 13 | return 1; 14 | } 15 | }, 16 | $ripple = function() { 17 | return { 18 | width: function() { 19 | return 1; 20 | } 21 | } 22 | }(); 23 | 24 | var result = r.setAnimationRate( $ripple, options ); 25 | 26 | t.equal(result, 1.00, 'New Duration is correct'); 27 | 28 | // Create a second that tests so the original duration is passed back. 29 | 30 | options.duration = 1; 31 | 32 | result = r.setAnimationRate( $ripple, options ); 33 | 34 | t.equal(result, 1.00, 'Original Duration is correct'); 35 | 36 | }); 37 | -------------------------------------------------------------------------------- /tests/unit-tests/ripple/set-color-opacity.js: -------------------------------------------------------------------------------- 1 | var test = require('tape'); 2 | var tapSpec = require('tap-spec'); 3 | // Uses node globals since there is no window to attach to. 4 | var ripple = require('../../../src/js/ripple'); 5 | 6 | test('Color test for RippleJS', function (t) { 7 | t.plan(2); 8 | 9 | var r = window.ripple(), 10 | $ripple = function() { 11 | return { 12 | width: function() { 13 | return 1; 14 | }, 15 | css: function() { 16 | return 1; 17 | } 18 | } 19 | }(), 20 | options = { 21 | color: 'red', 22 | }; 23 | 24 | var result = r.setColorOpacity( $ripple, options, $ripple ); 25 | 26 | t.equal(result, 'red', 'New color is correct.'); 27 | 28 | options.color = 1; 29 | 30 | result = r.setColorOpacity( $ripple, options, $ripple ); 31 | 32 | t.equal(result, 1, 'Original color is correct.'); 33 | }); 34 | -------------------------------------------------------------------------------- /tests/unit-tests/setup.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | setup : function( ) { 4 | // Node globals. 5 | global.jQuery = require('jquery'); 6 | global.document = {}; 7 | global.window = {}; 8 | } 9 | 10 | }; 11 | --------------------------------------------------------------------------------