From efb2a5c13093e961125d22c373f1ddf7d5c0ed9a Mon Sep 17 00:00:00 2001 From: Tyler Smalley Date: Mon, 9 Jan 2017 13:20:13 -0800 Subject: [PATCH 1/3] Remove libsass as a dependency libsass is platform specific, therefore we can not ship it as a dependency. Instead, we will commit the compiled CSS for the UI Framework to the repository. This is updated when running `npm run uiFramework:start` which also starts the docs site. Signed-off-by: Tyler Smalley --- .gitignore | 2 +- package.json | 6 +- src/optimize/base_optimizer.js | 1 - src/ui/public/autoload/styles.js | 2 +- tasks/config/copy.js | 1 + tasks/ui_framework.js | 54 ++ {src/ui_framework => ui_framework}/README.md | 0 .../components/button/_button.scss | 0 .../components/button/_button_group.scss | 0 .../components/button/_index.scss | 0 .../components/form/_check_box.scss | 0 .../components/form/_index.scss | 0 .../components/form/_text_area.scss | 0 .../components/form/_text_input.scss | 0 .../components/icon/_icon.scss | 0 .../components/icon/_index.scss | 0 .../components/index.scss | 0 .../components/info_panel/_index.scss | 0 .../components/info_panel/_info_panel.scss | 0 .../components/link/_index.scss | 0 .../components/link/_link.scss | 0 .../components/loading_items/_index.scss | 0 .../loading_items/_loading_items.scss | 0 .../components/local_nav/_index.scss | 0 .../local_nav/_local_breadcrumbs.scss | 0 .../components/local_nav/_local_dropdown.scss | 0 .../components/local_nav/_local_menu.scss | 0 .../components/local_nav/_local_nav.scss | 0 .../components/local_nav/_local_search.scss | 0 .../components/local_nav/_local_tabs.scss | 0 .../components/local_nav/_local_title.scss | 0 .../components/micro_button/_index.scss | 0 .../micro_button/_micro_button.scss | 0 .../micro_button/_micro_button_group.scss | 0 .../components/no_items/_index.scss | 0 .../components/no_items/_no_items.scss | 0 .../components/panel/_index.scss | 0 .../components/panel/_panel.scss | 0 .../components/table/_controlled_table.scss | 0 .../components/table/_index.scss | 0 .../components/table/_table.scss | 0 .../components/tabs/_index.scss | 0 .../components/tabs/_tabs.scss | 0 .../components/tool_bar/_index.scss | 0 .../components/tool_bar/_tool_bar.scss | 0 .../components/tool_bar/_tool_bar_footer.scss | 0 .../components/tool_bar/_tool_bar_search.scss | 0 .../components/tool_bar/_tool_bar_text.scss | 0 ui_framework/dist/ui_framework.css | 861 ++++++++++++++++++ .../doc_site/build/index.html | 1 + ui_framework/doc_site/build/ui_framework.css | 1 + .../doc_site/postcss.config.js | 0 .../doc_site/src/actions/action_types.js | 0 .../code_viewer/code_viewer_actions.js | 0 .../doc_site/src/actions/index.js | 0 .../guide_code_viewer/_guide_code_viewer.scss | 0 .../guide_code_viewer/guide_code_viewer.jsx | 0 .../guide_example/_guide_example.scss | 0 .../guide_example/guide_example.jsx | 0 .../src/components/guide_nav/_guide_nav.scss | 0 .../src/components/guide_nav/guide_nav.jsx | 0 .../components/guide_page/_guide_page.scss | 0 .../src/components/guide_page/guide_page.jsx | 0 .../_guide_page_section.scss | 0 .../guide_page_section/guide_page_section.jsx | 0 .../_guide_page_side_nav.scss | 0 .../guide_page_side_nav.jsx | 0 .../guide_page_side_nav_item.jsx | 0 .../doc_site/src/components/index.js | 0 .../doc_site/src/index.js | 0 .../doc_site/src/main.scss | 1 - .../src/services/example/createExample.js | 0 .../doc_site/src/services/index.js | 0 .../src/services/js_injector/js_injector.js | 0 .../doc_site/src/services/routes/Routes.js | 0 .../doc_site/src/services/string/slugify.js | 0 .../doc_site/src/store/configure_store.js | 0 .../src/store/reducers/code_viewer_reducer.js | 0 .../doc_site/src/variables.scss | 0 .../doc_site/src/views/_app.scss | 0 .../doc_site/src/views/app_container.js | 0 .../doc_site/src/views/app_view.jsx | 2 +- .../src/views/button/button_basic.html | 0 .../src/views/button/button_danger.html | 0 .../src/views/button/button_elements.html | 0 .../src/views/button/button_example.jsx | 0 .../src/views/button/button_group.html | 0 .../src/views/button/button_group_united.html | 0 .../src/views/button/button_primary.html | 0 .../src/views/button/button_with_icon.html | 0 .../src/views/button/buttons_in_tool_bar.html | 0 .../doc_site/src/views/form/check_box.html | 0 .../doc_site/src/views/form/form_example.jsx | 0 .../doc_site/src/views/form/text_area.html | 0 .../doc_site/src/views/form/text_input.html | 0 .../doc_site/src/views/home/_home_view.scss | 0 .../doc_site/src/views/home/home_view.jsx | 0 .../doc_site/src/views/icon/icon.html | 0 .../doc_site/src/views/icon/icon_error.html | 0 .../doc_site/src/views/icon/icon_example.jsx | 0 .../doc_site/src/views/icon/icon_success.html | 0 .../doc_site/src/views/icon/icon_warning.html | 0 .../src/views/info_panel/info_panel.html | 0 .../views/info_panel/info_panel_example.jsx | 0 .../doc_site/src/views/link/link.html | 0 .../doc_site/src/views/link/link_example.jsx | 0 .../local_nav/local_nav_breadcrumbs.html | 0 .../views/local_nav/local_nav_dropdown.html | 0 .../local_nav/local_nav_dropdown_panels.html | 0 .../src/views/local_nav/local_nav_example.jsx | 0 .../local_nav/local_nav_menu_item_states.html | 0 .../src/views/local_nav/local_nav_search.html | 0 .../local_nav/local_nav_search_error.html | 0 .../src/views/local_nav/local_nav_simple.html | 0 .../src/views/local_nav/local_nav_tabs.html | 0 .../src/views/micro_button/micro_button.html | 0 .../micro_button/micro_button_elements.html | 0 .../micro_button/micro_button_example.jsx | 0 .../micro_button/micro_button_group.html | 0 .../src/views/not_found/not_found_view.jsx | 0 .../src/views/table/controlled_table.html | 0 .../table/controlled_table_loading_items.html | 0 .../table/controlled_table_no_items.html | 0 .../doc_site/src/views/table/table.html | 0 .../doc_site/src/views/table/table.js | 0 .../src/views/table/table_example.jsx | 0 .../doc_site/src/views/tabs/tabs.html | 0 .../doc_site/src/views/tabs/tabs.js | 0 .../doc_site/src/views/tabs/tabs_example.jsx | 0 .../doc_site/src/views/tool_bar/tool_bar.html | 0 .../src/views/tool_bar/tool_bar_example.jsx | 0 .../src/views/tool_bar/tool_bar_footer.html | 0 .../doc_site/webpack.config.js | 4 +- 133 files changed, 926 insertions(+), 10 deletions(-) create mode 100644 tasks/ui_framework.js rename {src/ui_framework => ui_framework}/README.md (100%) rename {src/ui_framework => ui_framework}/components/button/_button.scss (100%) rename {src/ui_framework => ui_framework}/components/button/_button_group.scss (100%) rename {src/ui_framework => ui_framework}/components/button/_index.scss (100%) rename {src/ui_framework => ui_framework}/components/form/_check_box.scss (100%) rename {src/ui_framework => ui_framework}/components/form/_index.scss (100%) rename {src/ui_framework => ui_framework}/components/form/_text_area.scss (100%) rename {src/ui_framework => ui_framework}/components/form/_text_input.scss (100%) rename {src/ui_framework => ui_framework}/components/icon/_icon.scss (100%) rename {src/ui_framework => ui_framework}/components/icon/_index.scss (100%) rename {src/ui_framework => ui_framework}/components/index.scss (100%) rename {src/ui_framework => ui_framework}/components/info_panel/_index.scss (100%) rename {src/ui_framework => ui_framework}/components/info_panel/_info_panel.scss (100%) rename {src/ui_framework => ui_framework}/components/link/_index.scss (100%) rename {src/ui_framework => ui_framework}/components/link/_link.scss (100%) rename {src/ui_framework => ui_framework}/components/loading_items/_index.scss (100%) rename {src/ui_framework => ui_framework}/components/loading_items/_loading_items.scss (100%) rename {src/ui_framework => ui_framework}/components/local_nav/_index.scss (100%) rename {src/ui_framework => ui_framework}/components/local_nav/_local_breadcrumbs.scss (100%) rename {src/ui_framework => ui_framework}/components/local_nav/_local_dropdown.scss (100%) rename {src/ui_framework => ui_framework}/components/local_nav/_local_menu.scss (100%) rename {src/ui_framework => ui_framework}/components/local_nav/_local_nav.scss (100%) rename {src/ui_framework => ui_framework}/components/local_nav/_local_search.scss (100%) rename {src/ui_framework => ui_framework}/components/local_nav/_local_tabs.scss (100%) rename {src/ui_framework => ui_framework}/components/local_nav/_local_title.scss (100%) rename {src/ui_framework => ui_framework}/components/micro_button/_index.scss (100%) rename {src/ui_framework => ui_framework}/components/micro_button/_micro_button.scss (100%) rename {src/ui_framework => ui_framework}/components/micro_button/_micro_button_group.scss (100%) rename {src/ui_framework => ui_framework}/components/no_items/_index.scss (100%) rename {src/ui_framework => ui_framework}/components/no_items/_no_items.scss (100%) rename {src/ui_framework => ui_framework}/components/panel/_index.scss (100%) rename {src/ui_framework => ui_framework}/components/panel/_panel.scss (100%) rename {src/ui_framework => ui_framework}/components/table/_controlled_table.scss (100%) rename {src/ui_framework => ui_framework}/components/table/_index.scss (100%) rename {src/ui_framework => ui_framework}/components/table/_table.scss (100%) rename {src/ui_framework => ui_framework}/components/tabs/_index.scss (100%) rename {src/ui_framework => ui_framework}/components/tabs/_tabs.scss (100%) rename {src/ui_framework => ui_framework}/components/tool_bar/_index.scss (100%) rename {src/ui_framework => ui_framework}/components/tool_bar/_tool_bar.scss (100%) rename {src/ui_framework => ui_framework}/components/tool_bar/_tool_bar_footer.scss (100%) rename {src/ui_framework => ui_framework}/components/tool_bar/_tool_bar_search.scss (100%) rename {src/ui_framework => ui_framework}/components/tool_bar/_tool_bar_text.scss (100%) create mode 100644 ui_framework/dist/ui_framework.css rename {src/ui_framework => ui_framework}/doc_site/build/index.html (89%) create mode 120000 ui_framework/doc_site/build/ui_framework.css rename {src/ui_framework => ui_framework}/doc_site/postcss.config.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/actions/action_types.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/actions/code_viewer/code_viewer_actions.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/actions/index.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/guide_code_viewer/guide_code_viewer.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/guide_example/_guide_example.scss (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/guide_example/guide_example.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/guide_nav/_guide_nav.scss (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/guide_nav/guide_nav.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/guide_page/_guide_page.scss (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/guide_page/guide_page.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/guide_page_section/_guide_page_section.scss (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/guide_page_section/guide_page_section.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/components/index.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/index.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/main.scss (94%) rename {src/ui_framework => ui_framework}/doc_site/src/services/example/createExample.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/services/index.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/services/js_injector/js_injector.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/services/routes/Routes.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/services/string/slugify.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/store/configure_store.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/store/reducers/code_viewer_reducer.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/variables.scss (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/_app.scss (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/app_container.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/app_view.jsx (97%) rename {src/ui_framework => ui_framework}/doc_site/src/views/button/button_basic.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/button/button_danger.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/button/button_elements.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/button/button_example.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/button/button_group.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/button/button_group_united.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/button/button_primary.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/button/button_with_icon.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/button/buttons_in_tool_bar.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/form/check_box.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/form/form_example.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/form/text_area.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/form/text_input.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/home/_home_view.scss (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/home/home_view.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/icon/icon.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/icon/icon_error.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/icon/icon_example.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/icon/icon_success.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/icon/icon_warning.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/info_panel/info_panel.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/info_panel/info_panel_example.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/link/link.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/link/link_example.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/local_nav/local_nav_breadcrumbs.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/local_nav/local_nav_dropdown.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/local_nav/local_nav_dropdown_panels.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/local_nav/local_nav_example.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/local_nav/local_nav_menu_item_states.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/local_nav/local_nav_search.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/local_nav/local_nav_search_error.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/local_nav/local_nav_simple.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/local_nav/local_nav_tabs.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/micro_button/micro_button.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/micro_button/micro_button_elements.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/micro_button/micro_button_example.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/micro_button/micro_button_group.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/not_found/not_found_view.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/table/controlled_table.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/table/controlled_table_loading_items.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/table/controlled_table_no_items.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/table/table.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/table/table.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/table/table_example.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/tabs/tabs.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/tabs/tabs.js (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/tabs/tabs_example.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/tool_bar/tool_bar.html (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/tool_bar/tool_bar_example.jsx (100%) rename {src/ui_framework => ui_framework}/doc_site/src/views/tool_bar/tool_bar_footer.html (100%) rename {src/ui_framework => ui_framework}/doc_site/webpack.config.js (83%) diff --git a/.gitignore b/.gitignore index 2f5b92bc7f6f8..af05017c9815d 100644 --- a/.gitignore +++ b/.gitignore @@ -34,4 +34,4 @@ selenium *.swp *.swo *.out -src/ui_framework/doc_site/build/*.js* +ui_framework/doc_site/build/*.js* diff --git a/package.json b/package.json index 70ff8ecf76888..22cb2fde8a9bc 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "mocha": "mocha", "mocha:debug": "mocha --debug-brk", "sterilize": "grunt sterilize", - "uiFramework:start": "webpack-dev-server --config src/ui_framework/doc_site/webpack.config.js --hot --inline --content-base src/ui_framework/doc_site/build" + "uiFramework:start": "grunt uiFramework:start" }, "repository": { "type": "git", @@ -145,7 +145,6 @@ "moment-timezone": "0.5.4", "no-ui-slider": "1.2.0", "node-fetch": "1.3.2", - "node-sass": "3.8.0", "node-uuid": "1.4.7", "pegjs": "0.9.0", "postcss-loader": "1.2.1", @@ -155,7 +154,6 @@ "rimraf": "2.4.3", "rison-node": "1.0.0", "rjs-repack-loader": "1.0.6", - "sass-loader": "4.0.0", "script-loader": "0.6.1", "semver": "5.1.0", "style-loader": "0.12.3", @@ -222,6 +220,7 @@ "mocha": "2.5.3", "murmurhash3js": "3.0.1", "ncp": "2.0.0", + "node-sass": "3.8.0", "nock": "8.0.0", "npm": "3.10.8", "portscanner": "1.0.0", @@ -234,6 +233,7 @@ "react-router-redux": "4.0.4", "redux": "3.0.0", "redux-thunk": "0.1.0", + "sass-loader": "4.0.0", "simple-git": "1.37.0", "sinon": "1.17.2", "source-map": "0.5.6", diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js index 41a74a085e042..ef1650a83c0a3 100644 --- a/src/optimize/base_optimizer.js +++ b/src/optimize/base_optimizer.js @@ -125,7 +125,6 @@ class BaseOptimizer { module: { loaders: [ { test: /\.less$/, loader: makeStyleLoader('less-loader') }, - { test: /\.scss$/, loader: makeStyleLoader('sass-loader') }, { test: /\.css$/, loader: makeStyleLoader() }, { test: /\.jade$/, loader: 'jade-loader' }, { test: /\.json$/, loader: 'json-loader' }, diff --git a/src/ui/public/autoload/styles.js b/src/ui/public/autoload/styles.js index e1329e49ffb99..929e26ba69b65 100644 --- a/src/ui/public/autoload/styles.js +++ b/src/ui/public/autoload/styles.js @@ -1,5 +1,5 @@ // Kibana UI Framework -require('../../../ui_framework/components/index.scss'); +require('../../../../ui_framework/dist/ui_framework.css'); // All Kibana styles inside of the /styles dir const context = require.context('../styles', false, /[\/\\](?!mixins|variables|_|\.)[^\/\\]+\.less/); diff --git a/tasks/config/copy.js b/tasks/config/copy.js index 8ec6916190dec..7fa6c9629717e 100644 --- a/tasks/config/copy.js +++ b/tasks/config/copy.js @@ -4,6 +4,7 @@ module.exports = function (grunt) { options: { mode: true }, src: [ 'src/**', + 'ui_framework/dist/**', 'bin/**', 'webpackShims/**', 'config/kibana.yml', diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js new file mode 100644 index 0000000000000..dd7c5dea43977 --- /dev/null +++ b/tasks/ui_framework.js @@ -0,0 +1,54 @@ +const sass = require('node-sass'); +const platform = require('os').platform(); + +module.exports = function (grunt) { + const watcherCmd = { + cmd: /^win/.test(platform) ? '.\\node_modules\\.bin\\node-sass' : './node_modules/.bin/node-sass', + args: [ + 'ui_framework/components/index.scss', + '--watch', + '--recursive', + 'ui_framework/dist/ui_framework.css' + ] + }; + + const serverCmd = { + cmd: /^win/.test(platform) ? '.\\node_modules\\.bin\\webpack-dev-server' : './node_modules/.bin/webpack-dev-server', + args: [ + '--config=ui_framework/doc_site/webpack.config.js', + '--hot ', + '--inline', + '--content-base=ui_framework/doc_site/build' + ] + }; + + function spawn(task) { + return new Promise((resolve, reject) => { + grunt.util.spawn(task, (error, result, code) => { + grunt.log.writeln(); + + if (error || code !== 0) { + const message = result.stderr || result.stdout; + + grunt.log.error(message); + + reject(); + } + + grunt.log.writeln(result); + + resolve(); + }); + + }); + } + + grunt.registerTask('uiFramework:start', function () { + const done = this.async(); + const commands = [watcherCmd, serverCmd].map((cmd) => { + return Object.assign({ opts: { stdio: 'inherit' } }, cmd); + }); + + Promise.all(commands.map(spawn)).then(done); + }); +}; diff --git a/src/ui_framework/README.md b/ui_framework/README.md similarity index 100% rename from src/ui_framework/README.md rename to ui_framework/README.md diff --git a/src/ui_framework/components/button/_button.scss b/ui_framework/components/button/_button.scss similarity index 100% rename from src/ui_framework/components/button/_button.scss rename to ui_framework/components/button/_button.scss diff --git a/src/ui_framework/components/button/_button_group.scss b/ui_framework/components/button/_button_group.scss similarity index 100% rename from src/ui_framework/components/button/_button_group.scss rename to ui_framework/components/button/_button_group.scss diff --git a/src/ui_framework/components/button/_index.scss b/ui_framework/components/button/_index.scss similarity index 100% rename from src/ui_framework/components/button/_index.scss rename to ui_framework/components/button/_index.scss diff --git a/src/ui_framework/components/form/_check_box.scss b/ui_framework/components/form/_check_box.scss similarity index 100% rename from src/ui_framework/components/form/_check_box.scss rename to ui_framework/components/form/_check_box.scss diff --git a/src/ui_framework/components/form/_index.scss b/ui_framework/components/form/_index.scss similarity index 100% rename from src/ui_framework/components/form/_index.scss rename to ui_framework/components/form/_index.scss diff --git a/src/ui_framework/components/form/_text_area.scss b/ui_framework/components/form/_text_area.scss similarity index 100% rename from src/ui_framework/components/form/_text_area.scss rename to ui_framework/components/form/_text_area.scss diff --git a/src/ui_framework/components/form/_text_input.scss b/ui_framework/components/form/_text_input.scss similarity index 100% rename from src/ui_framework/components/form/_text_input.scss rename to ui_framework/components/form/_text_input.scss diff --git a/src/ui_framework/components/icon/_icon.scss b/ui_framework/components/icon/_icon.scss similarity index 100% rename from src/ui_framework/components/icon/_icon.scss rename to ui_framework/components/icon/_icon.scss diff --git a/src/ui_framework/components/icon/_index.scss b/ui_framework/components/icon/_index.scss similarity index 100% rename from src/ui_framework/components/icon/_index.scss rename to ui_framework/components/icon/_index.scss diff --git a/src/ui_framework/components/index.scss b/ui_framework/components/index.scss similarity index 100% rename from src/ui_framework/components/index.scss rename to ui_framework/components/index.scss diff --git a/src/ui_framework/components/info_panel/_index.scss b/ui_framework/components/info_panel/_index.scss similarity index 100% rename from src/ui_framework/components/info_panel/_index.scss rename to ui_framework/components/info_panel/_index.scss diff --git a/src/ui_framework/components/info_panel/_info_panel.scss b/ui_framework/components/info_panel/_info_panel.scss similarity index 100% rename from src/ui_framework/components/info_panel/_info_panel.scss rename to ui_framework/components/info_panel/_info_panel.scss diff --git a/src/ui_framework/components/link/_index.scss b/ui_framework/components/link/_index.scss similarity index 100% rename from src/ui_framework/components/link/_index.scss rename to ui_framework/components/link/_index.scss diff --git a/src/ui_framework/components/link/_link.scss b/ui_framework/components/link/_link.scss similarity index 100% rename from src/ui_framework/components/link/_link.scss rename to ui_framework/components/link/_link.scss diff --git a/src/ui_framework/components/loading_items/_index.scss b/ui_framework/components/loading_items/_index.scss similarity index 100% rename from src/ui_framework/components/loading_items/_index.scss rename to ui_framework/components/loading_items/_index.scss diff --git a/src/ui_framework/components/loading_items/_loading_items.scss b/ui_framework/components/loading_items/_loading_items.scss similarity index 100% rename from src/ui_framework/components/loading_items/_loading_items.scss rename to ui_framework/components/loading_items/_loading_items.scss diff --git a/src/ui_framework/components/local_nav/_index.scss b/ui_framework/components/local_nav/_index.scss similarity index 100% rename from src/ui_framework/components/local_nav/_index.scss rename to ui_framework/components/local_nav/_index.scss diff --git a/src/ui_framework/components/local_nav/_local_breadcrumbs.scss b/ui_framework/components/local_nav/_local_breadcrumbs.scss similarity index 100% rename from src/ui_framework/components/local_nav/_local_breadcrumbs.scss rename to ui_framework/components/local_nav/_local_breadcrumbs.scss diff --git a/src/ui_framework/components/local_nav/_local_dropdown.scss b/ui_framework/components/local_nav/_local_dropdown.scss similarity index 100% rename from src/ui_framework/components/local_nav/_local_dropdown.scss rename to ui_framework/components/local_nav/_local_dropdown.scss diff --git a/src/ui_framework/components/local_nav/_local_menu.scss b/ui_framework/components/local_nav/_local_menu.scss similarity index 100% rename from src/ui_framework/components/local_nav/_local_menu.scss rename to ui_framework/components/local_nav/_local_menu.scss diff --git a/src/ui_framework/components/local_nav/_local_nav.scss b/ui_framework/components/local_nav/_local_nav.scss similarity index 100% rename from src/ui_framework/components/local_nav/_local_nav.scss rename to ui_framework/components/local_nav/_local_nav.scss diff --git a/src/ui_framework/components/local_nav/_local_search.scss b/ui_framework/components/local_nav/_local_search.scss similarity index 100% rename from src/ui_framework/components/local_nav/_local_search.scss rename to ui_framework/components/local_nav/_local_search.scss diff --git a/src/ui_framework/components/local_nav/_local_tabs.scss b/ui_framework/components/local_nav/_local_tabs.scss similarity index 100% rename from src/ui_framework/components/local_nav/_local_tabs.scss rename to ui_framework/components/local_nav/_local_tabs.scss diff --git a/src/ui_framework/components/local_nav/_local_title.scss b/ui_framework/components/local_nav/_local_title.scss similarity index 100% rename from src/ui_framework/components/local_nav/_local_title.scss rename to ui_framework/components/local_nav/_local_title.scss diff --git a/src/ui_framework/components/micro_button/_index.scss b/ui_framework/components/micro_button/_index.scss similarity index 100% rename from src/ui_framework/components/micro_button/_index.scss rename to ui_framework/components/micro_button/_index.scss diff --git a/src/ui_framework/components/micro_button/_micro_button.scss b/ui_framework/components/micro_button/_micro_button.scss similarity index 100% rename from src/ui_framework/components/micro_button/_micro_button.scss rename to ui_framework/components/micro_button/_micro_button.scss diff --git a/src/ui_framework/components/micro_button/_micro_button_group.scss b/ui_framework/components/micro_button/_micro_button_group.scss similarity index 100% rename from src/ui_framework/components/micro_button/_micro_button_group.scss rename to ui_framework/components/micro_button/_micro_button_group.scss diff --git a/src/ui_framework/components/no_items/_index.scss b/ui_framework/components/no_items/_index.scss similarity index 100% rename from src/ui_framework/components/no_items/_index.scss rename to ui_framework/components/no_items/_index.scss diff --git a/src/ui_framework/components/no_items/_no_items.scss b/ui_framework/components/no_items/_no_items.scss similarity index 100% rename from src/ui_framework/components/no_items/_no_items.scss rename to ui_framework/components/no_items/_no_items.scss diff --git a/src/ui_framework/components/panel/_index.scss b/ui_framework/components/panel/_index.scss similarity index 100% rename from src/ui_framework/components/panel/_index.scss rename to ui_framework/components/panel/_index.scss diff --git a/src/ui_framework/components/panel/_panel.scss b/ui_framework/components/panel/_panel.scss similarity index 100% rename from src/ui_framework/components/panel/_panel.scss rename to ui_framework/components/panel/_panel.scss diff --git a/src/ui_framework/components/table/_controlled_table.scss b/ui_framework/components/table/_controlled_table.scss similarity index 100% rename from src/ui_framework/components/table/_controlled_table.scss rename to ui_framework/components/table/_controlled_table.scss diff --git a/src/ui_framework/components/table/_index.scss b/ui_framework/components/table/_index.scss similarity index 100% rename from src/ui_framework/components/table/_index.scss rename to ui_framework/components/table/_index.scss diff --git a/src/ui_framework/components/table/_table.scss b/ui_framework/components/table/_table.scss similarity index 100% rename from src/ui_framework/components/table/_table.scss rename to ui_framework/components/table/_table.scss diff --git a/src/ui_framework/components/tabs/_index.scss b/ui_framework/components/tabs/_index.scss similarity index 100% rename from src/ui_framework/components/tabs/_index.scss rename to ui_framework/components/tabs/_index.scss diff --git a/src/ui_framework/components/tabs/_tabs.scss b/ui_framework/components/tabs/_tabs.scss similarity index 100% rename from src/ui_framework/components/tabs/_tabs.scss rename to ui_framework/components/tabs/_tabs.scss diff --git a/src/ui_framework/components/tool_bar/_index.scss b/ui_framework/components/tool_bar/_index.scss similarity index 100% rename from src/ui_framework/components/tool_bar/_index.scss rename to ui_framework/components/tool_bar/_index.scss diff --git a/src/ui_framework/components/tool_bar/_tool_bar.scss b/ui_framework/components/tool_bar/_tool_bar.scss similarity index 100% rename from src/ui_framework/components/tool_bar/_tool_bar.scss rename to ui_framework/components/tool_bar/_tool_bar.scss diff --git a/src/ui_framework/components/tool_bar/_tool_bar_footer.scss b/ui_framework/components/tool_bar/_tool_bar_footer.scss similarity index 100% rename from src/ui_framework/components/tool_bar/_tool_bar_footer.scss rename to ui_framework/components/tool_bar/_tool_bar_footer.scss diff --git a/src/ui_framework/components/tool_bar/_tool_bar_search.scss b/ui_framework/components/tool_bar/_tool_bar_search.scss similarity index 100% rename from src/ui_framework/components/tool_bar/_tool_bar_search.scss rename to ui_framework/components/tool_bar/_tool_bar_search.scss diff --git a/src/ui_framework/components/tool_bar/_tool_bar_text.scss b/ui_framework/components/tool_bar/_tool_bar_text.scss similarity index 100% rename from src/ui_framework/components/tool_bar/_tool_bar_text.scss rename to ui_framework/components/tool_bar/_tool_bar_text.scss diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css new file mode 100644 index 0000000000000..c35f1e5f7172d --- /dev/null +++ b/ui_framework/dist/ui_framework.css @@ -0,0 +1,861 @@ +/** + * 1. Make sure outline doesn't get hidden beneath adjacent elements. + * 2. Override inherited styles (possibly from Bootstrap). + */ +* { + box-sizing: border-box; } + +body { + font-family: "Open Sans", Helvetica, Arial, sans-serif; } + +/** + * 1. Setting to inline-block guarantees the same height when applied to both + * button elements and anchor tags. + * 2. Disable for Angular. + */ +.kuiButton { + display: inline-block; + /* 1 */ + appearance: none; + cursor: pointer; + padding: 4px 12px 5px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + text-decoration: none; + border: none; + border-radius: 4px; } + .kuiButton:disabled { + cursor: default; + pointer-events: none; + /* 2 */ } + .kuiButton:active:enabled { + transform: translateY(1px); } + .kuiButton:focus { + z-index: 1; + /* 1 */ + outline: 1px solid #6EADC1 !important; + /* 2 */ + outline-offset: 2px !important; + /* 2 */ } + +.kuiButton--iconText .kuiButton__icon:first-child { + margin-right: 4px; } + +.kuiButton--iconText .kuiButton__icon:last-child { + margin-left: 4px; } + +/** + * 1. Override Bootstrap. + */ +.kuiButton--basic { + color: #5a5a5a; + background-color: #F2F2F2; } + .kuiButton--basic:focus { + color: #5a5a5a !important; + /* 1 */ } + .kuiButton--basic:hover:enabled, .kuiButton--basic:active:enabled { + color: #ffffff !important; + /* 1 */ + background-color: #9B9B9B; } + .kuiButton--basic:disabled { + color: #9B9B9B; } + +/** + * 1. Override Bootstrap. + */ +.kuiButton--primary { + color: #FFFFFF; + background-color: #6EADC1; } + .kuiButton--primary:hover:enabled, .kuiButton--primary:active:enabled { + color: #FFFFFF; + background-color: #006E8A; } + .kuiButton--primary:disabled { + background-color: #B6D6E0; } + .kuiButton--primary:focus { + color: #FFFFFF !important; + /* 1 */ } + +.kuiButton--danger { + color: #FFFFFF; + background-color: #D76051; + /** + * 1. Override Bootstrap. + */ } + .kuiButton--danger:hover:enabled, .kuiButton--danger:active:enabled { + color: #FFFFFF; + background-color: #A52E1F; } + .kuiButton--danger:disabled { + background-color: #efc0ba; } + .kuiButton--danger:focus { + z-index: 1; + /* 1 */ + outline: 1px solid #ff523c !important; + /* 2 */ + outline-offset: 2px !important; + /* 2 */ + color: #FFFFFF !important; + /* 1 */ } + +.kuiButtonGroup { + display: flex; + align-items: center; } + .kuiButtonGroup .kuiButton + .kuiButton { + margin-left: 4px; } + +.kuiButtonGroup--united > .kuiButton:not(:first-child):not(:last-child) { + border-radius: 0; } + +.kuiButtonGroup--united > .kuiButton:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; } + +.kuiButtonGroup--united > .kuiButton:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.kuiButtonGroup--united > .kuiButton:only-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; } + +.kuiButtonGroup--united .kuiButton + .kuiButton { + margin-left: 2px; } + +/** + * 1. Deliberately disable only webkit appearance. If we disable it in Firefox, we get a really + * ugly default appearance which we can't customize, so our best option is to give Firefox + * control over the checkbox's appearance. + * 2. Override default styles (possibly from Bootstrap). + */ +.kuiCheckBox { + -webkit-appearance: none; + /* 1 */ + background-color: #FFFFFF; + border: 1px solid #BEBEBE; + border-radius: 4px; + width: 16px; + height: 16px; + line-height: 1.5 !important; + /* 2 */ + margin: 0 !important; + /* 2 */ + font: "Open Sans", Helvetica, Arial, sans-serif !important; + /* 2 */ + font-family: "Open Sans", Helvetica, Arial, sans-serif !important; + /* 2 */ + font-size: 10px !important; + /* 2 */ + transition: background-color 0.1s linear; } + .kuiCheckBox:before { + position: relative; + top: -0.05em; + left: 0.15em; + font-family: FontAwesome; + content: "\F00C"; + font-size: 1em; + opacity: 0; + color: #ffffff; + transition: opacity 0.1s linear; } + .kuiCheckBox:checked { + border-color: #328CAA; + background-color: #328CAA; } + .kuiCheckBox:checked:before { + opacity: 1; } + .kuiCheckBox:focus { + z-index: 1; + /* 1 */ + outline: 1px solid #6EADC1 !important; + /* 2 */ + outline-offset: 2px !important; + /* 2 */ } + .kuiCheckBox:disabled { + opacity: 0.3; + cursor: not-allowed; } + +.kuiTextArea { + appearance: none; + padding: 3px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + background-color: #ffffff; + border: 1px solid #DEDEDE; + color: #191E23; + border-radius: 4px; + transition: border-color 0.1s linear; + /** + * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet. + * We only want invalid inputs to appear invalid after the user has had a chance to interact + * with it. + */ } + .kuiTextArea:invalid:not(.ng-untouched) { + /* 1 */ + border-color: #D86051; } + .kuiTextArea:focus { + outline: none; + border-color: #6EADC1; } + .kuiTextArea:disabled { + opacity: 0.4; + cursor: not-allowed; } + +.kuiTextInput { + appearance: none; + padding: 3px 12px 4px; + font-size: 14px; + font-weight: 400; + line-height: 1.5; + background-color: #ffffff; + border: 1px solid #DEDEDE; + color: #191E23; + border-radius: 4px; + transition: border-color 0.1s linear; + /** + * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet. + * We only want invalid inputs to appear invalid after the user has had a chance to interact + * with it. + */ } + .kuiTextInput:invalid:not(.ng-untouched) { + /* 1 */ + border-color: #D86051; } + .kuiTextInput:focus { + outline: none; + border-color: #6EADC1; } + .kuiTextInput:disabled { + opacity: 0.4; + cursor: not-allowed; } + +/** + * 1. Copied from FontAwesome's .fa class. We use a custom class to make it easier to migrate away + * from FontAwesome someday. When we do migrate away, we can just update this definition. + */ +.kuiIcon { + display: inline-block; + /* 1 */ + font: normal normal normal 14px/1 FontAwesome; + /* 1 */ + font-size: inherit; + /* 1 */ + text-rendering: auto; + /* 1 */ + -webkit-font-smoothing: antialiased; + /* 1 */ + -moz-osx-font-smoothing: grayscale; + /* 1 */ } + +.kuiIcon--success { + color: #417505; } + +.kuiIcon--warning { + color: #ffac15; } + +.kuiIcon--error { + color: #D86051; } + +.kuiInfoPanel { + padding: 20px; + line-height: 1.5; } + +.kuiInfoPanel--warning { + background-color: #FFF6E4; } + +.kuiLink { + color: #3CAED2; + text-decoration: none; } + .kuiLink:visited, .kuiLink:active { + color: #3CAED2; } + .kuiLink:hover { + color: #006E8A; + text-decoration: underline; } + +.kuiLoadingItems { + padding: 30px; + font-size: 18px; + color: #9fa3a7; + line-height: 1.5; } + +/** + * 1. Breadcrumbs are placed in the top-left corner and need to be bumped over + * a bit. + */ +.kuiLocalBreadcrumbs { + display: flex; + align-items: center; + height: 100%; + padding-left: 10px; + /* 1 */ } + +.kuiLocalBreadcrumb + .kuiLocalBreadcrumb { + margin-left: 6px; } + .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before { + content: '/'; + user-select: none; + margin-right: 4px; + color: #5a5a5a; } + .theme-dark .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before { + color: #a5a5a5; } + +.kuiLocalBreadcrumb:last-child .kuiLocalBreadcrumb__link { + color: #2d2d2d; + cursor: default; } + .kuiLocalBreadcrumb:last-child .kuiLocalBreadcrumb__link:hover { + text-decoration: none; } + .theme-dark .kuiLocalBreadcrumb:last-child .kuiLocalBreadcrumb__link { + color: #cecece; } + +.kuiLocalBreadcrumb__link { + font-size: 14px; + color: #5a5a5a; + text-decoration: none; } + .kuiLocalBreadcrumb__link:hover { + text-decoration: underline; } + .theme-dark .kuiLocalBreadcrumb__link { + color: #dedede; } + +.kuiLocalBreadcrumb__emphasis { + font-weight: 700; } + +.kuiLocalDropdown { + position: relative; + padding: 10px 10px 14px; + background-color: #f6f6f6; + line-height: 20px; } + .theme-dark .kuiLocalDropdown { + background-color: #525252; } + +.kuiLocalDropdownCloseButton { + appearance: none; + background-color: transparent; + padding: 4px; + border: none; + position: absolute; + top: 1px; + right: 5px; + font-size: 16px; + color: #2d2d2d; + cursor: pointer; + opacity: 0.35; } + .kuiLocalDropdownCloseButton:hover { + opacity: 1; } + .theme-dark .kuiLocalDropdownCloseButton { + color: #cecece; } + +.kuiLocalDropdownPanels { + display: flex; } + +.kuiLocalDropdownPanel { + flex: 1 1 0%; } + +.kuiLocalDropdownPanel--left { + margin-right: 30px; } + +.kuiLocalDropdownPanel--right { + margin-left: 30px; } + +.kuiLocalDropdownTitle { + margin-bottom: 12px; + font-size: 18px; + color: #2d2d2d; } + .theme-dark .kuiLocalDropdownTitle { + color: #cecece; } + +.kuiLocalDropdownSection { + margin-bottom: 16px; } + .kuiLocalDropdownSection:last-child { + margin-bottom: 0; } + +.kuiLocalDropdownHeader { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 6px; } + +.kuiLocalDropdownHeader__label { + font-size: 14px; + font-weight: 700; + color: #2d2d2d; } + .theme-dark .kuiLocalDropdownHeader__label { + color: #cecece; } + +.kuiLocalDropdownHeader__actions { + display: flex; } + +.kuiLocalDropdownHeader__action { + color: #3CAED2; + font-size: 12px; + text-decoration: none; + cursor: pointer; } + .kuiLocalDropdownHeader__action + .kuiLocalDropdownHeader__action { + margin-left: 10px; } + .kuiLocalDropdownHeader__action:hover, .kuiLocalDropdownHeader__action:active { + color: #105A73; } + .theme-dark .kuiLocalDropdownHeader__action { + color: #b7e2ea; } + .theme-dark .kuiLocalDropdownHeader__action:hover, .theme-dark .kuiLocalDropdownHeader__action:active { + color: #def2f6; } + +.kuiLocalDropdownInput { + display: block; + width: 100%; + margin-bottom: 12px; + padding: 5px 15px; + font-size: 14px; + color: #2d2d2d; + background-color: #ffffff; + border: 2px solid #ffffff; + border-radius: 4px; } + .theme-dark .kuiLocalDropdownInput { + color: #cecece; + background-color: #444444; + border-color: #444444; } + +.kuiLocalDropdownFormNote { + font-size: 14px; + color: #737373; } + .theme-dark .kuiLocalDropdownFormNote { + color: #a2a2a2; } + +.kuiLocalDropdownWarning { + margin-bottom: 16px; + padding: 6px 10px; + font-size: 14px; + color: #2d2d2d; + background-color: #e4e4e4; } + .theme-dark .kuiLocalDropdownWarning { + color: #cecece; + background-color: #636363; } + +.kuiLocalDropdownHelpText { + margin-bottom: 16px; + font-size: 14px; + color: #2D2D2D; } + .theme-dark .kuiLocalDropdownHelpText { + color: #9e9e9e; } + +.kuiLocalMenu { + display: flex; + align-items: center; + height: 100%; } + +.kuiLocalMenuItem { + display: flex; + align-items: center; + height: 100%; + padding: 0 10px; + font-size: 14px; + background-color: transparent; + color: #5a5a5a; + border: 0; + cursor: pointer; } + .kuiLocalMenuItem:hover { + background-color: rgba(0, 0, 0, 0.1); + color: #000000; } + .kuiLocalMenuItem.kuiLocalMenuItem-isSelected { + background-color: #f6f6f6; } + .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled { + opacity: 0.5; + cursor: default; } + .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover { + background-color: transparent; + color: #5a5a5a; } + .theme-dark .kuiLocalMenuItem { + color: #dedede; } + .theme-dark .kuiLocalMenuItem:hover { + background-color: #000000; + color: #ffffff; } + .theme-dark .kuiLocalMenuItem.kuiLocalMenuItem-isSelected { + background-color: #525252; } + .theme-dark .kuiLocalMenuItem.kuiLocalMenuItem-isDisabled:hover { + background-color: transparent; + color: #dedede; } + +.kuiLocalMenuItem__icon { + margin-right: 5px; + margin-bottom: -1px; } + +/** + * 1. Match height of logo in side bar, but allow it to expand to accommodate + * dropdown. + */ +.kuiLocalNav { + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 70px; + /* 1 */ + color: #2d2d2d; + background-color: #e4e4e4; } + .theme-dark .kuiLocalNav { + color: #cecece; + background-color: #333333; } + +.kuiLocalNavRow { + display: flex; + align-items: center; + justify-content: space-between; + height: 32px; } + +.kuiLocalNavRow__section { + height: 100%; } + +.kuiLocalNavRow--secondary { + height: 38px; + padding: 0 10px; } + +.kuiLocalSearch { + display: flex; + width: 100%; + height: 30px; } + +.kuiLocalSearchInput { + flex: 1 1 100%; + padding: 5px 15px; + font-size: 14px; + color: #2d2d2d; + background-color: #ffffff; + border: 2px solid #ffffff; + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + .kuiLocalSearchInput.kuiLocalSearchInput-isInvalid { + border-color: #e74C3c; } + .theme-dark .kuiLocalSearchInput { + color: #cecece; + background-color: #4e4e4e; + border-color: #4e4e4e; } + .theme-dark .kuiLocalSearchInput.kuiLocalSearchInput-isInvalid { + border-color: #ff6758; } + +.kuiLocalSearchButton { + width: 43px; + height: 30px; + font-size: 14px; + color: #ffffff; + background-color: #9c9c9c; + border: 0; + border-bottom-left-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: 4px; + border-top-right-radius: 4px; } + .theme-dark .kuiLocalSearchButton { + color: #ffffff; + background-color: #777777; } + +/** + * 1. We want the bottom border on selected tabs to be flush with the bottom of the container. + */ +.kuiLocalTabs { + display: flex; + align-items: flex-end; + height: 100%; } + +/** + * 1. Make sure the bottom border is flush with the bottom of the LocalNav. + */ +.kuiLocalTab { + padding: 5px 0 6px 0; + font-size: 18px; + line-height: 22px; + /* 1 */ + color: #5a5a5a; + border-bottom: 2px solid transparent; + text-decoration: none; + cursor: pointer; } + .kuiLocalTab:hover, .kuiLocalTab:active { + color: #000000; } + .theme-dark .kuiLocalTab:hover, .theme-dark .kuiLocalTab:active { + color: #ffffff; } + .kuiLocalTab.kuiLocalTab-isSelected { + color: #000000; + border-bottom-color: #000000; + cursor: default; } + .theme-dark .kuiLocalTab.kuiLocalTab-isSelected { + color: #ffffff; + border-bottom-color: #ffffff; } + .kuiLocalTab + .kuiLocalTab { + margin-left: 15px; } + .theme-dark .kuiLocalTab { + color: #dedede; } + +.kuiLocalTitle { + display: flex; + align-items: center; + height: 100%; + padding-left: 10px; + font-size: 14px; + font-weight: bold; } + +/** + * 1. Setting to inline-block guarantees the same height when applied to both + * button elements and anchor tags. + * 2. Fit MicroButton inside of Table rows without pushing them taller. + */ +.kuiMicroButton { + display: inline-block; + /* 1 */ + appearance: none; + cursor: pointer; + padding: 2px 5px; + border: 1px solid transparent; + color: #9fa3a7; + background-color: transparent; + font-size: 12px; + line-height: 1; + /* 2 */ } + .kuiMicroButton:hover { + color: #191E23; } + +.kuiMicroButtonGroup { + display: flex; } + .kuiMicroButtonGroup .kuiMicroButton + .kuiMicroButton { + margin-left: 2px; } + +.kuiNoItems { + padding: 30px; + font-size: 18px; + color: #9fa3a7; + line-height: 1.5; } + +.kuiPanel { + border: 2px solid #E4E4E4; } + +.kuiPanel--centered { + display: flex; + justify-content: center; + align-items: center; } + +/** + * 1. Make seamless transition from ToolBar to Table header. + * 1. Make seamless transition from Table to ToolBarFooter header. + */ +.kuiControlledTable .kuiTable { + border-top: none; + /* 1 */ } + +.kuiControlledTable .kuiToolBarFooter { + border-top: none; + /* 2 */ } + +.kuiTable { + table-layout: fixed; + width: 100%; + border: 2px solid #E4E4E4; + border-collapse: collapse; + background-color: #FFFFFF; } + +.kuiTableHeaderCell { + font-size: 14px; + font-weight: 400; + line-height: 1.5; + padding: 7px 8px 8px; + text-align: left; + color: #787878; } + .kuiTableHeaderCell:last-child { + padding-right: 16px; } + +/** + * 1. Prevent rapid clicking from selecting text. + */ +.kuiTableHeaderCell--sortable { + user-select: none; + /* 1 */ + cursor: pointer; } + .kuiTableHeaderCell--sortable:hover:not(.kuiTableHeaderCell-isSorted) .kuiTableSortIcon { + opacity: 0.4; } + +.kuiTableHeaderCell--alignRight { + text-align: right; } + +.kuiTableSortIcon { + pointer-events: none; } + +.kuiTableRow:hover .kuiTableRowHoverReveal { + display: inline-block; } + +.kuiTableRowHoverReveal { + display: none; } + +.kuiTableRowCell { + font-size: 14px; + font-weight: 400; + line-height: 1.5; + padding: 7px 8px 8px; + text-align: left; + color: #191E23; + border-top: 2px solid #E4E4E4; } + .kuiTableRowCell:last-child { + padding-right: 16px; } + +/** + * 1. Vertically align all children. + */ +.kuiTableRowCell__liner { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } + .kuiTableRowCell__liner * > { + vertical-align: middle; + /* 1 */ } + +.kuiTableRowCell--alignRight { + text-align: right; } + .kuiTableRowCell--alignRight .kuiTableRowCell__liner { + text-align: right; } + +/** + * 1. Rendered width of cell with checkbox inside of it. + * 2. Align checkbox with text in other cells. + */ +.kuiTableHeaderCell--checkBox, +.kuiTableRowCell--checkBox { + width: 28px; + /* 1 */ + padding-right: 0; + line-height: 1; } + +.kuiTabs { + display: flex; + border-bottom: 2px solid #E4E4E4; } + +/** + * 1. Override button styles (some of which are from Bootstrap). + */ +.kuiTab { + appearance: none; + /* 1 */ + cursor: pointer; + padding: 10px 30px; + font-size: 14px; + color: #9fa3a7; + background-color: #ffffff; + /* 1 */ + border: 1px solid #E4E4E4; + border-bottom: none; + border-radius: 0; + /* 1 */ } + .kuiTab + .kuiTab { + border-left: none; } + .kuiTab:focus { + color: #3CAED2; + z-index: 1; + outline: 1px solid #6EADC1 !important; + /* 1 */ } + .kuiTab:hover:not(.kuiTab-isSelected) { + color: #006E8A; } + .kuiTab:active { + outline: none; + border-color: #ffffff; + box-shadow: none; + /* 1 */ + color: #3CAED2 !important; } + .kuiTab.kuiTab-isSelected { + color: #191E23; + background-color: #F2F2F2; + cursor: default; } + +.kuiToolBar { + display: flex; + justify-content: space-between; + padding: 10px; + height: 50px; + background-color: #E4E4E4; } + .kuiToolBar .kuiButton--basic { + color: #5a5a5a; + background-color: #FFFFFF; } + .kuiToolBar .kuiButton--basic:disabled { + color: #a7a7a7; + background-color: #F3F3F3; } + +/** + * 1. Put 10px of space between each child. + */ +.kuiToolBarSection { + display: flex; + align-items: center; + margin-left: 25px; + margin-right: 25px; } + .kuiToolBarSection:last-child { + margin-right: 0; } + .kuiToolBarSection > * + * { + margin-left: 10px; + /* 1 */ } + +.kuiToolBarFooter { + display: flex; + justify-content: space-between; + padding: 10px; + height: 40px; + background-color: #ffffff; + border: 2px solid #E4E4E4; } + +/** + * 1. Put 10px of space between each child. + */ +.kuiToolBarFooterSection { + display: flex; + align-items: center; + margin-left: 25px; + margin-right: 25px; } + .kuiToolBarFooterSection:first-child { + margin-left: 0; } + .kuiToolBarFooterSection:last-child { + margin-right: 0; } + .kuiToolBarFooterSection:only-child { + margin-left: auto; } + .kuiToolBarFooterSection > * + * { + margin-left: 10px; + /* 1 */ } + +.kuiToolBarSearch { + display: flex; + flex: 1 1 auto; + max-width: 800px; + line-height: 1.5; + margin-right: 25px; } + +.kuiToolBarSearchBox { + flex: 1 1 auto; + position: relative; } + +.kuiToolBarSearchBox__icon { + position: absolute; + top: 6px; + left: 8px; + font-size: 14px; + color: #ACACAC; } + +/** + * 1. Fix inherited styles (possibly from Bootstrap). + */ +.kuiToolBarSearchBox__input { + width: 100%; + min-width: 200px; + padding: 5px 12px 6px 28px; + background-color: #FFFFFF; + color: #191E23; + border: 1px solid #FFFFFF; + border-radius: 4px; + font-size: 14px; + border: none; + /* 1 */ + line-height: normal; + /* 1 */ } + .kuiToolBarSearchBox__input:focus { + z-index: 1; + /* 1 */ + outline: 1px solid #6EADC1 !important; + /* 2 */ + outline-offset: 2px !important; + /* 2 */ } + +/* + * 1. We don't want the text to take up two lines and overflow the ToolBar. + */ +.kuiToolBarText { + font-size: 14px; + line-height: 1.5; + color: #5A5A5A; + white-space: nowrap; + /* 1 */ } diff --git a/src/ui_framework/doc_site/build/index.html b/ui_framework/doc_site/build/index.html similarity index 89% rename from src/ui_framework/doc_site/build/index.html rename to ui_framework/doc_site/build/index.html index 3717c95289f77..04627ab24e68e 100644 --- a/src/ui_framework/doc_site/build/index.html +++ b/ui_framework/doc_site/build/index.html @@ -4,6 +4,7 @@ + diff --git a/ui_framework/doc_site/build/ui_framework.css b/ui_framework/doc_site/build/ui_framework.css new file mode 120000 index 0000000000000..6c943a9b4c081 --- /dev/null +++ b/ui_framework/doc_site/build/ui_framework.css @@ -0,0 +1 @@ +../../dist/ui_framework.css \ No newline at end of file diff --git a/src/ui_framework/doc_site/postcss.config.js b/ui_framework/doc_site/postcss.config.js similarity index 100% rename from src/ui_framework/doc_site/postcss.config.js rename to ui_framework/doc_site/postcss.config.js diff --git a/src/ui_framework/doc_site/src/actions/action_types.js b/ui_framework/doc_site/src/actions/action_types.js similarity index 100% rename from src/ui_framework/doc_site/src/actions/action_types.js rename to ui_framework/doc_site/src/actions/action_types.js diff --git a/src/ui_framework/doc_site/src/actions/code_viewer/code_viewer_actions.js b/ui_framework/doc_site/src/actions/code_viewer/code_viewer_actions.js similarity index 100% rename from src/ui_framework/doc_site/src/actions/code_viewer/code_viewer_actions.js rename to ui_framework/doc_site/src/actions/code_viewer/code_viewer_actions.js diff --git a/src/ui_framework/doc_site/src/actions/index.js b/ui_framework/doc_site/src/actions/index.js similarity index 100% rename from src/ui_framework/doc_site/src/actions/index.js rename to ui_framework/doc_site/src/actions/index.js diff --git a/src/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss b/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss similarity index 100% rename from src/ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss rename to ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss diff --git a/src/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.jsx b/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.jsx similarity index 100% rename from src/ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.jsx rename to ui_framework/doc_site/src/components/guide_code_viewer/guide_code_viewer.jsx diff --git a/src/ui_framework/doc_site/src/components/guide_example/_guide_example.scss b/ui_framework/doc_site/src/components/guide_example/_guide_example.scss similarity index 100% rename from src/ui_framework/doc_site/src/components/guide_example/_guide_example.scss rename to ui_framework/doc_site/src/components/guide_example/_guide_example.scss diff --git a/src/ui_framework/doc_site/src/components/guide_example/guide_example.jsx b/ui_framework/doc_site/src/components/guide_example/guide_example.jsx similarity index 100% rename from src/ui_framework/doc_site/src/components/guide_example/guide_example.jsx rename to ui_framework/doc_site/src/components/guide_example/guide_example.jsx diff --git a/src/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss b/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss similarity index 100% rename from src/ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss rename to ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss diff --git a/src/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx b/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx similarity index 100% rename from src/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx rename to ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx diff --git a/src/ui_framework/doc_site/src/components/guide_page/_guide_page.scss b/ui_framework/doc_site/src/components/guide_page/_guide_page.scss similarity index 100% rename from src/ui_framework/doc_site/src/components/guide_page/_guide_page.scss rename to ui_framework/doc_site/src/components/guide_page/_guide_page.scss diff --git a/src/ui_framework/doc_site/src/components/guide_page/guide_page.jsx b/ui_framework/doc_site/src/components/guide_page/guide_page.jsx similarity index 100% rename from src/ui_framework/doc_site/src/components/guide_page/guide_page.jsx rename to ui_framework/doc_site/src/components/guide_page/guide_page.jsx diff --git a/src/ui_framework/doc_site/src/components/guide_page_section/_guide_page_section.scss b/ui_framework/doc_site/src/components/guide_page_section/_guide_page_section.scss similarity index 100% rename from src/ui_framework/doc_site/src/components/guide_page_section/_guide_page_section.scss rename to ui_framework/doc_site/src/components/guide_page_section/_guide_page_section.scss diff --git a/src/ui_framework/doc_site/src/components/guide_page_section/guide_page_section.jsx b/ui_framework/doc_site/src/components/guide_page_section/guide_page_section.jsx similarity index 100% rename from src/ui_framework/doc_site/src/components/guide_page_section/guide_page_section.jsx rename to ui_framework/doc_site/src/components/guide_page_section/guide_page_section.jsx diff --git a/src/ui_framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss b/ui_framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss similarity index 100% rename from src/ui_framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss rename to ui_framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss diff --git a/src/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.jsx b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.jsx similarity index 100% rename from src/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.jsx rename to ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav.jsx diff --git a/src/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.jsx b/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.jsx similarity index 100% rename from src/ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.jsx rename to ui_framework/doc_site/src/components/guide_page_side_nav/guide_page_side_nav_item.jsx diff --git a/src/ui_framework/doc_site/src/components/index.js b/ui_framework/doc_site/src/components/index.js similarity index 100% rename from src/ui_framework/doc_site/src/components/index.js rename to ui_framework/doc_site/src/components/index.js diff --git a/src/ui_framework/doc_site/src/index.js b/ui_framework/doc_site/src/index.js similarity index 100% rename from src/ui_framework/doc_site/src/index.js rename to ui_framework/doc_site/src/index.js diff --git a/src/ui_framework/doc_site/src/main.scss b/ui_framework/doc_site/src/main.scss similarity index 94% rename from src/ui_framework/doc_site/src/main.scss rename to ui_framework/doc_site/src/main.scss index eb17124f8df38..761f897ba771e 100644 --- a/src/ui_framework/doc_site/src/main.scss +++ b/ui_framework/doc_site/src/main.scss @@ -1,5 +1,4 @@ -@import "../../components/index"; @import "./views/app"; @import "./components/guide_code_viewer/guide_code_viewer"; @import "./components/guide_nav/guide_nav"; diff --git a/src/ui_framework/doc_site/src/services/example/createExample.js b/ui_framework/doc_site/src/services/example/createExample.js similarity index 100% rename from src/ui_framework/doc_site/src/services/example/createExample.js rename to ui_framework/doc_site/src/services/example/createExample.js diff --git a/src/ui_framework/doc_site/src/services/index.js b/ui_framework/doc_site/src/services/index.js similarity index 100% rename from src/ui_framework/doc_site/src/services/index.js rename to ui_framework/doc_site/src/services/index.js diff --git a/src/ui_framework/doc_site/src/services/js_injector/js_injector.js b/ui_framework/doc_site/src/services/js_injector/js_injector.js similarity index 100% rename from src/ui_framework/doc_site/src/services/js_injector/js_injector.js rename to ui_framework/doc_site/src/services/js_injector/js_injector.js diff --git a/src/ui_framework/doc_site/src/services/routes/Routes.js b/ui_framework/doc_site/src/services/routes/Routes.js similarity index 100% rename from src/ui_framework/doc_site/src/services/routes/Routes.js rename to ui_framework/doc_site/src/services/routes/Routes.js diff --git a/src/ui_framework/doc_site/src/services/string/slugify.js b/ui_framework/doc_site/src/services/string/slugify.js similarity index 100% rename from src/ui_framework/doc_site/src/services/string/slugify.js rename to ui_framework/doc_site/src/services/string/slugify.js diff --git a/src/ui_framework/doc_site/src/store/configure_store.js b/ui_framework/doc_site/src/store/configure_store.js similarity index 100% rename from src/ui_framework/doc_site/src/store/configure_store.js rename to ui_framework/doc_site/src/store/configure_store.js diff --git a/src/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js b/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js similarity index 100% rename from src/ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js rename to ui_framework/doc_site/src/store/reducers/code_viewer_reducer.js diff --git a/src/ui_framework/doc_site/src/variables.scss b/ui_framework/doc_site/src/variables.scss similarity index 100% rename from src/ui_framework/doc_site/src/variables.scss rename to ui_framework/doc_site/src/variables.scss diff --git a/src/ui_framework/doc_site/src/views/_app.scss b/ui_framework/doc_site/src/views/_app.scss similarity index 100% rename from src/ui_framework/doc_site/src/views/_app.scss rename to ui_framework/doc_site/src/views/_app.scss diff --git a/src/ui_framework/doc_site/src/views/app_container.js b/ui_framework/doc_site/src/views/app_container.js similarity index 100% rename from src/ui_framework/doc_site/src/views/app_container.js rename to ui_framework/doc_site/src/views/app_container.js diff --git a/src/ui_framework/doc_site/src/views/app_view.jsx b/ui_framework/doc_site/src/views/app_view.jsx similarity index 97% rename from src/ui_framework/doc_site/src/views/app_view.jsx rename to ui_framework/doc_site/src/views/app_view.jsx index 8a71f12667545..a66889fc04fb3 100644 --- a/src/ui_framework/doc_site/src/views/app_view.jsx +++ b/ui_framework/doc_site/src/views/app_view.jsx @@ -16,7 +16,7 @@ import { } from '../components'; // Inject version into header. -const pkg = require('json!../../../../../package.json'); +const pkg = require('json!../../../../package.json'); export default class AppView extends Component { diff --git a/src/ui_framework/doc_site/src/views/button/button_basic.html b/ui_framework/doc_site/src/views/button/button_basic.html similarity index 100% rename from src/ui_framework/doc_site/src/views/button/button_basic.html rename to ui_framework/doc_site/src/views/button/button_basic.html diff --git a/src/ui_framework/doc_site/src/views/button/button_danger.html b/ui_framework/doc_site/src/views/button/button_danger.html similarity index 100% rename from src/ui_framework/doc_site/src/views/button/button_danger.html rename to ui_framework/doc_site/src/views/button/button_danger.html diff --git a/src/ui_framework/doc_site/src/views/button/button_elements.html b/ui_framework/doc_site/src/views/button/button_elements.html similarity index 100% rename from src/ui_framework/doc_site/src/views/button/button_elements.html rename to ui_framework/doc_site/src/views/button/button_elements.html diff --git a/src/ui_framework/doc_site/src/views/button/button_example.jsx b/ui_framework/doc_site/src/views/button/button_example.jsx similarity index 100% rename from src/ui_framework/doc_site/src/views/button/button_example.jsx rename to ui_framework/doc_site/src/views/button/button_example.jsx diff --git a/src/ui_framework/doc_site/src/views/button/button_group.html b/ui_framework/doc_site/src/views/button/button_group.html similarity index 100% rename from src/ui_framework/doc_site/src/views/button/button_group.html rename to ui_framework/doc_site/src/views/button/button_group.html diff --git a/src/ui_framework/doc_site/src/views/button/button_group_united.html b/ui_framework/doc_site/src/views/button/button_group_united.html similarity index 100% rename from src/ui_framework/doc_site/src/views/button/button_group_united.html rename to ui_framework/doc_site/src/views/button/button_group_united.html diff --git a/src/ui_framework/doc_site/src/views/button/button_primary.html b/ui_framework/doc_site/src/views/button/button_primary.html similarity index 100% rename from src/ui_framework/doc_site/src/views/button/button_primary.html rename to ui_framework/doc_site/src/views/button/button_primary.html diff --git a/src/ui_framework/doc_site/src/views/button/button_with_icon.html b/ui_framework/doc_site/src/views/button/button_with_icon.html similarity index 100% rename from src/ui_framework/doc_site/src/views/button/button_with_icon.html rename to ui_framework/doc_site/src/views/button/button_with_icon.html diff --git a/src/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.html b/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.html similarity index 100% rename from src/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.html rename to ui_framework/doc_site/src/views/button/buttons_in_tool_bar.html diff --git a/src/ui_framework/doc_site/src/views/form/check_box.html b/ui_framework/doc_site/src/views/form/check_box.html similarity index 100% rename from src/ui_framework/doc_site/src/views/form/check_box.html rename to ui_framework/doc_site/src/views/form/check_box.html diff --git a/src/ui_framework/doc_site/src/views/form/form_example.jsx b/ui_framework/doc_site/src/views/form/form_example.jsx similarity index 100% rename from src/ui_framework/doc_site/src/views/form/form_example.jsx rename to ui_framework/doc_site/src/views/form/form_example.jsx diff --git a/src/ui_framework/doc_site/src/views/form/text_area.html b/ui_framework/doc_site/src/views/form/text_area.html similarity index 100% rename from src/ui_framework/doc_site/src/views/form/text_area.html rename to ui_framework/doc_site/src/views/form/text_area.html diff --git a/src/ui_framework/doc_site/src/views/form/text_input.html b/ui_framework/doc_site/src/views/form/text_input.html similarity index 100% rename from src/ui_framework/doc_site/src/views/form/text_input.html rename to ui_framework/doc_site/src/views/form/text_input.html diff --git a/src/ui_framework/doc_site/src/views/home/_home_view.scss b/ui_framework/doc_site/src/views/home/_home_view.scss similarity index 100% rename from src/ui_framework/doc_site/src/views/home/_home_view.scss rename to ui_framework/doc_site/src/views/home/_home_view.scss diff --git a/src/ui_framework/doc_site/src/views/home/home_view.jsx b/ui_framework/doc_site/src/views/home/home_view.jsx similarity index 100% rename from src/ui_framework/doc_site/src/views/home/home_view.jsx rename to ui_framework/doc_site/src/views/home/home_view.jsx diff --git a/src/ui_framework/doc_site/src/views/icon/icon.html b/ui_framework/doc_site/src/views/icon/icon.html similarity index 100% rename from src/ui_framework/doc_site/src/views/icon/icon.html rename to ui_framework/doc_site/src/views/icon/icon.html diff --git a/src/ui_framework/doc_site/src/views/icon/icon_error.html b/ui_framework/doc_site/src/views/icon/icon_error.html similarity index 100% rename from src/ui_framework/doc_site/src/views/icon/icon_error.html rename to ui_framework/doc_site/src/views/icon/icon_error.html diff --git a/src/ui_framework/doc_site/src/views/icon/icon_example.jsx b/ui_framework/doc_site/src/views/icon/icon_example.jsx similarity index 100% rename from src/ui_framework/doc_site/src/views/icon/icon_example.jsx rename to ui_framework/doc_site/src/views/icon/icon_example.jsx diff --git a/src/ui_framework/doc_site/src/views/icon/icon_success.html b/ui_framework/doc_site/src/views/icon/icon_success.html similarity index 100% rename from src/ui_framework/doc_site/src/views/icon/icon_success.html rename to ui_framework/doc_site/src/views/icon/icon_success.html diff --git a/src/ui_framework/doc_site/src/views/icon/icon_warning.html b/ui_framework/doc_site/src/views/icon/icon_warning.html similarity index 100% rename from src/ui_framework/doc_site/src/views/icon/icon_warning.html rename to ui_framework/doc_site/src/views/icon/icon_warning.html diff --git a/src/ui_framework/doc_site/src/views/info_panel/info_panel.html b/ui_framework/doc_site/src/views/info_panel/info_panel.html similarity index 100% rename from src/ui_framework/doc_site/src/views/info_panel/info_panel.html rename to ui_framework/doc_site/src/views/info_panel/info_panel.html diff --git a/src/ui_framework/doc_site/src/views/info_panel/info_panel_example.jsx b/ui_framework/doc_site/src/views/info_panel/info_panel_example.jsx similarity index 100% rename from src/ui_framework/doc_site/src/views/info_panel/info_panel_example.jsx rename to ui_framework/doc_site/src/views/info_panel/info_panel_example.jsx diff --git a/src/ui_framework/doc_site/src/views/link/link.html b/ui_framework/doc_site/src/views/link/link.html similarity index 100% rename from src/ui_framework/doc_site/src/views/link/link.html rename to ui_framework/doc_site/src/views/link/link.html diff --git a/src/ui_framework/doc_site/src/views/link/link_example.jsx b/ui_framework/doc_site/src/views/link/link_example.jsx similarity index 100% rename from src/ui_framework/doc_site/src/views/link/link_example.jsx rename to ui_framework/doc_site/src/views/link/link_example.jsx diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.html b/ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.html similarity index 100% rename from src/ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.html rename to ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.html diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.html b/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.html similarity index 100% rename from src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.html rename to ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.html diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.html b/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.html similarity index 100% rename from src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.html rename to ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.html diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_example.jsx b/ui_framework/doc_site/src/views/local_nav/local_nav_example.jsx similarity index 100% rename from src/ui_framework/doc_site/src/views/local_nav/local_nav_example.jsx rename to ui_framework/doc_site/src/views/local_nav/local_nav_example.jsx diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states.html b/ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states.html similarity index 100% rename from src/ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states.html rename to ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states.html diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_search.html b/ui_framework/doc_site/src/views/local_nav/local_nav_search.html similarity index 100% rename from src/ui_framework/doc_site/src/views/local_nav/local_nav_search.html rename to ui_framework/doc_site/src/views/local_nav/local_nav_search.html diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_search_error.html b/ui_framework/doc_site/src/views/local_nav/local_nav_search_error.html similarity index 100% rename from src/ui_framework/doc_site/src/views/local_nav/local_nav_search_error.html rename to ui_framework/doc_site/src/views/local_nav/local_nav_search_error.html diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_simple.html b/ui_framework/doc_site/src/views/local_nav/local_nav_simple.html similarity index 100% rename from src/ui_framework/doc_site/src/views/local_nav/local_nav_simple.html rename to ui_framework/doc_site/src/views/local_nav/local_nav_simple.html diff --git a/src/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html b/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html similarity index 100% rename from src/ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html rename to ui_framework/doc_site/src/views/local_nav/local_nav_tabs.html diff --git a/src/ui_framework/doc_site/src/views/micro_button/micro_button.html b/ui_framework/doc_site/src/views/micro_button/micro_button.html similarity index 100% rename from src/ui_framework/doc_site/src/views/micro_button/micro_button.html rename to ui_framework/doc_site/src/views/micro_button/micro_button.html diff --git a/src/ui_framework/doc_site/src/views/micro_button/micro_button_elements.html b/ui_framework/doc_site/src/views/micro_button/micro_button_elements.html similarity index 100% rename from src/ui_framework/doc_site/src/views/micro_button/micro_button_elements.html rename to ui_framework/doc_site/src/views/micro_button/micro_button_elements.html diff --git a/src/ui_framework/doc_site/src/views/micro_button/micro_button_example.jsx b/ui_framework/doc_site/src/views/micro_button/micro_button_example.jsx similarity index 100% rename from src/ui_framework/doc_site/src/views/micro_button/micro_button_example.jsx rename to ui_framework/doc_site/src/views/micro_button/micro_button_example.jsx diff --git a/src/ui_framework/doc_site/src/views/micro_button/micro_button_group.html b/ui_framework/doc_site/src/views/micro_button/micro_button_group.html similarity index 100% rename from src/ui_framework/doc_site/src/views/micro_button/micro_button_group.html rename to ui_framework/doc_site/src/views/micro_button/micro_button_group.html diff --git a/src/ui_framework/doc_site/src/views/not_found/not_found_view.jsx b/ui_framework/doc_site/src/views/not_found/not_found_view.jsx similarity index 100% rename from src/ui_framework/doc_site/src/views/not_found/not_found_view.jsx rename to ui_framework/doc_site/src/views/not_found/not_found_view.jsx diff --git a/src/ui_framework/doc_site/src/views/table/controlled_table.html b/ui_framework/doc_site/src/views/table/controlled_table.html similarity index 100% rename from src/ui_framework/doc_site/src/views/table/controlled_table.html rename to ui_framework/doc_site/src/views/table/controlled_table.html diff --git a/src/ui_framework/doc_site/src/views/table/controlled_table_loading_items.html b/ui_framework/doc_site/src/views/table/controlled_table_loading_items.html similarity index 100% rename from src/ui_framework/doc_site/src/views/table/controlled_table_loading_items.html rename to ui_framework/doc_site/src/views/table/controlled_table_loading_items.html diff --git a/src/ui_framework/doc_site/src/views/table/controlled_table_no_items.html b/ui_framework/doc_site/src/views/table/controlled_table_no_items.html similarity index 100% rename from src/ui_framework/doc_site/src/views/table/controlled_table_no_items.html rename to ui_framework/doc_site/src/views/table/controlled_table_no_items.html diff --git a/src/ui_framework/doc_site/src/views/table/table.html b/ui_framework/doc_site/src/views/table/table.html similarity index 100% rename from src/ui_framework/doc_site/src/views/table/table.html rename to ui_framework/doc_site/src/views/table/table.html diff --git a/src/ui_framework/doc_site/src/views/table/table.js b/ui_framework/doc_site/src/views/table/table.js similarity index 100% rename from src/ui_framework/doc_site/src/views/table/table.js rename to ui_framework/doc_site/src/views/table/table.js diff --git a/src/ui_framework/doc_site/src/views/table/table_example.jsx b/ui_framework/doc_site/src/views/table/table_example.jsx similarity index 100% rename from src/ui_framework/doc_site/src/views/table/table_example.jsx rename to ui_framework/doc_site/src/views/table/table_example.jsx diff --git a/src/ui_framework/doc_site/src/views/tabs/tabs.html b/ui_framework/doc_site/src/views/tabs/tabs.html similarity index 100% rename from src/ui_framework/doc_site/src/views/tabs/tabs.html rename to ui_framework/doc_site/src/views/tabs/tabs.html diff --git a/src/ui_framework/doc_site/src/views/tabs/tabs.js b/ui_framework/doc_site/src/views/tabs/tabs.js similarity index 100% rename from src/ui_framework/doc_site/src/views/tabs/tabs.js rename to ui_framework/doc_site/src/views/tabs/tabs.js diff --git a/src/ui_framework/doc_site/src/views/tabs/tabs_example.jsx b/ui_framework/doc_site/src/views/tabs/tabs_example.jsx similarity index 100% rename from src/ui_framework/doc_site/src/views/tabs/tabs_example.jsx rename to ui_framework/doc_site/src/views/tabs/tabs_example.jsx diff --git a/src/ui_framework/doc_site/src/views/tool_bar/tool_bar.html b/ui_framework/doc_site/src/views/tool_bar/tool_bar.html similarity index 100% rename from src/ui_framework/doc_site/src/views/tool_bar/tool_bar.html rename to ui_framework/doc_site/src/views/tool_bar/tool_bar.html diff --git a/src/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx b/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx similarity index 100% rename from src/ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx rename to ui_framework/doc_site/src/views/tool_bar/tool_bar_example.jsx diff --git a/src/ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.html b/ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.html similarity index 100% rename from src/ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.html rename to ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.html diff --git a/src/ui_framework/doc_site/webpack.config.js b/ui_framework/doc_site/webpack.config.js similarity index 83% rename from src/ui_framework/doc_site/webpack.config.js rename to ui_framework/doc_site/webpack.config.js index 172ef1db2626c..05ab102f21058 100644 --- a/src/ui_framework/doc_site/webpack.config.js +++ b/ui_framework/doc_site/webpack.config.js @@ -4,11 +4,11 @@ module.exports = { devtool: 'source-map', entry: { - guide: './src/ui_framework/doc_site/src/index.js' + guide: './ui_framework/doc_site/src/index.js' }, output: { - path: path.resolve(__dirname, 'src/ui_framework/doc_site/build'), + path: path.resolve(__dirname, 'ui_framework/doc_site/build'), filename: 'bundle.js' }, From 509e67c80e0df12e65f45f57ca53efb733ef83f6 Mon Sep 17 00:00:00 2001 From: Tyler Smalley Date: Mon, 9 Jan 2017 15:53:24 -0800 Subject: [PATCH 2/3] Allow for hot reloading of CSS in UI Framework Signed-off-by: Tyler Smalley --- ui_framework/doc_site/build/index.html | 1 - ui_framework/doc_site/src/main.scss | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/ui_framework/doc_site/build/index.html b/ui_framework/doc_site/build/index.html index 04627ab24e68e..3717c95289f77 100644 --- a/ui_framework/doc_site/build/index.html +++ b/ui_framework/doc_site/build/index.html @@ -4,7 +4,6 @@ - diff --git a/ui_framework/doc_site/src/main.scss b/ui_framework/doc_site/src/main.scss index 761f897ba771e..b3a811d808766 100644 --- a/ui_framework/doc_site/src/main.scss +++ b/ui_framework/doc_site/src/main.scss @@ -1,4 +1,4 @@ - +@import "../../dist/ui_framework.css"; @import "./views/app"; @import "./components/guide_code_viewer/guide_code_viewer"; @import "./components/guide_nav/guide_nav"; From 0fe4f0ae43d99ba32a13bc76940f9d8ca7d15b76 Mon Sep 17 00:00:00 2001 From: Tyler Smalley Date: Mon, 9 Jan 2017 17:42:23 -0800 Subject: [PATCH 3/3] Pass CSS through PostCSS + AutoPrefixer Signed-off-by: Tyler Smalley --- tasks/ui_framework.js | 84 +++++++----- ui_framework/dist/ui_framework.css | 212 ++++++++++++++++++++++++----- 2 files changed, 234 insertions(+), 62 deletions(-) diff --git a/tasks/ui_framework.js b/tasks/ui_framework.js index dd7c5dea43977..fe7786351f74c 100644 --- a/tasks/ui_framework.js +++ b/tasks/ui_framework.js @@ -1,38 +1,36 @@ const sass = require('node-sass'); +const postcss = require('postcss'); +const postcssConfig = require('../src/optimize/postcss.config'); +const chokidar = require('chokidar'); +const debounce = require('lodash/function/debounce'); const platform = require('os').platform(); module.exports = function (grunt) { - const watcherCmd = { - cmd: /^win/.test(platform) ? '.\\node_modules\\.bin\\node-sass' : './node_modules/.bin/node-sass', - args: [ - 'ui_framework/components/index.scss', - '--watch', - '--recursive', - 'ui_framework/dist/ui_framework.css' - ] - }; - - const serverCmd = { - cmd: /^win/.test(platform) ? '.\\node_modules\\.bin\\webpack-dev-server' : './node_modules/.bin/webpack-dev-server', - args: [ - '--config=ui_framework/doc_site/webpack.config.js', - '--hot ', - '--inline', - '--content-base=ui_framework/doc_site/build' - ] - }; - - function spawn(task) { - return new Promise((resolve, reject) => { - grunt.util.spawn(task, (error, result, code) => { - grunt.log.writeln(); + grunt.registerTask('uiFramework:start', function () { + const done = this.async(); + Promise.all([uiFrameworkWatch(), uiFrameworkServerStart()]).then(done); + }); + + function uiFrameworkServerStart() { + const serverCmd = { + cmd: /^win/.test(platform) ? '.\\node_modules\\.bin\\webpack-dev-server' : './node_modules/.bin/webpack-dev-server', + args: [ + '--config=ui_framework/doc_site/webpack.config.js', + '--hot ', + '--inline', + '--content-base=ui_framework/doc_site/build' + ], + opts: { stdio: 'inherit' } + }; + return new Promise((resolve, reject) => { + grunt.util.spawn(serverCmd, (error, result, code) => { if (error || code !== 0) { const message = result.stderr || result.stdout; grunt.log.error(message); - reject(); + return reject(); } grunt.log.writeln(result); @@ -43,12 +41,36 @@ module.exports = function (grunt) { }); } - grunt.registerTask('uiFramework:start', function () { - const done = this.async(); - const commands = [watcherCmd, serverCmd].map((cmd) => { - return Object.assign({ opts: { stdio: 'inherit' } }, cmd); + function uiFrameworkCompile() { + sass.render({ + file: 'ui_framework/components/index.scss' + }, function (error, result) { + if (error) { + grunt.log.error(error); + } + + postcss([postcssConfig]) + .process(result.css, { from: 'ui_framework/components/index.scss', to: 'ui_framework/dist/ui_framework.css' }) + .then(result => { + grunt.file.write('ui_framework/dist/ui_framework.css', result.css); + + if (result.map) { + grunt.file.write('ui_framework/dist/ui_framework.css.map', result.map); + } + }); }); + } - Promise.all(commands.map(spawn)).then(done); - }); + function uiFrameworkWatch() { + const debouncedCompile = debounce(uiFrameworkCompile, 400, { leading: true }); + + return new Promise((resolve, reject) => { + debouncedCompile(); + + chokidar.watch('ui_framework/components', { ignoreInitial: true }).on('all', (event, path) => { + grunt.log.writeln(event, path); + debouncedCompile(); + }); + }); + } }; diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index c35f1e5f7172d..9fefcdb09850b 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -16,7 +16,9 @@ body { .kuiButton { display: inline-block; /* 1 */ - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; cursor: pointer; padding: 4px 12px 5px; font-size: 14px; @@ -30,7 +32,8 @@ body { pointer-events: none; /* 2 */ } .kuiButton:active:enabled { - transform: translateY(1px); } + -webkit-transform: translateY(1px); + transform: translateY(1px); } .kuiButton:focus { z-index: 1; /* 1 */ @@ -98,8 +101,14 @@ body { /* 1 */ } .kuiButtonGroup { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - align-items: center; } + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } .kuiButtonGroup .kuiButton + .kuiButton { margin-left: 4px; } @@ -147,6 +156,7 @@ body { /* 2 */ font-size: 10px !important; /* 2 */ + -webkit-transition: background-color 0.1s linear; transition: background-color 0.1s linear; } .kuiCheckBox:before { position: relative; @@ -157,6 +167,7 @@ body { font-size: 1em; opacity: 0; color: #ffffff; + -webkit-transition: opacity 0.1s linear; transition: opacity 0.1s linear; } .kuiCheckBox:checked { border-color: #328CAA; @@ -175,7 +186,9 @@ body { cursor: not-allowed; } .kuiTextArea { - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; padding: 3px 12px 4px; font-size: 14px; font-weight: 400; @@ -184,6 +197,7 @@ body { border: 1px solid #DEDEDE; color: #191E23; border-radius: 4px; + -webkit-transition: border-color 0.1s linear; transition: border-color 0.1s linear; /** * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet. @@ -201,7 +215,9 @@ body { cursor: not-allowed; } .kuiTextInput { - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; padding: 3px 12px 4px; font-size: 14px; font-weight: 400; @@ -210,6 +226,7 @@ body { border: 1px solid #DEDEDE; color: #191E23; border-radius: 4px; + -webkit-transition: border-color 0.1s linear; transition: border-color 0.1s linear; /** * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet. @@ -280,8 +297,14 @@ body { * a bit. */ .kuiLocalBreadcrumbs { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; height: 100%; padding-left: 10px; /* 1 */ } @@ -290,7 +313,10 @@ body { margin-left: 6px; } .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before { content: '/'; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; margin-right: 4px; color: #5a5a5a; } .theme-dark .kuiLocalBreadcrumb + .kuiLocalBreadcrumb:before { @@ -325,7 +351,9 @@ body { background-color: #525252; } .kuiLocalDropdownCloseButton { - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; background-color: transparent; padding: 4px; border: none; @@ -342,10 +370,16 @@ body { color: #cecece; } .kuiLocalDropdownPanels { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .kuiLocalDropdownPanel { - flex: 1 1 0%; } + -webkit-box-flex: 1; + -webkit-flex: 1 1 0%; + -ms-flex: 1 1 0%; + flex: 1 1 0%; } .kuiLocalDropdownPanel--left { margin-right: 30px; } @@ -366,9 +400,18 @@ body { margin-bottom: 0; } .kuiLocalDropdownHeader { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; margin-bottom: 6px; } .kuiLocalDropdownHeader__label { @@ -379,6 +422,9 @@ body { color: #cecece; } .kuiLocalDropdownHeader__actions { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .kuiLocalDropdownHeader__action { @@ -434,13 +480,25 @@ body { color: #9e9e9e; } .kuiLocalMenu { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; height: 100%; } .kuiLocalMenuItem { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; height: 100%; padding: 0 10px; font-size: 14px; @@ -479,9 +537,19 @@ body { * dropdown. */ .kuiLocalNav { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - flex-direction: column; - justify-content: space-between; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; min-height: 70px; /* 1 */ color: #2d2d2d; @@ -491,9 +559,18 @@ body { background-color: #333333; } .kuiLocalNavRow { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - align-items: center; - justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; height: 32px; } .kuiLocalNavRow__section { @@ -504,12 +581,18 @@ body { padding: 0 10px; } .kuiLocalSearch { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; width: 100%; height: 30px; } .kuiLocalSearchInput { - flex: 1 1 100%; + -webkit-box-flex: 1; + -webkit-flex: 1 1 100%; + -ms-flex: 1 1 100%; + flex: 1 1 100%; padding: 5px 15px; font-size: 14px; color: #2d2d2d; @@ -547,8 +630,14 @@ body { * 1. We want the bottom border on selected tabs to be flush with the bottom of the container. */ .kuiLocalTabs { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - align-items: flex-end; + -webkit-box-align: end; + -webkit-align-items: flex-end; + -ms-flex-align: end; + align-items: flex-end; height: 100%; } /** @@ -580,8 +669,14 @@ body { color: #dedede; } .kuiLocalTitle { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; height: 100%; padding-left: 10px; font-size: 14px; @@ -595,7 +690,9 @@ body { .kuiMicroButton { display: inline-block; /* 1 */ - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; cursor: pointer; padding: 2px 5px; border: 1px solid transparent; @@ -608,6 +705,9 @@ body { color: #191E23; } .kuiMicroButtonGroup { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; } .kuiMicroButtonGroup .kuiMicroButton + .kuiMicroButton { margin-left: 2px; } @@ -622,9 +722,18 @@ body { border: 2px solid #E4E4E4; } .kuiPanel--centered { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - justify-content: center; - align-items: center; } + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; } /** * 1. Make seamless transition from ToolBar to Table header. @@ -659,7 +768,10 @@ body { * 1. Prevent rapid clicking from selecting text. */ .kuiTableHeaderCell--sortable { - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; /* 1 */ cursor: pointer; } .kuiTableHeaderCell--sortable:hover:not(.kuiTableHeaderCell-isSorted) .kuiTableSortIcon { @@ -716,6 +828,9 @@ body { line-height: 1; } .kuiTabs { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; border-bottom: 2px solid #E4E4E4; } @@ -723,7 +838,9 @@ body { * 1. Override button styles (some of which are from Bootstrap). */ .kuiTab { - appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; /* 1 */ cursor: pointer; padding: 10px 30px; @@ -756,8 +873,14 @@ body { cursor: default; } .kuiToolBar { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - justify-content: space-between; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; padding: 10px; height: 50px; background-color: #E4E4E4; } @@ -772,8 +895,14 @@ body { * 1. Put 10px of space between each child. */ .kuiToolBarSection { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; margin-left: 25px; margin-right: 25px; } .kuiToolBarSection:last-child { @@ -783,8 +912,14 @@ body { /* 1 */ } .kuiToolBarFooter { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - justify-content: space-between; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; padding: 10px; height: 40px; background-color: #ffffff; @@ -794,8 +929,14 @@ body { * 1. Put 10px of space between each child. */ .kuiToolBarFooterSection { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - align-items: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; margin-left: 25px; margin-right: 25px; } .kuiToolBarFooterSection:first-child { @@ -809,14 +950,23 @@ body { /* 1 */ } .kuiToolBarSearch { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; display: flex; - flex: 1 1 auto; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; max-width: 800px; line-height: 1.5; margin-right: 25px; } .kuiToolBarSearchBox { - flex: 1 1 auto; + -webkit-box-flex: 1; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; position: relative; } .kuiToolBarSearchBox__icon {