administrate-bootstrap-theme 0.2.2 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +64 -32
  3. data/app/assets/javascripts/administrate-bootstrap-theme/{bootstrap/bootstrap.bundle.js → bootstrap.bundle.js} +910 -857
  4. data/app/assets/stylesheets/administrate-bootstrap-theme/_base.scss +2 -14
  5. data/app/assets/stylesheets/administrate-bootstrap-theme/_variables.scss +4 -0
  6. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_card.scss +7 -6
  7. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_carousel.scss +2 -2
  8. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_dropdown.scss +4 -4
  9. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_functions.scss +94 -3
  10. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_grid.scss +11 -0
  11. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_helpers.scss +2 -0
  12. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_images.scss +1 -1
  13. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_mixins.scss +1 -0
  14. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_modal.scss +5 -15
  15. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_navbar.scss +30 -1
  16. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_offcanvas.scss +8 -2
  17. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_placeholders.scss +51 -0
  18. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_popover.scss +10 -10
  19. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_reboot.scss +12 -8
  20. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_root.scss +39 -2
  21. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tables.scss +1 -1
  22. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_toasts.scss +3 -3
  23. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_tooltip.scss +4 -4
  24. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_transitions.scss +6 -0
  25. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_utilities.scss +44 -8
  26. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/_variables.scss +189 -24
  27. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-grid.scss +1 -1
  28. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-reboot.scss +1 -1
  29. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap-utilities.scss +1 -1
  30. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/bootstrap.scss +2 -1
  31. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_floating-labels.scss +3 -1
  32. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-check.scss +1 -1
  33. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-control.scss +1 -1
  34. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-range.scss +1 -1
  35. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/forms/_form-select.scss +3 -0
  36. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_stacks.scss +15 -0
  37. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/helpers/_vr.scss +8 -0
  38. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_backdrop.scss +14 -0
  39. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_buttons.scss +1 -1
  40. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_grid.scss +33 -8
  41. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/mixins/_utilities.scss +27 -6
  42. data/app/assets/stylesheets/administrate-bootstrap-theme/bootstrap/vendor/_rfs.scss +55 -13
  43. data/app/assets/stylesheets/administrate-bootstrap-theme/colors/_autumn.scss +8 -0
  44. data/app/assets/stylesheets/administrate-bootstrap-theme/colors/_default.scss +8 -0
  45. data/app/assets/stylesheets/administrate-bootstrap-theme/colors/_forest.scss +9 -0
  46. data/app/assets/stylesheets/administrate-bootstrap-theme/colors/_industrial.scss +8 -0
  47. data/app/assets/stylesheets/administrate-bootstrap-theme/colors/_water.scss +8 -0
  48. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_content_body.scss +21 -1
  49. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_content_header.scss +1 -1
  50. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_form.scss +2 -0
  51. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_navigation.scss +26 -3
  52. data/app/assets/stylesheets/administrate-bootstrap-theme/components/_pagination.scss +1 -1
  53. data/app/assets/stylesheets/administrate-bootstrap-theme/fonts/_lato.scss +5 -0
  54. data/app/assets/stylesheets/administrate-bootstrap-theme/fonts/_montserrat.scss +5 -0
  55. data/app/assets/stylesheets/administrate-bootstrap-theme/fonts/_open_sans.scss +5 -0
  56. data/app/assets/stylesheets/administrate-bootstrap-theme/fonts/_roboto.scss +5 -0
  57. data/app/assets/stylesheets/administrate-bootstrap-theme/fonts/_source_sans_pro.scss +5 -0
  58. data/app/assets/stylesheets/administrate-bootstrap-theme/theme.scss +10 -61
  59. data/lib/administrate-bootstrap-theme/version.rb +2 -1
  60. data/lib/generators/administrate_bootstrap_theme/install/USAGE +10 -0
  61. data/lib/generators/administrate_bootstrap_theme/install/install_generator.rb +33 -0
  62. data/package.json +2 -3
  63. metadata +38 -10
  64. data/app/assets/javascripts/administrate-bootstrap-theme/flatpickr/flatpickr.js +0 -2673
  65. data/app/assets/javascripts/administrate-bootstrap-theme/theme.js +0 -22
  66. data/app/assets/stylesheets/administrate-bootstrap-theme/flatpickr/flatpickr.scss +0 -791
@@ -0,0 +1,8 @@
1
+ .vr {
2
+ display: inline-block;
3
+ align-self: stretch;
4
+ width: 1px;
5
+ min-height: 1em;
6
+ background-color: currentColor;
7
+ opacity: $hr-opacity;
8
+ }
@@ -0,0 +1,14 @@
1
+ // Shared between modals and offcanvases
2
+ @mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
3
+ position: fixed;
4
+ top: 0;
5
+ left: 0;
6
+ z-index: $zindex;
7
+ width: 100vw;
8
+ height: 100vh;
9
+ background-color: $backdrop-bg;
10
+
11
+ // Fade for backdrop
12
+ &.fade { opacity: 0; }
13
+ &.show { opacity: $backdrop-opacity; }
14
+ }
@@ -11,7 +11,7 @@
11
11
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
12
12
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
13
13
  $hover-color: color-contrast($hover-background),
14
- $active-background: if($color == $color-contrast-light, shade-color($background,$btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
14
+ $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
15
15
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
16
16
  $active-color: color-contrast($active-background),
17
17
  $disabled-background: $background,
@@ -1,4 +1,4 @@
1
- /// Grid system
1
+ // Grid system
2
2
  //
3
3
  // Generate semantic grid columns with these mixins.
4
4
 
@@ -8,8 +8,8 @@
8
8
  display: flex;
9
9
  flex-wrap: wrap;
10
10
  margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
11
- margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
12
- margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list
11
+ margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
12
+ margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
13
13
  }
14
14
 
15
15
  @mixin make-col-ready($gutter: $grid-gutter-width) {
@@ -21,15 +21,16 @@
21
21
  flex-shrink: 0;
22
22
  width: 100%;
23
23
  max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
24
- padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
25
- padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list
24
+ padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
25
+ padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
26
26
  margin-top: var(--#{$variable-prefix}gutter-y);
27
27
  }
28
28
 
29
29
  @mixin make-col($size: false, $columns: $grid-columns) {
30
30
  @if $size {
31
31
  flex: 0 0 auto;
32
- width: percentage($size / $columns);
32
+ width: percentage(divide($size, $columns));
33
+
33
34
  } @else {
34
35
  flex: 1 1 0;
35
36
  max-width: 100%;
@@ -42,7 +43,7 @@
42
43
  }
43
44
 
44
45
  @mixin make-col-offset($size, $columns: $grid-columns) {
45
- $num: $size / $columns;
46
+ $num: divide($size, $columns);
46
47
  margin-left: if($num == 0, 0, percentage($num));
47
48
  }
48
49
 
@@ -54,7 +55,7 @@
54
55
  @mixin row-cols($count) {
55
56
  > * {
56
57
  flex: 0 0 auto;
57
- width: 100% / $count;
58
+ width: divide(100%, $count);
58
59
  }
59
60
  }
60
61
 
@@ -123,3 +124,27 @@
123
124
  }
124
125
  }
125
126
  }
127
+
128
+ @mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
129
+ @each $breakpoint in map-keys($breakpoints) {
130
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
131
+
132
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
133
+ @if $columns > 0 {
134
+ @for $i from 1 through $columns {
135
+ .g-col#{$infix}-#{$i} {
136
+ grid-column: auto / span $i;
137
+ }
138
+ }
139
+
140
+ // Start with `1` because `0` is and invalid value.
141
+ // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
142
+ @for $i from 1 through ($columns - 1) {
143
+ .g-start#{$infix}-#{$i} {
144
+ grid-column-start: $i;
145
+ }
146
+ }
147
+ }
148
+ }
149
+ }
150
+ }
@@ -41,25 +41,46 @@
41
41
  }
42
42
  }
43
43
 
44
+ $is-css-var: map-get($utility, css-var);
45
+ $is-local-vars: map-get($utility, local-vars);
44
46
  $is-rtl: map-get($utility, rtl);
45
47
 
46
48
  @if $value != null {
47
49
  @if $is-rtl == false {
48
50
  /* rtl:begin:remove */
49
51
  }
50
- .#{$property-class + $infix + $property-class-modifier} {
51
- @each $property in $properties {
52
- #{$property}: $value if($enable-important-utilities, !important, null);
52
+
53
+ @if $is-css-var {
54
+ .#{$property-class + $infix + $property-class-modifier} {
55
+ --#{$variable-prefix}#{$property-class}: #{$value};
53
56
  }
54
- }
55
57
 
56
- @each $pseudo in $state {
57
- .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
58
+ @each $pseudo in $state {
59
+ .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
60
+ --#{$variable-prefix}#{$property-class}: #{$value};
61
+ }
62
+ }
63
+ } @else {
64
+ .#{$property-class + $infix + $property-class-modifier} {
58
65
  @each $property in $properties {
66
+ @if $is-local-vars {
67
+ @each $local-var, $value in $is-local-vars {
68
+ --#{$variable-prefix}#{$local-var}: #{$value};
69
+ }
70
+ }
59
71
  #{$property}: $value if($enable-important-utilities, !important, null);
60
72
  }
61
73
  }
74
+
75
+ @each $pseudo in $state {
76
+ .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
77
+ @each $property in $properties {
78
+ #{$property}: $value if($enable-important-utilities, !important, null);
79
+ }
80
+ }
81
+ }
62
82
  }
83
+
63
84
  @if $is-rtl == false {
64
85
  /* rtl:end:remove */
65
86
  }
@@ -4,7 +4,7 @@
4
4
  //
5
5
  // Automated responsive values for font sizes, paddings, margins and much more
6
6
  //
7
- // Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE)
7
+ // Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
8
8
 
9
9
  // Configuration
10
10
 
@@ -52,12 +52,54 @@ $enable-rfs: true !default;
52
52
  // Cache $rfs-base-value unit
53
53
  $rfs-base-value-unit: unit($rfs-base-value);
54
54
 
55
+ @function divide($dividend, $divisor, $precision: 10) {
56
+ $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
57
+ $dividend: abs($dividend);
58
+ $divisor: abs($divisor);
59
+ @if $dividend == 0 {
60
+ @return 0;
61
+ }
62
+ @if $divisor == 0 {
63
+ @error "Cannot divide by 0";
64
+ }
65
+ $remainder: $dividend;
66
+ $result: 0;
67
+ $factor: 10;
68
+ @while ($remainder > 0 and $precision >= 0) {
69
+ $quotient: 0;
70
+ @while ($remainder >= $divisor) {
71
+ $remainder: $remainder - $divisor;
72
+ $quotient: $quotient + 1;
73
+ }
74
+ $result: $result * 10 + $quotient;
75
+ $factor: $factor * .1;
76
+ $remainder: $remainder * 10;
77
+ $precision: $precision - 1;
78
+ @if ($precision < 0 and $remainder >= $divisor * 5) {
79
+ $result: $result + 1;
80
+ }
81
+ }
82
+ $result: $result * $factor * $sign;
83
+ $dividend-unit: unit($dividend);
84
+ $divisor-unit: unit($divisor);
85
+ $unit-map: (
86
+ "px": 1px,
87
+ "rem": 1rem,
88
+ "em": 1em,
89
+ "%": 1%
90
+ );
91
+ @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
92
+ $result: $result * map-get($unit-map, $dividend-unit);
93
+ }
94
+ @return $result;
95
+ }
96
+
55
97
  // Remove px-unit from $rfs-base-value for calculations
56
98
  @if $rfs-base-value-unit == px {
57
- $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1);
99
+ $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
58
100
  }
59
101
  @else if $rfs-base-value-unit == rem {
60
- $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1 / $rfs-rem-value);
102
+ $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
61
103
  }
62
104
 
63
105
  // Cache $rfs-breakpoint unit to prevent multiple calls
@@ -65,14 +107,14 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
65
107
 
66
108
  // Remove unit from $rfs-breakpoint for calculations
67
109
  @if $rfs-breakpoint-unit-cache == px {
68
- $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
110
+ $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
69
111
  }
70
112
  @else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == "em" {
71
- $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
113
+ $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
72
114
  }
73
115
 
74
116
  // Calculate the media query value
75
- $rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit});
117
+ $rfs-mq-value: if($rfs-breakpoint-unit == px, #{$rfs-breakpoint}px, #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit});
76
118
  $rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
77
119
  $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
78
120
 
@@ -164,11 +206,11 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
164
206
 
165
207
  @if $unit == px {
166
208
  // Convert to rem if needed
167
- $val: $val + ' ' + if($rfs-unit == rem, #{$value / ($value * 0 + $rfs-rem-value)}rem, $value);
209
+ $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
168
210
  }
169
211
  @else if $unit == rem {
170
212
  // Convert to px if needed
171
- $val: $val + ' ' + if($rfs-unit == px, #{$value / ($value * 0 + 1) * $rfs-rem-value}px, $value);
213
+ $val: $val + ' ' + if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
172
214
  }
173
215
  @else {
174
216
  // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
@@ -205,21 +247,21 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
205
247
 
206
248
  @else {
207
249
  // Remove unit from $value for calculations
208
- $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value));
250
+ $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
209
251
 
210
252
  // Only add the media query if the value is greater than the minimum value
211
253
  @if abs($value) <= $rfs-base-value or not $enable-rfs {
212
- $val: $val + ' ' + if($rfs-unit == rem, #{$value / $rfs-rem-value}rem, #{$value}px);
254
+ $val: $val + ' ' + if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
213
255
  }
214
256
  @else {
215
257
  // Calculate the minimum value
216
- $value-min: $rfs-base-value + (abs($value) - $rfs-base-value) / $rfs-factor;
258
+ $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
217
259
 
218
260
  // Calculate difference between $value and the minimum value
219
261
  $value-diff: abs($value) - $value-min;
220
262
 
221
263
  // Base value formatting
222
- $min-width: if($rfs-unit == rem, #{$value-min / $rfs-rem-value}rem, #{$value-min}px);
264
+ $min-width: if($rfs-unit == rem, #{divide($value-min, $rfs-rem-value)}rem, #{$value-min}px);
223
265
 
224
266
  // Use negative value if needed
225
267
  $min-width: if($value < 0, -$min-width, $min-width);
@@ -228,7 +270,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
228
270
  $variable-unit: if($rfs-two-dimensional, vmin, vw);
229
271
 
230
272
  // Calculate the variable width between 0 and $rfs-breakpoint
231
- $variable-width: #{$value-diff * 100 / $rfs-breakpoint}#{$variable-unit};
273
+ $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
232
274
 
233
275
  // Return the calculated value
234
276
  $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
@@ -0,0 +1,8 @@
1
+ $navigation-bg: #722a00;
2
+ $navigation-bg-active: #d51;
3
+ $navigation-fg: #eee;
4
+
5
+ $primary: #b87800;
6
+ $secondary: #614107;
7
+ $main-content-bg: #fcfafa;
8
+ $main-content-fg: #302725;
@@ -0,0 +1,8 @@
1
+ $navigation-bg: #055160;
2
+ $navigation-bg-active: #d51;
3
+ $navigation-fg: #eee;
4
+
5
+ $primary: #0d6ecd;
6
+ $secondary: #075261;
7
+ $main-content-bg: #f4f8fb;
8
+ $main-content-fg: #253029;
@@ -0,0 +1,9 @@
1
+ $navigation-bg: #025514;
2
+ $navigation-bg-active: #37ac02;
3
+ $navigation-fg: #eee;
4
+
5
+ $primary: #007219;
6
+ $secondary: #566356;
7
+ $danger: #ee6c6c;
8
+ $main-content-bg: #fdfdfd;
9
+ $main-content-fg: #1b3b1e;
@@ -0,0 +1,8 @@
1
+ $navigation-bg: #333;
2
+ $navigation-bg-active: #d51;
3
+ $navigation-fg: #eee;
4
+
5
+ $primary: #6f6f6f;
6
+ $secondary: #404040;
7
+ $main-content-bg: #fafafa;
8
+ $main-content-fg: #202020;
@@ -0,0 +1,8 @@
1
+ $navigation-bg: #0059b3;
2
+ $navigation-bg-active: #0099ff;
3
+ $navigation-fg: #eee;
4
+
5
+ $primary: #0d6ecd;
6
+ $secondary: #3b3d61;
7
+ $main-content-bg: #f4f8fb;
8
+ $main-content-fg: #222;
@@ -1,6 +1,10 @@
1
1
  .main-content__body {
2
2
  @extend .container-fluid, .mb-3;
3
3
 
4
+ table {
5
+ @extend .table-striped;
6
+ }
7
+
4
8
  > dl {
5
9
  @extend .row;
6
10
 
@@ -23,6 +27,10 @@
23
27
  @extend .table;
24
28
  }
25
29
 
30
+ .attribute-data > table {
31
+ @extend .table-bordered;
32
+ }
33
+
26
34
  .attribute--nested {
27
35
  > div {
28
36
  display: flex;
@@ -46,6 +54,10 @@
46
54
  transform: rotate(180deg);
47
55
  }
48
56
 
57
+ .form-actions > input {
58
+ @extend .btn-primary;
59
+ }
60
+
49
61
  .js-table-row {
50
62
  > td {
51
63
  padding: 0.25rem 0.25rem;
@@ -57,8 +69,16 @@
57
69
  }
58
70
  }
59
71
 
72
+ .action-show {
73
+ @extend .link-secondary;
74
+ }
75
+
60
76
  .action-edit {
61
- @extend .btn, .btn-sm;
77
+ @extend .btn, .btn-sm, .btn-secondary;
78
+ }
79
+
80
+ [data-method="delete"] {
81
+ @extend .btn-danger;
62
82
  }
63
83
 
64
84
  [data-method="delete"] {
@@ -28,7 +28,7 @@
28
28
  }
29
29
 
30
30
  .button {
31
- @extend .btn, .btn-sm;
31
+ @extend .btn, .btn-sm, .btn-primary;
32
32
  }
33
33
 
34
34
  .search__input {
@@ -18,6 +18,8 @@
18
18
  .field-unit__field {
19
19
  @extend .col-10;
20
20
 
21
+ position: relative;
22
+
21
23
  > input:not([type="checkbox"]) {
22
24
  @extend .form-control;
23
25
  }
@@ -1,13 +1,36 @@
1
1
  nav.navigation {
2
- @extend .nav, .nav-pills, .flex-column, .p-3;
2
+ @extend .nav, .nav-pills, .flex-column, .p-3, .text-white;
3
3
 
4
+ background: $navigation-bg;
4
5
  width: $navigation-width;
5
6
 
6
7
  .button--alt {
7
- @extend .btn, .mb-2;
8
+ @extend .btn, .btn-outline-light, .mb-2;
9
+
10
+ color: $navigation-fg;
11
+ }
12
+
13
+ .button--title {
14
+ @extend .btn, .mb-2, .pb-3, .fs-3, .border-bottom, .fw-bold, .text-start;
15
+
16
+ color: $navigation-fg;
17
+
18
+ &:hover {
19
+ color: $navigation-fg;
20
+ }
21
+ }
22
+
23
+ .copy {
24
+ @extend .pt-2, .border-top, .text-center;
8
25
  }
9
26
 
10
27
  .navigation__link {
11
- @extend .nav-link;
28
+ @extend .btn-outline-light, .nav-link;
29
+
30
+ color: $navigation-fg;
31
+ }
32
+
33
+ .navigation__link--active {
34
+ background: $navigation-bg-active;
12
35
  }
13
36
  }
@@ -1,5 +1,5 @@
1
1
  nav.pagination {
2
- @extend .justify-content-center, .mb-3;
2
+ @extend .border, .justify-content-center, .mb-3;
3
3
 
4
4
  > span {
5
5
  @extend .nav-link;
@@ -0,0 +1,5 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap');
2
+
3
+ * {
4
+ font-family: 'Lato', sans-serif;
5
+ }
@@ -0,0 +1,5 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap');
2
+
3
+ * {
4
+ font-family: 'Montserrat', sans-serif;
5
+ }
@@ -0,0 +1,5 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400&display=swap');
2
+
3
+ * {
4
+ font-family: 'Open Sans', sans-serif;
5
+ }
@@ -0,0 +1,5 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap');
2
+
3
+ * {
4
+ font-family: 'Roboto', sans-serif;
5
+ }
@@ -0,0 +1,5 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400&display=swap');
2
+
3
+ * {
4
+ font-family: 'Source Sans Pro', sans-serif;
5
+ }
@@ -1,65 +1,14 @@
1
- @import "base";
2
-
3
- nav.navigation {
4
- @extend .text-white;
5
-
6
- background: $navigation-bg;
7
-
8
- .button--alt {
9
- @extend .btn-outline-light;
10
-
11
- color: $navigation-fg;
12
- }
13
-
14
- .navigation__link {
15
- @extend .btn-outline-light;
16
-
17
- color: $navigation-fg;
18
- }
1
+ // from: node_modules/bootstrap/scss
2
+ @import "bootstrap/bootstrap";
19
3
 
20
- .navigation__link--active {
21
- background: $navigation-bg-active;
22
- }
23
- }
4
+ @import "selectize"; // included in Administrate
24
5
 
25
- nav.pagination {
26
- @extend .border;
27
- }
6
+ @import "variables";
28
7
 
29
- .main-content {
30
- @extend .bg-light;
31
- }
8
+ @import "components/navigation";
9
+ @import "components/content_header";
10
+ @import "components/content_body";
11
+ @import "components/form";
12
+ @import "components/pagination";
32
13
 
33
- .main-content__body {
34
- table {
35
- @extend .table-striped;
36
- }
37
-
38
- .attribute-data > table {
39
- @extend .table-bordered;
40
- }
41
-
42
- .form-actions > input {
43
- @extend .btn-primary;
44
- }
45
-
46
- .js-table-row {
47
- .action-show {
48
- @extend .link-secondary;
49
- }
50
-
51
- .action-edit {
52
- @extend .btn-secondary;
53
- }
54
-
55
- [data-method="delete"] {
56
- @extend .btn-danger;
57
- }
58
- }
59
- }
60
-
61
- .main-content__header {
62
- .button {
63
- @extend .btn-primary;
64
- }
65
- }
14
+ @import "base";
@@ -1,5 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module AdministrateBootstrapTheme
4
- VERSION = '0.2.2'
4
+ VERSION = '1.0.0'
5
+ BOOTSTRAP_VERSION = '5.1.0'
5
6
  end
@@ -0,0 +1,10 @@
1
+ Description:
2
+ AdministrateBootstrapTheme installer
3
+
4
+ Example:
5
+ bin/rails generate administrate_bootstrap_theme:install
6
+
7
+ This will:
8
+ - create a new initializer: administrate_bootstrap_theme
9
+ - create a new SCSS stylesheet: administrate-bootstrap-theme.scss
10
+ - append the necessary assets to: config/initializers/assets.rb
@@ -0,0 +1,33 @@
1
+ # frozen_string_literal: true
2
+
3
+ module AdministrateBootstrapTheme
4
+ class InstallGenerator < Rails::Generators::Base
5
+ source_root File.expand_path('templates', __dir__)
6
+
7
+ def append_assets
8
+ append_file 'config/initializers/assets.rb', <<~FILE
9
+ Rails.application.config.assets.precompile += %w[
10
+ administrate-bootstrap-theme.scss
11
+ administrate-bootstrap-theme/theme.css
12
+ administrate-bootstrap-theme/bootstrap.bundle.js
13
+ ]
14
+ FILE
15
+ end
16
+
17
+ def create_stylesheets_assets
18
+ create_file 'app/assets/stylesheets/administrate-bootstrap-theme.scss', <<~FILE
19
+ @import 'administrate-bootstrap-theme/colors/default';
20
+ @import 'administrate-bootstrap-theme/fonts/source_sans_pro';
21
+ @import 'administrate-bootstrap-theme/theme';
22
+ FILE
23
+ end
24
+
25
+ def create_initializer
26
+ initializer 'administrate_bootstrap_theme.rb', <<~FILE
27
+ Administrate::Engine.stylesheets.clear # required to remove Administrate base styles
28
+ Administrate::Engine.add_stylesheet('administrate-bootstrap-theme')
29
+ Administrate::Engine.add_javascript('administrate-bootstrap-theme/bootstrap.bundle.js')
30
+ FILE
31
+ end
32
+ end
33
+ end
data/package.json CHANGED
@@ -1,11 +1,10 @@
1
1
  {
2
2
  "name": "administrate-bootstrap-theme",
3
- "version": "0.2.2",
3
+ "version": "1.0.0",
4
4
  "main": "index.js",
5
5
  "author": "Mattia Roccoberton <mat@blocknot.es>",
6
6
  "license": "MIT",
7
7
  "dependencies": {
8
- "bootstrap": "^5.0.1",
9
- "flatpickr": "^4.6.9"
8
+ "bootstrap": "^5.0.1"
10
9
  }
11
10
  }