rewrite bootstrap modules

apps/app/src/styles/bootstrap/_apply.scss

@@ -1,11 +1,13 @@
 @use 'init' as *;
 
 // apply bootstrap
+
+// Layout & components
 @import 'bootstrap/scss/root';
 @import 'bootstrap/scss/reboot';
 @import 'bootstrap/scss/type';
 @import 'bootstrap/scss/images';
-@import 'bootstrap/scss/code';
+@import 'bootstrap/scss/containers';
 @import 'bootstrap/scss/grid';
 @import 'bootstrap/scss/tables';
 @import 'bootstrap/scss/forms';
@@ -13,18 +15,15 @@
 @import 'bootstrap/scss/transitions';
 @import 'bootstrap/scss/dropdown';
 @import 'bootstrap/scss/button-group';
-@import 'bootstrap/scss/input-group';
-@import 'bootstrap/scss/custom-forms';
 @import 'bootstrap/scss/nav';
 @import 'bootstrap/scss/navbar';
 @import 'bootstrap/scss/card';
+@import 'bootstrap/scss/accordion';
 @import 'bootstrap/scss/breadcrumb';
 @import 'bootstrap/scss/pagination';
 @import 'bootstrap/scss/badge';
-@import 'bootstrap/scss/jumbotron';
 @import 'bootstrap/scss/alert';
 @import 'bootstrap/scss/progress';
-@import 'bootstrap/scss/media';
 @import 'bootstrap/scss/list-group';
 @import 'bootstrap/scss/close';
 @import 'bootstrap/scss/toasts';
@@ -33,8 +32,14 @@
 @import 'bootstrap/scss/popover';
 @import 'bootstrap/scss/carousel';
 @import 'bootstrap/scss/spinners';
-@import 'bootstrap/scss/utilities';
-@import 'bootstrap/scss/print';
+@import 'bootstrap/scss/offcanvas';
+@import 'bootstrap/scss/placeholders';
+
+// Helpers
+@import 'bootstrap/scss/helpers';
+
+// Utilities
+@import 'bootstrap/scss/utilities/api';
 
 // override
 @import './override';

apps/app/src/styles/bootstrap/_init.scss

@@ -1,9 +1,10 @@
-@import './variables';
-
 @import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
 
+@import './variables';
+
+@import 'bootstrap/scss/maps';
 // merge $colors to $theme-colors
-$theme-colors: map-merge($theme-colors, $colors);
+// $theme-colors: map-merge($theme-colors, $colors);
 
 @import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/utilities';

apps/app/src/styles/bootstrap/_override.scss

@@ -1,174 +1,174 @@
-* {
-  outline: none !important;
-}
-
-.container,
-.container-sm,
-.container-md,
-.container-lg,
-.container-xl,
-.container-fluid {
-  @include media-breakpoint-down(xs) {
-    padding-right: 10px;
-    padding-left: 10px;
-  }
-  @include media-breakpoint-up(md) {
-    padding-right: 30px;
-    padding-left: 30px;
-  }
-}
-
-h1 {
-  font-size: 36px;
-  line-height: 48px;
-}
-
-h2 {
-  font-size: 24px;
-  line-height: 36px;
-}
-
-h3 {
-  font-size: 21px;
-  line-height: 30px;
-}
-
-h4 {
-  font-size: 18px;
-  line-height: 22px;
-}
-
-h5 {
-  font-size: 16px;
-  line-height: 18px;
-}
-
-h6 {
-  font-size: 12px;
-  line-height: 18px;
-}
-
-// Navs
-.nav-tabs {
-  .nav-item {
-    margin-right: 0.15rem;
-    a.active {
-      cursor: default;
-    }
-  }
-}
-
-// Custom Control
-.custom-control {
-  .custom-control-input,
-  .custom-control-input + .custom-control-label {
-    cursor: pointer;
-  }
-}
-
-// card (substitute panel of bootstrap3)
-.card {
-  margin-bottom: 20px;
-}
-
-.card-header {
-  font-weight: 700;
-  text-transform: none;
-}
-
-.card-header:first-child {
-}
-
-// Well (substitute Well of bootstrap3)
-.card.well {
-  min-height: 20px;
-  padding: $card-spacer-y $card-spacer-x;
-}
-
-// Dropdowns
-.dropdown-toggle {
-  &.btn.disabled {
-    pointer-events: auto;
-    cursor: not-allowed;
-  }
-
-  // hide caret
-  &.dropdown-toggle-no-caret::after {
-    content: none;
-  }
-}
-
-// Badges
-.badge {
-  @extend .badge-pill;
-}
-
-//Modals
-.modal-open {
-  width: 100%;
-  padding-right: 0 !important;
-}
-
-.modal-content {
-  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.1);
-}
-
-.modal-header {
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.modal-footer {
-  border-top: 1px solid #e5e5e5;
-}
-
-// When fading in the modal, animate it to slide down
-.modal.fade .modal-dialog {
-  @include transition($modal-transition);
-  transform: $modal-fade-transform;
-}
-
-.modal.show .modal-dialog {
-  transform: $modal-show-transform;
-}
-
-// When trying to close, animate focus to scale
-.modal.modal-static .modal-dialog {
-  transform: $modal-scale-transform;
-}
-
-// col-form-label (substitute for control-label of bootstrap3)
-.col-form-label {
-  text-align: right;
-}
-
-// label
-label {
-  // add with-no-font-weight class in case you do not want to apply font-weight 700 to label
-  :not(.with-no-font-weight) {
-    font-weight: 700;
-  }
-}
-
-// disabled button (reproduction from bootstrap3.)
-// see https://cccabinet.jpn.org/bootstrap4/components/buttons#disabled-state
-.btn.disabled,
-.btn[disabled],
-fieldset[disabled] .btn {
-  cursor: not-allowed;
-}
-
-// progress bar
-.progress {
-  margin-bottom: 18px;
-  overflow: hidden;
-}
-
-.text-break {
-  word-break: break-word;
-  overflow-wrap: break-word;
-}
-
-// prevent tooltip flickering (flashing) on hover
-.tooltip {
-  pointer-events: none;
-}
+// * {
+//   outline: none !important;
+// }
+
+// .container,
+// .container-sm,
+// .container-md,
+// .container-lg,
+// .container-xl,
+// .container-fluid {
+//   @include media-breakpoint-down(xs) {
+//     padding-right: 10px;
+//     padding-left: 10px;
+//   }
+//   @include media-breakpoint-up(md) {
+//     padding-right: 30px;
+//     padding-left: 30px;
+//   }
+// }
+
+// h1 {
+//   font-size: 36px;
+//   line-height: 48px;
+// }
+
+// h2 {
+//   font-size: 24px;
+//   line-height: 36px;
+// }
+
+// h3 {
+//   font-size: 21px;
+//   line-height: 30px;
+// }
+
+// h4 {
+//   font-size: 18px;
+//   line-height: 22px;
+// }
+
+// h5 {
+//   font-size: 16px;
+//   line-height: 18px;
+// }
+
+// h6 {
+//   font-size: 12px;
+//   line-height: 18px;
+// }
+
+// // Navs
+// .nav-tabs {
+//   .nav-item {
+//     margin-right: 0.15rem;
+//     a.active {
+//       cursor: default;
+//     }
+//   }
+// }
+
+// // Custom Control
+// .custom-control {
+//   .custom-control-input,
+//   .custom-control-input + .custom-control-label {
+//     cursor: pointer;
+//   }
+// }
+
+// // card (substitute panel of bootstrap3)
+// .card {
+//   margin-bottom: 20px;
+// }
+
+// .card-header {
+//   font-weight: 700;
+//   text-transform: none;
+// }
+
+// .card-header:first-child {
+// }
+
+// // Well (substitute Well of bootstrap3)
+// .card.well {
+//   min-height: 20px;
+//   padding: $card-spacer-y $card-spacer-x;
+// }
+
+// // Dropdowns
+// .dropdown-toggle {
+//   &.btn.disabled {
+//     pointer-events: auto;
+//     cursor: not-allowed;
+//   }
+
+//   // hide caret
+//   &.dropdown-toggle-no-caret::after {
+//     content: none;
+//   }
+// }
+
+// // Badges
+// .badge {
+//   @extend .badge-pill;
+// }
+
+// //Modals
+// .modal-open {
+//   width: 100%;
+//   padding-right: 0 !important;
+// }
+
+// .modal-content {
+//   box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.1);
+// }
+
+// .modal-header {
+//   border-bottom: 1px solid #e5e5e5;
+// }
+
+// .modal-footer {
+//   border-top: 1px solid #e5e5e5;
+// }
+
+// // When fading in the modal, animate it to slide down
+// .modal.fade .modal-dialog {
+//   @include transition($modal-transition);
+//   transform: $modal-fade-transform;
+// }
+
+// .modal.show .modal-dialog {
+//   transform: $modal-show-transform;
+// }
+
+// // When trying to close, animate focus to scale
+// .modal.modal-static .modal-dialog {
+//   transform: $modal-scale-transform;
+// }
+
+// // col-form-label (substitute for control-label of bootstrap3)
+// .col-form-label {
+//   text-align: right;
+// }
+
+// // label
+// label {
+//   // add with-no-font-weight class in case you do not want to apply font-weight 700 to label
+//   :not(.with-no-font-weight) {
+//     font-weight: 700;
+//   }
+// }
+
+// // disabled button (reproduction from bootstrap3.)
+// // see https://cccabinet.jpn.org/bootstrap4/components/buttons#disabled-state
+// .btn.disabled,
+// .btn[disabled],
+// fieldset[disabled] .btn {
+//   cursor: not-allowed;
+// }
+
+// // progress bar
+// .progress {
+//   margin-bottom: 18px;
+//   overflow: hidden;
+// }
+
+// .text-break {
+//   word-break: break-word;
+//   overflow-wrap: break-word;
+// }
+
+// // prevent tooltip flickering (flashing) on hover
+// .tooltip {
+//   pointer-events: none;
+// }

apps/app/src/styles/bootstrap/_variables.scss

@@ -1,4 +1,5 @@
 @use '../variables';
+@use 'bootstrap/scss/functions' as *;
 
 //
 // Variables
@@ -7,66 +8,66 @@
 //== Colors
 //
 $primary: variables.$growi-blue !default;
-$secondary: #6c757d !default;
-$info: #009fbb !default;
-$success: #00bb83 !default;
-$warning: #ffa32b !default;
-$danger: #ff0a54 !default;
-$light: #e4e7ea !default;
-$dark: #343a40 !default;
-$gray-50: lighten($light, 7%) !default;
-$gray-100: lighten($light, 4%) !default;
-$gray-200: $light !default;
-$gray-300: darken($light, 5%) !default;
-$gray-400: darken($light, 20%) !default;
-$gray-500: darken($light, 30%) !default;
-$gray-550: lighten($dark, 15%) !default;
-$gray-600: lighten($dark, 10%) !default;
-$gray-700: lighten($dark, 5%) !default;
-$gray-800: $dark !default;
-$gray-900: darken($dark, 5%) !default;
-$grays: (
-  '50': $gray-50,
-) !default;
-$red: #ff0a54 !default;
+// $secondary: #6c757d !default;
+// $info: #009fbb !default;
+// $success: #00bb83 !default;
+// $warning: #ffa32b !default;
+// $danger: #ff0a54 !default;
+// $light: #e4e7ea !default;
+// $dark: #343a40 !default;
+// $gray-50: lighten($light, 7%) !default;
+// $gray-100: lighten($light, 4%) !default;
+// $gray-200: $light !default;
+// $gray-300: darken($light, 5%) !default;
+// $gray-400: darken($light, 20%) !default;
+// $gray-500: darken($light, 30%) !default;
+// $gray-550: lighten($dark, 15%) !default;
+// $gray-600: lighten($dark, 10%) !default;
+// $gray-700: lighten($dark, 5%) !default;
+// $gray-800: $dark !default;
+// $gray-900: darken($dark, 5%) !default;
+// $grays: (
+//   '50': $gray-50,
+// ) !default;
+// $red: #ff0a54 !default;
 
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-shadows: true;
+// $enable-shadows: true;
 
 // Links
 //
 // Style anchor elements.
 
-$link-hover-decoration: none !default;
+// $link-hover-decoration: none !default;
 
 // Grid breakpoints
 //
 // Define the minimum dimensions at which your layout will change,
 // adapting to different screen sizes, for use in media queries.
 
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1480px,
-);
+// $grid-breakpoints: (
+//   xs: 0,
+//   sm: 576px,
+//   md: 768px,
+//   lg: 992px,
+//   xl: 1200px,
+//   xxl: 1480px,
+// );
 
 // Grid containers
 //
 // Define the maximum width of `.container` for different screen sizes.
 
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px,
-);
+// $container-max-widths: (
+//   sm: 540px,
+//   md: 720px,
+//   lg: 960px,
+//   xl: 1140px,
+//   xxl: 1320px,
+// );
 
 //== Typography
 //
@@ -76,93 +77,96 @@ $font-family-serif: var(--font-family-serif);
 $font-family-monospace: var(--font-family-monospace);
 $font-family-base: $font-family-sans-serif;
 
-$font-size-base: 0.875rem;  // 16px -> 14px
-$line-height-base: 1.42857;
+// $font-size-base: 0.875rem;  // 16px -> 14px
+// $line-height-base: 1.42857;
 
-$blockquote-small-color: $gray-500;
+// $blockquote-footer-color: $gray-500;
 
 //== Components
 //
-$border-radius: 4px;
-$border-radius-sm: 0;
-$border-radius-lg: 8px;
+// $border-radius: 4px;
+// $border-radius-sm: 0;
+// $border-radius-lg: 8px;
 
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
-$btn-focus-box-shadow: none;
-$btn-active-box-shadow: none;
+// $btn-focus-box-shadow: none;
+// $btn-active-box-shadow: none;
 
 //== Forms
 //
-$input-border-color: $gray-300;
-$input-placeholder-color: $gray-500;
+// $input-border-color: $gray-300;
+// $input-placeholder-color: $gray-500;
 
-$custom-control-indicator-border-color: $gray-400;
-$custom-control-label-disabled-color: $gray-500;
-$custom-select-disabled-color: $gray-500;
-$custom-range-thumb-disabled-bg: $gray-400;
+// $custom-control-indicator-border-color: $gray-400;
+// $custom-control-label-disabled-color: $gray-500;
+// $custom-select-disabled-color: $gray-500;
+// $custom-range-thumb-disabled-bg: $gray-400;
 
 //== Navs
-$nav-link-padding-y: 0.75rem;
-$nav-link-padding-x: 1rem;
-$nav-link-disabled-color: $gray-500;
+// $nav-link-padding-y: 0.75rem;
+// $nav-link-padding-x: 1rem;
+// $nav-link-disabled-color: $gray-500;
 
 //== Navbar
-$navbar-padding-y: 0;
-$navbar-brand-padding-y: 0;
-$navbar-nav-link-padding-x: 1rem;
+// $navbar-padding-y: 0;
+// $navbar-brand-padding-y: 0;
+// $navbar-nav-link-padding-x: 1rem;
 
 //== Dropdowns
-$dropdown-border-radius: $border-radius-lg;
-$dropdown-link-disabled-color: $gray-500;
-$dropdown-header-color: $gray-500;
-$dropdown-box-shadow: 0 0.5rem 0.7rem rgba(black, 0.1);
+// $dropdown-border-radius: $border-radius-lg;
+// $dropdown-link-disabled-color: $gray-500;
+// $dropdown-header-color: $gray-500;
+// $dropdown-box-shadow: 0 0.5rem 0.7rem rgba(black, 0.1);
 
 //== Popovers
-$popover-border-radius: $border-radius;
-$popover-box-shadow: 0 0.5rem 0.7rem rgba(black, 0.1);
+// $popover-border-radius: $border-radius;
+// $popover-box-shadow: 0 0.5rem 0.7rem rgba(black, 0.1);
 
 //== Pagination
-$pagination-disabled-color: $gray-500;
+// $pagination-disabled-color: $gray-500;
 
 //== Cards
-$card-spacer-y: 7px;
-$card-spacer-x: 15px;
+// $card-spacer-y: 7px;
+// $card-spacer-x: 15px;
 
 //== Toasts
-$toast-header-color: $gray-500;
+// $toast-header-color: $gray-500;
 
 //== Modals
-$modal-content-border-width: 0;
-$modal-content-border-radius: $border-radius-lg;
-$modal-header-padding-y: 0.75rem;
-$modal-header-padding-x: 1rem;
+// $modal-content-border-width: 0;
+// $modal-content-border-radius: $border-radius-lg;
+// $modal-header-padding-y: 0.75rem;
+// $modal-header-padding-x: 1rem;
 
 //== Alerts
-$alert-bg-level: -2;
-$alert-border-level: 0;
-$alert-color-level: -10;
+// $alert-bg-level: -2;
+// $alert-border-level: 0;
+// $alert-color-level: -10;
 
 //== Progress bar
-$progress-height: 4px;
-$progress-bg: $gray-100;
-$progress-box-shadow: none;
+// $progress-height: 4px;
+// $progress-bg: $gray-100;
+// $progress-box-shadow: none;
 
 //== List group
-$list-group-disabled-color: $gray-500;
+// $list-group-disabled-color: $gray-500;
 
 //==  Figures
-$figure-caption-color: $gray-500;
+// $figure-caption-color: $gray-500;
 
 //==  Breadcrumbs
-$breadcrumb-divider-color: $gray-500;
-$breadcrumb-active-color: $gray-500;
+// $breadcrumb-divider-color: $gray-500;
+// $breadcrumb-active-color: $gray-500;
 
 //== Code
 $pre-color: dummyinvalildcolor; // disable pre color specification with invalid value
 
 //== Custom Checkbox
-$custom-checkbox-indicator-border-radius: 0px;
-$custom-control-indicator-focus-box-shadow: none;
-$custom-control-indicator-size: 1.2rem;
+// $custom-checkbox-indicator-border-radius: 0px;
+// $custom-control-indicator-focus-box-shadow: none;
+// $custom-control-indicator-size: 1.2rem;
+
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/variables-dark';

packages/preset-themes/src/styles/bootstrap/_apply.scss

@@ -1,11 +1,13 @@
 @use 'init' as *;
 
 // apply bootstrap
+
+// Layout & components
 @import 'bootstrap/scss/root';
 @import 'bootstrap/scss/reboot';
 @import 'bootstrap/scss/type';
 @import 'bootstrap/scss/images';
-@import 'bootstrap/scss/code';
+@import 'bootstrap/scss/containers';
 @import 'bootstrap/scss/grid';
 @import 'bootstrap/scss/tables';
 @import 'bootstrap/scss/forms';
@@ -13,18 +15,15 @@
 @import 'bootstrap/scss/transitions';
 @import 'bootstrap/scss/dropdown';
 @import 'bootstrap/scss/button-group';
-@import 'bootstrap/scss/input-group';
-@import 'bootstrap/scss/custom-forms';
 @import 'bootstrap/scss/nav';
 @import 'bootstrap/scss/navbar';
 @import 'bootstrap/scss/card';
+@import 'bootstrap/scss/accordion';
 @import 'bootstrap/scss/breadcrumb';
 @import 'bootstrap/scss/pagination';
 @import 'bootstrap/scss/badge';
-@import 'bootstrap/scss/jumbotron';
 @import 'bootstrap/scss/alert';
 @import 'bootstrap/scss/progress';
-@import 'bootstrap/scss/media';
 @import 'bootstrap/scss/list-group';
 @import 'bootstrap/scss/close';
 @import 'bootstrap/scss/toasts';
@@ -33,8 +32,14 @@
 @import 'bootstrap/scss/popover';
 @import 'bootstrap/scss/carousel';
 @import 'bootstrap/scss/spinners';
-@import 'bootstrap/scss/utilities';
-@import 'bootstrap/scss/print';
+@import 'bootstrap/scss/offcanvas';
+@import 'bootstrap/scss/placeholders';
+
+// Helpers
+@import 'helpers';
+
+// Utilities
+@import 'utilities/api';
 
 // override
 @import './override';

packages/preset-themes/src/styles/bootstrap/_init.scss

@@ -1,9 +1,10 @@
-@import './variables';
-
 @import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
 
+@import './variables';
+
+@import 'bootstrap/scss/maps';
 // merge $colors to $theme-colors
-$theme-colors: map-merge($theme-colors, $colors);
+// $theme-colors: map-merge($theme-colors, $colors);
 
 @import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/utilities';

packages/preset-themes/src/styles/bootstrap/_override.scss

@@ -1,174 +1,174 @@
-* {
-  outline: none !important;
-}
-
-.container,
-.container-sm,
-.container-md,
-.container-lg,
-.container-xl,
-.container-fluid {
-  @include media-breakpoint-down(xs) {
-    padding-right: 10px;
-    padding-left: 10px;
-  }
-  @include media-breakpoint-up(md) {
-    padding-right: 30px;
-    padding-left: 30px;
-  }
-}
-
-h1 {
-  font-size: 36px;
-  line-height: 48px;
-}
-
-h2 {
-  font-size: 24px;
-  line-height: 36px;
-}
-
-h3 {
-  font-size: 21px;
-  line-height: 30px;
-}
-
-h4 {
-  font-size: 18px;
-  line-height: 22px;
-}
-
-h5 {
-  font-size: 16px;
-  line-height: 18px;
-}
-
-h6 {
-  font-size: 12px;
-  line-height: 14px;
-}
-
-// Navs
-.nav-tabs {
-  .nav-item {
-    margin-right: 0.15rem;
-    a.active {
-      cursor: default;
-    }
-  }
-}
-
-// Custom Control
-.custom-control {
-  .custom-control-input,
-  .custom-control-input + .custom-control-label {
-    cursor: pointer;
-  }
-}
-
-// card (substitute panel of bootstrap3)
-.card {
-  margin-bottom: 20px;
-}
-
-.card-header {
-  font-weight: 700;
-  text-transform: none;
-}
-
-.card-header:first-child {
-}
-
-// Well (substitute Well of bootstrap3)
-.card.well {
-  min-height: 20px;
-  padding: $card-spacer-y $card-spacer-x;
-}
-
-// Dropdowns
-.dropdown-toggle {
-  &.btn.disabled {
-    pointer-events: auto;
-    cursor: not-allowed;
-  }
-
-  // hide caret
-  &.dropdown-toggle-no-caret::after {
-    content: none;
-  }
-}
-
-// Badges
-.badge {
-  @extend .badge-pill;
-}
-
-//Modals
-.modal-open {
-  width: 100%;
-  padding-right: 0 !important;
-}
-
-.modal-content {
-  box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.1);
-}
-
-.modal-header {
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.modal-footer {
-  border-top: 1px solid #e5e5e5;
-}
-
-// When fading in the modal, animate it to slide down
-.modal.fade .modal-dialog {
-  @include transition($modal-transition);
-  transform: $modal-fade-transform;
-}
-
-.modal.show .modal-dialog {
-  transform: $modal-show-transform;
-}
-
-// When trying to close, animate focus to scale
-.modal.modal-static .modal-dialog {
-  transform: $modal-scale-transform;
-}
-
-// col-form-label (substitute for control-label of bootstrap3)
-.col-form-label {
-  text-align: right;
-}
-
-// label
-label {
-  // add with-no-font-weight class in case you do not want to apply font-weight 700 to label
-  :not(.with-no-font-weight) {
-    font-weight: 700;
-  }
-}
-
-// disabled button (reproduction from bootstrap3.)
-// see https://cccabinet.jpn.org/bootstrap4/components/buttons#disabled-state
-.btn.disabled,
-.btn[disabled],
-fieldset[disabled] .btn {
-  cursor: not-allowed;
-}
-
-// progress bar
-.progress {
-  margin-bottom: 18px;
-  overflow: hidden;
-}
-
-.text-break {
-  word-break: break-word;
-  overflow-wrap: break-word;
-}
-
-// prevent tooltip flickering (flashing) on hover
-.tooltip {
-  pointer-events: none;
-}
+// * {
+//   outline: none !important;
+// }
+
+// .container,
+// .container-sm,
+// .container-md,
+// .container-lg,
+// .container-xl,
+// .container-fluid {
+//   @include media-breakpoint-down(xs) {
+//     padding-right: 10px;
+//     padding-left: 10px;
+//   }
+//   @include media-breakpoint-up(md) {
+//     padding-right: 30px;
+//     padding-left: 30px;
+//   }
+// }
+
+// h1 {
+//   font-size: 36px;
+//   line-height: 48px;
+// }
+
+// h2 {
+//   font-size: 24px;
+//   line-height: 36px;
+// }
+
+// h3 {
+//   font-size: 21px;
+//   line-height: 30px;
+// }
+
+// h4 {
+//   font-size: 18px;
+//   line-height: 22px;
+// }
+
+// h5 {
+//   font-size: 16px;
+//   line-height: 18px;
+// }
+
+// h6 {
+//   font-size: 12px;
+//   line-height: 18px;
+// }
+
+// // Navs
+// .nav-tabs {
+//   .nav-item {
+//     margin-right: 0.15rem;
+//     a.active {
+//       cursor: default;
+//     }
+//   }
+// }
+
+// // Custom Control
+// .custom-control {
+//   .custom-control-input,
+//   .custom-control-input + .custom-control-label {
+//     cursor: pointer;
+//   }
+// }
+
+// // card (substitute panel of bootstrap3)
+// .card {
+//   margin-bottom: 20px;
+// }
+
+// .card-header {
+//   font-weight: 700;
+//   text-transform: none;
+// }
+
+// .card-header:first-child {
+// }
+
+// // Well (substitute Well of bootstrap3)
+// .card.well {
+//   min-height: 20px;
+//   padding: $card-spacer-y $card-spacer-x;
+// }
+
+// // Dropdowns
+// .dropdown-toggle {
+//   &.btn.disabled {
+//     pointer-events: auto;
+//     cursor: not-allowed;
+//   }
+
+//   // hide caret
+//   &.dropdown-toggle-no-caret::after {
+//     content: none;
+//   }
+// }
+
+// // Badges
+// .badge {
+//   @extend .badge-pill;
+// }
+
+// //Modals
+// .modal-open {
+//   width: 100%;
+//   padding-right: 0 !important;
+// }
+
+// .modal-content {
+//   box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.1);
+// }
+
+// .modal-header {
+//   border-bottom: 1px solid #e5e5e5;
+// }
+
+// .modal-footer {
+//   border-top: 1px solid #e5e5e5;
+// }
+
+// // When fading in the modal, animate it to slide down
+// .modal.fade .modal-dialog {
+//   @include transition($modal-transition);
+//   transform: $modal-fade-transform;
+// }
+
+// .modal.show .modal-dialog {
+//   transform: $modal-show-transform;
+// }
+
+// // When trying to close, animate focus to scale
+// .modal.modal-static .modal-dialog {
+//   transform: $modal-scale-transform;
+// }
+
+// // col-form-label (substitute for control-label of bootstrap3)
+// .col-form-label {
+//   text-align: right;
+// }
+
+// // label
+// label {
+//   // add with-no-font-weight class in case you do not want to apply font-weight 700 to label
+//   :not(.with-no-font-weight) {
+//     font-weight: 700;
+//   }
+// }
+
+// // disabled button (reproduction from bootstrap3.)
+// // see https://cccabinet.jpn.org/bootstrap4/components/buttons#disabled-state
+// .btn.disabled,
+// .btn[disabled],
+// fieldset[disabled] .btn {
+//   cursor: not-allowed;
+// }
+
+// // progress bar
+// .progress {
+//   margin-bottom: 18px;
+//   overflow: hidden;
+// }
+
+// .text-break {
+//   word-break: break-word;
+//   overflow-wrap: break-word;
+// }
+
+// // prevent tooltip flickering (flashing) on hover
+// .tooltip {
+//   pointer-events: none;
+// }

packages/preset-themes/src/styles/bootstrap/_variables.scss

@@ -1,4 +1,5 @@
 @use '../variables';
+@use 'bootstrap/scss/functions' as *;
 
 //
 // Variables
@@ -7,66 +8,66 @@
 //== Colors
 //
 $primary: variables.$growi-blue !default;
-$secondary: #6c757d !default;
-$info: #009fbb !default;
-$success: #00bb83 !default;
-$warning: #ffa32b !default;
-$danger: #ff0a54 !default;
-$light: #e4e7ea !default;
-$dark: #343a40 !default;
-$gray-50: lighten($light, 7%) !default;
-$gray-100: lighten($light, 4%) !default;
-$gray-200: $light !default;
-$gray-300: darken($light, 5%) !default;
-$gray-400: darken($light, 20%) !default;
-$gray-500: darken($light, 30%) !default;
-$gray-550: lighten($dark, 15%) !default;
-$gray-600: lighten($dark, 10%) !default;
-$gray-700: lighten($dark, 5%) !default;
-$gray-800: $dark !default;
-$gray-900: darken($dark, 5%) !default;
-$grays: (
-  '50': $gray-50,
-) !default;
-$red: #ff0a54 !default;
+// $secondary: #6c757d !default;
+// $info: #009fbb !default;
+// $success: #00bb83 !default;
+// $warning: #ffa32b !default;
+// $danger: #ff0a54 !default;
+// $light: #e4e7ea !default;
+// $dark: #343a40 !default;
+// $gray-50: lighten($light, 7%) !default;
+// $gray-100: lighten($light, 4%) !default;
+// $gray-200: $light !default;
+// $gray-300: darken($light, 5%) !default;
+// $gray-400: darken($light, 20%) !default;
+// $gray-500: darken($light, 30%) !default;
+// $gray-550: lighten($dark, 15%) !default;
+// $gray-600: lighten($dark, 10%) !default;
+// $gray-700: lighten($dark, 5%) !default;
+// $gray-800: $dark !default;
+// $gray-900: darken($dark, 5%) !default;
+// $grays: (
+//   '50': $gray-50,
+// ) !default;
+// $red: #ff0a54 !default;
 
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-shadows: true;
+// $enable-shadows: true;
 
-// Grid breakpoints
+// Links
 //
-// Define the minimum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
+// Style anchor elements.
 
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1480px,
-);
+// $link-hover-decoration: none !default;
 
-// Links
+// Grid breakpoints
 //
-// Style anchor elements.
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
 
-$link-hover-decoration: none !default;
+// $grid-breakpoints: (
+//   xs: 0,
+//   sm: 576px,
+//   md: 768px,
+//   lg: 992px,
+//   xl: 1200px,
+//   xxl: 1480px,
+// );
 
 // Grid containers
 //
 // Define the maximum width of `.container` for different screen sizes.
 
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px,
-  xxl: 1320px,
-);
+// $container-max-widths: (
+//   sm: 540px,
+//   md: 720px,
+//   lg: 960px,
+//   xl: 1140px,
+//   xxl: 1320px,
+// );
 
 //== Typography
 //
@@ -76,93 +77,96 @@ $font-family-serif: var(--font-family-serif);
 $font-family-monospace: var(--font-family-monospace);
 $font-family-base: $font-family-sans-serif;
 
-$font-size-base: 0.875rem;  // 16px -> 14px
-$line-height-base: 1.42857;
+// $font-size-base: 0.875rem;  // 16px -> 14px
+// $line-height-base: 1.42857;
 
-$blockquote-small-color: $gray-500;
+// $blockquote-footer-color: $gray-500;
 
 //== Components
 //
-$border-radius: 4px;
-$border-radius-sm: 0;
-$border-radius-lg: 8px;
+// $border-radius: 4px;
+// $border-radius-sm: 0;
+// $border-radius-lg: 8px;
 
 // Buttons
 //
 // For each of Bootstrap's buttons, define text, background, and border color.
-$btn-focus-box-shadow: none;
-$btn-active-box-shadow: none;
+// $btn-focus-box-shadow: none;
+// $btn-active-box-shadow: none;
 
 //== Forms
 //
-$input-border-color: $gray-300;
-$input-placeholder-color: $gray-500;
+// $input-border-color: $gray-300;
+// $input-placeholder-color: $gray-500;
 
-$custom-control-indicator-border-color: $gray-400;
-$custom-control-label-disabled-color: $gray-500;
-$custom-select-disabled-color: $gray-500;
-$custom-range-thumb-disabled-bg: $gray-400;
+// $custom-control-indicator-border-color: $gray-400;
+// $custom-control-label-disabled-color: $gray-500;
+// $custom-select-disabled-color: $gray-500;
+// $custom-range-thumb-disabled-bg: $gray-400;
 
 //== Navs
-$nav-link-padding-y: 0.75rem;
-$nav-link-padding-x: 1rem;
-$nav-link-disabled-color: $gray-500;
+// $nav-link-padding-y: 0.75rem;
+// $nav-link-padding-x: 1rem;
+// $nav-link-disabled-color: $gray-500;
 
 //== Navbar
-$navbar-padding-y: 0;
-$navbar-brand-padding-y: 0;
-$navbar-nav-link-padding-x: 1rem;
+// $navbar-padding-y: 0;
+// $navbar-brand-padding-y: 0;
+// $navbar-nav-link-padding-x: 1rem;
 
 //== Dropdowns
-$dropdown-border-radius: $border-radius-lg;
-$dropdown-link-disabled-color: $gray-500;
-$dropdown-header-color: $gray-500;
-$dropdown-box-shadow: 0 0.5rem 0.7rem rgba(black, 0.1);
+// $dropdown-border-radius: $border-radius-lg;
+// $dropdown-link-disabled-color: $gray-500;
+// $dropdown-header-color: $gray-500;
+// $dropdown-box-shadow: 0 0.5rem 0.7rem rgba(black, 0.1);
 
 //== Popovers
-$popover-border-radius: $border-radius;
-$popover-box-shadow: 0 0.5rem 0.7rem rgba(black, 0.1);
+// $popover-border-radius: $border-radius;
+// $popover-box-shadow: 0 0.5rem 0.7rem rgba(black, 0.1);
 
 //== Pagination
-$pagination-disabled-color: $gray-500;
+// $pagination-disabled-color: $gray-500;
 
 //== Cards
-$card-spacer-y: 7px;
-$card-spacer-x: 15px;
+// $card-spacer-y: 7px;
+// $card-spacer-x: 15px;
 
 //== Toasts
-$toast-header-color: $gray-500;
+// $toast-header-color: $gray-500;
 
 //== Modals
-$modal-content-border-width: 0;
-$modal-content-border-radius: $border-radius-lg;
-$modal-header-padding-y: 0.75rem;
-$modal-header-padding-x: 1rem;
+// $modal-content-border-width: 0;
+// $modal-content-border-radius: $border-radius-lg;
+// $modal-header-padding-y: 0.75rem;
+// $modal-header-padding-x: 1rem;
 
 //== Alerts
-$alert-bg-level: -2;
-$alert-border-level: 0;
-$alert-color-level: -10;
+// $alert-bg-level: -2;
+// $alert-border-level: 0;
+// $alert-color-level: -10;
 
 //== Progress bar
-$progress-height: 4px;
-$progress-bg: $gray-100;
-$progress-box-shadow: none;
+// $progress-height: 4px;
+// $progress-bg: $gray-100;
+// $progress-box-shadow: none;
 
 //== List group
-$list-group-disabled-color: $gray-500;
+// $list-group-disabled-color: $gray-500;
 
 //==  Figures
-$figure-caption-color: $gray-500;
+// $figure-caption-color: $gray-500;
 
 //==  Breadcrumbs
-$breadcrumb-divider-color: $gray-500;
-$breadcrumb-active-color: $gray-500;
+// $breadcrumb-divider-color: $gray-500;
+// $breadcrumb-active-color: $gray-500;
 
 //== Code
 $pre-color: dummyinvalildcolor; // disable pre color specification with invalid value
 
 //== Custom Checkbox
-$custom-checkbox-indicator-border-radius: 0px;
-$custom-control-indicator-focus-box-shadow: none;
-$custom-control-indicator-size: 1.2rem;
+// $custom-checkbox-indicator-border-radius: 0px;
+// $custom-control-indicator-focus-box-shadow: none;
+// $custom-control-indicator-size: 1.2rem;
+
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/variables-dark';