separate divs and add css for exceeded
This commit is contained in:
		
							parent
							
								
									c586ffb383
								
							
						
					
					
						commit
						7a49bf08d6
					
				
					 2 changed files with 11 additions and 2 deletions
				
			
		|  | @ -302,6 +302,9 @@ body > header { | ||||||
| #siteprogressbar .soFarText { | #siteprogressbar .soFarText { | ||||||
|   color: white; |   color: white; | ||||||
| } | } | ||||||
|  | #siteprogressbar .exceeded { | ||||||
|  |   color: var(--khaki-green); | ||||||
|  | } | ||||||
| #siteprogressbar .progress { | #siteprogressbar .progress { | ||||||
|   background: linear-gradient(var(--khaki-green), #84a377, var(--khaki-green)); |   background: linear-gradient(var(--khaki-green), #84a377, var(--khaki-green)); | ||||||
|   padding-left: 0.5rem; |   padding-left: 0.5rem; | ||||||
|  | @ -320,6 +323,11 @@ body > header { | ||||||
|   border-top-right-radius: 16px; |   border-top-right-radius: 16px; | ||||||
|   border-bottom-right-radius: 16px; |   border-bottom-right-radius: 16px; | ||||||
| } | } | ||||||
|  | #siteprogressbar .progress.exceeded { | ||||||
|  |   border-top-right-radius: 16px; | ||||||
|  |   border-bottom-right-radius: 16px; | ||||||
|  |   background: linear-gradient(#84a377, var(--washed-green), #84a377); | ||||||
|  | } | ||||||
| #siteprogressbar { | #siteprogressbar { | ||||||
|   background: linear-gradient(var(--washed-green), white, var(--washed-green)); |   background: linear-gradient(var(--washed-green), white, var(--washed-green)); | ||||||
|   box-shadow: 1px 1px 1px rgba(0,0,0,0.2); |   box-shadow: 1px 1px 1px rgba(0,0,0,0.2); | ||||||
|  |  | ||||||
|  | @ -138,8 +138,9 @@ | ||||||
|   {% if this_match_remaining <= 0 %} |   {% if this_match_remaining <= 0 %} | ||||||
|     <div class="progress matched pv1 b flex" style="flex-basis: {{ this_match_so_far }}px"> |     <div class="progress matched pv1 b flex" style="flex-basis: {{ this_match_so_far }}px"> | ||||||
|       <span id="site-fundraiser-match-count" class="soFarText tc w-100">${{ this_match_goal|floatformat:0|intcomma }} matched!</span> |       <span id="site-fundraiser-match-count" class="soFarText tc w-100">${{ this_match_goal|floatformat:0|intcomma }} matched!</span> | ||||||
|     <div class="progress matched pv1 b flex" style="flex-basis: {{ this_match_exceeded }}px"> |     </div> | ||||||
|       <span id="site-fundraiser-match-count" class="soFarText tc w-100">${{this_match_exceeded|floatformat:0|intcomma }} extra given!</span> |     <div class="progress exceeded pv1 b flex" style="flex-basis: {{ this_match_exceeded }}px"> | ||||||
|  |       <span id="site-fundraiser-match-count" class="soFarText tc w-100 exceeded">${{this_match_exceeded|floatformat:0|intcomma }} extra given!</span> | ||||||
|     </div> |     </div> | ||||||
|   {% else %} |   {% else %} | ||||||
|     <div class="progress pv1 b flex items-center" style="flex-basis: {{ this_match_so_far }}px"> |     <div class="progress pv1 b flex items-center" style="flex-basis: {{ this_match_so_far }}px"> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		
		Reference in a new issue