use github's social-count classes for token-cost

This commit is contained in:
Tyler Renelle 2012-09-19 09:48:22 -04:00
parent 5f771ef830
commit 53659d7ac8
2 changed files with 44 additions and 4 deletions

View file

@ -182,3 +182,43 @@ li:hover .task-meta-controls .hover-show
#main
/*overflow:auto;*/
padding-bottom: 250px; /* don't know why this works, sticky footers are weird */
/* ----- Adaptation of GH's social-count for Tokens -----*/
.token-cost
border: 1px solid #D4D4D4;
font-size: 11px;
font-weight: bold;
padding: 6px 7px 5px;
line-height: 20px;
margin-left: 8px;
border-radius: 3px;
color: #333;
background-color: #FAFAFA;
position: relative;
.token-cost::before
content: "";
display: block;
width: 0;
height: 0;
border: 6px solid #D4D4D4;
border-color: transparent #D4D4D4 transparent transparent;
position: absolute;
right: 100%;
margin-right: 0;
top: 50%;
margin-top: -6px;
.token-cost::after
content: "";
display: block;
width: 0;
height: 0;
border: 6px solid #FAFAFA;
border-color: transparent #FAFAFA transparent transparent;
position: absolute;
right: 100%;
margin-right: -1px;
top: 50%;
margin-top: -6px;

View file

@ -83,10 +83,10 @@
<td>
<h3>Game Over</h3>
{#if lessThan(_user.balance,0.50)}
<a data-toggle="modal" data-target="#stripe-modal" class="btn btn-danger btn-large">Buy More Tokens</a> <span class='label'>Not enough tokens</span>
<a data-toggle="modal" data-target="#stripe-modal" class="btn btn-danger btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
{else}
<p>
<a x-bind=click:revive class="btn btn-danger btn-large">Continue</a> <span class='label'>2 Tokens</span>
<a x-bind=click:revive class="btn btn-danger btn-large">Continue</a><a class='token-cost'>2 Tokens</a>
</p>
{/}
</td>
@ -169,9 +169,9 @@
<span class="well pull-right">Tokens: {tokens(_user.balance)}</span>
<p>Highly discouraged because red tasks provide good incentive to improve (<a target="_blank" href="https://github.com/lefnire/habitrpg#all-my-tasks-are-red-im-dying-too-fast">read more</a>). However, this becomes necessary after long bouts of bad habits.</p>
{#if lessThan(_user.balance,1)}
<a data-toggle="modal" data-target="#stripe-modal" class="btn btn-danger btn-large">Buy More Tokens</a> <span class='label'>Not enough tokens</span>
<a data-toggle="modal" data-target="#stripe-modal" class="btn btn-danger btn-large">Buy More Tokens</a><span class='token-cost'>Not enough tokens</span>
{else}
<button data-dismiss="modal" x-bind=click:buyReroll class="btn btn-danger btn-large">Re-Roll</button> <span class='label'>4 Tokens</span>
<button data-dismiss="modal" x-bind=click:buyReroll class="btn btn-danger btn-large">Re-Roll</button><span class='token-cost'>4 Tokens</span>
{/}
</app:myModal>
</div>