Skip to content

Commit 091e1f3

Browse files
mescalanteamescalantea
committed
feat: Add DataTable styles and logging classes to enhance UI and user feedback
1 parent 1698ed6 commit 091e1f3

File tree

2 files changed

+217
-1
lines changed

2 files changed

+217
-1
lines changed

‎dist/resources/css/sequra-core.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1840,6 +1840,102 @@
18401840
margin-top: 20px;
18411841
}
18421842

1843+
tr:has(.sqm--log):hover {
1844+
background: #f4f4f4;
1845+
}
1846+
1847+
.sqm--log {
1848+
font-family: monospace;
1849+
font-size: 12px;
1850+
}
1851+
.sqm--log-info {
1852+
color: #2196f3;
1853+
}
1854+
.sqm--log-warning {
1855+
color: #ff9800;
1856+
}
1857+
.sqm--log-error {
1858+
color: #f44336;
1859+
}
1860+
.sqm--log-debug {
1861+
color: #000;
1862+
}
1863+
1864+
.sq-datatable__top {
1865+
display: flex;
1866+
justify-content: space-between;
1867+
gap: 1rem;
1868+
margin-bottom: 2rem;
1869+
font-size: 15px;
1870+
align-items: center;
1871+
}
1872+
.sq-datatable__bottom {
1873+
margin-top: 2rem;
1874+
display: flex;
1875+
justify-content: space-between;
1876+
gap: 1rem;
1877+
font-size: 15px;
1878+
align-items: center;
1879+
}
1880+
.sq-datatable__info {
1881+
color: #686565;
1882+
}
1883+
.sq-datatable__pagination {
1884+
justify-self: flex-end;
1885+
}
1886+
.sq-datatable__pagination-list {
1887+
display: flex;
1888+
margin-left: auto;
1889+
margin-right: 0;
1890+
}
1891+
.sq-datatable__pagination-list .datatable-pagination-list-item .datatable-pagination-list-item-link {
1892+
width: 2rem;
1893+
height: 2rem;
1894+
border-radius: 2rem;
1895+
color: #000;
1896+
transition: all 0.15s;
1897+
margin: 0 0.25rem;
1898+
cursor: pointer;
1899+
}
1900+
.sq-datatable__pagination-list .datatable-pagination-list-item.sq-datatable__active .datatable-pagination-list-item-link, .sq-datatable__pagination-list .datatable-pagination-list-item:hover:not(.datatable-disabled) .datatable-pagination-list-item-link {
1901+
background-color: #000;
1902+
color: #fff;
1903+
}
1904+
.sq-datatable__pagination-list .datatable-pagination-list-item.datatable-disabled .datatable-pagination-list-item-link {
1905+
color: #686565;
1906+
cursor: not-allowed;
1907+
}
1908+
.sq-datatable__search {
1909+
justify-self: flex-end;
1910+
display: flex;
1911+
align-items: center;
1912+
gap: 1rem;
1913+
}
1914+
.sq-datatable__selector {
1915+
padding: 8px 16px !important;
1916+
color: #000 !important;
1917+
border: 1px solid #dce0e5 !important;
1918+
border-radius: 6px !important;
1919+
min-width: 80px !important;
1920+
outline-color: transparent !important;
1921+
}
1922+
.sq-datatable__selector:focus, .sq-datatable__selector:hover, .sq-datatable__selector:active {
1923+
border-color: #6fcf97 !important;
1924+
box-shadow: none !important;
1925+
}
1926+
.sq-datatable__input {
1927+
padding: 8px 16px !important;
1928+
color: #000 !important;
1929+
border: 1px solid #dce0e5 !important;
1930+
border-radius: 6px !important;
1931+
min-width: 300px !important;
1932+
outline-color: transparent !important;
1933+
}
1934+
.sq-datatable__input:focus, .sq-datatable__input:hover, .sq-datatable__input:active {
1935+
border-color: #6fcf97 !important;
1936+
box-shadow: none !important;
1937+
}
1938+
18431939
#sequra-page .sq-table-container {
18441940
overflow-x: auto;
18451941
width: 100%;

‎src/design/design.scss‎

Lines changed: 121 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,4 +134,124 @@
134134
#sequra-page * + .sqp-flash-message-wrapper,
135135
#sequra-page .sqp-flash-message-wrapper + * {
136136
margin-top: 20px;
137-
}
137+
}
138+
139+
// Begin: DataTable ------
140+
141+
tr:has(.sqm--log):hover {
142+
background: #f4f4f4;
143+
}
144+
145+
.sqm--log {
146+
font-family: monospace;
147+
font-size: 12px;
148+
149+
&-info {
150+
color: #2196f3;
151+
}
152+
&-warning {
153+
color: #ff9800;
154+
}
155+
&-error {
156+
color: #f44336;
157+
}
158+
&-debug {
159+
color: #000;
160+
}
161+
}
162+
163+
.sq-datatable {
164+
&__wrapper {
165+
}
166+
&__top {
167+
display: flex;
168+
justify-content: space-between;
169+
gap: 1rem;
170+
margin-bottom: 2rem;
171+
font-size: 15px;
172+
align-items: center;
173+
}
174+
&__container {
175+
}
176+
&__bottom {
177+
margin-top: 2rem;
178+
display: flex;
179+
justify-content: space-between;
180+
gap: 1rem;
181+
font-size: 15px;
182+
align-items: center;
183+
}
184+
&__info {
185+
color: #686565;
186+
}
187+
&__pagination {
188+
justify-self: flex-end;
189+
}
190+
&__pagination-list {
191+
display: flex;
192+
margin-left: auto;
193+
margin-right: 0;
194+
195+
.datatable-pagination-list-item {
196+
.datatable-pagination-list-item-link {
197+
width: 2rem;
198+
height: 2rem;
199+
border-radius: 2rem;
200+
color: #000;
201+
transition: all 0.15s;
202+
margin: 0 0.25rem;
203+
cursor: pointer;
204+
}
205+
&.sq-datatable__active,
206+
&:hover:not(.datatable-disabled) {
207+
.datatable-pagination-list-item-link {
208+
background-color: #000;
209+
color: #fff;
210+
}
211+
}
212+
&.datatable-disabled {
213+
.datatable-pagination-list-item-link {
214+
color: #686565;
215+
cursor: not-allowed;
216+
}
217+
}
218+
}
219+
}
220+
&__search {
221+
justify-self: flex-end;
222+
display: flex;
223+
align-items: center;
224+
gap: 1rem;
225+
}
226+
227+
&__selector {
228+
padding: 8px 16px !important;
229+
color: #000 !important;
230+
border: 1px solid #dce0e5 !important;
231+
border-radius: 6px !important;
232+
min-width: 80px !important;
233+
outline-color: transparent !important;
234+
&:focus,
235+
&:hover,
236+
&:active {
237+
border-color: #6fcf97 !important;
238+
box-shadow: none !important;
239+
}
240+
}
241+
242+
&__input {
243+
padding: 8px 16px !important;
244+
color: #000 !important;
245+
border: 1px solid #dce0e5 !important;
246+
border-radius: 6px !important;
247+
min-width: 300px !important;
248+
outline-color: transparent !important;
249+
&:focus,
250+
&:hover,
251+
&:active {
252+
border-color: #6fcf97 !important;
253+
box-shadow: none !important;
254+
}
255+
}
256+
}
257+
// End: DataTable ------

0 commit comments

Comments
 (0)