Просмотр исходного кода

add reboot-bootstrap-tables.scss to reset .table-dark

Yuki Takei 5 лет назад
Родитель
Сommit
528867f9fc

+ 3 - 2
src/client/styles/scss/theme/_apply-colors.scss

@@ -37,12 +37,13 @@ $nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
 @import '../mixins';
-@import 'mixins-for-tables';
 @import 'mixins/list-group';
+@import 'mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
-@import 'reboot-toastr-colors';
+@import 'reboot-bootstrap-tables';
 @import 'reboot-bootstrap-nav';
+@import 'reboot-toastr-colors';
 
 :not(pre) {
   > code {

+ 0 - 34
src/client/styles/scss/theme/_mixins-for-tables.scss

@@ -1,34 +0,0 @@
-//== Table
-$table-variants: (
-  'light': $light,
-  'dark': $dark,
-);
-
-// remove when master version is released
-// show https://github.com/twbs/bootstrap/blob/28cb1ff2b23253293601c51aff434c39b461025e/scss/mixins/_table-variants.scss
-@mixin table-variant($state, $background) {
-  .table-#{$state} {
-    $table-hover-bg-factor: 0.075 !default;
-    $table-striped-bg-factor: 0.05 !default;
-    $body-bg: $white !default;
-    $table-active-bg-factor: 0.1 !default;
-    $table-border-factor: 0.1 !default;
-
-    $color: color-contrast(mix(rgba($background, 1), $body-bg, opacity($background) * 100));
-    $color: gray;
-    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
-    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
-    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
-
-    --bs-table-bg: #{$background};
-    --bs-table-striped-bg: #{$striped-bg};
-    --bs-table-striped-color: #{color-contrast($striped-bg)};
-    --bs-table-active-bg: #{$active-bg};
-    --bs-table-active-color: #{color-contrast($active-bg)};
-    --bs-table-hover-bg: #{$hover-bg};
-    --bs-table-hover-color: #{color-contrast($hover-bg)};
-
-    color: $color;
-    border-color: mix($color, $background, percentage($table-border-factor));
-  }
-}

+ 36 - 0
src/client/styles/scss/theme/_reboot-bootstrap-tables.scss

@@ -0,0 +1,36 @@
+//
+//
+// Apply partially
+//   https://github.com/twbs/bootstrap/blob/v4.5.0/scss/_tables.scss
+//
+//
+
+.table-dark {
+  color: $table-dark-color;
+  background-color: $table-dark-bg;
+
+  th,
+  td,
+  thead th {
+    border-color: $table-dark-border-color;
+  }
+
+  &.table-bordered {
+    border: 0;
+  }
+
+  &.table-striped {
+    tbody tr:nth-of-type(#{$table-striped-order}) {
+      background-color: $table-dark-accent-bg;
+    }
+  }
+
+  &.table-hover {
+    tbody tr {
+      @include hover() {
+        color: $table-dark-hover-color;
+        background-color: $table-dark-hover-bg;
+      }
+    }
+  }
+}

+ 0 - 4
src/client/styles/scss/theme/_reboot-bootstrap-theme-colors.scss

@@ -75,7 +75,3 @@ $theme-colors: map-merge($theme-colors, $colors);
     background: $color;
   }
 }
-
-@each $color, $value in $table-variants {
-  @include table-variant($color, $value);
-}

+ 34 - 0
src/client/styles/scss/theme/mixins/_tables.scss

@@ -0,0 +1,34 @@
+//== Table
+// $table-variants: (
+//   'light': $light,
+//   'dark': $dark,
+// );
+
+// remove when master version is released
+// show https://github.com/twbs/bootstrap/blob/28cb1ff2b23253293601c51aff434c39b461025e/scss/mixins/_table-variants.scss
+// @mixin table-variant($state, $background) {
+//   .table-#{$state} {
+//     $table-hover-bg-factor: 0.075 !default;
+//     $table-striped-bg-factor: 0.05 !default;
+//     $body-bg: $white !default;
+//     $table-active-bg-factor: 0.1 !default;
+//     $table-border-factor: 0.1 !default;
+
+//     $color: color-contrast(mix(rgba($background, 1), $body-bg, opacity($background) * 100));
+//     $color: gray;
+//     $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+//     $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+//     $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+
+//     --bs-table-bg: #{$background};
+//     --bs-table-striped-bg: #{$striped-bg};
+//     --bs-table-striped-color: #{color-contrast($striped-bg)};
+//     --bs-table-active-bg: #{$active-bg};
+//     --bs-table-active-color: #{color-contrast($active-bg)};
+//     --bs-table-hover-bg: #{$hover-bg};
+//     --bs-table-hover-color: #{color-contrast($hover-bg)};
+
+//     color: $color;
+//     border-color: mix($color, $background, percentage($table-border-factor));
+//   }
+// }