trestle 0.10.0.pre → 0.10.0.pre2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.github/workflows/release.yml +26 -0
- data/.github/workflows/rspec.yml +6 -2
- data/Gemfile +14 -5
- data/app/assets/bundle/trestle/admin.css +4 -4
- data/app/assets/bundle/trestle/admin.js +2 -2
- data/app/controllers/concerns/trestle/controller/turbo_stream.rb +12 -0
- data/app/controllers/concerns/trestle/resource/controller/actions.rb +3 -3
- data/app/controllers/trestle/application_controller.rb +1 -1
- data/app/helpers/trestle/modal_helper.rb +0 -5
- data/app/helpers/trestle/turbo/frame_helper.rb +29 -0
- data/app/helpers/trestle/turbo/stream_helper.rb +9 -0
- data/app/helpers/trestle/turbo/tag_builder.rb +21 -0
- data/app/helpers/trestle/url_helper.rb +1 -1
- data/app/views/layouts/trestle/admin.html.erb +1 -1
- data/app/views/layouts/trestle/admin.turbo_stream.erb +2 -9
- data/app/views/trestle/application/_header.html.erb +12 -10
- data/app/views/trestle/resource/create.turbo_stream.erb +1 -5
- data/app/views/trestle/resource/destroy.turbo_stream.erb +1 -1
- data/app/views/trestle/resource/edit.html.erb +2 -0
- data/app/views/trestle/resource/index.html.erb +5 -0
- data/app/views/trestle/resource/new.html.erb +5 -0
- data/app/views/trestle/resource/show.html.erb +2 -0
- data/app/views/trestle/resource/update.turbo_stream.erb +1 -5
- data/app/views/trestle/shared/_sidebar.html.erb +2 -2
- data/frontend/css/components/_alerts.scss +22 -20
- data/frontend/css/components/_avatar.scss +12 -12
- data/frontend/css/components/_background.scss +1 -1
- data/frontend/css/components/_breadcrumbs.scss +8 -29
- data/frontend/css/components/_buttons.scss +3 -3
- data/frontend/css/components/_datepicker.scss +3 -3
- data/frontend/css/components/_dropdown.scss +18 -26
- data/frontend/css/components/_forms.scss +4 -4
- data/frontend/css/components/_grid.scss +29 -0
- data/frontend/css/components/_media-grid.scss +1 -1
- data/frontend/css/components/_modal.scss +4 -4
- data/frontend/css/components/_pagination.scss +4 -8
- data/frontend/css/components/_popover.scss +1 -1
- data/frontend/css/components/_scopes.scss +4 -10
- data/frontend/css/components/_select.scss +8 -9
- data/frontend/css/components/_sort.scss +1 -1
- data/frontend/css/components/_table.scss +5 -5
- data/frontend/css/components/_tabs.scss +11 -18
- data/frontend/css/components/_tags.scss +16 -6
- data/frontend/css/components/_toolbars.scss +9 -9
- data/frontend/css/core/_functions.scss +0 -8
- data/frontend/css/core/_theme.scss +3 -0
- data/frontend/css/core/_typography.scss +12 -19
- data/frontend/css/index.scss +3 -1
- data/frontend/css/layout/_base.scss +4 -2
- data/frontend/css/layout/_content-header.scss +71 -0
- data/frontend/css/layout/_footer.scss +5 -7
- data/frontend/css/layout/_main-content.scss +107 -0
- data/frontend/css/layout/_navigation.scss +111 -49
- data/frontend/css/layout/_sidebar.scss +58 -34
- data/frontend/css/variables/_bootstrap.scss +30 -21
- data/frontend/css/variables/_trestle.scss +17 -17
- data/frontend/js/controllers/batch_action_controller.js +59 -0
- data/frontend/js/controllers/checkbox_select_controller.js +3 -0
- data/lib/trestle/engine.rb +18 -16
- data/lib/trestle/resource/toolbar.rb +18 -8
- data/lib/trestle/sprockets_compressor.rb +16 -0
- data/lib/trestle/toolbar/context.rb +7 -4
- data/lib/trestle/toolbar/menu.rb +8 -5
- data/lib/trestle/version.rb +1 -1
- data/package.json +1 -1
- data/trestle.gemspec +5 -9
- data/yarn.lock +17 -32
- metadata +34 -69
- data/app/controllers/concerns/trestle/controller/turbo.rb +0 -21
- data/app/helpers/trestle/turbo_frame_helper.rb +0 -34
- data/frontend/css/layout/_content.scss +0 -173
|
@@ -1,24 +1,28 @@
|
|
|
1
1
|
.app-nav {
|
|
2
2
|
flex: 1;
|
|
3
|
-
padding:
|
|
3
|
+
padding: 0.625rem 0;
|
|
4
4
|
|
|
5
5
|
&, a {
|
|
6
6
|
color: $sidebar-link-color;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
ul {
|
|
10
|
-
margin:
|
|
10
|
+
margin: 0.625rem 0;
|
|
11
11
|
padding: 0;
|
|
12
12
|
list-style: none;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
a {
|
|
16
|
-
display:
|
|
15
|
+
.nav-item a {
|
|
16
|
+
display: flex;
|
|
17
|
+
align-items: center;
|
|
18
|
+
gap: 0.625rem;
|
|
17
19
|
|
|
18
20
|
font-weight: normal;
|
|
19
|
-
font-size: 0.
|
|
21
|
+
font-size: 0.8125rem;
|
|
20
22
|
|
|
21
|
-
padding:
|
|
23
|
+
padding: 0.75rem 1rem;
|
|
24
|
+
|
|
25
|
+
position: relative;
|
|
22
26
|
|
|
23
27
|
&:hover, &:focus {
|
|
24
28
|
color: $sidebar-link-color;
|
|
@@ -31,12 +35,31 @@
|
|
|
31
35
|
}
|
|
32
36
|
}
|
|
33
37
|
|
|
38
|
+
.nav-item.active a {
|
|
39
|
+
border-left: $sidebar-active-border solid var(--primary);
|
|
40
|
+
padding-left: calc(1rem - #{$sidebar-active-border});
|
|
41
|
+
|
|
42
|
+
background: $sidebar-active-bg;
|
|
43
|
+
color: white;
|
|
44
|
+
}
|
|
45
|
+
|
|
34
46
|
.nav-icon {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
47
|
+
flex-shrink: 0;
|
|
48
|
+
|
|
49
|
+
display: inline-flex;
|
|
50
|
+
align-items: center;
|
|
51
|
+
justify-content: center;
|
|
52
|
+
|
|
53
|
+
width: 1.25rem;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.nav-label {
|
|
57
|
+
white-space: nowrap;
|
|
58
|
+
overflow: hidden;
|
|
59
|
+
text-overflow: ellipsis;
|
|
60
|
+
|
|
61
|
+
opacity: 1;
|
|
62
|
+
transition: opacity var(--sidebar-transition-duration) var(--sidebar-transition-timing);
|
|
40
63
|
}
|
|
41
64
|
|
|
42
65
|
.nav-header a {
|
|
@@ -47,39 +70,38 @@
|
|
|
47
70
|
font-weight: bold;
|
|
48
71
|
line-height: 1;
|
|
49
72
|
|
|
50
|
-
font-size:
|
|
51
|
-
padding:
|
|
73
|
+
font-size: 0.6875rem;
|
|
74
|
+
padding: 0.5rem 1.125rem;
|
|
52
75
|
|
|
53
|
-
|
|
54
|
-
|
|
76
|
+
display: flex;
|
|
77
|
+
justify-content: space-between;
|
|
78
|
+
align-items: center;
|
|
79
|
+
|
|
80
|
+
white-space: nowrap;
|
|
55
81
|
|
|
56
|
-
|
|
57
|
-
|
|
82
|
+
span {
|
|
83
|
+
opacity: 1;
|
|
84
|
+
transition: opacity var(--sidebar-transition-duration) var(--sidebar-transition-timing);
|
|
85
|
+
}
|
|
58
86
|
|
|
87
|
+
&::after {
|
|
88
|
+
@include icon-fa($fa-var-caret-down);
|
|
59
89
|
opacity: 0.75;
|
|
60
90
|
}
|
|
61
91
|
|
|
62
|
-
&:hover,
|
|
92
|
+
&:hover,
|
|
93
|
+
&:focus {
|
|
63
94
|
background: none;
|
|
64
95
|
|
|
65
|
-
&::before,
|
|
66
|
-
|
|
96
|
+
&::before,
|
|
97
|
+
&::after {
|
|
98
|
+
opacity: 1;
|
|
67
99
|
}
|
|
68
100
|
}
|
|
69
101
|
}
|
|
70
102
|
|
|
71
|
-
.active a {
|
|
72
|
-
border-left: $sidebar-active-border solid var(--primary);
|
|
73
|
-
padding-left: 18px - $sidebar-active-border;
|
|
74
|
-
|
|
75
|
-
background: $sidebar-active-bg;
|
|
76
|
-
color: white;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
103
|
.badge {
|
|
80
|
-
|
|
81
|
-
position: relative;
|
|
82
|
-
top: 1px;
|
|
104
|
+
margin-left: auto;
|
|
83
105
|
}
|
|
84
106
|
|
|
85
107
|
.collapsed {
|
|
@@ -98,17 +120,17 @@
|
|
|
98
120
|
}
|
|
99
121
|
|
|
100
122
|
@mixin collapsed-nav-header {
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
123
|
+
span {
|
|
124
|
+
opacity: 0;
|
|
125
|
+
}
|
|
104
126
|
|
|
105
127
|
&::after {
|
|
106
128
|
display: none;
|
|
107
129
|
|
|
108
130
|
position: absolute;
|
|
109
|
-
top:
|
|
131
|
+
top: 50%;
|
|
110
132
|
left: 50%;
|
|
111
|
-
|
|
133
|
+
translate: -50% -5px;
|
|
112
134
|
|
|
113
135
|
text-indent: 0;
|
|
114
136
|
}
|
|
@@ -117,24 +139,42 @@
|
|
|
117
139
|
content: "";
|
|
118
140
|
|
|
119
141
|
position: absolute;
|
|
120
|
-
left: 15px;
|
|
121
|
-
right: 15px;
|
|
122
142
|
top: 50%;
|
|
123
|
-
|
|
143
|
+
left: 1rem;
|
|
144
|
+
right: 1rem;
|
|
145
|
+
margin-top: -2px;
|
|
124
146
|
|
|
125
147
|
border-bottom: 1px solid $sidebar-active-bg;
|
|
126
148
|
opacity: 0.75;
|
|
127
149
|
}
|
|
128
150
|
}
|
|
129
151
|
|
|
152
|
+
@mixin collapsed-nav-label {
|
|
153
|
+
opacity: 0;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
@mixin collapsed-nav-badge {
|
|
157
|
+
text-indent: -99999px;
|
|
158
|
+
position: absolute;
|
|
159
|
+
width: 0.5rem;
|
|
160
|
+
height: 0.5rem;
|
|
161
|
+
padding: 0;
|
|
162
|
+
top: 0.625rem;
|
|
163
|
+
left: 2rem;
|
|
164
|
+
}
|
|
165
|
+
|
|
130
166
|
@include media-breakpoint-between(md, xl) {
|
|
131
167
|
.nav-tooltip {
|
|
132
168
|
display: block !important;
|
|
133
169
|
}
|
|
134
170
|
|
|
135
171
|
.app-nav {
|
|
136
|
-
.nav-label
|
|
137
|
-
|
|
172
|
+
.nav-label {
|
|
173
|
+
@include collapsed-nav-label;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.badge {
|
|
177
|
+
@include collapsed-nav-badge;
|
|
138
178
|
}
|
|
139
179
|
|
|
140
180
|
.nav-header a {
|
|
@@ -151,9 +191,9 @@
|
|
|
151
191
|
.sidebar-expanded {
|
|
152
192
|
.app-nav {
|
|
153
193
|
.nav-header a {
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
194
|
+
span {
|
|
195
|
+
opacity: 1;
|
|
196
|
+
}
|
|
157
197
|
|
|
158
198
|
&::before {
|
|
159
199
|
display: none;
|
|
@@ -162,12 +202,21 @@
|
|
|
162
202
|
&::after {
|
|
163
203
|
display: block;
|
|
164
204
|
position: static;
|
|
165
|
-
|
|
205
|
+
translate: 0;
|
|
166
206
|
}
|
|
167
207
|
}
|
|
168
208
|
|
|
169
|
-
.nav-label
|
|
170
|
-
|
|
209
|
+
.nav-label {
|
|
210
|
+
opacity: 1;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.badge {
|
|
214
|
+
position: static;
|
|
215
|
+
width: auto;
|
|
216
|
+
height: auto;
|
|
217
|
+
text-indent: 0;
|
|
218
|
+
padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
|
|
219
|
+
}
|
|
171
220
|
}
|
|
172
221
|
|
|
173
222
|
.nav-tooltip {
|
|
@@ -179,8 +228,12 @@
|
|
|
179
228
|
@include media-breakpoint-up(xl) {
|
|
180
229
|
.sidebar-collapsed {
|
|
181
230
|
.app-nav {
|
|
182
|
-
.nav-label
|
|
183
|
-
|
|
231
|
+
.nav-label {
|
|
232
|
+
@include collapsed-nav-label;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.badge {
|
|
236
|
+
@include collapsed-nav-badge;
|
|
184
237
|
}
|
|
185
238
|
|
|
186
239
|
.nav-header a {
|
|
@@ -199,3 +252,12 @@
|
|
|
199
252
|
}
|
|
200
253
|
}
|
|
201
254
|
}
|
|
255
|
+
|
|
256
|
+
@media (prefers-reduced-motion) {
|
|
257
|
+
.app-nav {
|
|
258
|
+
.nav-label,
|
|
259
|
+
.nav-header a span {
|
|
260
|
+
transition: none;
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
}
|
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
@use "sass:math";
|
|
2
2
|
|
|
3
|
+
.app-wrapper {
|
|
4
|
+
--sidebar-width: #{$sidebar-width};
|
|
5
|
+
--sidebar-width-collapsed: #{$sidebar-width-collapsed};
|
|
6
|
+
--sidebar-transition-duration: #{$sidebar-transition-duration};
|
|
7
|
+
--sidebar-transition-timing: ease-out;
|
|
8
|
+
--sidebar-bg: #{$sidebar-bg};
|
|
9
|
+
}
|
|
10
|
+
|
|
3
11
|
.app-sidebar {
|
|
4
|
-
background:
|
|
12
|
+
background: var(--sidebar-bg);
|
|
5
13
|
|
|
6
|
-
width:
|
|
14
|
+
width: var(--sidebar-width);
|
|
7
15
|
padding: 0;
|
|
8
16
|
|
|
9
17
|
flex-shrink: 0;
|
|
@@ -15,6 +23,8 @@
|
|
|
15
23
|
flex-wrap: nowrap;
|
|
16
24
|
|
|
17
25
|
align-items: stretch;
|
|
26
|
+
|
|
27
|
+
transition: width var(--sidebar-transition-duration) var(--sidebar-transition-timing);
|
|
18
28
|
}
|
|
19
29
|
|
|
20
30
|
.app-sidebar-header {
|
|
@@ -25,10 +35,12 @@
|
|
|
25
35
|
display: flex;
|
|
26
36
|
align-items: stretch;
|
|
27
37
|
|
|
38
|
+
overflow: hidden;
|
|
39
|
+
|
|
28
40
|
.navbar-toggler {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
41
|
+
--#{$prefix}navbar-toggler-bg: #{$sidebar-mobile-toggle-bg};
|
|
42
|
+
--#{$prefix}navbar-toggler-color: #{$sidebar-mobile-toggle-border-color};
|
|
43
|
+
--#{$prefix}navbar-toggler-border-color: #{$sidebar-mobile-toggle-border-color};
|
|
32
44
|
|
|
33
45
|
outline: none;
|
|
34
46
|
|
|
@@ -37,28 +49,29 @@
|
|
|
37
49
|
margin-left: math.div($grid-gutter-width, 2);
|
|
38
50
|
margin-right: math.div($grid-gutter-width, 2);
|
|
39
51
|
|
|
40
|
-
background: var(
|
|
52
|
+
background: var(--#{$prefix}navbar-toggler-bg);
|
|
41
53
|
|
|
42
54
|
&:hover, &:focus {
|
|
43
|
-
|
|
44
|
-
|
|
55
|
+
--#{$prefix}navbar-toggler-border-color: #{$sidebar-mobile-toggle-active-border-color};
|
|
56
|
+
--#{$prefix}navbar-toggler-bg: #{$sidebar-mobile-toggle-active-bg};
|
|
45
57
|
}
|
|
46
58
|
}
|
|
47
59
|
|
|
48
60
|
.navbar-toggler-icon {
|
|
49
|
-
|
|
61
|
+
--#{$prefix}navbar-toggler-icon-bg: #{$sidebar-mobile-toggle-icon-bg};
|
|
50
62
|
}
|
|
51
63
|
}
|
|
52
64
|
|
|
53
65
|
.app-sidebar-title {
|
|
54
|
-
flex: 1;
|
|
66
|
+
flex: 1 0 var(--sidebar-width);
|
|
67
|
+
width: var(--sidebar-width);
|
|
55
68
|
|
|
56
69
|
display: flex;
|
|
57
70
|
align-items: center;
|
|
58
71
|
|
|
59
|
-
padding:
|
|
72
|
+
padding: 0.5rem 0.875rem;
|
|
60
73
|
|
|
61
|
-
font-size: 1.
|
|
74
|
+
font-size: 1.25rem;
|
|
62
75
|
font-weight: 500;
|
|
63
76
|
text-shadow: rgba(black, 0.5) 0 1px 1px;
|
|
64
77
|
color: white;
|
|
@@ -72,7 +85,7 @@
|
|
|
72
85
|
max-height: 100%;
|
|
73
86
|
|
|
74
87
|
& + .title-large {
|
|
75
|
-
margin-left:
|
|
88
|
+
margin-left: 0.75rem;
|
|
76
89
|
}
|
|
77
90
|
}
|
|
78
91
|
|
|
@@ -112,8 +125,9 @@
|
|
|
112
125
|
color: $sidebar-toggle-color;
|
|
113
126
|
border: none;
|
|
114
127
|
|
|
115
|
-
font-size: 1.
|
|
116
|
-
|
|
128
|
+
font-size: 1.25rem;
|
|
129
|
+
width: var(--sidebar-width-collapsed);
|
|
130
|
+
padding: 0.625rem;
|
|
117
131
|
|
|
118
132
|
cursor: pointer;
|
|
119
133
|
|
|
@@ -138,19 +152,13 @@
|
|
|
138
152
|
}
|
|
139
153
|
|
|
140
154
|
.app-wrapper {
|
|
141
|
-
|
|
142
|
-
margin-right: 0;
|
|
155
|
+
width: calc(100% + var(--sidebar-width));
|
|
143
156
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
transition-property: margin-left, margin-right;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
157
|
+
translate: calc(var(--sidebar-width) * -1);
|
|
158
|
+
transition: translate var(--sidebar-transition-duration) ease-out;
|
|
149
159
|
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
margin-left: 0;
|
|
153
|
-
margin-right: -$sidebar-width;
|
|
160
|
+
.mobile-nav-expanded & {
|
|
161
|
+
translate: 0;
|
|
154
162
|
}
|
|
155
163
|
}
|
|
156
164
|
|
|
@@ -161,14 +169,14 @@
|
|
|
161
169
|
.app-sidebar-header {
|
|
162
170
|
position: absolute;
|
|
163
171
|
top: 0;
|
|
164
|
-
left:
|
|
172
|
+
left: var(--sidebar-width);
|
|
165
173
|
right: 0;
|
|
166
174
|
z-index: 1;
|
|
167
175
|
}
|
|
168
176
|
|
|
169
177
|
.app-sidebar-title {
|
|
170
178
|
justify-content: center;
|
|
171
|
-
padding:
|
|
179
|
+
padding: 0.5rem 0.25rem;
|
|
172
180
|
|
|
173
181
|
// Match right margin with navbar toggler width:
|
|
174
182
|
// (margin + border + font-size * icon-width + padding)
|
|
@@ -182,14 +190,17 @@
|
|
|
182
190
|
|
|
183
191
|
@include media-breakpoint-between(md, xl) {
|
|
184
192
|
.app-sidebar {
|
|
185
|
-
width:
|
|
193
|
+
width: var(--sidebar-width-collapsed);
|
|
186
194
|
|
|
187
195
|
.app-sidebar-header {
|
|
188
196
|
text-align: center;
|
|
189
197
|
}
|
|
190
198
|
|
|
191
199
|
.app-sidebar-title {
|
|
192
|
-
|
|
200
|
+
width: var(--sidebar-width-collapsed);
|
|
201
|
+
flex-basis: var(--sidebar-width-collapsed);
|
|
202
|
+
|
|
203
|
+
padding: 0.5rem 0.25rem;
|
|
193
204
|
justify-content: center;
|
|
194
205
|
|
|
195
206
|
img {
|
|
@@ -210,14 +221,17 @@
|
|
|
210
221
|
}
|
|
211
222
|
|
|
212
223
|
.sidebar-expanded & {
|
|
213
|
-
width:
|
|
224
|
+
width: var(--sidebar-width);
|
|
214
225
|
|
|
215
226
|
.app-sidebar-header {
|
|
216
227
|
text-align: left;
|
|
217
228
|
}
|
|
218
229
|
|
|
219
230
|
.app-sidebar-title {
|
|
220
|
-
|
|
231
|
+
width: var(--sidebar-width);
|
|
232
|
+
flex-basis: var(--sidebar-width);
|
|
233
|
+
|
|
234
|
+
padding: 0.5rem 0.25rem;
|
|
221
235
|
justify-content: flex-start;
|
|
222
236
|
|
|
223
237
|
img {
|
|
@@ -243,14 +257,17 @@
|
|
|
243
257
|
@include media-breakpoint-up(xl) {
|
|
244
258
|
.app-sidebar {
|
|
245
259
|
.sidebar-collapsed & {
|
|
246
|
-
width:
|
|
260
|
+
width: var(--sidebar-width-collapsed);
|
|
247
261
|
|
|
248
262
|
.app-sidebar-header {
|
|
249
263
|
text-align: center;
|
|
250
264
|
}
|
|
251
265
|
|
|
252
266
|
.app-sidebar-title {
|
|
253
|
-
|
|
267
|
+
width: var(--sidebar-width-collapsed);
|
|
268
|
+
flex-basis: var(--sidebar-width-collapsed);
|
|
269
|
+
|
|
270
|
+
padding: 0.5rem 0.25rem;
|
|
254
271
|
justify-content: center;
|
|
255
272
|
|
|
256
273
|
img {
|
|
@@ -272,3 +289,10 @@
|
|
|
272
289
|
}
|
|
273
290
|
}
|
|
274
291
|
}
|
|
292
|
+
|
|
293
|
+
@media (prefers-reduced-motion) {
|
|
294
|
+
.app-sidebar,
|
|
295
|
+
.app-wrapper {
|
|
296
|
+
transition: none;
|
|
297
|
+
}
|
|
298
|
+
}
|
|
@@ -23,7 +23,7 @@ $min-contrast-ratio: 1.7;
|
|
|
23
23
|
$enable-shadows: true;
|
|
24
24
|
|
|
25
25
|
// Decrease default grid spacing
|
|
26
|
-
$grid-gutter-width: 1.
|
|
26
|
+
$grid-gutter-width: 1.25rem;
|
|
27
27
|
|
|
28
28
|
|
|
29
29
|
// Characters which are escaped by the escape-svg function
|
|
@@ -49,15 +49,17 @@ $link-decoration: none;
|
|
|
49
49
|
$headings-font-weight: 400;
|
|
50
50
|
$headings-margin-bottom: 1rem;
|
|
51
51
|
|
|
52
|
-
$
|
|
53
|
-
|
|
54
|
-
$
|
|
55
|
-
$
|
|
56
|
-
$
|
|
57
|
-
$
|
|
52
|
+
$font-size-base: 0.875rem;
|
|
53
|
+
|
|
54
|
+
$h1-font-size: 1.75rem;
|
|
55
|
+
$h2-font-size: 1.5rem;
|
|
56
|
+
$h3-font-size: 1.25rem;
|
|
57
|
+
$h4-font-size: 1.125rem;
|
|
58
|
+
$h5-font-size: 0.95rem;
|
|
59
|
+
$h6-font-size: 0.875rem;
|
|
58
60
|
|
|
59
61
|
$hr-color: rgba(black, 0.375);
|
|
60
|
-
$hr-margin-y: 1.
|
|
62
|
+
$hr-margin-y: 1.25rem;
|
|
61
63
|
|
|
62
64
|
|
|
63
65
|
// Navs
|
|
@@ -80,8 +82,11 @@ $nav-tabs-link-active-color: $body-color;
|
|
|
80
82
|
|
|
81
83
|
// Navbar
|
|
82
84
|
|
|
83
|
-
$navbar-
|
|
84
|
-
$navbar-dark-color:
|
|
85
|
+
$navbar-light-color: rgba(white, 0.75);
|
|
86
|
+
$navbar-dark-color: rgba(white, 0.75);
|
|
87
|
+
|
|
88
|
+
$navbar-toggler-padding-x: 0.375rem;
|
|
89
|
+
$navbar-toggler-focus-width: 0.25rem;
|
|
85
90
|
|
|
86
91
|
|
|
87
92
|
// Breadcrumbs
|
|
@@ -94,7 +99,7 @@ $breadcrumb-divider-color: #cccccc;
|
|
|
94
99
|
|
|
95
100
|
// Tables
|
|
96
101
|
|
|
97
|
-
$table-cell-padding-x: 0.
|
|
102
|
+
$table-cell-padding-x: 0.5rem;
|
|
98
103
|
$table-cell-padding-y: 0.375rem;
|
|
99
104
|
|
|
100
105
|
$table-bg: transparent;
|
|
@@ -105,7 +110,7 @@ $table-border-color: rgba(black, 0.13);
|
|
|
105
110
|
|
|
106
111
|
// Alerts
|
|
107
112
|
|
|
108
|
-
$alert-padding-y: 1.
|
|
113
|
+
$alert-padding-y: 1.25rem;
|
|
109
114
|
$alert-border-radius: 0.1rem;
|
|
110
115
|
|
|
111
116
|
|
|
@@ -134,7 +139,8 @@ $badge-padding-x: 0.6em;
|
|
|
134
139
|
|
|
135
140
|
// Buttons
|
|
136
141
|
|
|
137
|
-
$btn-padding-x-sm: 0.
|
|
142
|
+
$btn-padding-x-sm: 0.625rem;
|
|
143
|
+
$btn-padding-y-sm: 0.25rem;
|
|
138
144
|
|
|
139
145
|
|
|
140
146
|
// Forms
|
|
@@ -163,7 +169,7 @@ $form-check-padding-start: $form-check-input-width + 0.6em;
|
|
|
163
169
|
$form-switch-width: 2.25em;
|
|
164
170
|
$form-switch-focus-color: #aaaaaa;
|
|
165
171
|
|
|
166
|
-
$form-select-padding-x-sm: 0.
|
|
172
|
+
$form-select-padding-x-sm: 0.625rem;
|
|
167
173
|
$form-select-padding-x-lg: 0.75rem;
|
|
168
174
|
|
|
169
175
|
|
|
@@ -175,7 +181,7 @@ $dropdown-box-shadow: $box-shadow-sm;
|
|
|
175
181
|
$dropdown-arrow-width: 7px;
|
|
176
182
|
$dropdown-arrow-outer-width: $dropdown-arrow-width + 1px;
|
|
177
183
|
$dropdown-header-color: #111111;
|
|
178
|
-
$dropdown-font-size: 0.
|
|
184
|
+
$dropdown-font-size: 0.8125rem;
|
|
179
185
|
|
|
180
186
|
$dropdown-link-active-bg: var(--primary);
|
|
181
187
|
|
|
@@ -208,24 +214,27 @@ $tooltip-color: white;
|
|
|
208
214
|
|
|
209
215
|
// Popovers
|
|
210
216
|
|
|
211
|
-
$popover-font-size: 0.
|
|
217
|
+
$popover-font-size: 0.75rem;
|
|
212
218
|
$popover-box-shadow: $dropdown-box-shadow;
|
|
213
219
|
|
|
214
220
|
$popover-header-bg: #f7f7f7;
|
|
215
221
|
$popover-header-border: #ebebeb;
|
|
216
222
|
|
|
223
|
+
$popover-header-padding-x: 0.625rem;
|
|
224
|
+
$popover-header-padding-y: 0.375rem;
|
|
225
|
+
|
|
226
|
+
$popover-body-padding-x: 0.625rem;
|
|
217
227
|
$popover-body-padding-y: 0.5rem;
|
|
218
|
-
$popover-body-padding-x: 0.75rem;
|
|
219
228
|
|
|
220
229
|
$popover-arrow-width: $dropdown-arrow-width;
|
|
221
230
|
|
|
222
231
|
|
|
223
232
|
// Modals
|
|
224
233
|
|
|
225
|
-
$modal-inner-padding: 1.
|
|
234
|
+
$modal-inner-padding: 1.25rem;
|
|
226
235
|
|
|
227
|
-
$modal-header-padding-x: 1.
|
|
228
|
-
$modal-header-padding-y:
|
|
236
|
+
$modal-header-padding-x: 1.25rem;
|
|
237
|
+
$modal-header-padding-y: 1rem;
|
|
229
238
|
|
|
230
239
|
$modal-content-bg: white;
|
|
231
240
|
$modal-content-border-radius: 0;
|
|
@@ -262,7 +271,7 @@ $s2bs5-clear-hover-bg-lg: $s2bs5-clear-bg-lg;
|
|
|
262
271
|
$s2bs5-clear-tag-icon: $btn-close-bg;
|
|
263
272
|
$s2bs5-clear-tag-bg: transparent escape-svg($s2bs5-clear-tag-icon) center / $s2b25-clear-height-sm auto no-repeat;
|
|
264
273
|
|
|
265
|
-
$s2bs5-padding-x: 0.
|
|
274
|
+
$s2bs5-padding-x: 0.625rem;
|
|
266
275
|
$s2bs5-padding-y: 0.375rem;
|
|
267
276
|
|
|
268
277
|
$s2bs5-multi-item-padding-x: 0.375rem;
|
|
@@ -21,7 +21,7 @@ $theme-bg-variations: (
|
|
|
21
21
|
$header-bg: white;
|
|
22
22
|
$header-color: #333333;
|
|
23
23
|
|
|
24
|
-
$header-height:
|
|
24
|
+
$header-height: 3.125rem;
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
// Footer
|
|
@@ -29,13 +29,15 @@ $header-height: 50px;
|
|
|
29
29
|
$footer-bg: #f9f9f9;
|
|
30
30
|
$footer-color: #888888;
|
|
31
31
|
|
|
32
|
+
$footer-padding: 0.375rem 1.25rem;
|
|
33
|
+
|
|
32
34
|
|
|
33
35
|
// Sidebar
|
|
34
36
|
|
|
35
37
|
$sidebar-bg: #222222;
|
|
36
38
|
$sidebar-hover-bg: #1a1a1a;
|
|
37
39
|
$sidebar-active-bg: #393939;
|
|
38
|
-
$sidebar-active-border:
|
|
40
|
+
$sidebar-active-border: 0.25rem;
|
|
39
41
|
|
|
40
42
|
$sidebar-link-color: #919191;
|
|
41
43
|
$sidebar-group-color: #595959;
|
|
@@ -56,10 +58,10 @@ $sidebar-mobile-toggle-active-border-width: $sidebar-mobile-toggle-border-width;
|
|
|
56
58
|
$sidebar-mobile-toggle-active-border-color: $sidebar-mobile-toggle-border-color;
|
|
57
59
|
$sidebar-mobile-toggle-active-border: $sidebar-mobile-toggle-border-width solid $sidebar-mobile-toggle-active-border-color;
|
|
58
60
|
|
|
59
|
-
$sidebar-width:
|
|
60
|
-
$sidebar-width-collapsed:
|
|
61
|
+
$sidebar-width: 15.625rem;
|
|
62
|
+
$sidebar-width-collapsed: 3.5rem;
|
|
61
63
|
|
|
62
|
-
$sidebar-transition-duration:
|
|
64
|
+
$sidebar-transition-duration: 200ms;
|
|
63
65
|
|
|
64
66
|
|
|
65
67
|
// Content
|
|
@@ -67,23 +69,21 @@ $sidebar-transition-duration: 250ms;
|
|
|
67
69
|
$content-header-bg: #fafafa;
|
|
68
70
|
$content-sidebar-bg: #f9f9f9;
|
|
69
71
|
|
|
70
|
-
$content-sidebar-width:
|
|
72
|
+
$content-sidebar-width: 17.5rem;
|
|
71
73
|
|
|
72
|
-
$main-content-header-bg:
|
|
73
|
-
$main-content-header-
|
|
74
|
-
$main-content-header-border: 1px solid rgba(black, 0.1);
|
|
74
|
+
$main-content-header-bg: $content-sidebar-bg;
|
|
75
|
+
$main-content-header-border: 1px solid rgba(black, 0.1);
|
|
75
76
|
|
|
76
|
-
$main-content-footer-bg:
|
|
77
|
-
$main-content-footer-
|
|
78
|
-
$main-content-footer-border: 1px solid rgba(black, 0.1);
|
|
77
|
+
$main-content-footer-bg: $content-sidebar-bg;
|
|
78
|
+
$main-content-footer-border: 1px solid rgba(black, 0.1);
|
|
79
79
|
|
|
80
80
|
|
|
81
81
|
// Typography
|
|
82
82
|
|
|
83
83
|
$headings-border: 1px solid rgba(black, 0.1);
|
|
84
84
|
|
|
85
|
-
$header-font-size-scale: 0.
|
|
86
|
-
$sidebar-font-size-scale: 0.
|
|
85
|
+
$header-font-size-scale: 0.8125;
|
|
86
|
+
$sidebar-font-size-scale: 0.8125;
|
|
87
87
|
|
|
88
88
|
$badge-hover-scale: -15%;
|
|
89
89
|
|
|
@@ -96,13 +96,13 @@ $tag-border-scale: 0;
|
|
|
96
96
|
$tag-hover-bg-scale: -15%;
|
|
97
97
|
$tag-hover-border-scale: 15%;
|
|
98
98
|
|
|
99
|
-
$tag-spacing-x: 0.
|
|
100
|
-
$tag-spacing-y: 0.
|
|
99
|
+
$tag-spacing-x: 0.25rem;
|
|
100
|
+
$tag-spacing-y: 0.2rem;
|
|
101
101
|
|
|
102
102
|
|
|
103
103
|
// Scopes
|
|
104
104
|
|
|
105
|
-
$scope-padding: 0.
|
|
105
|
+
$scope-padding: 0.2rem 0.625rem;
|
|
106
106
|
|
|
107
107
|
$scope-color: rgba(black, 0.4);
|
|
108
108
|
$scope-bg: rgba(black, 0.035);
|