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,75 @@
1
+ @use "010-config" as config;
2
+ @use "020-mixins" as mixins;
3
+
4
+ body {
5
+ background: config.$background;
6
+ color: config.$foreground;
7
+ --default-off-icon: 'cancel';
8
+ --default-on-icon: 'check_circle';
9
+ }
10
+
11
+ @if config.$header-enable {
12
+ #header {
13
+ background: config.$header-background;
14
+ color: config.$header-foreground;
15
+ border-bottom: config.$header-border-bottom;
16
+ padding: config.$header-padding;
17
+ }
18
+ }
19
+
20
+ @if config.$main-menu-enable {
21
+ #main-menu {
22
+ a {
23
+ font-size: 2rem;
24
+ text-decoration: none;
25
+ background: config.$main-menu-background;
26
+ padding: config.$main-menu-padding;
27
+
28
+ &:hover {
29
+ background: config.$main-menu-hover-background;
30
+ }
31
+ }
32
+ }
33
+ }
34
+
35
+ @if config.$breadcrumbs-enable {
36
+ #breadcrumbs {
37
+ background: config.$breadcrumbs-background;
38
+ color: config.$breadcrumbs-foreground;
39
+ border-bottom: config.$breadcrumbs-border-bottom;
40
+ padding: config.$breadcrumbs-padding;
41
+ *:before {
42
+ content: '> ';
43
+ }
44
+ *:after {
45
+ content: ' ';
46
+ }
47
+ }
48
+ }
49
+
50
+ @if config.$left-column-enable {
51
+ #left {
52
+ background: config.$left-column-background;
53
+ color: config.$left-column-foreground;
54
+ border-right: config.$left-column-border-right;
55
+ padding: config.$left-column-padding;
56
+ }
57
+ }
58
+
59
+ @if config.$right-column-enable {
60
+ #right {
61
+ background: config.$right-column-background;
62
+ color: config.$right-column-foreground;
63
+ border-left: config.$right-column-border-left;
64
+ padding: config.$right-column-padding;
65
+ }
66
+ }
67
+
68
+ @if config.$footer-enable {
69
+ #footer {
70
+ background: config.$footer-background;
71
+ color: config.$footer-foreground;
72
+ border-top: config.$footer-border-top;
73
+ padding: config.$footer-padding;
74
+ }
75
+ }
@@ -0,0 +1,6 @@
1
+ @use "010-config" as config;
2
+ @use "020-mixins" as mixins;
3
+
4
+ .box {
5
+ @include mixins.background-variants(config.$theme-colors);
6
+ }
@@ -0,0 +1,5 @@
1
+ @use "010-config" as config;
2
+ @use "020-mixins" as mixins;
3
+
4
+ @include mixins.size-variants(outline-width, o, 1px, true, true, true);
5
+ @include mixins.size-variants(border, b, 1px, true, true, true, solid config.$default-border-color);
@@ -0,0 +1,128 @@
1
+ @use "010-config" as config;
2
+ @use "020-mixins" as mixins;
3
+
4
+ body {
5
+ font-family: config.$text-font;
6
+ }
7
+
8
+ a, a:link {
9
+ color: config.$link-color;
10
+ }
11
+
12
+ a:link.no-underscore {
13
+ text-decoration: none;
14
+ }
15
+
16
+ a:active {
17
+ color: config.$link-color-active;
18
+ }
19
+
20
+ a:hover {
21
+ color: config.$link-color-hover;
22
+ }
23
+
24
+ p {
25
+ padding: .5em 0;
26
+ }
27
+
28
+ dl {
29
+ dt {
30
+ font-weight: 700;
31
+ text-wrap: nowrap;
32
+ white-space: nowrap;
33
+ &:after {
34
+ content: ":";
35
+ }
36
+ }
37
+ dd {
38
+ padding: 0;
39
+ margin: 0;
40
+ }
41
+ &.columns {
42
+ display: grid;
43
+ grid-template-columns: min-content 1fr;
44
+ grid-gap: .5em;
45
+
46
+ dt {
47
+ text-align: right;
48
+ }
49
+ }
50
+ &.row {
51
+ display: block;
52
+ grid-gap: .5em;
53
+ dt, dd {
54
+ display: inline;
55
+ margin-right: .5em;
56
+ }
57
+ dd + dt {
58
+ margin-left: .5em;
59
+ }
60
+ }
61
+ }
62
+
63
+ ul {
64
+ &.responsive {
65
+ width: min-content;
66
+ display: inline-flex;
67
+ flex-flow: column nowrap;
68
+
69
+ li {
70
+ display: block;
71
+ white-space: nowrap;
72
+ }
73
+ }
74
+
75
+ &.links {
76
+ margin: 0;
77
+ padding: 0;
78
+ list-style: none;
79
+
80
+ li {
81
+ display: block;
82
+
83
+ a {
84
+ display: inline-flex;
85
+ flex-flow: row nowrap;
86
+ align-content: center;
87
+
88
+ text-decoration: none;
89
+ color: config.$secondary;
90
+
91
+ i {
92
+ font-size: 1rem;
93
+ margin: 0 .5rem 0 0;
94
+ }
95
+ }
96
+ }
97
+ }
98
+ }
99
+
100
+ .bold {
101
+ font-weight: 700;
102
+ }
103
+
104
+ @for $i from 6 through 1 {
105
+ h#{$i} {
106
+ font-size: 4em - $i * .35em;
107
+ }
108
+ }
109
+
110
+ li {
111
+ @include mixins.color-variants(config.$theme-colors);
112
+ }
113
+
114
+ @each $name, $colors in config.$theme-colors {
115
+ .text-#{$name} {
116
+ color: nth($colors, 1);
117
+ }
118
+ }
119
+
120
+ p, div, span, i, h1, h2, h3, h4, h5, h6 {
121
+ @include mixins.color-variants(config.$theme-colors);
122
+ @include mixins.outline-variants(config.$theme-colors);
123
+ @include mixins.background-variants(config.$theme-colors, 20%, 0%, 50%);
124
+ @include mixins.responsive-breakpoints using($breakpoint) {
125
+ @include mixins.font-sizes($breakpoint);
126
+ }
127
+ }
128
+
@@ -0,0 +1,85 @@
1
+ @use "010-config" as config;
2
+ @use "020-mixins" as mixins;
3
+ @use "802-buttons" as buttons;
4
+
5
+ toggle-button[icon]:before {
6
+ content: attr(icon);
7
+ font-family: config.$icon-font;
8
+ }
9
+
10
+ toggle-button[mode="copy"] {
11
+ cursor: pointer;
12
+ }
13
+
14
+ toggle-button {
15
+ @extend %button-appearance;
16
+ }
17
+
18
+ text-box {
19
+ @include mixins.background-variants(config.$theme-colors, 0%, 0%, 10%, 0.2);
20
+ }
21
+
22
+ expandable-item {
23
+ display: block;
24
+
25
+ ul {
26
+ margin: 0;
27
+ }
28
+
29
+ li a.active {
30
+ @extend .bold;
31
+
32
+ &::before {
33
+ content: '> ';
34
+ }
35
+
36
+ &::after {
37
+ content: ' <';
38
+ }
39
+ }
40
+ }
41
+
42
+ expandable-area {
43
+ display: none;
44
+ }
45
+
46
+ #loading {
47
+ display: none;
48
+ align-items: center;
49
+ justify-content: center;
50
+ position: absolute;
51
+ z-index: 1000;
52
+ width: 100%;
53
+ height: 100%;
54
+ background-color: transparentize(config.$background, .4);
55
+ font-size: 4em;
56
+ }
57
+
58
+ /* STATUS - empty, dragging, ready, error, loading */
59
+ image-preview {
60
+ display: flex;
61
+ align-items: center;
62
+ justify-content: center;
63
+ flex-direction: column;
64
+ height: 10em;
65
+ width: available;
66
+ padding: .25em;
67
+ border: 2px dashed config.$highlight;
68
+ font-weight: bold;
69
+ font-size: 1.5em;
70
+ border-radius: 5px;
71
+ cursor: pointer;
72
+ }
73
+
74
+ image-preview:hover {
75
+ color: config.$highlight;
76
+ }
77
+
78
+ image-preview[status='dragging'] {
79
+ background-color: transparentize(config.$success, 0.9);
80
+ border: 2px solid config.$highlight;
81
+ }
82
+
83
+ image-preview[status='ready'] {
84
+ border: 2px solid config.$highlight;
85
+ }
@@ -0,0 +1,53 @@
1
+ @use "010-config" as config;
2
+ @use "020-mixins" as mixins;
3
+
4
+ div.card {
5
+ overflow: hidden;
6
+ text-overflow: ellipsis;
7
+ display: inline-grid;
8
+ grid-template-columns: 100%;
9
+ grid-template-rows: min-content 1fr min-content;
10
+ grid-template-areas: 'header' 'content' 'footer';
11
+ box-shadow: 2px 2px 5px config.$card-header-background-color;
12
+
13
+ h2 {
14
+ grid-area: header;
15
+ color: config.$card-header-foreground-color;
16
+ background: config.$card-header-background-color;
17
+ margin: 0;
18
+ padding: .25rem;
19
+ text-align: center;
20
+ border-bottom: 1px solid config.$card-border-color;
21
+ border-top-left-radius: .25em;
22
+ border-top-right-radius: .25em;
23
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
24
+ }
25
+
26
+ > div {
27
+ border-left: 1px solid config.$card-border-color;
28
+ border-right: 1px solid config.$card-border-color;
29
+
30
+ &:last-child {
31
+ border-bottom: 1px solid config.$card-border-color;
32
+ }
33
+ }
34
+
35
+ @each $color-name, $colors in config.$theme-colors {
36
+ &.#{$color-name} {
37
+ h2 {
38
+ @include mixins.frontpack-gradient(nth($colors, 1), nth($colors, 2), 10px, -10%)
39
+ }
40
+
41
+ div {
42
+ border-color: nth($colors, 1);
43
+ }
44
+ }
45
+ }
46
+
47
+ .footer {
48
+ grid-area: footer;
49
+ @include mixins.background-variants(config.$theme-colors, 0%, 0%, 0%, 0.2);
50
+ }
51
+
52
+ @include mixins.grid-area((content));
53
+ }
@@ -0,0 +1,58 @@
1
+ @use "010-config" as config;
2
+ @use "020-mixins" as mixins;
3
+ @use "300-typography" as typography;
4
+
5
+ %button-appearance {
6
+ @extend .bold;
7
+ display: inline-block;
8
+ cursor: pointer;
9
+ font-size: 1rem;
10
+ line-height: 1rem;
11
+ white-space: nowrap;
12
+ padding: .5rem 1rem;
13
+ border-radius: .25rem;
14
+ @include mixins.background-variants(config.$theme-colors, 0%, 10%, 10%, .2, true);
15
+
16
+ &.small {
17
+ padding: .2rem .4rem;
18
+ }
19
+
20
+ &[data-icon]:before {
21
+ content: attr(data-icon);
22
+ font-family: config.$icon-font;
23
+ }
24
+ }
25
+
26
+ button, input[type=button], input[type=reset], input[type=submit] {
27
+ @extend %button-appearance;
28
+ @include mixins.background-variants(config.$theme-colors, 0%, -5%, -10%, 0);
29
+
30
+ &.glow {
31
+ box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.5), inset -1px -1px 1px rgba(0, 0, 0, 0.5);
32
+ }
33
+ }
34
+
35
+ a.button {
36
+ @extend %button-appearance;
37
+ @include mixins.color-variants(config.$theme-colors, 0%, 0%);
38
+ text-decoration: none !important;
39
+ }
40
+
41
+ .button-group {
42
+ display: flex;
43
+ flex-flow: row nowrap;
44
+ justify-content: center;
45
+
46
+ button, a.button {
47
+ &:not(:last-child) {
48
+ border-top-right-radius: 0;
49
+ border-bottom-right-radius: 0;
50
+ border-right: 0;
51
+ }
52
+
53
+ &:not(:first-child) {
54
+ border-top-left-radius: 0;
55
+ border-bottom-left-radius: 0;
56
+ }
57
+ }
58
+ }
@@ -0,0 +1,161 @@
1
+ @use "010-config" as config;
2
+ @use "101-container" as container;
3
+
4
+ form {
5
+ @extend .container;
6
+ padding: config.$default-padding;
7
+ }
8
+
9
+ .field {
10
+ display: grid;
11
+ grid-template-columns: min-content 1fr min-content;
12
+ grid-template-rows: min-content 2.5em min-content;
13
+ grid-template-areas: "label label label" "input input input" "details . error";
14
+ grid-gap: .25rem;
15
+
16
+ label {
17
+ grid-area: label;
18
+ }
19
+
20
+ small {
21
+ grid-area: details;
22
+ white-space: nowrap;
23
+ }
24
+
25
+ i {
26
+ grid-area: error;
27
+ white-space: nowrap;
28
+ color: config.$input-text-error;
29
+ }
30
+
31
+ &.hidden {
32
+ display: none;
33
+ }
34
+
35
+ &.fluid-height {
36
+ grid-template-rows: min-content 1fr min-content;
37
+ }
38
+
39
+ &.rich-text {
40
+ grid-template-rows: min-content min-content 1fr min-content;
41
+ grid-template-areas: "label label label" "toolbar toolbar toolbar" "input input input" "details . error";
42
+
43
+ trix-toolbar {
44
+ grid-area: toolbar;
45
+
46
+ button {
47
+ background: config.$light;
48
+ }
49
+ }
50
+
51
+ trix-editor {
52
+ grid-area: input;
53
+ background: config.$input-background;
54
+ }
55
+ }
56
+ }
57
+
58
+ .check-control {
59
+ display: inline-grid;
60
+ grid-template-columns: min-content 1fr;
61
+ grid-template-rows: 1.5em 2fr;
62
+ grid-template-areas: ". ." "input label";
63
+
64
+ label {
65
+ grid-area: label
66
+ }
67
+
68
+ input {
69
+ grid-area: input;
70
+ }
71
+
72
+ &.inline {
73
+ grid-template-rows: 2fr;
74
+ grid-template-areas: "input label";
75
+ }
76
+ }
77
+
78
+ %form-input {
79
+ /* RESET */
80
+ filter: none;
81
+ outline: none;
82
+
83
+ grid-area: input;
84
+ background: config.$input-background;
85
+ color: config.$input-foreground;
86
+ border: none;
87
+ border-bottom: config.$input-border-color config.$input-border-bottom-width solid;
88
+ padding: .25rem;
89
+ font-size: 14pt;
90
+
91
+ &:focus, {
92
+ border-bottom-color: config.$input-border-color-focus;
93
+ transition: border-bottom-color ease-in 0.1s;
94
+
95
+ &.error {
96
+ border-bottom-color: config.$input-border-color-error;
97
+ }
98
+ }
99
+
100
+ &.error {
101
+ background: config.$input-background-color-error;
102
+ }
103
+ }
104
+
105
+ input {
106
+ @extend %form-input;
107
+ }
108
+
109
+ select {
110
+ @extend %form-input;
111
+ appearance: none;
112
+ -webkit-appearance: none;
113
+ -moz-appearance: none;
114
+ background: config.$input-background url('data:image/svg+xml;plain,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="rgba(0,0,0,.8)"/></svg>') right center no-repeat;
115
+ }
116
+
117
+ label[data-required] {
118
+ &:after {
119
+ content: '*';
120
+ color: config.$highlight;
121
+ }
122
+ }
123
+
124
+ textarea {
125
+ @extend %form-input;
126
+ resize: vertical;
127
+ }
128
+
129
+ fieldset {
130
+ border: solid 1px config.$fieldset-border-color;
131
+ border-radius: .25rem;
132
+ margin: 0;
133
+ padding: .5rem;
134
+
135
+ legend {
136
+ padding: 0 .5rem;
137
+ }
138
+ }
139
+
140
+ .actions {
141
+ grid-column: span 12;
142
+ }
143
+
144
+ ul.auto-complete-list {
145
+ list-style: none;
146
+ padding: 0;
147
+ margin: 0;
148
+ background: config.$input-background;
149
+ border: config.$input-border-color 1px solid;
150
+ box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
151
+ li {
152
+ padding: .25em;
153
+ cursor: pointer;
154
+ &:hover {
155
+ background: config.$input-background-focus;
156
+ }
157
+ & + li {
158
+ border-top: rgba(0, 0, 0, 0.1) 1px solid;
159
+ }
160
+ }
161
+ }
@@ -0,0 +1,60 @@
1
+ @use "010-config" as config;
2
+
3
+ table.responsive {
4
+ table-layout: fixed;
5
+ border-collapse: collapse;
6
+
7
+ th, td {
8
+ padding: .5em;
9
+ }
10
+
11
+ &.stripped {
12
+ tbody {
13
+ tr:nth-child(odd) {
14
+ td, th {
15
+ background: config.$table-stripped-odd-row-background;
16
+ }
17
+ }
18
+ }
19
+ }
20
+
21
+ &.selectable {
22
+ tbody {
23
+ tr:hover {
24
+ th, td {
25
+ background: config.$table-selectable-hover-background-color;
26
+ }
27
+ }
28
+ }
29
+ }
30
+
31
+ &.bordered {
32
+ border: config.$table-bordered-border-color 3px solid;
33
+ }
34
+
35
+ &.bordered-rows {
36
+ thead {
37
+ tr {
38
+ th, td {
39
+ border-bottom: config.$table-bordered-rows-border-color 2px solid;
40
+ }
41
+ }
42
+ }
43
+
44
+ tbody {
45
+ tr:not(:first-of-type) {
46
+ th, td {
47
+ border-top: config.$table-bordered-rows-border-color 1px dashed;
48
+ }
49
+ }
50
+ }
51
+ }
52
+
53
+ &.bordered-columns {
54
+ tbody, thead {
55
+ tr th:not(:last-child), tr td:not(:last-child) {
56
+ border-right: config.$table-bordered-columns-border-color 2px solid;
57
+ }
58
+ }
59
+ }
60
+ }
@@ -0,0 +1,43 @@
1
+ @use "010-config" as config;
2
+ @use "300-typography" as typography;
3
+
4
+ .switch-toggle {
5
+ grid-area: input;
6
+
7
+ input {
8
+ display: none;
9
+ }
10
+
11
+ label {
12
+ position: relative;
13
+ display: inline-block;
14
+ @extend .bold;
15
+ width: 4.5em;
16
+ height: 2.5em;
17
+ margin: 0;
18
+ cursor: pointer;
19
+ border: config.$default-border-color 1px solid;
20
+ }
21
+ }
22
+
23
+ .switch-toggle label::before {
24
+ font-family: config.$icon-font;
25
+ font-size: 1.2em;
26
+ position: absolute;
27
+ content: var(--off-icon, var(--default-off-icon));
28
+ text-align: center;
29
+ line-height: 2rem;
30
+ top: calc(.25rem - 1px);
31
+ left: calc(.25rem - 1px);
32
+ width: 2rem;
33
+ height: 2rem;
34
+ background-color: config.$danger;
35
+ transition: .3s ease-in-out;
36
+ }
37
+
38
+ .switch-toggle input[type="checkbox"]:checked + label::before {
39
+ content: var(--on-icon, var(--default-on-icon));
40
+ left: 50%;
41
+ color: #fff;
42
+ background-color: config.$success;
43
+ }
@@ -0,0 +1,18 @@
1
+ @forward "010-config";
2
+
3
+ @use "000-reset" as reset;
4
+ @use "020-mixins" as mixins;
5
+ @use "030-consts" as consts;
6
+ @use "031-margins" as margins;
7
+ @use "100-layout" as layout;
8
+ @use "101-container" as container;
9
+ @use "200-design" as design;
10
+ @use "201-box" as box;
11
+ @use "202-borders" as borders;
12
+ @use "300-typography" as typography;
13
+ @use "800-components" as components;
14
+ @use "801-card" as card;
15
+ @use "802-buttons" as buttons;
16
+ @use "803-form-controls" as form-controls;
17
+ @use "804-table" as table;
18
+ @use "805-switch-toggle" as switch-toggle;