_variables.scss
8.49 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
// --- BootstrapVue custom SCSS variables ---
//
// Users can override these variables in their custom SCSS
//
// Variables beginning with `$bv-` are used to enable/disable specific section CSS generation
// Variables beginning with `$b-` are used to control values within the CSS generation
// --- Custom inputs (adds sizing support) ---
// Indicator height (and sometimes width)
$b-custom-control-indicator-size-lg: $custom-control-indicator-size * 1.25 !default;
$b-custom-control-indicator-size-sm: $custom-control-indicator-size * 0.875 !default;
// Indicator background
$b-custom-control-indicator-bg-size-lg: $custom-control-indicator-bg-size !default;
$b-custom-control-indicator-bg-size-sm: $custom-control-indicator-bg-size !default;
// Gutter widths
$b-custom-control-gutter-lg: $custom-control-gutter * 1.25 !default;
$b-custom-control-gutter-sm: $custom-control-gutter * 0.875 !default;
// Custom radio sizes (uses defaults of 50%, since radios are round)
$b-custom-radio-indicator-border-radius-lg: $custom-radio-indicator-border-radius !default;
$b-custom-radio-indicator-border-radius-sm: $custom-radio-indicator-border-radius !default;
// Custom checkbox sizes
$b-custom-checkbox-indicator-border-radius-lg: $border-radius-lg !default;
$b-custom-checkbox-indicator-border-radius-sm: $border-radius-sm !default;
// Custom switch sizes
$b-custom-switch-width-lg: $b-custom-control-indicator-size-lg * 1.75 !default;
$b-custom-switch-width-sm: $b-custom-control-indicator-size-sm * 1.75 !default;
$b-custom-switch-indicator-border-radius-lg: $b-custom-control-indicator-size-lg * 0.5 !default;
$b-custom-switch-indicator-border-radius-sm: $b-custom-control-indicator-size-sm * 0.5 !default;
$b-custom-switch-indicator-size-lg: calc(
#{$b-custom-control-indicator-size-lg} - #{$custom-control-indicator-border-width * 4}
) !default;
$b-custom-switch-indicator-size-sm: calc(
#{$b-custom-control-indicator-size-sm} - #{$custom-control-indicator-border-width * 4}
) !default;
// Custom file sizes
$b-custom-file-font-size-lg: $input-font-size-lg !default;
$b-custom-file-font-size-sm: $input-font-size-sm !default;
$b-custom-file-line-height-lg: $input-line-height-lg !default;
$b-custom-file-line-height-sm: $input-line-height-sm !default;
$b-custom-file-height-lg: $input-height-lg !default;
$b-custom-file-height-sm: $input-height-sm !default;
$b-custom-file-border-radius-lg: $input-border-radius-lg !default;
$b-custom-file-border-radius-sm: $input-border-radius-sm !default;
$b-custom-file-padding-y-lg: $input-padding-y-lg !default;
$b-custom-file-padding-y-sm: $input-padding-y-sm !default;
$b-custom-file-padding-x-lg: $input-padding-x-lg !default;
$b-custom-file-padding-x-sm: $input-padding-x-sm !default;
$b-custom-file-height-inner-lg: calc(
#{$b-custom-file-line-height-lg * 1em} + #{$b-custom-file-padding-y-lg * 2}
) !default;
$b-custom-file-height-inner-sm: calc(
#{$b-custom-file-line-height-sm * 1em} + #{$b-custom-file-padding-y-sm * 2}
) !default;
// --- Icons ---
$b-icon-vertical-offset: -0.15em;
// Animations
$b-icon-animation-cylon-duration: 0.75s !default;
$b-icon-animation-cylon-vertical-duration: $b-icon-animation-cylon-duration !default;
$b-icon-animation-fade-duration: 0.75s !default;
$b-icon-animation-spin-duration: 2s !default;
$b-icon-animation-spin-reverse-duration: $b-icon-animation-spin-duration !default;
$b-icon-animation-spin-pulse-duration: 1s !default;
$b-icon-animation-spin-reverse-pulse-duration: $b-icon-animation-spin-pulse-duration !default;
$b-icon-animation-throb-duration: 0.75s !default;
// --- Sidebar ---
$b-sidebar-width: 320px !default;
$b-sidebar-transition-duration: 0.3s !default;
$b-sidebar-zindex: calc(#{$zindex-fixed} + 5) !default;
$b-sidebar-header-font-size: 1.5rem !default;
$b-sidebar-header-padding-y: $navbar-padding-y !default;
$b-sidebar-header-padding-x: $navbar-padding-x !default;
// --- Tables ---
// Table busy state
$b-table-busy-opacity: 0.55 !default;
// Table sorting
$b-table-sort-icon-bg-width: 0.65em !default;
$b-table-sort-icon-bg-height: 1em !default;
// Sort icons are square, but "squished" horizontally by the above variables
$b-table-sort-icon-bg-not-sorted: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/></svg>") !default;
$b-table-sort-icon-bg-ascending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='black' d='M51 1l25 23 24 22H1l25-22z'/><path fill='black' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
$b-table-sort-icon-bg-descending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='black' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/><path fill='black' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
// Icons to use on dark table or dark header/footer (lighter color icons)
// We simply just replace the fill color 'black' white 'white'
$b-table-sort-icon-bg-dark-not-sorted: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22zM51 101l25-23 24-22H1l25 22z'/></svg>") !default;
$b-table-sort-icon-bg-dark-ascending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='white' d='M51 1l25 23 24 22H1l25-22z'/><path fill='white' opacity='.3' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
$b-table-sort-icon-bg-dark-descending: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='101' height='101' view-box='0 0 101 101' preserveAspectRatio='none'><path fill='white' opacity='.3' d='M51 1l25 23 24 22H1l25-22z'/><path fill='white' d='M51 101l25-23 24-22H1l25 22z'/></svg>") !default;
// Flag to enable sticky table header and column CSS generation
$bv-enable-table-sticky: true !default;
// Default max-height for tables with sticky headers
$b-table-sticky-header-max-height: 300px !default;
// Flag to enable table stacked CSS generation
$bv-enable-table-stacked: true !default;
// Table stacked defaults
$b-table-stacked-heading-width: 40% !default;
$b-table-stacked-gap: 1rem !default;
// Bootstrap v4.3 is missing the "active" variant for dark tables
// Which translates to `bg-active`, but only for tables
$table-dark-active-bg: $table-dark-hover-bg !default;
// --- Toasts ---
// Toaster defaults
$b-toaster-zindex: 1100 !default;
$b-toaster-offset-top: 0.5rem !default;
$b-toaster-offset-bottom: $b-toaster-offset-top !default;
$b-toaster-offset-left: $b-toaster-offset-top !default;
$b-toaster-offset-right: $b-toaster-offset-top !default;
// Default toast opacity
// Value from 0 to 1, or 0% to 100%
// Bootstrap default is 0.85 (extracted from the `$toast-background-color` value)
// Bootstrap does not have this as a variable, so we add it in.
$b-toast-background-opacity: alpha($toast-background-color) !default;
// Toast variant levels wrt theme color value
$b-toast-bg-level: $alert-bg-level !default;
$b-toast-border-level: $alert-border-level !default;
$b-toast-color-level: $alert-color-level !default;
// --- Tooltips ---
// Flag to enable tooltip variant CSS generation
$bv-enable-tooltip-variants: true !default;
// Tooltip background variant level wrt theme color value
$b-tooltip-bg-level: 0 !default;
// --- Popovers ---
// Flag to enable popover variant CSS generation
$bv-enable-popover-variants: true !default;
// Popover variant levels wrt theme color value
$b-popover-bg-level: $alert-bg-level !default;
$b-popover-border-level: $alert-border-level !default;
$b-popover-color-level: $alert-color-level !default;
// --- Avatar ---
$b-avatar-size: 2.5rem !default;
$b-avatar-size-sm: 1.5rem !default;
$b-avatar-size-lg: 3.5rem !default;
$b-avatar-font-size-scale: 0.4 !default;
$b-avatar-badge-font-size-scale: $b-avatar-font-size-scale * 0.7 !default;
// --- Skeleton ---
$b-skeleton-background-color: rgba(0, 0, 0, 0.12) !default;
$b-skeleton-loading-cursor: wait !default;
$b-skeleton-animation-duration: 1.75s !default;
$b-skeleton-text-spacing: map-get($spacers, 1) !default;
$b-skeleton-btn-width: 75px !default;
$b-skeleton-animate-wave-color: hsla(0, 0%, 100%, 0.4) !default;
$b-skeleton-animate-wave-background: linear-gradient(
90deg,
transparent,
$b-skeleton-animate-wave-color,
transparent
) !default;