Skip to content

Commit

Permalink
update example. Gap still buggy
Browse files Browse the repository at this point in the history
  • Loading branch information
Martin Muda committed Sep 27, 2023
1 parent 64510a8 commit d4ab4e2
Showing 1 changed file with 108 additions and 43 deletions.
151 changes: 108 additions & 43 deletions examples/arcgrid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,36 @@
body {
font-family: 'Lucida Sans', Verdana, sans-serif;
}
.ring {
border: none
}
.capsule {

margin: auto 0 ;
padding: 10px;
display: grid;
place-items: center right;
color: white;
width: 80%;
height: 40px;
border: 1px solid rgb(190, 15, 15);
/*rotate: calc(var(--rotate) * -1);*/


width: var(--half);
/* paddgin right para qeudar fuera de borde mas un espacio*/
/*padding-right: calc(var(--width) + 10px);*/
/* paddgin right para qeudar fuera de borde mas un espacio*/
padding-right: 0px;

}
.capsule > span {
/*queda mirando para afuera*/
/* rotate: 270deg;*/
/* queda mirando para adentro*/
/*rotate: 90deg;*/

/* queda siempre horizontal. default */
rotate: calc(var(--rotate) * -1);

/* sin rotate quedan perpendiculares al centro.*/
/* rotate: 0deg;*/
}

.arc {


--width:12px;
--width:50px;
background-color: darkslategray;
}
</style>
Expand All @@ -40,38 +53,68 @@
<div class="core items-1">
<div class="item xs " style="transform: translate(-50%, -50%);"></div>
</div>
<div class="ring arc-90">
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="ring arc-90" >
<div class="arc" style="--arc-gap: calc(8px - 4px);"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc">
<div class="capsule">
hola play
<span>😁</span>
</div>
</div>
<div class="arc"></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
</div>

<div class="ring">
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="arc" style="--arc-gap: calc(8px - 2px);"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
hola play
<span>😁</span>
</div></div>
<div class="arc"></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
</div>
<div class="ring">
<div class="arc btn btn-primary"><div class="capsule">
hola play
<div class="arc btn btn-primary" style="--arc-gap: 8px;"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc "></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="arc"></div>
<div class="arc "><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
</div>
</div>
</div>
Expand All @@ -87,12 +130,24 @@
<div class="z-progress text-primary" style="--progress: 75"></div>
</div>
<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 class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
</div>
</div>
</div>
Expand All @@ -102,14 +157,24 @@
<div class="item xs bg-success" style="transform: translate(-50%, -50%);"></div>
</div>
<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 class="capsule">
<span>😁</span>
</div></div>
<div class="arc text-primary"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc"><div class="capsule">
<span>😁</span>
</div></div>
<div class="arc">
<div class="capsule">
hola play
<span>😁</span>
</div>
</div>
</div>
Expand Down

0 comments on commit d4ab4e2

Please sign in to comment.