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.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +51 -0
- data/Rakefile +5 -0
- data/app/assets/config/frontpack_manifest.js +1 -0
- data/app/assets/images/logo.svg +141 -0
- data/app/assets/javascripts/frontpack/auto-complete.js +173 -0
- data/app/assets/javascripts/frontpack/base-webcomponent.js +160 -0
- data/app/assets/javascripts/frontpack/expandable-list.js +99 -0
- data/app/assets/javascripts/frontpack/image-preview.js +160 -0
- data/app/assets/javascripts/frontpack/image-uploader.js +34 -0
- data/app/assets/javascripts/frontpack/localized-time.js +17 -0
- data/app/assets/javascripts/frontpack/modal-dialog.js +206 -0
- data/app/assets/javascripts/frontpack/shortcuts.js +63 -0
- data/app/assets/javascripts/frontpack/tab-control.js +77 -0
- data/app/assets/javascripts/frontpack/text-box.js +70 -0
- data/app/assets/javascripts/frontpack/toggle-button.js +73 -0
- data/app/assets/stylesheets/frontpack/000-reset.scss +15 -0
- data/app/assets/stylesheets/frontpack/010-config.scss +148 -0
- data/app/assets/stylesheets/frontpack/020-mixins.scss +218 -0
- data/app/assets/stylesheets/frontpack/030-consts.scss +13 -0
- data/app/assets/stylesheets/frontpack/031-margins.scss +5 -0
- data/app/assets/stylesheets/frontpack/100-layout.scss +113 -0
- data/app/assets/stylesheets/frontpack/101-container.scss +131 -0
- data/app/assets/stylesheets/frontpack/200-design.scss +75 -0
- data/app/assets/stylesheets/frontpack/201-box.scss +6 -0
- data/app/assets/stylesheets/frontpack/202-borders.scss +5 -0
- data/app/assets/stylesheets/frontpack/300-typography.scss +128 -0
- data/app/assets/stylesheets/frontpack/800-components.scss +85 -0
- data/app/assets/stylesheets/frontpack/801-card.scss +53 -0
- data/app/assets/stylesheets/frontpack/802-buttons.scss +58 -0
- data/app/assets/stylesheets/frontpack/803-form-controls.scss +161 -0
- data/app/assets/stylesheets/frontpack/804-table.scss +60 -0
- data/app/assets/stylesheets/frontpack/805-switch-toggle.scss +43 -0
- data/app/assets/stylesheets/frontpack/frontpack.scss +18 -0
- data/app/controllers/concerns/frontpack/searchable.rb +33 -0
- data/app/controllers/frontpack/autocomplete_controller.rb +33 -0
- data/app/helpers/frontpack/application_helper.rb +7 -0
- data/app/helpers/frontpack/form_builder.rb +130 -0
- data/app/models/concerns/frontpack/auto_completable.rb +35 -0
- data/config/importmap.rb +1 -0
- data/config/routes.rb +3 -0
- data/lib/frontpack/button_to_patch.rb +64 -0
- data/lib/frontpack/engine.rb +28 -0
- data/lib/frontpack/extended_model_translations.rb +31 -0
- data/lib/frontpack/form_builder_options.rb +5 -0
- data/lib/frontpack/version.rb +5 -0
- data/lib/frontpack.rb +9 -0
- data/lib/generators/frontpack/install_generator.rb +37 -0
- data/lib/generators/frontpack/locale_generator.rb +11 -0
- data/lib/generators/templates/initializers/customize_form_with_errors.rb +31 -0
- data/lib/generators/templates/locales/frontpack.en.yml +43 -0
- data/lib/generators/templates/views/layouts/_form-errors.html.slim +3 -0
- data/lib/generators/templates/views/layouts/_navigation.html.slim +1 -0
- data/lib/generators/templates/views/layouts/application.html.slim +37 -0
- data/lib/generators/templates/views/layouts/errors.html.slim +19 -0
- data/lib/generators/templates/views/layouts/mailer.html.slim +6 -0
- data/lib/generators/templates/views/layouts/mailer.text.slim +1 -0
- data/lib/tasks/frontpack_tasks.rake +6 -0
- data/lib/templates/rails/file_utils/searchable.rb +30 -0
- data/lib/templates/rails/scaffold_controller/controller.rb.tt +93 -0
- data/lib/templates/slim/scaffold/_form.html.slim.tt +10 -0
- data/lib/templates/slim/scaffold/edit.html.slim.tt +10 -0
- data/lib/templates/slim/scaffold/index.html.slim.tt +20 -0
- data/lib/templates/slim/scaffold/new.html.slim.tt +8 -0
- data/lib/templates/slim/scaffold/partial.html.slim.tt +6 -0
- data/lib/templates/slim/scaffold/show.html.slim.tt +12 -0
- data/lib/templates/test_unit/model/fixtures.yml.tt +18 -0
- data/lib/templates/test_unit/model/unit_test.rb.tt +41 -0
- metadata +143 -0
@@ -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,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
|
+
}
|