├── .babelrc ├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .htmlnanorc ├── .npmignore ├── dist ├── index.css └── index.js ├── docs ├── down.5e2b361d.svg ├── index.html ├── site.3c2d56e3.js ├── site.62a3e012.map ├── site.c90a8700.css └── vue_logo.2508b6c5.png ├── index.js ├── package-lock.json ├── package.json ├── readme.md ├── server.js └── src ├── animated.vue ├── animation.vue ├── browserBuild.js └── docs ├── images ├── down.svg ├── vue_logo.png └── vue_logo.svg ├── index.html ├── sandbox ├── .gitignore ├── .npmignore ├── LICENSE.md ├── README.md ├── _includes │ ├── head.html │ ├── navbar.html │ ├── script.html │ ├── side-menu.html │ ├── tabs-menu.html │ └── top-menu.html ├── dist │ ├── sandbox-min.css │ └── sandbox-min.css.map ├── package-lock.json ├── package.json └── src │ ├── base │ ├── _breakpoint-values.scss │ ├── _colors.scss │ ├── _global-variables.scss │ ├── _mixins.scss │ ├── a.scss │ ├── headings.scss │ ├── reset.scss │ ├── table.scss │ └── ul-ol.scss │ ├── buttons │ ├── button-outlined.scss │ ├── button.scss │ └── buttons.scss │ ├── components │ ├── card.scss │ ├── close.scss │ ├── code.scss │ ├── dropdown.scss │ ├── list-items.scss │ ├── loading.scss │ ├── modal.scss │ ├── navbar.scss │ ├── pagination.scss │ ├── popover.scss │ ├── progress.scss │ ├── square.scss │ ├── steps.scss │ └── tabs.scss │ ├── forms │ ├── addons.scss │ ├── controls.scss │ ├── field.scss │ └── icons.scss │ ├── layout │ ├── flexbox.scss │ ├── grid.scss │ └── position-presets.scss │ ├── sandbox.scss │ ├── themes │ └── themes.scss │ └── utilities │ ├── border.scss │ ├── display.scss │ ├── float.scss │ ├── font-size.scss │ ├── height.scss │ ├── img.scss │ ├── overflow.scss │ ├── position.scss │ ├── spacing.scss │ ├── text.scss │ ├── width.scss │ ├── z-index.scss │ └── zeroing.scss └── scripts ├── about.vue ├── application.vue ├── home.vue └── site.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "sourceMaps": "inline", 3 | "plugins": [ 4 | ["transform-object-rest-spread"] 5 | ] 6 | } -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | public2/g.js 2 | public2/materialize-css 3 | public2/materialize-css/* 4 | public2/scripts/materialize.js 5 | public2/sandbox -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["plugin:vue/essential", "eslint:recommended"], 3 | "parserOptions": { 4 | "parser": "babel-eslint", 5 | "ecmaVersion": 8, 6 | "sourceType": "module" 7 | }, 8 | "env" : { 9 | "browser": true, 10 | "node" : true 11 | }, 12 | "rules": { 13 | // The rules below are listed in the order they appear on the eslint 14 | // rules page. All rules are listed to make it easier to keep in sync 15 | // as new ESLint rules are added. 16 | // http://eslint.org/docs/rules/ 17 | // - Rules in the `eslint:recommended` ruleset that aren"t specifically 18 | // mentioned by the google styleguide are listed but commented out (so 19 | // they don"t override a base ruleset). 20 | // - Rules that are recommended but contradict the Google styleguide 21 | // are explicitely set to the Google styleguide value. 22 | 23 | // Possible Errors 24 | // http://eslint.org/docs/rules/#possible-errors 25 | // --------------------------------------------- 26 | "no-cond-assign": 0, // eslint:recommended 27 | "no-console": 1, // eslint:recommended 28 | "no-constant-condition": 2, // eslint:recommended 29 | "no-control-regex": 2, // eslint:recommended 30 | "no-debugger": 2, // eslint:recommended 31 | "no-dupe-args": 2, // eslint:recommended 32 | "no-dupe-keys": 2, // eslint:recommended 33 | "no-duplicate-case": 2, // eslint:recommended 34 | "no-empty-character-class": 2, // eslint:recommended 35 | "no-empty": 2, // eslint:recommended 36 | "no-ex-assign": 2, // eslint:recommended 37 | "no-extra-boolean-cast": 2, // eslint:recommended 38 | "no-extra-parens": 0, 39 | "no-extra-semi": 2, // eslint:recommended 40 | "no-func-assign": 2, // eslint:recommended 41 | "no-inner-declarations": 2, // eslint:recommended 42 | "no-invalid-regexp": 2, // eslint:recommended 43 | "no-irregular-whitespace": 2, // eslint:recommended 44 | "no-obj-calls": 2, // eslint:recommended 45 | "no-prototype-builtins": 0, 46 | "no-regex-spaces": 2, // eslint:recommended 47 | "no-sparse-arrays": 2, // eslint:recommended 48 | "no-template-curly-in-string": 0, 49 | "no-unexpected-multiline": 2, // eslint:recommended 50 | "no-unreachable": 2, // eslint:recommended 51 | "no-unsafe-finally": 2, // eslint:recommended 52 | "no-unsafe-negation": 0, 53 | "use-isnan": 2, // eslint:recommended 54 | "valid-typeof": 2, // eslint:recommended 55 | 56 | // Best Practices 57 | // http://eslint.org/docs/rules/#best-practices 58 | // -------------------------------------------- 59 | 60 | // "accessor-pairs": 0, 61 | // "array-callback-return": 0, 62 | // "block-scoped-var": 0, 63 | // "class-methods-use-this": 0, 64 | // "complexity": 0, 65 | // "consistent-return": 0 66 | // "curly": 0, // TODO(philipwalton): add an option to enforce braces with 67 | // the exception of simple, single-line if statements. 68 | // "default-case": 0, 69 | // "dot-location": 0, 70 | // "dot-notation": 0, 71 | // "eqeqeq": 0, 72 | "guard-for-in": 0, 73 | // "no-alert": 0, 74 | "no-caller": 2, 75 | // "no-case-declarations": 2, // eslint:recommended 76 | // "no-div-regex": 0, 77 | // "no-else-return": 0, 78 | // "no-empty-function": 0, 79 | // "no-empty-pattern": 2, // eslint:recommended 80 | // "no-eq-null": 0, 81 | // "no-eval": 0, 82 | "no-extend-native": 2, 83 | "no-extra-bind": 2, 84 | // "no-extra-label": 0, 85 | // "no-fallthrough": 2, // eslint:recommended 86 | // "no-floating-decimal": 0, 87 | // "no-global-assign": 0, 88 | // "no-implicit-coercion": 0, 89 | // "no-implicit-globals": 0, 90 | // "no-implied-eval": 0, 91 | "no-invalid-this": 0, 92 | // "no-iterator": 0, 93 | // "no-labels": 0, 94 | // "no-lone-blocks": 0, 95 | // "no-loop-func": 0, 96 | // "no-magic-numbers": 0, 97 | "no-multi-spaces": 2, 98 | "no-multi-str": 2, 99 | // "no-new-func": 0, 100 | "no-new-wrappers": 2, 101 | // "no-new": 0, 102 | // "no-octal-escape": 0, 103 | // "no-octal": 2, // eslint:recommended 104 | // "no-param-reassign": 0, 105 | // "no-proto": 0, 106 | // "no-redeclare": 2, // eslint:recommended 107 | // "no-return-assign": 0, 108 | // "no-script-url": 0, 109 | // "no-self-assign": 2, // eslint:recommended 110 | // "no-self-compare": 0, 111 | // "no-sequences": 0, 112 | "no-throw-literal": 2, // eslint:recommended 113 | // "no-unmodified-loop-condition": 0, 114 | // "no-unused-expressions": 0, 115 | // "no-unused-labels": 2, // eslint:recommended 116 | // "no-useless-call": 0, 117 | // "no-useless-concat": 0, 118 | "no-useless-escape": 0, //causes issues with parcel and script tag examples 119 | // "no-void": 0, 120 | // "no-warning-comments": 0, 121 | "no-with": 2, 122 | // "radix": 0, 123 | // "vars-on-top": 0, 124 | // "wrap-iife": 0, 125 | // "yoda": 0, 126 | 127 | // Strict Mode 128 | // http://eslint.org/docs/rules/#strict-mode 129 | // ----------------------------------------- 130 | // "script": 0, 131 | 132 | // Variables 133 | // http://eslint.org/docs/rules/#variables 134 | // --------------------------------------- 135 | // "init-declarations": 0, 136 | // "no-catch-shadow": 0, 137 | // "no-delete-var": 2, // eslint:recommended 138 | // "no-label-var": 0, 139 | // "no-restricted-globals": 0, 140 | // "no-shadow-restricted-names": 0, 141 | // "no-shadow": 0, 142 | // "no-undef-init": 0, 143 | "no-undef": 0, // eslint:recommended 144 | // "no-undefined": 0, 145 | "no-unused-vars": [2, {"args": "none"}], // eslint:recommended 146 | // "no-use-before-define": 0, 147 | 148 | // Node.js and CommonJS 149 | // http://eslint.org/docs/rules/#nodejs-and-commonjs 150 | // ------------------------------------------------- 151 | // "callback-return": 0, 152 | // "global-require": 0, 153 | // "handle-callback-err": 0, 154 | // "no-mixed-requires": 0, 155 | // "no-new-require": 0, 156 | // "no-path-concat": 0, 157 | // "no-process-env": 0, 158 | // "no-process-exit": 0, 159 | // "no-restricted-modules": 0, 160 | // "no-restricted-properties": 0, 161 | // "no-sync": 0, 162 | 163 | // Stylistic Issues 164 | // http://eslint.org/docs/rules/#stylistic-issues 165 | // ---------------------------------------------- 166 | "array-bracket-spacing": [2, "never"], 167 | // "block-spacing": 0, 168 | //"brace-style": 2, 169 | "camelcase": 1, 170 | "comma-dangle": 0, 171 | "comma-spacing": 2, 172 | "comma-style": 2, 173 | "computed-property-spacing": 2, 174 | // "consistent-this": 0, 175 | "func-call-spacing": 2, 176 | // "func-name-matching": 0, 177 | // "func-names": 0, 178 | // "func-style": 0, 179 | // "id-blacklist": 0, 180 | // "id-length": 0, 181 | // "id-match": 0, 182 | // "indent": 0, // TODO(philipwalton): this rule isn"t compatible with 183 | // Google"s 4-space indent for line continuations. 184 | // "jsx-quotes": 0, 185 | "key-spacing": 2, 186 | "keyword-spacing": 0, 187 | // "line-comment-position": 0, 188 | // "lines-around-comment": 0, 189 | // "lines-around-directive": 0, 190 | // "max-depth": 0, 191 | // "max-lines": 0, 192 | // "max-nested-callbacks": 0, 193 | // "max-params": 0, 194 | // "max-statements-per-line": 0, 195 | // "max-statements": 0, 196 | // "multiline-ternary": 0, // TODO(philipwalton): add a rule to enforce the 197 | // operator appearing at the end of the line. 198 | "new-cap": 2, 199 | // "new-parens": 0, 200 | // "newline-after-var": 0, 201 | // "newline-before-return": 0, 202 | // "newline-per-chained-call": 0, 203 | "no-array-constructor": 2, 204 | // "no-bitwise": 0, 205 | // "no-continue": 0, 206 | // "no-inline-comments": 0, 207 | // "no-lonely-if": 0, 208 | // "no-mixed-operators": 0, 209 | "no-mixed-spaces-and-tabs": 2, // eslint:recommended 210 | "no-multiple-empty-lines": [2, {"max": 2}], 211 | // "no-negated-condition": 0, 212 | // "no-nested-ternary": 0, 213 | "no-new-object": 2, 214 | // "no-plusplus": 0, 215 | // "no-restricted-syntax": 0, 216 | // "no-tabs": 0, 217 | // "no-ternary": 0, 218 | "no-trailing-spaces": 2, 219 | // "no-underscore-dangle": 0, 220 | // "no-unneeded-ternary": 0, 221 | // "no-whitespace-before-property": 0, 222 | // "object-curly-newline": 0, 223 | // "object-property-newline": 0, 224 | // "one-var-declaration-per-line": 0, 225 | "one-var": [2, { 226 | "var": "never", 227 | "let": "never", 228 | "const": "never" 229 | }], 230 | // "operator-assignment": 0, 231 | // "operator-linebreak": 0, 232 | "padded-blocks": [2, "never"], 233 | "quote-props": [2, "as-needed"], 234 | "quotes": [2, "single", {"allowTemplateLiterals": true}], 235 | "semi-spacing": 2, 236 | "semi": [2, "always", { "omitLastInOneLineBlock": true }], 237 | // "sort-keys": 0, 238 | // "sort-vars": 0, 239 | "space-before-function-paren": [2, "never"], 240 | // "space-in-parens": 0, 241 | // "space-infix-ops": 0, 242 | // "space-unary-ops": 0, 243 | "spaced-comment": 0, 244 | // "unicode-bom": 0, 245 | // "wrap-regex": 0, 246 | 247 | // ECMAScript 6 248 | // http://eslint.org/docs/rules/#ecmascript-6 249 | // ------------------------------------------ 250 | // "arrow-body-style": 0, 251 | "arrow-parens": [2, "as-needed"], // TODO(philipwalton): technically arrow 252 | // parens are optional but recommended. 253 | // ESLint doesn"t support a *consistent* 254 | // setting so "always" is used. 255 | // "arrow-spacing": 0, 256 | "constructor-super": 2, // eslint:recommended 257 | "generator-star-spacing": [2, "after"], 258 | // "no-class-assign": 0, 259 | // "no-confusing-arrow": 0, 260 | // "no-const-assign": 0, // eslint:recommended 261 | // "no-dupe-class-members": 0, // eslint:recommended 262 | // "no-duplicate-imports": 0, 263 | "no-new-symbol": 2, // eslint:recommended 264 | // "no-restricted-imports": 0, 265 | "no-this-before-super": 2, // eslint:recommended 266 | // "no-useless-computed-key": 0, 267 | // "no-useless-constructor": 0, 268 | // "no-useless-rename": 0, 269 | // "object-shorthand": 0, 270 | // "prefer-arrow-callback": 0, 271 | "prefer-const": 2, 272 | // "prefer-numeric-literals": 0, 273 | // "prefer-reflect": 0, 274 | "prefer-spread": 2, 275 | "require-jsdoc": 0, 276 | // "prefer-template": 0, 277 | // "require-yield": 2, // eslint:recommended 278 | "rest-spread-spacing": 2, 279 | // "sort-imports": 0, 280 | // "symbol-description": 0, 281 | // "template-curly-spacing": 0, 282 | "yield-star-spacing": [2, "after"], 283 | 284 | // ^Google style 285 | // Brian Style 286 | "prefer-rest-params": 0, 287 | "linebreak-style": 0, 288 | "no-var": 2, 289 | "object-curly-spacing": 0, 290 | "brace-style": [2, "stroustrup", { "allowSingleLine": true }], 291 | "max-len" : 0, 292 | "space-before-blocks" : [2, "never"], 293 | "eol-last" : [2, "never"] 294 | } 295 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | *.zip 61 | 62 | .cache 63 | 64 | public 65 | public2/materialize-css/dist/ 66 | public2/materialize-css/bin/ 67 | public2/styles/materialize.css 68 | public2/sandbox/dist/sandbox-min.css.map 69 | public2/sandbox/dist/sandbox-min.css 70 | .idea -------------------------------------------------------------------------------- /.htmlnanorc: -------------------------------------------------------------------------------- 1 | { 2 | minifySvg: false 3 | } -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | docs 2 | public 3 | coverage 4 | .cache 5 | .idea 6 | .circleci 7 | server.js 8 | src/docs -------------------------------------------------------------------------------- /dist/index.css: -------------------------------------------------------------------------------- 1 | .animated-d[data-v-920133]{display:inherit} -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | parcelRequire=function(e,r,n,t){var i="function"==typeof parcelRequire&&parcelRequire,o="function"==typeof require&&require;function u(n,t){if(!r[n]){if(!e[n]){var f="function"==typeof parcelRequire&&parcelRequire;if(!t&&f)return f(n,!0);if(i)return i(n,!0);if(o&&"string"==typeof n)return o(n);var c=new Error("Cannot find module '"+n+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[n][1][r]||r},p.cache={};var l=r[n]=new u.Module(n);e[n][0].call(l.exports,p,l,l.exports,this)}return r[n].exports;function p(e){return u(p.resolve(e))}}u.isParcelRequire=!0,u.Module=function(e){this.id=e,this.bundle=u,this.exports={}},u.modules=e,u.cache=r,u.parent=i,u.register=function(r,n){e[r]=[function(e,r){r.exports=n},{}]};for(var f=0;f0&&s-1 in e))}}(window),function(i){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=i():"function"==typeof e&&e.amd?e(i):i()}(function(){"use strict";return function(e,i,s,f){var g,o=function(){if(s.documentMode)return s.documentMode;for(var e=7;e>4;e--){var i=s.createElement("div");if(i.innerHTML="\x3c!--[if IE "+e+"]>=0?i:Math.max(0,f+i),r=(s<0?f+s:Math.min(s,f))-h;if(r>0)if(o=new Array(r),this.charAt)for(g=0;g=0}:function(e,i){for(var s=0;s1e-4&&Math.abs(r.v)>1e-4;);return o?function(e){return u[e*(u.length-1)|0]}:v}}();w.Easings={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},spring:function(e){return 1-Math.cos(4.5*e*Math.PI)*Math.exp(6*-e)}},b.each([["ease",[.25,.1,.25,1]],["ease-in",[.42,0,1,1]],["ease-out",[0,0,.58,1]],["ease-in-out",[.42,0,.58,1]],["easeInSine",[.47,0,.745,.715]],["easeOutSine",[.39,.575,.565,1]],["easeInOutSine",[.445,.05,.55,.95]],["easeInQuad",[.55,.085,.68,.53]],["easeOutQuad",[.25,.46,.45,.94]],["easeInOutQuad",[.455,.03,.515,.955]],["easeInCubic",[.55,.055,.675,.19]],["easeOutCubic",[.215,.61,.355,1]],["easeInOutCubic",[.645,.045,.355,1]],["easeInQuart",[.895,.03,.685,.22]],["easeOutQuart",[.165,.84,.44,1]],["easeInOutQuart",[.77,0,.175,1]],["easeInQuint",[.755,.05,.855,.06]],["easeOutQuint",[.23,1,.32,1]],["easeInOutQuint",[.86,0,.07,1]],["easeInExpo",[.95,.05,.795,.035]],["easeOutExpo",[.19,1,.22,1]],["easeInOutExpo",[1,0,0,1]],["easeInCirc",[.6,.04,.98,.335]],["easeOutCirc",[.075,.82,.165,1]],["easeInOutCirc",[.785,.135,.15,.86]]],function(e,i){w.Easings[i[0]]=y.apply(null,i[1])});var H=w.CSS={RegEx:{isHex:/^#([A-f\d]{3}){1,2}$/i,valueUnwrap:/^[A-z]+\((.*)\)$/i,wrappedValueAlreadyExtracted:/[0-9.]+ [0-9.]+ [0-9.]+( [0-9.]+)?/,valueSplit:/([A-z]+\(.+\))|(([A-z0-9#-.]+?)(?=\s|$))/gi},Lists:{colors:["fill","stroke","stopColor","color","backgroundColor","borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],transformsBase:["translateX","translateY","scale","scaleX","scaleY","skewX","skewY","rotateZ"],transforms3D:["transformPerspective","translateZ","scaleZ","rotateX","rotateY"],units:["%","em","ex","ch","rem","vw","vh","vmin","vmax","cm","mm","Q","in","pc","pt","px","deg","grad","rad","turn","s","ms"],colorNames:{aliceblue:"240,248,255",antiquewhite:"250,235,215",aquamarine:"127,255,212",aqua:"0,255,255",azure:"240,255,255",beige:"245,245,220",bisque:"255,228,196",black:"0,0,0",blanchedalmond:"255,235,205",blueviolet:"138,43,226",blue:"0,0,255",brown:"165,42,42",burlywood:"222,184,135",cadetblue:"95,158,160",chartreuse:"127,255,0",chocolate:"210,105,30",coral:"255,127,80",cornflowerblue:"100,149,237",cornsilk:"255,248,220",crimson:"220,20,60",cyan:"0,255,255",darkblue:"0,0,139",darkcyan:"0,139,139",darkgoldenrod:"184,134,11",darkgray:"169,169,169",darkgrey:"169,169,169",darkgreen:"0,100,0",darkkhaki:"189,183,107",darkmagenta:"139,0,139",darkolivegreen:"85,107,47",darkorange:"255,140,0",darkorchid:"153,50,204",darkred:"139,0,0",darksalmon:"233,150,122",darkseagreen:"143,188,143",darkslateblue:"72,61,139",darkslategray:"47,79,79",darkturquoise:"0,206,209",darkviolet:"148,0,211",deeppink:"255,20,147",deepskyblue:"0,191,255",dimgray:"105,105,105",dimgrey:"105,105,105",dodgerblue:"30,144,255",firebrick:"178,34,34",floralwhite:"255,250,240",forestgreen:"34,139,34",fuchsia:"255,0,255",gainsboro:"220,220,220",ghostwhite:"248,248,255",gold:"255,215,0",goldenrod:"218,165,32",gray:"128,128,128",grey:"128,128,128",greenyellow:"173,255,47",green:"0,128,0",honeydew:"240,255,240",hotpink:"255,105,180",indianred:"205,92,92",indigo:"75,0,130",ivory:"255,255,240",khaki:"240,230,140",lavenderblush:"255,240,245",lavender:"230,230,250",lawngreen:"124,252,0",lemonchiffon:"255,250,205",lightblue:"173,216,230",lightcoral:"240,128,128",lightcyan:"224,255,255",lightgoldenrodyellow:"250,250,210",lightgray:"211,211,211",lightgrey:"211,211,211",lightgreen:"144,238,144",lightpink:"255,182,193",lightsalmon:"255,160,122",lightseagreen:"32,178,170",lightskyblue:"135,206,250",lightslategray:"119,136,153",lightsteelblue:"176,196,222",lightyellow:"255,255,224",limegreen:"50,205,50",lime:"0,255,0",linen:"250,240,230",magenta:"255,0,255",maroon:"128,0,0",mediumaquamarine:"102,205,170",mediumblue:"0,0,205",mediumorchid:"186,85,211",mediumpurple:"147,112,219",mediumseagreen:"60,179,113",mediumslateblue:"123,104,238",mediumspringgreen:"0,250,154",mediumturquoise:"72,209,204",mediumvioletred:"199,21,133",midnightblue:"25,25,112",mintcream:"245,255,250",mistyrose:"255,228,225",moccasin:"255,228,181",navajowhite:"255,222,173",navy:"0,0,128",oldlace:"253,245,230",olivedrab:"107,142,35",olive:"128,128,0",orangered:"255,69,0",orange:"255,165,0",orchid:"218,112,214",palegoldenrod:"238,232,170",palegreen:"152,251,152",paleturquoise:"175,238,238",palevioletred:"219,112,147",papayawhip:"255,239,213",peachpuff:"255,218,185",peru:"205,133,63",pink:"255,192,203",plum:"221,160,221",powderblue:"176,224,230",purple:"128,0,128",red:"255,0,0",rosybrown:"188,143,143",royalblue:"65,105,225",saddlebrown:"139,69,19",salmon:"250,128,114",sandybrown:"244,164,96",seagreen:"46,139,87",seashell:"255,245,238",sienna:"160,82,45",silver:"192,192,192",skyblue:"135,206,235",slateblue:"106,90,205",slategray:"112,128,144",snow:"255,250,250",springgreen:"0,255,127",steelblue:"70,130,180",tan:"210,180,140",teal:"0,128,128",thistle:"216,191,216",tomato:"255,99,71",turquoise:"64,224,208",violet:"238,130,238",wheat:"245,222,179",whitesmoke:"245,245,245",white:"255,255,255",yellowgreen:"154,205,50",yellow:"255,255,0"}},Hooks:{templates:{textShadow:["Color X Y Blur","black 0px 0px 0px"],boxShadow:["Color X Y Blur Spread","black 0px 0px 0px 0px"],clip:["Top Right Bottom Left","0px 0px 0px 0px"],backgroundPosition:["X Y","0% 0%"],transformOrigin:["X Y Z","50% 50% 0px"],perspectiveOrigin:["X Y","50% 50%"]},registered:{},register:function(){for(var e=0;e=1?"":"alpha(opacity="+parseInt(100*parseFloat(s),10)+")"}else switch(e){case"name":return"opacity";case"extract":case"inject":return s}}},register:function(){o&&!(o>9)||w.State.isGingerbread||(H.Lists.transformsBase=H.Lists.transformsBase.concat(H.Lists.transforms3D));for(var e=0;e8)&&3===h.split(" ").length&&(h+=" 1"),h;case"inject":return/^rgb/.test(g)?g:(o<=8?4===g.split(" ").length&&(g=g.split(/\s+/).slice(0,3).join(" ")):3===g.split(" ").length&&(g+=" 1"),(o<=8?"rgb":"rgba")+"("+g.replace(/\s+/g,",").replace(/\.(\d)+(?=,)/g,"")+")")}}}();function s(e,i,s){if("border-box"===H.getPropertyValue(i,"boxSizing").toString().toLowerCase()===(s||!1)){var f,g,o=0,h="width"===e?["Left","Right"]:["Top","Bottom"],r=["padding"+h[0],"padding"+h[1],"border"+h[0]+"Width","border"+h[1]+"Width"];for(f=0;f=2&&console.log("Get "+s+": "+c),c},setPropertyValue:function(e,s,f,g,h){var r=s;if("scroll"===s)h.container?h.container["scroll"+h.direction]=f:"Left"===h.direction?i.scrollTo(f,h.alternateValue):i.scrollTo(h.alternateValue,f);else if(H.Normalizations.registered[s]&&"transform"===H.Normalizations.registered[s]("name",e))H.Normalizations.registered[s]("inject",e,f),r="transform",f=O(e).transformCache[s];else{if(H.Hooks.registered[s]){var c=s,u=H.Hooks.getRoot(s);g=g||H.getPropertyValue(e,u),f=H.Hooks.injectValue(c,f,g),s=u}if(H.Normalizations.registered[s]&&(f=H.Normalizations.registered[s]("inject",e,f),s=H.Normalizations.registered[s]("name",e)),r=H.Names.prefixCheck(s)[0],o<=8)try{e.style[r]=f}catch(b){w.debug&&console.log("Browser does not support ["+f+"] for ["+r+"]")}else{var v=O(e);v&&v.isSVG&&H.Names.SVGAttribute(s)?e.setAttribute(s,f):e.style[r]=f}w.debug>=2&&console.log("Set "+s+" ("+r+"): "+f)}return[r,f]},flushTransformCache:function(e){var i="",s=O(e);if((o||w.State.isAndroid&&!w.State.isChrome)&&s&&s.isSVG){var f=function(i){return parseFloat(H.getPropertyValue(e,i))},g={translate:[f("translateX"),f("translateY")],skewX:[f("skewX")],skewY:[f("skewY")],scale:1!==f("scale")?[f("scale"),f("scale")]:[f("scaleX"),f("scaleY")],rotate:[f("rotateZ"),0,0]};b.each(O(e).transformCache,function(e){/^translate/i.test(e)?e="translate":/^scale/i.test(e)?e="scale":/^rotate/i.test(e)&&(e="rotate"),g[e]&&(i+=e+"("+g[e].join(" ")+") ",delete g[e])})}else{var h,r;b.each(O(e).transformCache,function(s){if(h=O(e).transformCache[s],"transformPerspective"===s)return r=h,!0;9===o&&"rotateZ"===s&&(s="rotate"),i+=s+h+" "}),r&&(i="perspective"+r+" "+i)}H.setPropertyValue(e,"transform",i)}};H.Hooks.register(),H.Normalizations.register(),w.hook=function(e,i,s){var g;return e=v(e),b.each(e,function(e,o){if(O(o)===f&&w.init(o),s===f)g===f&&(g=H.getPropertyValue(o,i));else{var h=H.setPropertyValue(o,i,s);"transform"===h[0]&&w.CSS.flushTransformCache(o),g=h}}),g};var F=function(){var e;function g(){return o?A.promise||null:h}var o,h,r,c,x,P,m=arguments[0]&&(arguments[0].p||b.isPlainObject(arguments[0].properties)&&!arguments[0].properties.names||l.isString(arguments[0].properties));l.isWrapped(this)?(o=!1,r=0,c=this,h=this):(o=!0,r=1,c=m?arguments[0].elements||arguments[0].e:arguments[0]);var A={promise:null,resolver:null,rejecter:null};if(o&&w.Promise&&(A.promise=new w.Promise(function(e,i){A.resolver=e,A.rejecter=i})),m?(x=arguments[0].properties||arguments[0].p,P=arguments[0].options||arguments[0].o):(x=arguments[r],P=arguments[r+1]),c=v(c)){var L,y=c.length,N=0;if(!/^(stop|finish|finishAll|pause|resume)$/i.test(x)&&!b.isPlainObject(P)){P={};for(var W=r+1;W=4&&"("===Z?W++:(W&&W<5||W>=4&&")"===Z&&--W<5)&&(W=0),0===X&&"r"===Z||1===X&&"g"===Z||2===X&&"b"===Z||3===X&&"a"===Z||X>=3&&"("===Z?(3===X&&"a"===Z&&(Y=1),X++):Y&&","===Z?++Y>3&&(X=Y=0):(Y&&X<(Y?5:4)||X>=(Y?4:3)&&")"===Z&&--X<(Y?5:4))&&(X=Y=0)}}j===A.length&&p===P.length||(w.debug&&console.error('Trying to pattern match mis-matched strings ["'+P+'", "'+A+'"]'),c=f),c&&(M.length?(w.debug&&console.log('Pattern found "'+c+'" -> ',M,N,"["+A+","+P+"]"),A=M,P=N,O=q=""):c=f)}if(c||(A=(L=y(g,A))[0],q=L[1],P=(L=y(g,P))[0].replace(/^([+-\/*])=/,function(e,i){return z=i,""}),O=L[1],A=parseFloat(A)||0,P=parseFloat(P)||0,"%"===O&&(/^(fontSize|lineHeight)$/.test(g)?(P/=100,O="em"):/^scale/.test(g)?(P/=100,O=""):/(Red|Green|Blue)$/i.test(g)&&(P=P/100*255,O=""))),/[\/*]/.test(z))O=q;else if(q!==O&&0!==A)if(0===P)O=q;else{o=o||function(){var f={myParent:e.parentNode||s.body,position:H.getPropertyValue(e,"position"),fontSize:H.getPropertyValue(e,"fontSize")},g=f.position===_.lastPosition&&f.myParent===_.lastParent,o=f.fontSize===_.lastFontSize;_.lastParent=f.myParent,_.lastPosition=f.position,_.lastFontSize=f.fontSize;var h={};if(o&&g)h.emToPx=_.lastEmToPx,h.percentToPxWidth=_.lastPercentToPxWidth,h.percentToPxHeight=_.lastPercentToPxHeight;else{var r=k&&k.isSVG?s.createElementNS("http://www.w3.org/2000/svg","rect"):s.createElement("div");w.init(r),f.myParent.appendChild(r),b.each(["overflow","overflowX","overflowY"],function(e,i){w.CSS.setPropertyValue(r,i,"hidden")}),w.CSS.setPropertyValue(r,"position",f.position),w.CSS.setPropertyValue(r,"fontSize",f.fontSize),w.CSS.setPropertyValue(r,"boxSizing","content-box"),b.each(["minWidth","maxWidth","width","minHeight","maxHeight","height"],function(e,i){w.CSS.setPropertyValue(r,i,"100%")}),w.CSS.setPropertyValue(r,"paddingLeft","100em"),h.percentToPxWidth=_.lastPercentToPxWidth=(parseFloat(H.getPropertyValue(r,"width",null,!0))||1)/100,h.percentToPxHeight=_.lastPercentToPxHeight=(parseFloat(H.getPropertyValue(r,"height",null,!0))||1)/100,h.emToPx=_.lastEmToPx=(parseFloat(H.getPropertyValue(r,"paddingLeft"))||1)/100,f.myParent.removeChild(r)}return null===_.remToPx&&(_.remToPx=parseFloat(H.getPropertyValue(s.body,"fontSize"))||16),null===_.vwToPx&&(_.vwToPx=parseFloat(i.innerWidth)/100,_.vhToPx=parseFloat(i.innerHeight)/100),h.remToPx=_.remToPx,h.vwToPx=_.vwToPx,h.vhToPx=_.vhToPx,w.debug>=1&&console.log("Unit ratios: "+JSON.stringify(h),e),h}();var D=/margin|padding|left|right|width|text|word|letter/i.test(g)||/X$/.test(g)||"x"===g?"x":"y";switch(q){case"%":A*="x"===D?o.percentToPxWidth:o.percentToPxHeight;break;case"px":break;default:A*=o[q+"ToPx"]}switch(O){case"%":A*=1/("x"===D?o.percentToPxWidth:o.percentToPxHeight);break;case"px":break;default:A*=1/o[O+"ToPx"]}}switch(z){case"+":P=A+P;break;case"-":P=A-P;break;case"*":P*=A;break;case"/":P=A/P}v[g]={rootPropertyValue:x,startValue:A,currentValue:A,endValue:P,unitType:O,easing:F},c&&(v[g].pattern=c),w.debug&&console.log("tweensContainer ("+g+"): "+JSON.stringify(v[g]),e)}else w.debug&&console.log("Skipping ["+u+"] due to a lack of browser support.")};for(var J in x)if(x.hasOwnProperty(J)){var Q=H.Names.camelCase(J),I=Z(x[J]);if(u(H.Lists.colors,Q)){var T=I[0],B=I[1],n=I[2];if(H.RegEx.isHex.test(T)){for(var G=["Red","Green","Blue"],D=H.Values.hexToRgb(T),R=n?H.Values.hexToRgb(n):f,U=0;U=h?function(i,s){for(var g=0;g0?g=h:s=h}while(Math.abs(o)>r&&++u1e4&&(w.State.calls=function(e){for(var i=-1,s=e?e.length:0,f=[];++ie.frames.length-1&&e.continuationLoop&&(e.frameCounter=0))},e.autoPlay&&a()}),this.autoPlay&&Object.entries(o).map(function(n){var o=r(n,2),a=o[0],i=o[1];Array.prototype.forEach.call(e.$el.children,function(n){return(0,t.default)(n,{__:0},{duration:0,complete:function(){return n.style[a]=i}})})})}};exports.default=c; 7 | (function(){var t=exports.default||module.exports;"function"==typeof t&&(t=t.options),Object.assign(t,{render:function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"animated-d"},[this._t("default")],2)},staticRenderFns:[],_compiled:!0,_scopeId:"data-v-920133",functional:void 0});})(); 8 | },{"velocity-animate":"YLL3"}],"cwfG":[function(require,module,exports) { 9 | "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e={props:{properties:[Object,String],delay:Number,duration:Number,loop:[Number,Boolean],easing:{type:String,default:"easeInSine"},completed:Object},render:function(e){return e()}};exports.default=e; 10 | (function(){var o=exports.default||module.exports;"function"==typeof o&&(o=o.options);})(); 11 | },{}],"m/oE":[function(require,module,exports) { 12 | "use strict";var e=i(require("./animated.vue")),a=i(require("./animation.vue"));function i(e){return e&&e.__esModule?e:{default:e}}window.animated=e.default,window.animation=a.default; 13 | },{"./animated.vue":"SjHp","./animation.vue":"cwfG"}]},{},["m/oE"], null) -------------------------------------------------------------------------------- /docs/down.5e2b361d.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Declarative Animations 7 | 8 | 9 | 10 | 11 | 12 | Fork me on GitHub 13 |
14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /docs/vue_logo.2508b6c5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BrianRosamilia/vue-declarative-animation/1b6334dc9af0832cdf2cbfc9cdba6cae4cd58098/docs/vue_logo.2508b6c5.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import animated from './src/animated.vue'; 2 | import animation from './src/animation.vue'; 3 | 4 | export { animated, animation }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-declarative-animation", 3 | "version": "0.1.4", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "quality": "eslint public2/ --ext .js,.vue --fix", 8 | "watch": "parcel watch ./src/docs/index.html --public-url . --out-dir ./docs", 9 | "buildExample": "rm -rf docs&&cross-env NODE_ENV=development&& parcel build ./src/docs/index.html --no-minify --public-url ./ --out-dir ./docs", 10 | "dist": "cross-env NODE_ENV=production && parcel build ./src/browserBuild.js --out-file ./dist/index.js --no-source-maps", 11 | "build": "npm-run-all buildExample dist" 12 | }, 13 | "keywords": [ 14 | "vue", 15 | "vue animations", 16 | "vue velocity" 17 | ], 18 | "repository": "https://github.com/BrianRosamilia/vue-declarative-animation", 19 | "author": "Brian Rosamilia", 20 | "license": "MIT", 21 | "dependencies": { 22 | "velocity-animate": "^1.5.2", 23 | "vue": "^2.5.22" 24 | }, 25 | "devDependencies": { 26 | "@vue/component-compiler-utils": "^2.3.1", 27 | "babel-core": "^6.26.3", 28 | "babel-eslint": "^10.0.1", 29 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 30 | "cross-env": "^5.2.0", 31 | "eslint": "^4.10.0", 32 | "eslint-plugin-vue": "^4.7.1", 33 | "express": "^4.15.3", 34 | "npm-run-all": "^4.1.5", 35 | "parcel-bundler": "^1.11.0", 36 | "prismjs": "^1.15.0", 37 | "sass": "^1.16.0", 38 | "vue-hot-reload-api": "^2.3.1", 39 | "vue-prism-editor": "^0.1.2", 40 | "vue-router": "^3.0.2", 41 | "vue-template-compiler": "^2.5.22" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # vue-declarative-animation 2 | 3 | A declarative Vue template wrapper around [Velocity.js](http://velocityjs.org/) 4 | 5 | [Examples here](https://brianrosamilia.github.io/vue-declarative-animation) 6 | 7 | ## Installation 8 | 9 | `npm install vue-declarative-animation` 10 | 11 | `import { animated, animation } from 'vue-declarative-animation';` 12 | 13 | In your Vue component: 14 | 15 | ``` 16 | components: { 17 | animated, 18 | animation 19 | } 20 | ``` -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | //Test Server included for hot reloading 2 | const express = require('express'); 3 | const app = express(); 4 | 5 | app.use(express.static('docs')); 6 | 7 | module.exports = app.listen(3000, function(e){ 8 | if(e !== undefined){ 9 | console.error(e); 10 | } 11 | console.log('App listening on port 3000!'); 12 | }); -------------------------------------------------------------------------------- /src/animated.vue: -------------------------------------------------------------------------------- 1 | 6 | 93 | -------------------------------------------------------------------------------- /src/animation.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/browserBuild.js: -------------------------------------------------------------------------------- 1 | import animated from './animated.vue'; 2 | import animation from './animation.vue'; 3 | 4 | window.animated = animated; 5 | window.animation = animation; -------------------------------------------------------------------------------- /src/docs/images/down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/docs/images/vue_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/BrianRosamilia/vue-declarative-animation/1b6334dc9af0832cdf2cbfc9cdba6cae4cd58098/src/docs/images/vue_logo.png -------------------------------------------------------------------------------- /src/docs/images/vue_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | image/svg+xml -------------------------------------------------------------------------------- /src/docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Declarative Animations 7 | 8 | 9 | 10 | 11 | 12 | Fork me on GitHub 13 |
14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/docs/sandbox/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | test.html 3 | css/dev-helper.css 4 | .sass-cache/ 5 | node_modules/ 6 | _site/ 7 | style-guide.html 8 | css/ -------------------------------------------------------------------------------- /src/docs/sandbox/.npmignore: -------------------------------------------------------------------------------- 1 | _includes/ 2 | _site/ 3 | css/ 4 | docs/ 5 | index.html 6 | node_modules/ 7 | style-guide.html 8 | test.html -------------------------------------------------------------------------------- /src/docs/sandbox/LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Daniel Cross 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. -------------------------------------------------------------------------------- /src/docs/sandbox/README.md: -------------------------------------------------------------------------------- 1 | # Sandbox 2 | Sandbox is an open source CSS framework. 3 | 4 | ## Installation 5 | ``` 6 | npm install sandbox-css 7 | ``` 8 | 9 | ## Description 10 | Sandbox is a CSS only framework written in SASS, which complies to a single CSS file. 11 | 12 | Sandbox is completely JavaScript free, leaving users the freedeom to implement their own JS if need be. 13 | 14 | ## Usage 15 | Sandbox can be used as is, by inlcuding the `sandbox-min.css` file found in the the `node_modules/sandbox-css/dist/` drectory and linking to it in your `html` file. 16 | 17 | The other (intended) way to use Sandbox is by customzing the variables, or editing the code as you see fit, and running your own build. 18 | 19 | ## Customization 20 | After installing the package, go to `node_modules/sandbox-css` and run: 21 | 22 | ``` 23 | npm install 24 | ``` 25 | 26 | to install the dependencies used to create builds of the framework. 27 | 28 | ## Build 29 | After making your changes to the `src/`, run a build with: 30 | 31 | ``` 32 | npm run build 33 | ``` 34 | 35 | while inside of the `sandbox-css` directory. The SASS will compile and output your new `sandbox-min.css` to the `dist/` directory. 36 | 37 | ## Compatibility 38 | Sandbox uses Autoprefixer to take care of vendor specific prefixes, so there's no need to write them yourself. 39 | 40 | ## Documentation 41 | [The docs](https://dlcnine.github.io/sandbox/) are currently under construction, but feel free to check them out as they progress. -------------------------------------------------------------------------------- /src/docs/sandbox/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/docs/sandbox/_includes/navbar.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | Sandbox 4 | Get Started 5 | Docs 6 |
7 |
8 |
9 | 12 |
13 |
14 | 17 | {% include top-menu.html %} 18 |
19 |
20 |
-------------------------------------------------------------------------------- /src/docs/sandbox/_includes/script.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/docs/sandbox/_includes/side-menu.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/docs/sandbox/_includes/tabs-menu.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/docs/sandbox/_includes/top-menu.html: -------------------------------------------------------------------------------- 1 |
2 | {% include tabs-menu.html %} 3 |
-------------------------------------------------------------------------------- /src/docs/sandbox/dist/sandbox-min.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/base/reset.scss","../src/base/_colors.scss","../src/base/headings.scss","../src/base/a.scss","../src/base/ul-ol.scss","../src/base/table.scss","../src/layout/grid.scss","../src/base/_global-variables.scss","../src/base/_mixins.scss","../src/layout/position-presets.scss","../src/layout/flexbox.scss","../src/buttons/button.scss","../src/buttons/button-outlined.scss","../src/buttons/buttons.scss","../src/forms/controls.scss","../src/forms/field.scss","../src/forms/addons.scss","../src/forms/icons.scss","../src/components/modal.scss","../src/components/card.scss","../src/components/tabs.scss","../src/components/close.scss","../src/components/square.scss","../src/components/progress.scss","../src/components/list-items.scss","../src/components/dropdown.scss","../src/components/pagination.scss","../src/components/navbar.scss","../src/components/popover.scss","../src/components/code.scss","../src/components/loading.scss","../src/components/steps.scss","../src/utilities/font-size.scss","../src/utilities/spacing.scss","../src/utilities/border.scss","../src/utilities/display.scss","../src/utilities/position.scss","../src/utilities/float.scss","../src/utilities/z-index.scss","../src/utilities/overflow.scss","../src/utilities/width.scss","../src/utilities/height.scss","../src/utilities/text.scss","../src/utilities/img.scss","../src/utilities/zeroing.scss","../src/themes/themes.scss"],"names":[],"mappings":"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BACA,OACA,QAAA,CAEA,sBACE,QACA,YAAA,CAGF,iBACE,YACA,WAAA,CAGF,kBACE,aACA,WACA,KAAA,CAGF,mBACE,UACA,KAAA,CAIF,yBACE,cACA,gBACA,aAAA,CAGF,0BACE,cACA,oBAAA,CAEA,gEACE,aACA,qCxB5DO,CwBiEX,4BACE,8BAAA,CAIA,yDACE,WAAA,CClFN,YACI,gBAAA,CAGA,kBACI,qBACA,oBACA,oBzBEY,CAAA,4ByBCR,2BACA,azBOI,CyBJR,sCACI,WACA,mBAAA,CAIA,oIACI,oBzBbF,CyBkBN,0BACI,qBACA,cACA,cACA,oBAAA,CAEA,gCACI,YAAA,CClChB,QACE,iBACA,cACA,wB1BTa,C0BWb,kBACE,eACA,WACA,MACA,OACA,UAAA,CAIF,qBACE,qBACA,aACA,mBApBwB,CAsBxB,+BACE,qC1BRO,C0BYX,sBACE,cACA,oBAAA,CAEA,4BACE,YAAA,CAGF,wDACE,qC1BrBO,C2BXb,SACI,iBACA,kBACA,WACA,aACA,gBACA,oBACA,2BACA,sBACA,mBACA,SACA,YACA,sCAAA,6BAAA,CAEA,mBACI,cAAA,CAGJ,iBACI,aACA,WACA,wCAAA,+BAAA,CAGJ,kBACI,UACA,WACA,0BACA,AADA,kBACA,qCAAA,4BAAA,CC5BR,eACE,sBACA,qBACA,yBACA,mBATmB,CAarB,MACE,iBACA,iBACA,gBACA,WAhBa,CAoBf,SACE,qBACA,aArBgB,CCElB,8BACE,GACE,+BAAA,sBAAA,CAGF,KACE,iCAAA,wBAAA,CAAA,CAKJ,AAXA,sBACE,GACE,+BAAA,sBAAA,CAGF,KACE,iCAAA,wBAAA,CAAA,CAKJ,SACE,qBACA,kBACA,UACA,WACA,qBACA,0BAAA,CAEA,YACE,UACA,UAzBc,CA4BhB,YACE,UACA,UA7Bc,CAgChB,YACE,UACA,UAjCc,CAoChB,2BACE,oCAAA,2BAAA,CAGF,6BACE,2BAAA,CAGF,iBACE,kBACA,OACA,MACA,WACA,mBACA,mBACA,qBACA,oBACA,+BACA,gCACA,cACA,eACA,8DAAA,qDAAA,CCxDJ,OACI,g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","file":"sandbox-min.css"} -------------------------------------------------------------------------------- /src/docs/sandbox/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sandbox-css", 3 | "version": "0.3.0", 4 | "description": "A responsive, scalable, and easy to use CSS framework.", 5 | "main": "src/sandbox.scss", 6 | "scripts": { 7 | "build-compressed": "node node_modules/sass/sass.js src/sandbox.scss dist/sandbox-min.css --style compressed", 8 | "build-autoprefix": "node_modules/.bin/postcss dist/sandbox-min.css --use autoprefixer --map true --output dist/sandbox-min.css", 9 | "build": "npm run build-compressed && npm run build-autoprefix", 10 | "open-root": "open -a 'Sublime Text' package.json src/sandbox.scss", 11 | "open-base": "open -a 'Sublime Text' src/base/*.scss", 12 | "open-layout": "open -a 'Sublime Text' src/layout/*.scss", 13 | "open-buttons": "open -a 'Sublime Text' src/buttons/*.scss", 14 | "open-forms": "open -a 'Sublime Text' src/forms/*.scss", 15 | "open-components": "open -a 'Sublime Text' src/components/*.scss", 16 | "open-utilities": "open -a 'Sublime Text' src/utilities/*.scss", 17 | "open-themes": "open -a 'Sublime Text' src/themes/*.scss", 18 | "open-sandbox": "npm run open-root && npm run open-base && npm run open-layout && npm run open-buttons && npm run open-forms && npm run open-components && npm run open-utilities && npm run open-themes" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/dlcNine/sandbox.git" 23 | }, 24 | "keywords": [ 25 | "sandbox", 26 | "css", 27 | "framework", 28 | "responsive", 29 | "scalable" 30 | ], 31 | "author": "Dan Cross", 32 | "license": "MIT", 33 | "bugs": { 34 | "url": "https://github.com/dlcNine/sandbox/issues" 35 | }, 36 | "homepage": "https://github.com/dlcNine/sandbox#readme", 37 | "devDependencies": { 38 | "autoprefixer": "^7.2.3", 39 | "postcss": "^6.0.14", 40 | "postcss-cli": "^4.1.1", 41 | "sass": "^1.14.3" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/base/_breakpoint-values.scss: -------------------------------------------------------------------------------- 1 | $sm-and-below: 48rem; // 768px 2 | 3 | $md-lower: 48.0625rem; // 769px 4 | $md-upper: 64rem; // 1024px 5 | 6 | $lg-and-above: 64.0625rem; // 1025px -------------------------------------------------------------------------------- /src/docs/sandbox/src/base/_colors.scss: -------------------------------------------------------------------------------- 1 | // whites 2 | $white: rgb(255, 255, 255); 3 | $light-white: rgb(243, 243, 243); 4 | $medium-white: rgb(230, 230, 230); 5 | $dark-white: rgb(215, 215, 215); 6 | 7 | // grays 8 | $white-gray: rgb(249, 249, 249); 9 | $light-gray: rgb(216, 216, 216); 10 | $medium-gray: rgb(201, 201, 201); 11 | $dark-gray: rgb(147, 147, 147); 12 | 13 | // blacks 14 | $light-black: rgb(99, 99, 99); 15 | $medium-black: rgb(76, 76, 76); 16 | $black: rgb(52, 52, 52); 17 | 18 | // alpha colors 19 | $alpha-black: rgba(0, 0, 0, 0.8); 20 | $alpha-light-black: rgba(0, 0, 0, 0.3); 21 | 22 | $alpha-gray: rgba(160, 160, 160, 0.2); 23 | $alpha-light-gray: rgba(160, 160, 160, 0.1); 24 | 25 | $alpha-white: rgba(255, 255, 255, 0.9); 26 | $alpha-dark-white: rgba(255, 255, 255, 0.65); 27 | 28 | // primary 29 | $light-primary: rgb(84, 171, 247); 30 | $medium-primary: rgb(62, 157, 239); 31 | $dark-primary: rgb(40, 126, 201); 32 | 33 | // info 34 | $light-info: rgb(98, 214, 72); 35 | $medium-info: rgb(84, 196, 58); 36 | $dark-info: rgb(63, 150, 42); 37 | 38 | // caution 39 | $light-caution: rgb(244, 244, 73); 40 | $medium-caution: rgb(232, 232, 25); 41 | $dark-caution: rgb(111, 111, 16); 42 | 43 | // danger 44 | $light-danger: rgb(242, 85, 65); 45 | $medium-danger: rgb(229, 60, 39); 46 | $dark-danger: rgb(198, 44, 23); 47 | 48 | // alpha themes 49 | $alpha-theme-value: 0.5; 50 | $alpha-light-primary: rgba(84, 171, 247, $alpha-theme-value); 51 | $alpha-light-info: rgba(98, 214, 72, $alpha-theme-value); 52 | $alpha-light-caution: rgba(244, 244, 73, $alpha-theme-value); 53 | $alpha-light-danger: rgba(242, 85, 65, $alpha-theme-value); 54 | 55 | // link colors 56 | $link-unvisited: cornflowerblue; 57 | $link-visited: mediumpurple; 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/base/_global-variables.scss: -------------------------------------------------------------------------------- 1 | @import "./colors.scss"; 2 | 3 | $FONT_STACK: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; 4 | $FONT_COLOR: $alpha-black; 5 | $BODY_BACKGROUND_COLOR: rgb(250, 250, 250); 6 | 7 | $BORDER_COLOR: $medium-white; 8 | $BORDER_ACTIVE_COLOR: $dark-white; 9 | 10 | $GRID_SYSTEM: 12; 11 | $UNIT_SPACING: 1.2rem; 12 | $SPACING_LEVELS: 4; 13 | 14 | $RADIUS_ROUND: 200em; 15 | $BUTTON_BORDER_RADIUS: 0.1875em; 16 | 17 | $CONTROL_HEIGHT: 2.25em; 18 | $CONTROL_SHADOW_SPREAD: 0.1875em; 19 | 20 | $DISABLED_OPACITY: 0.5; -------------------------------------------------------------------------------- /src/docs/sandbox/src/base/_mixins.scss: -------------------------------------------------------------------------------- 1 | @import "./global-variables.scss"; 2 | 3 | @mixin clearfix() { 4 | content: ''; 5 | clear: both; 6 | display: block; 7 | } 8 | 9 | @mixin tight-cancel($spacing) { 10 | margin: -1 * $spacing; 11 | 12 | div[class*="unit-"] { 13 | padding: $spacing; 14 | } 15 | } 16 | 17 | @mixin tight-responsive($spacing) { 18 | margin: -0.5 * $spacing; 19 | 20 | div[class*="unit-"] { 21 | padding: 0.5 * $spacing; 22 | } 23 | } 24 | 25 | @mixin border-background-color($color) { 26 | border-color: $color; 27 | background-color: $color; 28 | } 29 | 30 | @mixin button-default($light-color, $dark-color, $shadow-color) { 31 | &:hover { 32 | @include border-background-color($light-color); 33 | } 34 | 35 | &:active { 36 | @include border-background-color($dark-color); 37 | } 38 | 39 | &:focus:not([disabled]) { 40 | box-shadow: 0 0 0 $CONTROL_SHADOW_SPREAD $shadow-color; 41 | } 42 | } 43 | 44 | @mixin button-outlined($text-color, $hover-text-color) { 45 | color: $text-color; 46 | 47 | &:hover { 48 | color: $hover-text-color; 49 | } 50 | } 51 | 52 | @mixin field-theme($light-color, $medium-color, $box-shadow-color) { 53 | background-color: inherit; 54 | color: $FONT_COLOR; 55 | 56 | input.textbox, select.textbox, textarea.textbox { 57 | border-color: $light-color; 58 | 59 | &:focus { 60 | box-shadow: 0 0 0 $CONTROL_SHADOW_SPREAD $box-shadow-color; 61 | } 62 | } 63 | 64 | p.help { 65 | color: $medium-color; 66 | } 67 | } 68 | 69 | @mixin child-radius-rules() { 70 | &:first-child { 71 | border-top-right-radius: 0; 72 | border-bottom-right-radius: 0; 73 | } 74 | 75 | &:not(:first-child):not(:last-child) { 76 | border-radius: 0; 77 | } 78 | 79 | &:last-child { 80 | border-top-left-radius: 0; 81 | border-bottom-left-radius: 0; 82 | } 83 | } 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/base/a.scss: -------------------------------------------------------------------------------- 1 | @import "./colors.scss"; 2 | 3 | .a { 4 | cursor: pointer; 5 | text-decoration: none; 6 | color: $link-unvisited; 7 | 8 | &:hover, &:focus { 9 | outline: none; 10 | text-decoration: underline; 11 | } 12 | 13 | &:visited { 14 | color: $link-visited; 15 | } 16 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/base/headings.scss: -------------------------------------------------------------------------------- 1 | @import "./colors.scss"; 2 | 3 | // scale: 1.3333 4 | 5 | h1 { 6 | font-size: 3.8rem; 7 | } 8 | 9 | h2 { 10 | font-size: 2.8rem; 11 | } 12 | 13 | h3 { 14 | font-size: 2.1rem; 15 | } 16 | 17 | h4, p { 18 | font-size: 1.6rem; 19 | } 20 | 21 | h5 { 22 | font-size: 1.2rem; 23 | } 24 | 25 | h6, small { 26 | font-size: 0.9rem; 27 | } 28 | 29 | h1, h2, h3, h4, p, h5, h6, small { 30 | line-height: 1.5; 31 | } 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/base/reset.scss: -------------------------------------------------------------------------------- 1 | @import "./colors.scss"; 2 | @import "./global-variables.scss"; 3 | 4 | a, abbr, address, area, article, aside, audio, b, 5 | base, bdi, bdo, blockquote, body, br, button, 6 | canvas, caption, cite, code, col, colgroup, datalist, 7 | dd, del, details, dfn, dialog, div, dl, dt, em, 8 | embed, fieldset, figcaption, figure, footer, form, 9 | h1, h2, h3, h4, h5, h6, header, hr, html, i, iframe, 10 | img, input, ins, kbd, label, legend, li, main, map, 11 | mark, menu, menuitem, meter, nav, noscript, object, ol, 12 | optgroup, option, output, p, param, picture, pre, progress, 13 | q, rp, rt, ruby, s, samp, section, select, small, span, 14 | strong, sub, summary, sup, table, tbody, td, textarea, 15 | tfoot, th, thead, time, tr, track, u, ul, var, video, wbr { 16 | margin: 0; 17 | padding: 0; 18 | border: 0; 19 | font: inherit; 20 | font-size: 100%; 21 | vertical-align: baseline; 22 | } 23 | 24 | *, ::before, ::after { 25 | box-sizing: border-box; 26 | } 27 | 28 | article, aside, audio, canvas, details, embed, figcaption, figure, 29 | footer, header, main, meter, nav, picture, ruby, section, 30 | summary, video { 31 | display: block; 32 | } 33 | 34 | bdi, datalist, mark, output, progress, rp, rt, time, wbr { 35 | display: inline; 36 | } 37 | 38 | html { 39 | font-size: 62.5%; 40 | } 41 | 42 | body { 43 | line-height: 1; 44 | background-color: $BODY_BACKGROUND_COLOR; 45 | font-family: $FONT_STACK; 46 | color: $FONT_COLOR; 47 | } 48 | 49 | ol, ul { 50 | list-style: none; 51 | } 52 | 53 | blockquote, q { 54 | quotes: none; 55 | } 56 | 57 | blockquote::before, blockquote::after, 58 | q::before, q::after { 59 | content: ''; 60 | content: none; 61 | } 62 | 63 | table { 64 | border-collapse: collapse; 65 | border-spacing: 0; 66 | } 67 | 68 | b, strong { 69 | font-weight: bold; 70 | } 71 | 72 | em { 73 | font-style: italic; 74 | } 75 | 76 | sub { 77 | vertical-align: sub; 78 | } 79 | 80 | sup { 81 | vertical-align: super; 82 | } 83 | 84 | hr { 85 | border-top: 0.1rem solid $BORDER_COLOR; 86 | } 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/base/table.scss: -------------------------------------------------------------------------------- 1 | @import "./colors.scss"; 2 | @import "./global-variables.scss"; 3 | 4 | $table-item-padding: 0.75em; 5 | $table-tight-padding: 0.5em; 6 | $table-tighter-padding: 0.25em; 7 | $table-border-color: $BORDER_COLOR; 8 | $table-row-stripe-color: $alpha-light-gray; 9 | $table-row-hover-color: $alpha-gray; 10 | 11 | .table { 12 | font-size: 1.6rem; 13 | width: 100%; 14 | text-align: left; 15 | background-color: $white; 16 | 17 | th, td { 18 | padding: $table-item-padding; 19 | vertical-align: middle; 20 | } 21 | 22 | th { 23 | font-weight: bold; 24 | } 25 | 26 | &.tight th, &.tight td { 27 | padding: $table-tight-padding; 28 | } 29 | 30 | &.tighter th, &.tighter td { 31 | padding: $table-tighter-padding; 32 | } 33 | 34 | &.border-all th, &.border-all td, 35 | .border-all th, .border-all td { 36 | border: 0.1rem solid $table-border-color; 37 | } 38 | 39 | &.border-bottoms tr, .border-bottoms tr { 40 | border-bottom: 0.1rem solid $table-border-color; 41 | } 42 | 43 | &.striped-odd tr:nth-child(odd), &.striped-even tr:nth-child(even), 44 | .striped-odd tr:nth-child(odd), .striped-even tr:nth-child(even) { 45 | background-color: $table-row-stripe-color; 46 | } 47 | 48 | &.row-hover tr:hover, .row-hover tr:hover { 49 | background-color: $table-row-hover-color; 50 | } 51 | } 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/base/ul-ol.scss: -------------------------------------------------------------------------------- 1 | $ul-ol-indentation: 0.875em; 2 | $ul-ol-li-padding: 0.25em; 3 | $ul-ol-li-padding-tight: 0.125em; 4 | 5 | .ul, .ol { 6 | font-size: 1.6rem; 7 | list-style-position: inside; 8 | 9 | li { 10 | padding: $ul-ol-li-padding; 11 | } 12 | 13 | &.tight li { 14 | padding: $ul-ol-li-padding-tight; 15 | } 16 | 17 | &.p-0 li { 18 | padding: 0rem; 19 | } 20 | 21 | } 22 | 23 | .ul { 24 | &.square { 25 | list-style-type: square; 26 | } 27 | 28 | &.disc { 29 | list-style-type: disc; 30 | } 31 | 32 | &.circle { 33 | list-style-type: circle; 34 | } 35 | } 36 | 37 | .ol { 38 | &.decimal { 39 | list-style-type: decimal; 40 | } 41 | 42 | &.lower-alpha { 43 | list-style-type: lower-alpha; 44 | } 45 | 46 | &.upper-alpha { 47 | list-style-type: upper-alpha; 48 | } 49 | 50 | &.lower-roman { 51 | list-style-type: lower-roman; 52 | } 53 | 54 | &.upper-roman { 55 | list-style-type: upper-roman; 56 | } 57 | } 58 | 59 | .ul .ul, .ul .ol, 60 | .ol .ol, .ol .ul { 61 | font-size: inherit; 62 | margin-left: $ul-ol-indentation; 63 | } 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/buttons/button-outlined.scss: -------------------------------------------------------------------------------- 1 | @import "../base/mixins.scss"; 2 | @import "../base/colors.scss"; 3 | 4 | .button.outlined { 5 | background-color: transparent; 6 | @include button-outlined($dark-gray, $alpha-black); 7 | 8 | &.primary { 9 | @include button-outlined($medium-primary, $alpha-white); 10 | } 11 | 12 | &.info { 13 | @include button-outlined($medium-info, $alpha-white); 14 | } 15 | 16 | &.caution { 17 | @include button-outlined($medium-caution, $alpha-black); 18 | } 19 | 20 | &.danger { 21 | @include button-outlined($medium-danger, $alpha-white); 22 | } 23 | 24 | &.light { 25 | @include button-outlined($alpha-black, $alpha-black); 26 | } 27 | 28 | &.dark { 29 | @include button-outlined($medium-black, $alpha-white); 30 | } 31 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/buttons/button.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | @import "../base/mixins.scss"; 3 | @import "../base/global-variables"; 4 | 5 | $button-padding: 0.375em 0.75em; 6 | $button-border-width: 0.0625em; 7 | $button-color: $alpha-black; 8 | $button-border-radius: $BUTTON_BORDER_RADIUS; 9 | $button-default-build-color: $medium-gray; 10 | 11 | .button, .button.outlined { 12 | @include button-default($light-gray, $dark-gray, $alpha-light-primary); 13 | } 14 | 15 | // button, a, input 16 | .button { 17 | font-size: 1.6rem; 18 | display: inline-block; 19 | text-align: center; 20 | line-height: 1; 21 | padding: $button-padding; 22 | border-width: $button-border-width; 23 | border-style: solid; 24 | border-radius: $button-border-radius; 25 | color: $button-color; 26 | @include border-background-color($button-default-build-color); 27 | transition: all 175ms; 28 | 29 | &:hover { 30 | cursor: pointer; 31 | } 32 | 33 | &:active, &:focus { 34 | outline: none; 35 | } 36 | 37 | &.wide { 38 | display: block; 39 | width: 100%; 40 | } 41 | 42 | &[disabled] { 43 | opacity: $DISABLED_OPACITY; 44 | pointer-events: none; 45 | } 46 | 47 | &:link { 48 | text-decoration: none; 49 | } 50 | 51 | &.primary { 52 | @include button-default($light-primary, $dark-primary, $alpha-light-primary); 53 | } 54 | 55 | &.info { 56 | @include button-default($light-info, $dark-info, $alpha-light-info); 57 | } 58 | 59 | &.caution { 60 | @include button-default($light-caution, $dark-caution, $alpha-light-caution); 61 | } 62 | 63 | &.danger { 64 | @include button-default($light-danger, $dark-danger, $alpha-light-danger); 65 | } 66 | 67 | &.light { 68 | @include button-default($white-gray, $medium-white, $alpha-light-primary); 69 | } 70 | 71 | &.dark { 72 | @include button-default($light-black, $black, $alpha-light-primary); 73 | } 74 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/buttons/buttons.scss: -------------------------------------------------------------------------------- 1 | @import "../base/global-variables.scss"; 2 | @import "../base/mixins.scss"; 3 | 4 | $buttons-button-border-width: 0.0625em; 5 | $buttons-button-round-radius: $RADIUS_ROUND; 6 | 7 | // div 8 | .buttons { 9 | font-size: 1.6rem; 10 | 11 | &::after { 12 | @include clearfix(); 13 | } 14 | 15 | &.flex { 16 | & > .button, & > .reveal-wrapper, & > .reveal-wrapper > .button { 17 | width: 100%; 18 | } 19 | } 20 | 21 | &.r-round > .button, &.r-round > .reveal-wrapper { 22 | &:first-child { 23 | border-top-left-radius: $buttons-button-round-radius; 24 | border-bottom-left-radius: $buttons-button-round-radius; 25 | } 26 | 27 | &:last-child { 28 | border-top-right-radius: $buttons-button-round-radius; 29 | border-bottom-right-radius: $buttons-button-round-radius; 30 | } 31 | } 32 | 33 | &.r-0 > .button, &.r-0 > .reveal-wrapper { 34 | border-radius: 0; 35 | } 36 | 37 | & > .reveal-wrapper { 38 | border-radius: $BUTTON_BORDER_RADIUS; 39 | } 40 | 41 | & > .button, & > .reveal-wrapper, & > .reveal-wrapper > .button { 42 | font-size: inherit; 43 | } 44 | 45 | & > .button, & > .reveal-wrapper { 46 | float: left; 47 | 48 | &:not(:last-child) { 49 | margin-right: -1 * $buttons-button-border-width; 50 | } 51 | 52 | @include child-radius-rules(); 53 | } 54 | 55 | & > .reveal-wrapper > .button { 56 | border-radius: inherit; 57 | } 58 | } 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/card.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | @import "../base/global-variables.scss"; 3 | 4 | $card-border-color: $BORDER_COLOR; 5 | $card-background-color: $white; 6 | $card-radius: 0.4rem; 7 | $card-part-padding: 1.6rem; 8 | $card-part-radius: 0.3rem; 9 | 10 | // div 11 | .card { 12 | font-size: 1.6rem; 13 | border: 0.1rem solid $card-border-color; 14 | border-radius: $card-radius; 15 | background-color: $card-background-color; 16 | 17 | &.r-0 { 18 | .card-header, .card-body, .card-footer { 19 | border-radius: 0; 20 | } 21 | } 22 | 23 | // div 24 | .card-header, .card-body, .card-footer { 25 | padding: $card-part-padding; 26 | 27 | &.image { 28 | padding: 0; 29 | 30 | img { 31 | width: 100%; 32 | display: block; 33 | border-radius: inherit; 34 | } 35 | } 36 | } 37 | 38 | .card-header { 39 | border-radius: $card-part-radius $card-part-radius 0rem 0rem; 40 | } 41 | 42 | .card-footer, .card-body:last-child { 43 | border-radius: 0rem 0rem $card-part-radius $card-part-radius; 44 | } 45 | 46 | .card-body:only-child { 47 | border-radius: $card-part-radius; 48 | } 49 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/close.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | 3 | $close-size: 1em; 4 | $close-radius: 0.125em; 5 | $close-xmark-size: 0.5em; 6 | $close-xmark-border-width: 0.0625em; 7 | 8 | // button 9 | .close { 10 | font-size: 1.6rem; 11 | height: $close-size; 12 | width: $close-size; 13 | border-radius: $close-radius; 14 | position: relative; 15 | background-color: $medium-white; 16 | transition: all 125ms; 17 | 18 | &:hover, &:focus { 19 | background-color: $light-white; 20 | outline: none; 21 | cursor: pointer; 22 | 23 | &::before, &::after { 24 | border-color: $light-black; 25 | } 26 | } 27 | 28 | &:active { 29 | outline: none; 30 | 31 | &::before, &::after { 32 | border-color: $black; 33 | } 34 | } 35 | 36 | &::before, &::after { 37 | content: ''; 38 | border-right: $close-xmark-border-width solid $dark-gray; 39 | height: $close-xmark-size; 40 | position: absolute; 41 | top: 50%; 42 | left: 50%; 43 | transform-origin: 0% 0%; 44 | } 45 | 46 | &::before { 47 | transform: rotate(45deg) translate(-50%, -50%); 48 | } 49 | 50 | &::after { 51 | transform: rotate(135deg) translate(-50%, -50%); 52 | } 53 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/code.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | 3 | $code-color: $alpha-black; 4 | $code-line-height: 1.25; 5 | $code-background-color: $medium-white; 6 | $code-border-radius: 0.25em; 7 | $code-padding: 1em; 8 | $snippet-padding: 0.25em; 9 | 10 | // pre, span 11 | .code, .snippet { 12 | font-family: monospace; 13 | color: $code-color; 14 | background-color: $code-background-color; 15 | border-radius: $code-border-radius; 16 | } 17 | 18 | // pre 19 | .code { 20 | font-size: 1.6rem; 21 | line-height: $code-line-height; 22 | overflow-x: auto; 23 | padding: $code-padding; 24 | } 25 | 26 | // span 27 | .snippet { 28 | display: inline-block; 29 | padding: $snippet-padding; 30 | } 31 | 32 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/dropdown.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | @import "../base/global-variables"; 3 | 4 | $dropdown-background-color: $white; 5 | $dropdown-border-radius: 0.3rem; 6 | $dropdown-border-color: $BORDER_COLOR; 7 | $dropdown-min-width: 16rem; 8 | $dropdown-a-hover-color: $alpha-gray; 9 | $dropdown-item-padding: 0.8rem; 10 | $dropdown-z-index: 25; 11 | 12 | $reveal-transition-speed: 150ms; 13 | 14 | .reveal-wrapper { 15 | display: inline-block; 16 | position: relative; 17 | 18 | .reveal-trigger-focus:focus + .reveal-target, 19 | .reveal-trigger-focus + .reveal-target:hover, 20 | .reveal-trigger-hover:hover + .reveal-target, 21 | .reveal-trigger-hover + .reveal-target:hover, 22 | .reveal-target.is-revealed { 23 | opacity: 1; 24 | pointer-events: auto; 25 | } 26 | 27 | .reveal-target { 28 | opacity: 0; 29 | pointer-events: none; 30 | transition: opacity $reveal-transition-speed; 31 | } 32 | } 33 | 34 | // div 35 | .dropdown { 36 | font-size: 1.6rem; 37 | position: absolute; 38 | z-index: $dropdown-z-index; 39 | min-width: $dropdown-min-width; 40 | background-color: $dropdown-background-color; 41 | border: 0.1rem solid $dropdown-border-color; 42 | border-radius: $dropdown-border-radius; 43 | padding: 0.6rem 0rem; 44 | white-space: nowrap; 45 | left: 0; 46 | top: 100%; 47 | 48 | &.align-right { 49 | right: 0; 50 | left: initial; 51 | } 52 | 53 | &.on-top { 54 | bottom: 100%; 55 | top: initial; 56 | } 57 | 58 | &.on-left { 59 | left: initial; 60 | right: 100%; 61 | top: 0; 62 | } 63 | 64 | &.on-right { 65 | left: 100%; 66 | top: 0; 67 | } 68 | 69 | // div, a 70 | .dropdown-item { 71 | padding: $dropdown-item-padding; 72 | text-align: left; 73 | display: block; 74 | } 75 | 76 | a.dropdown-item { 77 | color: inherit; 78 | text-decoration: none; 79 | 80 | &:hover, &:focus { 81 | outline: none; 82 | background-color: $dropdown-a-hover-color; 83 | } 84 | } 85 | 86 | // div 87 | .dropdown-divider { 88 | border-top: 0.1rem solid $dropdown-border-color; 89 | } 90 | 91 | .dropdown { 92 | &.on-right, &.on-left { 93 | top: -1 * $dropdown-item-padding; 94 | } 95 | } 96 | 97 | } 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/list-items.scss: -------------------------------------------------------------------------------- 1 | @import "../base/global-variables.scss"; 2 | @import "../base/colors.scss"; 3 | 4 | $list-item-border-color: $BORDER_COLOR; 5 | $list-item-padding: 1em; 6 | 7 | // ul 8 | .list-items { 9 | font-size: 1.6rem; 10 | 11 | // li 12 | .list-item:first-child { 13 | padding-bottom: $list-item-padding; 14 | } 15 | 16 | .list-item:not(:first-child):not(:last-child) { 17 | padding: $list-item-padding 0rem; 18 | } 19 | 20 | .list-item:last-child { 21 | padding-top: $list-item-padding; 22 | } 23 | 24 | .list-item:not(:last-child) { 25 | border-bottom: 0.1rem solid $list-item-border-color; 26 | } 27 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/loading.scss: -------------------------------------------------------------------------------- 1 | @import "../base/global-variables.scss"; 2 | @import "../base/colors.scss"; 3 | 4 | $loading-border-color: $medium-gray; 5 | $loading-size: 1em; 6 | $loading-size-x2: 2em; 7 | $loading-size-x3: 3em; 8 | $loading-size-x4: 4em; 9 | 10 | @keyframes revolution { 11 | 0% { 12 | transform: rotate(0deg); 13 | } 14 | 15 | 100% { 16 | transform: rotate(360deg); 17 | } 18 | } 19 | 20 | // span 21 | .loading { 22 | display: inline-block; 23 | position: relative; 24 | width: $loading-size; 25 | height: $loading-size; 26 | border-color: $loading-border-color; 27 | vertical-align: text-bottom; 28 | 29 | &.x2 { 30 | width: $loading-size-x2; 31 | height: $loading-size-x2; 32 | } 33 | 34 | &.x3 { 35 | width: $loading-size-x3; 36 | height: $loading-size-x3; 37 | } 38 | 39 | &.x4 { 40 | width: $loading-size-x4; 41 | height: $loading-size-x4; 42 | } 43 | 44 | &.is-paused::before { 45 | animation-play-state: paused; 46 | } 47 | 48 | &.is-reversed::before { 49 | animation-direction: reverse; 50 | } 51 | 52 | &::before { 53 | position: absolute; 54 | left: 0; 55 | top: 0; 56 | content: ''; 57 | border-width: 0.1rem; 58 | border-style: solid; 59 | border-color: inherit; 60 | border-radius: $RADIUS_ROUND; 61 | border-right-color: transparent; 62 | border-bottom-color: transparent; 63 | width: inherit; 64 | height: inherit; 65 | animation: revolution 650ms linear 0ms infinite normal; 66 | } 67 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/modal.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | 3 | $overlay-background-color: $alpha-light-black; 4 | $modal-padding: 1.25em; 5 | $modal-border-radius: 0.25em; 6 | $modal-background-color: $white; 7 | 8 | // div 9 | .overlay { 10 | position: fixed; 11 | z-index: 55; 12 | top: 0; 13 | left: 0; 14 | height: 100.1%; 15 | width: 100%; 16 | overflow-y: auto; 17 | background-color: $overlay-background-color; 18 | } 19 | 20 | // div 21 | .modal { 22 | font-size: 1.6rem; 23 | padding: $modal-padding; 24 | border-radius: $modal-border-radius; 25 | background-color: $modal-background-color; 26 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/navbar.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | @import "../base/mixins.scss"; 3 | 4 | $navbar-background-color: $medium-white; 5 | $navbar-padding: 0.25em; 6 | $navbar-item-padding: 0.5em; 7 | $navbar-item-border-radius: 0.25em; 8 | 9 | // nav, div 10 | .navbar { 11 | font-size: 1.6rem; 12 | padding: $navbar-padding; 13 | background-color: $navbar-background-color; 14 | 15 | &.fixed-top { 16 | position: fixed; 17 | z-index: 25; 18 | top: 0; 19 | left: 0; 20 | width: 100%; 21 | } 22 | 23 | // div, a 24 | .navbar-item { 25 | display: inline-block; 26 | padding: $navbar-item-padding; 27 | border-radius: $navbar-item-border-radius; 28 | 29 | &.is-active { 30 | background-color: $alpha-gray; 31 | } 32 | } 33 | 34 | a.navbar-item { 35 | color: inherit; 36 | text-decoration: none; 37 | 38 | &:focus { 39 | outline: none; 40 | } 41 | 42 | &:hover, &.focus { 43 | background-color: $alpha-gray; 44 | } 45 | } 46 | 47 | } 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/pagination.scss: -------------------------------------------------------------------------------- 1 | @import "../base/global-variables"; 2 | @import "../base/colors.scss"; 3 | 4 | $pagination-color: $alpha-light-black; 5 | $pagination-active-color: $light-primary; 6 | $pagination-hover-color: $alpha-black; 7 | $pagination-page-border-radius: 0.25em; 8 | $pagination-page-a-padding: 0.25em; 9 | 10 | // ul 11 | .pagination { 12 | font-size: 1.6rem; 13 | 14 | // li 15 | .page { 16 | display: inline-block; 17 | border-radius: $pagination-page-border-radius; 18 | color: $pagination-color; 19 | 20 | &.is-active { 21 | border: 0.1rem solid $pagination-active-color; 22 | color: $pagination-active-color; 23 | } 24 | 25 | &.is-disabled .page-a { 26 | opacity: $DISABLED_OPACITY; 27 | pointer-events: none; 28 | } 29 | 30 | &:not(.is-disabled):not(.is-active) .page-a { 31 | &:hover, &:focus { 32 | color: $pagination-hover-color; 33 | } 34 | } 35 | 36 | // a 37 | .page-a { 38 | display: inline-block; 39 | padding: $pagination-page-a-padding; 40 | color: inherit; 41 | text-decoration: none; 42 | 43 | &:focus { 44 | outline: none; 45 | } 46 | } 47 | } 48 | 49 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/popover.scss: -------------------------------------------------------------------------------- 1 | @import "../base/global-variables.scss"; 2 | @import "../base/colors.scss"; 3 | 4 | $popover-padding: 1rem; 5 | $popover-min-width: 10rem; 6 | $popover-border-color: $BORDER_COLOR; 7 | $popover-background-color: $white; 8 | $popover-border-radius: 0.25em; 9 | 10 | // div 11 | .popover { 12 | font-size: 1.6rem; 13 | position: absolute; 14 | z-index: 25; 15 | padding: $popover-padding; 16 | min-width: $popover-min-width; 17 | border-radius: $popover-border-radius; 18 | border: 0.1rem solid $popover-border-color; 19 | background-color: $popover-background-color; 20 | white-space: nowrap; 21 | left: 50%; 22 | bottom: 100%; 23 | transform: translate(-50%, 0%); 24 | 25 | &.on-bottom { 26 | bottom: initial; 27 | } 28 | 29 | &.on-left { 30 | left: initial; 31 | bottom: 50%; 32 | transform: translate(-100%, 50%); 33 | } 34 | 35 | &.on-right { 36 | left: 100%; 37 | bottom: 50%; 38 | transform: initial; 39 | transform: translate(0%, 50%); 40 | } 41 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/progress.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | @import "../base/mixins.scss"; 3 | 4 | $progress-height: 1em; 5 | $progress-radius: 0.125em; 6 | $progress-background-color: $light-gray; 7 | $progress-bar-background-color: $dark-gray; 8 | 9 | // div 10 | .progress { 11 | font-size: 1.6rem; 12 | height: $progress-height; 13 | background-color: $progress-background-color; 14 | border-radius: $progress-radius; 15 | overflow: hidden; 16 | 17 | &::after { 18 | @include clearfix(); 19 | } 20 | } 21 | 22 | // div 23 | .progress-bar { 24 | float: left; 25 | height: 100%; 26 | min-width: 0%; 27 | max-width: 100%; 28 | text-align: center; 29 | background-color: $progress-bar-background-color; 30 | transition: width 200ms; 31 | } 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/square.scss: -------------------------------------------------------------------------------- 1 | $square-size: 1em; 2 | $square-size-x2: 2em; 3 | $square-size-x3: 3em; 4 | $square-size-x4: 4em; 5 | $square-border-radius: 0.125em; 6 | 7 | figure.square { 8 | font-size: 1.6rem; 9 | display: inline-block; 10 | height: $square-size; 11 | width: $square-size; 12 | border-radius: $square-border-radius; 13 | 14 | &.text { 15 | text-align: center; 16 | line-height: $square-size; 17 | } 18 | 19 | &.x2 { 20 | height: $square-size-x2; 21 | width: $square-size-x2; 22 | 23 | &.text { 24 | line-height: $square-size-x2; 25 | } 26 | } 27 | 28 | &.x3 { 29 | height: $square-size-x3; 30 | width: $square-size-x3; 31 | 32 | &.text { 33 | line-height: $square-size-x3; 34 | } 35 | } 36 | 37 | &.x4 { 38 | height: $square-size-x4; 39 | width: $square-size-x4; 40 | 41 | &.text { 42 | line-height: $square-size-x4; 43 | } 44 | } 45 | 46 | img { 47 | height: 100%; 48 | width: 100%; 49 | border-radius: inherit; 50 | object-fit: cover; 51 | } 52 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/steps.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | 3 | $steps-color: $alpha-light-black; 4 | $steps-hover-color: $alpha-black; 5 | $steps-last-child-color: $light-primary; 6 | $steps-separator-x-spacing: 0.25em; 7 | 8 | // ul 9 | .steps { 10 | font-size: 1.6rem; 11 | 12 | // li 13 | .step { 14 | display: inline-block; 15 | color: $steps-color; 16 | 17 | &:last-child { 18 | color: $steps-last-child-color; 19 | } 20 | 21 | // a 22 | .step-a { 23 | text-decoration: none; 24 | color: inherit; 25 | 26 | &:focus { 27 | outline: none; 28 | } 29 | } 30 | 31 | &:not(:last-child) .step-a { 32 | &:hover, &:focus { 33 | color: $steps-hover-color; 34 | } 35 | } 36 | 37 | &:not(:last-child)::after { 38 | content: '/'; 39 | margin: 0rem $steps-separator-x-spacing; 40 | } 41 | } 42 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/components/tabs.scss: -------------------------------------------------------------------------------- 1 | @import "../base/global-variables.scss"; 2 | @import "../base/mixins.scss"; 3 | @import "../base/colors.scss"; 4 | 5 | $tab-a-x-padding: 1em; 6 | $tab-a-y-padding: 0.5em; 7 | $tab-a-border-radius: 0.125em; 8 | $tab-a-hover-background-color: $light-primary; 9 | 10 | $tabs-vertical-a-padding: 0.25em; 11 | $tabs-vertical-nested-margin-left: 1em; 12 | 13 | // ul 14 | .tab-a { 15 | display: block; 16 | color: inherit; 17 | text-decoration: none; 18 | border: 0.1rem solid transparent; 19 | 20 | &:focus { 21 | outline: none; 22 | } 23 | } 24 | 25 | // ul 26 | .tabs:not(.vertical) { 27 | font-size: 1.6rem; 28 | 29 | // li 30 | .tab { 31 | display: inline-block; 32 | 33 | &.is-active .tab-a, .tab-a:hover, .tab-a:focus { 34 | color: $alpha-light-black; 35 | } 36 | } 37 | 38 | // li 39 | .tab-item, .tab-a { 40 | padding: $tab-a-y-padding $tab-a-x-padding; 41 | } 42 | 43 | &.underline .tab { 44 | &.is-active .tab-a, .tab-a:hover, .tab-a:focus { 45 | text-decoration: underline; 46 | color: $alpha-black; 47 | } 48 | } 49 | 50 | &.border-bottoms .tab { 51 | &.is-active .tab-a, .tab-a:hover, .tab-a:focus { 52 | border-bottom: 0.1rem solid $tab-a-hover-background-color; 53 | color: $alpha-black; 54 | } 55 | } 56 | 57 | &.solid { 58 | &.r-0 .tab-a { 59 | border-radius: 0; 60 | } 61 | 62 | &.r-round .tab-a { 63 | border-radius: $RADIUS_ROUND; 64 | } 65 | 66 | .tab { 67 | &.is-active .tab-a, .tab-a:hover, .tab-a:focus { 68 | background-color: $tab-a-hover-background-color; 69 | color: $alpha-white; 70 | } 71 | 72 | .tab-a { 73 | border-radius: $tab-a-border-radius; 74 | } 75 | } 76 | } 77 | 78 | &.border-bottomless { 79 | border-bottom: 0.1rem solid $BORDER_COLOR; 80 | 81 | .tab { 82 | &:not(:last-child) { 83 | margin-right: -0.1rem; 84 | } 85 | 86 | margin-bottom: -0.1rem; 87 | 88 | &.is-active .tab-a { 89 | border: 0.1rem solid $BORDER_ACTIVE_COLOR; 90 | border-bottom: 0.1rem solid $BODY_BACKGROUND_COLOR; 91 | color: $alpha-black; 92 | } 93 | 94 | .tab-a { 95 | border-radius: $tab-a-border-radius; 96 | border-radius: $tab-a-border-radius $tab-a-border-radius 0em 0em; 97 | 98 | &:hover, &:focus { 99 | border: 0.1rem solid $BORDER_COLOR; 100 | border-bottom: 0.1rem solid $BODY_BACKGROUND_COLOR; 101 | color: $alpha-black; 102 | } 103 | } 104 | } 105 | } 106 | } 107 | 108 | // ul 109 | .tabs.vertical { 110 | font-size: 1.6rem; 111 | 112 | // ul 113 | .tabs.vertical { 114 | font-size: inherit; 115 | } 116 | 117 | // li 118 | .tab { 119 | &.is-active > .tab-a, .tab-a:hover, .tab-a:focus { 120 | color: $alpha-light-black; 121 | } 122 | } 123 | 124 | .tab-item, .tab-a { 125 | padding: $tabs-vertical-a-padding; 126 | 127 | } 128 | 129 | &.indent-nested .tabs.vertical { 130 | margin-left: $tabs-vertical-nested-margin-left; 131 | } 132 | 133 | &.underline .tab { 134 | &.is-active > .tab-a, .tab-a:hover, .tab-a:focus { 135 | text-decoration: underline; 136 | color: $alpha-black; 137 | } 138 | } 139 | 140 | &.border-lefts .tab { 141 | &.is-active > .tab-a, .tab-a:hover, .tab-a:focus { 142 | border-left: 0.1rem solid $tab-a-hover-background-color; 143 | color: $alpha-black; 144 | } 145 | } 146 | 147 | &.solid .tab { 148 | .tab-a { 149 | border-radius: $tab-a-border-radius; 150 | } 151 | 152 | &.is-active > .tab-a, .tab-a:hover, .tab-a:focus { 153 | background-color: $tab-a-hover-background-color; 154 | color: $alpha-white; 155 | } 156 | } 157 | } 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/forms/addons.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | @import "../base/global-variables.scss"; 3 | 4 | $addon-height: $CONTROL_HEIGHT; 5 | $addon-border-width: 0.1rem; 6 | $addon-background-color: $light-white; 7 | $addon-border-color: $BORDER_COLOR; 8 | $addon-spacing: 1rem; 9 | $addon-border-radius: 0.25em; 10 | 11 | // div 12 | .addons { 13 | font-size: 1.6rem; 14 | display: flex; 15 | 16 | // span 17 | & > .addon, & > .textbox { 18 | font-size: inherit; 19 | 20 | &:first-child { 21 | border-top-right-radius: 0; 22 | border-bottom-right-radius: 0; 23 | } 24 | 25 | &:not(:first-child):not(:last-child) { 26 | border-radius: 0; 27 | } 28 | 29 | &:last-child { 30 | border-top-left-radius: 0; 31 | border-bottom-left-radius: 0; 32 | } 33 | 34 | &:not(:last-child) { 35 | margin-right: -1 * $addon-border-width; 36 | } 37 | } 38 | 39 | // div 40 | & > .icons { 41 | font-size: inherit; 42 | 43 | &:first-child .textbox { 44 | border-top-right-radius: 0; 45 | border-bottom-right-radius: 0; 46 | } 47 | 48 | &:not(:first-child):not(:last-child) .textbox { 49 | border-radius: 0; 50 | } 51 | 52 | &:last-child .textbox { 53 | border-top-left-radius: 0; 54 | border-bottom-left-radius: 0; 55 | } 56 | 57 | &:not(:last-child) { 58 | margin-right: -1 * $addon-border-width; 59 | } 60 | } 61 | 62 | // span 63 | .addon { 64 | height: $addon-height; 65 | line-height: $addon-height; 66 | background-color: $addon-background-color; 67 | border: $addon-border-width solid $addon-border-color; 68 | border-radius: $addon-border-radius; 69 | padding: 0 $addon-spacing; 70 | white-space: nowrap; 71 | 72 | &.interactive { 73 | padding: 0; 74 | border: 0; 75 | background: none; 76 | 77 | .button { 78 | font-size: inherit; 79 | border-radius: inherit; 80 | height: inherit; 81 | padding: 0 $addon-spacing; 82 | } 83 | 84 | // select 85 | .textbox { 86 | font-size: inherit; 87 | width: auto; 88 | background-color: $addon-background-color; 89 | border-color: $addon-border-color; 90 | } 91 | } 92 | } 93 | } 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/forms/controls.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | @import "../base/global-variables.scss"; 3 | 4 | $control-border-color: $BORDER_COLOR; 5 | $control-border-width: 0.1rem; 6 | $control-hover-border-color: $BORDER_ACTIVE_COLOR; 7 | $control-background-color: $white; 8 | $control-shadow-spread: $CONTROL_SHADOW_SPREAD; 9 | $control-box-shadow-color: $alpha-light-primary; 10 | $control-border-radius: 0.125em; 11 | $control-spacing: 1rem; 12 | 13 | $control-height: $CONTROL_HEIGHT; 14 | 15 | $control-textarea-min-height: 10rem; 16 | $control-textarea-max-height: 40rem; 17 | $control-textarea-line-height: 1.5; 18 | 19 | $control-switch-track-height: 0.5em; 20 | $control-switch-track-width: 2.2em; 21 | $control-switch-box-size: 1.2em; 22 | 23 | // input, select, textarea 24 | .textbox { 25 | font-size: 1.6rem; 26 | display: block; 27 | width: 100%; 28 | color: $FONT_COLOR; 29 | background-color: $control-background-color; 30 | border: $control-border-width solid $control-border-color; 31 | border-radius: $control-border-radius; 32 | transition: all 125ms; 33 | 34 | &::placeholder { 35 | color: $alpha-light-black; 36 | } 37 | 38 | &:hover { 39 | border-color: $control-hover-border-color; 40 | } 41 | 42 | &:focus { 43 | outline: none; 44 | border-color: $control-hover-border-color; 45 | box-shadow: 0 0 0 $control-shadow-spread $control-box-shadow-color; 46 | } 47 | 48 | &[readonly], &[disabled] { 49 | background-color: $white-gray; 50 | border-color: $control-hover-border-color; 51 | cursor: not-allowed; 52 | box-shadow: none; 53 | } 54 | 55 | &[disabled] { 56 | opacity: $DISABLED_OPACITY; 57 | } 58 | 59 | &[multiple] { 60 | height: auto; 61 | } 62 | 63 | } 64 | 65 | input.textbox, select.textbox { 66 | height: $control-height; 67 | padding: 0rem $control-spacing; 68 | } 69 | 70 | textarea.textbox { 71 | min-width: 100%; 72 | max-width: 100%; 73 | min-height: $control-textarea-min-height; 74 | max-height: $control-textarea-max-height; 75 | padding: $control-spacing; 76 | line-height: $control-textarea-line-height; 77 | 78 | &.no-resize { 79 | resize: none; 80 | } 81 | } 82 | 83 | // label 84 | .checkbox, .radio { 85 | font-size: 1.6rem; 86 | display: inline-block; 87 | height: $control-height; 88 | line-height: $control-height; 89 | 90 | input[type="checkbox"], input[type="radio"] { 91 | margin-right: 0.5 * $control-spacing; 92 | 93 | &[disabled] { 94 | cursor: not-allowed; 95 | opacity: $DISABLED_OPACITY; 96 | } 97 | } 98 | } 99 | 100 | // label 101 | .checkbox.switch, .radio.switch { 102 | input[type="checkbox"], input[type="radio"] { 103 | display: none; 104 | } 105 | 106 | input[type="checkbox"] + i, input[type="radio"] + i { 107 | display: inline-block; 108 | height: $control-switch-track-height; 109 | width: $control-switch-track-width; 110 | margin-right: $control-spacing; 111 | background-color: $control-hover-border-color; 112 | border-radius: $control-border-radius; 113 | position: relative; 114 | transition: all 200ms; 115 | 116 | &::before { 117 | content: ''; 118 | height: $control-switch-box-size; 119 | width: $control-switch-box-size; 120 | background-color: $control-background-color; 121 | border: $control-border-width solid $control-border-color; 122 | border-radius: inherit; 123 | position: absolute; 124 | left: 0; 125 | top: 50%; 126 | transform: translate(0%, -50%); 127 | transition: inherit; 128 | } 129 | 130 | } 131 | 132 | input[type="checkbox"]:checked + i, input[type="radio"]:checked + i { 133 | background-color: $light-primary; 134 | 135 | &::before { 136 | left: 100%; 137 | transform: translate(-98%, -50%); 138 | } 139 | } 140 | 141 | input[type="checkbox"][disabled] + i, input[type="radio"][disabled] + i { 142 | cursor: not-allowed; 143 | opacity: $DISABLED_OPACITY; 144 | } 145 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/forms/field.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | @import "../base/mixins.scss"; 3 | 4 | $field-help-font-size: 1.2rem; 5 | $field-title-spacing: 1rem; 6 | $field-help-spacing: 0.5rem; 7 | 8 | $field-required-asterisk-color: $light-danger; 9 | 10 | // div 11 | .field { 12 | &.horizontal { 13 | display: flex; 14 | align-items: baseline; 15 | } 16 | 17 | // label 18 | .title { 19 | font-size: 1.6rem; 20 | display: block; 21 | margin-bottom: $field-title-spacing; 22 | } 23 | 24 | &.required .title::after { 25 | font-size: $field-help-font-size; 26 | content: ' * '; 27 | vertical-align: top; 28 | color: $field-required-asterisk-color; 29 | } 30 | 31 | // p 32 | .help { 33 | font-size: $field-help-font-size; 34 | margin-top: $field-help-spacing; 35 | } 36 | 37 | &.primary { 38 | @include field-theme($light-primary, $medium-primary, $alpha-light-primary); 39 | } 40 | 41 | &.info { 42 | @include field-theme($light-info, $medium-info, $alpha-light-info); 43 | } 44 | 45 | &.caution { 46 | @include field-theme($light-caution, $medium-caution, $alpha-light-caution); 47 | } 48 | 49 | &.danger { 50 | @include field-theme($light-danger, $medium-danger, $alpha-light-danger); 51 | } 52 | } 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/forms/icons.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | 3 | $icons-color: $alpha-light-black; 4 | $icons-focus-color: $alpha-black; 5 | $icons-spacing: 0.5em; 6 | $icons-input-spacing: 2em; 7 | 8 | // div 9 | .icons { 10 | font-size: 1.6rem; 11 | position: relative; 12 | width: 100%; 13 | 14 | &.on-left .textbox { 15 | padding-left: $icons-input-spacing; 16 | } 17 | 18 | &.on-right .textbox { 19 | padding-right: $icons-input-spacing; 20 | } 21 | 22 | &.on-both .textbox { 23 | padding-left: $icons-input-spacing; 24 | padding-right: $icons-input-spacing; 25 | } 26 | 27 | // span 28 | .icon-left, .icon-right { 29 | position: absolute; 30 | top: 50%; 31 | transform: translate(0%, -50%); 32 | color: $icons-color; 33 | } 34 | 35 | .icon-left { 36 | left: $icons-spacing; 37 | } 38 | 39 | .icon-right { 40 | right: $icons-spacing; 41 | } 42 | 43 | .textbox { 44 | font-size: inherit; 45 | 46 | &:focus ~ .icon-left, &:focus ~ .icon-right { 47 | color: $icons-focus-color; 48 | } 49 | } 50 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/layout/flexbox.scss: -------------------------------------------------------------------------------- 1 | @import "../base/breakpoint-values.scss"; 2 | 3 | .start { justify-content: flex-start; } 4 | .center { justify-content: center; } 5 | .end { justify-content: flex-end; } 6 | .between { justify-content: space-between; } 7 | .around { justify-content: space-around; } 8 | .even { justify-content: space-evenly; } 9 | 10 | .cross-start { align-items: flex-start; } 11 | .cross-center { align-items: center; } 12 | .cross-end { align-items: flex-end; } 13 | .cross-baseline { align-items: baseline; } 14 | .cross-stretch { align-items: stretch; } 15 | 16 | .flex-wrap { flex-wrap: wrap; } 17 | 18 | @media screen and (max-width: $sm-and-below) { 19 | @for $index from 1 through 4 { 20 | .order-#{$index}-sm { order: $index; } 21 | } 22 | } 23 | 24 | @media screen and (min-width: $md-lower) and (max-width: $md-upper) { 25 | @for $index from 1 through 4 { 26 | .order-#{$index}-md { order: $index; } 27 | } 28 | } 29 | 30 | @media screen and (min-width: $lg-and-above) { 31 | @for $index from 1 through 4 { 32 | .order-#{$index}-lg { order: $index; } 33 | } 34 | } 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/layout/grid.scss: -------------------------------------------------------------------------------- 1 | @import "../base/breakpoint-values.scss"; 2 | @import "../base/global-variables.scss"; 3 | @import "../base/mixins.scss"; 4 | 5 | $unit-padding: $UNIT_SPACING; 6 | 7 | // div 8 | [class*="unit-"] { 9 | float: left; 10 | padding: $unit-padding; 11 | } 12 | 13 | .grid::after, .clearfix::after { 14 | @include clearfix(); 15 | } 16 | 17 | // div 18 | .grid { 19 | margin: -1 * $unit-padding; 20 | 21 | &.tight { 22 | margin: -0.5 * $unit-padding; 23 | 24 | [class*="unit-"] { 25 | padding: 0.5 * $unit-padding; 26 | } 27 | } 28 | 29 | & + * { 30 | clear: left; 31 | } 32 | } 33 | 34 | // div 35 | .new-line { 36 | float: left; 37 | width: 100%; 38 | } 39 | 40 | @for $index from 1 through $GRID_SYSTEM { 41 | .unit-#{$index} { width: percentage($index / $GRID_SYSTEM); } 42 | } 43 | 44 | @for $index from 1 through $GRID_SYSTEM { 45 | .push-#{$index} { margin-left: percentage($index / $GRID_SYSTEM); } 46 | } 47 | 48 | @media screen and (max-width: $sm-and-below) { 49 | .grid.tight.no-tight-sm { 50 | @include tight-cancel($unit-padding); 51 | } 52 | 53 | .grid.tight-sm { 54 | @include tight-responsive($unit-padding); 55 | } 56 | 57 | @for $index from 1 through $GRID_SYSTEM { 58 | .unit-#{$index}-sm { width: percentage($index / $GRID_SYSTEM); } 59 | } 60 | 61 | @for $index from 1 through $GRID_SYSTEM { 62 | .push-#{$index}-sm { margin-left: percentage($index / $GRID_SYSTEM); } 63 | } 64 | } 65 | 66 | @media screen and (min-width: $md-lower) and (max-width: $md-upper) { 67 | .grid.tight.no-tight-md { 68 | @include tight-cancel($unit-padding); 69 | } 70 | 71 | .grid.tight-md { 72 | @include tight-responsive($unit-padding); 73 | } 74 | 75 | @for $index from 1 through $GRID_SYSTEM { 76 | .unit-#{$index}-md { width: percentage($index / $GRID_SYSTEM); } 77 | } 78 | 79 | @for $index from 1 through $GRID_SYSTEM { 80 | .push-#{$index}-md { margin-left: percentage($index / $GRID_SYSTEM); } 81 | } 82 | 83 | } 84 | 85 | @media screen and (min-width: $lg-and-above) { 86 | .grid.tight.no-tight-lg { 87 | @include tight-cancel($unit-padding); 88 | } 89 | 90 | .grid.tight-lg { 91 | @include tight-responsive($unit-padding); 92 | } 93 | 94 | @for $index from 1 through $GRID_SYSTEM { 95 | .unit-#{$index}-lg { width: percentage($index / $GRID_SYSTEM); } 96 | } 97 | 98 | @for $index from 1 through $GRID_SYSTEM { 99 | .push-#{$index}-lg { margin-left: percentage($index / $GRID_SYSTEM); } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/layout/position-presets.scss: -------------------------------------------------------------------------------- 1 | .left-top { 2 | left: 0; 3 | top: 0; 4 | } 5 | 6 | .left-center { 7 | left: 0; 8 | top: 50%; 9 | transform: translate(0%, -50%); 10 | } 11 | 12 | .left-bottom { 13 | left: 0; 14 | bottom: 0; 15 | } 16 | 17 | .center-top { 18 | left: 50%; 19 | top: 0; 20 | transform: translate(-50%, 0); 21 | } 22 | 23 | .center-center { 24 | left: 50%; 25 | top: 50%; 26 | transform: translate(-50%, -50%); 27 | } 28 | 29 | .center-bottom { 30 | left: 50%; 31 | bottom: 0; 32 | transform: translate(-50%, 0%); 33 | } 34 | 35 | .right-top { 36 | right: 0; 37 | top: 0; 38 | } 39 | 40 | .right-center { 41 | right: 0; 42 | top: 50%; 43 | transform: translate(0%, -50%); 44 | } 45 | 46 | .right-bottom { 47 | right: 0; 48 | bottom: 0; 49 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/sandbox.scss: -------------------------------------------------------------------------------- 1 | /* sandbox v0.2.0 - MIT License - github.com/dlcNine/sandbox */ 2 | 3 | /* ============ base ============ */ 4 | @import "./base/breakpoint-values.scss"; 5 | @import "./base/colors.scss"; 6 | @import "./base/global-variables.scss"; 7 | @import "./base/mixins.scss"; 8 | @import "./base/reset.scss"; 9 | @import "./base/headings.scss"; 10 | @import "./base/a.scss"; 11 | @import "./base/ul-ol.scss"; 12 | @import "./base/table.scss"; 13 | 14 | /* ============ layout ============ */ 15 | @import "./layout/grid.scss"; 16 | @import "./layout/position-presets.scss"; 17 | @import "./layout/flexbox.scss"; 18 | 19 | /* ============ buttons ============ */ 20 | @import "./buttons/button.scss"; 21 | @import "./buttons/button-outlined.scss"; 22 | @import "./buttons/buttons.scss"; 23 | 24 | /* ============ forms ============ */ 25 | @import "./forms/controls.scss"; 26 | @import "./forms/field.scss"; 27 | @import "./forms/addons.scss"; 28 | @import "./forms/icons.scss"; 29 | 30 | /* ============ components ============ */ 31 | @import "./components/modal.scss"; 32 | @import "./components/card.scss"; 33 | @import "./components/tabs.scss"; 34 | @import "./components/close.scss"; 35 | @import "./components/square.scss"; 36 | @import "./components/progress.scss"; 37 | @import "./components/list-items.scss"; 38 | @import "./components/dropdown.scss"; 39 | @import "./components/pagination.scss"; 40 | @import "./components/navbar.scss"; 41 | @import "./components/popover.scss"; 42 | @import "./components/code.scss"; 43 | @import "./components/loading.scss"; 44 | @import "./components/steps.scss"; 45 | 46 | /* ============ utilities ============ */ 47 | @import "./utilities/font-size.scss"; 48 | @import "./utilities/spacing.scss"; 49 | @import "./utilities/border.scss"; 50 | @import "./utilities/display.scss"; 51 | @import "./utilities/position.scss"; 52 | @import "./utilities/float.scss"; 53 | @import "./utilities/z-index.scss"; 54 | @import "./utilities/overflow.scss"; 55 | @import "./utilities/width.scss"; 56 | @import "./utilities/height.scss"; 57 | @import "./utilities/text.scss"; 58 | @import "./utilities/img.scss"; 59 | @import "./utilities/zeroing.scss"; 60 | 61 | /* ============ themes ============ */ 62 | @import "./themes/themes.scss"; 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/themes/themes.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | @import "../base/mixins.scss"; 3 | 4 | .primary, .info, .danger, .dark { 5 | color: $alpha-white; 6 | } 7 | 8 | .caution, .light { 9 | color: $alpha-black; 10 | } 11 | 12 | .primary { 13 | @include border-background-color($medium-primary); 14 | } 15 | 16 | .info { 17 | @include border-background-color($medium-info); 18 | } 19 | 20 | .caution { 21 | @include border-background-color($medium-caution); 22 | } 23 | 24 | .danger { 25 | @include border-background-color($medium-danger); 26 | } 27 | 28 | .light { 29 | @include border-background-color($light-white); 30 | } 31 | 32 | .dark { 33 | @include border-background-color($medium-black); 34 | } -------------------------------------------------------------------------------- /src/docs/sandbox/src/utilities/border.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | @import "../base/global-variables.scss"; 3 | 4 | $borders-width: 0.1rem; 5 | $borders-color: $BORDER_COLOR; 6 | $borders-radius: 0.25em; 7 | $borders-round: $RADIUS_ROUND; 8 | 9 | .b { border: $borders-width solid $borders-color !important; } 10 | .bt { border-top: $borders-width solid $borders-color !important; } 11 | .bb { border-bottom: $borders-width solid $borders-color !important; } 12 | .bl { border-left: $borders-width solid $borders-color !important; } 13 | .br { border-right: $borders-width solid $borders-color !important; } 14 | 15 | .r { border-radius: $borders-radius !important; } 16 | .rtl { border-top-left-radius: $borders-radius !important; } 17 | .rtr { border-top-right-radius: $borders-radius !important; } 18 | .rbl { border-bottom-left-radius: $borders-radius !important; } 19 | .rbr { border-bottom-right-radius: $borders-radius !important; } 20 | 21 | .r-inherit { border-radius: inherit !important; } 22 | .r-round { border-radius: $borders-round !important; } 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/utilities/display.scss: -------------------------------------------------------------------------------- 1 | @import "../base/breakpoint-values.scss"; 2 | 3 | .flex { display: flex !important; } 4 | .block { display: block !important; } 5 | .inline { display: inline !important; } 6 | .inline-block { display: inline-block !important; } 7 | .absent { display: none !important; } 8 | .invisible { visibility: hidden !important; } 9 | 10 | @media screen and (max-width: $sm-and-below) { 11 | .flex-sm { display: flex !important; } 12 | .block-sm { display: block !important; } 13 | .inline-sm { display: inline !important; } 14 | .inline-block-sm { display: inline-block !important; } 15 | .absent-sm { display: none !important; } 16 | .invisible-sm { visibility: hidden !important; } 17 | } 18 | 19 | @media screen and (min-width: $md-lower) and (max-width: $md-upper) { 20 | .flex-md { display: flex !important; } 21 | .block-md { display: block !important; } 22 | .inline-md { display: inline !important; } 23 | .inline-block-md { display: inline-block !important; } 24 | .absent-md { display: none !important; } 25 | .invisible-md { visibility: hidden !important; } 26 | } 27 | 28 | @media screen and (min-width: $lg-and-above) { 29 | .flex-lg { display: flex !important; } 30 | .block-lg { display: block !important; } 31 | .inline-lg { display: inline !important; } 32 | .inline-block-lg { display: inline-block !important; } 33 | .absent-lg { display: none !important; } 34 | .invisible-lg { visibility: hidden !important; } 35 | } 36 | 37 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/utilities/float.scss: -------------------------------------------------------------------------------- 1 | .to-left { float: left !important; } 2 | .to-right { float: right !important; } 3 | .no-float { float: none !important; } 4 | .clear-left { clear: left !important; } 5 | .clear-right { clear: right !important; } 6 | .clear-both { clear: both !important; } 7 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/utilities/font-size.scss: -------------------------------------------------------------------------------- 1 | @import "../base/breakpoint-values.scss"; 2 | 3 | // scale: 1.3333 4 | 5 | .huge-1 { font-size: 6.7rem !important; } 6 | .huge-2 { font-size: 5.1rem !important; } 7 | .h1 { font-size: 3.8rem !important; } 8 | .h2 { font-size: 2.8rem !important; } 9 | .h3 { font-size: 2.1rem !important; } 10 | .h4 { font-size: 1.6rem !important; } 11 | .h5 { font-size: 1.2rem !important; } 12 | .h6 { font-size: 0.9rem !important; } 13 | 14 | @media screen and (max-width: $sm-and-below) { 15 | .huge-1-sm { font-size: 6.7rem !important; } 16 | .huge-2-sm { font-size: 5.1rem !important; } 17 | .h1-sm { font-size: 3.8rem !important; } 18 | .h2-sm { font-size: 2.8rem !important; } 19 | .h3-sm { font-size: 2.1rem !important; } 20 | .h4-sm { font-size: 1.6rem !important; } 21 | .h5-sm { font-size: 1.2rem !important; } 22 | .h6-sm { font-size: 0.9rem !important; } 23 | } 24 | 25 | @media screen and (min-width: $md-lower) and (max-width: $md-upper) { 26 | .huge-1-md { font-size: 6.7rem !important; } 27 | .huge-2-md { font-size: 5.1rem !important; } 28 | .h1-md { font-size: 3.8rem !important; } 29 | .h2-md { font-size: 2.8rem !important; } 30 | .h3-md { font-size: 2.1rem !important; } 31 | .h4-md { font-size: 1.6rem !important; } 32 | .h5-md { font-size: 1.2rem !important; } 33 | .h6-md { font-size: 0.9rem !important; } 34 | } 35 | 36 | @media screen and (min-width: $lg-and-above) { 37 | .huge-1-lg { font-size: 6.7rem !important; } 38 | .huge-2-lg { font-size: 5.1rem !important; } 39 | .h1-lg { font-size: 3.8rem !important; } 40 | .h2-lg { font-size: 2.8rem !important; } 41 | .h3-lg { font-size: 2.1rem !important; } 42 | .h4-lg { font-size: 1.6rem !important; } 43 | .h5-lg { font-size: 1.2rem !important; } 44 | .h6-lg { font-size: 0.9rem !important; } 45 | } 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/utilities/height.scss: -------------------------------------------------------------------------------- 1 | @import "../base/breakpoint-values.scss"; 2 | 3 | .h-1-4 { height: 25% !important; } 4 | .h-1-3 { height: percentage(1 / 3) !important; } 5 | .h-1-2 { height: 50% !important; } 6 | .h-2-3 { height: percentage(2 / 3) !important; } 7 | .h-3-4 { height: 75% !important; } 8 | .h-1 { height: 100% !important; } 9 | 10 | .h-1-4-vh { height: 25vh !important; } 11 | .h-1-3-vh { height: (1 / 3 * 100) * 1vh !important; } 12 | .h-1-2-vh { height: 50vh !important; } 13 | .h-2-3-vh { height: (2 / 3 * 100) * 1vh !important; } 14 | .h-3-4-vh { height: 75vh !important; } 15 | .h-1-vh { height: 100vh !important; } -------------------------------------------------------------------------------- /src/docs/sandbox/src/utilities/img.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | 3 | .responsive { 4 | max-width: 100% !important; 5 | height: auto !important; 6 | } 7 | 8 | .fill-width { 9 | width: 100% !important; 10 | height: auto !important; 11 | } 12 | 13 | .fit-contain { object-fit: contain !important; } 14 | .fit-cover { object-fit: cover !important; } 15 | .fit-none { object-fit: none !important; } -------------------------------------------------------------------------------- /src/docs/sandbox/src/utilities/overflow.scss: -------------------------------------------------------------------------------- 1 | .o-scroll { overflow: scroll !important; } 2 | .o-auto { overflow: auto !important; } 3 | .o-hidden { overflow: hidden !important; } 4 | 5 | .ox-scroll { overflow-x: scroll !important; } 6 | .ox-auto { overflow-x: auto !important; } 7 | .ox-hidden { overflow-x: hidden !important; } 8 | 9 | .oy-scroll { overflow-y: scroll !important; } 10 | .oy-auto { overflow-y: auto !important; } 11 | .oy-hidden { overflow-y: hidden !important; } -------------------------------------------------------------------------------- /src/docs/sandbox/src/utilities/position.scss: -------------------------------------------------------------------------------- 1 | .relative { position: relative !important; } 2 | .fixed { position: fixed !important; } 3 | .absolute { position: absolute !important; } 4 | .sticky { position: sticky !important; } 5 | .static { position: static !important; } -------------------------------------------------------------------------------- /src/docs/sandbox/src/utilities/spacing.scss: -------------------------------------------------------------------------------- 1 | @import "../base/breakpoint-values.scss"; 2 | @import "../base/global-variables.scss"; 3 | 4 | $spacing: $UNIT_SPACING; 5 | 6 | .mx-auto { 7 | margin-left: auto !important; 8 | margin-right: auto !important; 9 | } 10 | 11 | .m-half { margin: 0.5 * $spacing !important; } 12 | .mt-half { margin-top: 0.5 * $spacing !important; } 13 | .mb-half { margin-bottom: 0.5 * $spacing !important; } 14 | .ml-half { margin-left: 0.5 * $spacing !important; } 15 | .mr-half { margin-right: 0.5 * $spacing !important; } 16 | 17 | .mx-half { 18 | margin-left: 0.5 * $spacing !important; 19 | margin-right: 0.5 * $spacing !important; 20 | } 21 | 22 | .my-half { 23 | margin-top: 0.5 * $spacing !important; 24 | margin-bottom: 0.5 * $spacing !important; 25 | } 26 | 27 | @for $index from 1 through $SPACING_LEVELS { 28 | .m-#{$index} { margin: $spacing * $index !important; } 29 | .mt-#{$index} { margin-top: $spacing * $index !important; } 30 | .mb-#{$index} { margin-bottom: $spacing * $index !important; } 31 | .ml-#{$index} { margin-left: $spacing * $index !important; } 32 | .mr-#{$index} { margin-right: $spacing * $index !important; } 33 | 34 | .mx-#{$index} { 35 | margin-left: $spacing * $index !important; 36 | margin-right: $spacing * $index !important; 37 | } 38 | 39 | .my-#{$index} { 40 | margin-top: $spacing * $index !important; 41 | margin-bottom: $spacing * $index !important; 42 | } 43 | } 44 | 45 | .p-half { padding: 0.5 * $spacing !important; } 46 | .pt-half { padding-top: 0.5 * $spacing !important; } 47 | .pb-half { padding-bottom: 0.5 * $spacing !important; } 48 | .pl-half { padding-left: 0.5 * $spacing !important; } 49 | .pr-half { padding-right: 0.5 * $spacing !important; } 50 | 51 | .px-half { 52 | padding-left: 0.5 * $spacing !important; 53 | padding-right: 0.5 * $spacing !important; 54 | } 55 | 56 | .py-half { 57 | padding-top: 0.5 * $spacing !important; 58 | padding-bottom: 0.5 * $spacing !important; 59 | } 60 | 61 | @for $index from 1 through $SPACING_LEVELS { 62 | .p-#{$index} { padding: $spacing * $index !important; } 63 | .pt-#{$index} { padding-top: $spacing * $index !important; } 64 | .pb-#{$index} { padding-bottom: $spacing * $index !important; } 65 | .pl-#{$index} { padding-left: $spacing * $index !important; } 66 | .pr-#{$index} { padding-right: $spacing * $index !important; } 67 | 68 | .px-#{$index} { 69 | padding-left: $spacing * $index !important; 70 | padding-right: $spacing * $index !important; 71 | } 72 | 73 | .py-#{$index} { 74 | padding-top: $spacing * $index !important; 75 | padding-bottom: $spacing * $index !important; 76 | } 77 | } 78 | 79 | @media screen and (max-width: $sm-and-below) { 80 | .m-half-sm { margin: 0.5 * $spacing !important; } 81 | .mt-half-sm { margin-top: 0.5 * $spacing !important; } 82 | .mb-half-sm { margin-bottom: 0.5 * $spacing !important; } 83 | .ml-half-sm { margin-left: 0.5 * $spacing !important; } 84 | .mr-half-sm { margin-right: 0.5 * $spacing !important; } 85 | 86 | .mx-half-sm { 87 | margin-left: 0.5 * $spacing !important; 88 | margin-right: 0.5 * $spacing !important; 89 | } 90 | 91 | .my-half-sm { 92 | margin-top: 0.5 * $spacing !important; 93 | margin-bottom: 0.5 * $spacing !important; 94 | } 95 | 96 | @for $index from 1 through $SPACING_LEVELS { 97 | .m-#{$index}-sm { margin: $spacing * $index !important; } 98 | .mt-#{$index}-sm { margin-top: $spacing * $index !important; } 99 | .mb-#{$index}-sm { margin-bottom: $spacing * $index !important; } 100 | .ml-#{$index}-sm { margin-left: $spacing * $index !important; } 101 | .mr-#{$index}-sm { margin-right: $spacing * $index !important; } 102 | 103 | .mx-#{$index}-sm { 104 | margin-left: $spacing * $index !important; 105 | margin-right: $spacing * $index !important; 106 | } 107 | 108 | .my-#{$index}-sm { 109 | margin-top: $spacing * $index !important; 110 | margin-bottom: $spacing * $index !important; 111 | } 112 | } 113 | 114 | .p-half-sm { padding: 0.5 * $spacing !important; } 115 | .pt-half-sm { padding-top: 0.5 * $spacing !important; } 116 | .pb-half-sm { padding-bottom: 0.5 * $spacing !important; } 117 | .pl-half-sm { padding-left: 0.5 * $spacing !important; } 118 | .pr-half-sm { padding-right: 0.5 * $spacing !important; } 119 | 120 | .px-half-sm { 121 | padding-left: 0.5 * $spacing !important; 122 | padding-right: 0.5 * $spacing !important; 123 | } 124 | 125 | .py-half-sm { 126 | padding-top: 0.5 * $spacing !important; 127 | padding-bottom: 0.5 * $spacing !important; 128 | } 129 | 130 | @for $index from 1 through $SPACING_LEVELS { 131 | .p-#{$index}-sm { padding: $spacing * $index !important; } 132 | .pt-#{$index}-sm { padding-top: $spacing * $index !important; } 133 | .pb-#{$index}-sm { padding-bottom: $spacing * $index !important; } 134 | .pl-#{$index}-sm { padding-left: $spacing * $index !important; } 135 | .pr-#{$index}-sm { padding-right: $spacing * $index !important; } 136 | 137 | .px-#{$index}-sm { 138 | padding-left: $spacing * $index !important; 139 | padding-right: $spacing * $index !important; 140 | } 141 | 142 | .py-#{$index}-sm { 143 | padding-top: $spacing * $index !important; 144 | padding-bottom: $spacing * $index !important; 145 | } 146 | } 147 | } 148 | 149 | @media screen and (min-width: $md-lower) and (max-width: $md-upper) { 150 | .m-half-md { margin: 0.5 * $spacing !important; } 151 | .mt-half-md { margin-top: 0.5 * $spacing !important; } 152 | .mb-half-md { margin-bottom: 0.5 * $spacing !important; } 153 | .ml-half-md { margin-left: 0.5 * $spacing !important; } 154 | .mr-half-md { margin-right: 0.5 * $spacing !important; } 155 | 156 | .mx-half-md { 157 | margin-left: 0.5 * $spacing !important; 158 | margin-right: 0.5 * $spacing !important; 159 | } 160 | 161 | .my-half-md { 162 | margin-top: 0.5 * $spacing !important; 163 | margin-bottom: 0.5 * $spacing !important; 164 | } 165 | 166 | @for $index from 1 through $SPACING_LEVELS { 167 | .m-#{$index}-md { margin: $spacing * $index !important; } 168 | .mt-#{$index}-md { margin-top: $spacing * $index !important; } 169 | .mb-#{$index}-md { margin-bottom: $spacing * $index !important; } 170 | .ml-#{$index}-md { margin-left: $spacing * $index !important; } 171 | .mr-#{$index}-md { margin-right: $spacing * $index !important; } 172 | 173 | .mx-#{$index}-md { 174 | margin-left: $spacing * $index !important; 175 | margin-right: $spacing * $index !important; 176 | } 177 | 178 | .my-#{$index}-md { 179 | margin-top: $spacing * $index !important; 180 | margin-bottom: $spacing * $index !important; 181 | } 182 | } 183 | 184 | .p-half-md { padding: 0.5 * $spacing !important; } 185 | .pt-half-md { padding-top: 0.5 * $spacing !important; } 186 | .pb-half-md { padding-bottom: 0.5 * $spacing !important; } 187 | .pl-half-md { padding-left: 0.5 * $spacing !important; } 188 | .pr-half-md { padding-right: 0.5 * $spacing !important; } 189 | 190 | .px-half-md { 191 | padding-left: 0.5 * $spacing !important; 192 | padding-right: 0.5 * $spacing !important; 193 | } 194 | 195 | .py-half-md { 196 | padding-top: 0.5 * $spacing !important; 197 | padding-bottom: 0.5 * $spacing !important; 198 | } 199 | 200 | @for $index from 1 through $SPACING_LEVELS { 201 | .p-#{$index}-md { padding: $spacing * $index !important; } 202 | .pt-#{$index}-md { padding-top: $spacing * $index !important; } 203 | .pb-#{$index}-md { padding-bottom: $spacing * $index !important; } 204 | .pl-#{$index}-md { padding-left: $spacing * $index !important; } 205 | .pr-#{$index}-md { padding-right: $spacing * $index !important; } 206 | 207 | .px-#{$index}-md { 208 | padding-left: $spacing * $index !important; 209 | padding-right: $spacing * $index !important; 210 | } 211 | 212 | .py-#{$index}-md { 213 | padding-top: $spacing * $index !important; 214 | padding-bottom: $spacing * $index !important; 215 | } 216 | } 217 | } 218 | 219 | @media screen and (min-width: $lg-and-above) { 220 | .m-half-lg { margin: 0.5 * $spacing !important; } 221 | .mt-half-lg { margin-top: 0.5 * $spacing !important; } 222 | .mb-half-lg { margin-bottom: 0.5 * $spacing !important; } 223 | .ml-half-lg { margin-left: 0.5 * $spacing !important; } 224 | .mr-half-lg { margin-right: 0.5 * $spacing !important; } 225 | 226 | .mx-half-lg { 227 | margin-left: 0.5 * $spacing !important; 228 | margin-right: 0.5 * $spacing !important; 229 | } 230 | 231 | .my-half-lg { 232 | margin-top: 0.5 * $spacing !important; 233 | margin-bottom: 0.5 * $spacing !important; 234 | } 235 | 236 | @for $index from 1 through $SPACING_LEVELS { 237 | .m-#{$index}-lg { margin: $spacing * $index !important; } 238 | .mt-#{$index}-lg { margin-top: $spacing * $index !important; } 239 | .mb-#{$index}-lg { margin-bottom: $spacing * $index !important; } 240 | .ml-#{$index}-lg { margin-left: $spacing * $index !important; } 241 | .mr-#{$index}-lg { margin-right: $spacing * $index !important; } 242 | 243 | .mx-#{$index}-lg { 244 | margin-left: $spacing * $index !important; 245 | margin-right: $spacing * $index !important; 246 | } 247 | 248 | .my-#{$index}-lg { 249 | margin-top: $spacing * $index !important; 250 | margin-bottom: $spacing * $index !important; 251 | } 252 | } 253 | 254 | .p-half-lg { padding: 0.5 * $spacing !important; } 255 | .pt-half-lg { padding-top: 0.5 * $spacing !important; } 256 | .pb-half-lg { padding-bottom: 0.5 * $spacing !important; } 257 | .pl-half-lg { padding-left: 0.5 * $spacing !important; } 258 | .pr-half-lg { padding-right: 0.5 * $spacing !important; } 259 | 260 | .px-half-lg { 261 | padding-left: 0.5 * $spacing !important; 262 | padding-right: 0.5 * $spacing !important; 263 | } 264 | 265 | .py-half-lg { 266 | padding-top: 0.5 * $spacing !important; 267 | padding-bottom: 0.5 * $spacing !important; 268 | } 269 | 270 | @for $index from 1 through $SPACING_LEVELS { 271 | .p-#{$index}-lg { padding: $spacing * $index !important; } 272 | .pt-#{$index}-lg { padding-top: $spacing * $index !important; } 273 | .pb-#{$index}-lg { padding-bottom: $spacing * $index !important; } 274 | .pl-#{$index}-lg { padding-left: $spacing * $index !important; } 275 | .pr-#{$index}-lg { padding-right: $spacing * $index !important; } 276 | 277 | .px-#{$index}-lg { 278 | padding-left: $spacing * $index !important; 279 | padding-right: $spacing * $index !important; 280 | } 281 | 282 | .py-#{$index}-lg { 283 | padding-top: $spacing * $index !important; 284 | padding-bottom: $spacing * $index !important; 285 | } 286 | } 287 | } 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/utilities/text.scss: -------------------------------------------------------------------------------- 1 | @import "../base/colors.scss"; 2 | 3 | .text-left { text-align: left !important; } 4 | .text-center { text-align: center !important; } 5 | .text-right { text-align: right !important; } 6 | .text-justify { text-align: justify !important; } 7 | 8 | .va-top { vertical-align: top !important; } 9 | .va-middle { vertical-align: middle !important; } 10 | .va-bottom { vertical-align: bottom !important; } 11 | .va-text-top { vertical-align: text-top !important; } 12 | .va-text-bottom { vertical-align: text-bottom !important; } 13 | 14 | .text-capitalize { text-transform: capitalize !important; } 15 | .text-uppercase { text-transform: uppercase !important; } 16 | .text-lowercase { text-transform: lowercase !important; } 17 | 18 | .fw-lighter { font-weight: lighter !important; } 19 | .fw-bold { font-weight: bold !important; } 20 | .fw-normal { font-weight: normal !important; } 21 | 22 | .fs-italic { font-style: italic !important; } 23 | 24 | .text-line-through { text-decoration: line-through !important; } 25 | .text-underline { text-decoration: underline !important; } 26 | .text-overline { text-decoration: overline !important; } 27 | 28 | .lh-1 { line-height: 1 !important; } 29 | 30 | .text-black { color: $alpha-black !important; } 31 | .text-muted { color: $alpha-light-black !important; } 32 | .text-white { color: $alpha-white !important; } 33 | .text-white-muted { color: $alpha-dark-white !important; } 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /src/docs/sandbox/src/utilities/width.scss: -------------------------------------------------------------------------------- 1 | @import "../base/breakpoint-values.scss"; 2 | 3 | .w-1-4 { width: 25% !important; } 4 | .w-1-3 { width: percentage(1 / 3) !important; } 5 | .w-1-2 { width: 50% !important; } 6 | .w-2-3 { width: percentage(2 / 3) !important; } 7 | .w-3-4 { width: 75% !important; } 8 | .w-1 { width: 100% !important; } 9 | 10 | .w-1-4-vw { width: 25vw !important; } 11 | .w-1-3-vw { width: (1 / 3 * 100) * 1vw !important; } 12 | .w-1-2-vw { width: 50vw !important; } 13 | .w-2-3-vw { width: (2 / 3 * 100) * 1vw !important; } 14 | .w-3-4-vw { width: 75vw !important; } 15 | .w-1-vw { width: 100vw !important; } -------------------------------------------------------------------------------- /src/docs/sandbox/src/utilities/z-index.scss: -------------------------------------------------------------------------------- 1 | .z--10 { z-index: -10 !important; } 2 | .z-0 { z-index: 0 !important; } 3 | .z-10 { z-index: 10 !important; } 4 | .z-20 { z-index: 20 !important; } 5 | .z-30 { z-index: 30 !important; } 6 | .z-40 { z-index: 40 !important; } 7 | .z-50 { z-index: 50 !important; } 8 | .z-60 { z-index: 60 !important; } 9 | .z-70 { z-index: 70 !important; } 10 | .z-80 { z-index: 80 !important; } 11 | .z-90 { z-index: 90 !important; } 12 | .z-100 { z-index: 100 !important; } -------------------------------------------------------------------------------- /src/docs/sandbox/src/utilities/zeroing.scss: -------------------------------------------------------------------------------- 1 | @import "../base/breakpoint-values.scss"; 2 | 3 | .no-background { background: none !important; } 4 | .no-shadow { box-shadow: none !important; } 5 | .no-before::before, .no-after::after { display: none !important; } 6 | 7 | .b-0 { border: 0 !important; } 8 | .bt-0 { border-top: 0 !important; } 9 | .bb-0 { border-bottom: 0 !important; } 10 | .bl-0 { border-left: 0 !important; } 11 | .br-0 { border-right: 0 !important; } 12 | 13 | .r-0 { border-radius: 0 !important; } 14 | .rtl-0 { border-top-left-radius: 0 !important; } 15 | .rtr-0 { border-top-right-radius: 0 !important; } 16 | .rbl-0 { border-bottom-left-radius: 0 !important; } 17 | .rbr-0 { border-bottom-right-radius: 0 !important; } 18 | 19 | .p-0 { padding: 0 !important; } 20 | .pt-0 { padding-top: 0 !important; } 21 | .pb-0 { padding-bottom: 0 !important; } 22 | .pl-0 { padding-left: 0 !important; } 23 | .pr-0 { padding-right: 0 !important; } 24 | 25 | .px-0 { 26 | padding-left: 0 !important; 27 | padding-right: 0 !important; 28 | } 29 | 30 | .py-0 { 31 | padding-top: 0 !important; 32 | padding-bottom: 0 !important; 33 | } 34 | 35 | .m-0 { margin: 0 !important; } 36 | .mt-0 { margin-top: 0 !important; } 37 | .mb-0 { margin-bottom: 0 !important; } 38 | .ml-0 { margin-left: 0 !important; } 39 | .mr-0 { margin-right: 0 !important; } 40 | 41 | .mx-0 { 42 | margin-left: 0 !important; 43 | margin-right: 0 !important; 44 | } 45 | 46 | .my-0 { 47 | margin-top: 0 !important; 48 | margin-bottom: 0 !important; 49 | } 50 | 51 | @media screen and (max-width: $sm-and-below) { 52 | .p-0-sm { padding: 0 !important; } 53 | .pt-0-sm { padding-top: 0 !important; } 54 | .pb-0-sm { padding-bottom: 0 !important; } 55 | .pl-0-sm { padding-left: 0 !important; } 56 | .pr-0-sm { padding-right: 0 !important; } 57 | 58 | .px-0-sm { 59 | padding-left: 0 !important; 60 | padding-right: 0 !important; 61 | } 62 | 63 | .py-0-sm { 64 | padding-top: 0 !important; 65 | padding-bottom: 0 !important; 66 | } 67 | 68 | .m-0-sm { margin: 0 !important; } 69 | .mt-0-sm { margin-top: 0 !important; } 70 | .mb-0-sm { margin-bottom: 0 !important; } 71 | .ml-0-sm { margin-left: 0 !important; } 72 | .mr-0-sm { margin-right: 0 !important; } 73 | 74 | .mx-0-sm { 75 | margin-left: 0 !important; 76 | margin-right: 0 !important; 77 | } 78 | 79 | .my-0-sm { 80 | margin-top: 0 !important; 81 | margin-bottom: 0 !important; 82 | } 83 | } 84 | 85 | @media screen and (min-width: $md-lower) and (max-width: $md-upper) { 86 | .p-0-md { padding: 0 !important; } 87 | .pt-0-md { padding-top: 0 !important; } 88 | .pb-0-md { padding-bottom: 0 !important; } 89 | .pl-0-md { padding-left: 0 !important; } 90 | .pr-0-md { padding-right: 0 !important; } 91 | 92 | .px-0-md { 93 | padding-left: 0 !important; 94 | padding-right: 0 !important; 95 | } 96 | 97 | .py-0-md { 98 | padding-top: 0 !important; 99 | padding-bottom: 0 !important; 100 | } 101 | 102 | .m-0-md { margin: 0 !important; } 103 | .mt-0-md { margin-top: 0 !important; } 104 | .mb-0-md { margin-bottom: 0 !important; } 105 | .ml-0-md { margin-left: 0 !important; } 106 | .mr-0-md { margin-right: 0 !important; } 107 | 108 | .mx-0-md { 109 | margin-left: 0 !important; 110 | margin-right: 0 !important; 111 | } 112 | 113 | .my-0-md { 114 | margin-top: 0 !important; 115 | margin-bottom: 0 !important; 116 | } 117 | } 118 | 119 | @media screen and (min-width: $lg-and-above) { 120 | .p-0-lg { padding: 0 !important; } 121 | .pt-0-lg { padding-top: 0 !important; } 122 | .pb-0-lg { padding-bottom: 0 !important; } 123 | .pl-0-lg { padding-left: 0 !important; } 124 | .pr-0-lg { padding-right: 0 !important; } 125 | 126 | .px-0-lg { 127 | padding-left: 0 !important; 128 | padding-right: 0 !important; 129 | } 130 | 131 | .py-0-lg { 132 | padding-top: 0 !important; 133 | padding-bottom: 0 !important; 134 | } 135 | 136 | .m-0-lg { margin: 0 !important; } 137 | .mt-0-lg { margin-top: 0 !important; } 138 | .mb-0-lg { margin-bottom: 0 !important; } 139 | .ml-0-lg { margin-left: 0 !important; } 140 | .mr-0-lg { margin-right: 0 !important; } 141 | 142 | .mx-0-lg { 143 | margin-left: 0 !important; 144 | margin-right: 0 !important; 145 | } 146 | 147 | .my-0-lg { 148 | margin-top: 0 !important; 149 | margin-bottom: 0 !important; 150 | } 151 | } 152 | 153 | 154 | 155 | 156 | 157 | -------------------------------------------------------------------------------- /src/docs/scripts/about.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/docs/scripts/application.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/docs/scripts/home.vue: -------------------------------------------------------------------------------- 1 | 154 | 231 | -------------------------------------------------------------------------------- /src/docs/scripts/site.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import VueRouter from 'vue-router'; 3 | Vue.use(VueRouter); 4 | import application from './application.vue'; 5 | import home from './home.vue'; 6 | 7 | Vue.config.devtools = true; 8 | 9 | const routes = [ 10 | { path: '/', component: home } 11 | ]; 12 | 13 | const router = new VueRouter({ 14 | routes 15 | }); 16 | 17 | window.onload = () => { 18 | new Vue({ 19 | name: 'app', 20 | el: '#app', 21 | router, 22 | render(h){ 23 | return h(application); 24 | } 25 | }); 26 | }; --------------------------------------------------------------------------------