bootstrap-honoka-rails 4.3.1.5 → 4.3.1.6

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 926c7f1af2859f372900e62de24040aa7897fa30a740d3a8f98b5f202e494aa6
4
- data.tar.gz: 567764245bbace09d8a8764fe5bbac7c276b29f872a4c7cf46c5db71264e35e6
3
+ metadata.gz: ec088fb004bd0b30777c8a7c4e9468fbe93af971ec3df66a9af4300ce744391d
4
+ data.tar.gz: cb0a966c97c2e864a5993f080b945b24a6d003f97d7a680e0ca346e089062da5
5
5
  SHA512:
6
- metadata.gz: f9ac9d6d1409b1cd4b725dc1605a3bfa6067689a7add7ebfa46488e2bc941a9f8c61a7b59915e8592995aa0dc0f62513d053b5dd8d74debad1d03d79993465bf
7
- data.tar.gz: 1c504cc0af3163ea957afda2ebf3d7b025c6687e5f14e03e3bb31a42d63f70ba6111cff17e477c4388c0cda34f501e656f3bdee4866a8d2329c9a79a20cdcafb
6
+ metadata.gz: f02c0130533107ca9b4a2ab1e27a77ca1c08931c00e97a674097939cd8920bf9e44b47a9fe3e90e6284d35e80ba161438372d5b8dcd8cc0b2aba01451c0b448d
7
+ data.tar.gz: 675f11d8c8f7b8f2e72c656f73cfa9bc488878abfc03cb30aa97c056454a3e3ca4c4c9abb04ca1b9854e7f5278495ec6e40b6a98d072425000e47dd3acd4eae1
data/README.md CHANGED
@@ -1,11 +1,10 @@
1
1
  # Bootstrap-Honoka-Rails
2
2
 
3
+ [engilish](README.md)/[japanese](README_ja.md)
4
+
3
5
  [Honoka](https://github.com/windyakin/Honoka) is a Bootstrap theme that can display Japanese beautifully.
4
6
  bootstrap-honoka-rails can easily install [Honoka](https://github.com/windyakin/Honoka), [Umi](https://ysakasin.github.io/Umi/) , [Nico](https://nico.kubosho.com/) and [Rin](https://rinhoshizo.la/) on Rails.
5
7
 
6
- [Honoka](https://github.com/windyakin/Honoka) は日本語も美しく表示できる Bootstrap テーマです。
7
- bootstrap-honoka-rails は [Honoka](https://github.com/windyakin/Honoka) や [Umi](https://ysakasin.github.io/Umi/) や [Nico](https://nico.kubosho.com/) や [Rin](https://rinhoshizo.la/) を Rails 上に簡単にインストールできます。
8
-
9
8
  ## Installation
10
9
 
11
10
  Add this line to your application's Gemfile:
@@ -22,13 +21,6 @@ Or install it yourself as:
22
21
 
23
22
  $ gem install bootstrap-honoka-rails
24
23
 
25
- [日本語訳]
26
- gemfile にこれ書いておけばいいと思います。
27
-
28
- ```ruby
29
- gem 'bootstrap-honoka-rails' , '~>4.3.1' # or '~> 3.3.7'
30
- ```
31
-
32
24
  ## Usage
33
25
 
34
26
  Add to application.css `*= require _honoka` <br>
@@ -38,15 +30,18 @@ app/assets/stylesheets/application.css
38
30
 
39
31
  ```css
40
32
  /*
41
- *= require _bootstrap-sprockets # Add line v3 only
33
+ *= require _bootstrap-sprockets # Add line * v3 only
42
34
  *= require _honoka # Add line
43
35
  *= require_self
44
36
  */
45
37
  ```
46
38
 
47
39
  and add to application.js <br>
48
- `//= require popper` (bootstrap ver4 later), <br>
40
+
41
+ ```js
42
+ `//= require popper` // * bootstrap ver4 later
49
43
  `//= require bootstrap-sprockets`
44
+ ```
50
45
 
51
46
  app/assets/javascripts/application.js
52
47
 
@@ -54,7 +49,7 @@ app/assets/javascripts/application.js
54
49
  //= require jquery2
55
50
  //= require rails-ujs
56
51
  //= require activestorage
57
- //= require popper # add line v4 later
52
+ //= require popper # add line * v4 later
58
53
  //= require bootstrap-sprockets # add line
59
54
  //= require turbolinks
60
55
  //= require_tree .
@@ -65,12 +60,6 @@ Because Dropdown features may not work properly.<br>
65
60
  Please check [here](https://github.com/twbs/bootstrap-sass/issues/714) for more details.<br>
66
61
  (It has been tested on production environment. The sample app is in the 'test/dummy' directory. )
67
62
 
68
- [日本語訳]
69
- とりあえずインストール後、上記を application.css と application.js に追加すれば OK です。<br>
70
- 注意点として `bootstrap-sprockets` を読み込むと思いますが、その場合 `bootstrap.min` は読み込む必要がありません。<br>
71
- 何故なら Dropdown が正しく動作しない可能性があります。 <br>
72
- 詳細は[こちら](https://github.com/twbs/bootstrap-sass/issues/714)をご確認ください。<br>
73
- ※production 環境で動作することを確認済み。 サンプルアプリは 'test/dummy' ディレクトリ内 にあります。
74
63
 
75
64
  ---
76
65
 
@@ -99,18 +88,10 @@ or
99
88
 
100
89
  Please check [VERSIONS.md](VERSIONS.md) for Honoka Nico Umi Rin compatible Ver.
101
90
 
102
- [日本語訳][特定のバージョン](VERSIONS.md)では "Nico"と "Umi" と "Rin" も対応しています。
103
- `_honoka` の代わりに `*= require _nico` と書けば Nico になりますし、 `_umi` と書けば Umi デザインになります。 <br>
104
- Rin も Ver によっては `_rin` と書けば対応出来ます。<br>
105
- Honoka Nico Umi Rin の対応 Ver は[VERSIONS.md](VERSIONS.md)をご確認ください。
106
-
107
91
  ## Notice
108
92
 
109
93
  bootstrap-honoka-rails uses bootstrap or bootstrap-sass internally.
110
94
 
111
- [日本語訳]
112
- bootstrap-honoka-rails は bootstrap 又は bootstrap-sass を内部的に使っています。
113
-
114
95
  ## License
115
96
 
116
97
  The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
@@ -0,0 +1,140 @@
1
+ # Bootstrap-Honoka-Rails
2
+
3
+ [engilish](README.md)/[japanese](README_ja.md)
4
+
5
+ [Honoka](https://github.com/windyakin/Honoka) は日本語も美しく表示できる Bootstrap テーマです。
6
+ bootstrap-honoka-rails は [Honoka](https://github.com/windyakin/Honoka) や [Umi](https://ysakasin.github.io/Umi/) や [Nico](https://nico.kubosho.com/) や [Rin](https://rinhoshizo.la/) を Rails 上に簡単にインストールできます。
7
+
8
+ ## Installation
9
+
10
+ gemfile に下記記載します。
11
+
12
+ ```ruby
13
+ gem 'bootstrap-honoka-rails' , '~>4.3.1' # or '~> 3.3.7'
14
+ ```
15
+
16
+ そして下記コマンドでインストール :
17
+
18
+ $ bundle
19
+
20
+ 又は gemに直接インストールします:
21
+
22
+ $ gem install bootstrap-honoka-rails
23
+
24
+ ## Usage
25
+
26
+ application.cssに `*= require _honoka` を追加します。<br>
27
+ bootstrap3の場合は `*= _bootstrap-sprockets`. も追加します。
28
+
29
+ app/assets/stylesheets/application.css
30
+
31
+ ```css
32
+ /*
33
+ *= require _bootstrap-sprockets # 追加行 ※ v3 のみ
34
+ *= require _honoka # 追加行
35
+ *= require_self
36
+ */
37
+ ```
38
+
39
+
40
+ 次にapplication.jsに下記を追加しましょう。 <br>
41
+
42
+ ```js
43
+ `//= require popper` // * bootstrap ver4 以降
44
+ `//= require bootstrap-sprockets`
45
+ ```
46
+
47
+ app/assets/javascripts/application.js
48
+
49
+ ```js
50
+ //= require jquery2
51
+ //= require rails-ujs
52
+ //= require activestorage
53
+ //= require popper # add line ※ ver4 以降
54
+ //= require bootstrap-sprockets # 追加行
55
+ //= require turbolinks
56
+ //= require_tree .
57
+ ```
58
+
59
+ インストール後、上記を application.css と application.js に追加すれば OK です。<br>
60
+ 注意点として `bootstrap-sprockets` を読み込むと思いますが、その場合 `bootstrap.min` は読み込む必要がありません。<br>
61
+ 何故なら Dropdown が正しく動作しない可能性がある為です。 <br>
62
+ 詳細は[こちら](https://github.com/twbs/bootstrap-sass/issues/714)をご確認ください。<br>
63
+ ※production 環境で動作することを確認済み。 サンプルアプリは 'test/dummy' ディレクトリ内 にあります。
64
+
65
+ ---
66
+
67
+ [特定のバージョン](VERSIONS.md)では "Nico"と "Umi" と "Rin" も対応しています。
68
+
69
+ app/assets/stylesheets/application.css
70
+
71
+ ```css
72
+ *= require _umi # 追加行
73
+ *= require_self
74
+ ```
75
+
76
+ or
77
+
78
+ ```css
79
+ *= require _nico # 追加行
80
+ *= require_self
81
+ ```
82
+
83
+ or
84
+
85
+ ```css
86
+ *= require _rin # 追加行
87
+ *= require_self
88
+ ```
89
+
90
+ Honoka Nico Umi Rin の対応 Ver は[VERSIONS.md](VERSIONS.md)をご確認ください。
91
+
92
+ ## Notice
93
+
94
+ bootstrap-honoka-rails は bootstrap 又は bootstrap-sass を内部的に使っています。
95
+
96
+ ## License
97
+
98
+ 本gemは[MITライセンス]((https://opensource.org/licenses/MIT))の条件の下でオープンソースとして利用可能です。
99
+
100
+ ## Supported bootstrap themes
101
+
102
+ #### [Honoka](http://honokak.osaka/)
103
+
104
+ Source URL ... [https://github.com/windyakin/Honoka](https://github.com/windyakin/Honoka)
105
+
106
+ > The MIT License (MIT)
107
+ >
108
+ > Copyright (c) 2015 windyakin
109
+
110
+ [License View All](https://github.com/windyakin/Honoka/blob/master/LICENSE)
111
+
112
+ #### [Umi](https://ysakasin.github.io/Umi/)
113
+
114
+ Source URL ... [https://github.com/ysakasin/Umi](https://github.com/ysakasin/Umi)
115
+
116
+ > The MIT License (MIT)
117
+ >
118
+ > Copyright (c) 2015 ysakasin
119
+
120
+ [License View All](https://github.com/ysakasin/Umi/blob/master/LICENSE)
121
+
122
+ #### [Nico](https://nico.kubosho.com/)
123
+
124
+ Source URL ... [https://github.com/kubosho/Nico](https://github.com/kubosho/Nico)
125
+
126
+ > The MIT License (MIT)
127
+ >
128
+ > Copyright (c) 2015 windyakin, kubosho
129
+
130
+ [License View All](https://github.com/kubosho/Nico/blob/master/LICENSE)
131
+
132
+ #### [Rin](https://rinhoshizo.la/)
133
+
134
+ Source URL ... [https://github.com/raryosu/Rin](https://github.com/raryosu/Rin)
135
+
136
+ > The MIT License (MIT)
137
+ >
138
+ > Copyright (c) 2016 Hagihara Ryosuke
139
+
140
+ [License View All](https://github.com/raryosu/Rin/blob/master/LICENSE)
data/Rakefile CHANGED
@@ -1,3 +1,5 @@
1
+ # frozen_string_literal: true
2
+
1
3
  begin
2
4
  # bundlerでインストールしたgemをrequireで読み取り可能とする。
3
5
  require 'bundler/setup'
@@ -3,8 +3,12 @@
3
3
  - O ... Supported and test completed(使用可能)
4
4
  - X ... Not supported(使用不可)
5
5
 
6
- | Gem | Honoka | Nico | Umi | Rin |
7
- | ----- | ------ | ---- | --- | --- |
8
- | 4.3.1 | O | X | X | X |
9
- | 4.0.0 | O | O | O | X |
10
- | 3.3.7 | O | O | O | O |
6
+ | Gem | Honoka | Nico | Umi | Rin |
7
+ | ----- | ------ | ------| --- | --- |
8
+ | 4.3.1 | O | O(*1) | X | X |
9
+ | 4.0.0 | O | O | O | X |
10
+ | 3.3.7 | O | O | O | O |
11
+
12
+ #### notice
13
+ *1 The nico of version 4.3.1 is actually using [nico theme 4.3.2](https://github.com/kubosho/Nico/releases/tag/v4.3.2).
14
+
@@ -0,0 +1,8 @@
1
+ @charset "UTF-8";
2
+
3
+ // [!] Please do *NOT* remove the banner space at below this
4
+ // This will be automatically replaced by gulp build tasks
5
+
6
+ /*! [<<original banner space>>] */
7
+
8
+ @import "nico/honoka";
@@ -0,0 +1,55 @@
1
+ @charset "UTF-8";
2
+
3
+ // Core functions
4
+ @import 'bootstrap/functions';
5
+
6
+ // Honoka variables
7
+ @import './variables';
8
+ // Nico variables
9
+ @import './variables_nico';
10
+
11
+ @import 'bootstrap/variables';
12
+ @import 'bootstrap/mixins';
13
+ @import 'bootstrap/root';
14
+
15
+ // Core CSS
16
+ @import 'bootstrap/reboot';
17
+ @import 'bootstrap/type';
18
+ @import 'bootstrap/images';
19
+ @import 'bootstrap/code';
20
+ @import 'bootstrap/grid';
21
+ @import 'bootstrap/tables';
22
+ @import 'bootstrap/forms';
23
+ @import 'bootstrap/buttons';
24
+
25
+ // Components
26
+ @import 'bootstrap/transitions';
27
+ @import 'bootstrap/dropdown';
28
+ @import 'bootstrap/button-group';
29
+ @import 'bootstrap/input-group';
30
+ @import 'bootstrap/custom-forms';
31
+ @import 'bootstrap/nav';
32
+ @import 'bootstrap/navbar';
33
+ @import 'bootstrap/card';
34
+ @import 'bootstrap/breadcrumb';
35
+ @import 'bootstrap/pagination';
36
+ @import 'bootstrap/badge';
37
+ @import 'bootstrap/jumbotron';
38
+ @import 'bootstrap/alert';
39
+ @import 'bootstrap/progress';
40
+ @import 'bootstrap/media';
41
+ @import 'bootstrap/list-group';
42
+ @import 'bootstrap/close';
43
+ @import 'bootstrap/toasts';
44
+ @import 'bootstrap/modal';
45
+ @import 'bootstrap/tooltip';
46
+ @import 'bootstrap/popover';
47
+ @import 'bootstrap/carousel';
48
+ @import 'bootstrap/spinners';
49
+ @import 'bootstrap/utilities';
50
+ @import 'bootstrap/print';
51
+
52
+ // Honoka original setting
53
+ @import './override';
54
+ // Nico original setting
55
+ @import './override_nico';
@@ -0,0 +1 @@
1
+ // original mixin functions
@@ -0,0 +1,42 @@
1
+ @charset "UTF-8";
2
+
3
+ .navbar {
4
+ .nav-item {
5
+ .nav-link {
6
+ position: relative;
7
+ margin-right: $spacer * .5;
8
+ &::before {
9
+ position: absolute;
10
+ right: 0;
11
+ bottom: 0;
12
+ left: 0;
13
+ width: 0;
14
+ margin: 0 auto;
15
+ content: "";
16
+ border-bottom-style: solid;
17
+ border-bottom-width: 1px;
18
+ transition: width .2s;
19
+ }
20
+ @include hover-focus {
21
+ &::before {
22
+ width: 100%;
23
+ }
24
+ }
25
+ }
26
+ &.active .nav-link::before {
27
+ width: 100%;
28
+ }
29
+ }
30
+ }
31
+
32
+ .navbar-dark {
33
+ .nav-item .nav-link::before {
34
+ border-color: $navbar-dark-active-color;
35
+ }
36
+ }
37
+
38
+ .navbar-light {
39
+ .nav-item .nav-link::before {
40
+ border-color: $navbar-light-active-color;
41
+ }
42
+ }
@@ -0,0 +1,47 @@
1
+ @charset "UTF-8";
2
+
3
+ .bg-light {
4
+ /* stylelint-disable-next-line declaration-no-important */
5
+ background-color: lighten($secondary, 8%) !important;
6
+ }
7
+
8
+ .table-dark,
9
+ .table-dark > th,
10
+ .table-dark > td {
11
+ background-color: $pink-dark;
12
+ }
13
+
14
+ .table-hover .table-dark:hover,
15
+ .table-hover .table-dark:hover > td,
16
+ .table-hover .table-dark:hover > th {
17
+ background-color: lighten($pink-dark, 8%);
18
+ }
19
+
20
+ .navbar-dark {
21
+ &.bg-primary {
22
+ .navbar-brand,
23
+ .navbar-brand:hover,
24
+ .navbar-brand:focus {
25
+ color: $gray-800;
26
+ }
27
+
28
+ .navbar-nav .nav-link {
29
+ color: rgba($gray-800, 0.75);
30
+ }
31
+
32
+ .navbar-nav .nav-link:hover,
33
+ .navbar-nav .nav-link:focus {
34
+ color: rgba($gray-800, 0.9);
35
+ }
36
+
37
+ /* stylelint-disable selector-max-class */
38
+ .navbar-nav .active > .nav-link {
39
+ color: $gray-800;
40
+ }
41
+ /* stylelint-enable */
42
+
43
+ .nav-item .nav-link::before {
44
+ border-color: $gray-800;
45
+ }
46
+ }
47
+ }
@@ -0,0 +1,1193 @@
1
+ @charset "UTF-8";
2
+ // Variables
3
+ //
4
+ // Variables should follow the `$component-state-property-size` formula for
5
+ // consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
6
+
7
+ // Color system
8
+
9
+ $white: #fff !default;
10
+ $gray-100: #f8f9fa !default;
11
+ $gray-200: #e9ecef !default;
12
+ $gray-300: #dee2e6 !default;
13
+ $gray-400: #ced4da !default;
14
+ $gray-500: #adb5bd !default;
15
+ $gray-600: #6c757d !default;
16
+ $gray-700: #495057 !default;
17
+ $gray-800: #343a40 !default;
18
+ $gray-900: #212529 !default;
19
+ $black: #000 !default;
20
+
21
+ $grays: () !default;
22
+ // stylelint-disable-next-line scss/dollar-variable-default
23
+ $grays: map-merge(
24
+ (
25
+ '100': $gray-100,
26
+ '200': $gray-200,
27
+ '300': $gray-300,
28
+ '400': $gray-400,
29
+ '500': $gray-500,
30
+ '600': $gray-600,
31
+ '700': $gray-700,
32
+ '800': $gray-800,
33
+ '900': $gray-900,
34
+ ),
35
+ $grays
36
+ );
37
+
38
+ $blue: #007bff !default;
39
+ $indigo: #6610f2 !default;
40
+ $purple: #6f42c1 !default;
41
+ $pink: #e83e8c !default;
42
+ $red: #dc3545 !default;
43
+ $orange: #fd7e14 !default;
44
+ $yellow: #ffc107 !default;
45
+ $green: #28a745 !default;
46
+ $teal: #20c997 !default;
47
+ $cyan: #17a2b8 !default;
48
+
49
+ $colors: () !default;
50
+ // stylelint-disable-next-line scss/dollar-variable-default
51
+ $colors: map-merge(
52
+ (
53
+ 'blue': $blue,
54
+ 'indigo': $indigo,
55
+ 'purple': $purple,
56
+ 'pink': $pink,
57
+ 'red': $red,
58
+ 'orange': $orange,
59
+ 'yellow': $yellow,
60
+ 'green': $green,
61
+ 'teal': $teal,
62
+ 'cyan': $cyan,
63
+ 'white': $white,
64
+ 'gray': $gray-600,
65
+ 'gray-dark': $gray-800,
66
+ ),
67
+ $colors
68
+ );
69
+
70
+ $primary: $blue !default;
71
+ $secondary: $pink !default;
72
+ $success: $green !default;
73
+ $info: $cyan !default;
74
+ $warning: $yellow !default;
75
+ $danger: $red !default;
76
+ $light: $gray-100 !default;
77
+ $dark: $gray-800 !default;
78
+
79
+ $theme-colors: () !default;
80
+ // stylelint-disable-next-line scss/dollar-variable-default
81
+ $theme-colors: map-merge(
82
+ (
83
+ 'primary': $primary,
84
+ 'secondary': $secondary,
85
+ 'success': $success,
86
+ 'info': $info,
87
+ 'warning': $warning,
88
+ 'danger': $danger,
89
+ 'light': $light,
90
+ 'dark': $dark,
91
+ ),
92
+ $theme-colors
93
+ );
94
+
95
+ // Set a specific jump point for requesting color jumps
96
+ $theme-color-interval: 8% !default;
97
+
98
+ // The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
99
+ $yiq-contrasted-threshold: 150 !default;
100
+
101
+ // Customize the light and dark text colors for use in our YIQ color contrast function.
102
+ $yiq-text-dark: $gray-900 !default;
103
+ $yiq-text-light: $white !default;
104
+
105
+ // Options
106
+ //
107
+ // Quickly modify global styling by enabling or disabling optional features.
108
+
109
+ $enable-caret: true !default;
110
+ $enable-rounded: true !default;
111
+ $enable-shadows: false !default;
112
+ $enable-gradients: false !default;
113
+ $enable-transitions: true !default;
114
+ $enable-prefers-reduced-motion-media-query: true !default;
115
+ $enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
116
+ $enable-grid-classes: true !default;
117
+ $enable-pointer-cursor-for-buttons: true !default;
118
+ $enable-print-styles: true !default;
119
+ $enable-responsive-font-sizes: false !default;
120
+ $enable-validation-icons: true !default;
121
+ $enable-deprecation-messages: true !default;
122
+
123
+ // Spacing
124
+ //
125
+ // Control the default styling of most Bootstrap elements by modifying these
126
+ // variables. Mostly focused on spacing.
127
+ // You can add more entries to the $spacers map, should you need more variation.
128
+
129
+ $spacer: 1rem !default;
130
+ $spacers: () !default;
131
+ // stylelint-disable-next-line scss/dollar-variable-default
132
+ $spacers: map-merge(
133
+ (
134
+ 0: 0,
135
+ 1: (
136
+ $spacer * 0.25,
137
+ ),
138
+ 2: (
139
+ $spacer * 0.5,
140
+ ),
141
+ 3: $spacer,
142
+ 4: (
143
+ $spacer * 1.5,
144
+ ),
145
+ 5: (
146
+ $spacer * 3,
147
+ ),
148
+ ),
149
+ $spacers
150
+ );
151
+
152
+ // This variable affects the `.h-*` and `.w-*` classes.
153
+ $sizes: () !default;
154
+ // stylelint-disable-next-line scss/dollar-variable-default
155
+ $sizes: map-merge(
156
+ (
157
+ 25: 25%,
158
+ 50: 50%,
159
+ 75: 75%,
160
+ 100: 100%,
161
+ auto: auto,
162
+ ),
163
+ $sizes
164
+ );
165
+
166
+ // Body
167
+ //
168
+ // Settings for the `<body>` element.
169
+
170
+ $body-bg: $white !default;
171
+ $body-color: $gray-900 !default;
172
+
173
+ // Links
174
+ //
175
+ // Style anchor elements.
176
+
177
+ $link-color: theme-color('primary') !default;
178
+ $link-decoration: none !default;
179
+ $link-hover-color: darken($link-color, 15%) !default;
180
+ $link-hover-decoration: underline !default;
181
+ // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
182
+ $emphasized-link-hover-darken-percentage: 15% !default;
183
+
184
+ // Paragraphs
185
+ //
186
+ // Style p element.
187
+
188
+ $paragraph-margin-bottom: 1rem !default;
189
+
190
+ // Grid breakpoints
191
+ //
192
+ // Define the minimum dimensions at which your layout will change,
193
+ // adapting to different screen sizes, for use in media queries.
194
+
195
+ $grid-breakpoints: (
196
+ xs: 0,
197
+ sm: 576px,
198
+ md: 768px,
199
+ lg: 992px,
200
+ xl: 1200px,
201
+ ) !default;
202
+
203
+ @include _assert-ascending($grid-breakpoints, '$grid-breakpoints');
204
+ @include _assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints');
205
+
206
+ // Grid containers
207
+ //
208
+ // Define the maximum width of `.container` for different screen sizes.
209
+
210
+ $container-max-widths: (
211
+ sm: 540px,
212
+ md: 720px,
213
+ lg: 960px,
214
+ xl: 1140px,
215
+ ) !default;
216
+
217
+ @include _assert-ascending($container-max-widths, '$container-max-widths');
218
+
219
+ // Grid columns
220
+ //
221
+ // Set the number of columns and specify the width of the gutters.
222
+
223
+ $grid-columns: 12 !default;
224
+ $grid-gutter-width: 30px !default;
225
+
226
+ // Components
227
+ //
228
+ // Define common padding and border radius sizes and more.
229
+
230
+ $line-height-lg: 1.5 !default;
231
+ $line-height-sm: 1.5 !default;
232
+
233
+ $border-width: 1px !default;
234
+ $border-color: $gray-300 !default;
235
+
236
+ $border-radius: 0.25rem !default;
237
+ $border-radius-lg: 0.3rem !default;
238
+ $border-radius-sm: 0.2rem !default;
239
+
240
+ $rounded-pill: 50rem !default;
241
+
242
+ $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
243
+ $box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
244
+ $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
245
+
246
+ $component-active-color: $white !default;
247
+ $component-active-bg: theme-color('primary') !default;
248
+
249
+ $caret-width: 0.3em !default;
250
+ $caret-vertical-align: $caret-width * 0.85 !default;
251
+ $caret-spacing: $caret-width * 0.85 !default;
252
+
253
+ $transition-base: all 0.2s ease-in-out !default;
254
+ $transition-fade: opacity 0.15s linear !default;
255
+ $transition-collapse: height 0.35s ease !default;
256
+
257
+ $embed-responsive-aspect-ratios: () !default;
258
+ // stylelint-disable-next-line scss/dollar-variable-default
259
+ $embed-responsive-aspect-ratios: join(
260
+ ((21 9), (16 9), (4 3), (1 1)),
261
+ $embed-responsive-aspect-ratios
262
+ );
263
+
264
+ // Typography
265
+ //
266
+ // Font, line-height, and color for body text, headings, and more.
267
+
268
+ // stylelint-disable value-keyword-case
269
+ $font-family-sans-serif: -apple-system, 'BlinkMacSystemFont', 'Helvetica Neue',
270
+ Helvetica, 'Arial', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN',
271
+ 'メイリオ', Meiryo, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
272
+ 'Segoe UI Symbol', 'Noto Color Emoji' !default;
273
+ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
274
+ 'Liberation Mono', 'Courier New', monospace !default;
275
+ $font-family-serif: 'Times New Roman', Times, 'Yu Mincho', YuMincho,
276
+ 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'MS P明朝', 'MS PMincho',
277
+ 'MS 明朝', serif !default;
278
+ $font-family-base: $font-family-sans-serif !default;
279
+ // stylelint-enable value-keyword-case
280
+
281
+ $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
282
+ $font-size-lg: $font-size-base * 1.25 !default;
283
+ $font-size-sm: $font-size-base * 0.875 !default;
284
+
285
+ $font-weight-lighter: lighter !default;
286
+ $font-weight-light: 400 !default;
287
+ $font-weight-normal: 400 !default;
288
+ $font-weight-bold: 600 !default;
289
+ $font-weight-bolder: bolder !default;
290
+
291
+ $font-weight-base: $font-weight-normal !default;
292
+ $line-height-base: 1.5 !default;
293
+
294
+ $h1-font-size: $font-size-base * 2.5 !default;
295
+ $h2-font-size: $font-size-base * 2 !default;
296
+ $h3-font-size: $font-size-base * 1.75 !default;
297
+ $h4-font-size: $font-size-base * 1.5 !default;
298
+ $h5-font-size: $font-size-base * 1.25 !default;
299
+ $h6-font-size: $font-size-base !default;
300
+
301
+ $headings-margin-bottom: $spacer / 2 !default;
302
+ $headings-font-family: null !default;
303
+ $headings-font-weight: $font-weight-bold !default;
304
+ $headings-line-height: 1.2 !default;
305
+ $headings-color: null !default;
306
+
307
+ $display1-size: 6rem !default;
308
+ $display2-size: 5.5rem !default;
309
+ $display3-size: 4.5rem !default;
310
+ $display4-size: 3.5rem !default;
311
+
312
+ $display1-weight: $font-weight-normal !default;
313
+ $display2-weight: $font-weight-normal !default;
314
+ $display3-weight: $font-weight-normal !default;
315
+ $display4-weight: $font-weight-normal !default;
316
+ $display-line-height: $headings-line-height !default;
317
+
318
+ $lead-font-size: $font-size-base * 1.25 !default;
319
+ $lead-font-weight: $font-weight-normal !default;
320
+
321
+ $small-font-size: 80% !default;
322
+
323
+ $text-muted: $gray-600 !default;
324
+
325
+ $blockquote-small-color: $gray-600 !default;
326
+ $blockquote-small-font-size: $small-font-size !default;
327
+ $blockquote-font-size: $font-size-base !default;
328
+
329
+ $hr-border-color: rgba($black, 0.1) !default;
330
+ $hr-border-width: $border-width !default;
331
+
332
+ $mark-padding: 0.2em !default;
333
+
334
+ $dt-font-weight: $font-weight-bold !default;
335
+
336
+ $kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default;
337
+ $nested-kbd-font-weight: $font-weight-bold !default;
338
+
339
+ $list-inline-padding: 0.5rem !default;
340
+
341
+ $mark-bg: #fcf8e3 !default;
342
+
343
+ $hr-margin-y: $spacer !default;
344
+
345
+ // Tables
346
+ //
347
+ // Customizes the `.table` component with basic values, each used across all table variations.
348
+
349
+ $table-cell-padding: 0.75rem !default;
350
+ $table-cell-padding-sm: 0.3rem !default;
351
+
352
+ $table-color: $body-color !default;
353
+ $table-bg: null !default;
354
+ $table-accent-bg: rgba($black, 0.05) !default;
355
+ $table-hover-color: $table-color !default;
356
+ $table-hover-bg: rgba($black, 0.075) !default;
357
+ $table-active-bg: $table-hover-bg !default;
358
+
359
+ $table-border-width: $border-width !default;
360
+ $table-border-color: $border-color !default;
361
+
362
+ $table-head-bg: $gray-200 !default;
363
+ $table-head-color: $gray-700 !default;
364
+
365
+ $table-dark-color: $white !default;
366
+ $table-dark-bg: $gray-800 !default;
367
+ $table-dark-accent-bg: rgba($white, 0.05) !default;
368
+ $table-dark-hover-color: $table-dark-color !default;
369
+ $table-dark-hover-bg: rgba($white, 0.075) !default;
370
+ $table-dark-border-color: lighten($table-dark-bg, 7.5%) !default;
371
+ $table-dark-color: $white !default;
372
+
373
+ $table-striped-order: odd !default;
374
+
375
+ $table-caption-color: $text-muted !default;
376
+
377
+ $table-bg-level: -9 !default;
378
+ $table-border-level: -6 !default;
379
+
380
+ // Buttons + Forms
381
+ //
382
+ // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
383
+
384
+ $input-btn-padding-y: 0.375rem !default;
385
+ $input-btn-padding-x: 0.75rem !default;
386
+ $input-btn-font-family: null !default;
387
+ $input-btn-font-size: $font-size-base !default;
388
+ $input-btn-line-height: $line-height-base !default;
389
+
390
+ $input-btn-focus-width: 0.2rem !default;
391
+ $input-btn-focus-color: rgba($component-active-bg, 0.25) !default;
392
+ $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
393
+
394
+ $input-btn-padding-y-sm: 0.25rem !default;
395
+ $input-btn-padding-x-sm: 0.5rem !default;
396
+ $input-btn-font-size-sm: $font-size-sm !default;
397
+ $input-btn-line-height-sm: $line-height-sm !default;
398
+
399
+ $input-btn-padding-y-lg: 0.5rem !default;
400
+ $input-btn-padding-x-lg: 1rem !default;
401
+ $input-btn-font-size-lg: $font-size-lg !default;
402
+ $input-btn-line-height-lg: $line-height-lg !default;
403
+
404
+ $input-btn-border-width: $border-width !default;
405
+
406
+ // Buttons
407
+ //
408
+ // For each of Bootstrap's buttons, define text, background, and border color.
409
+
410
+ $btn-padding-y: $input-btn-padding-y !default;
411
+ $btn-padding-x: $input-btn-padding-x !default;
412
+ $btn-font-family: $input-btn-font-family !default;
413
+ $btn-font-size: $input-btn-font-size !default;
414
+ $btn-line-height: $input-btn-line-height !default;
415
+
416
+ $btn-padding-y-sm: $input-btn-padding-y-sm !default;
417
+ $btn-padding-x-sm: $input-btn-padding-x-sm !default;
418
+ $btn-font-size-sm: $input-btn-font-size-sm !default;
419
+ $btn-line-height-sm: $input-btn-line-height-sm !default;
420
+
421
+ $btn-padding-y-lg: $input-btn-padding-y-lg !default;
422
+ $btn-padding-x-lg: $input-btn-padding-x-lg !default;
423
+ $btn-font-size-lg: $input-btn-font-size-lg !default;
424
+ $btn-line-height-lg: $input-btn-line-height-lg !default;
425
+
426
+ $btn-border-width: $input-btn-border-width !default;
427
+
428
+ $btn-font-weight: $font-weight-normal !default;
429
+ $btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default;
430
+ $btn-focus-width: $input-btn-focus-width !default;
431
+ $btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
432
+ $btn-disabled-opacity: 0.65 !default;
433
+ $btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default;
434
+
435
+ $btn-link-disabled-color: $gray-600 !default;
436
+
437
+ $btn-block-spacing-y: 0.5rem !default;
438
+
439
+ // Allows for customizing button radius independently from global border radius
440
+ $btn-border-radius: $border-radius !default;
441
+ $btn-border-radius-lg: $border-radius-lg !default;
442
+ $btn-border-radius-sm: $border-radius-sm !default;
443
+
444
+ $btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
445
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
446
+
447
+ // Forms
448
+
449
+ $label-margin-bottom: 0.5rem !default;
450
+
451
+ $input-padding-y: $input-btn-padding-y !default;
452
+ $input-padding-x: $input-btn-padding-x !default;
453
+ $input-font-family: $input-btn-font-family !default;
454
+ $input-font-size: $input-btn-font-size !default;
455
+ $input-font-weight: $font-weight-base !default;
456
+ $input-line-height: $input-btn-line-height !default;
457
+
458
+ $input-padding-y-sm: $input-btn-padding-y-sm !default;
459
+ $input-padding-x-sm: $input-btn-padding-x-sm !default;
460
+ $input-font-size-sm: $input-btn-font-size-sm !default;
461
+ $input-line-height-sm: $input-btn-line-height-sm !default;
462
+
463
+ $input-padding-y-lg: $input-btn-padding-y-lg !default;
464
+ $input-padding-x-lg: $input-btn-padding-x-lg !default;
465
+ $input-font-size-lg: $input-btn-font-size-lg !default;
466
+ $input-line-height-lg: $input-btn-line-height-lg !default;
467
+
468
+ $input-bg: $white !default;
469
+ $input-disabled-bg: $gray-200 !default;
470
+
471
+ $input-color: $gray-700 !default;
472
+ $input-border-color: $gray-400 !default;
473
+ $input-border-width: $input-btn-border-width !default;
474
+ $input-box-shadow: inset 0 1px 1px rgba($black, 0.075) !default;
475
+
476
+ $input-border-radius: $border-radius !default;
477
+ $input-border-radius-lg: $border-radius-lg !default;
478
+ $input-border-radius-sm: $border-radius-sm !default;
479
+
480
+ $input-focus-bg: $input-bg !default;
481
+ $input-focus-border-color: lighten($component-active-bg, 25%) !default;
482
+ $input-focus-color: $input-color !default;
483
+ $input-focus-width: $input-btn-focus-width !default;
484
+ $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
485
+
486
+ $input-placeholder-color: $gray-600 !default;
487
+ $input-plaintext-color: $body-color !default;
488
+
489
+ $input-height-border: $input-border-width * 2 !default;
490
+
491
+ $input-height-inner: calc(
492
+ #{$input-line-height * 1em} + #{$input-padding-y * 2}
493
+ ) !default;
494
+ $input-height-inner-half: calc(
495
+ #{$input-line-height * 0.5em} + #{$input-padding-y}
496
+ ) !default;
497
+ $input-height-inner-quarter: calc(
498
+ #{$input-line-height * 0.25em} + #{$input-padding-y / 2}
499
+ ) !default;
500
+
501
+ $input-height: calc(
502
+ #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}
503
+ ) !default;
504
+ $input-height-sm: calc(
505
+ #{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}
506
+ ) !default;
507
+ $input-height-lg: calc(
508
+ #{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}
509
+ ) !default;
510
+
511
+ $input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
512
+
513
+ $form-text-margin-top: 0.25rem !default;
514
+
515
+ $form-check-input-gutter: 1.25rem !default;
516
+ $form-check-input-margin-y: 0.3rem !default;
517
+ $form-check-input-margin-x: 0.25rem !default;
518
+
519
+ $form-check-inline-margin-x: 0.75rem !default;
520
+ $form-check-inline-input-margin-x: 0.3125rem !default;
521
+
522
+ $form-grid-gutter-width: 10px !default;
523
+ $form-group-margin-bottom: 1rem !default;
524
+
525
+ $input-group-addon-color: $input-color !default;
526
+ $input-group-addon-bg: $gray-200 !default;
527
+ $input-group-addon-border-color: $input-border-color !default;
528
+
529
+ $custom-forms-transition: background-color 0.15s ease-in-out,
530
+ border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
531
+
532
+ $custom-control-gutter: 0.5rem !default;
533
+ $custom-control-spacer-x: 1rem !default;
534
+
535
+ $custom-control-indicator-size: 1rem !default;
536
+ $custom-control-indicator-bg: $input-bg !default;
537
+
538
+ $custom-control-indicator-bg-size: 50% 50% !default;
539
+ $custom-control-indicator-box-shadow: $input-box-shadow !default;
540
+ $custom-control-indicator-border-color: $gray-500 !default;
541
+ $custom-control-indicator-border-width: $input-border-width !default;
542
+
543
+ $custom-control-indicator-disabled-bg: $input-disabled-bg !default;
544
+ $custom-control-label-disabled-color: $gray-600 !default;
545
+
546
+ $custom-control-indicator-checked-color: $component-active-color !default;
547
+ $custom-control-indicator-checked-bg: $component-active-bg !default;
548
+ $custom-control-indicator-checked-disabled-bg: rgba(
549
+ theme-color('primary'),
550
+ 0.5
551
+ ) !default;
552
+ $custom-control-indicator-checked-box-shadow: none !default;
553
+ $custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
554
+
555
+ $custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;
556
+ $custom-control-indicator-focus-border-color: $input-focus-border-color !default;
557
+
558
+ $custom-control-indicator-active-color: $component-active-color !default;
559
+ $custom-control-indicator-active-bg: lighten(
560
+ $component-active-bg,
561
+ 35%
562
+ ) !default;
563
+ $custom-control-indicator-active-box-shadow: none !default;
564
+ $custom-control-indicator-active-border-color: $custom-control-indicator-active-bg !default;
565
+
566
+ $custom-checkbox-indicator-border-radius: $border-radius !default;
567
+ $custom-checkbox-indicator-icon-checked: str-replace(
568
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"),
569
+ '#',
570
+ '%23'
571
+ ) !default;
572
+
573
+ $custom-checkbox-indicator-indeterminate-bg: $component-active-bg !default;
574
+ $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
575
+ $custom-checkbox-indicator-icon-indeterminate: str-replace(
576
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"),
577
+ '#',
578
+ '%23'
579
+ ) !default;
580
+ $custom-checkbox-indicator-indeterminate-box-shadow: none !default;
581
+ $custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
582
+
583
+ $custom-radio-indicator-border-radius: 50% !default;
584
+ $custom-radio-indicator-icon-checked: str-replace(
585
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"),
586
+ '#',
587
+ '%23'
588
+ ) !default;
589
+
590
+ $custom-switch-width: $custom-control-indicator-size * 1.75 !default;
591
+ $custom-switch-indicator-border-radius: $custom-control-indicator-size / 2 !default;
592
+ $custom-switch-indicator-size: calc(
593
+ #{$custom-control-indicator-size} - #{$custom-control-indicator-border-width *
594
+ 4}
595
+ ) !default;
596
+
597
+ $custom-select-padding-y: $input-padding-y !default;
598
+ $custom-select-padding-x: $input-padding-x !default;
599
+ $custom-select-font-family: $input-font-family !default;
600
+ $custom-select-font-size: $input-font-size !default;
601
+ $custom-select-height: $input-height !default;
602
+ $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
603
+ $custom-select-font-weight: $input-font-weight !default;
604
+ $custom-select-line-height: $input-line-height !default;
605
+ $custom-select-color: $input-color !default;
606
+ $custom-select-disabled-color: $gray-600 !default;
607
+ $custom-select-bg: $input-bg !default;
608
+ $custom-select-disabled-bg: $gray-200 !default;
609
+ $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
610
+ $custom-select-indicator-color: $gray-800 !default;
611
+ $custom-select-indicator: str-replace(
612
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"),
613
+ '#',
614
+ '%23'
615
+ ) !default;
616
+ $custom-select-background: $custom-select-indicator no-repeat right
617
+ $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
618
+
619
+ $custom-select-feedback-icon-padding-right: calc(
620
+ (1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x +
621
+ $custom-select-indicator-padding}
622
+ ) !default;
623
+ $custom-select-feedback-icon-position: center right
624
+ ($custom-select-padding-x + $custom-select-indicator-padding) !default;
625
+ $custom-select-feedback-icon-size: $input-height-inner-half
626
+ $input-height-inner-half !default;
627
+
628
+ $custom-select-border-width: $input-border-width !default;
629
+ $custom-select-border-color: $input-border-color !default;
630
+ $custom-select-border-radius: $border-radius !default;
631
+ $custom-select-box-shadow: inset 0 1px 2px rgba($black, 0.075) !default;
632
+
633
+ $custom-select-focus-border-color: $input-focus-border-color !default;
634
+ $custom-select-focus-width: $input-focus-width !default;
635
+ $custom-select-focus-box-shadow: 0 0 0 $custom-select-focus-width
636
+ $input-btn-focus-color !default;
637
+
638
+ $custom-select-padding-y-sm: $input-padding-y-sm !default;
639
+ $custom-select-padding-x-sm: $input-padding-x-sm !default;
640
+ $custom-select-font-size-sm: $input-font-size-sm !default;
641
+ $custom-select-height-sm: $input-height-sm !default;
642
+
643
+ $custom-select-padding-y-lg: $input-padding-y-lg !default;
644
+ $custom-select-padding-x-lg: $input-padding-x-lg !default;
645
+ $custom-select-font-size-lg: $input-font-size-lg !default;
646
+ $custom-select-height-lg: $input-height-lg !default;
647
+
648
+ $custom-range-track-width: 100% !default;
649
+ $custom-range-track-height: 0.5rem !default;
650
+ $custom-range-track-cursor: pointer !default;
651
+ $custom-range-track-bg: $gray-300 !default;
652
+ $custom-range-track-border-radius: 1rem !default;
653
+ $custom-range-track-box-shadow: inset 0 0.25rem 0.25rem rgba($black, 0.1) !default;
654
+
655
+ $custom-range-thumb-width: 1rem !default;
656
+ $custom-range-thumb-height: $custom-range-thumb-width !default;
657
+ $custom-range-thumb-bg: $component-active-bg !default;
658
+ $custom-range-thumb-border: 0 !default;
659
+ $custom-range-thumb-border-radius: 1rem !default;
660
+ $custom-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1) !default;
661
+ $custom-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg,
662
+ $input-focus-box-shadow !default;
663
+ $custom-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in IE/Edge
664
+ $custom-range-thumb-active-bg: lighten($component-active-bg, 35%) !default;
665
+ $custom-range-thumb-disabled-bg: $gray-500 !default;
666
+
667
+ $custom-file-height: $input-height !default;
668
+ $custom-file-height-inner: $input-height-inner !default;
669
+ $custom-file-focus-border-color: $input-focus-border-color !default;
670
+ $custom-file-focus-box-shadow: $input-focus-box-shadow !default;
671
+ $custom-file-disabled-bg: $input-disabled-bg !default;
672
+
673
+ $custom-file-padding-y: $input-padding-y !default;
674
+ $custom-file-padding-x: $input-padding-x !default;
675
+ $custom-file-line-height: $input-line-height !default;
676
+ $custom-file-font-family: $input-font-family !default;
677
+ $custom-file-font-weight: $input-font-weight !default;
678
+ $custom-file-color: $input-color !default;
679
+ $custom-file-bg: $input-bg !default;
680
+ $custom-file-border-width: $input-border-width !default;
681
+ $custom-file-border-color: $input-border-color !default;
682
+ $custom-file-border-radius: $input-border-radius !default;
683
+ $custom-file-box-shadow: $input-box-shadow !default;
684
+ $custom-file-button-color: $custom-file-color !default;
685
+ $custom-file-button-bg: $input-group-addon-bg !default;
686
+ $custom-file-text: (
687
+ en: 'Browse',
688
+ ja: '選択',
689
+ ) !default;
690
+
691
+ // Form validation
692
+
693
+ $form-feedback-margin-top: $form-text-margin-top !default;
694
+ $form-feedback-font-size: $small-font-size !default;
695
+ $form-feedback-valid-color: theme-color('success') !default;
696
+ $form-feedback-invalid-color: theme-color('danger') !default;
697
+
698
+ $form-feedback-icon-valid-color: $form-feedback-valid-color !default;
699
+ $form-feedback-icon-valid: str-replace(
700
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"),
701
+ '#',
702
+ '%23'
703
+ ) !default;
704
+ $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
705
+ $form-feedback-icon-invalid: str-replace(
706
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"),
707
+ '#',
708
+ '%23'
709
+ ) !default;
710
+
711
+ $form-validation-states: () !default;
712
+ // stylelint-disable-next-line scss/dollar-variable-default
713
+ $form-validation-states: map-merge(
714
+ (
715
+ 'valid': (
716
+ 'color': $form-feedback-valid-color,
717
+ 'icon': $form-feedback-icon-valid,
718
+ ),
719
+ 'invalid': (
720
+ 'color': $form-feedback-invalid-color,
721
+ 'icon': $form-feedback-icon-invalid,
722
+ ),
723
+ ),
724
+ $form-validation-states
725
+ );
726
+
727
+ // Z-index master list
728
+ //
729
+ // Warning: Avoid customizing these values. They're used for a bird's eye view
730
+ // of components dependent on the z-axis and are designed to all work together.
731
+
732
+ $zindex-dropdown: 1000 !default;
733
+ $zindex-sticky: 1020 !default;
734
+ $zindex-fixed: 1030 !default;
735
+ $zindex-modal-backdrop: 1040 !default;
736
+ $zindex-modal: 1050 !default;
737
+ $zindex-popover: 1060 !default;
738
+ $zindex-tooltip: 1070 !default;
739
+
740
+ $component-active-color: $white !default;
741
+ $component-active-bg: theme-color('primary') !default;
742
+
743
+ // Navs
744
+
745
+ $nav-link-padding-y: 0.5rem !default;
746
+ $nav-link-padding-x: 1rem !default;
747
+ $nav-link-disabled-color: $gray-600 !default;
748
+
749
+ $nav-tabs-border-color: $gray-300 !default;
750
+ $nav-tabs-border-width: $border-width !default;
751
+ $nav-tabs-border-radius: $border-radius !default;
752
+ $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
753
+ $nav-tabs-link-active-color: $gray-700 !default;
754
+ $nav-tabs-link-active-bg: $body-bg !default;
755
+ $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
756
+
757
+ $nav-pills-border-radius: $border-radius !default;
758
+ $nav-pills-link-active-color: $component-active-color !default;
759
+ $nav-pills-link-active-bg: $component-active-bg !default;
760
+
761
+ $nav-divider-color: $gray-200 !default;
762
+ $nav-divider-margin-y: $spacer / 2 !default;
763
+
764
+ // Navbar
765
+
766
+ $navbar-padding-y: $spacer * 1.2 !default;
767
+ $navbar-padding-x: $spacer * 1.5 !default;
768
+
769
+ $navbar-nav-link-padding-x: 0.5rem !default;
770
+
771
+ $navbar-brand-font-size: $font-size-lg !default;
772
+ // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
773
+ $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
774
+ $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
775
+ $navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
776
+
777
+ $navbar-toggler-padding-y: 0.25rem !default;
778
+ $navbar-toggler-padding-x: 0.75rem !default;
779
+ $navbar-toggler-font-size: $font-size-lg !default;
780
+ $navbar-toggler-border-radius: $btn-border-radius !default;
781
+
782
+ $navbar-dark-color: rgba($white, 0.5) !default;
783
+ $navbar-dark-hover-color: rgba($white, 0.75) !default;
784
+ $navbar-dark-active-color: $white !default;
785
+ $navbar-dark-disabled-color: rgba($white, 0.25) !default;
786
+ $navbar-dark-toggler-icon-bg: str-replace(
787
+ url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"),
788
+ '#',
789
+ '%23'
790
+ ) !default;
791
+ $navbar-dark-toggler-border-color: rgba($white, 0.1) !default;
792
+
793
+ $navbar-light-color: rgba($black, 0.5) !default;
794
+ $navbar-light-hover-color: rgba($black, 0.7) !default;
795
+ $navbar-light-active-color: rgba($black, 0.9) !default;
796
+ $navbar-light-disabled-color: rgba($black, 0.3) !default;
797
+ $navbar-light-toggler-icon-bg: str-replace(
798
+ url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"),
799
+ '#',
800
+ '%23'
801
+ ) !default;
802
+ $navbar-light-toggler-border-color: rgba($black, 0.1) !default;
803
+
804
+ $navbar-light-brand-color: $navbar-light-active-color !default;
805
+ $navbar-light-brand-hover-color: $navbar-light-active-color !default;
806
+ $navbar-dark-brand-color: $navbar-dark-active-color !default;
807
+ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
808
+
809
+ // Dropdowns
810
+ //
811
+ // Dropdown menu container and contents.
812
+
813
+ $dropdown-min-width: 10rem !default;
814
+ $dropdown-padding-y: 0.5rem !default;
815
+ $dropdown-spacer: 0.125rem !default;
816
+ $dropdown-font-size: $font-size-base !default;
817
+ $dropdown-color: $body-color !default;
818
+ $dropdown-bg: $white !default;
819
+ $dropdown-border-color: rgba($black, 0.15) !default;
820
+ $dropdown-border-radius: $border-radius !default;
821
+ $dropdown-border-width: $border-width !default;
822
+ $dropdown-inner-border-radius: calc(
823
+ #{$dropdown-border-radius} - #{$dropdown-border-width}
824
+ ) !default;
825
+ $dropdown-divider-bg: $gray-200 !default;
826
+ $dropdown-divider-margin-y: $nav-divider-margin-y !default;
827
+ $dropdown-box-shadow: 0 0.5rem 1rem rgba($black, 0.175) !default;
828
+
829
+ $dropdown-link-color: $gray-900 !default;
830
+ $dropdown-link-hover-color: darken($gray-900, 5%) !default;
831
+ $dropdown-link-hover-bg: $gray-100 !default;
832
+
833
+ $dropdown-link-active-color: $component-active-color !default;
834
+ $dropdown-link-active-bg: $component-active-bg !default;
835
+
836
+ $dropdown-link-disabled-color: $gray-600 !default;
837
+
838
+ $dropdown-item-padding-y: 0.25rem !default;
839
+ $dropdown-item-padding-x: 1.5rem !default;
840
+
841
+ $dropdown-header-color: $gray-600 !default;
842
+
843
+ // Pagination
844
+
845
+ $pagination-padding-y: 0.5rem !default;
846
+ $pagination-padding-x: 0.75rem !default;
847
+ $pagination-padding-y-sm: 0.25rem !default;
848
+ $pagination-padding-x-sm: 0.5rem !default;
849
+ $pagination-padding-y-lg: 0.75rem !default;
850
+ $pagination-padding-x-lg: 1.5rem !default;
851
+ $pagination-line-height: 1.25 !default;
852
+
853
+ $pagination-color: $link-color !default;
854
+ $pagination-bg: $white !default;
855
+ $pagination-border-width: $border-width !default;
856
+ $pagination-border-color: $gray-300 !default;
857
+
858
+ $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
859
+ $pagination-focus-outline: 0 !default;
860
+
861
+ $pagination-hover-color: $link-hover-color !default;
862
+ $pagination-hover-bg: $gray-200 !default;
863
+ $pagination-hover-border-color: $gray-300 !default;
864
+
865
+ $pagination-active-color: $component-active-color !default;
866
+ $pagination-active-bg: $component-active-bg !default;
867
+ $pagination-active-border-color: $pagination-active-bg !default;
868
+
869
+ $pagination-disabled-color: $gray-600 !default;
870
+ $pagination-disabled-bg: $white !default;
871
+ $pagination-disabled-border-color: $gray-300 !default;
872
+
873
+ // Jumbotron
874
+
875
+ $jumbotron-padding: 2rem !default;
876
+ $jumbotron-color: null !default;
877
+ $jumbotron-bg: $gray-200 !default;
878
+
879
+ // Cards
880
+
881
+ $card-spacer-y: 0.75rem !default;
882
+ $card-spacer-x: 1.25rem !default;
883
+ $card-border-width: $border-width !default;
884
+ $card-border-radius: $border-radius !default;
885
+ $card-border-color: rgba($black, 0.125) !default;
886
+ $card-inner-border-radius: calc(
887
+ #{$card-border-radius} - #{$card-border-width}
888
+ ) !default;
889
+ $card-cap-bg: rgba($black, 0.03) !default;
890
+ $card-cap-color: null !default;
891
+ $card-color: null !default;
892
+ $card-bg: $white !default;
893
+
894
+ $card-img-overlay-padding: 1.25rem !default;
895
+
896
+ $card-group-margin: $grid-gutter-width / 2 !default;
897
+ $card-deck-margin: $card-group-margin !default;
898
+
899
+ $card-columns-count: 3 !default;
900
+ $card-columns-gap: 1.25rem !default;
901
+ $card-columns-margin: $card-spacer-y !default;
902
+
903
+ // Tooltips
904
+
905
+ $tooltip-font-size: $font-size-sm !default;
906
+ $tooltip-max-width: 200px !default;
907
+ $tooltip-color: $white !default;
908
+ $tooltip-bg: $black !default;
909
+ $tooltip-border-radius: $border-radius !default;
910
+ $tooltip-opacity: 0.9 !default;
911
+ $tooltip-padding-y: 0.25rem !default;
912
+ $tooltip-padding-x: 0.5rem !default;
913
+ $tooltip-margin: 0 !default;
914
+
915
+ $tooltip-arrow-width: 0.8rem !default;
916
+ $tooltip-arrow-height: 0.4rem !default;
917
+ $tooltip-arrow-color: $tooltip-bg !default;
918
+
919
+ // Form tooltips must come after regular tooltips
920
+ $form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
921
+ $form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
922
+ $form-feedback-tooltip-font-size: $tooltip-font-size !default;
923
+ $form-feedback-tooltip-line-height: $line-height-base !default;
924
+ $form-feedback-tooltip-opacity: $tooltip-opacity !default;
925
+ $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
926
+
927
+ $input-btn-border-width: $border-width !default;
928
+
929
+ // Popovers
930
+
931
+ $popover-font-size: $font-size-sm !default;
932
+ $popover-bg: $white !default;
933
+ $popover-max-width: 276px !default;
934
+ $popover-border-width: $border-width !default;
935
+ $popover-border-color: rgba($black, 0.2) !default;
936
+ $popover-border-radius: $border-radius-lg !default;
937
+ $popover-box-shadow: 0 0.25rem 0.5rem rgba($black, 0.2) !default;
938
+
939
+ $popover-header-bg: darken($popover-bg, 3%) !default;
940
+ $popover-header-color: $headings-color !default;
941
+ $popover-header-padding-y: 0.5rem !default;
942
+ $popover-header-padding-x: 0.75rem !default;
943
+
944
+ $popover-body-color: $body-color !default;
945
+ $popover-body-padding-y: $popover-header-padding-y !default;
946
+ $popover-body-padding-x: $popover-header-padding-x !default;
947
+
948
+ $popover-arrow-width: 1rem !default;
949
+ $popover-arrow-height: 0.5rem !default;
950
+ $popover-arrow-color: $popover-bg !default;
951
+
952
+ $popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default;
953
+
954
+ // Toasts
955
+
956
+ $toast-max-width: 350px !default;
957
+ $toast-padding-x: 0.75rem !default;
958
+ $toast-padding-y: 0.25rem !default;
959
+ $toast-font-size: 0.875rem !default;
960
+ $toast-color: null !default;
961
+ $toast-background-color: rgba($white, 0.85) !default;
962
+ $toast-border-width: 1px !default;
963
+ $toast-border-color: rgba(0, 0, 0, 0.1) !default;
964
+ $toast-border-radius: 0.25rem !default;
965
+ $toast-box-shadow: 0 0.25rem 0.75rem rgba($black, 0.1) !default;
966
+
967
+ $toast-header-color: $gray-600 !default;
968
+ $toast-header-background-color: rgba($white, 0.85) !default;
969
+ $toast-header-border-color: rgba(0, 0, 0, 0.05) !default;
970
+
971
+ // Badges
972
+
973
+ $badge-font-size: 75% !default;
974
+ $badge-font-weight: $font-weight-bold !default;
975
+ $badge-padding-y: 0.25em !default;
976
+ $badge-padding-x: 0.4em !default;
977
+ $badge-border-radius: $border-radius !default;
978
+
979
+ $badge-transition: $btn-transition !default;
980
+ $badge-focus-width: $input-btn-focus-width !default;
981
+
982
+ $badge-pill-padding-x: 0.6em !default;
983
+ // Use a higher than normal value to ensure completely rounded edges when
984
+ // customizing padding or font-size on labels.
985
+ $badge-pill-border-radius: 10rem !default;
986
+
987
+ // Modals
988
+
989
+ // Padding applied to the modal body
990
+ $modal-inner-padding: 1rem !default;
991
+
992
+ $modal-dialog-margin: 0.5rem !default;
993
+ $modal-dialog-margin-y-sm-up: 1.75rem !default;
994
+
995
+ $modal-title-line-height: $line-height-base !default;
996
+
997
+ $modal-content-color: null !default;
998
+ $modal-content-bg: $white !default;
999
+ $modal-content-border-color: rgba($black, 0.2) !default;
1000
+ $modal-content-border-width: $border-width !default;
1001
+ $modal-content-border-radius: $border-radius-lg !default;
1002
+ $modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default;
1003
+ $modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default;
1004
+
1005
+ $modal-backdrop-bg: $black !default;
1006
+ $modal-backdrop-opacity: 0.5 !default;
1007
+ $modal-header-border-color: $border-color !default;
1008
+ $modal-footer-border-color: $modal-header-border-color !default;
1009
+ $modal-header-border-width: $modal-content-border-width !default;
1010
+ $modal-footer-border-width: $modal-header-border-width !default;
1011
+ $modal-header-padding-y: 1rem !default;
1012
+ $modal-header-padding-x: 1rem !default;
1013
+ $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
1014
+
1015
+ $modal-xl: 1140px !default;
1016
+ $modal-lg: 800px !default;
1017
+ $modal-md: 500px !default;
1018
+ $modal-sm: 300px !default;
1019
+
1020
+ $modal-fade-transform: translate(0, -50px) !default;
1021
+ $modal-show-transform: none !default;
1022
+ $modal-transition: transform 0.3s ease-out !default;
1023
+
1024
+ $list-group-action-color: $gray-700 !default;
1025
+ $list-group-action-hover-color: $list-group-action-color !default;
1026
+
1027
+ // Alerts
1028
+ //
1029
+ // Define alert colors, border radius, and padding.
1030
+
1031
+ $alert-padding-y: 0.75rem !default;
1032
+ $alert-padding-x: 1.25rem !default;
1033
+ $alert-margin-bottom: 1rem !default;
1034
+ $alert-border-radius: $border-radius !default;
1035
+ $alert-link-font-weight: $font-weight-bold !default;
1036
+ $alert-border-width: $border-width !default;
1037
+
1038
+ $alert-bg-level: -10 !default;
1039
+ $alert-border-level: -9 !default;
1040
+ $alert-color-level: 6 !default;
1041
+
1042
+ // Figures
1043
+
1044
+ // Progress bars
1045
+
1046
+ $progress-height: 1rem !default;
1047
+ $progress-font-size: $font-size-base * 0.75 !default;
1048
+ $progress-bg: $gray-200 !default;
1049
+ $progress-border-radius: $border-radius !default;
1050
+ $progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1) !default;
1051
+ $progress-bar-color: $white !default;
1052
+ $progress-bar-bg: theme-color('primary') !default;
1053
+ $progress-bar-animation-timing: 1s linear infinite !default;
1054
+ $progress-bar-transition: width 0.6s ease !default;
1055
+
1056
+ $breadcrumb-padding-y: 0.75rem !default;
1057
+ $breadcrumb-padding-x: 1rem !default;
1058
+ $breadcrumb-item-padding: 0.5rem !default;
1059
+
1060
+ // List group
1061
+
1062
+ $list-group-color: null !default;
1063
+ $list-group-bg: $white !default;
1064
+ $list-group-border-color: rgba($black, 0.125) !default;
1065
+ $list-group-border-width: $border-width !default;
1066
+ $list-group-border-radius: $border-radius !default;
1067
+
1068
+ $list-group-item-padding-y: 0.75rem !default;
1069
+ $list-group-item-padding-x: 1.25rem !default;
1070
+
1071
+ $list-group-hover-bg: $gray-100 !default;
1072
+ $list-group-active-color: $component-active-color !default;
1073
+ $list-group-active-bg: $component-active-bg !default;
1074
+ $list-group-active-border-color: $list-group-active-bg !default;
1075
+
1076
+ $list-group-disabled-color: $gray-600 !default;
1077
+ $list-group-disabled-bg: $list-group-bg !default;
1078
+
1079
+ $list-group-action-color: $gray-700 !default;
1080
+ $list-group-action-hover-color: $list-group-action-color !default;
1081
+
1082
+ $list-group-action-active-color: $body-color !default;
1083
+ $list-group-action-active-bg: $gray-200 !default;
1084
+
1085
+ $carousel-control-icon-width: 20px !default;
1086
+
1087
+ // Image thumbnails
1088
+
1089
+ $thumbnail-padding: 0.25rem !default;
1090
+ $thumbnail-bg: $body-bg !default;
1091
+ $thumbnail-border-width: $border-width !default;
1092
+ $thumbnail-border-color: $gray-300 !default;
1093
+ $thumbnail-border-radius: $border-radius !default;
1094
+ $thumbnail-box-shadow: 0 1px 2px rgba($black, 0.075) !default;
1095
+
1096
+ // Figures
1097
+
1098
+ $figure-caption-font-size: 90% !default;
1099
+ $figure-caption-color: $gray-600 !default;
1100
+
1101
+ // Close
1102
+
1103
+ // Breadcrumbs
1104
+
1105
+ $breadcrumb-padding-y: 0.75rem !default;
1106
+ $breadcrumb-padding-x: 1rem !default;
1107
+ $breadcrumb-item-padding: 0.5rem !default;
1108
+
1109
+ $breadcrumb-margin-bottom: 1rem !default;
1110
+
1111
+ $breadcrumb-bg: $gray-200 !default;
1112
+ $breadcrumb-divider-color: $gray-600 !default;
1113
+ $breadcrumb-active-color: $gray-600 !default;
1114
+ $breadcrumb-divider: quote('/') !default;
1115
+
1116
+ $breadcrumb-border-radius: $border-radius !default;
1117
+
1118
+ // Carousel
1119
+
1120
+ $carousel-control-color: $white !default;
1121
+ $carousel-control-width: 15% !default;
1122
+ $carousel-control-opacity: 0.5 !default;
1123
+ $carousel-control-hover-opacity: 0.9 !default;
1124
+ $carousel-control-transition: opacity 0.15s ease !default;
1125
+
1126
+ $carousel-indicator-width: 30px !default;
1127
+ $carousel-indicator-height: 3px !default;
1128
+ $carousel-indicator-hit-area-height: 10px !default;
1129
+ $carousel-indicator-spacer: 3px !default;
1130
+ $carousel-indicator-active-bg: $white !default;
1131
+ $carousel-indicator-transition: opacity 0.6s ease !default;
1132
+
1133
+ $carousel-caption-width: 70% !default;
1134
+ $carousel-caption-color: $white !default;
1135
+
1136
+ $carousel-control-icon-width: 20px !default;
1137
+
1138
+ $carousel-control-prev-icon-bg: str-replace(
1139
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"),
1140
+ '#',
1141
+ '%23'
1142
+ ) !default;
1143
+ $carousel-control-next-icon-bg: str-replace(
1144
+ url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"),
1145
+ '#',
1146
+ '%23'
1147
+ ) !default;
1148
+
1149
+ $carousel-transition-duration: 0.6s !default;
1150
+ $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
1151
+
1152
+ // Spinners
1153
+
1154
+ $spinner-width: 2rem !default;
1155
+ $spinner-height: $spinner-width !default;
1156
+ $spinner-border-width: 0.25em !default;
1157
+
1158
+ $spinner-width-sm: 1rem !default;
1159
+ $spinner-height-sm: $spinner-width-sm !default;
1160
+ $spinner-border-width-sm: 0.2em !default;
1161
+
1162
+ // Close
1163
+
1164
+ $close-font-size: $font-size-base * 1.5 !default;
1165
+ $close-font-weight: $font-weight-bold !default;
1166
+ $close-color: $black !default;
1167
+ $close-text-shadow: 0 1px 0 $white !default;
1168
+
1169
+ // Code
1170
+
1171
+ $code-font-size: 87.5% !default;
1172
+ $code-color: $pink !default;
1173
+
1174
+ $kbd-padding-y: 0.2rem !default;
1175
+ $kbd-padding-x: 0.4rem !default;
1176
+ $kbd-font-size: $code-font-size !default;
1177
+ $kbd-color: $white !default;
1178
+ $kbd-bg: $gray-900 !default;
1179
+
1180
+ $pre-color: $gray-900 !default;
1181
+ $pre-scrollable-max-height: 340px !default;
1182
+
1183
+ // Utilities
1184
+
1185
+ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex,
1186
+ inline-flex !default;
1187
+ $overflows: auto, hidden !default;
1188
+ $positions: static, relative, absolute, fixed, sticky !default;
1189
+
1190
+ // Printing
1191
+
1192
+ $print-page-size: a3 !default;
1193
+ $print-body-min-width: map-get($grid-breakpoints, 'lg') !default;