trestle 0.10.0.pre → 0.10.0.pre2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. checksums.yaml +4 -4
  2. data/.github/workflows/release.yml +26 -0
  3. data/.github/workflows/rspec.yml +6 -2
  4. data/Gemfile +14 -5
  5. data/app/assets/bundle/trestle/admin.css +4 -4
  6. data/app/assets/bundle/trestle/admin.js +2 -2
  7. data/app/controllers/concerns/trestle/controller/turbo_stream.rb +12 -0
  8. data/app/controllers/concerns/trestle/resource/controller/actions.rb +3 -3
  9. data/app/controllers/trestle/application_controller.rb +1 -1
  10. data/app/helpers/trestle/modal_helper.rb +0 -5
  11. data/app/helpers/trestle/turbo/frame_helper.rb +29 -0
  12. data/app/helpers/trestle/turbo/stream_helper.rb +9 -0
  13. data/app/helpers/trestle/turbo/tag_builder.rb +21 -0
  14. data/app/helpers/trestle/url_helper.rb +1 -1
  15. data/app/views/layouts/trestle/admin.html.erb +1 -1
  16. data/app/views/layouts/trestle/admin.turbo_stream.erb +2 -9
  17. data/app/views/trestle/application/_header.html.erb +12 -10
  18. data/app/views/trestle/resource/create.turbo_stream.erb +1 -5
  19. data/app/views/trestle/resource/destroy.turbo_stream.erb +1 -1
  20. data/app/views/trestle/resource/edit.html.erb +2 -0
  21. data/app/views/trestle/resource/index.html.erb +5 -0
  22. data/app/views/trestle/resource/new.html.erb +5 -0
  23. data/app/views/trestle/resource/show.html.erb +2 -0
  24. data/app/views/trestle/resource/update.turbo_stream.erb +1 -5
  25. data/app/views/trestle/shared/_sidebar.html.erb +2 -2
  26. data/frontend/css/components/_alerts.scss +22 -20
  27. data/frontend/css/components/_avatar.scss +12 -12
  28. data/frontend/css/components/_background.scss +1 -1
  29. data/frontend/css/components/_breadcrumbs.scss +8 -29
  30. data/frontend/css/components/_buttons.scss +3 -3
  31. data/frontend/css/components/_datepicker.scss +3 -3
  32. data/frontend/css/components/_dropdown.scss +18 -26
  33. data/frontend/css/components/_forms.scss +4 -4
  34. data/frontend/css/components/_grid.scss +29 -0
  35. data/frontend/css/components/_media-grid.scss +1 -1
  36. data/frontend/css/components/_modal.scss +4 -4
  37. data/frontend/css/components/_pagination.scss +4 -8
  38. data/frontend/css/components/_popover.scss +1 -1
  39. data/frontend/css/components/_scopes.scss +4 -10
  40. data/frontend/css/components/_select.scss +8 -9
  41. data/frontend/css/components/_sort.scss +1 -1
  42. data/frontend/css/components/_table.scss +5 -5
  43. data/frontend/css/components/_tabs.scss +11 -18
  44. data/frontend/css/components/_tags.scss +16 -6
  45. data/frontend/css/components/_toolbars.scss +9 -9
  46. data/frontend/css/core/_functions.scss +0 -8
  47. data/frontend/css/core/_theme.scss +3 -0
  48. data/frontend/css/core/_typography.scss +12 -19
  49. data/frontend/css/index.scss +3 -1
  50. data/frontend/css/layout/_base.scss +4 -2
  51. data/frontend/css/layout/_content-header.scss +71 -0
  52. data/frontend/css/layout/_footer.scss +5 -7
  53. data/frontend/css/layout/_main-content.scss +107 -0
  54. data/frontend/css/layout/_navigation.scss +111 -49
  55. data/frontend/css/layout/_sidebar.scss +58 -34
  56. data/frontend/css/variables/_bootstrap.scss +30 -21
  57. data/frontend/css/variables/_trestle.scss +17 -17
  58. data/frontend/js/controllers/batch_action_controller.js +59 -0
  59. data/frontend/js/controllers/checkbox_select_controller.js +3 -0
  60. data/lib/trestle/engine.rb +18 -16
  61. data/lib/trestle/resource/toolbar.rb +18 -8
  62. data/lib/trestle/sprockets_compressor.rb +16 -0
  63. data/lib/trestle/toolbar/context.rb +7 -4
  64. data/lib/trestle/toolbar/menu.rb +8 -5
  65. data/lib/trestle/version.rb +1 -1
  66. data/package.json +1 -1
  67. data/trestle.gemspec +5 -9
  68. data/yarn.lock +17 -32
  69. metadata +34 -69
  70. data/app/controllers/concerns/trestle/controller/turbo.rb +0 -21
  71. data/app/helpers/trestle/turbo_frame_helper.rb +0 -34
  72. data/frontend/css/layout/_content.scss +0 -173
@@ -1,24 +1,28 @@
1
1
  .app-nav {
2
2
  flex: 1;
3
- padding: 10px 0;
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: 10px 0;
10
+ margin: 0.625rem 0;
11
11
  padding: 0;
12
12
  list-style: none;
13
13
  }
14
14
 
15
- a {
16
- display: block;
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.9rem;
21
+ font-size: 0.8125rem;
20
22
 
21
- padding: 12px 18px;
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
- display: inline-block;
36
- text-align: center;
37
- width: 18px;
38
- margin-right: 8px;
39
- vertical-align: 0;
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: 11px;
51
- padding: 8px 20px;
73
+ font-size: 0.6875rem;
74
+ padding: 0.5rem 1.125rem;
52
75
 
53
- &::after {
54
- @include icon-fa($fa-var-caret-down);
76
+ display: flex;
77
+ justify-content: space-between;
78
+ align-items: center;
79
+
80
+ white-space: nowrap;
55
81
 
56
- float: right;
57
- margin-top: 2px;
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, &:focus {
92
+ &:hover,
93
+ &:focus {
63
94
  background: none;
64
95
 
65
- &::before, &::after {
66
- opacity: 1 !important;
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
- float: right;
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
- height: 0;
102
- padding: 13px 15px 14px;
103
- text-indent: -99999px;
123
+ span {
124
+ opacity: 0;
125
+ }
104
126
 
105
127
  &::after {
106
128
  display: none;
107
129
 
108
130
  position: absolute;
109
- top: 4px;
131
+ top: 50%;
110
132
  left: 50%;
111
- margin-left: -3px;
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
- margin-top: -4px;
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, .badge {
137
- display: none;
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
- height: auto;
155
- padding: 8px 20px;
156
- text-indent: 0;
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
- margin-left: 0;
205
+ translate: 0;
166
206
  }
167
207
  }
168
208
 
169
- .nav-label { display: inline; }
170
- .badge { display: block; }
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, .badge {
183
- display: none;
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: $sidebar-bg;
12
+ background: var(--sidebar-bg);
5
13
 
6
- width: $sidebar-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
- --bs-navbar-toggler-bg: #{$sidebar-mobile-toggle-bg};
30
- --bs-navbar-toggler-color: #{$sidebar-mobile-toggle-border-color};
31
- --bs-navbar-toggler-border-color: #{$sidebar-mobile-toggle-border-color};
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(--bs-navbar-toggler-bg);
52
+ background: var(--#{$prefix}navbar-toggler-bg);
41
53
 
42
54
  &:hover, &:focus {
43
- --bs-navbar-toggler-border-color: #{$sidebar-mobile-toggle-active-border-color};
44
- --bs-navbar-toggler-bg: #{$sidebar-mobile-toggle-active-bg};
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
- --bs-navbar-toggler-icon-bg: #{$sidebar-mobile-toggle-icon-bg};
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: 10px 15px;
72
+ padding: 0.5rem 0.875rem;
60
73
 
61
- font-size: 1.4rem;
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: 10px;
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.4rem;
116
- padding: 10px 20px;
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
- margin-left: -$sidebar-width;
142
- margin-right: 0;
155
+ width: calc(100% + var(--sidebar-width));
143
156
 
144
- &.animate {
145
- transition: all $sidebar-transition-duration ease-out;
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
- .mobile-nav-expanded {
151
- .app-wrapper {
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: $sidebar-width;
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: 10px 5px;
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: $sidebar-width-collapsed;
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
- padding: 10px 5px;
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: $sidebar-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
- padding: 10px 15px;
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: $sidebar-width-collapsed;
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
- padding: 10px 5px;
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.375rem;
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
- $h1-font-size: 2rem;
53
- $h2-font-size: 1.75rem;
54
- $h3-font-size: 1.5rem;
55
- $h4-font-size: 1.25rem;
56
- $h5-font-size: 1.1rem;
57
- $h6-font-size: 1rem;
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.5rem;
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-toggler-padding-x: 0.4rem;
84
- $navbar-dark-color: rgba(white, 0.75);
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.625rem;
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.5rem;
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.65rem;
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.62rem;
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.9rem;
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.9rem;
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.5rem;
234
+ $modal-inner-padding: 1.25rem;
226
235
 
227
- $modal-header-padding-x: 1.5rem;
228
- $modal-header-padding-y: 1.05rem;
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.75rem;
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: 50px;
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: 4px;
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: 250px;
60
- $sidebar-width-collapsed: 54px;
61
+ $sidebar-width: 15.625rem;
62
+ $sidebar-width-collapsed: 3.5rem;
61
63
 
62
- $sidebar-transition-duration: 250ms;
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: 285px;
72
+ $content-sidebar-width: 17.5rem;
71
73
 
72
- $main-content-header-bg: $content-sidebar-bg;
73
- $main-content-header-padding: 12px 20px;
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: $content-sidebar-bg;
77
- $main-content-footer-padding: 12px 20px;
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.925;
86
- $sidebar-font-size-scale: 0.925;
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.325rem;
100
- $tag-spacing-y: 0.25rem;
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.25rem 0.675rem;
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);