Skip to content

Commit

Permalink
update examples WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@tinchox5
tinchox5 committed Sep 26, 2023
1 parent 8749d74 commit 27106a8
Show file tree
Hide file tree
Showing 5 changed files with 24 additions and 23 deletions.
14 changes: 7 additions & 7 deletions examples/arcgrid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<div class="core items-1">
<div class="item xs " style="transform: translate(-50%, -50%);"></div>
</div>
<div class="ring-2 items-6 arc-90">
<div class="ring arc-90">
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
Expand All @@ -30,15 +30,15 @@
<div class="arc"></div>
</div>

<div class="ring-3 items-6">
<div class="ring">
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
</div>
<div class="ring-4 items-6">
<div class="ring">
<div class="arc btn btn-primary"></div>
<div class="arc "></div>
<div class="arc"></div>
Expand All @@ -56,10 +56,10 @@
<div class="core items-1">
<div class="item xs bg-primary" style="transform: translate(-50%, -50%);"></div>
</div>
<div class="ring-1" style="width: 120px; height: 120px;">
<div class="ring" style="width: 120px; height: 120px;">
<div class="z-progress text-primary" style="--progress: 75"></div>
</div>
<div class="ring-1 items-6">
<div class="ring">
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
Expand All @@ -74,15 +74,15 @@
<div class="core items-1">
<div class="item xs bg-success" style="transform: translate(-50%, -50%);"></div>
</div>
<div class="ring-1 items-6">
<div class="ring">
<div class="arc"></div>
<div class="arc text-primary"></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
</div>
<div class="ring-1 " style="--progress: 55; width: 110px; height: 110px;">
<div class="ring " style="--progress: 55; width: 110px; height: 110px;">
<div class="item xs bg-primary" style="--item-number: 2; --angle: calc(-90 + var(--progress) * 3.6)"></div>
<div class="z-progress text-primary"></div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion examples/form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@
return `<div class="item ${shape} ${size} ${alignment} ${stationary}">${itemNumber}</div>\n`;
}).join('');
return `
<div class="ring-${ringNumber} items-${iNumber} ${arc ? `arc-${arc}` : ``} ${offset ? `offset-${offset}` : ``} ${ccw} ${visible}">
<div class="ring ${arc ? `arc-${arc}` : ``} ${offset ? `offset-${offset}` : ``} ${ccw} ${visible}">
${items}
</div>
`;
Expand Down
10 changes: 5 additions & 5 deletions examples/generic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,23 @@
<div class="core items-1">
<div class="item s" style="transform: translate(-50%, -50%);"></div>
</div>
<div class="ring-3 items-4">
<div class="ring">
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
</div>
<div class="ring-3 items-6">
<div class="ring">
<div class=" item m ">
<div class="ring-3 items-4">
<div class="ring">
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
</div>
<div class="ring-3 items-4">
<div class="ring">
<div class="item s lower">
<div class="ring-3 items-3">
<div class="ring">
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
Expand Down
7 changes: 4 additions & 3 deletions examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,20 +17,21 @@
<h2>Examples</h2>
<div class="z-container">

<ul class="ring-3 items-5">
<ul class="ring">
<li class="arc"></li>
<li class="arc"></li>
<li class="arc"></li>
<li class="arc"></li>
<li class="arc"></li>
</ul>
<ul class="ring-3 items-5">
<li class="item m"><a href="./generic.html">Generic</a></li>
<li class="item m"><a href="./watch.html">Watch</a></li>
<li class="item m"><a href="./spread.html">Spread</a></li>
<li class="item m"><a href="./form.html">Form</a></li>
<li class="item m"><a href="./arcgrid.html">arc</a></li>
</ul>
<ul class="ring">

</ul>
</div>

</body>
Expand Down
14 changes: 7 additions & 7 deletions examples/watch.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,17 @@
<hr class="item line minuto" style="width: 160px; height: 3px; border:1px solid rgb(157, 2, 247); --angle: 0; --item-number: 2;">
<hr class="item line segundo" style="width: 210px; height: 1px; border:1px solid rgb(0, 245, 61); --angle: 0; --item-number: 2;">
</div>
<div class="ring-1 items-3 offset-270 arc-90">
<div class="ring offset-270 arc-90">
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
</div>
<div class="ring-1 items-3 offset-270 arc-90">
<div class="ring offset-270 arc-90">
<div class="item s upper d-h transparent"></div>
<div class="item s upper d-m transparent"></div>
<div class="item s upper d-s transparent"></div>
</div>
<div class="ring-2 items-12 offset-270">
<div class="ring offset-270">
<div class="item xs ">12</div>
<div class="item xs ">1</div>
<div class="item xs ">2</div>
Expand All @@ -52,22 +52,22 @@
<div class="item xs ">10</div>
<div class="item xs ">11</div>
</div>
<div class="ring-3 items-12 offset-270">
<div class="ring offset-270">
<svg class="z-svg">
<circle class="svg-progress hour" style="--stroke: 60"/>
</svg>
</div>
<div class="ring-3">
<div class="ring">
<svg class="z-svg">
<circle class="markers"/>
</svg>
</div>
<div class="ring-2">
<div class="ring">
<svg class="z-svg">
<circle class="svg-progress minute" />
</svg>
</div>
<div class="ring-1">
<div class="ring">
<svg class="z-svg">
<circle class="svg-progress second" />
</svg>
Expand Down

0 comments on commit 27106a8

Please sign in to comment.