Skip to content

Commit af4b381

Browse files
oltonolton
committed
upd icons
1 parent 02dfd3e commit af4b381

File tree

15 files changed

+561
-162
lines changed

15 files changed

+561
-162
lines changed

‎examples/linked-block.html‎

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,57 @@
66
<link href="../lib/metro.css" rel="stylesheet">
77
<link href="../lib/icons.css" rel="stylesheet">
88

9-
<title>Test Any - Metro UI :: Popular HTML, CSS and JS library</title>
10-
9+
<title>Linked Block - Metro UI :: Popular HTML, CSS and JS library</title>
1110
</head>
1211
<body class="cloak h-100-vh">
1312
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
1413
<div class="app-bar-item-static no-hover">
15-
<div class="text-leader">Component Name</div>
14+
<div class="text-leader">Linked Block</div>
1615
</div>
17-
<div class="app-bar-item-static no-hover">
16+
<div class="app-bar-item-static no-hover ml-auto">
1817
<input type="checkbox" data-role="theme-switcher"/>
1918
</div>
2019
</nav>
2120

22-
<div data-role="linked-block" id="block1"></div>
23-
<div data-role="linked-block" id="block2"></div>
21+
<main class="h-100 pos-relative pattern-grid-dot">
22+
<div data-role="linked-block, draggable" id="block1">
23+
<div class="north-side"></div>
24+
<div class="east-side">
25+
<div class="link-point"></div>
26+
</div>
27+
<div class="south-side"></div>
28+
<div class="west-side"></div>
29+
</div>
30+
31+
<div data-role="linked-block, draggable" id="block2">
32+
<div class="north-side"></div>
33+
<div class="east-side"></div>
34+
<div class="south-side"></div>
35+
<div class="west-side">
36+
<div class="link-point"></div>
37+
</div>
38+
</div>
39+
</main>
2440

2541
<script src="../lib/metro.js"></script>
2642
<script>
43+
(() => {
44+
setTimeout(() => {
45+
const block1 = $("#block1")
46+
const block2 = $("#block2")
47+
const parent = $("main")
48+
49+
block1.css({
50+
top: parent.height() / 2 - block1.height() / 2,
51+
left: parent.width() / 2 - block1.width() / 2 - 200,
52+
})
53+
54+
block2.css({
55+
top: parent.height() / 2 - block2.height() / 2,
56+
left: parent.width() / 2 - block2.width() / 2 + 200,
57+
})
58+
}, 100)
59+
})()
2760
</script>
2861
</body>
2962
</html>

‎icons/core/fonts/metro-ui-core.svg‎

Lines changed: 96 additions & 72 deletions
Loading

‎icons/core/fonts/metro-ui-core.ttf‎

10.2 KB
Binary file not shown.

‎icons/core/fonts/metro-ui-core.woff‎

10.2 KB
Binary file not shown.

‎icons/core/selection.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎icons/core/style.css‎

Lines changed: 99 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@font-face {
22
font-family: 'metro-ui-core';
33
src:
4-
url('fonts/metro-ui-core.ttf?fmschw') format('truetype'),
5-
url('fonts/metro-ui-core.woff?fmschw') format('woff'),
6-
url('fonts/metro-ui-core.svg?fmschw#metro-ui-core') format('svg');
4+
url('fonts/metro-ui-core.ttf?ges7u7') format('truetype'),
5+
url('fonts/metro-ui-core.woff?ges7u7') format('woff'),
6+
url('fonts/metro-ui-core.svg?ges7u7#metro-ui-core') format('svg');
77
font-weight: normal;
88
font-style: normal;
99
font-display: block;
@@ -24,6 +24,90 @@
2424
-moz-osx-font-smoothing: grayscale;
2525
}
2626

27+
.mif-dice-filled:before {
28+
content: "\ebc1";
29+
}
30+
.mif-dice:before {
31+
content: "\ebeb";
32+
}
33+
.mif-dices-outline:before {
34+
content: "\ebed";
35+
}
36+
.mif-dices:before {
37+
content: "\ebef";
38+
}
39+
.mif-rocket-run:before {
40+
content: "\ebf0";
41+
}
42+
.mif-layer-active:before {
43+
content: "\ebf1";
44+
}
45+
.mif-layers-dots:before {
46+
content: "\ebf2";
47+
}
48+
.mif-layers-outline:before {
49+
content: "\ebf3";
50+
}
51+
.mif-layers-filled:before {
52+
content: "\ebf4";
53+
}
54+
.mif-layer-remove:before {
55+
content: "\ebf5";
56+
}
57+
.mif-layers:before {
58+
content: "\ebf6";
59+
}
60+
.mif-layer-add:before {
61+
content: "\ebf7";
62+
}
63+
.mif-func-chart:before {
64+
content: "\eb1b";
65+
}
66+
.mif-charts:before {
67+
content: "\eb44";
68+
}
69+
.mif-waterfall-chart:before {
70+
content: "\ebdf";
71+
}
72+
.mif-org-chart:before {
73+
content: "\ebe0";
74+
}
75+
.mif-candle-chart:before {
76+
content: "\ebe1";
77+
}
78+
.mif-bar-horizontal-chart:before {
79+
content: "\ebe2";
80+
}
81+
.mif-bar-vertical-chart:before {
82+
content: "\ebe3";
83+
}
84+
.mif-zig-zag-chart:before {
85+
content: "\ebe4";
86+
}
87+
.mif-triangular-chart:before {
88+
content: "\ebe5";
89+
}
90+
.mif-buble-chart:before {
91+
content: "\ebe6";
92+
}
93+
.mif-pie-chart:before {
94+
content: "\ebe7";
95+
}
96+
.mif-donut-chart:before {
97+
content: "\ebe8";
98+
}
99+
.mif-area-chart:before {
100+
content: "\ebe9";
101+
}
102+
.mif-line-chart1:before {
103+
content: "\ebea";
104+
}
105+
.mif-bar-dotted-chart:before {
106+
content: "\ebec";
107+
}
108+
.mif-horizontal-rule:before {
109+
content: "\ebee";
110+
}
27111
.mif-storage-remove:before {
28112
content: "\ebd7";
29113
}
@@ -54,9 +138,6 @@
54138
.mif-ethernet-lock:before {
55139
content: "\e901";
56140
}
57-
.mif-add-layer:before {
58-
content: "\ebc1";
59-
}
60141
.mif-cloud-hosting:before {
61142
content: "\ebc2";
62143
}
@@ -216,6 +297,15 @@
216297
.mif-check-list:before {
217298
content: "\eba1";
218299
}
300+
.mif-favorite-outline:before {
301+
content: "\eba3";
302+
}
303+
.mif-favorite:before {
304+
content: "\eba4";
305+
}
306+
.mif-error-outline:before {
307+
content: "\eba2";
308+
}
219309
.mif-disk3:before {
220310
content: "\eb97";
221311
}
@@ -252,15 +342,6 @@
252342
.mif-coin-crown:before {
253343
content: "\eadc";
254344
}
255-
.mif-favorite-outline:before {
256-
content: "\eba3";
257-
}
258-
.mif-favorite:before {
259-
content: "\eba4";
260-
}
261-
.mif-error-outline:before {
262-
content: "\eba2";
263-
}
264345
.mif-cc:before {
265346
content: "\e906";
266347
}
@@ -1173,9 +1254,6 @@
11731254
.mif-view-in-ar:before {
11741255
content: "\eadb";
11751256
}
1176-
.mif-waterfall-chart:before {
1177-
content: "\eb1b";
1178-
}
11791257
.mif-schedule-send:before {
11801258
content: "\eb92";
11811259
}
@@ -1692,9 +1770,6 @@
16921770
.mif-palette:before {
16931771
content: "\e619";
16941772
}
1695-
.mif-layers2:before {
1696-
content: "\e644";
1697-
}
16981773
.mif-local-airport:before {
16991774
content: "\e645";
17001775
}
@@ -2190,7 +2265,7 @@
21902265
.mif-video-camera:before {
21912266
content: "\e915";
21922267
}
2193-
.mif-dice:before {
2268+
.mif-dices2:before {
21942269
content: "\e91b";
21952270
}
21962271
.mif-wifi-connect:before {
@@ -2613,13 +2688,13 @@
26132688
.mif-adjust:before {
26142689
content: "\eb37";
26152690
}
2616-
.mif-area-graph:before {
2691+
.mif-area-chart2:before {
26172692
content: "\eb38";
26182693
}
26192694
.mif-awareness-ribbon:before {
26202695
content: "\eb39";
26212696
}
2622-
.mif-circular-graph:before {
2697+
.mif-circular-chart:before {
26232698
content: "\eb3a";
26242699
}
26252700
.mif-drive:before {
@@ -2667,9 +2742,6 @@
26672742
.mif-pencil2:before {
26682743
content: "\eb43";
26692744
}
2670-
.mif-pie-chart:before {
2671-
content: "\eb44";
2672-
}
26732745
.mif-pin:before {
26742746
content: "\eb45";
26752747
}

‎lib/icons.css‎

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

‎lib/metro.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66408,9 +66408,72 @@ label:has(input) {
6640866408
}
6640966409

6641066410
/* source/components/linked-block/linked-block.less */
66411+
:root {
66412+
--linked-block-point-size: 7px;
66413+
--linked-block-min-size: 100px;
66414+
--linked-block-border-radius: 4px;
66415+
--linked-block-background: var(--default-background);
66416+
--linked-block-color: var(--default-color);
66417+
--linked-block-border-color: var(--border-color);
66418+
}
66419+
.dark-side {
66420+
--linked-block-background: var(--default-background);
66421+
--linked-block-color: var(--default-color);
66422+
--linked-block-border-color: var(--border-color);
66423+
}
6641166424
.linked-block {
6641266425
position: absolute;
6641366426
display: block;
66427+
width: var(--linked-block-min-size);
66428+
height: var(--linked-block-min-size);
66429+
background-color: var(--linked-block-background);
66430+
color: var(--linked-block-color);
66431+
border: 1px solid var(--linked-block-border-color);
66432+
border-radius: var(--linked-block-border-radius);
66433+
}
66434+
.linked-block .north-side,
66435+
.linked-block .east-side,
66436+
.linked-block .south-side,
66437+
.linked-block .west-side {
66438+
position: absolute;
66439+
display: flex;
66440+
align-items: center;
66441+
justify-content: center;
66442+
overflow: visible;
66443+
gap: 2px;
66444+
}
66445+
.linked-block .north-side,
66446+
.linked-block .south-side {
66447+
width: 100%;
66448+
height: 1px;
66449+
flex-flow: row nowrap;
66450+
}
66451+
.linked-block .east-side,
66452+
.linked-block .west-side {
66453+
width: 1px;
66454+
height: 100%;
66455+
flex-flow: column nowrap;
66456+
}
66457+
.linked-block .north-side {
66458+
top: -1px;
66459+
}
66460+
.linked-block .east-side {
66461+
right: -1px;
66462+
}
66463+
.linked-block .south-side {
66464+
bottom: -1px;
66465+
}
66466+
.linked-block .west-side {
66467+
left: -1px;
66468+
}
66469+
.linked-block .link-point {
66470+
display: block;
66471+
position: relative;
66472+
width: var(--linked-block-point-size);
66473+
aspect-ratio: 1/1;
66474+
border-radius: 50%;
66475+
background-color: var(--linked-block-border-color);
66476+
flex: 0 0 var(--linked-block-point-size);
6641466477
}
6641566478

6641666479
/* source/components/list/list.less */

‎lib/metro.css.map‎

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

‎lib/metro.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30824,6 +30824,7 @@
3082430824
_createStructure: function() {
3082530825
const element2 = this.element;
3082630826
const o2 = this.options;
30827+
element2.addClass("linked-block");
3082730828
},
3082830829
_createEvents: function() {
3082930830
const element2 = this.element;

0 commit comments

Comments
 (0)