trestle 0.10.0.pre → 0.10.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (87) 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/README.md +1 -1
  6. data/app/assets/bundle/trestle/admin.css +9 -9
  7. data/app/assets/bundle/trestle/admin.js +13 -13
  8. data/app/assets/bundle/trestle/fa-brands-400.ttf +0 -0
  9. data/app/assets/bundle/trestle/fa-brands-400.woff2 +0 -0
  10. data/app/assets/bundle/trestle/fa-regular-400.ttf +0 -0
  11. data/app/assets/bundle/trestle/fa-regular-400.woff2 +0 -0
  12. data/app/assets/bundle/trestle/fa-solid-900.ttf +0 -0
  13. data/app/assets/bundle/trestle/fa-solid-900.woff2 +0 -0
  14. data/app/assets/bundle/trestle/photoswipe-063ce7be40e10b3e6848.digested.js +6 -0
  15. data/app/assets/sprockets/trestle/icons/font-awesome.css.erb +1 -1
  16. data/app/controllers/concerns/trestle/controller/modal.rb +3 -1
  17. data/app/controllers/concerns/trestle/controller/turbo_stream.rb +12 -0
  18. data/app/controllers/concerns/trestle/resource/controller/actions.rb +3 -3
  19. data/app/controllers/trestle/application_controller.rb +1 -1
  20. data/app/helpers/trestle/modal_helper.rb +0 -5
  21. data/app/helpers/trestle/turbo/frame_helper.rb +29 -0
  22. data/app/helpers/trestle/turbo/stream_helper.rb +9 -0
  23. data/app/helpers/trestle/turbo/tag_builder.rb +21 -0
  24. data/app/helpers/trestle/url_helper.rb +2 -2
  25. data/app/views/layouts/trestle/admin.html.erb +1 -1
  26. data/app/views/layouts/trestle/admin.turbo_stream.erb +2 -9
  27. data/app/views/trestle/application/_header.html.erb +12 -10
  28. data/app/views/trestle/resource/create.turbo_stream.erb +1 -5
  29. data/app/views/trestle/resource/destroy.turbo_stream.erb +1 -1
  30. data/app/views/trestle/resource/edit.html.erb +2 -0
  31. data/app/views/trestle/resource/index.html.erb +5 -0
  32. data/app/views/trestle/resource/new.html.erb +5 -0
  33. data/app/views/trestle/resource/show.html.erb +2 -0
  34. data/app/views/trestle/resource/update.turbo_stream.erb +1 -5
  35. data/app/views/trestle/shared/_sidebar.html.erb +2 -2
  36. data/frontend/css/components/_alerts.scss +22 -20
  37. data/frontend/css/components/_avatar.scss +12 -12
  38. data/frontend/css/components/_background.scss +1 -1
  39. data/frontend/css/components/_breadcrumbs.scss +8 -29
  40. data/frontend/css/components/_buttons.scss +3 -3
  41. data/frontend/css/components/_datepicker.scss +3 -3
  42. data/frontend/css/components/_dropdown.scss +18 -26
  43. data/frontend/css/components/_forms.scss +4 -4
  44. data/frontend/css/components/_grid.scss +29 -0
  45. data/frontend/css/components/_media-grid.scss +1 -1
  46. data/frontend/css/components/_modal.scss +4 -4
  47. data/frontend/css/components/_pagination.scss +4 -8
  48. data/frontend/css/components/_popover.scss +1 -1
  49. data/frontend/css/components/_scopes.scss +4 -10
  50. data/frontend/css/components/_select.scss +8 -9
  51. data/frontend/css/components/_sort.scss +1 -1
  52. data/frontend/css/components/_table.scss +5 -5
  53. data/frontend/css/components/_tabs.scss +11 -18
  54. data/frontend/css/components/_tags.scss +16 -6
  55. data/frontend/css/components/_toolbars.scss +9 -9
  56. data/frontend/css/core/_functions.scss +0 -8
  57. data/frontend/css/core/_theme.scss +3 -0
  58. data/frontend/css/core/_typography.scss +12 -19
  59. data/frontend/css/index.scss +3 -1
  60. data/frontend/css/layout/_base.scss +4 -2
  61. data/frontend/css/layout/_content-header.scss +71 -0
  62. data/frontend/css/layout/_footer.scss +5 -7
  63. data/frontend/css/layout/_main-content.scss +107 -0
  64. data/frontend/css/layout/_navigation.scss +111 -49
  65. data/frontend/css/layout/_sidebar.scss +60 -34
  66. data/frontend/css/variables/_bootstrap.scss +30 -21
  67. data/frontend/css/variables/_trestle.scss +20 -17
  68. data/frontend/js/controllers/batch_action_controller.js +59 -0
  69. data/frontend/js/controllers/checkbox_select_controller.js +3 -0
  70. data/frontend/js/controllers/confirm_delete_controller.js +4 -4
  71. data/frontend/js/controllers/gallery_controller.js +2 -0
  72. data/frontend/js/controllers/lightbox_controller.js +0 -2
  73. data/lib/trestle/engine.rb +18 -16
  74. data/lib/trestle/form/renderer.rb +1 -1
  75. data/lib/trestle/resource/toolbar.rb +18 -8
  76. data/lib/trestle/sprockets_compressor.rb +16 -0
  77. data/lib/trestle/toolbar/context.rb +7 -4
  78. data/lib/trestle/toolbar/menu.rb +8 -5
  79. data/lib/trestle/version.rb +1 -1
  80. data/package.json +1 -1
  81. data/trestle.gemspec +5 -9
  82. data/yarn.lock +350 -363
  83. metadata +35 -70
  84. data/app/assets/bundle/trestle/photoswipe-7aa1aec9c3c1fd65c382.digested.js +0 -6
  85. data/app/controllers/concerns/trestle/controller/turbo.rb +0 -21
  86. data/app/helpers/trestle/turbo_frame_helper.rb +0 -34
  87. data/frontend/css/layout/_content.scss +0 -173
@@ -1,40 +1,19 @@
1
1
  .breadcrumb {
2
- font-size: 0.85rem;
3
-
4
- .active, .active a {
5
- font-weight: normal;
6
- color: $breadcrumb-active-color;
7
-
8
- &:hover {
9
- text-decoration: none;
10
- }
11
- }
2
+ --#{$prefix}breadcrumb-font-size: 0.75rem;
3
+ --#{$prefix}breadcrumb-item-padding-x: 0.35rem;
12
4
 
13
5
  @include media-breakpoint-down(md) {
14
- font-size: 0.75rem;
6
+ --#{$prefix}breadcrumb-font-size: 0.625rem;
7
+ --#{$prefix}breadcrumb-item-padding-x: 0.25rem;
15
8
  }
16
9
  }
17
10
 
18
- // Fine-tune spacing between breadcrumb separators
19
-
20
11
  .breadcrumb-item {
21
- + .breadcrumb-item {
22
- &::before {
23
- padding-right: 0.35rem;
24
- }
12
+ a {
13
+ font-weight: normal;
25
14
  }
26
- }
27
-
28
- // Reduce breadcrumb separator spacing on mobile
29
-
30
- @include media-breakpoint-down(md) {
31
- .breadcrumb-item {
32
- + .breadcrumb-item {
33
- padding-left: divide($breadcrumb-item-padding-x, 2);
34
15
 
35
- &::before {
36
- padding-right: divide($breadcrumb-item-padding-x, 4);
37
- }
38
- }
16
+ &.active a {
17
+ color: inherit;
39
18
  }
40
19
  }
@@ -6,7 +6,7 @@
6
6
  display: inline-block;
7
7
  @include icon-fa($fa-var-spinner);
8
8
  @extend .fa-spin;
9
- margin-right: 10px;
9
+ margin-right: 0.625rem;
10
10
  }
11
11
  }
12
12
 
@@ -14,7 +14,7 @@
14
14
  font-size: 90%;
15
15
 
16
16
  + .btn-label {
17
- margin-left: 5px;
17
+ margin-left: 0.25rem;
18
18
  }
19
19
  }
20
20
  }
@@ -126,7 +126,7 @@
126
126
 
127
127
  @include button-child-visible('icon', '> i') {
128
128
  > i + .btn-label {
129
- margin-left: 5px;
129
+ margin-left: 0.25rem;
130
130
  }
131
131
  };
132
132
 
@@ -4,9 +4,9 @@
4
4
  right: 0;
5
5
  z-index: 4;
6
6
 
7
- width: 34px;
8
- height: 34px;
9
- line-height: 34px;
7
+ width: 2rem;
8
+ height: 2rem;
9
+ line-height: 2rem;
10
10
  text-align: center;
11
11
 
12
12
  color: #ccc;
@@ -7,31 +7,37 @@
7
7
 
8
8
  &:before {
9
9
  top: -$dropdown-arrow-outer-width;
10
- left: 12px;
10
+ left: 0.75rem;
11
11
 
12
12
  border-left: $dropdown-arrow-width solid transparent;
13
13
  border-right: $dropdown-arrow-width solid transparent;
14
- border-bottom: $dropdown-arrow-width solid $dropdown-border-color;
14
+ border-bottom: $dropdown-arrow-width solid var(--#{$prefix}dropdown-border-color);
15
15
  }
16
16
 
17
17
  &:after {
18
18
  top: -$dropdown-arrow-width;
19
- left: 11px;
19
+ left: 0.75rem;
20
+
21
+ margin-left: -1px;
22
+ margin-right: 0;
20
23
 
21
24
  border-left: $dropdown-arrow-outer-width solid transparent;
22
25
  border-right: $dropdown-arrow-outer-width solid transparent;
23
- border-bottom: $dropdown-arrow-outer-width solid $dropdown-bg;
26
+ border-bottom: $dropdown-arrow-outer-width solid var(--#{$prefix}dropdown-bg);
24
27
  }
25
28
 
26
29
  &.dropdown-menu-end {
27
30
  &:before {
28
31
  left: auto;
29
- right: 12px;
32
+ right: 0.75rem;
30
33
  }
31
34
 
32
35
  &:after {
33
36
  left: auto;
34
- right: 11px;
37
+ right: 0.75rem;
38
+
39
+ margin-left: 0;
40
+ margin-right: -1px;
35
41
  }
36
42
  }
37
43
 
@@ -41,7 +47,7 @@
41
47
  bottom: -$dropdown-arrow-outer-width;
42
48
 
43
49
  border-bottom: 0;
44
- border-top: $dropdown-arrow-width solid $dropdown-border-color;
50
+ border-top: $dropdown-arrow-width solid var(--#{$prefix}dropdown-border-color);
45
51
  }
46
52
 
47
53
  &:after {
@@ -49,27 +55,13 @@
49
55
  bottom: -$dropdown-arrow-width;
50
56
 
51
57
  border-bottom: 0;
52
- border-top: $dropdown-arrow-outer-width solid $dropdown-bg;
58
+ border-top: $dropdown-arrow-outer-width solid var(--bs-dropdown-bg);
53
59
  }
54
60
  }
55
- }
56
-
57
- .dropdown-menu-dark {
58
- &:before {
59
- border-bottom-color: $dropdown-dark-border-color;
60
- }
61
61
 
62
- &:after {
63
- border-bottom-color: $dropdown-dark-bg;
64
- }
65
-
66
- .dropup & {
67
- &:before {
68
- border-top-color: $dropdown-dark-border-color;
69
- }
70
-
71
- &:after {
72
- border-top-color: $dropdown-dark-bg;
73
- }
62
+ @include media-breakpoint-down(md) {
63
+ --#{$prefix}dropdown-font-size: 0.75rem;
64
+ --#{$prefix}dropdown-padding-y: 0.375rem;
65
+ --#{$prefix}dropdown-item-padding-x: 0.75rem;
74
66
  }
75
67
  }
@@ -1,6 +1,6 @@
1
1
  .form-group {
2
2
  position: relative;
3
- margin-bottom: 1rem;
3
+ margin-bottom: 0.875rem;
4
4
 
5
5
  &.has-error {
6
6
  > .form-label {
@@ -21,14 +21,14 @@ ul.invalid-feedback {
21
21
 
22
22
  .form-text {
23
23
  color: $form-text-color;
24
- font-size: 0.9rem;
24
+ font-size: 0.8125rem;
25
25
 
26
26
  @include media-breakpoint-up(sm) {
27
27
  &.floating {
28
28
  position: absolute;
29
29
  top: 0;
30
30
  right: 0;
31
- margin: 2px 0;
31
+ margin: 0.125rem 0;
32
32
  }
33
33
  }
34
34
  }
@@ -46,6 +46,6 @@ ul.invalid-feedback {
46
46
  .form-control,
47
47
  .form-select,
48
48
  .input-group-text {
49
- font-size: 16px;
49
+ font-size: 1rem;
50
50
  }
51
51
  }
@@ -0,0 +1,29 @@
1
+ .grid {
2
+ --grid-gap: var(--content-area-margin, 0);
3
+ --grid-column-count: 1;
4
+ --grid-column-min-width: 0;
5
+
6
+ display: grid;
7
+ grid-template-columns: repeat(var(--grid-column-count), minmax(var(--grid-column-min-width), 1fr));
8
+ gap: var(--grid-gap);
9
+
10
+ > .grid-col-full {
11
+ grid-column: 1 / -1;
12
+ }
13
+ }
14
+
15
+ @for $cols from 2 through 12 {
16
+ .grid-cols-#{$cols} {
17
+ --grid-column-count: #{$cols};
18
+ }
19
+ }
20
+
21
+ @each $breakpoint in map-keys($grid-breakpoints) {
22
+ @include media-breakpoint-up($breakpoint) {
23
+ @for $cols from 2 through 12 {
24
+ .grid-cols-#{$breakpoint}-#{$cols} {
25
+ --grid-column-count: #{$cols};
26
+ }
27
+ }
28
+ }
29
+ }
@@ -105,7 +105,7 @@
105
105
  }
106
106
 
107
107
  .media-grid-auto {
108
- --media-grid-item-size: 240px;
108
+ --media-grid-item-size: 15rem;
109
109
 
110
110
  grid-template-columns: repeat(auto-fill, minmax(var(--media-grid-item-size), 1fr));
111
111
  }
@@ -61,7 +61,7 @@
61
61
  }
62
62
 
63
63
  .modal-title {
64
- font-size: 1.3rem;
64
+ font-size: 1.125rem;
65
65
  font-weight: 500;
66
66
  text-shadow: rgba(black, 0.5) 0 1px 1px;
67
67
  color: white;
@@ -70,7 +70,7 @@
70
70
  .modal-tabs {
71
71
  .nav-tabs {
72
72
  background: $body-bg;
73
- padding: 10px 15px 0 15px;
73
+ padding: 0.625rem 1rem 0 1rem;
74
74
  }
75
75
  }
76
76
 
@@ -112,11 +112,11 @@
112
112
  }
113
113
 
114
114
  h3 {
115
- font-size: 1.25rem;
115
+ font-size: 1.125rem;
116
116
  }
117
117
 
118
118
  p {
119
- font-size: 0.9rem;
119
+ font-size: 0.825rem;
120
120
  }
121
121
  }
122
122
  }
@@ -3,10 +3,11 @@
3
3
 
4
4
  display: inline-flex;
5
5
  align-items: center;
6
+ gap: 0.75rem;
6
7
 
7
8
  p {
8
- font-size: 0.85rem;
9
- margin: 0 10px 0 0;
9
+ font-size: 0.75rem;
10
+ margin: 0;
10
11
  }
11
12
 
12
13
  strong {
@@ -32,16 +33,11 @@
32
33
  display: flex;
33
34
  flex-direction: column;
34
35
  align-items: center;
36
+ gap: 0.375rem;
35
37
 
36
38
  .pagination {
37
39
  margin: 0 auto;
38
40
  order: -1;
39
41
  }
40
-
41
- p {
42
- display: block;
43
- margin-right: 0;
44
- margin-top: 5px;
45
- }
46
42
  }
47
43
  }
@@ -1,5 +1,5 @@
1
1
  .popover-header {
2
2
  font-weight: 500;
3
- font-size: 0.85rem;
3
+ font-size: 0.75rem;
4
4
  border-bottom-color: $popover-header-border;
5
5
  }
@@ -35,7 +35,7 @@
35
35
 
36
36
  .scope-group {
37
37
  line-height: 2;
38
- font-size: 0.85rem;
38
+ font-size: 0.75rem;
39
39
  padding: 0.5rem 1rem 0.25rem 0.75rem;
40
40
 
41
41
  background: #f7f7f7;
@@ -47,19 +47,13 @@
47
47
  display: flex;
48
48
  flex-wrap: wrap;
49
49
 
50
+ gap: 0.25rem 0.35rem;
51
+
50
52
  position: relative;
51
53
  align-items: center;
52
54
 
53
55
  margin-bottom: 0;
54
56
  padding: 0;
55
-
56
- li {
57
- margin: 0.125rem 0.35rem 0.125rem 0;
58
-
59
- &:last-child {
60
- margin-right: 0;
61
- }
62
- }
63
57
  }
64
58
 
65
59
  .scope {
@@ -67,7 +61,7 @@
67
61
 
68
62
  background-color: $scope-bg;
69
63
 
70
- font-size: 0.8rem;
64
+ font-size: 0.6875rem;
71
65
  font-weight: normal;
72
66
  white-space: nowrap;
73
67
 
@@ -23,7 +23,7 @@
23
23
  padding: $s2bs5-padding-y $s2bs5-indicator-padding $s2bs5-padding-y $s2bs5-padding-x;
24
24
 
25
25
  &:has(.select2-selection__clear) {
26
- padding-right: $s2bs5-indicator-padding + 1rem;
26
+ padding-right: $s2bs5-indicator-padding + 0.875rem;
27
27
  }
28
28
  }
29
29
  }
@@ -46,7 +46,7 @@
46
46
 
47
47
  .select2-search--inline {
48
48
  width: auto;
49
- margin-left: 0.12rem;
49
+ margin-left: 0.1rem;
50
50
 
51
51
  &:first-child {
52
52
  margin-left: 0.375rem;
@@ -103,7 +103,7 @@
103
103
  background: $s2bs5-clear-tag-bg;
104
104
 
105
105
  margin-right: 0;
106
- margin-left: 4px;
106
+ margin-left: 0.25rem;
107
107
  font-size: 0;
108
108
  line-height: 1.2;
109
109
 
@@ -137,10 +137,9 @@
137
137
 
138
138
  // Prevent input zooming on mobile devices
139
139
  @include media-breakpoint-down(sm) {
140
- .select2-search--inline {
141
- .select2-search__field {
142
- font-size: 16px;
143
- }
140
+ .select2-selection,
141
+ .select2-dropdown .select2-search .select2-search__field {
142
+ font-size: 1rem;
144
143
  }
145
144
  }
146
145
  }
@@ -154,7 +153,7 @@
154
153
  padding: map-get($s2bs5-small, padding-y) map-get($s2bs5-small, padding-x);
155
154
 
156
155
  &:has(.select2-selection__clear) {
157
- padding-right: $s2bs5-indicator-padding + 1rem;
156
+ padding-right: $s2bs5-indicator-padding + 0.875rem;
158
157
  }
159
158
  }
160
159
  }
@@ -170,7 +169,7 @@
170
169
  padding: map-get($s2bs5-large, padding-y) map-get($s2bs5-large, padding-x);
171
170
 
172
171
  &:has(.select2-selection__clear) {
173
- padding-right: $s2bs5-indicator-padding + 1.5rem;
172
+ padding-right: $s2bs5-indicator-padding + 1.375rem;
174
173
  }
175
174
  }
176
175
  }
@@ -8,7 +8,7 @@
8
8
  @include icon-fa($fa-var-bars);
9
9
 
10
10
  font-size: 75%;
11
- margin-left: 5px;
11
+ margin-left: 0.325rem;
12
12
  opacity: 0.25;
13
13
  }
14
14
 
@@ -82,8 +82,8 @@
82
82
  }
83
83
 
84
84
  .avatar {
85
- width: 32px;
86
- height: 32px;
85
+ width: 2rem;
86
+ height: 2rem;
87
87
  vertical-align: middle;
88
88
  }
89
89
 
@@ -109,9 +109,9 @@
109
109
  line-height: 1;
110
110
 
111
111
  i {
112
- font-size: 0.85rem;
112
+ font-size: 0.75rem;
113
113
 
114
- width: 1.25rem;
114
+ width: 1.125rem;
115
115
  text-align: center;
116
116
  }
117
117
 
@@ -124,7 +124,7 @@
124
124
  .btn-group {
125
125
  + .btn,
126
126
  + .btn-group {
127
- margin-left: 4px;
127
+ margin-left: 0.25rem;
128
128
  }
129
129
  }
130
130
 
@@ -5,6 +5,11 @@
5
5
  flex-wrap: nowrap;
6
6
  white-space: nowrap;
7
7
 
8
+ gap: 0.325rem;
9
+
10
+ --#{$prefix}nav-link-padding-x: 1.25rem;
11
+ --#{$prefix}nav-link-padding-y: 0.625rem;
12
+
8
13
  &::-webkit-scrollbar {
9
14
  height: 4px;
10
15
  }
@@ -22,9 +27,6 @@
22
27
  }
23
28
 
24
29
  .nav-link {
25
- margin-right: 4px;
26
- padding: 10px 20px;
27
-
28
30
  font-weight: 500;
29
31
 
30
32
  transition: $nav-tabs-link-transition;
@@ -41,11 +43,6 @@
41
43
  .align-right {
42
44
  margin-left: auto;
43
45
 
44
- .nav-link {
45
- margin-right: 0;
46
- margin-left: 4px;
47
- }
48
-
49
46
  & + .align-right {
50
47
  margin-left: 0;
51
48
  }
@@ -53,7 +50,7 @@
53
50
 
54
51
  .badge {
55
52
  font-size: 0.65em;
56
- margin-left: 0.35rem;
53
+ margin-left: 0.3125rem;
57
54
  vertical-align: 1px;
58
55
 
59
56
  // Default badge color when no badge- classes specified
@@ -66,16 +63,12 @@
66
63
 
67
64
  @include media-breakpoint-down(md) {
68
65
  .nav-tabs {
69
- .nav-link {
70
- font-size: 0.95rem;
71
- padding: 10px;
72
- margin-right: 2px;
73
- }
66
+ --#{$prefix}nav-link-padding-x: 0.625rem;
74
67
 
75
- .align-right {
76
- .nav-link {
77
- margin-left: 2px;
78
- }
68
+ gap: 0.175rem;
69
+
70
+ .nav-link {
71
+ font-size: 0.8125rem;
79
72
  }
80
73
  }
81
74
  }
@@ -17,21 +17,23 @@
17
17
  }
18
18
 
19
19
  .tag {
20
- --tag-padding-y: 0.25rem;
21
- --tag-padding-x: 6px;
20
+ --tag-padding-y: 0.375em;
21
+ --tag-padding-x: 0.5em;
22
22
 
23
23
  --tag-border-width: 0.325rem;
24
24
  --tag-border-radius: 0.25rem;
25
25
 
26
- --tag-font-size: 0.8rem;
26
+ --tag-font-size: 0.825em;
27
27
  --tag-font-weight: normal;
28
28
  --tag-line-height: 1.1;
29
29
 
30
- --tag-bg: #{shift-color($primary, $tag-bg-scale)};
31
- --tag-border-color: #{rgba(black, 0.25)};
32
30
  --tag-color: white;
33
31
 
34
- --tag-hover-border-color: #{rgba(black, 0.35)};
32
+ --tag-bg: #{shift-color($primary, $tag-bg-scale)};
33
+ --tag-border-color: #{$primary};
34
+
35
+ --tag-hover-bg: #{shift-color($primary, $tag-hover-bg-scale)};
36
+ --tag-hover-border-color: #{shift-color($primary, $tag-hover-border-scale)};
35
37
 
36
38
  display: inline-block;
37
39
  padding: var(--tag-padding-y) var(--tag-padding-x) var(--tag-padding-y) calc(var(--tag-padding-x) - var(--tag-border-width) / 2);
@@ -62,6 +64,14 @@
62
64
  }
63
65
  }
64
66
 
67
+ .tag {
68
+ --tag-bg: #{adjust-theme-hsl(primary, $lightness: -$tag-bg-scale)};
69
+ --tag-border-color: var(--primary);
70
+
71
+ --tag-hover-bg: #{adjust-theme-hsl(primary, $lightness: -$tag-hover-bg-scale)};
72
+ --tag-hover-border-color: #{adjust-theme-hsl(primary, $lightness: -$tag-hover-border-scale)};
73
+ }
74
+
65
75
  @each $state, $value in $theme-colors {
66
76
  .tag-#{$state} {
67
77
  @include tag-variant($value);
@@ -1,17 +1,17 @@
1
1
  .btn-toolbar {
2
- gap: 5px;
2
+ gap: 0.375rem;
3
3
  }
4
4
 
5
5
  .primary-toolbar {
6
6
  .btn {
7
- --#{$prefix}btn-padding-x: 1.25rem;
8
- --#{$prefix}btn-padding-y: 0.5rem;
9
- --#{$prefix}btn-font-size: 1.35rem;
7
+ --#{$prefix}btn-padding-x: 1.125rem;
8
+ --#{$prefix}btn-padding-y: 0.5rem;
9
+ --#{$prefix}btn-font-size: 1.125rem;
10
10
 
11
11
  @include media-breakpoint-down(md) {
12
12
  --#{$prefix}btn-padding-x: 0.75rem;
13
- --#{$prefix}btn-padding-y: 0.35rem;
14
- --#{$prefix}btn-font-size: 1.25rem;
13
+ --#{$prefix}btn-padding-y: 0.25rem;
14
+ --#{$prefix}btn-font-size: 1.0625rem;
15
15
  --#{$prefix}btn-border-radius: #{$btn-border-radius-sm};
16
16
  }
17
17
  }
@@ -27,14 +27,14 @@
27
27
  font-size: 80%;
28
28
 
29
29
  + .btn-label {
30
- margin-left: 3px;
30
+ margin-left: 0.25rem;
31
31
  }
32
32
  }
33
33
 
34
34
  @include media-breakpoint-down(md) {
35
35
  --#{$prefix}btn-padding-x: 0.5rem;
36
- --#{$prefix}btn-padding-y: 0.2rem;
37
- --#{$prefix}btn-font-size: 0.75rem;
36
+ --#{$prefix}btn-padding-y: 0.25rem;
37
+ --#{$prefix}btn-font-size: 0.6875rem;
38
38
  --#{$prefix}btn-border-radius: #{$btn-border-radius-sm};
39
39
  }
40
40
  }
@@ -13,14 +13,6 @@
13
13
  @return $val;
14
14
  }
15
15
 
16
- @function strip-units($number) {
17
- @return $number / ($number * 0 + 1);
18
- }
19
-
20
- @function em($rem) {
21
- @return strip-units($rem) * 1em;
22
- }
23
-
24
16
  @function adjust-theme-hsl($name, $hue: null, $saturation: null, $lightness: null, $wrap: true) {
25
17
  $hsl:
26
18
  adjust-css-value(var(--#{$name}-h), $hue)
@@ -30,6 +30,9 @@ $theme-colors: (
30
30
  --#{$prefix}#{$color}-border-subtle: #{adjust-theme-hsl($color, $lightness: 60%)};
31
31
  }
32
32
 
33
+ --theme-texture: url(../images/bright-squares.png);
34
+ --theme-gradient: #{linear-gradient(rgba(white, 0.05), rgba(black, 0.05))};
35
+
33
36
  --#{$prefix}link-color: var(--primary);
34
37
  --#{$prefix}link-color-rgb: var(--primary-rgb);
35
38
  --#{$prefix}link-color-hsl: var(--primary-hsl);