├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── LICENSE ├── README.md ├── azure-pipelines.yml ├── build-deploy-gh-pages.sh ├── deploy.sh ├── index.d.ts ├── index.html ├── package.json ├── postcss.config.js ├── public └── favicon.ico ├── rollup.config.js ├── serve.config.js ├── src ├── App.vue ├── assets │ └── imgs │ │ ├── beaker-full-night.svg │ │ ├── beaker-full.svg │ │ ├── beaker-round.svg │ │ ├── beaker.svg │ │ ├── error-icon.svg │ │ ├── girl.svg │ │ ├── github.png │ │ ├── icon-information-default.svg │ │ ├── icon-information-warning.svg │ │ ├── information-icon.svg │ │ ├── items.svg │ │ ├── kevin-day.svg │ │ ├── kevin-night.svg │ │ ├── kevin-standard.svg │ │ ├── logo-affiliates-night.svg │ │ ├── logo-affiliates.svg │ │ ├── logo-merch-night.svg │ │ ├── logo-merch.svg │ │ ├── logo-mobile-night.svg │ │ ├── logo-mobile.svg │ │ ├── logo-night.svg │ │ ├── logo-platform-night.svg │ │ ├── logo-platform.svg │ │ ├── logo-slobs-night.svg │ │ ├── logo-slobs.svg │ │ ├── logo.svg │ │ ├── npm.svg │ │ ├── platforms │ │ ├── mixer.svg │ │ └── picarto.png │ │ └── pretzel-icon.png ├── components │ ├── Accordion.vue │ ├── Badge.vue │ ├── BannerDiscord.vue │ ├── BannerIntroduction.vue │ ├── BannerMarketing.vue │ ├── BannerSale.vue │ ├── Button.vue │ ├── CSLayoutPicker.vue │ ├── CallToAction.vue │ ├── Callout.vue │ ├── Checkbox.vue │ ├── ColorPicker.vue │ ├── ContentRow.vue │ ├── CopyNotification.vue │ ├── DatePicker.vue │ ├── DemoSection.vue │ ├── EmptySection.vue │ ├── FakeAlert.vue │ ├── FormGroup.vue │ ├── FormGroupH.vue │ ├── FormGroupV.vue │ ├── Guard.vue │ ├── GuardNew.vue │ ├── HelloWorld.vue │ ├── ImagePicker.vue │ ├── ImagePickerInput.vue │ ├── ItemGrid.vue │ ├── Loading.vue │ ├── MediaPicker.vue │ ├── ModalBasic.vue │ ├── ModalComp.vue │ ├── ModalConfirmation.vue │ ├── ModalPrime.vue │ ├── ModalPrimeIntro.vue │ ├── ModalRedirect.vue │ ├── ModalSubscribe.vue │ ├── NavCallToAction.vue │ ├── NewFeatureOverlay.vue │ ├── Notice.vue │ ├── Onboarding.vue │ ├── OnboardingStep.vue │ ├── Pagination.vue │ ├── PaneDropdown.vue │ ├── PaymentForm.vue │ ├── PrimeIntro.vue │ ├── PrimeSection.vue │ ├── ProgressBar.vue │ ├── Radio.vue │ ├── SSProSimulator.vue │ ├── ScrollNav.vue │ ├── Selector.vue │ ├── SiteSearch.vue │ ├── Slider.vue │ ├── SliderTwo.vue │ ├── Spinner.vue │ ├── StatusSwitch.vue │ ├── Step.vue │ ├── Tabs.vue │ ├── TabsNew.vue │ ├── TaggingInput.vue │ ├── TextArea.vue │ ├── TextInput.vue │ ├── Toggle.vue │ ├── TooltipNotice.vue │ ├── UrlBar.vue │ ├── VariableMenu.vue │ ├── VirtualItem.vue │ ├── WelcomePrime.vue │ ├── cloudbotvariables.json │ └── sitesearchdata.json ├── demos │ ├── Accordions.vue │ ├── Announcements.vue │ ├── Assets.vue │ ├── Badges.vue │ ├── Banners.vue │ ├── Buttons.vue │ ├── Calendars.vue │ ├── CallToActions.vue │ ├── Callouts.vue │ ├── ColorPickers.vue │ ├── Colors.vue │ ├── CreatorSites.vue │ ├── EmptySections.vue │ ├── Extras.vue │ ├── Forms.vue │ ├── Guards.vue │ ├── Icons.vue │ ├── Inputs.vue │ ├── Installation.vue │ ├── Layouts.vue │ ├── LeftNavigation.vue │ ├── Loaders.vue │ ├── MediaPickers.vue │ ├── Modals.vue │ ├── Navigations.vue │ ├── Notices.vue │ ├── Onboardings.vue │ ├── Paginations.vue │ ├── PaneDropdowns.vue │ ├── Prime.vue │ ├── ProgressBars.vue │ ├── SiteSearchDemo.vue │ ├── Sliders.vue │ ├── Steps.vue │ ├── Tables.vue │ ├── Tabs.vue │ ├── Toggles.vue │ ├── TransitionsDemo.vue │ ├── Typography.vue │ ├── VirtualItems.vue │ └── index.ts ├── main.ts ├── plugins │ ├── WhatInput │ │ └── index.ts │ └── event-bus.ts ├── router.ts ├── shims-tsx.d.ts ├── shims-vue.d.ts ├── styles │ ├── App.less │ ├── Base.less │ ├── Components.less │ ├── Imports.less │ ├── base │ │ ├── Base.less │ │ ├── Layout.less │ │ └── Tooltip.less │ ├── components │ │ ├── CustomFonts.less │ │ ├── Forms.less │ │ ├── Inputs.less │ │ ├── Modals.less │ │ ├── Tables.less │ │ └── Tabs.less │ └── imports │ │ ├── Accessibility.less │ │ ├── Colors.less │ │ ├── Mixins.less │ │ ├── Transitions.less │ │ ├── Typography.less │ │ └── Variables.less ├── system.js └── views │ ├── Documentation.vue │ └── Home.vue ├── tsconfig.json ├── vite-publish.config.js ├── vite.config.js ├── vue.config.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | es2021: true 5 | }, 6 | extends: ["plugin:vue/essential", "@vue/prettier", "@vue/typescript"], 7 | rules: { 8 | "no-console": process.env.NODE_ENV === "production" ? "error" : "off", 9 | "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off" 10 | }, 11 | parserOptions: { 12 | parser: "typescript-eslint-parser" 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /.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) 2019 Streamlabs 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 | # beaker 2 | 3 | ## Project setup 4 | ``` 5 | yarn install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | yarn run dev 11 | ``` 12 | 13 | ### Compiles for production on GitHub 14 | ``` 15 | yarn run build 16 | ``` 17 | 18 | ### Compiles for production 19 | ``` 20 | yarn run build:publish 21 | ``` 22 | 23 | ### Run your tests 24 | ``` 25 | yarn run test 26 | ``` 27 | 28 | ### Lints and fixes files 29 | ``` 30 | yarn run lint 31 | ``` 32 | 33 | ### Publish docs to GitHub Pages 34 | ``` 35 | yarn deploy 36 | ``` 37 | 38 | - Base folder should be included first in every project. 39 | - -------------------------------------------------------------------------------- /azure-pipelines.yml: -------------------------------------------------------------------------------- 1 | trigger: 2 | - master 3 | 4 | pool: 5 | vmImage: "ubuntu-latest" 6 | 7 | steps: 8 | - task: NodeTool@0 9 | inputs: 10 | versionSpec: "16.x" 11 | displayName: "Install Node.js" 12 | 13 | - bash: yarn install --frozen-lockfile --check-files 14 | displayName: "Install Dependencies" 15 | 16 | - bash: "yarn lint" 17 | displayName: "TSLint" 18 | 19 | - bash: "yarn build" 20 | displayName: "Compile Assets" 21 | -------------------------------------------------------------------------------- /build-deploy-gh-pages.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | sed -i '' 's/"sideEffects": false/"sideEffects": true/g' package.json 4 | rm -rf dist 5 | vue-cli-service build 6 | sed -i '' 's/"sideEffects": true/"sideEffects": false/g' package.json 7 | cd dist 8 | git init 9 | git add -A 10 | git commit -m "deploy" 11 | git push -f git@github.com:stream-labs/beaker.git master:gh-pages 12 | -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # abort on errors 4 | set -e 5 | 6 | # build 7 | yarn build 8 | 9 | # navigate into the build output directory 10 | cd dist 11 | 12 | # place .nojekyll to bypass Jekyll processing 13 | echo > .nojekyll 14 | 15 | # if you are deploying to a custom domain 16 | # echo 'www.example.com' > CNAME 17 | 18 | git init 19 | git add -A 20 | git commit -m 'deploy' 21 | 22 | # if you are deploying to https://.github.io 23 | # git push -f git@github.com:/.github.io.git master 24 | 25 | # if you are deploying to https://.github.io/ 26 | git push -f git@github.com:stream-labs/beaker.git master:gh-pages 27 | 28 | cd - -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | declare module "vue-slider-component"; 2 | declare module "vuejs-datepicker"; 3 | declare module "vuejs-paginate"; 4 | declare module "vue-color"; 5 | declare module "vue-select"; 6 | declare module "what-input"; 7 | declare module "?raw*"; 8 | // declare module "vue-js-modal" { 9 | // import { PluginFunction } from "vue"; 10 | // export const install: PluginFunction<{}>; 11 | 12 | // interface ModalMethods { 13 | // hide(name: String): void; 14 | // show(name: String): void; 15 | // } 16 | 17 | // module "vue/types/vue" { 18 | // interface Vue { 19 | // $modal: ModalMethods; 20 | // } 21 | // } 22 | // } 23 | declare module "*.json" { 24 | const value: any; 25 | export default value; 26 | } 27 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 18 | 19 | 20 | Beaker 21 | 22 | 23 | 24 | 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "streamlabs-beaker", 3 | "version": "0.11.13", 4 | "main": "./dist/beaker.umd.js", 5 | "module": "./dist/beaker.es.js", 6 | "license": "MIT", 7 | "exports": { 8 | ".": { 9 | "import": "./dist/beaker.es.js", 10 | "require": "./dist/beaker.umd.js" 11 | }, 12 | "./dist/style.css": { 13 | "import": "./dist/style.css", 14 | "require": "./dist/style.css" 15 | } 16 | }, 17 | "scripts": { 18 | "dev": "vite", 19 | "build": "vite build", 20 | "serve": "vite preview", 21 | "build:publish": "vite build -c vite-publish.config.js", 22 | "deploy": "./deploy.sh" 23 | }, 24 | "files": [ 25 | "dist" 26 | ], 27 | "devDependencies": { 28 | "@originjs/vite-plugin-require-context": "^1.0.9", 29 | "@types/node": "^18.11.18", 30 | "@types/vue-select": "^2.4.0", 31 | "@vue/eslint-config-prettier": "^3.0.5", 32 | "@vue/eslint-config-typescript": "^3.0.5", 33 | "autoprefixer": "^10.4.13", 34 | "eslint": "^8.28.0", 35 | "fuse.js": "^6.4.3", 36 | "less": "4.1.3", 37 | "moment": "^2.24.0", 38 | "postcss": "^8.4.19", 39 | "resize-observer-polyfill": "^1.5.1", 40 | "rollup-plugin-commonjs": "^9.3.4", 41 | "rollup-plugin-img": "^1.1.0", 42 | "rollup-plugin-json": "^4.0.0", 43 | "rollup-plugin-node-resolve": "^4.2.1", 44 | "rollup-plugin-rebase": "^3.1.1", 45 | "rollup-plugin-replace": "^2.2.0", 46 | "rollup-plugin-svg": "^1.0.1", 47 | "rollup-plugin-terser": "^7.0.2", 48 | "rollup-plugin-typescript": "^1.0.1", 49 | "rollup-plugin-vue": "^4.7.2", 50 | "tslib": "^1.9.3", 51 | "typescript": "^3.7.3", 52 | "vee-validate": "^2.0.0-rc.25", 53 | "vite": "^4.5.2", 54 | "vite-plugin-vue2": "^2.0.2", 55 | "vue-class-component": "^7.2.6", 56 | "vue-click-outside": "^1.0.7", 57 | "vue-clipboard2": "^0.3.1", 58 | "vue-color": "^2.7.0", 59 | "vue-js-modal": "^1.3.28", 60 | "vue-mq": "^1.0.1", 61 | "vue-multiselect": "^2.1.6", 62 | "vue-property-decorator": "^8.4.2", 63 | "vue-router": "^3.6.5", 64 | "vue-slider-component": "3.2.23", 65 | "vuejs-paginate": "^2.1.0" 66 | }, 67 | "peerDependencies": { 68 | "fuse.js": "^6.4.3", 69 | "moment": "^2.24.0", 70 | "vue-class-component": "^7.2.6", 71 | "vue-click-outside": "^1.0.7", 72 | "vue-color": "^2.7.0", 73 | "vue-js-modal": "^1.3.28", 74 | "vue-mq": "^1.0.1", 75 | "vue-multiselect": "^2.1.6", 76 | "vue-property-decorator": "^8.4.2", 77 | "vue-router": "^3.5.2", 78 | "vue-slider-component": "3.2.23", 79 | "vuejs-paginate": "^2.1.0" 80 | }, 81 | "types": "./index.d.ts", 82 | "dependencies": { 83 | "lodash-es": "^4.17.15", 84 | "v-tooltip": "^2.0.2", 85 | "vue": "2.6.14", 86 | "vue-a11y-utils": "^0.6.2", 87 | "vue-focus": "^2.1.0", 88 | "vue-template-compiler": "2.6.14", 89 | "what-input": "^5.2.6" 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/streamlabs/beaker/2e694028174d3fce01756b9d0699ccfffadf1baf/public/favicon.ico -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | const resolve = require("rollup-plugin-node-resolve"); 2 | const commonjs = require("rollup-plugin-commonjs"); 3 | const typescript = require("rollup-plugin-typescript"); 4 | const vue = require("rollup-plugin-vue"); 5 | const rebaseAssets = require("rollup-plugin-rebase"); 6 | const svg = require("rollup-plugin-svg"); 7 | const minify = require("rollup-plugin-babel-minify"); 8 | 9 | import { terser } from "rollup-plugin-terser"; 10 | 11 | module.exports = { 12 | input: "src/system.js", 13 | output: [ 14 | { 15 | file: "dist/beaker.common.js", 16 | format: "cjs" 17 | }, 18 | { 19 | file: "dist/beaker.esm.js", 20 | format: "esm", 21 | exports: "named" 22 | } 23 | ], 24 | external: ["vue", "vue-router", "lodash"], 25 | plugins: [ 26 | resolve(), 27 | commonjs({ 28 | namedExports: { 29 | "node_modules/vue-color/dist/vue-color.min.js": ["Chrome"] 30 | } 31 | }), 32 | typescript(), 33 | vue({ defaultLang: { script: "ts", style: "less" } }), 34 | rebaseAssets(), 35 | svg(), 36 | terser() 37 | ] 38 | }; 39 | -------------------------------------------------------------------------------- /serve.config.js: -------------------------------------------------------------------------------- 1 | // This config is built to use Rollup for the "serve" script but currently has some errors with assets 2 | 3 | const replace = require("rollup-plugin-replace"); 4 | const resolve = require("rollup-plugin-node-resolve"); 5 | const commonjs = require("rollup-plugin-commonjs"); 6 | const typescript = require("rollup-plugin-typescript"); 7 | const vue = require("rollup-plugin-vue"); 8 | const svg = require("rollup-plugin-svg"); 9 | const rebaseAssets = require("rollup-plugin-rebase"); 10 | const image = require("rollup-plugin-img"); 11 | const json = require("rollup-plugin-json"); 12 | const minify = require("rollup-plugin-babel-minify"); 13 | const serve = require("rollup-plugin-serve"); 14 | 15 | import { terser } from "rollup-plugin-terser"; 16 | 17 | module.exports = { 18 | input: "src/main.js", 19 | output: { 20 | file: "public/main.js", 21 | format: "iife", 22 | globals: ["ebyfzXxX_vue", "pPuHzvBT_vue", "bCNEBiXp_vue"] 23 | }, 24 | plugins: [ 25 | vue({ defaultLang: { script: "ts", style: "less" } }), 26 | resolve(), 27 | commonjs({ 28 | namedExports: { 29 | "node_modules/vue-color/dist/vue-color.min.js": ["Chrome"] 30 | } 31 | }), 32 | typescript(), 33 | rebaseAssets(), 34 | svg(), 35 | image(), 36 | json(), 37 | // minify({ mangle: false }), 38 | terser(), 39 | replace({ "process.env.NODE_ENV": JSON.stringify("production") }), 40 | serve({ contentBase: "public", open: true }) 41 | ] 42 | }; 43 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 58 | 59 | 120 | -------------------------------------------------------------------------------- /src/assets/imgs/beaker-full-night.svg: -------------------------------------------------------------------------------- 1 | beaker-full-night -------------------------------------------------------------------------------- /src/assets/imgs/beaker-full.svg: -------------------------------------------------------------------------------- 1 | beaker-full -------------------------------------------------------------------------------- /src/assets/imgs/beaker-round.svg: -------------------------------------------------------------------------------- 1 | beaker-round -------------------------------------------------------------------------------- /src/assets/imgs/beaker.svg: -------------------------------------------------------------------------------- 1 | beaker_1 -------------------------------------------------------------------------------- /src/assets/imgs/error-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/imgs/girl.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/assets/imgs/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/streamlabs/beaker/2e694028174d3fce01756b9d0699ccfffadf1baf/src/assets/imgs/github.png -------------------------------------------------------------------------------- /src/assets/imgs/icon-information-default.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/imgs/icon-information-warning.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/imgs/information-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/imgs/kevin-day.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/imgs/kevin-night.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/imgs/kevin-standard.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 11 | 13 | 18 | 19 | 21 | 23 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/assets/imgs/npm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 18 | 20 | 42 | 44 | 45 | 47 | image/svg+xml 48 | 50 | 51 | 52 | 53 | 54 | 59 | 63 | 67 | 71 | 75 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /src/assets/imgs/platforms/mixer.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | background 9 | 10 | 11 | 12 | Layer 1 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/assets/imgs/platforms/picarto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/streamlabs/beaker/2e694028174d3fce01756b9d0699ccfffadf1baf/src/assets/imgs/platforms/picarto.png -------------------------------------------------------------------------------- /src/assets/imgs/pretzel-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/streamlabs/beaker/2e694028174d3fce01756b9d0699ccfffadf1baf/src/assets/imgs/pretzel-icon.png -------------------------------------------------------------------------------- /src/components/BannerDiscord.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 35 | 36 | 91 | -------------------------------------------------------------------------------- /src/components/BannerIntroduction.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 27 | 28 | 74 | -------------------------------------------------------------------------------- /src/components/BannerSale.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 82 | 83 | 129 | -------------------------------------------------------------------------------- /src/components/CSLayoutPicker.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 49 | 50 | 104 | -------------------------------------------------------------------------------- /src/components/ContentRow.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 88 | 89 | 153 | -------------------------------------------------------------------------------- /src/components/CopyNotification.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 87 | 88 | 127 | -------------------------------------------------------------------------------- /src/components/DemoSection.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 55 | 56 | 63 | -------------------------------------------------------------------------------- /src/components/EmptySection.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 42 | 43 | 97 | -------------------------------------------------------------------------------- /src/components/FakeAlert.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 30 | 31 | 76 | -------------------------------------------------------------------------------- /src/components/FormGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | 23 | 33 | -------------------------------------------------------------------------------- /src/components/FormGroupH.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 38 | 39 | 78 | -------------------------------------------------------------------------------- /src/components/FormGroupV.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 50 | 51 | 88 | -------------------------------------------------------------------------------- /src/components/Guard.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 70 | 71 | 151 | -------------------------------------------------------------------------------- /src/components/GuardNew.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 63 | 64 | 149 | -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 66 | 67 | 76 | -------------------------------------------------------------------------------- /src/components/ImagePicker.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 85 | 86 | 162 | -------------------------------------------------------------------------------- /src/components/ItemGrid.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 26 | -------------------------------------------------------------------------------- /src/components/Loading.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 86 | 87 | 162 | -------------------------------------------------------------------------------- /src/components/ModalBasic.vue: -------------------------------------------------------------------------------- 1 | 43 | 44 | 82 | 83 | 119 | -------------------------------------------------------------------------------- /src/components/ModalConfirmation.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 71 | 72 | 113 | -------------------------------------------------------------------------------- /src/components/ModalPrime.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 46 | 47 | 62 | -------------------------------------------------------------------------------- /src/components/ModalPrimeIntro.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 46 | 47 | 62 | -------------------------------------------------------------------------------- /src/components/ModalRedirect.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 51 | 52 | 69 | -------------------------------------------------------------------------------- /src/components/NavCallToAction.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 66 | 67 | 143 | -------------------------------------------------------------------------------- /src/components/Notice.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 53 | 54 | 143 | -------------------------------------------------------------------------------- /src/components/OnboardingStep.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 32 | 33 | 39 | -------------------------------------------------------------------------------- /src/components/PaymentForm.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 67 | 68 | 124 | -------------------------------------------------------------------------------- /src/components/PrimeSection.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 51 | 52 | 82 | -------------------------------------------------------------------------------- /src/components/ProgressBar.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 43 | -------------------------------------------------------------------------------- /src/components/Radio.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 37 | 38 | 125 | -------------------------------------------------------------------------------- /src/components/StatusSwitch.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 34 | 35 | 124 | -------------------------------------------------------------------------------- /src/components/Step.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 51 | 52 | 120 | -------------------------------------------------------------------------------- /src/components/Toggle.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 49 | 50 | 122 | -------------------------------------------------------------------------------- /src/components/TooltipNotice.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 83 | 84 | 162 | -------------------------------------------------------------------------------- /src/components/UrlBar.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | 24 | 87 | -------------------------------------------------------------------------------- /src/components/VirtualItem.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 98 | 99 | 194 | -------------------------------------------------------------------------------- /src/demos/Assets.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 63 | 64 | 106 | -------------------------------------------------------------------------------- /src/demos/Calendars.vue: -------------------------------------------------------------------------------- 1 | 106 | 107 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /src/demos/ColorPickers.vue: -------------------------------------------------------------------------------- 1 | 115 | 116 | 137 | -------------------------------------------------------------------------------- /src/demos/EmptySections.vue: -------------------------------------------------------------------------------- 1 | 85 | 86 | 104 | -------------------------------------------------------------------------------- /src/demos/Extras.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 78 | -------------------------------------------------------------------------------- /src/demos/Forms.vue: -------------------------------------------------------------------------------- 1 | 88 | 89 | 120 | -------------------------------------------------------------------------------- /src/demos/Guards.vue: -------------------------------------------------------------------------------- 1 | 82 | 83 | 106 | 107 | 114 | -------------------------------------------------------------------------------- /src/demos/Icons.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 81 | 82 | 173 | -------------------------------------------------------------------------------- /src/demos/Installation.vue: -------------------------------------------------------------------------------- 1 | 74 | 75 | 81 | -------------------------------------------------------------------------------- /src/demos/Layouts.vue: -------------------------------------------------------------------------------- 1 | 117 | 118 | 134 | -------------------------------------------------------------------------------- /src/demos/LeftNavigation.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 48 | 49 | 77 | -------------------------------------------------------------------------------- /src/demos/Navigations.vue: -------------------------------------------------------------------------------- 1 | 83 | 84 | 97 | -------------------------------------------------------------------------------- /src/demos/Paginations.vue: -------------------------------------------------------------------------------- 1 | 88 | 89 | 110 | -------------------------------------------------------------------------------- /src/demos/ProgressBars.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | 56 | -------------------------------------------------------------------------------- /src/demos/SiteSearchDemo.vue: -------------------------------------------------------------------------------- 1 | 103 | 104 | 126 | -------------------------------------------------------------------------------- /src/demos/Steps.vue: -------------------------------------------------------------------------------- 1 | 118 | 119 | 138 | 139 | 158 | -------------------------------------------------------------------------------- /src/demos/Tables.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 77 | -------------------------------------------------------------------------------- /src/demos/Toggles.vue: -------------------------------------------------------------------------------- 1 | 83 | 84 | 103 | -------------------------------------------------------------------------------- /src/demos/index.ts: -------------------------------------------------------------------------------- 1 | const demos = import.meta.glob('../demos/*.vue'); 2 | 3 | const components = Object.keys(demos).map(key => { 4 | const componentName = key.slice(2, -4); 5 | const label = componentName.split(/(?=[A-Z])/).join(" "); 6 | const name = label.replace(/ /g, "-").toLowerCase(); 7 | const component = demos[key]; 8 | 9 | return { 10 | component, 11 | name, 12 | componentName, 13 | label 14 | }; 15 | }); 16 | 17 | export default components; -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import Vue from "vue"; 3 | import App from "./App.vue"; 4 | import router from "./router"; 5 | 6 | import VTooltip from "v-tooltip"; 7 | import VueClipboard from "vue-clipboard2"; 8 | import WhatInput from "./plugins/WhatInput/index"; 9 | 10 | Vue.config.productionTip = false; 11 | 12 | Vue.use(VTooltip); 13 | Vue.use(VueClipboard); 14 | Vue.use(WhatInput); 15 | 16 | new Vue({ 17 | el: '#app', 18 | router, 19 | render: h => h(App) 20 | }).$mount("#app"); 21 | -------------------------------------------------------------------------------- /src/plugins/WhatInput/index.ts: -------------------------------------------------------------------------------- 1 | import _Vue from "vue"; 2 | import whatInput from "what-input"; 3 | 4 | const plugin = { 5 | install(Vue: typeof _Vue) { 6 | Vue.prototype.$whatInput = whatInput; 7 | } 8 | }; 9 | 10 | interface IWhatInput { 11 | ask(intent?: string): string; 12 | element(): string; 13 | ignoreKeys(keyCodes: number[]): void; 14 | specificKeys(keyCodes: number[]): void; 15 | registerOnChange(callback: () => void, option?: string); 16 | unRegisterOnChange(callback: () => void); 17 | clearStorage(): void; 18 | } 19 | 20 | declare module "vue/types/vue" { 21 | interface Vue { 22 | $whatInput: IWhatInput; 23 | } 24 | } 25 | 26 | export default plugin; 27 | -------------------------------------------------------------------------------- /src/plugins/event-bus.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | 3 | export const EventBus = new Vue(); 4 | -------------------------------------------------------------------------------- /src/router.ts: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import Router from "vue-router"; 3 | import demos from "./demos"; 4 | import VeeValidate from "vee-validate"; 5 | 6 | Vue.use(Router); 7 | Vue.use(VeeValidate); 8 | 9 | export default new Router({ 10 | routes: [ 11 | ...demos.map(({ name, component }) => { 12 | return { 13 | path: `/${name}`, 14 | name: name, 15 | component 16 | }; 17 | }), 18 | { 19 | path: "*", 20 | redirect: "/installation" 21 | } 22 | ] 23 | }); 24 | -------------------------------------------------------------------------------- /src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from "vue"; 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.vue" { 2 | import Vue from "vue"; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /src/styles/App.less: -------------------------------------------------------------------------------- 1 | @import './Imports'; 2 | @import './Base'; 3 | @import './Components'; -------------------------------------------------------------------------------- /src/styles/Base.less: -------------------------------------------------------------------------------- 1 | @import "./base/Base"; 2 | @import "./base/Layout"; 3 | @import "./base/Tooltip"; 4 | -------------------------------------------------------------------------------- /src/styles/Components.less: -------------------------------------------------------------------------------- 1 | @import "./components/Inputs"; 2 | @import "./components/Tables"; 3 | -------------------------------------------------------------------------------- /src/styles/Imports.less: -------------------------------------------------------------------------------- 1 | @import "./imports/Accessibility"; 2 | @import "./imports/Colors"; 3 | @import "./imports/Mixins"; 4 | @import "./imports/Typography"; 5 | @import "./imports/Variables"; 6 | @import "./imports/Transitions"; 7 | -------------------------------------------------------------------------------- /src/styles/base/Base.less: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | overflow: hidden; 7 | width: 100%; 8 | height: 100%; 9 | margin: 0; 10 | padding: 0; 11 | -webkit-font-smoothing: antialiased; 12 | -moz-osx-font-smoothing: grayscale; 13 | } 14 | 15 | * { 16 | box-sizing: border-box; 17 | } 18 | 19 | img, 20 | video { 21 | width: 100%; 22 | } 23 | 24 | pre { 25 | background-color: @day-section; 26 | .radius(); 27 | .margin-top(@0); 28 | .margin-bottom(2); 29 | .padding(2); 30 | white-space: pre-wrap; 31 | } 32 | 33 | .row { 34 | .margin-bottom(3); 35 | } 36 | 37 | .night, 38 | .night-theme { 39 | pre { 40 | background-color: @night-section-alt; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/styles/base/Layout.less: -------------------------------------------------------------------------------- 1 | .app-wrapper { 2 | background-color: @day-bg; 3 | font-family: "Roboto", sans-serif; 4 | font-size: 14px; 5 | color: @day-paragraph; 6 | line-height: 130%; 7 | } 8 | 9 | .section { 10 | .margin-bottom(4); 11 | } 12 | 13 | .night, 14 | .night-theme { 15 | &.app-wrapper { 16 | background-color: @night-bg; 17 | color: @night-paragraph; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/styles/base/Tooltip.less: -------------------------------------------------------------------------------- 1 | // TOOLTIPS 2 | 3 | .tooltip-trigger { 4 | color: @light-5; 5 | margin: 0 10px; 6 | opacity: .6; 7 | } 8 | 9 | .tooltip { 10 | display: block !important; 11 | z-index: 10000; 12 | background: transparent; 13 | border: 0; 14 | padding: 0; 15 | 16 | &:before { 17 | border: 0; 18 | } 19 | } 20 | 21 | .tooltip .tooltip-inner { 22 | background: @white; 23 | color: @dark-2; 24 | font-family: "Roboto", sans-serif; 25 | .radius(); 26 | .day-shadow(); 27 | padding: 8px 10px 7px; 28 | font-size: 12px; 29 | } 30 | 31 | .tooltip .tooltip-arrow { 32 | width: 0; 33 | height: 0; 34 | border-style: solid; 35 | position: absolute; 36 | margin: 5px; 37 | border-color: @light-1; 38 | } 39 | 40 | .tooltip[x-placement^="top"] { 41 | margin-bottom: 10px; 42 | } 43 | 44 | .tooltip[x-placement^="top"] .tooltip-arrow { 45 | border-width: 5px 5px 0 5px; 46 | border-left-color: transparent !important; 47 | border-right-color: transparent !important; 48 | border-bottom-color: transparent !important; 49 | bottom: -5px; 50 | left: calc(50% - 5px); 51 | margin-top: 0; 52 | margin-bottom: 0; 53 | } 54 | 55 | .tooltip[x-placement^="bottom"] { 56 | margin-top: 10px; 57 | } 58 | 59 | .tooltip[x-placement^="bottom"] .tooltip-arrow { 60 | border-width: 0 5px 5px 5px; 61 | border-left-color: transparent !important; 62 | border-right-color: transparent !important; 63 | border-top-color: transparent !important; 64 | top: -5px; 65 | left: calc(50% - 5px); 66 | margin-top: 0; 67 | margin-bottom: 0; 68 | } 69 | 70 | .tooltip[x-placement^="right"] { 71 | margin-left: 10px; 72 | } 73 | 74 | .tooltip[x-placement^="right"] .tooltip-arrow { 75 | border-width: 5px 5px 5px 0; 76 | border-left-color: transparent !important; 77 | border-top-color: transparent !important; 78 | border-bottom-color: transparent !important; 79 | left: -5px; 80 | top: calc(50% - 5px); 81 | margin-left: 0; 82 | margin-right: 0; 83 | } 84 | 85 | .tooltip[x-placement^="left"] { 86 | margin-right: 10px; 87 | } 88 | 89 | .tooltip[x-placement^="left"] .tooltip-arrow { 90 | border-width: 5px 0 5px 5px; 91 | border-top-color: transparent !important; 92 | border-right-color: transparent !important; 93 | border-bottom-color: transparent !important; 94 | right: -5px; 95 | top: calc(50% - 5px); 96 | margin-left: 0; 97 | margin-right: 0; 98 | } 99 | 100 | .tooltip[aria-hidden='true'] { 101 | visibility: hidden; 102 | opacity: 0; 103 | transition: opacity .15s, visibility .15s; 104 | } 105 | 106 | .tooltip[aria-hidden='false'] { 107 | visibility: visible; 108 | opacity: 1; 109 | transition: opacity .15s; 110 | } 111 | 112 | .night { 113 | & ~ .tooltip { 114 | .tooltip-inner { 115 | background-color: @dark-4; 116 | border-color: @dark-4; 117 | color: @light-2; 118 | .night-shadow(); 119 | } 120 | 121 | .tooltip-arrow { 122 | border-color: @dark-4; 123 | } 124 | } 125 | } -------------------------------------------------------------------------------- /src/styles/components/Forms.less: -------------------------------------------------------------------------------- 1 | form, 2 | .s-form { 3 | .s-form-group:last-child { 4 | margin-bottom: 0; 5 | } 6 | } 7 | 8 | .s-form-group { 9 | .margin-bottom(2); 10 | display: grid; 11 | grid-template-columns: repeat(12, 1fr); 12 | grid-column-gap: 16px; 13 | grid-row-gap: @spacing; 14 | } 15 | 16 | .s-form-group label:first-child { 17 | grid-column: 1/13; 18 | } 19 | 20 | .s-form-group * { 21 | grid-column: 1/13; 22 | } 23 | 24 | @media(min-width: 980px) { 25 | .s-form-group label:first-child { 26 | grid-column: 1/4; 27 | } 28 | 29 | .s-form-group * { 30 | grid-column: 4/13; 31 | } 32 | } 33 | 34 | .s-form-group__help-text { 35 | color: @label; 36 | font-size: 13px; 37 | } -------------------------------------------------------------------------------- /src/styles/components/Modals.less: -------------------------------------------------------------------------------- 1 | .v--modal-overlay { 2 | background: @day-modal-mask !important; 3 | } 4 | 5 | .s-modal-container { 6 | background: @white; 7 | .radius(2); 8 | } 9 | 10 | .s-modal-body { 11 | background: @white; 12 | .padding(4); 13 | .padding-bottom(3); 14 | } 15 | 16 | .s-modal-title, 17 | .s-modal-sub-title { 18 | color: @day-title; 19 | .margin-bottom(3); 20 | } 21 | 22 | .s-modal-sub-title { 23 | .margin-bottom(2); 24 | .weight(@medium); 25 | } 26 | 27 | .s-modal-default-button { 28 | float: right; 29 | } 30 | 31 | .night, 32 | .night-theme { 33 | .v--modal-overlay { 34 | background-color: @night-modal-mask !important; 35 | } 36 | 37 | .s-modal-container { 38 | background: @dark-3; 39 | box-shadow: 0px 4px 8px @night-shadow; 40 | } 41 | 42 | .s-modal-title, 43 | .s-modal-sub-title { 44 | color: @night-title; 45 | } 46 | 47 | } -------------------------------------------------------------------------------- /src/styles/components/Tables.less: -------------------------------------------------------------------------------- 1 | // TABLES 2 | 3 | table { 4 | margin-bottom: 0; 5 | color: @day-paragraph; 6 | font-size: 14px; 7 | width: 100%; 8 | border-collapse: collapse; 9 | 10 | .s-button { 11 | height: 20px; 12 | } 13 | } 14 | 15 | th { 16 | .text-transform(@capitalize); 17 | .weight(@medium); 18 | font-size: 12px; 19 | color: @label; 20 | text-align: left; 21 | 22 | a { 23 | color: inherit; 24 | text-decoration: none; 25 | } 26 | } 27 | 28 | tbody { 29 | .radius(); 30 | 31 | tr { 32 | &:nth-child(odd) { 33 | background-color: @light-2; 34 | } 35 | 36 | &:nth-child(even) { 37 | background-color: @light-1; 38 | } 39 | } 40 | } 41 | 42 | td { 43 | img { 44 | max-width: 40px; 45 | width: 100%; 46 | } 47 | 48 | .s-img--sm { 49 | width: 20px; 50 | height: 20px; 51 | .margin-right(); 52 | } 53 | } 54 | 55 | th, 56 | td { 57 | .padding(); 58 | } 59 | 60 | .s-table__header { 61 | display: inline-block; 62 | width: 100%; 63 | .margin-bottom(3); 64 | 65 | h4 { 66 | display: inline-block; 67 | } 68 | } 69 | 70 | .s-table__donation { 71 | color: @teal; 72 | } 73 | 74 | .s-table__merch { 75 | .s-table__donation; 76 | white-space: normal; 77 | } 78 | 79 | .s-table__bits { 80 | color: @bits; 81 | } 82 | 83 | .s-table__name { 84 | white-space: nowrap; 85 | } 86 | 87 | .s-table__message { 88 | word-break: break-all; 89 | } 90 | 91 | .night { 92 | 93 | // Tables 94 | table { 95 | color: @night-paragraph; 96 | 97 | tbody { 98 | tr { 99 | &:nth-child(odd) { 100 | background-color: @dark-4; 101 | 102 | td { 103 | border: 0; 104 | } 105 | } 106 | 107 | &:nth-child(even) { 108 | background-color: transparent; 109 | } 110 | 111 | td { 112 | a { 113 | color: @white; 114 | } 115 | } 116 | } 117 | } 118 | } 119 | } -------------------------------------------------------------------------------- /src/styles/components/Tabs.less: -------------------------------------------------------------------------------- 1 | @import "../../styles/Imports"; 2 | 3 | .md-tabs { 4 | display: flex; 5 | flex-direction: row; 6 | } 7 | 8 | .md-tabs-navigation { 9 | display: -webkit-box; 10 | display: -ms-flexbox; 11 | display: flex; 12 | position: relative; 13 | -webkit-box-pack: start; 14 | -ms-flex-pack: start; 15 | justify-content: flex-start; 16 | } 17 | 18 | .md-active { 19 | color: @dark-2; 20 | } 21 | 22 | .md-button:not([disabled]) { 23 | cursor: pointer; 24 | } 25 | 26 | .md-button, 27 | .md-button-clean { 28 | position: relative; 29 | display: inline-block; 30 | overflow: hidden; 31 | padding: 0; 32 | margin: 0; 33 | font-family: inherit; 34 | line-height: normal; 35 | text-decoration: none; 36 | vertical-align: top; 37 | white-space: nowrap; 38 | background: transparent; 39 | border: 0; 40 | border-radius: 0; 41 | outline: none; 42 | transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); 43 | -webkit-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); 44 | } 45 | 46 | .md-button:before { 47 | content: " "; 48 | position: absolute; 49 | top: 0; 50 | right: 0; 51 | bottom: 0; 52 | left: 0; 53 | z-index: 1; 54 | transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); 55 | will-change: background-color, opacity; 56 | opacity: 0; 57 | -webkit-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); 58 | } 59 | 60 | .md-button { 61 | .margin-right(2); 62 | } 63 | 64 | .md-button-content { 65 | .margin-bottom(2); 66 | } 67 | 68 | .md-ripple { 69 | display: -webkit-box; 70 | display: -ms-flexbox; 71 | display: flex; 72 | justify-content: center; 73 | align-items: center; 74 | -webkit-box-align: center; 75 | -webkit-box-pack: center; 76 | -ms-flex-align: center; 77 | -ms-flex-pack: center; 78 | position: relative; 79 | z-index: 0; 80 | overflow: hidden; 81 | width: 100%; 82 | height: 100%; 83 | -webkit-mask-image: radial-gradient(circle, @white 100%, #000 0); 84 | } 85 | 86 | .md-button-content { 87 | position: static; 88 | } 89 | 90 | .md-tabs-indicator { 91 | transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), 92 | right 0.35s cubic-bezier(0.4, 0, 0.2, 1); 93 | -webkit-transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), 94 | right 0.35s cubic-bezier(0.4, 0, 0.2, 1); 95 | position: absolute; 96 | bottom: 0; 97 | left: 0; 98 | height: 2px; 99 | background: @dark-2; 100 | transform: translateZ(0); 101 | will-change: left, right; 102 | -webkit-transform: translateZ(0); 103 | } 104 | 105 | .md-tabs-content { 106 | overflow: hidden; 107 | transition: none; 108 | will-change: height; 109 | -webkit-transition: none; 110 | position: relative; 111 | z-index: 2; 112 | } 113 | 114 | .night, 115 | .night-theme { 116 | .md-button { 117 | color: @light-4; 118 | &:hover { 119 | color: @white; 120 | outline: none; 121 | } 122 | } 123 | 124 | .md-ripple { 125 | color: @light-4; 126 | } 127 | 128 | .md-active { 129 | .md-ripple { 130 | color: @white; 131 | } 132 | } 133 | 134 | .md-tabs-indicator { 135 | background: @white; 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /src/styles/imports/Accessibility.less: -------------------------------------------------------------------------------- 1 | [data-whatintent="mouse"] { 2 | *:focus { 3 | outline: none; 4 | } 5 | } 6 | 7 | [data-whatintent="keyboard"] { 8 | *:focus { 9 | outline: 2px solid @dark-2; 10 | outline-offset: 2px; 11 | } 12 | 13 | .s-accordion { 14 | &:focus { 15 | border: 2px solid @dark-2; 16 | outline: none; 17 | } 18 | } 19 | 20 | // .s-tab { 21 | // &:first-child { 22 | // margin-left: 4px; 23 | // } 24 | // } 25 | 26 | // .s-checkbox:focus > label:before, 27 | // .s-radio > input:focus + label:before, 28 | // .s-status-switch:focus .s-status-switch__paddle, 29 | // .s-image-picker-input__option:focus, 30 | // .s-banner__wrapper .icon-down:focus, 31 | // .s-tabs__link:focus { 32 | // outline: 2px solid @dark-2; 33 | // outline-offset: 2px; 34 | // } 35 | 36 | .night, 37 | .night-theme { 38 | *:focus { 39 | outline-color: @white; 40 | } 41 | 42 | .s-accordion { 43 | &:focus { 44 | border-color: @white; 45 | } 46 | } 47 | 48 | // .s-checkbox:focus > label:before, 49 | // .s-radio > input:focus + label:before, 50 | // .s-status-switch:focus .s-status-switch__paddle, 51 | // .s-image-picker-input__option:focus, 52 | // .s-banner__wrapper .icon-down:focus, 53 | // .s-tabs__link:focus { 54 | // outline-color: @white; 55 | // } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /src/styles/imports/Colors.less: -------------------------------------------------------------------------------- 1 | // Colors 2 | @teal: #80f5d2; 3 | @dark-teal: #128079; 4 | @teal-semi: fade(@teal, 8%); 5 | @purple: #C57BFF; 6 | @dark-purple: #5e3bec; 7 | @purple-semi: fade(@purple, 8%); 8 | @red: #ff6f5b; 9 | @dark-red: #b14334; 10 | @red-semi: rgba(248, 86, 64, 0.08); 11 | @blue: #72d5ff; 12 | @light-blue: #ceffed; 13 | @dark-blue: #2b5bd7; 14 | @yellow: #ffbe72; 15 | @dark-yellow: #a96311; 16 | @yellow-semi: rgba(227, 151, 62, 0.08); 17 | @yellow-light: #fff9e5; 18 | @white: #ffffff; 19 | @prime: #ffd79c; 20 | @dark-prime: #8f6f3f; 21 | @pink: #ff8383; 22 | 23 | @light-1: #ffffff; 24 | @light-2: #f5f8fa; 25 | @light-3: #e3e8eb; 26 | @light-4: #bdc2c4; 27 | @light-5: #91979a; 28 | 29 | @dark-1: #050d12; 30 | @dark-2: #09161d; 31 | @dark-3: #17242d; 32 | @dark-4: #2b383f; 33 | @dark-5: #4f5e65; 34 | @dark-6: #30322c; 35 | 36 | // Platforms 37 | @twitch: #9147FE; 38 | @youtube: #ff0000; 39 | @mixer: #0078d7; 40 | @twitter: #1ea4f0; 41 | @facebook: #1778F2; 42 | @periscope: #3fa4c4; 43 | @picarto: #2da75f; 44 | @discord: #5865F2; 45 | 46 | // Payment icons 47 | @bits: #c2a4fc; 48 | @paypal: #1a74b6; 49 | @paypal-yellow: #ffcb41; 50 | @credit-card: #bbbfc2; 51 | @rub: #66a438; 52 | @eur: #842863; 53 | @user: #bcc0c3; 54 | 55 | // All Stars 56 | @day-all-stars-silver: @light-5; 57 | @day-all-stars-gold: #d2a752; 58 | @day-all-stars-platinum: @dark-5; 59 | @day-all-stars-diamond: #ceffed; 60 | @day-all-stars-legend: @purple; 61 | 62 | @night-all-stars-silver: @light-4; 63 | @night-all-stars-gold: #d2a752; 64 | @night-all-stars-platinum: @light-3; 65 | @night-all-stars-diamond: #ceffed; 66 | @night-all-stars-legend: @purple; 67 | 68 | // Uses 69 | @primary: @teal; 70 | @day-primary: @dark-teal; 71 | @secondary: @purple; 72 | @warning: @red; 73 | @day-warning: @dark-red; 74 | @new: @purple; 75 | @info: @yellow; 76 | @icon: @light-5; 77 | @label: @light-5; 78 | @selected: @dark-2; 79 | @notice-bg-warning: rgba(248, 86, 64, 0.08); 80 | 81 | @day-bg: @light-1; 82 | @day-section: @light-2; 83 | @day-border: @light-3; 84 | @day-title: @dark-2; 85 | @day-paragraph: @dark-5; 86 | @day-input-border: @light-3; 87 | @day-button: @light-3; 88 | @day-link: @dark-5; 89 | @day-link-active: @dark-2; 90 | @day-input-border: @light-4; 91 | @day-input-bg: transparent; 92 | @day-input-disabled: @light-3; 93 | @day-dropdown-bg: @light-3; 94 | @day-solid-input: @light-2; 95 | @day-dropdown-border: @light-2; 96 | @day-switch-bg: @light-4; 97 | @day-hover: @light-3; 98 | @day-shadow: rgba(9, 22, 29, 0.08); 99 | @day-modal-mask: rgba(227, 232, 235, 0.95); 100 | @day-overlay: rgba(255, 255, 255, 0.88); 101 | @day-new-feature-overlay: rgba(255, 255, 255, 0.95); 102 | 103 | @night-bg: @dark-3; 104 | @night-section: @dark-2; 105 | @night-section-alt: @dark-4; 106 | @night-border: @dark-4; 107 | @night-border-alt: @dark-5; 108 | @night-title: @light-1; 109 | @night-paragraph: @light-4; 110 | @night-button: @dark-5; 111 | @night-link: @light-4; 112 | @night-link-active: @white; 113 | @night-input-bg: transparent; 114 | @night-input-border: @dark-5; 115 | @night-input-disabled: @dark-4; 116 | @night-dropdown-bg: @dark-5; 117 | @night-solid-input: @dark-4; 118 | @night-dropdown-border: @dark-4; 119 | @night-switch-bg: @light-5; 120 | @night-hover: #0f1f27; 121 | @night-shadow: rgba(9, 22, 29, 0.24); 122 | @night-modal-mask: rgba(9, 22, 29, 0.95); 123 | @night-overlay: rgba(23, 36, 45, 0.88); 124 | @night-new-feature-overlay: rgba(23, 36, 45, 0.95); 125 | @night-selector-selected: #5d6b70; 126 | 127 | @ultra-gradient: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0.16) 100%), linear-gradient(123.53deg, #2DE8B0 25.56%, #CBE953 60.27%, #FFAB48 79.52%, #FF5151 96.69%); 128 | @ultra-gradient-dark: linear-gradient(123.53deg, #2DE8B0 25.56%, #CBE953 60.27%, #FFAB48 79.52%, #FF5151 96.69%); 129 | 130 | @ultra-black: #000000; 131 | -------------------------------------------------------------------------------- /src/styles/imports/Transitions.less: -------------------------------------------------------------------------------- 1 | // Fade 2 | .fade-enter-active { 3 | transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); 4 | opacity: 1; 5 | } 6 | .fade-leave-active { 7 | transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); 8 | opacity: 0; 9 | } 10 | .fade-enter { 11 | transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); 12 | opacity: 0; 13 | } 14 | .fade-leave-to { 15 | transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); 16 | opacity: 0; 17 | } 18 | 19 | // FadeFast 20 | .fadeFast-enter-active { 21 | transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1); 22 | opacity: 1; 23 | } 24 | 25 | .fadeFast-enter, 26 | .fadeFast-leave-active, 27 | .fadeFast-leave-to { 28 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 29 | opacity: 0; 30 | } 31 | 32 | // FadeX from Left 33 | .fadeX-from-left-enter-active { 34 | transition: all 0.25s 0.2s cubic-bezier(0.4, 0, 0.2, 1); 35 | opacity: 1; 36 | } 37 | .fadeX-from-left-leave-active { 38 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 39 | position: absolute; 40 | opacity: 0; 41 | } 42 | .fadeX-from-left-enter { 43 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 44 | transform: translateX(-10px); 45 | opacity: 0; 46 | } 47 | .fadeX-from-left-leave-to { 48 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 49 | opacity: 0; 50 | transform: translateX(10px); 51 | } 52 | 53 | // FadeX from Right 54 | .fadeX-from-right-enter-active { 55 | transition: all 0.25s 0.2s cubic-bezier(0.4, 0, 0.2, 1); 56 | opacity: 1; 57 | } 58 | .fadeX-from-right-leave-active { 59 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 60 | position: absolute; 61 | opacity: 0; 62 | } 63 | .fadeX-from-right-enter { 64 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 65 | transform: translateX(10px); 66 | opacity: 0; 67 | } 68 | .fadeX-from-right-leave-to { 69 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 70 | opacity: 0; 71 | transform: translateX(-10px); 72 | } 73 | 74 | // FadeY from Top 75 | .fadeY-from-top-enter-active { 76 | transition: all 0.25s 0.2s cubic-bezier(0.4, 0, 0.2, 1); 77 | opacity: 1; 78 | } 79 | .fadeY-from-top-leave-active { 80 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 81 | position: absolute; 82 | opacity: 0; 83 | } 84 | .fadeY-from-top-enter { 85 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 86 | transform: translateY(-10px); 87 | opacity: 0; 88 | } 89 | .fadeY-from-top-leave-to { 90 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 91 | opacity: 0; 92 | transform: translateY(10px); 93 | } 94 | 95 | // FadeY from Bottom 96 | .fadeY-from-bottom-enter-active { 97 | transition: all 0.25s 0.2s cubic-bezier(0.4, 0, 0.2, 1); 98 | opacity: 1; 99 | } 100 | .fadeY-from-bottom-leave-active { 101 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 102 | position: absolute; 103 | opacity: 0; 104 | } 105 | .fadeY-from-bottom-enter { 106 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 107 | transform: translateY(10px); 108 | opacity: 0; 109 | } 110 | .fadeY-from-bottom-leave-to { 111 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 112 | opacity: 0; 113 | transform: translateY(-10px); 114 | } 115 | 116 | // Expand 117 | .expand-dropdown-enter-active, 118 | .expand-dropdown-leave-active { 119 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 120 | overflow: hidden; 121 | } 122 | .expand-dropdown-enter, 123 | .expand-dropdown-leave-to { 124 | transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); 125 | height: 0; 126 | opacity: 0; 127 | } 128 | -------------------------------------------------------------------------------- /src/styles/imports/Typography.less: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700,900,900i.css"); 2 | 3 | h1, 4 | h2, 5 | h3, 6 | h4, 7 | a, 8 | p, 9 | span, 10 | label { 11 | font-family: "Roboto"; 12 | } 13 | 14 | h1, 15 | h2, 16 | h3, 17 | h4 { 18 | color: @day-title; 19 | .margin-top(@0); 20 | .line-height(100%); 21 | } 22 | 23 | h1 { 24 | .weight(@bold); 25 | font-size: 20px; 26 | .margin-bottom(3); 27 | } 28 | 29 | h2 { 30 | .weight(@medium); 31 | font-size: 16px; 32 | .margin-bottom(2); 33 | } 34 | 35 | h3 { 36 | .weight(@medium); 37 | font-size: 16px; 38 | .margin-bottom(); 39 | } 40 | 41 | h4 { 42 | .weight(@medium); 43 | font-size: 14px; 44 | .margin-bottom(); 45 | } 46 | 47 | p, 48 | a { 49 | color: @day-paragraph; 50 | } 51 | 52 | p { 53 | .margin-top(@0); 54 | .margin-bottom(2); 55 | } 56 | 57 | a { 58 | text-decoration: underline; 59 | .weight(@medium); 60 | } 61 | 62 | .night, 63 | .night-theme { 64 | h1, 65 | h2, 66 | h3, 67 | h4 { 68 | color: @night-title; 69 | } 70 | 71 | p, 72 | a { 73 | color: @night-paragraph; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /src/styles/imports/Variables.less: -------------------------------------------------------------------------------- 1 | @0: 0px; 2 | @none: none; 3 | 4 | // Margins, paddings 5 | @spacing: 8px; 6 | 7 | // Border radius 8 | @radius: 4px; 9 | 10 | // Font weights 11 | @normal: 400; 12 | @medium: 500; 13 | @bold: 700; 14 | 15 | // Text aligns 16 | @left: left; 17 | @right: right; 18 | @center: center; 19 | 20 | // Text transforms 21 | @capitalize: capitalize; 22 | @uppercase: uppercase; -------------------------------------------------------------------------------- /src/views/Documentation.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 34 | 35 | 90 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 21 | 22 | 27 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "module": "esnext", 5 | "noImplicitAny": false, 6 | "strict": true, 7 | "jsx": "preserve", 8 | "importHelpers": true, 9 | "moduleResolution": "node", 10 | "experimentalDecorators": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "sourceMap": true, 14 | "baseUrl": ".", 15 | "types": [ 16 | "webpack-env" 17 | ], 18 | "paths": { 19 | "@/*": [ 20 | "src/*" 21 | ] 22 | }, 23 | "lib": [ 24 | "esnext", 25 | "dom", 26 | "dom.iterable", 27 | "scripthost" 28 | ] 29 | }, 30 | "include": [ 31 | "src/**/*.ts", 32 | "src/**/*.tsx", 33 | "src/**/*.vue", 34 | "tests/**/*.ts", 35 | "tests/**/*.tsx", 36 | "./index.d.ts" 37 | ], 38 | "exclude": [ 39 | "node_modules" 40 | ] 41 | } -------------------------------------------------------------------------------- /vite-publish.config.js: -------------------------------------------------------------------------------- 1 | import { resolve } from "path"; 2 | import { defineConfig } from "vite"; 3 | import { createVuePlugin } from "vite-plugin-vue2"; 4 | 5 | export default defineConfig({ 6 | plugins: [createVuePlugin()], 7 | build: { 8 | minify: false, 9 | target: "chrome61", 10 | commonjsOptions: { 11 | requireReturnsDefault: true, 12 | }, 13 | lib: { 14 | entry: resolve(__dirname, "src/system.js"), 15 | name: "Beaker", 16 | fileName: (format) => `beaker.${format}.js`, 17 | }, 18 | rollupOptions: { 19 | external: ["vue"], 20 | output: { 21 | globals: { 22 | vue: "Vue", 23 | }, 24 | }, 25 | }, 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import { createVuePlugin } from "vite-plugin-vue2"; 3 | 4 | export default defineConfig({ 5 | base: "/beaker/", 6 | plugins: [createVuePlugin()], 7 | build: { 8 | minify: false, 9 | sourcemap: true, 10 | commonjsOptions: { 11 | requireReturnsDefault: true, 12 | }, 13 | }, 14 | }); 15 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: { extract: false }, 3 | publicPath: process.env.NODE_ENV === "production" ? "/beaker/" : "/" 4 | }; 5 | --------------------------------------------------------------------------------