@nettyapps/ntybase 0.0.9 → 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.
- package/package.json +1 -1
- package/styles/public-nettyapp-base.scss +186 -1
package/package.json
CHANGED
|
@@ -1,4 +1,67 @@
|
|
|
1
|
-
|
|
1
|
+
/** Global Styles **/
|
|
2
|
+
body {
|
|
3
|
+
font-family: Roboto, "Helvetica Neue", sans-serif;
|
|
4
|
+
margin: 0;
|
|
5
|
+
--ag-foreground-color: var(--mat-sys-on-surface);
|
|
6
|
+
--ag-header-background-color: var(--mat-sys-secondary);
|
|
7
|
+
--ag-header-text-color: var(--mat-sys-surface);
|
|
8
|
+
--ag-odd-row-background-color: var(--mat-sys-inverse-primary);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/** Sidenav and Content Styles */
|
|
12
|
+
mat-sidenav {
|
|
13
|
+
width: 350px;
|
|
14
|
+
padding: 16px;
|
|
15
|
+
border-right: 1px solid #e0e0e0;
|
|
16
|
+
border-radius: 0;
|
|
17
|
+
z-index: 2;
|
|
18
|
+
transition: width 0.3s ease, transform 0.3s ease;
|
|
19
|
+
overflow-y: auto;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
mat-sidenav.minimized {
|
|
23
|
+
width: 80px;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
mat-sidenav-content {
|
|
27
|
+
padding: 15px;
|
|
28
|
+
margin: 0;
|
|
29
|
+
transition: margin-left 0.3s ease;
|
|
30
|
+
overflow: auto;
|
|
31
|
+
height: calc(100vh - 64px - 60px);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.netty-sidenav-container {
|
|
35
|
+
min-height: calc(100vh - 64px);
|
|
36
|
+
height: auto;
|
|
37
|
+
margin-top: 64px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.netty-right-sidenav {
|
|
41
|
+
width: 50%;
|
|
42
|
+
min-width: 750px;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/** List Component Styles **/
|
|
46
|
+
.list-container {
|
|
47
|
+
height: calc(100vh - 89px);
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
padding: 20px;
|
|
51
|
+
box-sizing: border-box; /* padding'i height'a dahil et */
|
|
52
|
+
}
|
|
53
|
+
.list-grid {
|
|
54
|
+
flex: 1;
|
|
55
|
+
min-width: 0;
|
|
56
|
+
}
|
|
57
|
+
.list-menu-button-bar {
|
|
58
|
+
display: flex;
|
|
59
|
+
justify-content: flex-start;
|
|
60
|
+
margin-bottom: 10px;
|
|
61
|
+
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/** Save Record Component Styles **/
|
|
2
65
|
.nettybase-save-record-header-bar {
|
|
3
66
|
display: flex;
|
|
4
67
|
align-items: center;
|
|
@@ -23,4 +86,126 @@
|
|
|
23
86
|
font-weight: 500;
|
|
24
87
|
font-size: 18px;
|
|
25
88
|
color: var(--mat-nty-save-record-identifier);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.nettybase-container {
|
|
92
|
+
margin: 0;
|
|
93
|
+
padding: 20px;
|
|
94
|
+
white-space: nowrap;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.nettybase-form {
|
|
98
|
+
display: flex;
|
|
99
|
+
gap: 10px;
|
|
100
|
+
flex-wrap: wrap; /* Önemli: Öğelerin yeni satıra geçmesini sağlar */
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.nettybase-form > div {
|
|
104
|
+
// flex: 1;
|
|
105
|
+
min-width: auto;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.nettybase-form-row {
|
|
109
|
+
margin-bottom: 20px;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.nettybase-form-column {
|
|
113
|
+
/* 3 eşit sütun oluşturmak için ana kural */
|
|
114
|
+
flex-grow: 0; /* Gerekmedikçe genişleme */
|
|
115
|
+
flex-shrink: 0; /* Küçülme */
|
|
116
|
+
|
|
117
|
+
/* %33.33 genişlikten, yatay boşluğu (gap) dengelemek için biraz düşüyoruz */
|
|
118
|
+
width: calc(33.333% - 7px);
|
|
119
|
+
max-width: 100%;
|
|
120
|
+
/* Form öğeleri arasında dikey boşluk ekler */
|
|
121
|
+
margin-bottom: 20px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.nettybase-save-button-container {
|
|
125
|
+
display: flex;
|
|
126
|
+
justify-content: flex-end;
|
|
127
|
+
gap: 10px;
|
|
128
|
+
padding: 10px 0;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.nettybase-form-column-frame {
|
|
132
|
+
border: 1px solid var(--mat-sys-outline);
|
|
133
|
+
border-radius: 4px;
|
|
134
|
+
// padding: 15px;
|
|
135
|
+
box-sizing: border-box;
|
|
136
|
+
align-content: center;
|
|
137
|
+
min-height: 3.3rem;
|
|
138
|
+
max-width: 75%;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
/** Toolbar Styles **/
|
|
142
|
+
mat-toolbar {
|
|
143
|
+
justify-content: space-between;
|
|
144
|
+
|
|
145
|
+
@include mat.toolbar-overrides(
|
|
146
|
+
(
|
|
147
|
+
container-background-color: var(--mat-sys-primary),
|
|
148
|
+
container-text-color: var(--mat-sys-on-primary),
|
|
149
|
+
)
|
|
150
|
+
);
|
|
151
|
+
|
|
152
|
+
@include mat.icon-button-overrides(
|
|
153
|
+
(
|
|
154
|
+
icon-color: var(--mat-sys-on-primary),
|
|
155
|
+
)
|
|
156
|
+
);
|
|
157
|
+
|
|
158
|
+
@include mat.icon-overrides(
|
|
159
|
+
(
|
|
160
|
+
color: var(--mat-sys-on-primary),
|
|
161
|
+
)
|
|
162
|
+
);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/** Responsive Design **/
|
|
166
|
+
@media (min-width: 2050px) {
|
|
167
|
+
// 2050px'in üzerinde 4 sütuna çıkarmak için
|
|
168
|
+
.nettybase-form-column {
|
|
169
|
+
/* 2 eşit sütun */
|
|
170
|
+
width: calc(25% - 7.5px);
|
|
171
|
+
margin-bottom: 20px; // Dikey boşluğu ayarla
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
@media (max-width: 1024px) {
|
|
175
|
+
// 1024px'in altında 2 sütuna düşürmek için
|
|
176
|
+
.nettybase-form-column {
|
|
177
|
+
/* 2 eşit sütun */
|
|
178
|
+
width: calc(50% - 5px);
|
|
179
|
+
margin-bottom: 15px; // Dikey boşluğu ayarla
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
@media (max-width: 600px) {
|
|
183
|
+
// 600px'in altında 1 sütuna düşürmek için
|
|
184
|
+
.nettybase-form-column {
|
|
185
|
+
/* Tam genişlik */
|
|
186
|
+
width: 100%;
|
|
187
|
+
margin-bottom: 15px;
|
|
188
|
+
}
|
|
189
|
+
.nettybase-form {
|
|
190
|
+
gap: 15px;
|
|
191
|
+
.nettybase-form-row {
|
|
192
|
+
margin-bottom: 20px;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/** ntyui-button overrides **/
|
|
198
|
+
.ntyui-form-button,
|
|
199
|
+
.ntyui-form-button-save,
|
|
200
|
+
.ntyui-form-button-cancel {
|
|
201
|
+
border: 1px solid var(--mat-sys-primary);
|
|
202
|
+
border-radius: 20px;
|
|
203
|
+
margin-top: 10px;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
@media (max-width: 600px) {
|
|
207
|
+
ntyui-menu-button {
|
|
208
|
+
width: 100%;
|
|
209
|
+
margin-bottom: 10px;
|
|
210
|
+
}
|
|
26
211
|
}
|