diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less index d7e11e6a39f5a..c9907d7fbd58e 100644 --- a/src/ui/public/styles/base.less +++ b/src/ui/public/styles/base.less @@ -603,6 +603,33 @@ fieldset { font-size: 14px; } +.kuiVerticalRhythm { + & + & { + margin-top: 10px; + } +} + +.kuiView { + background-color: #FFFFFF; + flex: 1 1 auto; +} + +.kuiViewContent { + padding-top: 20px; + padding-bottom: 20px; +} + +.kuiViewContent--constrainedWidth { + max-width: 1100px; + margin-left: auto; + margin-right: auto; +} + +.kuiViewContentItem { + padding-left: 20px; + padding-right: 20px; +} + .kuiPage { padding: 20px 30px 28px; margin: 20px; @@ -825,13 +852,6 @@ fieldset { cursor: pointer; } -/** - * 1. Override checkbox styles. - */ -.kuiCheckbox { - cursor: default; -} - .kuiFormPanel { border: 1px solid #D4D4D4; padding: 12px; diff --git a/src/ui_framework/components/button/_button.scss b/src/ui_framework/components/button/_button.scss index c6c063f2b2997..e342507efbdce 100644 --- a/src/ui_framework/components/button/_button.scss +++ b/src/ui_framework/components/button/_button.scss @@ -32,13 +32,21 @@ } } +/** + * 1. Override Bootstrap. + */ .kuiButton--basic { color: #5a5a5a; background-color: #F2F2F2; + // Goes before hover, so that hover can override it. + &:focus { + color: #5a5a5a !important; /* 1 */ + } + &:hover:enabled, &:active:enabled { - color: #ffffff; + color: #ffffff !important; /* 1 */ background-color: #9B9B9B; } @@ -47,6 +55,9 @@ } } +/** + * 1. Override Bootstrap. + */ .kuiButton--primary { color: #FFFFFF; background-color: #6EADC1; @@ -60,6 +71,10 @@ &:disabled { background-color: #B6D6E0; } + + &:focus { + color: #FFFFFF !important; /* 1 */ + } } .kuiButton--danger { @@ -76,8 +91,12 @@ background-color: #efc0ba; } + /** + * 1. Override Bootstrap. + */ &:focus { @include focus(#ff523c); + color: #FFFFFF !important; /* 1 */ } } diff --git a/src/ui_framework/components/form/_check_box.scss b/src/ui_framework/components/form/_check_box.scss index 4f4cd9a1ad1b8..8b165df41e4e7 100644 --- a/src/ui_framework/components/form/_check_box.scss +++ b/src/ui_framework/components/form/_check_box.scss @@ -2,6 +2,7 @@ * 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 */ @@ -10,7 +11,11 @@ border-radius: $buttonBorderRadius; width: 16px; height: 16px; - line-height: $lineHeight; + line-height: $lineHeight !important; /* 2 */ + margin: 0 !important; /* 2 */ + font: $font !important; /* 2 */ + font-family: $font !important; /* 2 */ + font-size: 10px !important; /* 2 */ transition: background-color $formTransitionTiming; &:before { diff --git a/src/ui_framework/components/index.scss b/src/ui_framework/components/index.scss index 0e4dacee7266f..8e208f85ef7db 100644 --- a/src/ui_framework/components/index.scss +++ b/src/ui_framework/components/index.scss @@ -19,6 +19,7 @@ $inputBackgroundColor--darkTheme: #444444; $inputBorderColor--darkTheme: $inputBackgroundColor--darkTheme; // Font +$font: "Open Sans", Helvetica, Arial, sans-serif; $fontSize: 14px; $lineHeight: 1.5; @@ -31,6 +32,8 @@ $warningColor: #ffac15; $errorColor: #D86051; $fontColor: #191E23; $subduedFontColor: #9fa3a7; +$linkColor: #3CAED2; +$linkHoverColor: #006E8A; $panelColor: #E4E4E4; $selectedBorderColor: #6EADC1; $errorBorderColor: $errorColor; @@ -49,11 +52,12 @@ $formTransitionTiming: 0.1s linear; /** * 1. Make sure outline doesn't get hidden beneath adjacent elements. + * 2. Override inherited styles (possibly from Bootstrap). */ @mixin focus($color: #6EADC1) { z-index: 1; /* 1 */ - outline: 1px solid $color; - outline-offset: 2px; + outline: 1px solid $color !important; /* 2 */ + outline-offset: 2px !important; /* 2 */ } * { @@ -61,7 +65,7 @@ $formTransitionTiming: 0.1s linear; } body { - font-family: "Open Sans", Helvetica, Arial, sans-serif; + font-family: $font; } @import "button/index"; @@ -72,4 +76,5 @@ body { @import "no_results/index"; @import "panel/index"; @import "table/index"; +@import "tabs/index"; @import "tool_bar/index"; diff --git a/src/ui_framework/components/link/_link.scss b/src/ui_framework/components/link/_link.scss index 2a374d19f83f0..714ede2c05401 100644 --- a/src/ui_framework/components/link/_link.scss +++ b/src/ui_framework/components/link/_link.scss @@ -1,5 +1,5 @@ .kuiLink { - color: #3CAED2; + color: $linkColor; text-decoration: none; &:visited, @@ -8,7 +8,7 @@ } &:hover { - color: #006E8A; + color: $linkHoverColor; text-decoration: underline; } } diff --git a/src/ui_framework/components/table/_table.scss b/src/ui_framework/components/table/_table.scss index a1e32daa47daf..e789fa3357bd5 100644 --- a/src/ui_framework/components/table/_table.scss +++ b/src/ui_framework/components/table/_table.scss @@ -15,6 +15,7 @@ width: 100%; border: $tableBorder; border-collapse: collapse; + background-color: #FFFFFF; } .kuiTableHeaderCell { @@ -40,6 +41,7 @@ pointer-events: none; } + .kuiTableRowCell { @include tableCell; color: $fontColor; @@ -52,11 +54,33 @@ text-overflow: ellipsis; } +.kuiTableRowCell--alignRight { + text-align: right; + + .kuiTableRowCell__liner { + text-align: right; + } +} + +.kuiTableRowCell--actions { + padding-top: 0; + padding-bottom: 0; + + /** + * 1. We don't want to clip the focused state of buttons. + */ + .kuiTableRowCell__liner { + overflow: visible; /* 1 */ + } +} + /** * 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; } diff --git a/src/ui_framework/components/tabs/_index.scss b/src/ui_framework/components/tabs/_index.scss new file mode 100644 index 0000000000000..17332099a40ec --- /dev/null +++ b/src/ui_framework/components/tabs/_index.scss @@ -0,0 +1 @@ +@import "tabs"; diff --git a/src/ui_framework/components/tabs/_tabs.scss b/src/ui_framework/components/tabs/_tabs.scss new file mode 100644 index 0000000000000..080d81254d0a4 --- /dev/null +++ b/src/ui_framework/components/tabs/_tabs.scss @@ -0,0 +1,41 @@ +.kuiTabs { + display: flex; +} + + /** + * 1. Override button styles (some of which are from Bootstrap). + */ + .kuiTab { + appearance: none; /* 1 */ + cursor: pointer; + padding: 10px 30px; + font-size: 14px; + color: $subduedFontColor; + background-color: #ffffff; /* 1 */ + border: 1px solid #ffffff; + border-radius: 0; /* 1 */ + + &:focus { + color: $linkColor; + border-color: $selectedBorderColor; + outline: none !important; /* 1 */ + } + + &:hover:not(.kuiTab-isSelected) { + color: $linkHoverColor; + } + + &:active { + outline: none; + border-color: #ffffff; + box-shadow: none; /* 1 */ + color: $linkColor !important; + } + + &.kuiTab-isSelected { + color: $fontColor; + background-color: #F2F2F2; + border-color: #F2F2F2; + cursor: default; + } + } diff --git a/src/ui_framework/components/tool_bar/_tool_bar_search.scss b/src/ui_framework/components/tool_bar/_tool_bar_search.scss index d66708273f539..1ae21751b8bf0 100644 --- a/src/ui_framework/components/tool_bar/_tool_bar_search.scss +++ b/src/ui_framework/components/tool_bar/_tool_bar_search.scss @@ -19,6 +19,9 @@ color: #ACACAC; } + /** + * 1. Fix inherited styles (possibly from Bootstrap). + */ .kuiToolBarSearchBox__input { width: 100%; min-width: 200px; @@ -28,6 +31,8 @@ border: 1px solid #FFFFFF; border-radius: $buttonBorderRadius; font-size: $fontSize; + border: none; /* 1 */ + line-height: normal; /* 1 */ &:focus { @include focus; diff --git a/src/ui_framework/doc_site/src/services/routes/Routes.js b/src/ui_framework/doc_site/src/services/routes/Routes.js index 2e0874bde5f01..ed8e0faca5dd6 100644 --- a/src/ui_framework/doc_site/src/services/routes/Routes.js +++ b/src/ui_framework/doc_site/src/services/routes/Routes.js @@ -19,6 +19,9 @@ import LocalNavExample import TableExample from '../../views/table/table_example.jsx'; +import TabsExample + from '../../views/tabs/tabs_example.jsx'; + import ToolBarExample from '../../views/tool_bar/tool_bar_example.jsx'; @@ -41,6 +44,9 @@ const components = [{ }, { name: 'Table', component: TableExample, +}, { + name: 'Tabs', + component: TabsExample, }, { name: 'ToolBar', component: ToolBarExample, diff --git a/src/ui_framework/doc_site/src/views/form/check_box.html b/src/ui_framework/doc_site/src/views/form/check_box.html index 9aa4102aa5b19..ac81104ba5b02 100644 --- a/src/ui_framework/doc_site/src/views/form/check_box.html +++ b/src/ui_framework/doc_site/src/views/form/check_box.html @@ -1 +1,3 @@ + + diff --git a/src/ui_framework/doc_site/src/views/table/controlled_table.html b/src/ui_framework/doc_site/src/views/table/controlled_table.html index 3b75b1f725663..fa215080f5a7f 100644 --- a/src/ui_framework/doc_site/src/views/table/controlled_table.html +++ b/src/ui_framework/doc_site/src/views/table/controlled_table.html @@ -59,13 +59,12 @@ Date created - Date last modified - + @@ -80,14 +79,19 @@ Tue Dec 06 2016 12:56:15 GMT-0800 (PST) - +
- Tue Dec 06 2016 12:56:15 GMT-0800 (PST) + +
- + @@ -102,14 +106,19 @@ Tue Dec 06 2016 12:56:15 GMT-0800 (PST) - +
- Tue Dec 06 2016 12:56:15 GMT-0800 (PST) + +
- + @@ -124,14 +133,19 @@ Tue Dec 06 2016 12:56:15 GMT-0800 (PST) - +
- Tue Dec 06 2016 12:56:15 GMT-0800 (PST) + +
- + @@ -146,9 +160,9 @@ Tue Dec 06 2016 12:56:15 GMT-0800 (PST) - +
- Tue Dec 06 2016 12:56:15 GMT-0800 (PST) + (Unavailable)
@@ -157,6 +171,12 @@
+
+
+ 5 Items selected +
+
+
1 – 20 of 33 diff --git a/src/ui_framework/doc_site/src/views/table/table.html b/src/ui_framework/doc_site/src/views/table/table.html index a4306752f224b..536bcf0e08b84 100644 --- a/src/ui_framework/doc_site/src/views/table/table.html +++ b/src/ui_framework/doc_site/src/views/table/table.html @@ -24,7 +24,7 @@ - + @@ -46,7 +46,7 @@ - + @@ -68,7 +68,7 @@ - + @@ -90,7 +90,7 @@ - + diff --git a/src/ui_framework/doc_site/src/views/tabs/tabs.html b/src/ui_framework/doc_site/src/views/tabs/tabs.html new file mode 100644 index 0000000000000..f54b4034c5d23 --- /dev/null +++ b/src/ui_framework/doc_site/src/views/tabs/tabs.html @@ -0,0 +1,29 @@ +
+ + + + + + + +
diff --git a/src/ui_framework/doc_site/src/views/tabs/tabs.js b/src/ui_framework/doc_site/src/views/tabs/tabs.js new file mode 100644 index 0000000000000..a5076b6c4e4a3 --- /dev/null +++ b/src/ui_framework/doc_site/src/views/tabs/tabs.js @@ -0,0 +1,17 @@ +const $tabs = $('.kuiTab'); +let $selectedTab = undefined; + +function selectTab(tab) { + if ($selectedTab) { + $selectedTab.removeClass('kuiTab-isSelected'); + } + + $selectedTab = $(tab); + $selectedTab.addClass('kuiTab-isSelected'); +} + +$tabs.on('click', event => { + selectTab(event.target); +}); + +selectTab($tabs[0]); diff --git a/src/ui_framework/doc_site/src/views/tabs/tabs_example.jsx b/src/ui_framework/doc_site/src/views/tabs/tabs_example.jsx new file mode 100644 index 0000000000000..bdeabee6f4fea --- /dev/null +++ b/src/ui_framework/doc_site/src/views/tabs/tabs_example.jsx @@ -0,0 +1,12 @@ +import React from 'react'; + +import { + createExample, +} from '../../services'; + +export default createExample([{ + title: 'Tabs', + html: require('./tabs.html'), + js: require('raw!./tabs.js'), + hasDarkTheme: false, +}]); diff --git a/src/ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.html b/src/ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.html index 130df4efd60d3..60ca58a7fcbeb 100644 --- a/src/ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.html +++ b/src/ui_framework/doc_site/src/views/tool_bar/tool_bar_footer.html @@ -1,7 +1,7 @@
- 5 items selected + 5 Items selected