From 608b30a3165f5d4a91ebaa1573f1809ac29aa4bb Mon Sep 17 00:00:00 2001 From: edmondlang Date: Fri, 17 Jun 2022 16:34:28 +0800 Subject: [PATCH] storybook setup --- .storybook/main.js | 12 + .storybook/preview.js | 9 + package.json | 265 +++---- stories/Button.stories.js | 46 ++ stories/Button.vue | 63 ++ stories/Header.stories.js | 27 + stories/Header.vue | 51 ++ stories/Introduction.stories.mdx | 211 ++++++ stories/Page.stories.js | 27 + stories/Page.vue | 78 ++ stories/assets/code-brackets.svg | 1 + stories/assets/colors.svg | 1 + stories/assets/comments.svg | 1 + stories/assets/direction.svg | 1 + stories/assets/flow.svg | 1 + stories/assets/plugin.svg | 1 + stories/assets/repo.svg | 1 + stories/assets/stackalt.svg | 1 + stories/button.css | 1173 ++++++++++++++++++++++++++++++ stories/header.css | 32 + stories/page.css | 69 ++ 21 files changed, 1945 insertions(+), 126 deletions(-) create mode 100644 .storybook/main.js create mode 100644 .storybook/preview.js create mode 100644 stories/Button.stories.js create mode 100644 stories/Button.vue create mode 100644 stories/Header.stories.js create mode 100644 stories/Header.vue create mode 100644 stories/Introduction.stories.mdx create mode 100644 stories/Page.stories.js create mode 100644 stories/Page.vue create mode 100644 stories/assets/code-brackets.svg create mode 100644 stories/assets/colors.svg create mode 100644 stories/assets/comments.svg create mode 100644 stories/assets/direction.svg create mode 100644 stories/assets/flow.svg create mode 100644 stories/assets/plugin.svg create mode 100644 stories/assets/repo.svg create mode 100644 stories/assets/stackalt.svg create mode 100644 stories/button.css create mode 100644 stories/header.css create mode 100644 stories/page.css diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 00000000..789519f1 --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,12 @@ +module.exports = { + "stories": [ + "../stories/**/*.stories.mdx", + "../stories/**/*.stories.@(js|jsx|ts|tsx)" + ], + "addons": [ + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-interactions" + ], + "framework": "@storybook/vue" +} \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 00000000..a94bdcc6 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,9 @@ +export const parameters = { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +}; diff --git a/package.json b/package.json index 5d4b92bf..9423e72d 100644 --- a/package.json +++ b/package.json @@ -1,129 +1,142 @@ { - "private": true, - "scripts": { - "dev": "npm run development", - "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", - "watch": "npm run development -- --watch", - "watch-poll": "npm run watch -- --watch-poll", - "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", - "prod": "npm run production", - "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" - }, - "dependencies": { - "animate.css": "^4.1.1", - "bootstrap": "^4.0.0", - "bootstrap-datepicker": "^1.7.1", - "chart.js": "^2.9.4", - "dropzone": "^5.7.2", - "epic-spinners": "^1.1.0", - "flag-icon-css": "^3.5.0", - "font-awesome": "^4.7.0", - "intro.js": "^3.1.0", - "jquery": "^3.2", - "jquery.scrollbar": "^0.2.11", - "jwt-decode": "^3.1.2", - "noty": "^3.2.0-beta", - "perfect-scrollbar": "^1.5.0", - "popper.js": "^1.12", - "sass-loader": "10.1.0", - "select2": "^4.0.6-rc.1", - "v-money": "^0.8.1", - "vue": "^2.6.10", - "vue-avatar": "^2.1.8", - "vue-debounce": "^2.6.0", - "vue-template-compiler": "^2.6.10", - "vue-the-mask": "^0.11.1", - "vuelidate": "^0.7.4", - "vuex": "^3.1.1" - }, - "devDependencies": { - "axios": "^0.21.0", - "chromatic": "^6.5.4", - "cross-env": "^7.0.2", - "del": "^6.0.0", - "fancy-log": "^1.3.0", - "gulp": "^4.0.2", - "gulp-autoprefixer": "^7.0.1", - "gulp-clean-css": "^4.3.0", - "gulp-concat": "^2.6.1", - "gulp-concat-css": "^3.1.0", - "gulp-copy": "^4.0.1", - "gulp-livereload": "^4.0.2", - "gulp-load-plugins": "^2.0.6", - "gulp-newer": "^1.3.0", - "gulp-plumber": "^1.1.0", - "gulp-print": "^5.0.2", - "gulp-rename": "^2.0.0", - "gulp-replace": "^1.0.0", - "gulp-sass": "^4.1.0", - "gulp-streamify": "^1.0.2", - "gulp-uglify": "^3.0.0", - "gulp-uglify-es": "^2.0.0", - "laravel-mix": "^5.0.9", - "lodash": "^4.17.13", - "resolve-url-loader": "^3.1.2" - }, - "paths": { - "build": { - "css": "./public/css/", - "js": "./public/js/", - "images": "./public/images/", - "fonts": "./public/fonts/", - "flags": "./public/flag-icon-css/flags", - "main": "./public/" - } - }, - "globs": { - "vendorJs": [ - "./node_modules/jquery/dist/jquery.min.js", - "./node_modules/popper.js/dist/umd/popper.min.js", - "./node_modules/bootstrap/dist/js/bootstrap.min.js", - "./node_modules/jquery.scrollbar/jquery.scrollbar.min.js", - "./node_modules/select2/dist/js/select2.full.min.js", - "./node_modules/dropzone/dist/dropzone.js", - "./node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js", - "./node_modules/noty/lib/noty.js", - "./node_modules/intro.js/intro.js", - "./node_modules/vue/dist/vue.min.js" - ], - "vendorCss": [ - "./node_modules/font-awesome/css/font-awesome.min.css", - "./node_modules/flag-icon-css/css/flag-icon.min.css", - "./node_modules/jquery.scrollbar/jquery.scrollbar.css", - "./node_modules/select2/dist/css/select2.min.css", - "./node_modules/dropzone/dist/dropzone.css", - "./node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css", - "./node_modules/noty/lib/noty.css", - "./node_modules/noty/lib/themes/*.css", - "./node_modules/animate.css/animate.css", - "./node_modules/intro.js/introjs.css", - "./node_modules/bootstrap/dist/css/bootstrap.min.css" - ], - "vendorFonts": [ - "./node_modules/font-awesome/fonts/**/*" - ], - "vendorFlags": [ - "./node_modules/flag-icon-css/flags/**/*" - ], - "vendorImages": [ - "./node_modules/jquery-ui-dist/images/**/*.png", - "./node_modules/datatables.net-dt/images/**/*.png" - ], - "sourceCss": [ - "./resources/assets/sass/**/*.scss", - "./resources/assets/css/**/*.css" - ], - "sourceImages": [ - "./resources/assets/images/**/*" - ], - "sourceJs": [ - "./resources/assets/js/pages*.js", - "./resources/assets/js/three.r92.min.js", - "./resources/assets/js/vanta.birds.min.js", - "./resources/assets/js/scripts.js" - ], - "sourceFonts": [ - "./resources/assets/fonts/**/*" - ] + "private": true, + "scripts": { + "dev": "npm run development", + "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", + "watch": "npm run development -- --watch", + "watch-poll": "npm run watch -- --watch-poll", + "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", + "prod": "npm run production", + "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", + "storybook": "start-storybook -p 6006", + "build-storybook": "build-storybook" + }, + "dependencies": { + "animate.css": "^4.1.1", + "bootstrap": "^4.0.0", + "bootstrap-datepicker": "^1.7.1", + "chart.js": "^2.9.4", + "dropzone": "^5.7.2", + "epic-spinners": "^1.1.0", + "flag-icon-css": "^3.5.0", + "font-awesome": "^4.7.0", + "intro.js": "^3.1.0", + "jquery": "^3.2", + "jquery.scrollbar": "^0.2.11", + "jwt-decode": "^3.1.2", + "noty": "^3.2.0-beta", + "perfect-scrollbar": "^1.5.0", + "popper.js": "^1.12", + "sass-loader": "10.1.0", + "select2": "^4.0.6-rc.1", + "v-money": "^0.8.1", + "vue": "^2.6.10", + "vue-avatar": "^2.1.8", + "vue-debounce": "^2.6.0", + "vue-template-compiler": "^2.6.10", + "vue-the-mask": "^0.11.1", + "vuelidate": "^0.7.4", + "vuex": "^3.1.1" + }, + "devDependencies": { + "@babel/core": "^7.18.5", + "@storybook/addon-actions": "^6.5.9", + "@storybook/addon-essentials": "^6.5.9", + "@storybook/addon-interactions": "^6.5.9", + "@storybook/addon-links": "^6.5.9", + "@storybook/builder-webpack4": "^6.5.9", + "@storybook/manager-webpack4": "^6.5.9", + "@storybook/testing-library": "0.0.13", + "@storybook/vue": "^6.5.9", + "axios": "^0.21.0", + "babel-loader": "^8.2.5", + "chromatic": "^6.5.4", + "cross-env": "^7.0.2", + "del": "^6.0.0", + "fancy-log": "^1.3.0", + "gulp": "^4.0.2", + "gulp-autoprefixer": "^7.0.1", + "gulp-clean-css": "^4.3.0", + "gulp-concat": "^2.6.1", + "gulp-concat-css": "^3.1.0", + "gulp-copy": "^4.0.1", + "gulp-livereload": "^4.0.2", + "gulp-load-plugins": "^2.0.6", + "gulp-newer": "^1.3.0", + "gulp-plumber": "^1.1.0", + "gulp-print": "^5.0.2", + "gulp-rename": "^2.0.0", + "gulp-replace": "^1.0.0", + "gulp-sass": "^4.1.0", + "gulp-streamify": "^1.0.2", + "gulp-uglify": "^3.0.0", + "gulp-uglify-es": "^2.0.0", + "laravel-mix": "^5.0.9", + "lodash": "^4.17.13", + "resolve-url-loader": "^3.1.2", + "vue-loader": "^15.9.8" + }, + "paths": { + "build": { + "css": "./public/css/", + "js": "./public/js/", + "images": "./public/images/", + "fonts": "./public/fonts/", + "flags": "./public/flag-icon-css/flags", + "main": "./public/" } + }, + "globs": { + "vendorJs": [ + "./node_modules/jquery/dist/jquery.min.js", + "./node_modules/popper.js/dist/umd/popper.min.js", + "./node_modules/bootstrap/dist/js/bootstrap.min.js", + "./node_modules/jquery.scrollbar/jquery.scrollbar.min.js", + "./node_modules/select2/dist/js/select2.full.min.js", + "./node_modules/dropzone/dist/dropzone.js", + "./node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js", + "./node_modules/noty/lib/noty.js", + "./node_modules/intro.js/intro.js", + "./node_modules/vue/dist/vue.min.js" + ], + "vendorCss": [ + "./node_modules/font-awesome/css/font-awesome.min.css", + "./node_modules/flag-icon-css/css/flag-icon.min.css", + "./node_modules/jquery.scrollbar/jquery.scrollbar.css", + "./node_modules/select2/dist/css/select2.min.css", + "./node_modules/dropzone/dist/dropzone.css", + "./node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css", + "./node_modules/noty/lib/noty.css", + "./node_modules/noty/lib/themes/*.css", + "./node_modules/animate.css/animate.css", + "./node_modules/intro.js/introjs.css", + "./node_modules/bootstrap/dist/css/bootstrap.min.css" + ], + "vendorFonts": [ + "./node_modules/font-awesome/fonts/**/*" + ], + "vendorFlags": [ + "./node_modules/flag-icon-css/flags/**/*" + ], + "vendorImages": [ + "./node_modules/jquery-ui-dist/images/**/*.png", + "./node_modules/datatables.net-dt/images/**/*.png" + ], + "sourceCss": [ + "./resources/assets/sass/**/*.scss", + "./resources/assets/css/**/*.css" + ], + "sourceImages": [ + "./resources/assets/images/**/*" + ], + "sourceJs": [ + "./resources/assets/js/pages*.js", + "./resources/assets/js/three.r92.min.js", + "./resources/assets/js/vanta.birds.min.js", + "./resources/assets/js/scripts.js" + ], + "sourceFonts": [ + "./resources/assets/fonts/**/*" + ] + } } diff --git a/stories/Button.stories.js b/stories/Button.stories.js new file mode 100644 index 00000000..0087d63d --- /dev/null +++ b/stories/Button.stories.js @@ -0,0 +1,46 @@ +import MyButton from "./Button.vue"; + +// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export +export default { + title: "Example/Button", + component: MyButton, + // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes + argTypes: { + backgroundColor: { control: "color" }, + size: { + control: { type: "select" }, + options: ["small", "medium", "large"], + }, + }, +}; + +// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { MyButton }, + template: '', +}); + +export const Primary = Template.bind({}); +// More on args: https://storybook.js.org/docs/vue/writing-stories/args +Primary.args = { + primary: true, + label: "Button", +}; + +export const Secondary = Template.bind({}); +Secondary.args = { + label: "Button", +}; + +export const Large = Template.bind({}); +Large.args = { + size: "large", + label: "Button", +}; + +export const Small = Template.bind({}); +Small.args = { + size: "small", + label: "Button", +}; diff --git a/stories/Button.vue b/stories/Button.vue new file mode 100644 index 00000000..74efece7 --- /dev/null +++ b/stories/Button.vue @@ -0,0 +1,63 @@ + + + + diff --git a/stories/Header.stories.js b/stories/Header.stories.js new file mode 100644 index 00000000..d23db6e7 --- /dev/null +++ b/stories/Header.stories.js @@ -0,0 +1,27 @@ +import MyHeader from "./Header"; + +export default { + title: "Example/Header", + component: MyHeader, + parameters: { + // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout + layout: "fullscreen", + }, +}; + +const Template = (args, { argTypes }) => ({ + props: Object.keys(argTypes), + components: { MyHeader }, + template: + '', +}); + +export const LoggedIn = Template.bind({}); +LoggedIn.args = { + user: { + name: "Jane Doe", + }, +}; + +export const LoggedOut = Template.bind({}); +LoggedOut.args = {}; diff --git a/stories/Header.vue b/stories/Header.vue new file mode 100644 index 00000000..d00c19fc --- /dev/null +++ b/stories/Header.vue @@ -0,0 +1,51 @@ + + + diff --git a/stories/Introduction.stories.mdx b/stories/Introduction.stories.mdx new file mode 100644 index 00000000..edc33ed6 --- /dev/null +++ b/stories/Introduction.stories.mdx @@ -0,0 +1,211 @@ +import { Meta } from '@storybook/addon-docs'; +import Code from './assets/code-brackets.svg'; +import Colors from './assets/colors.svg'; +import Comments from './assets/comments.svg'; +import Direction from './assets/direction.svg'; +import Flow from './assets/flow.svg'; +import Plugin from './assets/plugin.svg'; +import Repo from './assets/repo.svg'; +import StackAlt from './assets/stackalt.svg'; + + + + + +# Welcome to Storybook + +Storybook helps you build UI components in isolation from your app's business logic, data, and context. +That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. + +Browse example stories now by navigating to them in the sidebar. +View their code in the `stories` directory to learn how they work. +We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. + +
Configure
+ +
+ + plugin + + Presets for popular tools + Easy setup for TypeScript, SCSS and more. + + + + Build + + Build configuration + How to customize webpack and Babel + + + + colors + + Styling + How to load and configure CSS libraries + + + + flow + + Data + Providers and mocking for data libraries + + +
+ +
Learn
+ +
+ + repo + + Storybook documentation + Configure, customize, and extend + + + + direction + + In-depth guides + Best practices from leading teams + + + + code + + GitHub project + View the source and add issues + + + + comments + + Discord chat + Chat with maintainers and the community + + +
+ +
+ TipEdit the Markdown in{' '} + stories/Introduction.stories.mdx +
diff --git a/stories/Page.stories.js b/stories/Page.stories.js new file mode 100644 index 00000000..885633c1 --- /dev/null +++ b/stories/Page.stories.js @@ -0,0 +1,27 @@ +import { within, userEvent } from "@storybook/testing-library"; + +import MyPage from "./Page"; + +export default { + title: "Example/Page", + component: MyPage, + parameters: { + // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout + layout: "fullscreen", + }, +}; + +const Template = () => ({ + components: { MyPage }, + template: "", +}); + +export const LoggedOut = Template.bind({}); + +// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing +export const LoggedIn = Template.bind({}); +LoggedIn.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = await canvas.getByRole("button", { name: /Log in/i }); + await userEvent.click(loginButton); +}; diff --git a/stories/Page.vue b/stories/Page.vue new file mode 100644 index 00000000..9041025e --- /dev/null +++ b/stories/Page.vue @@ -0,0 +1,78 @@ + + + diff --git a/stories/assets/code-brackets.svg b/stories/assets/code-brackets.svg new file mode 100644 index 00000000..73de9477 --- /dev/null +++ b/stories/assets/code-brackets.svg @@ -0,0 +1 @@ +illustration/code-brackets \ No newline at end of file diff --git a/stories/assets/colors.svg b/stories/assets/colors.svg new file mode 100644 index 00000000..17d58d51 --- /dev/null +++ b/stories/assets/colors.svg @@ -0,0 +1 @@ +illustration/colors \ No newline at end of file diff --git a/stories/assets/comments.svg b/stories/assets/comments.svg new file mode 100644 index 00000000..6493a139 --- /dev/null +++ b/stories/assets/comments.svg @@ -0,0 +1 @@ +illustration/comments \ No newline at end of file diff --git a/stories/assets/direction.svg b/stories/assets/direction.svg new file mode 100644 index 00000000..65676ac2 --- /dev/null +++ b/stories/assets/direction.svg @@ -0,0 +1 @@ +illustration/direction \ No newline at end of file diff --git a/stories/assets/flow.svg b/stories/assets/flow.svg new file mode 100644 index 00000000..8ac27db4 --- /dev/null +++ b/stories/assets/flow.svg @@ -0,0 +1 @@ +illustration/flow \ No newline at end of file diff --git a/stories/assets/plugin.svg b/stories/assets/plugin.svg new file mode 100644 index 00000000..29e5c690 --- /dev/null +++ b/stories/assets/plugin.svg @@ -0,0 +1 @@ +illustration/plugin \ No newline at end of file diff --git a/stories/assets/repo.svg b/stories/assets/repo.svg new file mode 100644 index 00000000..f386ee90 --- /dev/null +++ b/stories/assets/repo.svg @@ -0,0 +1 @@ +illustration/repo \ No newline at end of file diff --git a/stories/assets/stackalt.svg b/stories/assets/stackalt.svg new file mode 100644 index 00000000..9b7ad274 --- /dev/null +++ b/stories/assets/stackalt.svg @@ -0,0 +1 @@ +illustration/stackalt \ No newline at end of file diff --git a/stories/button.css b/stories/button.css new file mode 100644 index 00000000..7d68dd76 --- /dev/null +++ b/stories/button.css @@ -0,0 +1,1173 @@ +/*------------------------------------------------------------------ +[6. Buttons] +*/ + +/* +[Buttons Base Styles] +*/ + +.btn { + font-family: Arial, sans-serif; + font-size: 14px; + font-weight: normal; + letter-spacing: 0.01em; + -webkit-font-smoothing: antialiased; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -webkit-font-feature-settings: "kern" 1; + -moz-font-feature-settings: "kern" 1; + margin-bottom: 0; + border: 1px solid #ececec; + text-align: center; + vertical-align: middle; + cursor: pointer; + border-radius: 3px; + background-image: none !important; + color: #3a3a3a; + background-color: #fff; + text-shadow: none; + box-shadow: none; + line-height: 21px; + position: relative; + transition: color 0.1s linear 0s,background-color 0.1s linear 0s,opacity 0.2s linear 0s !important; + padding: 6px 17px; +} + +.btn:hover { + background-color: #fafafa; + border: 1px solid rgba(58, 58, 58, 0.27); + color: #333; +} + +.btn.active { + border-color: #dfdfdf; + background: #fff; + color: #333; +} + +.btn:focus, +.btn:active:focus, +.btn.active:focus { + outline: none !important; + outline-style: none; + color: #333; +} + +.btn .caret { + margin-left: 3px; +} + +.btn .caret.single { + margin-left: 0px; +} + +.btn:hover, +.btn:focus, +.btn:active, +.btn.active, +.btn.disabled, +.btn[disabled] { + box-shadow: none; +} + +button:focus { + outline: none !important; +} + +button:disabled { + cursor: not-allowed; +} + +/* +Alternate buttons +-------------------------------------------------- +*/ + +.btn-primary, +.btn-primary:focus { + color: #fff; + background-color: #00baa4; + border-color: #00baa4; +} + +.btn-primary.active, +.btn-primary:active, +.btn-primary.active:focus, +.btn-primary:active:focus, +.btn-primary:active:hover, +.btn-primary .show .dropdown-toggle.btn-primary { + background-color: #009785 !important; + border-color: #009785 !important; + color: #fff; +} + +.btn-primary.hover, +.btn-primary:hover, +.btn-primary .show .dropdown-toggle.btn-primary { + background-color: #33c8b6; + border-color: #33c8b6; + color: #fff; +} + +.btn-primary.active:hover { + background: #00a08d; + border-color: #00a08d; +} + +.btn-primary.disabled, +.btn-primary.disabled:hover, +.btn-primary.disabled:focus, +.btn-primary.disabled:active, +.btn-primary.disabled.active, +.btn-primary[disabled], +.btn-primary[disabled]:hover, +.btn-primary[disabled]:focus, +.btn-primary[disabled]:active, +.btn-primary[disabled].active, +fieldset[disabled] .btn-primary, +fieldset[disabled] .btn-primary:hover, +fieldset[disabled] .btn-primary:focus, +fieldset[disabled] .btn-primary:active, +fieldset[disabled] .btn-primary.active { + background-color: #00baa4; + border-color: #00baa4; +} + +.btn-primary .badge { + color: #00baa4; + background-color: #fff; +} + +.btn-success, +.btn-success:focus { + color: #fff; + background-color: #1ac86f; + border-color: #1ac86f; +} + +.btn-success.active, +.btn-success:active, +.btn-success.active:focus, +.btn-success:active:focus, +.btn-success:active:hover, +.btn-success .show .dropdown-toggle.btn-success { + background-color: #15a25a !important; + border-color: #15a25a !important; + color: #fff; +} + +.btn-success.hover, +.btn-success:hover, +.btn-success .show .dropdown-toggle.btn-success { + background-color: #48d38c; + border-color: #48d38c; + color: #fff; +} + +.btn-success.active:hover { + background: #16ac5f; + border-color: #16ac5f; +} + +.btn-success.disabled, +.btn-success.disabled:hover, +.btn-success.disabled:focus, +.btn-success.disabled:active, +.btn-success.disabled.active, +.btn-success[disabled], +.btn-success[disabled]:hover, +.btn-success[disabled]:focus, +.btn-success[disabled]:active, +.btn-success[disabled].active, +fieldset[disabled] .btn-success, +fieldset[disabled] .btn-success:hover, +fieldset[disabled] .btn-success:focus, +fieldset[disabled] .btn-success:active, +fieldset[disabled] .btn-success.active { + background-color: #1ac86f; + border-color: #1ac86f; +} + +.btn-success .badge { + color: #1ac86f; + background-color: #fff; +} + +.btn-complete, +.btn-complete:focus { + color: #fff; + background-color: #009add; + border-color: #009add; +} + +.btn-complete.active, +.btn-complete:active, +.btn-complete.active:focus, +.btn-complete:active:focus, +.btn-complete:active:hover, +.btn-complete .show .dropdown-toggle.btn-complete { + background-color: #007db3 !important; + border-color: #007db3 !important; + color: #fff; +} + +.btn-complete.hover, +.btn-complete:hover, +.btn-complete .show .dropdown-toggle.btn-complete { + background-color: #33aee4; + border-color: #33aee4; + color: #fff; +} + +.btn-complete.active:hover { + background: #0084be; + border-color: #0084be; +} + +.btn-complete.disabled, +.btn-complete.disabled:hover, +.btn-complete.disabled:focus, +.btn-complete.disabled:active, +.btn-complete.disabled.active, +.btn-complete[disabled], +.btn-complete[disabled]:hover, +.btn-complete[disabled]:focus, +.btn-complete[disabled]:active, +.btn-complete[disabled].active, +fieldset[disabled] .btn-complete, +fieldset[disabled] .btn-complete:hover, +fieldset[disabled] .btn-complete:focus, +fieldset[disabled] .btn-complete:active, +fieldset[disabled] .btn-complete.active { + background-color: #009add; + border-color: #009add; +} + +.btn-complete .badge { + color: #009add; + background-color: #fff; +} + +.btn-info, +.btn-info:focus { + color: #fff; + background-color: #4d6286; + border-color: #4d6286; +} + +.btn-info.active, +.btn-info:active, +.btn-info.active:focus, +.btn-info:active:focus, +.btn-info:active:hover, +.btn-info .show .dropdown-toggle.btn-info { + background-color: #3e4f6d !important; + border-color: #3e4f6d !important; + color: #fff; +} + +.btn-info.hover, +.btn-info:hover, +.btn-info .show .dropdown-toggle.btn-info { + background-color: #71819e; + border-color: #71819e; + color: #fff; +} + +.btn-info.active:hover { + background: #425473; + border-color: #425473; +} + +.btn-info.disabled, +.btn-info.disabled:hover, +.btn-info.disabled:focus, +.btn-info.disabled:active, +.btn-info.disabled.active, +.btn-info[disabled], +.btn-info[disabled]:hover, +.btn-info[disabled]:focus, +.btn-info[disabled]:active, +.btn-info[disabled].active, +fieldset[disabled] .btn-info, +fieldset[disabled] .btn-info:hover, +fieldset[disabled] .btn-info:focus, +fieldset[disabled] .btn-info:active, +fieldset[disabled] .btn-info.active { + background-color: #4d6286; + border-color: #4d6286; +} + +.btn-info .badge { + color: #4d6286; + background-color: #fff; +} + +.btn-warning, +.btn-warning:focus { + color: #fff; + background-color: #ffca00; + border-color: #ffca00; +} + +.btn-warning.active, +.btn-warning:active, +.btn-warning.active:focus, +.btn-warning:active:focus, +.btn-warning:active:hover, +.btn-warning .show .dropdown-toggle.btn-warning { + background-color: #cfa400 !important; + border-color: #cfa400 !important; + color: #fff; +} + +.btn-warning.hover, +.btn-warning:hover, +.btn-warning .show .dropdown-toggle.btn-warning { + background-color: #ffd533; + border-color: #ffd533; + color: #fff; +} + +.btn-warning.active:hover { + background: #dbae00; + border-color: #dbae00; +} + +.btn-warning.disabled, +.btn-warning.disabled:hover, +.btn-warning.disabled:focus, +.btn-warning.disabled:active, +.btn-warning.disabled.active, +.btn-warning[disabled], +.btn-warning[disabled]:hover, +.btn-warning[disabled]:focus, +.btn-warning[disabled]:active, +.btn-warning[disabled].active, +fieldset[disabled] .btn-warning, +fieldset[disabled] .btn-warning:hover, +fieldset[disabled] .btn-warning:focus, +fieldset[disabled] .btn-warning:active, +fieldset[disabled] .btn-warning.active { + background-color: #ffca00; + border-color: #ffca00; +} + +.btn-warning .badge { + color: #ffca00; + background-color: #fff; +} + +.btn-danger, +.btn-danger:focus { + color: #fff; + background-color: #ed5335; + border-color: #ed5335; +} + +.btn-danger.active, +.btn-danger:active, +.btn-danger.active:focus, +.btn-danger:active:focus, +.btn-danger:active:hover, +.btn-danger .show .dropdown-toggle.btn-danger { + background-color: #c0432b !important; + border-color: #c0432b !important; + color: #fff; +} + +.btn-danger.hover, +.btn-danger:hover, +.btn-danger .show .dropdown-toggle.btn-danger { + background-color: #f1755d; + border-color: #f1755d; + color: #fff; +} + +.btn-danger.active:hover { + background: #cc472e; + border-color: #cc472e; +} + +.btn-danger.disabled, +.btn-danger.disabled:hover, +.btn-danger.disabled:focus, +.btn-danger.disabled:active, +.btn-danger.disabled.active, +.btn-danger[disabled], +.btn-danger[disabled]:hover, +.btn-danger[disabled]:focus, +.btn-danger[disabled]:active, +.btn-danger[disabled].active, +fieldset[disabled] .btn-danger, +fieldset[disabled] .btn-danger:hover, +fieldset[disabled] .btn-danger:focus, +fieldset[disabled] .btn-danger:active, +fieldset[disabled] .btn-danger.active { + background-color: #ed5335; + border-color: #ed5335; +} + +.btn-danger .badge { + color: #ed5335; + background-color: #fff; +} + +.btn-outline-primary, +.btn-outline-primary:focus { + color: #00baa4; + background-color: transparent; + border-color: #00baa4; +} + +.btn-outline-primary.active, +.btn-outline-primary:active, +.btn-outline-primary.active:focus, +.btn-outline-primary:active:focus, +.btn-outline-primary:active:hover, +.btn-outline-primary .show .dropdown-toggle.btn-outline-primary { + background-color: rgba(0, 0, 0, 0.19) !important; + border-color: rgba(0, 0, 0, 0.19) !important; + color: #00baa4; +} + +.btn-outline-primary.hover, +.btn-outline-primary:hover, +.btn-outline-primary .show .dropdown-toggle.btn-outline-primary { + background-color: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.2); + color: #00baa4; +} + +.btn-outline-primary.active:hover { + background: rgba(0, 0, 0, 0.14); + border-color: rgba(0, 0, 0, 0.14); +} + +.btn-outline-primary.disabled, +.btn-outline-primary.disabled:hover, +.btn-outline-primary.disabled:focus, +.btn-outline-primary.disabled:active, +.btn-outline-primary.disabled.active, +.btn-outline-primary[disabled], +.btn-outline-primary[disabled]:hover, +.btn-outline-primary[disabled]:focus, +.btn-outline-primary[disabled]:active, +.btn-outline-primary[disabled].active, +fieldset[disabled] .btn-outline-primary, +fieldset[disabled] .btn-outline-primary:hover, +fieldset[disabled] .btn-outline-primary:focus, +fieldset[disabled] .btn-outline-primary:active, +fieldset[disabled] .btn-outline-primary.active { + background-color: transparent; + border-color: #00baa4; +} + +.btn-outline-primary .badge { + color: transparent; + background-color: #00baa4; +} + +.btn-outline-primary:hover, +.btn-outline-primary:hover:focus { + color: #fff; + background-color: #00baa4; + border-color: #00baa4; +} + +.btn-outline-primary:hover.active, +.btn-outline-primary:hover:active, +.btn-outline-primary:hover.active:focus, +.btn-outline-primary:hover:active:focus, +.btn-outline-primary:hover:active:hover, +.btn-outline-primary:hover .show .dropdown-toggle.btn-outline-primary:hover { + background-color: #009785 !important; + border-color: #009785 !important; + color: #fff; +} + +.btn-outline-primary:hover.hover, +.btn-outline-primary:hover:hover, +.btn-outline-primary:hover .show .dropdown-toggle.btn-outline-primary:hover { + background-color: #33c8b6; + border-color: #33c8b6; + color: #fff; +} + +.btn-outline-primary:hover.active:hover { + background: #00a08d; + border-color: #00a08d; +} + +.btn-outline-primary:hover.disabled, +.btn-outline-primary:hover.disabled:hover, +.btn-outline-primary:hover.disabled:focus, +.btn-outline-primary:hover.disabled:active, +.btn-outline-primary:hover.disabled.active, +.btn-outline-primary:hover[disabled], +.btn-outline-primary:hover[disabled]:hover, +.btn-outline-primary:hover[disabled]:focus, +.btn-outline-primary:hover[disabled]:active, +.btn-outline-primary:hover[disabled].active, +fieldset[disabled] .btn-outline-primary:hover, +fieldset[disabled] .btn-outline-primary:hover:hover, +fieldset[disabled] .btn-outline-primary:hover:focus, +fieldset[disabled] .btn-outline-primary:hover:active, +fieldset[disabled] .btn-outline-primary:hover.active { + background-color: #00baa4; + border-color: #00baa4; +} + +.btn-outline-primary:hover .badge { + color: #00baa4; + background-color: #fff; +} + +.btn-outline-success, +.btn-outline-success:focus { + color: #1ac86f; + background-color: transparent; + border-color: #1ac86f; +} + +.btn-outline-success.active, +.btn-outline-success:active, +.btn-outline-success.active:focus, +.btn-outline-success:active:focus, +.btn-outline-success:active:hover, +.btn-outline-success .show .dropdown-toggle.btn-outline-success { + background-color: rgba(0, 0, 0, 0.19) !important; + border-color: rgba(0, 0, 0, 0.19) !important; + color: #1ac86f; +} + +.btn-outline-success.hover, +.btn-outline-success:hover, +.btn-outline-success .show .dropdown-toggle.btn-outline-success { + background-color: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.2); + color: #1ac86f; +} + +.btn-outline-success.active:hover { + background: rgba(0, 0, 0, 0.14); + border-color: rgba(0, 0, 0, 0.14); +} + +.btn-outline-success.disabled, +.btn-outline-success.disabled:hover, +.btn-outline-success.disabled:focus, +.btn-outline-success.disabled:active, +.btn-outline-success.disabled.active, +.btn-outline-success[disabled], +.btn-outline-success[disabled]:hover, +.btn-outline-success[disabled]:focus, +.btn-outline-success[disabled]:active, +.btn-outline-success[disabled].active, +fieldset[disabled] .btn-outline-success, +fieldset[disabled] .btn-outline-success:hover, +fieldset[disabled] .btn-outline-success:focus, +fieldset[disabled] .btn-outline-success:active, +fieldset[disabled] .btn-outline-success.active { + background-color: transparent; + border-color: #1ac86f; +} + +.btn-outline-success .badge { + color: transparent; + background-color: #1ac86f; +} + +.btn-outline-success:hover, +.btn-outline-success:hover:focus { + color: #fff; + background-color: #1ac86f; + border-color: #1ac86f; +} + +.btn-outline-success:hover.active, +.btn-outline-success:hover:active, +.btn-outline-success:hover.active:focus, +.btn-outline-success:hover:active:focus, +.btn-outline-success:hover:active:hover, +.btn-outline-success:hover .show .dropdown-toggle.btn-outline-success:hover { + background-color: #15a25a !important; + border-color: #15a25a !important; + color: #fff; +} + +.btn-outline-success:hover.hover, +.btn-outline-success:hover:hover, +.btn-outline-success:hover .show .dropdown-toggle.btn-outline-success:hover { + background-color: #48d38c; + border-color: #48d38c; + color: #fff; +} + +.btn-outline-success:hover.active:hover { + background: #16ac5f; + border-color: #16ac5f; +} + +.btn-outline-success:hover.disabled, +.btn-outline-success:hover.disabled:hover, +.btn-outline-success:hover.disabled:focus, +.btn-outline-success:hover.disabled:active, +.btn-outline-success:hover.disabled.active, +.btn-outline-success:hover[disabled], +.btn-outline-success:hover[disabled]:hover, +.btn-outline-success:hover[disabled]:focus, +.btn-outline-success:hover[disabled]:active, +.btn-outline-success:hover[disabled].active, +fieldset[disabled] .btn-outline-success:hover, +fieldset[disabled] .btn-outline-success:hover:hover, +fieldset[disabled] .btn-outline-success:hover:focus, +fieldset[disabled] .btn-outline-success:hover:active, +fieldset[disabled] .btn-outline-success:hover.active { + background-color: #1ac86f; + border-color: #1ac86f; +} + +.btn-outline-success:hover .badge { + color: #1ac86f; + background-color: #fff; +} + +.btn-outline-complete, +.btn-outline-complete:focus { + color: #009add; + background-color: transparent; + border-color: #009add; +} + +.btn-outline-complete.active, +.btn-outline-complete:active, +.btn-outline-complete.active:focus, +.btn-outline-complete:active:focus, +.btn-outline-complete:active:hover, +.btn-outline-complete .show .dropdown-toggle.btn-outline-complete { + background-color: rgba(0, 0, 0, 0.19) !important; + border-color: rgba(0, 0, 0, 0.19) !important; + color: #009add; +} + +.btn-outline-complete.hover, +.btn-outline-complete:hover, +.btn-outline-complete .show .dropdown-toggle.btn-outline-complete { + background-color: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.2); + color: #009add; +} + +.btn-outline-complete.active:hover { + background: rgba(0, 0, 0, 0.14); + border-color: rgba(0, 0, 0, 0.14); +} + +.btn-outline-complete.disabled, +.btn-outline-complete.disabled:hover, +.btn-outline-complete.disabled:focus, +.btn-outline-complete.disabled:active, +.btn-outline-complete.disabled.active, +.btn-outline-complete[disabled], +.btn-outline-complete[disabled]:hover, +.btn-outline-complete[disabled]:focus, +.btn-outline-complete[disabled]:active, +.btn-outline-complete[disabled].active, +fieldset[disabled] .btn-outline-complete, +fieldset[disabled] .btn-outline-complete:hover, +fieldset[disabled] .btn-outline-complete:focus, +fieldset[disabled] .btn-outline-complete:active, +fieldset[disabled] .btn-outline-complete.active { + background-color: transparent; + border-color: #009add; +} + +.btn-outline-complete .badge { + color: transparent; + background-color: #009add; +} + +.btn-outline-complete:hover, +.btn-outline-complete:hover:focus { + color: #fff; + background-color: #009add; + border-color: #009add; +} + +.btn-outline-complete:hover.active, +.btn-outline-complete:hover:active, +.btn-outline-complete:hover.active:focus, +.btn-outline-complete:hover:active:focus, +.btn-outline-complete:hover:active:hover, +.btn-outline-complete:hover .show .dropdown-toggle.btn-outline-complete:hover { + background-color: #007db3 !important; + border-color: #007db3 !important; + color: #fff; +} + +.btn-outline-complete:hover.hover, +.btn-outline-complete:hover:hover, +.btn-outline-complete:hover .show .dropdown-toggle.btn-outline-complete:hover { + background-color: #33aee4; + border-color: #33aee4; + color: #fff; +} + +.btn-outline-complete:hover.active:hover { + background: #0084be; + border-color: #0084be; +} + +.btn-outline-complete:hover.disabled, +.btn-outline-complete:hover.disabled:hover, +.btn-outline-complete:hover.disabled:focus, +.btn-outline-complete:hover.disabled:active, +.btn-outline-complete:hover.disabled.active, +.btn-outline-complete:hover[disabled], +.btn-outline-complete:hover[disabled]:hover, +.btn-outline-complete:hover[disabled]:focus, +.btn-outline-complete:hover[disabled]:active, +.btn-outline-complete:hover[disabled].active, +fieldset[disabled] .btn-outline-complete:hover, +fieldset[disabled] .btn-outline-complete:hover:hover, +fieldset[disabled] .btn-outline-complete:hover:focus, +fieldset[disabled] .btn-outline-complete:hover:active, +fieldset[disabled] .btn-outline-complete:hover.active { + background-color: #009add; + border-color: #009add; +} + +.btn-outline-complete:hover .badge { + color: #009add; + background-color: #fff; +} + +.btn-outline-info, +.btn-outline-info:focus { + color: #4d6286; + background-color: transparent; + border-color: #4d6286; +} + +.btn-outline-info.active, +.btn-outline-info:active, +.btn-outline-info.active:focus, +.btn-outline-info:active:focus, +.btn-outline-info:active:hover, +.btn-outline-info .show .dropdown-toggle.btn-outline-info { + background-color: rgba(0, 0, 0, 0.19) !important; + border-color: rgba(0, 0, 0, 0.19) !important; + color: #4d6286; +} + +.btn-outline-info.hover, +.btn-outline-info:hover, +.btn-outline-info .show .dropdown-toggle.btn-outline-info { + background-color: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.2); + color: #4d6286; +} + +.btn-outline-info.active:hover { + background: rgba(0, 0, 0, 0.14); + border-color: rgba(0, 0, 0, 0.14); +} + +.btn-outline-info.disabled, +.btn-outline-info.disabled:hover, +.btn-outline-info.disabled:focus, +.btn-outline-info.disabled:active, +.btn-outline-info.disabled.active, +.btn-outline-info[disabled], +.btn-outline-info[disabled]:hover, +.btn-outline-info[disabled]:focus, +.btn-outline-info[disabled]:active, +.btn-outline-info[disabled].active, +fieldset[disabled] .btn-outline-info, +fieldset[disabled] .btn-outline-info:hover, +fieldset[disabled] .btn-outline-info:focus, +fieldset[disabled] .btn-outline-info:active, +fieldset[disabled] .btn-outline-info.active { + background-color: transparent; + border-color: #4d6286; +} + +.btn-outline-info .badge { + color: transparent; + background-color: #4d6286; +} + +.btn-outline-info:hover, +.btn-outline-info:hover:focus { + color: #fff; + background-color: #4d6286; + border-color: #4d6286; +} + +.btn-outline-info:hover.active, +.btn-outline-info:hover:active, +.btn-outline-info:hover.active:focus, +.btn-outline-info:hover:active:focus, +.btn-outline-info:hover:active:hover, +.btn-outline-info:hover .show .dropdown-toggle.btn-outline-info:hover { + background-color: #3e4f6d !important; + border-color: #3e4f6d !important; + color: #fff; +} + +.btn-outline-info:hover.hover, +.btn-outline-info:hover:hover, +.btn-outline-info:hover .show .dropdown-toggle.btn-outline-info:hover { + background-color: #71819e; + border-color: #71819e; + color: #fff; +} + +.btn-outline-info:hover.active:hover { + background: #425473; + border-color: #425473; +} + +.btn-outline-info:hover.disabled, +.btn-outline-info:hover.disabled:hover, +.btn-outline-info:hover.disabled:focus, +.btn-outline-info:hover.disabled:active, +.btn-outline-info:hover.disabled.active, +.btn-outline-info:hover[disabled], +.btn-outline-info:hover[disabled]:hover, +.btn-outline-info:hover[disabled]:focus, +.btn-outline-info:hover[disabled]:active, +.btn-outline-info:hover[disabled].active, +fieldset[disabled] .btn-outline-info:hover, +fieldset[disabled] .btn-outline-info:hover:hover, +fieldset[disabled] .btn-outline-info:hover:focus, +fieldset[disabled] .btn-outline-info:hover:active, +fieldset[disabled] .btn-outline-info:hover.active { + background-color: #4d6286; + border-color: #4d6286; +} + +.btn-outline-info:hover .badge { + color: #4d6286; + background-color: #fff; +} + +.btn-outline-warning, +.btn-outline-warning:focus { + color: #ffca00; + background-color: transparent; + border-color: #ffca00; +} + +.btn-outline-warning.active, +.btn-outline-warning:active, +.btn-outline-warning.active:focus, +.btn-outline-warning:active:focus, +.btn-outline-warning:active:hover, +.btn-outline-warning .show .dropdown-toggle.btn-outline-warning { + background-color: rgba(0, 0, 0, 0.19) !important; + border-color: rgba(0, 0, 0, 0.19) !important; + color: #ffca00; +} + +.btn-outline-warning.hover, +.btn-outline-warning:hover, +.btn-outline-warning .show .dropdown-toggle.btn-outline-warning { + background-color: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.2); + color: #ffca00; +} + +.btn-outline-warning.active:hover { + background: rgba(0, 0, 0, 0.14); + border-color: rgba(0, 0, 0, 0.14); +} + +.btn-outline-warning.disabled, +.btn-outline-warning.disabled:hover, +.btn-outline-warning.disabled:focus, +.btn-outline-warning.disabled:active, +.btn-outline-warning.disabled.active, +.btn-outline-warning[disabled], +.btn-outline-warning[disabled]:hover, +.btn-outline-warning[disabled]:focus, +.btn-outline-warning[disabled]:active, +.btn-outline-warning[disabled].active, +fieldset[disabled] .btn-outline-warning, +fieldset[disabled] .btn-outline-warning:hover, +fieldset[disabled] .btn-outline-warning:focus, +fieldset[disabled] .btn-outline-warning:active, +fieldset[disabled] .btn-outline-warning.active { + background-color: transparent; + border-color: #ffca00; +} + +.btn-outline-warning .badge { + color: transparent; + background-color: #ffca00; +} + +.btn-outline-warning:hover, +.btn-outline-warning:hover:focus { + color: #fff; + background-color: #ffca00; + border-color: #ffca00; +} + +.btn-outline-warning:hover.active, +.btn-outline-warning:hover:active, +.btn-outline-warning:hover.active:focus, +.btn-outline-warning:hover:active:focus, +.btn-outline-warning:hover:active:hover, +.btn-outline-warning:hover .show .dropdown-toggle.btn-outline-warning:hover { + background-color: #cfa400 !important; + border-color: #cfa400 !important; + color: #fff; +} + +.btn-outline-warning:hover.hover, +.btn-outline-warning:hover:hover, +.btn-outline-warning:hover .show .dropdown-toggle.btn-outline-warning:hover { + background-color: #ffd533; + border-color: #ffd533; + color: #fff; +} + +.btn-outline-warning:hover.active:hover { + background: #dbae00; + border-color: #dbae00; +} + +.btn-outline-warning:hover.disabled, +.btn-outline-warning:hover.disabled:hover, +.btn-outline-warning:hover.disabled:focus, +.btn-outline-warning:hover.disabled:active, +.btn-outline-warning:hover.disabled.active, +.btn-outline-warning:hover[disabled], +.btn-outline-warning:hover[disabled]:hover, +.btn-outline-warning:hover[disabled]:focus, +.btn-outline-warning:hover[disabled]:active, +.btn-outline-warning:hover[disabled].active, +fieldset[disabled] .btn-outline-warning:hover, +fieldset[disabled] .btn-outline-warning:hover:hover, +fieldset[disabled] .btn-outline-warning:hover:focus, +fieldset[disabled] .btn-outline-warning:hover:active, +fieldset[disabled] .btn-outline-warning:hover.active { + background-color: #ffca00; + border-color: #ffca00; +} + +.btn-outline-warning:hover .badge { + color: #ffca00; + background-color: #fff; +} + +.btn-outline-danger, +.btn-outline-danger:focus { + color: #ed5335; + background-color: transparent; + border-color: #ed5335; +} + +.btn-outline-danger.active, +.btn-outline-danger:active, +.btn-outline-danger.active:focus, +.btn-outline-danger:active:focus, +.btn-outline-danger:active:hover, +.btn-outline-danger .show .dropdown-toggle.btn-outline-danger { + background-color: rgba(0, 0, 0, 0.19) !important; + border-color: rgba(0, 0, 0, 0.19) !important; + color: #ed5335; +} + +.btn-outline-danger.hover, +.btn-outline-danger:hover, +.btn-outline-danger .show .dropdown-toggle.btn-outline-danger { + background-color: rgba(255, 255, 255, 0.2); + border-color: rgba(255, 255, 255, 0.2); + color: #ed5335; +} + +.btn-outline-danger.active:hover { + background: rgba(0, 0, 0, 0.14); + border-color: rgba(0, 0, 0, 0.14); +} + +.btn-outline-danger.disabled, +.btn-outline-danger.disabled:hover, +.btn-outline-danger.disabled:focus, +.btn-outline-danger.disabled:active, +.btn-outline-danger.disabled.active, +.btn-outline-danger[disabled], +.btn-outline-danger[disabled]:hover, +.btn-outline-danger[disabled]:focus, +.btn-outline-danger[disabled]:active, +.btn-outline-danger[disabled].active, +fieldset[disabled] .btn-outline-danger, +fieldset[disabled] .btn-outline-danger:hover, +fieldset[disabled] .btn-outline-danger:focus, +fieldset[disabled] .btn-outline-danger:active, +fieldset[disabled] .btn-outline-danger.active { + background-color: transparent; + border-color: #ed5335; +} + +.btn-outline-danger .badge { + color: transparent; + background-color: #ed5335; +} + +.btn-outline-danger:hover, +.btn-outline-danger:hover:focus { + color: #fff; + background-color: #ed5335; + border-color: #ed5335; +} + +.btn-outline-danger:hover.active, +.btn-outline-danger:hover:active, +.btn-outline-danger:hover.active:focus, +.btn-outline-danger:hover:active:focus, +.btn-outline-danger:hover:active:hover, +.btn-outline-danger:hover .show .dropdown-toggle.btn-outline-danger:hover { + background-color: #c0432b !important; + border-color: #c0432b !important; + color: #fff; +} + +.btn-outline-danger:hover.hover, +.btn-outline-danger:hover:hover, +.btn-outline-danger:hover .show .dropdown-toggle.btn-outline-danger:hover { + background-color: #f1755d; + border-color: #f1755d; + color: #fff; +} + +.btn-outline-danger:hover.active:hover { + background: #cc472e; + border-color: #cc472e; +} + +.btn-outline-danger:hover.disabled, +.btn-outline-danger:hover.disabled:hover, +.btn-outline-danger:hover.disabled:focus, +.btn-outline-danger:hover.disabled:active, +.btn-outline-danger:hover.disabled.active, +.btn-outline-danger:hover[disabled], +.btn-outline-danger:hover[disabled]:hover, +.btn-outline-danger:hover[disabled]:focus, +.btn-outline-danger:hover[disabled]:active, +.btn-outline-danger:hover[disabled].active, +fieldset[disabled] .btn-outline-danger:hover, +fieldset[disabled] .btn-outline-danger:hover:hover, +fieldset[disabled] .btn-outline-danger:hover:focus, +fieldset[disabled] .btn-outline-danger:hover:active, +fieldset[disabled] .btn-outline-danger:hover.active { + background-color: #ed5335; + border-color: #ed5335; +} + +.btn-outline-danger:hover .badge { + color: #ed5335; + background-color: #fff; +} + +.btn-default, +.btn-default:focus { + color: #5e5e5e; + background-color: #fff; + border-color: #ececec; +} + +.btn-default.active, +.btn-default:active, +.btn-default.active:focus, +.btn-default:active:focus, +.btn-default:active:hover { + background-color: #ececec; + border-color: #dfdfdf; + color: #1a1a1a; +} + +.btn-default.hover, +.btn-default:hover { + background-color: #f9f9f9; + border-color: rgba(58, 58, 58, 0.27); + color: #101010; +} + +.btn-default.active:hover { + background: #f0f0f0; +} + +.btn-link { + color: #5e5e5e; + background-color: transparent; + border: none; +} + +.btn-link:hover, +.btn-link:focus, +.btn-link:active, +.btn-link.active, +.btn-link.disabled, +.btn-link[disabled] { + background-color: transparent; + border: none; + text-decoration: none; + outline: none; +} + +.btn-file { + position: relative; + overflow: hidden; +} + +.btn-file input[type=file] { + position: absolute; + top: 0; + right: 0; + min-width: 100%; + min-height: 100%; + font-size: 100px; + text-align: right; + filter: alpha(opacity=0); + opacity: 0; + background: red; + cursor: inherit; + display: block; +} + +/* +Button Sizes +-------------------------------------------------- +*/ + +.btn-lg, +.btn-group-lg > .btn { + padding-left: 28px; + padding-right: 28px; + line-height: 22px; + padding-top: 10px; + padding-bottom: 10px; +} + +.btn-sm, +.btn-group-sm > .btn { + padding-left: 16px; + padding-right: 16px; + font-size: 11.9px; + line-height: 20px; +} + +.btn-xs, +.btn-group-xs > .btn { + padding: 2px 9px; + font-size: 10.5px; +} + +.btn-cons { + margin-right: 5px; + min-width: 120px; +} diff --git a/stories/header.css b/stories/header.css new file mode 100644 index 00000000..66af90e2 --- /dev/null +++ b/stories/header.css @@ -0,0 +1,32 @@ +.wrapper { + font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding: 15px 20px; + display: flex; + align-items: center; + justify-content: space-between; +} + +svg { + display: inline-block; + vertical-align: top; +} + +h1 { + font-weight: 900; + font-size: 20px; + line-height: 1; + margin: 6px 0 6px 10px; + display: inline-block; + vertical-align: top; +} + +button + button { + margin-left: 10px; +} + +.welcome { + color: #333; + font-size: 14px; + margin-right: 10px; +} diff --git a/stories/page.css b/stories/page.css new file mode 100644 index 00000000..1d6aada3 --- /dev/null +++ b/stories/page.css @@ -0,0 +1,69 @@ +section { + font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 24px; + padding: 48px 20px; + margin: 0 auto; + max-width: 600px; + color: #333; +} + +section h2 { + font-weight: 900; + font-size: 32px; + line-height: 1; + margin: 0 0 4px; + display: inline-block; + vertical-align: top; +} + +section p { + margin: 1em 0; +} + +section a { + text-decoration: none; + color: #1ea7fd; +} + +section ul { + padding-left: 30px; + margin: 1em 0; +} + +section li { + margin-bottom: 8px; +} + +section .tip { + display: inline-block; + border-radius: 1em; + font-size: 11px; + line-height: 12px; + font-weight: 700; + background: #e7fdd8; + color: #66bf3c; + padding: 4px 12px; + margin-right: 10px; + vertical-align: top; +} + +section .tip-wrapper { + font-size: 13px; + line-height: 20px; + margin-top: 40px; + margin-bottom: 40px; +} + +section .tip-wrapper svg { + display: inline-block; + height: 12px; + width: 12px; + margin-right: 4px; + vertical-align: top; + margin-top: 3px; +} + +section .tip-wrapper svg path { + fill: #1ea7fd; +}