├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── jsconfig.json ├── package.json ├── postcss.config.js ├── public ├── demo.gif ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon-96x96.png ├── favicon.ico ├── index.html └── screenshot.png ├── src ├── App.vue ├── assets │ ├── css │ │ ├── main.css │ │ └── normalize.css │ └── icons │ │ ├── arrow.svg │ │ └── check.svg ├── components │ ├── CSSCode.vue │ ├── HTMLCode.vue │ ├── Preview.vue │ ├── Sidebar.vue │ ├── fields │ │ ├── Accordion.vue │ │ ├── ColorPicker.vue │ │ ├── CustomSelect.vue │ │ ├── InputNumber.vue │ │ ├── Range.vue │ │ └── Switch.vue │ └── settings │ │ ├── Border.vue │ │ ├── General.vue │ │ ├── Padding.vue │ │ ├── Position.vue │ │ ├── Shadow.vue │ │ └── Triangle.vue ├── directives │ ├── highlightjs.js │ └── index.js ├── main.js ├── mixins │ └── settings-fields.js ├── store │ └── index.js └── utils │ ├── css-helpers.js │ ├── tooltip-styles.js │ └── triangle-styles.js ├── tailwind.config.js └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | end_of_line = lf 5 | trim_trailing_whitespace = true 6 | insert_final_newline = true 7 | max_line_length = 100 8 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'eol-last': 0, 15 | 'no-trailing-spaces': 0, 16 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 17 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Victoria Iashchuk 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![License](https://img.shields.io/github/license/viashchuk/tooltip-generator)](https://github.com/viashchuk/tooltip-generator/blob/master/LICENSE) 2 | [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-ff69b4)](https://github.com/viashchuk/tooltip-generator/pulls) 3 | 4 | ## Tooltip Generator 5 | > A tool to generate CSS code for tooltips 6 | 7 | Do you urgently need a tooltip, but you are lazy to do it from scratch? There is a way out! This tool allows you to generate CSS and HTML code with a simple set of actions in the right sidebar that you can simply copy and paste 😉 8 | 9 | I hope it will save you time! 10 | 11 | 12 | Demo video 13 | 14 | 15 | ## Demo 16 | Here is a working live demo: https://viashchuk.github.io/tooltip-generator 17 | 18 | ## Built With 19 | 20 | - [Vue.js](https://github.com/vuejs/vue) 21 | - [Tailwind CSS](https://github.com/tailwindcss/tailwindcss) 22 | - [Highlight.js](https://github.com/highlightjs/highlight.js) 23 | - [Vue CLI](https://github.com/vuejs/vue-cli) 24 | 25 | ## Installation 26 | 27 | ``` bash 28 | # install dependencies 29 | npm install 30 | 31 | # serve with hot reload at localhost:8080 32 | npm run serve 33 | 34 | # build for production with minification 35 | npm run build 36 | ``` 37 | 38 | ## Contribution 39 | All contributions, big or small, are warmheartedly welcome! 40 | 41 | ## License 42 | 43 | [MIT](https://github.com/viashchuk/tooltip-generator/blob/master/LICENSE) 44 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "allowJs": true, 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "paths": { 6 | "@/*": ["./src/*"] 7 | } 8 | }, 9 | "include": ["src/**/*"], 10 | "exclude": ["node_modules"] 11 | } 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tooltip", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.4", 12 | "highlight.js": "^10.0.3", 13 | "lodash.pick": "^4.4.0", 14 | "sass": "^1.26.5", 15 | "sass-loader": "^8.0.2", 16 | "tailwindcss": "^1.4.4", 17 | "vue": "^2.6.11", 18 | "vuex": "^3.4.0" 19 | }, 20 | "devDependencies": { 21 | "@fullhuman/postcss-purgecss": "^2.1.2", 22 | "@vue/cli-plugin-babel": "~4.3.0", 23 | "@vue/cli-plugin-eslint": "~4.3.0", 24 | "@vue/cli-service": "~4.3.0", 25 | "babel-eslint": "^10.1.0", 26 | "eslint": "^6.7.2", 27 | "eslint-plugin-import": "^2.20.1", 28 | "eslint-plugin-node": "^11.0.0", 29 | "eslint-plugin-promise": "^4.2.1", 30 | "eslint-plugin-standard": "^4.0.0", 31 | "eslint-plugin-vue": "^6.1.2", 32 | "@vue/eslint-config-standard": "^5.1.0", 33 | "purgecss": "^2.1.2", 34 | "vue-template-compiler": "^2.6.11" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const tailwindcss = require('tailwindcss') 2 | const autoprefixer = require('autoprefixer') 3 | 4 | const plugins = [ 5 | tailwindcss('./tailwind.config.js'), 6 | autoprefixer({ 7 | add: true, 8 | grid: true 9 | }) 10 | ] 11 | 12 | module.exports = { plugins } 13 | -------------------------------------------------------------------------------- /public/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/viashchuk/tooltip-generator/21ea1311d36bacc4a67dcc2ab55077d35c48d369/public/demo.gif -------------------------------------------------------------------------------- /public/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/viashchuk/tooltip-generator/21ea1311d36bacc4a67dcc2ab55077d35c48d369/public/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/viashchuk/tooltip-generator/21ea1311d36bacc4a67dcc2ab55077d35c48d369/public/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/viashchuk/tooltip-generator/21ea1311d36bacc4a67dcc2ab55077d35c48d369/public/favicon-96x96.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/viashchuk/tooltip-generator/21ea1311d36bacc4a67dcc2ab55077d35c48d369/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | <%= htmlWebpackPlugin.options.title %> 11 | 12 | 13 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /public/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/viashchuk/tooltip-generator/21ea1311d36bacc4a67dcc2ab55077d35c48d369/public/screenshot.png -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 21 | -------------------------------------------------------------------------------- /src/assets/css/main.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss/base"; 2 | 3 | @import "tailwindcss/components"; 4 | 5 | @import "tailwindcss/utilities"; 6 | 7 | @import "normalize.css"; 8 | 9 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap'); 10 | 11 | body { 12 | font-family: 'Montserrat', sans-serif; 13 | margin: 0; 14 | } 15 | 16 | .btn-tooltip { 17 | @apply rounded-full flex items-center justify-center bg-blue-500 h-20 w-20; 18 | @apply text-white uppercase text-sm font-bold leading-none -mt-20 relative; 19 | } 20 | 21 | .btn-tooltip:hover { 22 | animation: none; 23 | } 24 | 25 | .btn-tooltip:before, 26 | .btn-tooltip:after { 27 | content: ''; 28 | @apply absolute rounded-full; 29 | background: rgba(77, 161, 255, .7); 30 | animation: puls 1.5s linear infinite; 31 | left: 0; 32 | right: 0; 33 | top: 0; 34 | bottom: 0; 35 | opacity: 0; 36 | width: 100%; 37 | height: 100%; 38 | z-index: 0; 39 | } 40 | 41 | .btn-tooltip:after { 42 | animation-delay: .3s; 43 | } 44 | 45 | @keyframes puls { 46 | 0% { 47 | transform: scale(1); 48 | opacity: 0; 49 | } 50 | 50% { 51 | transform: scale(1); 52 | opacity: 1; 53 | } 54 | 100% { 55 | transform: scale(1.6); 56 | opacity: 0; 57 | } 58 | } 59 | 60 | .settings__item { 61 | @apply w-full flex items-center justify-between text-sm uppercase; 62 | @apply font-bold text-gray-600 pb-3 border-b border-gray-300 leading-none transition duration-500; 63 | } 64 | 65 | .settings__item:focus { 66 | @apply outline-none; 67 | } 68 | 69 | .settings__item > img { 70 | @apply transition duration-500; 71 | } 72 | 73 | .settings__item:hover, 74 | .settings__item.active { 75 | @apply text-gray-600; 76 | } 77 | 78 | .settings__item:hover > img, 79 | .settings__item.active > img { 80 | @apply opacity-100; 81 | } 82 | 83 | .settings__item.active > img { 84 | @apply transform rotate-180; 85 | } 86 | 87 | .custom-checkbox input { 88 | @apply hidden; 89 | } 90 | 91 | .custom-checkbox { 92 | @apply relative flex items-center text-blue-900 capitalize mb-3 cursor-pointer; 93 | } 94 | 95 | .custom-checkbox span { 96 | @apply flex items-center justify-center bg-blue-500o25 w-4 h-4 rounded-full mr-3 border border-blue-500o25 transition duration-500; 97 | } 98 | 99 | .custom-checkbox span:before { 100 | content: ''; 101 | width: 8px; 102 | height: 6px; 103 | background: url('../icons/check.svg'); 104 | background-size: cover; 105 | @apply opacity-0 transition duration-500; 106 | } 107 | 108 | .custom-checkbox:hover span { 109 | @apply border-blue-500; 110 | } 111 | 112 | .custom-checkbox input:checked ~ span { 113 | @apply border-blue-500 bg-blue-500; 114 | } 115 | 116 | .custom-checkbox input:checked ~ span:before { 117 | @apply opacity-100; 118 | } 119 | 120 | .fade-enter-active, .fade-leave-active { 121 | transition: opacity .2s; 122 | } 123 | 124 | .fade-enter, .fade-leave-to { 125 | opacity: 0; 126 | } 127 | 128 | input:focus, 129 | button:focus, 130 | select:focus { 131 | @apply outline-none; 132 | } 133 | 134 | input[type=number]::-webkit-outer-spin-button, 135 | input[type=number]::-webkit-inner-spin-button { 136 | -webkit-appearance: none; 137 | appearance: none; 138 | } 139 | 140 | input[type=number] { 141 | -moz-appearance: textfield; 142 | } 143 | 144 | input[type=color]::-webkit-color-swatch-wrapper { 145 | @apply p-0; 146 | } 147 | 148 | 149 | input[type=color]::-webkit-color-swatch { 150 | @apply border-none; 151 | } 152 | 153 | .input--number button:disabled { 154 | @apply opacity-25 cursor-not-allowed; 155 | } 156 | 157 | .switch input { 158 | @apply hidden; 159 | } 160 | 161 | .switch span { 162 | @apply flex bg-gray-900o11 rounded-full w-12 h-5 relative cursor-pointer; 163 | transition: .3s; 164 | } 165 | 166 | .switch span:before { 167 | content: ''; 168 | @apply absolute w-6 h-6 bg-white left-0 rounded-full; 169 | border: 1px solid #D0D7DD; 170 | box-shadow: 0 4px 4px rgba(0, 0, 0, .04); 171 | top: -2px; 172 | transition: .2s; 173 | } 174 | 175 | .switch input:checked ~ span { 176 | @apply bg-blue-500; 177 | } 178 | 179 | .switch input:checked ~ span:before { 180 | left: calc(100% - 24px); 181 | } 182 | 183 | /*range*/ 184 | 185 | input[type=range] { 186 | -webkit-appearance: none; 187 | width: 100%; 188 | margin: 0; 189 | height: 11px; 190 | } 191 | input[type=range]:hover ~ div .thumb { 192 | @apply border-blue-500; 193 | } 194 | 195 | input[type=range]::-moz-focus-outer { 196 | border: 0; 197 | } 198 | 199 | input[type=range] { 200 | @apply w-full h-full block absolute z-20; 201 | top: 50%; 202 | transform: translateY(-50%); 203 | background: transparent; 204 | } 205 | 206 | input[type=range] + div .thumb { 207 | top: 50%; 208 | transform: translateY(-50%); 209 | transition: .2s; 210 | } 211 | input[type=range]:focus { 212 | outline: none; 213 | } 214 | input[type=range]::-webkit-slider-runnable-track { 215 | width: 100%; 216 | height: 8px; 217 | cursor: pointer; 218 | background: transparent; 219 | @apply rounded-md; 220 | } 221 | input[type=range]::-webkit-slider-thumb { 222 | cursor: pointer; 223 | -webkit-appearance: none; 224 | margin-top: -7px; 225 | width: 20px; 226 | height: 20px; 227 | background: transparent; 228 | border-radius: 59%; 229 | border: none; 230 | position: relative; 231 | z-index: 1; 232 | transition: .2s; 233 | } 234 | 235 | input[type=range]::-moz-range-track { 236 | width: 100%; 237 | height: 8px; 238 | cursor: pointer; 239 | background: transparent; 240 | border-radius: 6px; 241 | } 242 | input[type=range]::-moz-range-thumb { 243 | cursor: pointer; 244 | -webkit-appearance: none; 245 | margin-top: -14px; 246 | width: 15px; 247 | height: 15px; 248 | background: transparent; 249 | border-radius: 59%; 250 | border: none; 251 | position: relative; 252 | z-index: 2000; 253 | transition: .2s; 254 | } 255 | input[type=range]::-ms-track { 256 | width: 100%; 257 | height: 8px; 258 | cursor: pointer; 259 | background: transparent; 260 | border-radius: 6px; 261 | } 262 | input[type=range]::-ms-fill-lower { 263 | background: transparent; 264 | border: none; 265 | border-radius: 2.6px; 266 | } 267 | input[type=range]::-ms-fill-upper { 268 | background: transparent; 269 | border: none; 270 | border-radius: 2.6px; 271 | } 272 | input[type=range]::-ms-thumb { 273 | cursor: pointer; 274 | -webkit-appearance: none; 275 | margin-top: -14px; 276 | width: 15px; 277 | height: 15px; 278 | background: transparent; 279 | border-radius: 59%; 280 | border: none; 281 | position: relative; 282 | z-index: 1; 283 | transition: .2s; 284 | } 285 | input[type=range]:hover::-webkit-slider-thumb { 286 | border: none; 287 | } 288 | 289 | select { 290 | @apply border-none bg-transparent text-xs text-blue-900; 291 | appearance: none; 292 | } 293 | 294 | .hljs-attribute { 295 | padding-left: 30px; 296 | } 297 | 298 | .hljs { 299 | height: auto; 300 | overflow: visible; 301 | display: block; 302 | padding-bottom: 40px; 303 | } 304 | -------------------------------------------------------------------------------- /src/assets/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /src/assets/icons/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | chevron 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/icons/check.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | tick icon 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/components/CSSCode.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 39 | -------------------------------------------------------------------------------- /src/components/HTMLCode.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 35 | -------------------------------------------------------------------------------- /src/components/Preview.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 76 | -------------------------------------------------------------------------------- /src/components/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 58 | -------------------------------------------------------------------------------- /src/components/fields/Accordion.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 38 | -------------------------------------------------------------------------------- /src/components/fields/ColorPicker.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 41 | -------------------------------------------------------------------------------- /src/components/fields/CustomSelect.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 55 | -------------------------------------------------------------------------------- /src/components/fields/InputNumber.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 61 | -------------------------------------------------------------------------------- /src/components/fields/Range.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 55 | -------------------------------------------------------------------------------- /src/components/fields/Switch.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 37 | -------------------------------------------------------------------------------- /src/components/settings/Border.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 65 | -------------------------------------------------------------------------------- /src/components/settings/General.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 56 | -------------------------------------------------------------------------------- /src/components/settings/Padding.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 41 | -------------------------------------------------------------------------------- /src/components/settings/Position.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 37 | -------------------------------------------------------------------------------- /src/components/settings/Shadow.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 53 | -------------------------------------------------------------------------------- /src/components/settings/Triangle.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 36 | -------------------------------------------------------------------------------- /src/directives/highlightjs.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | import hljs from 'highlight.js' 4 | import 'highlight.js/scss/default.scss' 5 | 6 | const highlightBlocks = (el, binding) => { 7 | const targets = el.querySelectorAll('code') 8 | 9 | targets.forEach((target) => { 10 | if (binding.value) { 11 | target.textContent = binding.value 12 | hljs.highlightBlock(target) 13 | } 14 | }) 15 | } 16 | 17 | Vue.directive('highlightjs', { 18 | deep: true, 19 | bind: highlightBlocks, 20 | componentUpdated: highlightBlocks 21 | }) 22 | -------------------------------------------------------------------------------- /src/directives/index.js: -------------------------------------------------------------------------------- 1 | import './highlightjs' 2 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | 3 | import App from './App' 4 | import store from './store' 5 | 6 | import './directives' 7 | import './assets/css/main.css' 8 | 9 | Vue.config.productionTip = false 10 | 11 | new Vue({ 12 | render: (h) => h(App), 13 | store 14 | }).$mount('#app') 15 | -------------------------------------------------------------------------------- /src/mixins/settings-fields.js: -------------------------------------------------------------------------------- 1 | import { mapGetters, mapMutations } from 'vuex' 2 | 3 | export default { 4 | data: () => ({ 5 | fields: [] 6 | }), 7 | 8 | computed: { 9 | ...mapGetters([ 10 | 'getFields' 11 | ]), 12 | form () { 13 | return this.getFields(this.fields) 14 | } 15 | }, 16 | 17 | methods: { 18 | ...mapMutations([ 19 | 'updateSettings' 20 | ]), 21 | sync () { 22 | this.updateSettings(this.form) 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | import _pick from 'lodash.pick' 5 | 6 | Vue.use(Vuex) 7 | 8 | const store = new Vuex.Store({ 9 | state: { 10 | settings: { 11 | position: 'bottom', 12 | bg_color: '#59c7f9', 13 | width: 200, 14 | align_text: 'center', 15 | text_color: '#ffffff', 16 | padding_top: 10, 17 | padding_bottom: 10, 18 | padding_left: 20, 19 | padding_right: 20, 20 | border_radius: 10, 21 | border: false, 22 | border_color: '#000000', 23 | border_width_top: 1, 24 | border_width_bottom: 1, 25 | border_width_left: 1, 26 | border_width_right: 1, 27 | border_type: 'solid', 28 | shadow: false, 29 | shadow_color: '#000000', 30 | shadow_horizontal: 0, 31 | shadow_vertical: 0, 32 | shadow_blur: 0, 33 | triangle_width: 12, 34 | triangle_height: 6, 35 | text: 'Tooltip' 36 | } 37 | }, 38 | 39 | getters: { 40 | getSettings: state => state.settings, 41 | getFields: state => keys => _pick(state.settings, keys) 42 | }, 43 | 44 | mutations: { 45 | updateSettings (state, payload) { 46 | state.settings = Object.assign({}, state.settings, payload) 47 | } 48 | } 49 | }) 50 | 51 | export default store 52 | -------------------------------------------------------------------------------- /src/utils/css-helpers.js: -------------------------------------------------------------------------------- 1 | export const objectToCss = (cssObj) => { 2 | return Object.keys(cssObj) 3 | .reduce((str, key) => { 4 | const properties = JSON.stringify(cssObj[key].style) 5 | .replace(/"/g, '') 6 | .replace(/[A-Z]/g, match => `-${match.toLowerCase()}`) 7 | .replace(/,/g, ';\n') 8 | .replace(/:/g, ': ') 9 | .replace(/{/g, '\n') 10 | .replace(/}/g, '\n') 11 | str += `\n.${key} { ${properties} }` 12 | return str 13 | }, '') 14 | } 15 | -------------------------------------------------------------------------------- /src/utils/tooltip-styles.js: -------------------------------------------------------------------------------- 1 | const generateTooltipCss = (settings) => { 2 | const styles = { 3 | width: `${settings.width}px`, 4 | background: `${settings.bg_color}`, 5 | color: `${settings.text_color}`, 6 | textAlign: `${settings.align_text}`, 7 | padding: `${settings.padding_top}px ${settings.padding_right}px ${settings.padding_bottom}px ${settings.padding_left}px` 8 | } 9 | 10 | if (parseInt(settings.border_radius) !== 0) { 11 | styles.borderRadius = `${settings.border_radius}px` 12 | } 13 | 14 | if (settings.border) { 15 | styles.border = `${settings.border_type} ${settings.border_color}` 16 | styles.borderWidth = `${settings.border_width_top}px ${settings.border_width_right}px ${settings.border_width_bottom}px ${settings.border_width_left}px` 17 | } 18 | 19 | if (settings.shadow) { 20 | styles.boxShadow = `${settings.shadow_horizontal}px ${settings.shadow_vertical}px ${settings.shadow_blur}px ${settings.shadow_color}` 21 | } 22 | 23 | if (settings.position === 'top') { 24 | styles.bottom = `calc(100% + ${settings.triangle_height + 5}px)` 25 | styles.left = '50%' 26 | styles.transform = 'translateX(-50%)' 27 | } else { 28 | styles.top = `calc(100% + ${settings.triangle_height + 5}px)` 29 | styles.left = '50%' 30 | styles.transform = 'translateX(-50%)' 31 | } 32 | 33 | if (settings.position === 'left') { 34 | styles.right = `calc(100% + ${settings.triangle_height + 5}px)` 35 | styles.top = '50%' 36 | styles.transform = 'translateY(-50%)' 37 | styles.left = 'inherit' 38 | } 39 | 40 | if (settings.position === 'right') { 41 | styles.left = `calc(100% + ${settings.triangle_height + 5}px)` 42 | styles.top = '50%' 43 | styles.transform = 'translateY(-50%)' 44 | } 45 | 46 | return styles 47 | } 48 | 49 | export default generateTooltipCss 50 | -------------------------------------------------------------------------------- /src/utils/triangle-styles.js: -------------------------------------------------------------------------------- 1 | const generateTriangleCss = (settings) => { 2 | const styles = { 3 | borderWidth: `0 ${settings.triangle_width / 2}px ${settings.triangle_height}px`, 4 | borderColor: 'transparent', 5 | borderBottomColor: `${settings.bg_color}`, 6 | position: 'absolute' 7 | } 8 | 9 | if (settings.position === 'top') { 10 | if (settings.border) { 11 | styles.bottom = `-${settings.triangle_height + parseInt(settings.border_width_bottom)}px` 12 | } else { 13 | styles.bottom = `-${settings.triangle_height}px` 14 | } 15 | styles.transform = 'rotate(180deg) translateX(-50%)' 16 | styles.left = `calc(50% - ${settings.triangle_width}px)` 17 | } 18 | 19 | if (settings.position === 'bottom') { 20 | if (settings.border) { 21 | styles.top = `-${settings.triangle_height + parseInt(settings.border_width_top)}px` 22 | } else { 23 | styles.top = `-${settings.triangle_height}px` 24 | } 25 | styles.left = '50%' 26 | styles.transform = 'translateX(-50%)' 27 | } 28 | 29 | if (settings.position === 'left') { 30 | if (settings.border) { 31 | styles.right = `calc(-${settings.triangle_height}px - ${settings.border_width_right}px)` 32 | styles.top = `calc(50% - ${(settings.triangle_height + parseInt(settings.border_width_top)) / 2}px)` 33 | } else { 34 | styles.right = `-${settings.triangle_height}px` 35 | styles.top = `calc(50% - ${settings.triangle_height / 2}px)` 36 | } 37 | styles.transform = 'rotate(90deg) translateY(-50%)' 38 | } 39 | 40 | if (settings.position === 'right') { 41 | if (settings.border) { 42 | styles.left = `calc(-${settings.triangle_height}px - ${settings.border_width_left}px)` 43 | styles.top = `calc(50% - ${(settings.triangle_height + parseInt(settings.border_width_top)) / 2}px)` 44 | } else { 45 | styles.left = `-${settings.triangle_height}px` 46 | styles.top = `calc(50% - ${settings.triangle_height / 2}px)` 47 | } 48 | styles.transform = 'rotate(270deg) translateY(-50%)' 49 | } 50 | 51 | return styles 52 | } 53 | 54 | export default generateTriangleCss 55 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [ 3 | './src/**/*.vue' 4 | ], 5 | target: 'relaxed', 6 | prefix: '', 7 | important: false, 8 | separator: ':', 9 | theme: { 10 | screens: { 11 | sm: '640px', 12 | md: '768px', 13 | lg: '1024px', 14 | xl: '1280px' 15 | }, 16 | colors: { 17 | transparent: 'transparent', 18 | current: 'currentColor', 19 | 20 | black: '#000', 21 | white: '#fff', 22 | 23 | gray: { 24 | 100: '#D0D7DD', 25 | 200: '#DCE0E5', 26 | 300: '#EEEEEE', 27 | 400: '#E9EFF4', 28 | 500: '#a0aec0', 29 | 600: '#808FA3', 30 | 700: '#F4F7F9', 31 | '700o40': 'rgba(244,247,249,.4)', 32 | 800: '#2d3748', 33 | 900: '#2b303b', 34 | '900o11': 'rgba(152,152,152,.11)', 35 | 1000: '#4A5568' 36 | }, 37 | red: { 38 | 100: '#f0f0f0',// 39 | 200: '#fed7d7', 40 | 300: '#feb2b2', 41 | 400: '#fc8181', 42 | 500: '#f56565', 43 | 600: '#e53e3e', // 44 | 700: '#c53030', 45 | 800: '#9b2c2c', 46 | 900: '#742a2a' 47 | }, 48 | orange: { 49 | 100: '#fffaf0', 50 | 200: '#feebc8', 51 | 300: '#fbd38d', 52 | 400: '#f6ad55', 53 | 500: '#ed8936', 54 | 600: '#dd6b20', 55 | 700: '#c05621', 56 | 800: '#9c4221', 57 | 900: '#7b341e' 58 | }, 59 | yellow: { 60 | 100: '#fffff0', 61 | 200: '#fefcbf', 62 | 300: '#faf089', 63 | 400: '#f6e05e', 64 | 500: '#ecc94b', 65 | 600: '#d69e2e', 66 | 700: '#b7791f', 67 | 800: '#975a16', 68 | 900: '#744210' 69 | }, 70 | green: { 71 | 100: '#f0fff4', 72 | 200: '#c6f6d5', 73 | 300: '#9ae6b4', 74 | 400: '#68d391', 75 | 500: '#48bb78', 76 | 600: '#38a169', 77 | 700: '#2f855a', 78 | 800: '#276749', 79 | 900: '#233539' 80 | }, 81 | teal: { 82 | 100: '#e6fffa', 83 | 200: '#b2f5ea', 84 | 300: '#81e6d9', 85 | 400: '#4fd1c5', 86 | 500: '#38b2ac', 87 | 600: '#319795', 88 | 700: '#2c7a7b', 89 | 800: '#285e61', 90 | 900: '#234e52' 91 | }, 92 | blue: { 93 | 100: '#F4F8F9', 94 | 200: '#bee3f8', 95 | 300: '#90cdf4', 96 | 400: '#63b3ed', 97 | 500: '#4DA1FF', 98 | '500o25': 'rgba(77,161,255,.25)', 99 | 600: '#3182ce', 100 | 700: '#2b6cb0', 101 | 800: '#2c5282', 102 | 900: '#323C47' 103 | }, 104 | indigo: { 105 | 100: '#ebf4ff', 106 | 200: '#c3dafe', 107 | 300: '#a3bffa', 108 | 400: '#7f9cf5', 109 | 500: '#667eea', 110 | 600: '#5a67d8', 111 | 700: '#4c51bf', 112 | 800: '#434190', 113 | 900: '#3c366b' 114 | }, 115 | purple: { 116 | 100: '#faf5ff', 117 | 200: '#e9d8fd', 118 | 300: '#d6bcfa', 119 | 400: '#b794f4', 120 | 500: '#9f7aea', 121 | 600: '#805ad5', 122 | 700: '#6b46c1', 123 | 800: '#553c9a', 124 | 900: '#44337a' 125 | }, 126 | pink: { 127 | 100: '#fff5f7', 128 | 200: '#fed7e2', 129 | 300: '#fbb6ce', 130 | 400: '#f687b3', 131 | 500: '#ed64a6', 132 | 600: '#d53f8c', 133 | 700: '#b83280', 134 | 800: '#97266d', 135 | 900: '#702459' 136 | } 137 | }, 138 | spacing: { 139 | px: '1px', 140 | 0: '0', 141 | 1: '0.25rem', 142 | 2: '0.5rem', 143 | 3: '0.75rem', 144 | 4: '1rem', 145 | 5: '1.25rem', 146 | 6: '1.5rem', 147 | 8: '2rem', 148 | 10: '2.5rem', 149 | 12: '3rem', 150 | 15: '15px', 151 | 16: '4rem', 152 | 20: '5rem', 153 | 24: '6rem', 154 | 32: '8rem', 155 | 40: '10rem', 156 | 48: '12rem', 157 | 56: '14rem', 158 | 64: '16rem' 159 | }, 160 | backgroundColor: theme => theme('colors'), 161 | backgroundOpacity: theme => theme('opacity'), 162 | backgroundPosition: { 163 | bottom: 'bottom', 164 | center: 'center', 165 | left: 'left', 166 | 'left-bottom': 'left bottom', 167 | 'left-top': 'left top', 168 | right: 'right', 169 | 'right-bottom': 'right bottom', 170 | 'right-top': 'right top', 171 | top: 'top' 172 | }, 173 | backgroundSize: { 174 | auto: 'auto', 175 | cover: 'cover', 176 | contain: 'contain' 177 | }, 178 | borderColor: theme => ({ 179 | ...theme('colors'), 180 | default: theme('colors.gray.300', 'currentColor') 181 | }), 182 | borderOpacity: theme => theme('opacity'), 183 | borderRadius: { 184 | none: '0', 185 | sm: '0.125rem', 186 | default: '0.25rem', 187 | md: '0.375rem', 188 | lg: '0.5rem', 189 | full: '9999px' 190 | }, 191 | borderWidth: { 192 | default: '1px', 193 | 0: '0', 194 | 2: '2px', 195 | 4: '4px', 196 | 8: '8px' 197 | }, 198 | boxShadow: { 199 | xs: '0 2px 9px 0 rgba(0, 0, 0, 0.02)', 200 | sm: '0 4px 4px rgba(0,0,0,.04)', 201 | default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', 202 | md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', 203 | lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', 204 | xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', 205 | '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', 206 | inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', 207 | outline: '0 0 0 3px rgba(66, 153, 225, 0.5)', 208 | none: 'none' 209 | }, 210 | container: {}, 211 | cursor: { 212 | auto: 'auto', 213 | default: 'default', 214 | pointer: 'pointer', 215 | wait: 'wait', 216 | text: 'text', 217 | move: 'move', 218 | 'not-allowed': 'not-allowed' 219 | }, 220 | divideColor: theme => theme('borderColor'), 221 | divideOpacity: theme => theme('borderOpacity'), 222 | divideWidth: theme => theme('borderWidth'), 223 | fill: { 224 | current: 'currentColor' 225 | }, 226 | flex: { 227 | 1: '1 1 0%', 228 | auto: '1 1 auto', 229 | initial: '0 1 auto', 230 | none: 'none' 231 | }, 232 | flexGrow: { 233 | 0: '0', 234 | default: '1' 235 | }, 236 | flexShrink: { 237 | 0: '0', 238 | default: '1' 239 | }, 240 | fontFamily: { 241 | sans: [ 242 | 'system-ui', 243 | '-apple-system', 244 | 'BlinkMacSystemFont', 245 | '"Segoe UI"', 246 | 'Roboto', 247 | '"Helvetica Neue"', 248 | 'Arial', 249 | '"Noto Sans"', 250 | 'sans-serif', 251 | '"Apple Color Emoji"', 252 | '"Segoe UI Emoji"', 253 | '"Segoe UI Symbol"', 254 | '"Noto Color Emoji"' 255 | ], 256 | serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'], 257 | mono: ['Menlo', 'Monaco', 'Consolas', '"Liberation Mono"', '"Courier New"', 'monospace'] 258 | }, 259 | fontSize: { 260 | xxs: '0.65rem', 261 | xs: '0.75rem', 262 | sm: '0.875rem', 263 | base: '1rem', 264 | lg: '1.125rem', 265 | xl: '1.25rem', 266 | '2xl': '1.5rem', 267 | '3xl': '1.875rem', 268 | '4xl': '2.25rem', 269 | '5xl': '3rem', 270 | '6xl': '4rem' 271 | }, 272 | fontWeight: { 273 | hairline: '100', 274 | thin: '200', 275 | light: '300', 276 | normal: '400', 277 | medium: '500', 278 | semibold: '600', 279 | bold: '700', 280 | extrabold: '800', 281 | black: '900' 282 | }, 283 | height: theme => ({ 284 | auto: 'auto', 285 | ...theme('spacing'), 286 | '1/2': '50%', 287 | '1/3': '33.3%', 288 | 200: '200px', 289 | '100vh90': 'calc(100vh - 90px)', 290 | full: '100%', 291 | screen: '100vh', 292 | '100vh48': 'calc(100vh - 48px)' 293 | }), 294 | inset: { 295 | 0: '0', 296 | auto: 'auto' 297 | }, 298 | letterSpacing: { 299 | tighter: '-0.05em', 300 | tight: '-0.025em', 301 | normal: '0', 302 | wide: '0.025em', 303 | wider: '0.05em', 304 | widest: '0.1em' 305 | }, 306 | lineHeight: { 307 | none: '1', 308 | tight: '1.25', 309 | snug: '1.375', 310 | normal: '1.5', 311 | relaxed: '1.625', 312 | loose: '2', 313 | 3: '.75rem', 314 | 4: '1rem', 315 | 5: '1.25rem', 316 | 6: '1.5rem', 317 | 7: '1.75rem', 318 | 8: '2rem', 319 | 9: '2.25rem', 320 | 10: '2.5rem' 321 | }, 322 | listStyleType: { 323 | none: 'none', 324 | disc: 'disc', 325 | decimal: 'decimal' 326 | }, 327 | margin: (theme, { negative }) => ({ 328 | auto: 'auto', 329 | ...theme('spacing'), 330 | ...negative(theme('spacing')) 331 | }), 332 | maxHeight: { 333 | full: '100%', 334 | screen: '100vh' 335 | }, 336 | maxWidth: (theme, { breakpoints }) => ({ 337 | none: 'none', 338 | xs: '20rem', 339 | sm: '24rem', 340 | md: '28rem', 341 | lg: '32rem', 342 | xl: '36rem', 343 | '2xl': '42rem', 344 | '3xl': '48rem', 345 | '4xl': '56rem', 346 | '5xl': '64rem', 347 | '6xl': '72rem', 348 | full: '100%', 349 | ...breakpoints(theme('screens')) 350 | }), 351 | minHeight: { 352 | 0: '0', 353 | full: '100%', 354 | screen: '100vh' 355 | }, 356 | minWidth: { 357 | 0: '0', 358 | full: '100%' 359 | }, 360 | objectPosition: { 361 | bottom: 'bottom', 362 | center: 'center', 363 | left: 'left', 364 | 'left-bottom': 'left bottom', 365 | 'left-top': 'left top', 366 | right: 'right', 367 | 'right-bottom': 'right bottom', 368 | 'right-top': 'right top', 369 | top: 'top' 370 | }, 371 | opacity: { 372 | 0: '0', 373 | 25: '0.25', 374 | 50: '0.5', 375 | 75: '0.75', 376 | 100: '1' 377 | }, 378 | order: { 379 | first: '-9999', 380 | last: '9999', 381 | none: '0', 382 | 1: '1', 383 | 2: '2', 384 | 3: '3', 385 | 4: '4', 386 | 5: '5', 387 | 6: '6', 388 | 7: '7', 389 | 8: '8', 390 | 9: '9', 391 | 10: '10', 392 | 11: '11', 393 | 12: '12' 394 | }, 395 | padding: theme => theme('spacing'), 396 | placeholderColor: theme => theme('colors'), 397 | placeholderOpacity: theme => theme('opacity'), 398 | space: (theme, { negative }) => ({ 399 | ...theme('spacing'), 400 | ...negative(theme('spacing')) 401 | }), 402 | stroke: { 403 | current: 'currentColor' 404 | }, 405 | strokeWidth: { 406 | 0: '0', 407 | 1: '1', 408 | 2: '2' 409 | }, 410 | textColor: theme => theme('colors'), 411 | textOpacity: theme => theme('opacity'), 412 | width: theme => ({ 413 | auto: 'auto', 414 | ...theme('spacing'), 415 | '1/2': '50%', 416 | '1/3': '33.333333%', 417 | '2/3': '66.666667%', 418 | '1/4': '25%', 419 | '2/4': '50%', 420 | '3/4': '75%', 421 | '1/5': '20%', 422 | '2/5': '40%', 423 | '3/5': '60%', 424 | '4/5': '80%', 425 | '1/6': '16.666667%', 426 | '2/6': '33.333333%', 427 | '3/6': '50%', 428 | '4/6': '66.666667%', 429 | '5/6': '83.333333%', 430 | '1/12': '8.333333%', 431 | '2/12': '16.666667%', 432 | '3/12': '25%', 433 | '4/12': '33.333333%', 434 | '5/12': '41.666667%', 435 | '6/12': '50%', 436 | '7/12': '58.333333%', 437 | '8/12': '66.666667%', 438 | '9/12': '75%', 439 | '10/12': '83.333333%', 440 | '11/12': '91.666667%', 441 | '50w12': 'calc(50% - 12px)', 442 | full: '100%', 443 | screen: '100vw' 444 | }), 445 | zIndex: { 446 | auto: 'auto', 447 | 0: '0', 448 | 10: '10', 449 | 20: '20', 450 | 30: '30', 451 | 40: '40', 452 | 50: '50' 453 | }, 454 | gap: theme => theme('spacing'), 455 | gridTemplateColumns: { 456 | none: 'none', 457 | 1: 'repeat(1, minmax(0, 1fr))', 458 | 2: 'repeat(2, minmax(0, 1fr))', 459 | 3: 'repeat(3, minmax(0, 1fr))', 460 | 4: 'repeat(4, minmax(0, 1fr))', 461 | 5: 'repeat(5, minmax(0, 1fr))', 462 | 6: 'repeat(6, minmax(0, 1fr))', 463 | 7: 'repeat(7, minmax(0, 1fr))', 464 | 8: 'repeat(8, minmax(0, 1fr))', 465 | 9: 'repeat(9, minmax(0, 1fr))', 466 | 10: 'repeat(10, minmax(0, 1fr))', 467 | 11: 'repeat(11, minmax(0, 1fr))', 468 | 12: 'repeat(12, minmax(0, 1fr))' 469 | }, 470 | gridColumn: { 471 | auto: 'auto', 472 | 'span-1': 'span 1 / span 1', 473 | 'span-2': 'span 2 / span 2', 474 | 'span-3': 'span 3 / span 3', 475 | 'span-4': 'span 4 / span 4', 476 | 'span-5': 'span 5 / span 5', 477 | 'span-6': 'span 6 / span 6', 478 | 'span-7': 'span 7 / span 7', 479 | 'span-8': 'span 8 / span 8', 480 | 'span-9': 'span 9 / span 9', 481 | 'span-10': 'span 10 / span 10', 482 | 'span-11': 'span 11 / span 11', 483 | 'span-12': 'span 12 / span 12' 484 | }, 485 | gridColumnStart: { 486 | auto: 'auto', 487 | 1: '1', 488 | 2: '2', 489 | 3: '3', 490 | 4: '4', 491 | 5: '5', 492 | 6: '6', 493 | 7: '7', 494 | 8: '8', 495 | 9: '9', 496 | 10: '10', 497 | 11: '11', 498 | 12: '12', 499 | 13: '13' 500 | }, 501 | gridColumnEnd: { 502 | auto: 'auto', 503 | 1: '1', 504 | 2: '2', 505 | 3: '3', 506 | 4: '4', 507 | 5: '5', 508 | 6: '6', 509 | 7: '7', 510 | 8: '8', 511 | 9: '9', 512 | 10: '10', 513 | 11: '11', 514 | 12: '12', 515 | 13: '13' 516 | }, 517 | gridTemplateRows: { 518 | none: 'none', 519 | 1: 'repeat(1, minmax(0, 1fr))', 520 | 2: 'repeat(2, minmax(0, 1fr))', 521 | 3: 'repeat(3, minmax(0, 1fr))', 522 | 4: 'repeat(4, minmax(0, 1fr))', 523 | 5: 'repeat(5, minmax(0, 1fr))', 524 | 6: 'repeat(6, minmax(0, 1fr))' 525 | }, 526 | gridRow: { 527 | auto: 'auto', 528 | 'span-1': 'span 1 / span 1', 529 | 'span-2': 'span 2 / span 2', 530 | 'span-3': 'span 3 / span 3', 531 | 'span-4': 'span 4 / span 4', 532 | 'span-5': 'span 5 / span 5', 533 | 'span-6': 'span 6 / span 6' 534 | }, 535 | gridRowStart: { 536 | auto: 'auto', 537 | 1: '1', 538 | 2: '2', 539 | 3: '3', 540 | 4: '4', 541 | 5: '5', 542 | 6: '6', 543 | 7: '7' 544 | }, 545 | gridRowEnd: { 546 | auto: 'auto', 547 | 1: '1', 548 | 2: '2', 549 | 3: '3', 550 | 4: '4', 551 | 5: '5', 552 | 6: '6', 553 | 7: '7' 554 | }, 555 | transformOrigin: { 556 | center: 'center', 557 | top: 'top', 558 | 'top-right': 'top right', 559 | right: 'right', 560 | 'bottom-right': 'bottom right', 561 | bottom: 'bottom', 562 | 'bottom-left': 'bottom left', 563 | left: 'left', 564 | 'top-left': 'top left' 565 | }, 566 | scale: { 567 | 0: '0', 568 | 50: '.5', 569 | 75: '.75', 570 | 90: '.9', 571 | 95: '.95', 572 | 100: '1', 573 | 105: '1.05', 574 | 110: '1.1', 575 | 125: '1.25', 576 | 150: '1.5' 577 | }, 578 | rotate: { 579 | '-180': '-180deg', 580 | '-90': '-90deg', 581 | '-45': '-45deg', 582 | 0: '0', 583 | 45: '45deg', 584 | 90: '90deg', 585 | 180: '180deg' 586 | }, 587 | translate: (theme, { negative }) => ({ 588 | ...theme('spacing'), 589 | ...negative(theme('spacing')), 590 | '-full': '-100%', 591 | '-1/2': '-50%', 592 | '1/2': '50%', 593 | full: '100%' 594 | }), 595 | skew: { 596 | '-12': '-12deg', 597 | '-6': '-6deg', 598 | '-3': '-3deg', 599 | 0: '0', 600 | 3: '3deg', 601 | 6: '6deg', 602 | 12: '12deg' 603 | }, 604 | transitionProperty: { 605 | none: 'none', 606 | all: 'all', 607 | default: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform', 608 | colors: 'background-color, border-color, color, fill, stroke', 609 | opacity: 'opacity', 610 | shadow: 'box-shadow', 611 | transform: 'transform' 612 | }, 613 | transitionTimingFunction: { 614 | linear: 'linear', 615 | in: 'cubic-bezier(0.4, 0, 1, 1)', 616 | out: 'cubic-bezier(0, 0, 0.2, 1)', 617 | 'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)' 618 | }, 619 | transitionDuration: { 620 | 75: '75ms', 621 | 100: '100ms', 622 | 150: '150ms', 623 | 200: '200ms', 624 | 300: '300ms', 625 | 500: '500ms', 626 | 700: '700ms', 627 | 1000: '1000ms' 628 | }, 629 | transitionDelay: { 630 | 75: '75ms', 631 | 100: '100ms', 632 | 150: '150ms', 633 | 200: '200ms', 634 | 300: '300ms', 635 | 500: '500ms', 636 | 700: '700ms', 637 | 1000: '1000ms' 638 | } 639 | }, 640 | variants: { 641 | accessibility: ['responsive', 'focus'], 642 | alignContent: ['responsive'], 643 | alignItems: ['responsive'], 644 | alignSelf: ['responsive'], 645 | appearance: ['responsive'], 646 | backgroundAttachment: ['responsive'], 647 | backgroundColor: ['responsive', 'hover', 'focus'], 648 | backgroundOpacity: ['responsive', 'hover', 'focus'], 649 | backgroundPosition: ['responsive'], 650 | backgroundRepeat: ['responsive'], 651 | backgroundSize: ['responsive'], 652 | borderCollapse: ['responsive'], 653 | borderColor: ['responsive', 'hover', 'focus'], 654 | borderOpacity: ['responsive', 'hover', 'focus'], 655 | borderRadius: ['responsive'], 656 | borderStyle: ['responsive'], 657 | borderWidth: ['responsive'], 658 | boxShadow: ['responsive', 'hover', 'focus'], 659 | boxSizing: ['responsive'], 660 | cursor: ['responsive'], 661 | display: ['responsive'], 662 | divideColor: ['responsive'], 663 | divideOpacity: ['responsive'], 664 | divideWidth: ['responsive'], 665 | fill: ['responsive'], 666 | flex: ['responsive'], 667 | flexDirection: ['responsive'], 668 | flexGrow: ['responsive'], 669 | flexShrink: ['responsive'], 670 | flexWrap: ['responsive'], 671 | float: ['responsive'], 672 | clear: ['responsive'], 673 | fontFamily: ['responsive'], 674 | fontSize: ['responsive'], 675 | fontSmoothing: ['responsive'], 676 | fontStyle: ['responsive'], 677 | fontWeight: ['responsive', 'hover', 'focus'], 678 | height: ['responsive'], 679 | inset: ['responsive'], 680 | justifyContent: ['responsive'], 681 | letterSpacing: ['responsive'], 682 | lineHeight: ['responsive'], 683 | listStylePosition: ['responsive'], 684 | listStyleType: ['responsive'], 685 | margin: ['responsive'], 686 | maxHeight: ['responsive'], 687 | maxWidth: ['responsive'], 688 | minHeight: ['responsive'], 689 | minWidth: ['responsive'], 690 | objectFit: ['responsive'], 691 | objectPosition: ['responsive'], 692 | opacity: ['responsive', 'hover', 'focus'], 693 | order: ['responsive'], 694 | outline: ['responsive', 'focus'], 695 | overflow: ['responsive'], 696 | padding: ['responsive'], 697 | placeholderColor: ['responsive', 'focus'], 698 | placeholderOpacity: ['responsive', 'focus'], 699 | pointerEvents: ['responsive'], 700 | position: ['responsive'], 701 | resize: ['responsive'], 702 | space: ['responsive'], 703 | stroke: ['responsive'], 704 | strokeWidth: ['responsive'], 705 | tableLayout: ['responsive'], 706 | textAlign: ['responsive'], 707 | textColor: ['responsive', 'hover', 'focus'], 708 | textOpacity: ['responsive', 'hover', 'focus'], 709 | textDecoration: ['responsive', 'hover', 'focus'], 710 | textTransform: ['responsive'], 711 | userSelect: ['responsive'], 712 | verticalAlign: ['responsive'], 713 | visibility: ['responsive'], 714 | whitespace: ['responsive'], 715 | width: ['responsive'], 716 | wordBreak: ['responsive'], 717 | zIndex: ['responsive'], 718 | gap: ['responsive'], 719 | gridAutoFlow: ['responsive'], 720 | gridTemplateColumns: ['responsive'], 721 | gridColumn: ['responsive'], 722 | gridColumnStart: ['responsive'], 723 | gridColumnEnd: ['responsive'], 724 | gridTemplateRows: ['responsive'], 725 | gridRow: ['responsive'], 726 | gridRowStart: ['responsive'], 727 | gridRowEnd: ['responsive'], 728 | transform: ['responsive'], 729 | transformOrigin: ['responsive'], 730 | scale: ['responsive', 'hover', 'focus'], 731 | rotate: ['responsive', 'hover', 'focus'], 732 | translate: ['responsive', 'hover', 'focus'], 733 | skew: ['responsive', 'hover', 'focus'], 734 | transitionProperty: ['responsive'], 735 | transitionTimingFunction: ['responsive'], 736 | transitionDuration: ['responsive'], 737 | transitionDelay: ['responsive'] 738 | }, 739 | corePlugins: {}, 740 | plugins: [] 741 | } 742 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | lintOnSave: false 3 | } 4 | --------------------------------------------------------------------------------