Skip to content

Commit f84df05

Browse files
oltonolton
committed
Updated �ulls, added chat image
1 parent 9849e26 commit f84df05

12 files changed

Lines changed: 678 additions & 636 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,5 @@
2323
- [x] Updated gradients
2424
- [x] Fixed `x` position in `select` filter input
2525
- [x] Added `product-show-card` component
26-
- [x] Fixed `maxDate` for `calendar` component. Max date now is not included in the range.
26+
- [x] Fixed `maxDate` for `calendar` component. Max date now is not included in the range.
27+
- [x] Updated `bulls`, added `chat` image

‎examples/bulls.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,15 @@
1818

1919
<div class="container-fluid">
2020
<div class="container">
21-
<ul>
21+
<ul class="unstyled-list">
2222
<li><span data-role="bull" data-type="success"></span> Success</li>
2323
<li><span data-role="bull" data-type="pending"></span> Pending</li>
2424
<li><span data-role="bull" data-type="fail"></span> Fail</li>
2525
<li><span data-role="bull" data-type="warning"></span> Warning</li>
2626
<li><span data-role="bull" data-type="bulb"></span> Bulb</li>
2727
<li><span data-role="bull" data-type="star" class="fc-amber"></span> Star</li>
2828
<li><span data-role="bull" data-type="badge" class="fc-green"></span> Badge</li>
29+
<li><span data-role="bull" data-type="chat" class="fc-indigo"></span> Chat</li>
2930
</ul>
3031
</div>
3132
</div>

‎lib/metro.css‎

Lines changed: 130 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -52565,116 +52565,6 @@ input::placeholder {
5256552565
.card.flex-card .card-footer {
5256652566
margin-top: auto;
5256752567
}
52568-
:root {
52569-
--product-title-color: #191919;
52570-
--product-status-color: #191919;
52571-
--product-price-color: #191919;
52572-
}
52573-
.dark-side {
52574-
--product-title-color: #dbdfe7;
52575-
--product-status-color: #dbdfe7;
52576-
--product-price-color: #dbdfe7;
52577-
}
52578-
.product-card {
52579-
display: flex;
52580-
flex-flow: column nowrap;
52581-
position: relative;
52582-
font-size: 14px;
52583-
margin: 8px auto;
52584-
border: 1px solid var(--border-color);
52585-
border-radius: var(--card-border-radius);
52586-
background: var(--card-background);
52587-
color: var(--card-color);
52588-
padding: 1rem;
52589-
}
52590-
.product-card .product-image {
52591-
width: 100%;
52592-
position: relative;
52593-
display: block;
52594-
padding-bottom: 100%;
52595-
margin-bottom: 1rem;
52596-
}
52597-
.product-card .product-image img {
52598-
position: absolute;
52599-
width: 100%;
52600-
height: 100%;
52601-
inset: 0;
52602-
object-fit: scale-down;
52603-
}
52604-
.product-card .product-title {
52605-
--ratio: calc(19 / 14);
52606-
font-size: 16px;
52607-
font-weight: 400;
52608-
display: -webkit-box;
52609-
-webkit-line-clamp: var(--line-clamp, 2);
52610-
-webkit-box-orient: vertical;
52611-
height: calc(var(--line-clamp, 2) * var(--ratio) * 1em);
52612-
line-height: var(--ratio);
52613-
overflow: hidden;
52614-
word-break: break-word;
52615-
color: var(--product-title-color, inherit);
52616-
}
52617-
.product-card .product-status {
52618-
font-size: 12px;
52619-
font-weight: 500;
52620-
line-height: 16px;
52621-
word-break: break-word;
52622-
color: var(--product-status-color, inherit);
52623-
display: flex;
52624-
flex-flow: row nowrap;
52625-
align-items: center;
52626-
margin: 0.25rem 0;
52627-
gap: 10px;
52628-
}
52629-
.product-card .product-status .icon {
52630-
font-size: 20px;
52631-
width: 20px;
52632-
height: 20px;
52633-
line-height: 20px;
52634-
display: flex;
52635-
align-items: center;
52636-
justify-content: center;
52637-
object-fit: cover;
52638-
}
52639-
.product-card .product-desc {
52640-
font-size: 14px;
52641-
font-weight: 400;
52642-
line-height: 18px;
52643-
word-break: break-word;
52644-
}
52645-
.product-card .product-rating {
52646-
display: flex;
52647-
flex-flow: row nowrap;
52648-
align-items: center;
52649-
margin: 0.5rem 0;
52650-
}
52651-
.product-card .-old {
52652-
font-size: 12px;
52653-
font-weight: 400;
52654-
line-height: 12px;
52655-
text-decoration: line-through;
52656-
}
52657-
.product-card .product-price {
52658-
font-size: 18px;
52659-
font-weight: 700;
52660-
line-height: 20px;
52661-
}
52662-
.product-card .product-footer {
52663-
display: flex;
52664-
flex-flow: row nowrap;
52665-
align-items: center;
52666-
margin-top: 0.5rem;
52667-
}
52668-
.product-card > .badge {
52669-
position: absolute;
52670-
top: 10px;
52671-
right: 10px;
52672-
font-size: 14px;
52673-
}
52674-
.product-card > .badge.-left {
52675-
left: 10px;
52676-
right: auto;
52677-
}
5267852568

5267952569
/* source/components/carousel/carousel.less */
5268052570
:root {
@@ -65459,6 +65349,136 @@ label:has(input) {
6545965349
color: #fff;
6546065350
}
6546165351

65352+
/* source/components/product-card/product-card.less */
65353+
:root {
65354+
--product-card-padding: 1rem;
65355+
--product-card-font-size: 14px;
65356+
--product-card-header-background: #fbfbfb;
65357+
--product-card-header-color: #191919;
65358+
--product-card-footer-background: #fbfbfb;
65359+
--product-card-footer-color: #191919;
65360+
--product-card-background: #ffffff;
65361+
--product-card-color: #191919;
65362+
--product-card-avatar-border-color: #ffffff;
65363+
--product-card-border-radius: 6px;
65364+
--product-card-button-border-color: var(--border-color);
65365+
--product-title-color: #191919;
65366+
--product-status-color: #191919;
65367+
--product-price-color: #191919;
65368+
}
65369+
.dark-side {
65370+
--product-card-header-background: #282c35;
65371+
--product-card-header-color: #fbfbfb;
65372+
--product-card-footer-background: #282c35;
65373+
--product-card-footer-color: #fbfbfb;
65374+
--product-card-background: #2b2d30;
65375+
--product-card-color: #dbdfe7;
65376+
--product-card-avatar-border-color: #414245;
65377+
--product-card-button-border-color: var(--border-color);
65378+
--product-title-color: #dbdfe7;
65379+
--product-status-color: #dbdfe7;
65380+
--product-price-color: #dbdfe7;
65381+
}
65382+
.product-card {
65383+
display: flex;
65384+
flex-flow: column nowrap;
65385+
position: relative;
65386+
font-size: var(--product-card-font-size);
65387+
border: 1px solid var(--border-color);
65388+
border-radius: var(--product-card-border-radius);
65389+
background: var(--product-card-background);
65390+
color: var(--product-card-color);
65391+
padding: var(--product-card-padding);
65392+
}
65393+
.product-card .product-image {
65394+
width: 100%;
65395+
position: relative;
65396+
display: block;
65397+
padding-bottom: 100%;
65398+
margin-bottom: 1rem;
65399+
}
65400+
.product-card .product-image img {
65401+
position: absolute;
65402+
width: 100%;
65403+
height: 100%;
65404+
inset: 0;
65405+
object-fit: scale-down;
65406+
}
65407+
.product-card .product-title {
65408+
--ratio: calc(19 / 14);
65409+
font-size: calc(var(--product-card-font-size) * 1.14);
65410+
font-weight: 400;
65411+
display: -webkit-box;
65412+
-webkit-line-clamp: var(--line-clamp, 2);
65413+
-webkit-box-orient: vertical;
65414+
height: calc(var(--line-clamp, 2) * var(--ratio) * 1em);
65415+
line-height: var(--ratio);
65416+
overflow: hidden;
65417+
word-break: break-word;
65418+
color: var(--product-title-color, inherit);
65419+
}
65420+
.product-card .product-status {
65421+
font-size: calc(var(--product-card-font-size) / 1.16);
65422+
font-weight: 500;
65423+
line-height: 16px;
65424+
word-break: break-word;
65425+
color: var(--product-status-color, inherit);
65426+
display: flex;
65427+
flex-flow: row nowrap;
65428+
align-items: center;
65429+
margin: 0.25rem 0;
65430+
gap: 4px;
65431+
}
65432+
.product-card .product-status .icon {
65433+
font-size: calc(var(--product-card-font-size) * 1.25);
65434+
width: calc(var(--product-card-font-size) * 1.25);
65435+
height: calc(var(--product-card-font-size) * 1.25);
65436+
line-height: calc(var(--product-card-font-size) * 1.25);
65437+
display: flex;
65438+
align-items: center;
65439+
justify-content: center;
65440+
object-fit: cover;
65441+
}
65442+
.product-card .product-desc {
65443+
font-size: 12px;
65444+
font-weight: 400;
65445+
line-height: 18px;
65446+
word-break: break-word;
65447+
}
65448+
.product-card .product-rating {
65449+
display: flex;
65450+
flex-flow: row nowrap;
65451+
align-items: center;
65452+
margin: 0.5rem 0;
65453+
}
65454+
.product-card .-old {
65455+
font-size: 12px;
65456+
font-weight: 400;
65457+
line-height: 12px;
65458+
text-decoration: line-through;
65459+
}
65460+
.product-card .product-price {
65461+
font-size: 18px;
65462+
font-weight: 700;
65463+
line-height: 20px;
65464+
}
65465+
.product-card .product-footer {
65466+
display: flex;
65467+
flex-flow: row nowrap;
65468+
align-items: center;
65469+
margin-top: 0.5rem;
65470+
}
65471+
.product-card > .badge {
65472+
position: absolute;
65473+
top: 10px;
65474+
right: 10px;
65475+
font-size: 14px;
65476+
}
65477+
.product-card > .badge.-left {
65478+
left: 10px;
65479+
right: auto;
65480+
}
65481+
6546265482
/* source/components/progress/progress.less */
6546365483
:root {
6546465484
--progress-bar-height: 12px;

‎lib/metro.css.map‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/metro.js‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17103,16 +17103,16 @@
1710317103
let bull;
1710417104
switch (o2.type.toLowerCase()) {
1710517105
case "default":
17106-
bull = `<svg width="${o2.size}" height="${o2.size}" aria-label="completed successfully" viewBox="0 0 16 16" role="img" xmlns="http://www.w3.org/2000/svg"><path fill="#57ab5a" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm3.78-9.72a.751.751 0 0 0-.018-1.042.751.751 0 0 0-1.042-.018L6.75 9.19 5.28 7.72a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042l2 2a.75.75 0 0 0 1.06 0Z"></path></svg>`;
17106+
bull = `<svg width="${o2.size}" height="${o2.size}" aria-label="completed successfully" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="#57ab5a" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm3.78-9.72a.751.751 0 0 0-.018-1.042.751.751 0 0 0-1.042-.018L6.75 9.19 5.28 7.72a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042l2 2a.75.75 0 0 0 1.06 0Z"></path></svg>`;
1710717107
break;
1710817108
case "success":
17109-
bull = `<svg width="${o2.size}" height="${o2.size}" aria-label="completed successfully" viewBox="0 0 16 16" role="img" xmlns="http://www.w3.org/2000/svg"><path fill="#57ab5a" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm3.78-9.72a.751.751 0 0 0-.018-1.042.751.751 0 0 0-1.042-.018L6.75 9.19 5.28 7.72a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042l2 2a.75.75 0 0 0 1.06 0Z"></path></svg>`;
17109+
bull = `<svg width="${o2.size}" height="${o2.size}" aria-label="completed successfully" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="#57ab5a" d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm3.78-9.72a.751.751 0 0 0-.018-1.042.751.751 0 0 0-1.042-.018L6.75 9.19 5.28 7.72a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042l2 2a.75.75 0 0 0 1.06 0Z"></path></svg>`;
1711017110
break;
1711117111
case "pending":
1711217112
bull = `<svg width="${o2.size}" height="${o2.size}" aria-label="currently running" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" class="ani-spin"><path fill="none" stroke="#DBAB0A" stroke-width="2" d="M3.05 3.05a7 7 0 1 1 9.9 9.9 7 7 0 0 1-9.9-9.9Z" opacity=".5"></path><path fill="#DBAB0A" fill-rule="evenodd" d="M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z" clip-rule="evenodd"></path><path fill="#DBAB0A" d="M14 8a6 6 0 0 0-6-6V0a8 8 0 0 1 8 8h-2Z"></path></svg>`;
1711317113
break;
1711417114
case "fail":
17115-
bull = `<svg width="${o2.size}" height="${o2.size}" aria-label="failed" viewBox="0 0 16 16" role="img" xmlns="http://www.w3.org/2000/svg"><path fill="#e5534b" d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path></svg>`;
17115+
bull = `<svg width="${o2.size}" height="${o2.size}" aria-label="failed" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="#e5534b" d="M2.343 13.657A8 8 0 1 1 13.658 2.343 8 8 0 0 1 2.343 13.657ZM6.03 4.97a.751.751 0 0 0-1.042.018.751.751 0 0 0-.018 1.042L6.94 8 4.97 9.97a.749.749 0 0 0 .326 1.275.749.749 0 0 0 .734-.215L8 9.06l1.97 1.97a.749.749 0 0 0 1.275-.326.749.749 0 0 0-.215-.734L9.06 8l1.97-1.97a.749.749 0 0 0-.326-1.275.749.749 0 0 0-.734.215L8 6.94Z"></path></svg>`;
1711617116
break;
1711717117
case "warning":
1711817118
bull = `<svg width="${o2.size}" height="${o2.size}" aria-label="warning" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ff4d00" d="M246.312928,5.62892705 C252.927596,9.40873724 258.409564,14.8907053 262.189374,21.5053731 L444.667042,340.84129 C456.358134,361.300701 449.250007,387.363834 428.790595,399.054926 C422.34376,402.738832 415.04715,404.676552 407.622001,404.676552 L42.6666667,404.676552 C19.1025173,404.676552 7.10542736e-15,385.574034 7.10542736e-15,362.009885 C7.10542736e-15,354.584736 1.93772021,347.288125 5.62162594,340.84129 L188.099293,21.5053731 C199.790385,1.04596203 225.853517,-6.06216498 246.312928,5.62892705 Z M224,272 C208.761905,272 197.333333,283.264 197.333333,298.282667 C197.333333,313.984 208.415584,325.248 224,325.248 C239.238095,325.248 250.666667,313.984 250.666667,298.624 C250.666667,283.264 239.238095,272 224,272 Z M245.333333,106.666667 L202.666667,106.666667 L202.666667,234.666667 L245.333333,234.666667 L245.333333,106.666667 Z" id="Combined-Shape"></path></svg>`;
@@ -17121,15 +17121,18 @@
1712117121
bull = `<svg width="${o2.size}" height="${o2.size}" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#ffde21" d="M213.333333,85.3333333 C284.025781,85.3333333 341.333333,142.640885 341.333333,213.333333 C341.333333,260.711239 315.5928,302.077122 277.333732,324.208982 L277.333333,405.333333 L256,426.666667 L234.666667,426.666667 C234.666667,438.448741 225.115408,448 213.333333,448 C201.551259,448 192,438.448741 192,426.666667 L192,426.666667 L170.666667,426.666667 L149.333333,405.333333 L149.332954,324.208993 C111.073876,302.077136 85.3333333,260.711248 85.3333333,213.333333 C85.3333333,142.640885 142.640885,85.3333333 213.333333,85.3333333 Z M234.667665,339.563386 C227.72957,340.727434 220.602209,341.333333 213.333333,341.333333 C206.064458,341.333333 198.937097,340.727434 191.999002,339.563386 L192,384 L234.666667,384 L234.667665,339.563386 Z M96.4250122,307.614237 L119.052429,330.241654 L73.7975952,375.496488 L51.1701782,352.869071 L96.4250122,307.614237 Z M330.241654,307.614237 L375.496488,352.869071 L352.869071,375.496488 L307.614237,330.241654 L330.241654,307.614237 Z M426.666667,197.333333 L426.666667,229.333333 L362.666667,229.333333 L362.666667,197.333333 L426.666667,197.333333 Z M64,197.333333 L64,229.333333 L7.10542736e-15,229.333333 L7.10542736e-15,197.333333 L64,197.333333 Z M352.869071,51.1701782 L375.496488,73.7975952 L330.241654,119.052429 L307.614237,96.4250122 L352.869071,51.1701782 Z M73.7975952,51.1701782 L119.052429,96.4250122 L96.4250122,119.052429 L51.1701782,73.7975952 L73.7975952,51.1701782 Z M229.333333,-1.0658141e-14 L229.333333,64 L197.333333,64 L197.333333,-1.0658141e-14 L229.333333,-1.0658141e-14 Z" id="Combined-Shape"></path></svg>`;
1712217122
break;
1712317123
case "star":
17124-
bull = `<svg width="${o2.size}" height="${o2.size}" viewBox="0 0 16 16" ><path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.252-12.932a.476.476 0 0 0-.682.195l-1.2 2.432-2.684.39a.477.477 0 0 0-.266.816l1.944 1.892-.46 2.674a.479.479 0 0 0 .694.504L8 10.709l2.4 1.261a.478.478 0 0 0 .694-.504l-.458-2.673L12.578 6.9a.479.479 0 0 0-.265-.815l-2.685-.39-1.2-2.432a.473.473 0 0 0-.176-.195Z"></path></svg>`;
17124+
bull = `<svg width="${o2.size}" height="${o2.size}" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16Zm.252-12.932a.476.476 0 0 0-.682.195l-1.2 2.432-2.684.39a.477.477 0 0 0-.266.816l1.944 1.892-.46 2.674a.479.479 0 0 0 .694.504L8 10.709l2.4 1.261a.478.478 0 0 0 .694-.504l-.458-2.673L12.578 6.9a.479.479 0 0 0-.265-.815l-2.685-.39-1.2-2.432a.473.473 0 0 0-.176-.195Z"></path></svg>`;
1712517125
break;
1712617126
case "badge":
17127-
bull = `<svg width="${o2.size}" height="${o2.size}" viewBox="0 0 16 16" ><path d="M7.22 6.5a.72.72 0 1 1-1.44 0 .72.72 0 0 1 1.44 0Z"></path><path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16ZM4 5v3.38c.001.397.159.778.44 1.059l3.211 3.213a1.202 1.202 0 0 0 1.698 0l3.303-3.303a1.202 1.202 0 0 0 0-1.698L9.439 4.44A1.5 1.5 0 0 0 8.379 4H5a1 1 0 0 0-1 1Z"></path></svg>`;
17127+
bull = `<svg width="${o2.size}" height="${o2.size}" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M7.22 6.5a.72.72 0 1 1-1.44 0 .72.72 0 0 1 1.44 0Z"></path><path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16ZM4 5v3.38c.001.397.159.778.44 1.059l3.211 3.213a1.202 1.202 0 0 0 1.698 0l3.303-3.303a1.202 1.202 0 0 0 0-1.698L9.439 4.44A1.5 1.5 0 0 0 8.379 4H5a1 1 0 0 0-1 1Z"></path></svg>`;
17128+
break;
17129+
case "chat":
17130+
bull = `<svg width="${o2.size}" height="${o2.size}" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16ZM4 5v5a1 1 0 0 0 1 1h1v1.5a.5.5 0 0 0 .854.354L8.707 11H11a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1Z"></path></svg>`;
17131+
break;
1712817132
}
1712917133
element2.clear().html(bull);
1713017134
},
1713117135
setType: function(type = "default") {
17132-
const element2 = this.element;
1713317136
const o2 = this.options;
1713417137
if (type === o2.type) {
1713517138
return;
@@ -34595,11 +34598,7 @@
3459534598
onDatasetCreate: Metro2.noop
3459634599
};
3459734600
Metro2.remoteDatasetSetup = (options) => {
34598-
RemoteDatasetDefaultConfig = $7.extend(
34599-
{},
34600-
RemoteDatasetDefaultConfig,
34601-
options
34602-
);
34601+
RemoteDatasetDefaultConfig = $7.extend({}, RemoteDatasetDefaultConfig, options);
3460334602
};
3460434603
if (typeof globalThis.metroRemoteDatasetSetup !== "undefined") {
3460534604
Metro2.remoteDatasetSetup(globalThis.metroRemoteDatasetSetup);
@@ -34617,7 +34616,7 @@
3461734616
_create: function() {
3461834617
const o2 = this.options;
3461934618
this.offset = o2.offset;
34620-
this.rowSteps = o2.rowsSteps.toArray(",");
34619+
this.rowSteps = o2.rowsSteps.toArray(",", "int");
3462134620
this.limit = +o2.rows;
3462234621
this.url = o2.url;
3462334622
this.search = "";
@@ -34669,7 +34668,7 @@
3466934668
<select name="rows-count" data-role="select" data-prepend="${o2.rowsLabel || this.strings.label_rows_count}" data-filter="false">
3467034669
${this.rowSteps.map(
3467134670
(step) => `
34672-
<option value="${step}" ${+step === this.rowsCount ? "selected" : ""}>
34671+
<option value="${step}" ${+step === +this.limit ? "selected" : ""}>
3467334672
${step}
3467434673
</option>
3467534674
`

0 commit comments

Comments
 (0)