[UI Framework][K7]: Pagination, ButtonIcon, HorizontalRule components (…

…#13631) * add kuiButtonIcon, kuiHorizontalRule and kuiPagination * horizontal rule sizing and margins * responsive pagination, documentation * clean up styling of pagination * Refine KuiPagination component. Add KuiPaginationButton. * address feedback, cleanup styling
elastic · Aug 24, 2017 · 590578f · 590578f
1 parent d4767e6
commit 590578f
Show file tree

Hide file tree

Showing 42 changed files with 1,314 additions and 4 deletions.
diff --git a/ui_framework/dist/ui_framework_theme_dark.css b/ui_framework/dist/ui_framework_theme_dark.css
@@ -657,6 +657,69 @@ table {
   border-right: none;
   padding-right: 0; }
 
+.kuiButtonIcon {
+  display: inline-block;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  height: 40px;
+  text-decoration: none;
+  border: solid 1px transparent;
+  text-align: center;
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
+  whitespace: nowrap;
+  border-color: transparent;
+  background-color: transparent;
+  box-shadow: none;
+  height: 32px;
+  width: 32px; }
+  .kuiButtonIcon:hover, .kuiButtonIcon:focus {
+    text-decoration: underline; }
+  .kuiButtonIcon:focus {
+    -webkit-animation: kuiButtonFocus 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
+            animation: kuiButtonFocus 250ms cubic-bezier(0.34, 1.61, 0.7, 1); }
+  .kuiButtonIcon .kuiButtonIcon__icon {
+    -webkit-transform: translateY(-2px);
+            transform: translateY(-2px); }
+  .kuiButtonIcon:disabled {
+    color: #313131;
+    pointer-events: none; }
+    .kuiButtonIcon:disabled .kuiButtonIcon__icon {
+      fill: #313131; }
+    .kuiButtonIcon:disabled:hover, .kuiButtonIcon:disabled:focus {
+      background-color: #222;
+      text-decoration: none; }
+
+.kuiButtonIcon--primary {
+  color: #4da1c0; }
+  .kuiButtonIcon--primary .kuiButtonIcon__icon {
+    fill: #4da1c0; }
+  .kuiButtonIcon--primary:focus {
+    background-color: rgba(77, 161, 192, 0.1); }
+  .kuiButtonIcon--primary:hover, .kuiButtonIcon--primary:focus {
+    background-color: rgba(77, 161, 192, 0.1); }
+
+.kuiButtonIcon--danger {
+  color: #bf4d4d; }
+  .kuiButtonIcon--danger .kuiButtonIcon__icon {
+    fill: #bf4d4d; }
+  .kuiButtonIcon--danger:focus {
+    background-color: rgba(191, 77, 77, 0.1); }
+  .kuiButtonIcon--danger:hover, .kuiButtonIcon--danger:focus {
+    background-color: rgba(191, 77, 77, 0.1); }
+
+.kuiButtonIcon--disabled {
+  color: #313131; }
+  .kuiButtonIcon--disabled .kuiButtonIcon__icon {
+    fill: #313131; }
+  .kuiButtonIcon--disabled:focus {
+    background-color: rgba(49, 49, 49, 0.1); }
+  .kuiButtonIcon--disabled:hover, .kuiButtonIcon--disabled:focus {
+    background-color: rgba(49, 49, 49, 0.1);
+    cursor: not-allowed; }
+
 .kuiCallOut {
   padding: 16px;
   border-left: 2px solid transparent; }
@@ -923,6 +986,21 @@ table {
     -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end; }
+  .kuiFlexGroup.kuiFlexGroup--alignItemsStart {
+    -webkit-box-align: start;
+    -webkit-align-items: flex-start;
+        -ms-flex-align: start;
+            align-items: flex-start; }
+  .kuiFlexGroup.kuiFlexGroup--alignItemsCenter {
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center; }
+  .kuiFlexGroup.kuiFlexGroup--alignItemsFlexEnd {
+    -webkit-box-align: end;
+    -webkit-align-items: flex-end;
+        -ms-flex-align: end;
+            align-items: flex-end; }
 
 .kuiFlexGroup--gutterSmall {
   margin: -4px; }
@@ -1684,6 +1762,36 @@ table {
   left: auto;
   right: 0; }
 
+.kuiHorizontalRule {
+  border: none;
+  height: 1px;
+  background-color: #444; }
+  .kuiHorizontalRule.kuiHorizontalRule--full {
+    width: 100%; }
+  .kuiHorizontalRule.kuiHorizontalRule--half {
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto; }
+  .kuiHorizontalRule.kuiHorizontalRule--quarter {
+    width: 25%;
+    margin-left: auto;
+    margin-right: auto; }
+
+.kuiHorizontalRule--marginSmall {
+  margin: 8px 0; }
+
+.kuiHorizontalRule--marginMedium {
+  margin: 12px 0; }
+
+.kuiHorizontalRule--marginLarge {
+  margin: 24px 0; }
+
+.kuiHorizontalRule--marginXLarge {
+  margin: 32px 0; }
+
+.kuiHorizontalRule--marginXXLarge {
+  margin: 40px 0; }
+
 .kuiIcon {
   display: inline-block;
   vertical-align: middle;
@@ -2289,6 +2397,45 @@ table {
       margin-left: 0;
       margin-top: 16px; } }
 
+.kuiPagination {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center; }
+
+.kuiPaginationButton {
+  font-size: 14px;
+  padding: 0;
+  height: 24px;
+  min-width: 32px;
+  text-align: center;
+  color: #F5F5F5; }
+  .kuiPaginationButton svg {
+    fill: #F5F5F5 !important; }
+  .kuiPaginationButton:not(:focus):hover {
+    background-color: transparent; }
+
+.kuiPaginationButton-isActive {
+  pointer-events: none;
+  background-color: #4da1c0;
+  color: #222;
+  border-radius: 4px; }
+  .kuiPaginationButton-isActive:focus {
+    background-color: #4da1c0;
+    color: #222; }
+
+.kuiPaginationButton-isPlaceholder {
+  pointer-events: none;
+  color: #555; }
+
+@media only screen and (max-width: 768px) {
+  .kuiPaginationButton--hideOnMobile {
+    display: none; } }
+
 .kuiPopover {
   display: inline-block;
   position: relative; }

diff --git a/ui_framework/dist/ui_framework_theme_light.css b/ui_framework/dist/ui_framework_theme_light.css
@@ -657,6 +657,69 @@ table {
   border-right: none;
   padding-right: 0; }
 
+.kuiButtonIcon {
+  display: inline-block;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  height: 40px;
+  text-decoration: none;
+  border: solid 1px transparent;
+  text-align: center;
+  font-family: "Roboto", Helvetica, Arial, sans-serif;
+  transition: all 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
+  whitespace: nowrap;
+  border-color: transparent;
+  background-color: transparent;
+  box-shadow: none;
+  height: 32px;
+  width: 32px; }
+  .kuiButtonIcon:hover, .kuiButtonIcon:focus {
+    text-decoration: underline; }
+  .kuiButtonIcon:focus {
+    -webkit-animation: kuiButtonFocus 250ms cubic-bezier(0.34, 1.61, 0.7, 1);
+            animation: kuiButtonFocus 250ms cubic-bezier(0.34, 1.61, 0.7, 1); }
+  .kuiButtonIcon .kuiButtonIcon__icon {
+    -webkit-transform: translateY(-2px);
+            transform: translateY(-2px); }
+  .kuiButtonIcon:disabled {
+    color: #c5c5c5;
+    pointer-events: none; }
+    .kuiButtonIcon:disabled .kuiButtonIcon__icon {
+      fill: #c5c5c5; }
+    .kuiButtonIcon:disabled:hover, .kuiButtonIcon:disabled:focus {
+      background-color: #FFF;
+      text-decoration: none; }
+
+.kuiButtonIcon--primary {
+  color: #0079a5; }
+  .kuiButtonIcon--primary .kuiButtonIcon__icon {
+    fill: #0079a5; }
+  .kuiButtonIcon--primary:focus {
+    background-color: rgba(0, 121, 165, 0.1); }
+  .kuiButtonIcon--primary:hover, .kuiButtonIcon--primary:focus {
+    background-color: rgba(0, 121, 165, 0.1); }
+
+.kuiButtonIcon--danger {
+  color: #A30000; }
+  .kuiButtonIcon--danger .kuiButtonIcon__icon {
+    fill: #A30000; }
+  .kuiButtonIcon--danger:focus {
+    background-color: rgba(163, 0, 0, 0.1); }
+  .kuiButtonIcon--danger:hover, .kuiButtonIcon--danger:focus {
+    background-color: rgba(163, 0, 0, 0.1); }
+
+.kuiButtonIcon--disabled {
+  color: #c5c5c5; }
+  .kuiButtonIcon--disabled .kuiButtonIcon__icon {
+    fill: #c5c5c5; }
+  .kuiButtonIcon--disabled:focus {
+    background-color: rgba(197, 197, 197, 0.1); }
+  .kuiButtonIcon--disabled:hover, .kuiButtonIcon--disabled:focus {
+    background-color: rgba(197, 197, 197, 0.1);
+    cursor: not-allowed; }
+
 .kuiCallOut {
   padding: 16px;
   border-left: 2px solid transparent; }
@@ -923,6 +986,21 @@ table {
     -webkit-justify-content: flex-end;
         -ms-flex-pack: end;
             justify-content: flex-end; }
+  .kuiFlexGroup.kuiFlexGroup--alignItemsStart {
+    -webkit-box-align: start;
+    -webkit-align-items: flex-start;
+        -ms-flex-align: start;
+            align-items: flex-start; }
+  .kuiFlexGroup.kuiFlexGroup--alignItemsCenter {
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+        -ms-flex-align: center;
+            align-items: center; }
+  .kuiFlexGroup.kuiFlexGroup--alignItemsFlexEnd {
+    -webkit-box-align: end;
+    -webkit-align-items: flex-end;
+        -ms-flex-align: end;
+            align-items: flex-end; }
 
 .kuiFlexGroup--gutterSmall {
   margin: -4px; }
@@ -1684,6 +1762,36 @@ table {
   left: auto;
   right: 0; }
 
+.kuiHorizontalRule {
+  border: none;
+  height: 1px;
+  background-color: #D9D9D9; }
+  .kuiHorizontalRule.kuiHorizontalRule--full {
+    width: 100%; }
+  .kuiHorizontalRule.kuiHorizontalRule--half {
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto; }
+  .kuiHorizontalRule.kuiHorizontalRule--quarter {
+    width: 25%;
+    margin-left: auto;
+    margin-right: auto; }
+
+.kuiHorizontalRule--marginSmall {
+  margin: 8px 0; }
+
+.kuiHorizontalRule--marginMedium {
+  margin: 12px 0; }
+
+.kuiHorizontalRule--marginLarge {
+  margin: 24px 0; }
+
+.kuiHorizontalRule--marginXLarge {
+  margin: 32px 0; }
+
+.kuiHorizontalRule--marginXXLarge {
+  margin: 40px 0; }
+
 .kuiIcon {
   display: inline-block;
   vertical-align: middle;
@@ -2289,6 +2397,45 @@ table {
       margin-left: 0;
       margin-top: 16px; } }
 
+.kuiPagination {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center; }
+
+.kuiPaginationButton {
+  font-size: 14px;
+  padding: 0;
+  height: 24px;
+  min-width: 32px;
+  text-align: center;
+  color: #3F3F3F; }
+  .kuiPaginationButton svg {
+    fill: #3F3F3F !important; }
+  .kuiPaginationButton:not(:focus):hover {
+    background-color: transparent; }
+
+.kuiPaginationButton-isActive {
+  pointer-events: none;
+  background-color: #0079a5;
+  color: #FFF;
+  border-radius: 4px; }
+  .kuiPaginationButton-isActive:focus {
+    background-color: #0079a5;
+    color: #FFF; }
+
+.kuiPaginationButton-isPlaceholder {
+  pointer-events: none;
+  color: #999; }
+
+@media only screen and (max-width: 768px) {
+  .kuiPaginationButton--hideOnMobile {
+    display: none; } }
+
 .kuiPopover {
   display: inline-block;
   position: relative; }

diff --git a/ui_framework/doc_site/src/services/routes/routes.js b/ui_framework/doc_site/src/services/routes/routes.js
@@ -27,6 +27,9 @@ import IconExample
 import HeaderExample
   from '../../views/header/header_example';
 
+import HorizontalRuleExample
+  from '../../views/horizontal_rule/horizontal_rule_example';
+
 import KeyPadMenuExample
   from '../../views/key_pad_menu/key_pad_menu_example';
 
@@ -42,6 +45,9 @@ import ModalExample
 import PageExample
   from '../../views/page/page_example';
 
+import PaginationExample
+  from '../../views/pagination/pagination_example';
+
 import LoadingExample
   from '../../views/loading/loading_example';
 
@@ -96,6 +102,10 @@ const components = [{
   name: 'Header',
   component: HeaderExample,
   hasReact: true,
+}, {
+  name: 'HorizontalRule',
+  component: HorizontalRuleExample,
+  hasReact: true,
 }, {
   name: 'Icon',
   component: IconExample,
@@ -120,6 +130,10 @@ const components = [{
   name: 'Page',
   component: PageExample,
   hasReact: true,
+}, {
+  name: 'Pagination',
+  component: PaginationExample,
+  hasReact: true,
 }, {
   name: 'Popover',
   component: PopoverExample,