frontpack 0.1.0

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 (70) hide show
  1. checksums.yaml +7 -0
  2. data/MIT-LICENSE +20 -0
  3. data/README.md +51 -0
  4. data/Rakefile +5 -0
  5. data/app/assets/config/frontpack_manifest.js +1 -0
  6. data/app/assets/images/logo.svg +141 -0
  7. data/app/assets/javascripts/frontpack/auto-complete.js +173 -0
  8. data/app/assets/javascripts/frontpack/base-webcomponent.js +160 -0
  9. data/app/assets/javascripts/frontpack/expandable-list.js +99 -0
  10. data/app/assets/javascripts/frontpack/image-preview.js +160 -0
  11. data/app/assets/javascripts/frontpack/image-uploader.js +34 -0
  12. data/app/assets/javascripts/frontpack/localized-time.js +17 -0
  13. data/app/assets/javascripts/frontpack/modal-dialog.js +206 -0
  14. data/app/assets/javascripts/frontpack/shortcuts.js +63 -0
  15. data/app/assets/javascripts/frontpack/tab-control.js +77 -0
  16. data/app/assets/javascripts/frontpack/text-box.js +70 -0
  17. data/app/assets/javascripts/frontpack/toggle-button.js +73 -0
  18. data/app/assets/stylesheets/frontpack/000-reset.scss +15 -0
  19. data/app/assets/stylesheets/frontpack/010-config.scss +148 -0
  20. data/app/assets/stylesheets/frontpack/020-mixins.scss +218 -0
  21. data/app/assets/stylesheets/frontpack/030-consts.scss +13 -0
  22. data/app/assets/stylesheets/frontpack/031-margins.scss +5 -0
  23. data/app/assets/stylesheets/frontpack/100-layout.scss +113 -0
  24. data/app/assets/stylesheets/frontpack/101-container.scss +131 -0
  25. data/app/assets/stylesheets/frontpack/200-design.scss +75 -0
  26. data/app/assets/stylesheets/frontpack/201-box.scss +6 -0
  27. data/app/assets/stylesheets/frontpack/202-borders.scss +5 -0
  28. data/app/assets/stylesheets/frontpack/300-typography.scss +128 -0
  29. data/app/assets/stylesheets/frontpack/800-components.scss +85 -0
  30. data/app/assets/stylesheets/frontpack/801-card.scss +53 -0
  31. data/app/assets/stylesheets/frontpack/802-buttons.scss +58 -0
  32. data/app/assets/stylesheets/frontpack/803-form-controls.scss +161 -0
  33. data/app/assets/stylesheets/frontpack/804-table.scss +60 -0
  34. data/app/assets/stylesheets/frontpack/805-switch-toggle.scss +43 -0
  35. data/app/assets/stylesheets/frontpack/frontpack.scss +18 -0
  36. data/app/controllers/concerns/frontpack/searchable.rb +33 -0
  37. data/app/controllers/frontpack/autocomplete_controller.rb +33 -0
  38. data/app/helpers/frontpack/application_helper.rb +7 -0
  39. data/app/helpers/frontpack/form_builder.rb +130 -0
  40. data/app/models/concerns/frontpack/auto_completable.rb +35 -0
  41. data/config/importmap.rb +1 -0
  42. data/config/routes.rb +3 -0
  43. data/lib/frontpack/button_to_patch.rb +64 -0
  44. data/lib/frontpack/engine.rb +28 -0
  45. data/lib/frontpack/extended_model_translations.rb +31 -0
  46. data/lib/frontpack/form_builder_options.rb +5 -0
  47. data/lib/frontpack/version.rb +5 -0
  48. data/lib/frontpack.rb +9 -0
  49. data/lib/generators/frontpack/install_generator.rb +37 -0
  50. data/lib/generators/frontpack/locale_generator.rb +11 -0
  51. data/lib/generators/templates/initializers/customize_form_with_errors.rb +31 -0
  52. data/lib/generators/templates/locales/frontpack.en.yml +43 -0
  53. data/lib/generators/templates/views/layouts/_form-errors.html.slim +3 -0
  54. data/lib/generators/templates/views/layouts/_navigation.html.slim +1 -0
  55. data/lib/generators/templates/views/layouts/application.html.slim +37 -0
  56. data/lib/generators/templates/views/layouts/errors.html.slim +19 -0
  57. data/lib/generators/templates/views/layouts/mailer.html.slim +6 -0
  58. data/lib/generators/templates/views/layouts/mailer.text.slim +1 -0
  59. data/lib/tasks/frontpack_tasks.rake +6 -0
  60. data/lib/templates/rails/file_utils/searchable.rb +30 -0
  61. data/lib/templates/rails/scaffold_controller/controller.rb.tt +93 -0
  62. data/lib/templates/slim/scaffold/_form.html.slim.tt +10 -0
  63. data/lib/templates/slim/scaffold/edit.html.slim.tt +10 -0
  64. data/lib/templates/slim/scaffold/index.html.slim.tt +20 -0
  65. data/lib/templates/slim/scaffold/new.html.slim.tt +8 -0
  66. data/lib/templates/slim/scaffold/partial.html.slim.tt +6 -0
  67. data/lib/templates/slim/scaffold/show.html.slim.tt +12 -0
  68. data/lib/templates/test_unit/model/fixtures.yml.tt +18 -0
  69. data/lib/templates/test_unit/model/unit_test.rb.tt +41 -0
  70. metadata +143 -0
@@ -0,0 +1,15 @@
1
+ * {
2
+ box-sizing: border-box
3
+ }
4
+
5
+ html, body {
6
+ margin: 0;
7
+ padding: 0;
8
+ width: 100%;
9
+ height: 100%;
10
+ }
11
+
12
+ p, h1, h2, h3, h4, h5, h6 {
13
+ padding: 0;
14
+ margin: 0;
15
+ }
@@ -0,0 +1,148 @@
1
+ /* Responsive breakpoints */
2
+ $column-width: 400px !default;
3
+ $responsive-sm-breakpoint: 599px !default;
4
+ $responsive-lg-breakpoint: 1200px !default;
5
+ $content-width: 1200px;
6
+
7
+ $theme-mode: 'light' !default;
8
+
9
+ @function mode-brightness($color, $factor) {
10
+ @if $theme-mode == 'dark' {
11
+ @return lighten($color, $factor);
12
+ } @else {
13
+ @return darken($color, $factor);
14
+ }
15
+ }
16
+
17
+ /* Colors */
18
+ $light: #eee !default;
19
+ $dark: #343a40 !default;
20
+ $primary: #007bff !default;
21
+ $secondary: #999999 !default;
22
+ $success: #28a745 !default;
23
+ $info: #17a2b8 !default;
24
+ $warning: #ffc107 !default;
25
+ $danger: #dc3545 !default;
26
+ $special: rebeccapurple !default;
27
+ $alert: $danger;
28
+ $notice: $info;
29
+
30
+ @function mode-color($light: $light, $dark: $dark) {
31
+ @if $theme-mode == 'dark' {
32
+ @return $dark;
33
+ } @else {
34
+ @return $light;
35
+ }
36
+ }
37
+
38
+ $theme-colors: (
39
+ primary: ($primary, $light),
40
+ secondary: ($secondary, $light),
41
+ success: ($success, $light),
42
+ info: ($info, $dark),
43
+ notice: ($notice, $dark),
44
+ warning: ($warning, $dark),
45
+ danger: ($danger, $light),
46
+ alert: ($alert, $light),
47
+ special: ($special, $light)
48
+ ) !default;
49
+
50
+ /* Design */
51
+ $background: #d4d4d4 !default;
52
+ $foreground: mode-color($dark, $light) !default;
53
+ $highlight: #dcac0b !default;
54
+
55
+ /* Layout & Design */
56
+ $custom-layout: false !default;
57
+ $default-padding: .5rem !default;
58
+ $default-border-color: mode-brightness($background, 10%) !default;
59
+ $default-border: solid 1px $default-border-color !default;
60
+ $default-outline-color: $highlight !default;
61
+ $default-outline: solid 1px $default-outline-color !default;
62
+
63
+ $text-font-url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap';
64
+ $text-font: 'Roboto';
65
+ $icon-font-url: 'https://fonts.googleapis.com/icon?family=Material+Icons&display=swap';
66
+ $icon-font: 'Material Icons';
67
+
68
+ $header-enable: true !default;
69
+ $header-background: darken($background, 5%) !default;
70
+ $header-foreground: $foreground !default;
71
+ $header-border-bottom: $default-border !default;
72
+ $header-padding: $default-padding !default;
73
+
74
+ $logo-height: 100px;
75
+
76
+ $main-menu-enable: true !default;
77
+ $main-menu-background: $header-background !default;
78
+ $main-menu-hover-background: $main-menu-background !default;
79
+ $main-menu-padding: $default-padding !default;
80
+
81
+ $breadcrumbs-enable: true !default;
82
+ $breadcrumbs-background: $header-background !default;
83
+ $breadcrumbs-foreground: $header-foreground !default;
84
+ $breadcrumbs-border-bottom: $header-border-bottom !default;
85
+ $breadcrumbs-padding: $default-padding !default;
86
+
87
+ $left-column-enable: true !default;
88
+ $left-column-background: $background !default;
89
+ $left-column-foreground: $foreground !default;
90
+ $left-column-border-right: $default-border !default;
91
+ $left-column-padding: $default-padding !default;
92
+
93
+ $right-column-enable: true !default;
94
+ $right-column-background: $background !default;
95
+ $right-column-foreground: $foreground !default;
96
+ $right-column-border-left: $default-border !default;
97
+ $right-column-padding: $default-padding !default;
98
+
99
+ $footer-enable: true !default;
100
+ $footer-background: darken($background, 5%) !default;
101
+ $footer-foreground: $foreground !default;
102
+ $footer-border-top: $default-border !default;
103
+ $footer-padding: $default-padding !default;
104
+
105
+ /* Typography */
106
+ $link-color: $highlight !default;
107
+ $link-color-hover: lighten($link-color, 10) !default;
108
+ $link-color-visited: darken($link-color, 10) !default;
109
+ $link-color-active: lighten($link-color, 10) !default;
110
+ @import url(#{$text-font-url});
111
+ @import url(#{$icon-font-url});
112
+
113
+ /* Components */
114
+ /* Card */
115
+ $card-background: $light !default;
116
+ $card-foreground: #444 !default;
117
+ $card-header-background-color: #ececec !default;
118
+ $card-header-foreground-color: #444 !default;
119
+ $card-border-color: darken($card-header-background-color, 10%) !default;
120
+
121
+ /* Form Controls */
122
+ $fieldset-border-color: $highlight !default;
123
+ $input-background: mode-color() !default;
124
+ $input-foreground: mode-color($dark, $light) !default;
125
+ $input-border-bottom-width: 2px !default;
126
+ $input-border-color: transparent !default;
127
+ $input-background-focus: lighten($background, 20) !default;
128
+ $input-border-color-focus: $highlight !default;
129
+ $input-background-color-error: transparentize($danger, 0.5) !default;
130
+ $input-border-color-error: $danger !default;
131
+ $input-text-error: $danger !default;
132
+ $form-background-color: lighten($background, 10) !default;
133
+
134
+ /* Table */
135
+ $table-stripped-odd-row-background: #6c757d !default;
136
+ $table-selectable-hover-background-color: #17a2b8 !default;
137
+ $table-bordered-border-color: #000000 !default;
138
+ $table-bordered-rows-border-color: #000000 !default;
139
+ $table-bordered-columns-border-color: #730E15 !default;
140
+
141
+ $toggle-box-border-color: $input-border-color;
142
+ $toggle-box-background-color: $background;
143
+ $toggle-box-border-color-yes: lighten($success, 30);
144
+ $toggle-box-border-color-no: lighten($dark, 50);
145
+ $toggle-box-button-color-yes: $success;
146
+ $toggle-box-button-background-color-yes: lighten($success, 40);
147
+ $toggle-box-button-color-no: $danger;
148
+ $toggle-box-button-background-color-no: lighten($danger, 40);
@@ -0,0 +1,218 @@
1
+ @use "010-config" as config;
2
+
3
+ @mixin for-phones-only() {
4
+ @media (max-width: config.$responsive-sm-breakpoint) {
5
+ @content;
6
+ }
7
+ }
8
+
9
+ @mixin for-tablets-up() {
10
+ @media (min-width: config.$responsive-sm-breakpoint + 1px) and (max-width: config.$responsive-lg-breakpoint - 1px) {
11
+ @content;
12
+ }
13
+ }
14
+
15
+ @mixin for-desktops-up {
16
+ @media (min-width: config.$responsive-lg-breakpoint) {
17
+ @content;
18
+ }
19
+ }
20
+
21
+ @mixin background-variants($color-map, $brightness: 0%, $hover-brightness: 0%, $border-brightness: -10%, $transparency: -.4, $includeDisable: false) {
22
+ background-origin: border-box;
23
+
24
+ @each $name, $colors in $color-map {
25
+ &.#{$name} {
26
+ $color: nth($colors, 1);
27
+
28
+ background-color: adjust-color($color, $lightness: $brightness, $alpha: $transparency);
29
+ color: nth($colors, 2);
30
+
31
+ @if $border-brightness != 0 {
32
+ border: 1px solid adjust-color($color, $lightness: $border-brightness, $alpha: $transparency);
33
+ }
34
+
35
+ @if $hover-brightness != 0 {
36
+ &:hover {
37
+ background-color: adjust-color($color, $lightness: $hover-brightness, $alpha: $transparency);
38
+ }
39
+ }
40
+
41
+ @if $includeDisable {
42
+ &:disabled {
43
+ opacity: .4;
44
+ }
45
+ }
46
+ }
47
+ }
48
+ }
49
+
50
+ @mixin color-variants($color-map, $brightness: 0%, $hover-brightness: 0%) {
51
+ @each $name, $colors in $color-map {
52
+ &.text-#{$name} {
53
+ $color: nth($colors, 1);
54
+ color: adjust-color($color, $lightness: $brightness);
55
+
56
+ @if $hover-brightness != 0% {
57
+ &:hover {
58
+ color: adjust-color($color, $lightness: $hover-brightness);
59
+ }
60
+ }
61
+ }
62
+ }
63
+ }
64
+
65
+ @mixin grid-area($names...) {
66
+ @each $name in $names {
67
+ ##{$name} {
68
+ grid-area: $name;
69
+ }
70
+ }
71
+ }
72
+
73
+ @mixin responsive-breakpoints($class: "", $include-base-class: true) {
74
+ @if $class != "" {
75
+ @include for-phones-only() { .sm-#{$class} { @content; } }
76
+ @include for-tablets-up() { .md-#{$class} { @content; } }
77
+ @include for-desktops-up() { .lg-#{$class} { @content; } }
78
+ @if $include-base-class {
79
+ @include for-desktops-up() { .#{$class} { @content; } }
80
+ }
81
+ } @else {
82
+ @include for-phones-only() { @content("sm-"); }
83
+ @include for-tablets-up() { @content("md-"); }
84
+ @include for-desktops-up() { @content("lg-"); }
85
+ @if $include-base-class {
86
+ @content("");
87
+ }
88
+ }
89
+ }
90
+
91
+ $measurements: (w width, h height, min-w min-width, min-h min-height, max-w max-width, max-h max-height);
92
+ $side-variants: ("" "", b "-bottom", t "-top", r "-right", l "-left");
93
+
94
+ @mixin sizes($class, $property, $breakpoint, $measurement) {
95
+ $i: 5;
96
+ @while $i <= 100 {
97
+ .#{$class}#{$breakpoint}-#{$i} {
98
+ #{$property}: $i * $measurement;
99
+ }
100
+ $i: $i + 5;
101
+ }
102
+ }
103
+
104
+ @mixin size-variants($property, $alias, $factor, $sides: false, $responsive: false, $include-base-class: false, $extras: "", $selector-prefix: "") {
105
+ @for $multiplier from 1 through 16 {
106
+ @if $responsive {
107
+ @include responsive-breakpoints($include-base-class: $include-base-class) using ($prefix) {
108
+ @if $sides {
109
+ @each $suffix, $modifier in $side-variants {
110
+ #{$selector-prefix}.#{$prefix}#{$alias}#{$suffix}-#{$multiplier} {
111
+ #{$property}#{$modifier}: $multiplier * $factor #{$extras} !important;
112
+ }
113
+ }
114
+ #{$selector-prefix}.#{$prefix}#{$alias}h-#{$multiplier} {
115
+ #{$property}-left: $multiplier * $factor #{$extras} !important;
116
+ #{$property}-right: $multiplier * $factor #{$extras} !important;
117
+ }
118
+ #{$selector-prefix}.#{$prefix}#{$alias}v-#{$multiplier} {
119
+ #{$property}-top: $multiplier * $factor #{$extras} !important;
120
+ #{$property}-bottom: $multiplier * $factor #{$extras} !important;
121
+ }
122
+ } @else {
123
+ #{$selector-prefix}.#{$prefix}#{$alias}-#{$multiplier} { $property: $multiplier * $factor #{$extras} !important; }
124
+ }
125
+ }
126
+ } @else {
127
+ @if $sides {
128
+ @each $suffix, $modifier in $side-variants {
129
+ #{$selector-prefix}.#{$alias}#{$suffix}-#{$multiplier} {
130
+ #{$property}#{$modifier}: $multiplier * $factor #{$extras} !important;
131
+ }
132
+ }
133
+ #{$selector-prefix}.#{$alias}h-#{$multiplier} {
134
+ #{$property}-left: $multiplier * $factor #{$extras} !important;
135
+ #{$property}-right: $multiplier * $factor #{$extras} !important;
136
+ }
137
+ #{$selector-prefix}.#{$alias}v-#{$multiplier} {
138
+ #{$property}-top: $multiplier * $factor #{$extras} !important;
139
+ #{$property}-bottom: $multiplier * $factor #{$extras} !important;
140
+ }
141
+ } @else {
142
+ #{$selector-prefix}.#{$alias}-#{$multiplier} { #{$property}: $multiplier * $factor #{$extras} !important; }
143
+ }
144
+ }
145
+ }
146
+ }
147
+
148
+ @mixin property-variants($property, $alias, $variants, $responsive: false, $include-base-class: false) {
149
+ @if $responsive {
150
+ @include responsive-breakpoints($include-base-class: $include-base-class) using ($prefix) {
151
+ @each $suffix, $value in $variants {
152
+ .#{$prefix}#{$alias}-#{$suffix} {
153
+ #{$property}: $value !important;
154
+ }
155
+ }
156
+ }
157
+ } @else {
158
+ @each $suffix, $value in $variants {
159
+ .#{$alias}-#{$suffix} {
160
+ #{$property}: $value !important;
161
+ }
162
+ }
163
+ }
164
+ }
165
+
166
+ @mixin property-range($property, $alias, $min, $max, $responsive: false, $include-base-class: false) {
167
+ @if $responsive {
168
+ @for $i from $min through $max {
169
+ @include responsive-breakpoints($include-base-class: $include-base-class) using ($prefix) {
170
+ .#{$prefix}#{$alias}-#{$i} { @content($i); }
171
+ }
172
+ }
173
+ } @else {
174
+ @for $i from $min through $max {
175
+ .#{$alias}-#{$i} {
176
+ @content($i);
177
+ }
178
+ }
179
+ }
180
+ }
181
+
182
+ @mixin font-sizes($breakpoint) {
183
+ @for $i from 1 through 3 {
184
+ .#{$breakpoint}small-#{$i} {
185
+ font-size: 1rem - ($i * .25rem);
186
+ }
187
+ }
188
+
189
+ @for $i from 1 through 12 {
190
+ .#{$breakpoint}large-#{$i} {
191
+ font-size: 1rem + ($i * .25rem);
192
+ }
193
+ }
194
+ }
195
+
196
+ @mixin frontpack-gradient($background-color, $color, $gradient-breakpoint: 10px, $brightness: 0%){
197
+ $background-color: adjust-color($color, $lightness: $brightness);
198
+ background: linear-gradient(0, lighten($background-color, 20), $background-color $gradient-breakpoint, lighten($background-color, 20));
199
+ border-bottom: 1px solid $background-color;
200
+ color: $color;
201
+ }
202
+
203
+ @mixin outline-variants($color-map, $hover: 0%, $border: -10%) {
204
+ background: transparent;
205
+ @each $name, $colors in $color-map {
206
+ &.outline-#{$name} {
207
+ $color: nth($colors, 1);
208
+ color: $color;
209
+ border: adjust-color($color, $lightness: $border) 1px solid;
210
+ @if $hover != 0 {
211
+ &:hover {
212
+ background: adjust-color($color, $lightness: $hover);
213
+ color: nth($colors, 2);
214
+ }
215
+ }
216
+ }
217
+ }
218
+ }
@@ -0,0 +1,13 @@
1
+ @use "020-mixins" as mixins;
2
+
3
+ // display
4
+ @include mixins.responsive-breakpoints(hidden) { display: none !important; }
5
+ @include mixins.responsive-breakpoints(block) { display: block !important; }
6
+ @include mixins.responsive-breakpoints(inline-block) { display: inline-block !important; }
7
+ @include mixins.responsive-breakpoints(inline) { display: inline !important; }
8
+
9
+ // position
10
+ @include mixins.property-variants(text-align, ta, (l left, c center, r right));
11
+ @include mixins.property-variants(vertical-align, va, (t top, m middle, b bottom));
12
+ @include mixins.property-variants(position, p, (rel relative, abs absolute, sta static));
13
+
@@ -0,0 +1,5 @@
1
+ @use "010-config" as config;
2
+ @use "020-mixins" as mixins;
3
+
4
+ @include mixins.size-variants(margin, m, .25rem, true, true, true);
5
+ @include mixins.size-variants(padding, p, .25rem, true, true, true);
@@ -0,0 +1,113 @@
1
+ @use "010-config" as config;
2
+ @use "020-mixins" as mixins;
3
+ @use "sass:math";
4
+
5
+ @if config.$custom-layout == false {
6
+ body {
7
+ display: grid;
8
+ grid-template-columns: min-content 1fr min-content;
9
+ grid-template-rows: min-content min-content min-content 1fr min-content;
10
+ grid-template-areas: "header header header" "breadcrumbs breadcrumbs breadcrumbs" "messages messages messages" "left content right" "footer footer footer";
11
+ }
12
+
13
+ @include mixins.grid-area(header, breadcrumbs, messages, left, content, right, footer, actions);
14
+
15
+ #header {
16
+ display: grid;
17
+ grid-template-columns: min-content 1fr min-content;
18
+ grid-template-rows: auto;
19
+ grid-template-areas: "logo main-menu profile";
20
+ align-items: end;
21
+ }
22
+
23
+ #actions {
24
+ display: grid;
25
+ grid-template-columns: min-content 1fr min-content;
26
+ grid-template-rows: auto;
27
+ grid-template-areas: "left center right";
28
+ grid-column-gap: .5rem;
29
+ padding: .5rem;
30
+ align-items: stretch;
31
+
32
+ > div {
33
+ display: flex;
34
+ align-items: center;
35
+ column-gap: .5rem;
36
+ }
37
+
38
+ .left {
39
+ grid-area: left;
40
+ }
41
+
42
+ .center {
43
+ grid-area: center;
44
+ }
45
+
46
+ .right {
47
+ grid-area: right;
48
+ }
49
+ }
50
+
51
+ .actions {
52
+ grid-column: span 12;
53
+ }
54
+
55
+ @include mixins.grid-area(btn-left, logo, btn-right, main-menu, profile);
56
+
57
+ #btn-menu {
58
+ position: absolute;
59
+ top: 1em;
60
+ right: 1em;
61
+ }
62
+
63
+ #logo {
64
+ display: inline-block;
65
+
66
+ img {
67
+ height: config.$logo-height;
68
+ }
69
+ }
70
+
71
+ #main-menu {
72
+ display: flex;
73
+ flex-flow: row nowrap;
74
+ }
75
+
76
+ #left, #right {
77
+ display: inline-block;
78
+ width: config.$column-width;
79
+ background: rgba(255, 0, 0, .2);
80
+ }
81
+
82
+ #content {
83
+ overflow-y: auto;
84
+ padding: config.$default-padding;
85
+ }
86
+
87
+ @include mixins.for-phones-only() {
88
+ body {
89
+ grid-template-columns: 1fr;
90
+ grid-template-rows: min-content min-content min-content 1fr min-content;
91
+ grid-template-areas: "header" "breadcrumbs" "messages" "content" "footer";
92
+ }
93
+
94
+ #header {
95
+ grid-template-columns: 1fr;
96
+ grid-template-rows: min-content 1fr min-content;
97
+ grid-template-areas: "logo" "main-menu" "profile";
98
+ align-items: start;
99
+ justify-items: center;
100
+ }
101
+
102
+ #logo {
103
+ img {
104
+ height: math.div(config.$logo-height, 2);
105
+ }
106
+ }
107
+
108
+ #main-menu {
109
+ width: 100%;
110
+ flex-flow: column nowrap;
111
+ }
112
+ }
113
+ }
@@ -0,0 +1,131 @@
1
+ @use "010-config" as config;
2
+ @use "020-mixins" as mixins;
3
+
4
+ .container {
5
+ &.fluid {
6
+ width: 100%;
7
+ }
8
+
9
+ &.fixed-width {
10
+ width: config.$content-width;
11
+ margin: auto;
12
+ }
13
+
14
+ &.grid {
15
+ display: grid;
16
+ grid-template-columns: repeat(12, 1fr);
17
+ grid-auto-rows: min-content;
18
+ @for $i from 2 through 11 {
19
+ &.grid-#{$i} {
20
+ grid-template-columns: repeat($i, 1fr);
21
+ }
22
+ }
23
+
24
+ @include mixins.property-range(grid-column, col, 1, 12, true, true) using($i) {
25
+ grid-column: span $i;
26
+ }
27
+ @include mixins.property-range(grid-column, column, 1, 12, true, true) using($i) {
28
+ grid-column: $i;
29
+ }
30
+
31
+ @include mixins.property-range(grid-row, row, 1, 12, true, true) using($i) {
32
+ grid-column: span $i;
33
+ }
34
+
35
+ @include mixins.size-variants(grid-gap, gap, .25rem, false, false, true, $selector-prefix: "&");
36
+ @include mixins.size-variants(grid-row-gap, row-gap, .25rem, false, false, true, $selector-prefix: "&");
37
+ @include mixins.size-variants(grid-column-gap, col-gap, .25rem, false, false, true, $selector-prefix: "&");
38
+ }
39
+
40
+ &.flex {
41
+ display: flex;
42
+
43
+ &.row {
44
+ flex-direction: row;
45
+
46
+ &.reverse {
47
+ flex-direction: row-reverse;
48
+ }
49
+ }
50
+
51
+ &.column {
52
+ flex-direction: column;
53
+
54
+ &.reverse {
55
+ flex-direction: column-reverse;
56
+ }
57
+ }
58
+
59
+ &.no-wrap {
60
+ flex-wrap: nowrap;
61
+ }
62
+
63
+ &.wrap {
64
+ flex-wrap: wrap;
65
+ }
66
+
67
+ @each $position in (start end center) {
68
+ &.#{$position} {
69
+ align-items: $position;
70
+ align-content: $position;
71
+ }
72
+ &.justify-#{$position} {
73
+ justify-items: $position;
74
+ justify-content: $position;
75
+ }
76
+ }
77
+ @each $position in (stretch space-around space-between space-evenly) {
78
+ &.#{$position} {
79
+ align-content: $position;
80
+ }
81
+ &.justify-#{$position} {
82
+ justify-content: $position;
83
+ }
84
+ }
85
+ }
86
+
87
+ &.centered {
88
+ display: flex;
89
+ width: 100%;
90
+ height: 100%;
91
+ align-items: center;
92
+ align-content: center;
93
+ justify-items: center;
94
+ justify-content: center;
95
+ padding: 1rem;
96
+
97
+ .content {
98
+ width: config.$content-width;
99
+ }
100
+ }
101
+ }
102
+
103
+ @include mixins.for-tablets-up {
104
+ .container {
105
+
106
+ &.fixed-width {
107
+ width: 100%;
108
+ }
109
+
110
+ .centered {
111
+ .content {
112
+ width: 100%;
113
+ }
114
+ }
115
+ }
116
+ }
117
+
118
+ @include mixins.for-phones-only {
119
+ .container {
120
+
121
+ &.fixed-width {
122
+ width: 100%;
123
+ }
124
+
125
+ .centered {
126
+ .content {
127
+ width: 100%;
128
+ }
129
+ }
130
+ }
131
+ }