first (s)css for the bootrap-table theme

src/themes/bootstrap-table/bootstrap-table.js

@@ -0,0 +1,65 @@
+/**
+ * @author zhixin wen <wenzhixin2010@gmail.com>
+ * https://github.com/wenzhixin/bootstrap-table/
+ * theme: https://github.com/jgthms/bulma/
+ */
+
+$.fn.bootstrapTable.theme = 'bootstrap-table'
+
+$.extend($.fn.bootstrapTable.defaults, {
+  iconsPrefix: 'icon',
+  icons: {
+    paginationSwitchDown: 'grid_on',
+    paginationSwitchUp: 'grid_off',
+    refresh: 'icon-refresh-cw',
+    toggleOff: 'icon-toggle-right',
+    toggleOn: 'icon-toggle-right',
+    columns: 'icon-list',
+    detailOpen: 'add',
+    detailClose: 'remove',
+    fullscreen: 'icon-maximize',
+    clearSearch: 'icon-trash-2'
+  }
+})
+
+$.BootstrapTable = class extends $.BootstrapTable {
+  initConstants () {
+    super.initConstants()
+
+    this.constants.html.inputGroup = '<div class="input-group">%s%s</div>'
+  }
+
+
+  initToolbar () {
+    super.initToolbar()
+    this.handleToolbar()
+  }
+
+  handleToolbar () {
+    if (this.$toolbar.find('.dropdown').length) {
+      this._initDropdown()
+    }
+  }
+
+  initPagination () {
+    super.initPagination()
+    if (this.options.pagination && !this.options.onlyInfoPagination) {
+      this._initDropdown()
+    }
+  }
+
+  _initDropdown () {
+    const $dropdowns = this.$container.find('.dropdown:not(.is-hoverable)')
+
+    $dropdowns.off('click').on('click', e => {
+      const $this = $(e.currentTarget)
+      e.stopPropagation()
+      $dropdowns.not($this).removeClass('is-active')
+      $this.toggleClass('is-active')
+    })
+
+    $(document).off('click.bs.dropdown.bulma').on('click.bs.dropdown.bulma', () => {
+      $dropdowns.removeClass('is-active')
+    })
+  }
+}

src/themes/bootstrap-table/bootstrap-table.scss

@@ -0,0 +1,109 @@
+/**
+ * @author Dustin Utecht
+ * https://github.com/wenzhixin/bootstrap-table/
+ */
+@import './variables.scss';
+@import './font.css';
+
+.bootstrap-table {
+  input {
+    border-radius: 4px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 6px 12px;
+  }
+
+  .btn {
+    border-radius: 4px;
+    background-color: $btn-background;
+    border: 1px solid $btn-border;
+    padding: 6px 12px;
+    outline: none;
+  }
+
+  .btn-group {
+    .btn, input {
+      &:not(:first-child):not(:last-child) {
+        border-radius: 0;
+      }
+
+      &:first-child {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:last-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+
+  .input-group {
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  table {
+    border-collapse: collapse;
+
+    &.table-bordered {
+      thead tr th, tbody tr td {
+        border: 1px solid #ddd;
+      }
+
+      tbody tr td {
+        padding: 8px;
+      }
+    }
+  }
+
+  .float-right {
+    float: right
+  }
+
+  .pagination-detail {
+    float: left;
+  }
+
+  .pagination {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    list-style: none;
+
+    .page-item {
+      border: 1px solid $border-color;
+      background-color: $btn-background;
+      border-radius: 4px;
+      margin: 2px;
+      padding: 5px 2px 5px 2px;
+
+      .page-link {
+        color: $color;
+        text-decoration: none;
+        outline: none;
+      }
+
+      &.active {
+        background-color: $btn-active-background;
+
+        .page-link {
+          color: white;
+        }
+
+        &:hover {
+          background-color: $btn-active-background-hover;
+        }
+      }
+    }
+  }
+}

src/themes/bootstrap-table/font.scss

@@ -0,0 +1,50 @@
+@font-face {
+  font-family: 'bootstrap-table';
+  src:  url('fonts/bootstrap-table.eot?azu32x');
+  src:  url('fonts/bootstrap-table.eot?azu32x#iefix') format('embedded-opentype'),
+  url('fonts/bootstrap-table.ttf?azu32x') format('truetype'),
+  url('fonts/bootstrap-table.woff?azu32x') format('woff'),
+  url('fonts/bootstrap-table.svg?azu32x#bootstrap-table') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+.icon {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'bootstrap-table' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-chevron-left:before {
+  content: "\e900";
+}
+.icon-chevron-right:before {
+  content: "\e901";
+}
+.icon-list:before {
+  content: "\e902";
+}
+.icon-maximize:before {
+  content: "\1f5ce";
+}
+.icon-move:before {
+  content: "\e903";
+}
+.icon-refresh-cw:before {
+  content: "\e904";
+}
+.icon-toggle-right:before {
+  content: "\e905";
+}
+.icon-trash-2:before {
+  content: "\e906";
+}

src/themes/bootstrap-table/variables.scss

@@ -0,0 +1,8 @@
+$border-color: #dbdbdb;
+$color: #363636;
+
+//Buttons
+$btn-background: #fff;
+$btn-border: #ccc;
+$btn-active-background: #3679e4;
+$btn-active-background-hover: darken($btn-active-background, 10);