better_ui_tmp 0.5.1
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 +211 -0
- data/Rakefile +8 -0
- data/app/assets/builds/application.js +1 -0
- data/app/assets/builds/better_ui.css +1 -0
- data/app/assets/stylesheets/better_ui.scss +3 -0
- data/app/components/better_ui/application/main/component.html.erb +5 -0
- data/app/components/better_ui/application/main/component.rb +99 -0
- data/app/components/better_ui/application/navbar/component.html.erb +219 -0
- data/app/components/better_ui/application/navbar/component.rb +148 -0
- data/app/components/better_ui/application/sidebar/component.html.erb +184 -0
- data/app/components/better_ui/application/sidebar/component.rb +129 -0
- data/app/components/better_ui/general/alert/component.html.erb +32 -0
- data/app/components/better_ui/general/alert/component.rb +242 -0
- data/app/components/better_ui/general/avatar/component.html.erb +20 -0
- data/app/components/better_ui/general/avatar/component.rb +301 -0
- data/app/components/better_ui/general/badge/component.html.erb +23 -0
- data/app/components/better_ui/general/badge/component.rb +248 -0
- data/app/components/better_ui/general/breadcrumb/component.html.erb +15 -0
- data/app/components/better_ui/general/breadcrumb/component.rb +186 -0
- data/app/components/better_ui/general/button/component.html.erb +34 -0
- data/app/components/better_ui/general/button/component.rb +214 -0
- data/app/components/better_ui/general/card/component.html.erb +21 -0
- data/app/components/better_ui/general/card/component.rb +37 -0
- data/app/components/better_ui/general/container/component.html.erb +8 -0
- data/app/components/better_ui/general/container/component.rb +158 -0
- data/app/components/better_ui/general/divider/component.html.erb +10 -0
- data/app/components/better_ui/general/divider/component.rb +226 -0
- data/app/components/better_ui/general/heading/component.html.erb +22 -0
- data/app/components/better_ui/general/heading/component.rb +257 -0
- data/app/components/better_ui/general/icon/component.html.erb +1 -0
- data/app/components/better_ui/general/icon/component.rb +222 -0
- data/app/components/better_ui/general/link/component.html.erb +18 -0
- data/app/components/better_ui/general/link/component.rb +255 -0
- data/app/components/better_ui/general/panel/component.html.erb +28 -0
- data/app/components/better_ui/general/panel/component.rb +249 -0
- data/app/components/better_ui/general/progress/component.html.erb +11 -0
- data/app/components/better_ui/general/progress/component.rb +160 -0
- data/app/components/better_ui/general/spinner/component.html.erb +35 -0
- data/app/components/better_ui/general/spinner/component.rb +93 -0
- data/app/components/better_ui/general/table/component.html.erb +5 -0
- data/app/components/better_ui/general/table/component.rb +217 -0
- data/app/components/better_ui/general/table/tbody_component.html.erb +3 -0
- data/app/components/better_ui/general/table/tbody_component.rb +30 -0
- data/app/components/better_ui/general/table/td_component.html.erb +3 -0
- data/app/components/better_ui/general/table/td_component.rb +44 -0
- data/app/components/better_ui/general/table/tfoot_component.html.erb +3 -0
- data/app/components/better_ui/general/table/tfoot_component.rb +28 -0
- data/app/components/better_ui/general/table/th_component.html.erb +6 -0
- data/app/components/better_ui/general/table/th_component.rb +51 -0
- data/app/components/better_ui/general/table/thead_component.html.erb +3 -0
- data/app/components/better_ui/general/table/thead_component.rb +28 -0
- data/app/components/better_ui/general/table/tr_component.html.erb +3 -0
- data/app/components/better_ui/general/table/tr_component.rb +30 -0
- data/app/components/better_ui/general/tag/component.html.erb +3 -0
- data/app/components/better_ui/general/tag/component.rb +104 -0
- data/app/components/better_ui/general/tooltip/component.html.erb +7 -0
- data/app/components/better_ui/general/tooltip/component.rb +239 -0
- data/app/controllers/better_ui/application_controller.rb +5 -0
- data/app/helpers/better_ui/application/components/main/main_helper.rb +42 -0
- data/app/helpers/better_ui/application/components/main.rb +13 -0
- data/app/helpers/better_ui/application/components/navbar/navbar_helper.rb +51 -0
- data/app/helpers/better_ui/application/components/navbar.rb +13 -0
- data/app/helpers/better_ui/application/components/sidebar/sidebar_helper.rb +51 -0
- data/app/helpers/better_ui/application/components/sidebar.rb +13 -0
- data/app/helpers/better_ui/application_helper.rb +10 -0
- data/app/helpers/better_ui/form_helper.rb +5 -0
- data/app/helpers/better_ui/general/components/alert/alert_helper.rb +29 -0
- data/app/helpers/better_ui/general/components/alert.rb +13 -0
- data/app/helpers/better_ui/general/components/avatar/avatar_helper.rb +29 -0
- data/app/helpers/better_ui/general/components/avatar.rb +13 -0
- data/app/helpers/better_ui/general/components/badge/badge_helper.rb +53 -0
- data/app/helpers/better_ui/general/components/badge.rb +13 -0
- data/app/helpers/better_ui/general/components/breadcrumb/breadcrumb_helper.rb +37 -0
- data/app/helpers/better_ui/general/components/breadcrumb.rb +13 -0
- data/app/helpers/better_ui/general/components/button/button_helper.rb +65 -0
- data/app/helpers/better_ui/general/components/button.rb +13 -0
- data/app/helpers/better_ui/general/components/card/card_helper.rb +37 -0
- data/app/helpers/better_ui/general/components/card.rb +13 -0
- data/app/helpers/better_ui/general/components/container/container_helper.rb +60 -0
- data/app/helpers/better_ui/general/components/container.rb +13 -0
- data/app/helpers/better_ui/general/components/divider/divider_helper.rb +63 -0
- data/app/helpers/better_ui/general/components/divider.rb +13 -0
- data/app/helpers/better_ui/general/components/heading/heading_helper.rb +72 -0
- data/app/helpers/better_ui/general/components/heading.rb +13 -0
- data/app/helpers/better_ui/general/components/icon/icon_helper.rb +16 -0
- data/app/helpers/better_ui/general/components/icon.rb +13 -0
- data/app/helpers/better_ui/general/components/link/link_helper.rb +89 -0
- data/app/helpers/better_ui/general/components/link.rb +13 -0
- data/app/helpers/better_ui/general/components/panel/panel_helper.rb +83 -0
- data/app/helpers/better_ui/general/components/panel.rb +13 -0
- data/app/helpers/better_ui/general/components/progress/progress_helper.rb +53 -0
- data/app/helpers/better_ui/general/components/progress.rb +11 -0
- data/app/helpers/better_ui/general/components/spinner/spinner_helper.rb +17 -0
- data/app/helpers/better_ui/general/components/spinner.rb +10 -0
- data/app/helpers/better_ui/general/components/table/table_helper.rb +13 -0
- data/app/helpers/better_ui/general/components/table/tbody_helper.rb +13 -0
- data/app/helpers/better_ui/general/components/table/td_helper.rb +19 -0
- data/app/helpers/better_ui/general/components/table/tfoot_helper.rb +13 -0
- data/app/helpers/better_ui/general/components/table/th_helper.rb +19 -0
- data/app/helpers/better_ui/general/components/table/thead_helper.rb +13 -0
- data/app/helpers/better_ui/general/components/table/tr_helper.rb +13 -0
- data/app/helpers/better_ui/general/components/table.rb +25 -0
- data/app/helpers/better_ui/general/components/tag/tag_helper.rb +26 -0
- data/app/helpers/better_ui/general/components/tag.rb +15 -0
- data/app/helpers/better_ui/general/components/tooltip/tooltip_helper.rb +60 -0
- data/app/helpers/better_ui/general/components/tooltip.rb +13 -0
- data/app/helpers/better_ui/general_helper.rb +24 -0
- data/app/helpers/better_ui_helper.rb +16 -0
- data/app/javascript/application.js +1 -0
- data/app/jobs/better_ui/application_job.rb +4 -0
- data/app/mailers/better_ui/application_mailer.rb +6 -0
- data/app/models/better_ui/application_record.rb +5 -0
- data/app/views/components/better_ui/general/table/_custom_body_row.html.erb +17 -0
- data/app/views/components/better_ui/general/table/_custom_footer_rows.html.erb +17 -0
- data/app/views/components/better_ui/general/table/_custom_header_rows.html.erb +12 -0
- data/app/views/layouts/component_preview.html.erb +32 -0
- data/config/initializers/lookbook.rb +23 -0
- data/config/routes.rb +3 -0
- data/lib/better_ui/engine.rb +109 -0
- data/lib/better_ui/version.rb +3 -0
- data/lib/better_ui.rb +37 -0
- data/lib/generators/better_ui/install_generator.rb +103 -0
- data/lib/generators/better_ui/stylesheet_generator.rb +159 -0
- data/lib/generators/better_ui/templates/components/_avatar.scss +200 -0
- data/lib/generators/better_ui/templates/components/_badge.scss +154 -0
- data/lib/generators/better_ui/templates/components/_breadcrumb.scss +106 -0
- data/lib/generators/better_ui/templates/components/_button.scss +109 -0
- data/lib/generators/better_ui/templates/components/_card.scss +60 -0
- data/lib/generators/better_ui/templates/components/_heading.scss +81 -0
- data/lib/generators/better_ui/templates/components/_icon.scss +134 -0
- data/lib/generators/better_ui/templates/components/_index.scss +17 -0
- data/lib/generators/better_ui/templates/components/_link.scss +100 -0
- data/lib/generators/better_ui/templates/components/_panel.scss +104 -0
- data/lib/generators/better_ui/templates/components/_spinner.scss +129 -0
- data/lib/generators/better_ui/templates/components/_table.scss +156 -0
- data/lib/generators/better_ui/templates/components/_variables.scss +0 -0
- data/lib/generators/better_ui/templates/components_stylesheet.scss +35 -0
- data/lib/generators/better_ui/templates/index.scss +18 -0
- data/lib/generators/better_ui/templates/initializer.rb +41 -0
- data/lib/tasks/better_ui_tasks.rake +4 -0
- metadata +260 -0
@@ -0,0 +1,100 @@
|
|
1
|
+
@layer components {
|
2
|
+
// Classe base per il link (Block)
|
3
|
+
.bui-link {
|
4
|
+
@apply inline-flex items-center transition-colors duration-200;
|
5
|
+
|
6
|
+
// Elements
|
7
|
+
&__icon {
|
8
|
+
@apply flex-shrink-0;
|
9
|
+
|
10
|
+
&--left {
|
11
|
+
@apply mr-1.5;
|
12
|
+
}
|
13
|
+
|
14
|
+
&--right {
|
15
|
+
@apply ml-1.5;
|
16
|
+
}
|
17
|
+
}
|
18
|
+
|
19
|
+
&__text {
|
20
|
+
@apply inline;
|
21
|
+
}
|
22
|
+
|
23
|
+
// Modifiers (varianti colore)
|
24
|
+
&--default {
|
25
|
+
@apply text-gray-700 hover:text-gray-900;
|
26
|
+
}
|
27
|
+
|
28
|
+
&--white {
|
29
|
+
@apply text-white hover:text-gray-100;
|
30
|
+
}
|
31
|
+
|
32
|
+
&--red {
|
33
|
+
@apply text-red-600 hover:text-red-700;
|
34
|
+
}
|
35
|
+
|
36
|
+
&--rose {
|
37
|
+
@apply text-rose-600 hover:text-rose-700;
|
38
|
+
}
|
39
|
+
|
40
|
+
&--orange {
|
41
|
+
@apply text-orange-600 hover:text-orange-700;
|
42
|
+
}
|
43
|
+
|
44
|
+
&--green {
|
45
|
+
@apply text-green-600 hover:text-green-700;
|
46
|
+
}
|
47
|
+
|
48
|
+
&--blue {
|
49
|
+
@apply text-blue-600 hover:text-blue-700;
|
50
|
+
}
|
51
|
+
|
52
|
+
&--yellow {
|
53
|
+
@apply text-yellow-600 hover:text-yellow-700;
|
54
|
+
}
|
55
|
+
|
56
|
+
&--violet {
|
57
|
+
@apply text-violet-600 hover:text-violet-700;
|
58
|
+
}
|
59
|
+
|
60
|
+
// Modifiers (varianti stile)
|
61
|
+
&--underlined {
|
62
|
+
@apply underline decoration-1 underline-offset-2;
|
63
|
+
}
|
64
|
+
|
65
|
+
&--hover-underlined {
|
66
|
+
@apply no-underline hover:underline decoration-1 underline-offset-2;
|
67
|
+
}
|
68
|
+
|
69
|
+
&--bold {
|
70
|
+
@apply font-semibold;
|
71
|
+
}
|
72
|
+
|
73
|
+
// Modifiers (dimensioni)
|
74
|
+
&--sm {
|
75
|
+
@apply text-sm;
|
76
|
+
}
|
77
|
+
|
78
|
+
&--base {
|
79
|
+
@apply text-base;
|
80
|
+
}
|
81
|
+
|
82
|
+
&--lg {
|
83
|
+
@apply text-lg;
|
84
|
+
}
|
85
|
+
|
86
|
+
// Stati
|
87
|
+
&--active {
|
88
|
+
@apply font-medium;
|
89
|
+
}
|
90
|
+
|
91
|
+
&--disabled {
|
92
|
+
@apply pointer-events-none opacity-50;
|
93
|
+
}
|
94
|
+
|
95
|
+
// Stili specifici per bottoni che sembrano link
|
96
|
+
&--button {
|
97
|
+
@apply appearance-none bg-transparent border-none p-0 cursor-pointer;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}
|
@@ -0,0 +1,104 @@
|
|
1
|
+
@layer components {
|
2
|
+
// Classe base per il pannello (Block)
|
3
|
+
.bui-panel {
|
4
|
+
@apply border shadow-sm;
|
5
|
+
|
6
|
+
// Elements
|
7
|
+
&__header {
|
8
|
+
@apply px-4 py-3 border-b;
|
9
|
+
}
|
10
|
+
|
11
|
+
&__body {
|
12
|
+
@apply p-4;
|
13
|
+
}
|
14
|
+
|
15
|
+
&__footer {
|
16
|
+
@apply px-4 py-3 border-t;
|
17
|
+
}
|
18
|
+
|
19
|
+
&__title {
|
20
|
+
@apply text-lg font-medium;
|
21
|
+
}
|
22
|
+
|
23
|
+
// Modifiers (varianti colore)
|
24
|
+
&--default {
|
25
|
+
@apply bg-black text-white border-gray-900;
|
26
|
+
|
27
|
+
.bui-panel__header {
|
28
|
+
@apply bg-gray-900;
|
29
|
+
}
|
30
|
+
|
31
|
+
.bui-panel__footer {
|
32
|
+
@apply bg-gray-900;
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
&--white {
|
37
|
+
@apply bg-white text-black border-gray-200;
|
38
|
+
|
39
|
+
.bui-panel__header {
|
40
|
+
@apply bg-gray-50;
|
41
|
+
}
|
42
|
+
|
43
|
+
.bui-panel__footer {
|
44
|
+
@apply bg-gray-50;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
|
48
|
+
&--red {
|
49
|
+
@apply bg-red-50 text-red-900 border-red-200;
|
50
|
+
|
51
|
+
.bui-panel__header {
|
52
|
+
@apply bg-red-100 text-red-800;
|
53
|
+
}
|
54
|
+
|
55
|
+
.bui-panel__footer {
|
56
|
+
@apply bg-red-100;
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
// ... altre varianti di colore ...
|
61
|
+
|
62
|
+
// Modifiers (varianti di padding)
|
63
|
+
&--padding-none {
|
64
|
+
.bui-panel__body {
|
65
|
+
@apply p-0;
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
69
|
+
&--padding-small {
|
70
|
+
.bui-panel__body {
|
71
|
+
@apply p-2;
|
72
|
+
}
|
73
|
+
}
|
74
|
+
|
75
|
+
&--padding-medium {
|
76
|
+
.bui-panel__body {
|
77
|
+
@apply p-4;
|
78
|
+
}
|
79
|
+
}
|
80
|
+
|
81
|
+
&--padding-large {
|
82
|
+
.bui-panel__body {
|
83
|
+
@apply p-6;
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
87
|
+
// Modifiers (border radius)
|
88
|
+
&--radius-none {
|
89
|
+
@apply rounded-none;
|
90
|
+
}
|
91
|
+
|
92
|
+
&--radius-small {
|
93
|
+
@apply rounded-md;
|
94
|
+
}
|
95
|
+
|
96
|
+
&--radius-medium {
|
97
|
+
@apply rounded-lg;
|
98
|
+
}
|
99
|
+
|
100
|
+
&--radius-large {
|
101
|
+
@apply rounded-xl;
|
102
|
+
}
|
103
|
+
}
|
104
|
+
}
|
@@ -0,0 +1,129 @@
|
|
1
|
+
@layer components {
|
2
|
+
// Classe base per lo spinner (Block)
|
3
|
+
.bui-spinner {
|
4
|
+
@apply inline-flex flex-col items-center justify-center;
|
5
|
+
|
6
|
+
// Elements
|
7
|
+
&__animation {
|
8
|
+
@apply inline-block rounded-full animate-spin;
|
9
|
+
border-top-color: transparent;
|
10
|
+
}
|
11
|
+
|
12
|
+
&__label {
|
13
|
+
@apply mt-2 text-center;
|
14
|
+
}
|
15
|
+
|
16
|
+
&__content {
|
17
|
+
@apply mt-4;
|
18
|
+
}
|
19
|
+
|
20
|
+
// Modifiers (dimensioni)
|
21
|
+
&--small &__animation {
|
22
|
+
@apply w-5 h-5 border-2;
|
23
|
+
}
|
24
|
+
|
25
|
+
&--medium &__animation {
|
26
|
+
@apply w-8 h-8 border-3;
|
27
|
+
}
|
28
|
+
|
29
|
+
&--large &__animation {
|
30
|
+
@apply w-12 h-12 border-4;
|
31
|
+
}
|
32
|
+
|
33
|
+
// Modifiers (temi colore)
|
34
|
+
&--default {
|
35
|
+
.bui-spinner__animation {
|
36
|
+
@apply border-gray-200 border-t-gray-800;
|
37
|
+
}
|
38
|
+
|
39
|
+
.bui-spinner__label {
|
40
|
+
@apply text-gray-800;
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
&--white {
|
45
|
+
.bui-spinner__animation {
|
46
|
+
@apply border-gray-100 border-t-white;
|
47
|
+
}
|
48
|
+
|
49
|
+
.bui-spinner__label {
|
50
|
+
@apply text-white;
|
51
|
+
}
|
52
|
+
}
|
53
|
+
|
54
|
+
&--red {
|
55
|
+
.bui-spinner__animation {
|
56
|
+
@apply border-red-100 border-t-red-600;
|
57
|
+
}
|
58
|
+
|
59
|
+
.bui-spinner__label {
|
60
|
+
@apply text-red-600;
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
&--rose {
|
65
|
+
.bui-spinner__animation {
|
66
|
+
@apply border-rose-100 border-t-rose-600;
|
67
|
+
}
|
68
|
+
|
69
|
+
.bui-spinner__label {
|
70
|
+
@apply text-rose-600;
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
&--orange {
|
75
|
+
.bui-spinner__animation {
|
76
|
+
@apply border-orange-100 border-t-orange-500;
|
77
|
+
}
|
78
|
+
|
79
|
+
.bui-spinner__label {
|
80
|
+
@apply text-orange-500;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
|
84
|
+
&--green {
|
85
|
+
.bui-spinner__animation {
|
86
|
+
@apply border-green-100 border-t-green-600;
|
87
|
+
}
|
88
|
+
|
89
|
+
.bui-spinner__label {
|
90
|
+
@apply text-green-600;
|
91
|
+
}
|
92
|
+
}
|
93
|
+
|
94
|
+
&--blue {
|
95
|
+
.bui-spinner__animation {
|
96
|
+
@apply border-blue-100 border-t-blue-600;
|
97
|
+
}
|
98
|
+
|
99
|
+
.bui-spinner__label {
|
100
|
+
@apply text-blue-600;
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
&--yellow {
|
105
|
+
.bui-spinner__animation {
|
106
|
+
@apply border-yellow-100 border-t-yellow-500;
|
107
|
+
}
|
108
|
+
|
109
|
+
.bui-spinner__label {
|
110
|
+
@apply text-yellow-500;
|
111
|
+
}
|
112
|
+
}
|
113
|
+
|
114
|
+
&--violet {
|
115
|
+
.bui-spinner__animation {
|
116
|
+
@apply border-violet-100 border-t-violet-600;
|
117
|
+
}
|
118
|
+
|
119
|
+
.bui-spinner__label {
|
120
|
+
@apply text-violet-600;
|
121
|
+
}
|
122
|
+
}
|
123
|
+
|
124
|
+
// Modifiers (stati)
|
125
|
+
&--fullscreen {
|
126
|
+
@apply fixed inset-0 flex items-center justify-center z-50 bg-black opacity-50;
|
127
|
+
}
|
128
|
+
}
|
129
|
+
}
|
@@ -0,0 +1,156 @@
|
|
1
|
+
@layer components {
|
2
|
+
// Classe base per la tabella (Block)
|
3
|
+
.bui-table {
|
4
|
+
@apply w-full border-collapse;
|
5
|
+
|
6
|
+
// Elements
|
7
|
+
&__container {
|
8
|
+
@apply overflow-hidden border shadow-sm;
|
9
|
+
}
|
10
|
+
|
11
|
+
&__caption {
|
12
|
+
@apply p-4 font-medium text-left;
|
13
|
+
}
|
14
|
+
|
15
|
+
&__header {
|
16
|
+
@apply bg-gray-50;
|
17
|
+
}
|
18
|
+
|
19
|
+
&__footer {
|
20
|
+
@apply bg-gray-50;
|
21
|
+
}
|
22
|
+
|
23
|
+
&__body {
|
24
|
+
// Styling base per il corpo della tabella
|
25
|
+
}
|
26
|
+
|
27
|
+
&__cell {
|
28
|
+
@apply px-4 py-3 text-sm text-gray-700;
|
29
|
+
|
30
|
+
&--header {
|
31
|
+
@apply bg-gray-50 text-left text-xs uppercase tracking-wider text-gray-500 font-medium;
|
32
|
+
}
|
33
|
+
|
34
|
+
&--footer {
|
35
|
+
@apply font-medium;
|
36
|
+
}
|
37
|
+
}
|
38
|
+
|
39
|
+
&__row {
|
40
|
+
@apply border-b border-gray-200;
|
41
|
+
}
|
42
|
+
|
43
|
+
// Modifiers (varianti)
|
44
|
+
&--default {
|
45
|
+
@apply bg-white text-gray-900 border-gray-200;
|
46
|
+
}
|
47
|
+
|
48
|
+
&--red {
|
49
|
+
@apply bg-red-50 text-red-900 border-red-200;
|
50
|
+
|
51
|
+
.bui-table__header {
|
52
|
+
@apply bg-red-100;
|
53
|
+
}
|
54
|
+
|
55
|
+
.bui-table__footer {
|
56
|
+
@apply bg-red-100;
|
57
|
+
}
|
58
|
+
|
59
|
+
.bui-table__cell--header {
|
60
|
+
@apply bg-red-100 text-red-800;
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
&--blue {
|
65
|
+
@apply bg-blue-50 text-blue-900 border-blue-200;
|
66
|
+
|
67
|
+
.bui-table__header {
|
68
|
+
@apply bg-blue-100;
|
69
|
+
}
|
70
|
+
|
71
|
+
.bui-table__footer {
|
72
|
+
@apply bg-blue-100;
|
73
|
+
}
|
74
|
+
|
75
|
+
.bui-table__cell--header {
|
76
|
+
@apply bg-blue-100 text-blue-800;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
&--green {
|
81
|
+
@apply bg-green-50 text-green-900 border-green-200;
|
82
|
+
|
83
|
+
.bui-table__header {
|
84
|
+
@apply bg-green-100;
|
85
|
+
}
|
86
|
+
|
87
|
+
.bui-table__footer {
|
88
|
+
@apply bg-green-100;
|
89
|
+
}
|
90
|
+
|
91
|
+
.bui-table__cell--header {
|
92
|
+
@apply bg-green-100 text-green-800;
|
93
|
+
}
|
94
|
+
}
|
95
|
+
|
96
|
+
// Stati tabella
|
97
|
+
&--striped {
|
98
|
+
.bui-table__row:nth-child(even) {
|
99
|
+
@apply bg-gray-50;
|
100
|
+
}
|
101
|
+
}
|
102
|
+
|
103
|
+
&--hoverable {
|
104
|
+
.bui-table__row:hover {
|
105
|
+
@apply bg-gray-100;
|
106
|
+
}
|
107
|
+
}
|
108
|
+
|
109
|
+
&--bordered {
|
110
|
+
@apply border;
|
111
|
+
|
112
|
+
.bui-table__cell {
|
113
|
+
@apply border;
|
114
|
+
}
|
115
|
+
}
|
116
|
+
|
117
|
+
&--compact {
|
118
|
+
.bui-table__cell {
|
119
|
+
@apply px-2 py-1 text-xs;
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
// Modifiers (border radius)
|
124
|
+
&--radius-none {
|
125
|
+
@apply rounded-none;
|
126
|
+
|
127
|
+
.bui-table__container {
|
128
|
+
@apply rounded-none;
|
129
|
+
}
|
130
|
+
}
|
131
|
+
|
132
|
+
&--radius-small {
|
133
|
+
@apply rounded-md;
|
134
|
+
|
135
|
+
.bui-table__container {
|
136
|
+
@apply rounded-md overflow-hidden;
|
137
|
+
}
|
138
|
+
}
|
139
|
+
|
140
|
+
&--radius-medium {
|
141
|
+
@apply rounded-lg;
|
142
|
+
|
143
|
+
.bui-table__container {
|
144
|
+
@apply rounded-lg overflow-hidden;
|
145
|
+
}
|
146
|
+
}
|
147
|
+
|
148
|
+
&--radius-large {
|
149
|
+
@apply rounded-xl;
|
150
|
+
|
151
|
+
.bui-table__container {
|
152
|
+
@apply rounded-xl overflow-hidden;
|
153
|
+
}
|
154
|
+
}
|
155
|
+
}
|
156
|
+
}
|
File without changes
|
@@ -0,0 +1,35 @@
|
|
1
|
+
/*
|
2
|
+
* <%= options[:prefix] %>_better_ui_components.scss
|
3
|
+
* ========================================================================
|
4
|
+
* File principale che utilizza il sistema moderno di moduli Sass
|
5
|
+
* Generato il: <%= Time.now.strftime('%d/%m/%Y %H:%M') %>
|
6
|
+
*/
|
7
|
+
|
8
|
+
/* Base Tailwind - importazioni fondamentali */
|
9
|
+
@use "tailwindcss/base";
|
10
|
+
@use "tailwindcss/components";
|
11
|
+
@use "tailwindcss/utilities";
|
12
|
+
|
13
|
+
/*
|
14
|
+
* Importa i componenti originali della gemma attraverso un namespace
|
15
|
+
* per evitare conflitti
|
16
|
+
*/
|
17
|
+
@use 'better_ui/components' as bui;
|
18
|
+
|
19
|
+
/*
|
20
|
+
* Importa le personalizzazioni con namespace per organizzazione
|
21
|
+
* e chiarezza nel codice
|
22
|
+
*/
|
23
|
+
@use 'components/variables_overrides' as vars;
|
24
|
+
@use 'components/index' as overrides;
|
25
|
+
|
26
|
+
/*
|
27
|
+
* Aggiungi stili personalizzati dell'applicazione
|
28
|
+
* all'interno del layer components per mantenerli organizzati
|
29
|
+
*/
|
30
|
+
@layer components {
|
31
|
+
/*
|
32
|
+
* Qui puoi inserire stili personalizzati aggiuntivi
|
33
|
+
* che non rientrano nei file di override
|
34
|
+
*/
|
35
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
/*
|
2
|
+
* components/_index.scss
|
3
|
+
* File indice che raccoglie e riespone tutti i moduli di override
|
4
|
+
* Utilizza @forward per mantenere le API originali accessibili
|
5
|
+
*/
|
6
|
+
|
7
|
+
@forward 'variables_overrides';
|
8
|
+
@forward 'button_overrides';
|
9
|
+
@forward 'heading_overrides';
|
10
|
+
@forward 'breadcrumb_overrides';
|
11
|
+
@forward 'link_overrides';
|
12
|
+
@forward 'panel_overrides';
|
13
|
+
@forward 'icon_overrides';
|
14
|
+
@forward 'table_overrides';
|
15
|
+
@forward 'badge_overrides';
|
16
|
+
@forward 'spinner_overrides';
|
17
|
+
@forward 'avatar_overrides';
|
18
|
+
@forward 'card_overrides';
|
@@ -0,0 +1,41 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
# Configurazione di Better UI
|
4
|
+
# Questo file contiene le impostazioni predefinite per i componenti di Better UI.
|
5
|
+
# Puoi modificare queste impostazioni in base alle tue necessità.
|
6
|
+
|
7
|
+
BetterUi.configure do |config|
|
8
|
+
# Configurazione predefinita per i bottoni
|
9
|
+
# Queste impostazioni verranno applicate a tutti i bottoni a meno che non vengano sovrascritte
|
10
|
+
config.button_defaults = {
|
11
|
+
type: :default, # Tipo di bottone (:default, :white, :red, :green, ecc.)
|
12
|
+
size: :medium, # Dimensione del bottone (:small, :medium, :large)
|
13
|
+
rounded: :small, # Arrotondamento (:none, :small, :medium, :large, :full)
|
14
|
+
full_width: false, # Se il bottone deve occupare tutta la larghezza disponibile
|
15
|
+
disabled: false # Se il bottone è disabilitato di default
|
16
|
+
}
|
17
|
+
|
18
|
+
# Configurazione predefinita per gli alert
|
19
|
+
config.alert_defaults = {
|
20
|
+
theme: :default, # Tema dell'alert (:default, :success, :warning, :danger, :info)
|
21
|
+
dismissible: true, # Se l'alert può essere chiuso dall'utente
|
22
|
+
icon: true # Se mostrare l'icona associata al tema
|
23
|
+
}
|
24
|
+
|
25
|
+
# Configurazione predefinita per le card
|
26
|
+
config.card_defaults = {
|
27
|
+
theme: :default, # Tema della card (:default, :outline, :elevated)
|
28
|
+
padding: :medium, # Padding interno (:small, :medium, :large)
|
29
|
+
rounded: :medium, # Arrotondamento (:none, :small, :medium, :large)
|
30
|
+
shadow: :medium # Ombreggiatura (:none, :small, :medium, :large)
|
31
|
+
}
|
32
|
+
|
33
|
+
# Configurazione predefinita per i tab
|
34
|
+
config.tabs_defaults = {
|
35
|
+
theme: :default, # Tema dei tab (:default, :pills, :underline)
|
36
|
+
size: :medium, # Dimensione (:small, :medium, :large)
|
37
|
+
alignment: :left # Allineamento (:left, :center, :right, :justified)
|
38
|
+
}
|
39
|
+
|
40
|
+
# Puoi aggiungere altre configurazioni predefinite per i tuoi componenti qui
|
41
|
+
end
|