svg :hover{
fill: #fff;
transition: 0.2s;
}
When I add hover on svg this effect only works when I hover path of that svg. Thus can be problem when I have some svg with path on borders and empty space in middle. Can I somehow add this effect when I hover that empty space.
The issue is with your selector. The space in svg :hover means that the rule only gets executed when you hover over any descendant element of the svg. Instead, change it to svg:hover path which will work when hovering over any part of the svg, but only apply to the path.
svg:hover path{
fill: #ffff;
transition: 0.2s;
}
<svg width="22" height="20" xmlns="http://www.w3.org/2000/svg">
<path
d="M20.925 3.641H3.863L3.61.816A.896.896 0 0 0 2.717 0H.897a.896.896 0 1 0 0 1.792h1l1.031 11.483c.073.828.52 1.726 1.291 2.336C2.83 17.385 4.099 20 6.359 20c1.875 0 3.197-1.87 2.554-3.642h4.905c-.642 1.77.677 3.642 2.555 3.642a2.72 2.72 0 0 0 2.717-2.717 2.72 2.72 0 0 0-2.717-2.717H6.365c-.681 0-1.274-.41-1.53-1.009l14.321-.842a.896.896 0 0 0 .817-.677l1.821-7.283a.897.897 0 0 0-.87-1.114ZM6.358 18.208a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm10.015 0a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm2.021-7.243-13.8.81-.57-6.341h15.753l-1.383 5.53Z"
fill="#69707D"
fill-rule="nonzero"
/>
</svg>
svg:hover path {
fill: #ffff;
transition: 0.2s;
}
<svg width="22" height="20" xmlns="http://www.w3.org/2000/svg">
<path
d="M20.925 3.641H3.863L3.61.816A.896.896 0 0 0 2.717 0H.897a.896.896 0 1 0 0 1.792h1l1.031 11.483c.073.828.52 1.726 1.291 2.336C2.83 17.385 4.099 20 6.359 20c1.875 0 3.197-1.87 2.554-3.642h4.905c-.642 1.77.677 3.642 2.555 3.642a2.72 2.72 0 0 0 2.717-2.717 2.72 2.72 0 0 0-2.717-2.717H6.365c-.681 0-1.274-.41-1.53-1.009l14.321-.842a.896.896 0 0 0 .817-.677l1.821-7.283a.897.897 0 0 0-.87-1.114ZM6.358 18.208a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm10.015 0a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm2.021-7.243-13.8.81-.57-6.341h15.753l-1.383 5.53Z"
fill="#69707D"
fill-rule="nonzero"
/>
</svg>
Related
I have a very simple container that has two svg's in them for buttons. In local host these are centered perfectly and responsive as expected. When I host my project on gh-pages my content with the two svg's in them shift the to the left for some reason. Any ideas?
Code for buttons:
return (
<Container className="button_container">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
className="bi bi-arrow-left-square-fill previousBtn"
viewBox="0 0 16 16"
onClick={previousPage}
>
<path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1z" />
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
className="bi bi-arrow-right-square-fill nextBtn"
viewBox="0 0 16 16"
onClick={nextPage}
>
<path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1z" />
</svg>
</Container>
);
}
css
.button_container {
display: flex;
justify-content: space-around;
margin: 3em;
}
.previousBtn,
.nextBtn {
color: $white;
border-radius: 5px;
cursor:pointer
}
.previousBtn:hover,
.nextBtn:hover {
opacity: 0.5;
}
I want to render two different icons/divs in the title of ngb-panels of an accordion depending on whether the panel is expanded or collapsed. The panels have some form content inside them.So when the panel is closed it displays one icon and when it is opened it must display the other icon.
HTML and CSS template example
input[type="text"],
select.form-control{
background: transparent;
border: none;
border-bottom: 1px solid #000000;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
}
input[type="number"],
select.form-control{
background: transparent;
border: none;
border-bottom: 1px solid #000000;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
}
input[type="text"]:focus,
select.form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color:rgb(31, 14, 187);
}
input[type="number"]:focus,
select.form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color:darkred;
}
::ng-deep .collapse {
transition: max-height .55s, opacity .35s ease-in-out;
max-height: 0;
opacity: 0;
display: block !important;
&.show {
max-height: 100rem;
opacity: 1;
}
}
::ng-deep .accordion {
.card {
margin-bottom: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, .04) !important;
.card-header {
// padding-top: 0;
color: #000000;
padding: 0;
button {
padding: 1.2rem;
width: 100%;
span {
color: #5f5f5f;
float: left;
font-size: 1.2rem;
}
}
}
.card-body {
padding: 1rem;
}
}
}
<head><!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<ngb-accordion #acc="ngbAccordion" [destroyOnHide]='false' [closeOthers]="true" activeIds="ngb-panel-0">
<ngb-panel id="panel1">
<ng-template ngbPanelTitle>
<span *ngIf=""> <!-- condition when it is closed -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-x-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
style="color: red;border-color: red;"
/></svg
> </span>
<span *ngIf="" ><!-- condition when it is opened -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-check-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"
style="color: green;"
/></svg
> </span>
<span>Primary Details </span>
<span style="margin-left: 85%;"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" style="color: black;background-color: black;"/>
</svg></span>
</ng-template>
<ng-template ngbPanelContent>
some content
</ng-template>
</ngb-panel>
<ngb-panel id="panel2">
<ng-template ngbPanelTitle>
<span *ngIf=" "> <!--condition when it is closed -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-x-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"
style="color: red;border-color: red;"
/></svg
> </span>
<span *ngIf=""> <!-- condition when it is opened -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
fill="currentColor"
class="bi bi-check-circle"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"
style="color: green;"
/></svg
> </span>
<span>Secondary Details </span>
<span style="margin-left: 83.3%;"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" style="color: black;background-color: black;"/>
</svg></span>
</ng-template>
<ng-template ngbPanelContent>
<form #form2="ngForm" style="padding-left:20px;">
some more content
</form>
</ng-template>
</ngb-panel>
</ngb-accordion>
</body>
So, at *ngIf="" the status of whether the panel is closed or opened is checked and corresponding span is rendered. Please help me with the best way to check this status of panel.I have observed there are a couple of questions over this but they are not working.
You have a reference to an accordion in the acc variable thanks to this peace of code: #acc="ngbAccordion". To check if a panel expanded, you can use isExpanded method.
<ngb-accordion #acc="ngbAccordion" [destroyOnHide]='false' [closeOthers]="true" activeIds="ngb-panel-0">
<ngb-panel id="panel1">
<div>isActive: {{acc.isExpanded('panel1')}}</div>
</ngb-panel>
<ngb-panel id="panel2">
<div>isActive: {{acc.isExpanded('panel2')}}</div>
</ngb-panel>
</ngb-accordion>
I have created a progress bar that works perfectly fine in codepen. But, inside my website, it acts out! Specifically, the line going through each step does not display properly.
.timeline {
overflow-x: hidden;
padding: 2.5rem 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
overflow-y: hidden;
/* border: 1px solid red; */
}
.step {
flex: 1 1 14.2%;
position: relative;
}
.past {
color: #d0d0d0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* border: 1px solid red; */
}
.past::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
left: 50%;
top: 2.2rem;
z-index: -1;
}
.current {
color: #d0d0d0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
a {
text-decoration: none;
}
.roadmap-icon {
padding: 1rem;
z-index: 10;
background-color: white;
color: green;
border-radius: 50%;
width: 2rem;
height: 2rem;
border: 1px solid white;
box-shadow: inset 0 0px 3px 0 #3793b7, 0 2px 4px 0 rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.roadmap-icon-selected {
font-size: 1.1rem;
padding: 1.2rem;
}
.future {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.future::before {
content: '';
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
right: 50%;
top: 2.2rem;
z-index: -1;
}
.icon-text {
text-align: center;
}
<div class="timeline">
<div class="step">
<div class="past">
<a href="/project/add">
<div id="project_id" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-building" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M14.763.075A.5.5 0 0 1 15 .5v15a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V14h-1v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .342-.474L6 7.64V4.5a.5.5 0 0 1 .276-.447l8-4a.5.5 0 0 1 .487.022zM6 8.694L1 10.36V15h5V8.694zM7 15h2v-1.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V15h2V1.309l-7 3.5V15z"
></path>
<path
d="M2 11h1v1H2v-1zm2 0h1v1H4v-1zm-2 2h1v1H2v-1zm2 0h1v1H4v-1zm4-4h1v1H8V9zm2 0h1v1h-1V9zm-2 2h1v1H8v-1zm2 0h1v1h-1v-1zm2-2h1v1h-1V9zm0 2h1v1h-1v-1zM8 7h1v1H8V7zm2 0h1v1h-1V7zm2 0h1v1h-1V7zM8 5h1v1H8V5zm2 0h1v1h-1V5zm2 0h1v1h-1V5zm0-2h1v1h-1V3z"
></path>
</svg>
</div>
</a>
Step 1
</div>
</div>
<div class="step">
<div class="past">
<a href="/project/342/property/add/">
<div id="land_id" class="roadmap-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" class="bi bi-binoculars" viewBox="0 0 16 16">
<path
d="M3 2.5A1.5 1.5 0 0 1 4.5 1h1A1.5 1.5 0 0 1 7 2.5V5h2V2.5A1.5 1.5 0 0 1 10.5 1h1A1.5 1.5 0 0 1 13 2.5v2.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 15 7.118V14.5a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 14.5v-3a.5.5 0 0 1 .146-.354l.854-.853V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v.793l.854.853A.5.5 0 0 1 7 11.5v3A1.5 1.5 0 0 1 5.5 16h-3A1.5 1.5 0 0 1 1 14.5V7.118a1.5 1.5 0 0 1 .83-1.342l.894-.447A.5.5 0 0 0 3 4.882V2.5zM4.5 2a.5.5 0 0 0-.5.5V3h2v-.5a.5.5 0 0 0-.5-.5h-1zM6 4H4v.882a1.5 1.5 0 0 1-.83 1.342l-.894.447A.5.5 0 0 0 2 7.118V13h4v-1.293l-.854-.853A.5.5 0 0 1 5 10.5v-1A1.5 1.5 0 0 1 6.5 8h3A1.5 1.5 0 0 1 11 9.5v1a.5.5 0 0 1-.146.354l-.854.853V13h4V7.118a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 12 4.882V4h-2v1.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V4zm4-1h2v-.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V3zm4 11h-4v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14zm-8 0H2v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14z"
/>
</svg>
</div>
</a>
step 2
</div>
</div>
<div class="step">
<div class="past">
<a href="/development/proforma/add">
<div id="proforma_id" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-card-checklist" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"
></path>
<path
fill-rule="evenodd"
d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"
></path>
</svg>
</div>
</a>
Step 3
</div>
</div>
<div class="step">
<div class="current">
<div id="development" type_id="" class="roadmap-icon roadmap-icon-selected">
<svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
<path
fill-rule="evenodd"
d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z"
/>
<path
d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"
/>
</svg>
</div>
Step 4
</div>
</div>
<div class="step">
<div class="future">
<a href="/development/proforma/139/financing/add">
<div id="financing_id" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-cash-stack" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M14 3H1a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1h-1z"></path>
<path
fill-rule="evenodd"
d="M15 5H1v8h14V5zM1 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H1z"
></path>
<path
d="M13 5a2 2 0 0 0 2 2V5h-2zM3 5a2 2 0 0 1-2 2V5h2zm10 8a2 2 0 0 1 2-2v2h-2zM3 13a2 2 0 0 0-2-2v2h2zm7-4a2 2 0 1 1-4 0 2 2 0 0 1 4 0z"
></path>
</svg>
</div>
</a>
Step 5
</div>
</div>
<div class="step">
<div class="future">
<a href="/development/project/step6">
<div id="unit" mix_id="" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-layout-wtf" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M5 1H1v8h4V1zM1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1zm13 2H9v5h5V2zM9 1a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H9zM5 13H3v2h2v-2zm-2-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H3zm12-1H9v2h6v-2zm-6-1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H9z"
></path>
</svg>
</div>
</a>
<a href="/development/proforma/139/unit%20allocation/add" class="icon-text">
Step 6
</a>
</div>
</div>
<div class="step">
<div class="future">
<a href="/development/project/step7">
<div id="rates_id" class="roadmap-icon">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-card-list" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"
></path>
<path
fill-rule="evenodd"
d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"
></path>
<circle cx="3.5" cy="5.5" r=".5"></circle>
<circle cx="3.5" cy="8" r=".5"></circle>
<circle cx="3.5" cy="10.5" r=".5"></circle>
</svg>
</div>
</a>
Step 7
</div>
</div>
</div>
In my website, this is what I get when removing the z-index of the past::after and keeping the z-index = -1 in future::before. Note that when I inspect the element, the top, right, and z-index properties of .future::before are all greyed out with the hint i in front of it saying that "right has no effect on this element since it’s not a positioned element.
Try setting its position property to something other than static." The position of the .future::before is absolute and its immediate parent's position is .step is relative. How is it that the same browser displays the progress bar fine in one context and acts out in another context? Here is the screen-shot of the problem I have:
Thankfully I've found a hexagon on SO but now I've a problem. The hexagon can be filled with any color - currently orange but I need to fill it with a color and a shadow:
<svg viewBox="0 0 180 100" style="width:180px;height:130px">
<defs>
<clipPath id="hexagon_clip">
<path id="hexagon" d="M38,2
L82,2
A12,12 0 0,1 94,10
L112,44
A12,12 0 0,1 112,56
L94,90
A12,12 0 0,1 82,98
L38,98
A12,12 0 0,1 26,90
L8,56
A12,12 0 0,1 8,44
L26,10
A12,12 0 0,1 38,2" />
</clipPath>
</defs>
<use xlink:href="#hexagon" x="0" y="0" stroke="orange" stroke-width="12" fill="transparent" />
</svg>
This is my current example I want to re-build:
So my goal is it to pass a color hex code at the end. Is this possible or not?
With colored shadow I mean the darker color at the right inside of each hexagon. Sorry for being to unclear!
I will consider a different hexagon taken from this answer then as a background coloration I will use two layers, the main color and the gradient to simulate the shadow:
.hex {
width: 200px;
display: inline-block;
color:orange;
position:relative;
filter: url('#goo'); /* to get the rounded edge */
}
.hex::before,
.hex::after { /* the polygon shape */
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
display:flex;
}
.hex::before{
content: "";
background:
linear-gradient(50deg,transparent 10px, rgba(0,0,0,0.2) 0 calc(100% - 45px),transparent calc(100% - 44px))
100% 100%/ 70% 89% no-repeat,
currentColor; /* Use the color defined by "color" */
padding-top: 86.6%; /* 100%*cos(30) */
}
.hex::after {
content: attr(data-text);
font-size:80px;
position:absolute;
top:18px;
left:18px;
right:18px;
bottom:18px;
background:#fff; /* this should match the main background */
align-items:center;
justify-content:center;
}
<div class="hex" data-text="01"></div>
<div class="hex" data-text="02" style="color:pink;filter:none"></div>
<div class="hex" data-text="03" style="color:lightblue"></div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
My approach - create a generic SVG and use CSS to change the colors:
Codepen:
https://codepen.io/seanstopnik/pen/6d30d9a0dc54456f9be26d41e9747785
body {
font-family: sans-serif; /* for demo only */
}
.hex {
position: relative;
width: 200px; /* for demo only - see Codepen */
}
.hex__heading {
position: absolute;
top: 50%;
left: 50%;
font-size: 66.6666666667px; /* for demo only - see Codepen */
font-weight: 700;
transform: translate(-50%, -50%);
}
.hex__center {
fill: #fff;
}
.hex--primary .hex__heading {
color: #97db54;
}
.hex--primary .hex__stroke {
fill: #97db54;
}
.hex--primary .hex__shadow {
fill: #6cc245;
}
.hex--secondary .hex__heading {
color: #5fc69e;
}
.hex--secondary .hex__stroke {
fill: #5fc69e;
}
.hex--secondary .hex__shadow {
fill: #4c9f67;
}
.hex--tertiary .hex__heading {
color: #4da2bf;
}
.hex--tertiary .hex__stroke {
fill: #4da2bf;
}
.hex--tertiary .hex__shadow {
fill: #2b648a;
}
<div class="hex hex--primary">
<span class="hex__heading">01</span>
<svg class="hexagon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 174.284">
<path class="hex__stroke" d="M147.988 0H52.012a4.024 4.024 0 00-3.485 2.012L.539 85.129a4.025 4.025 0 000 4.025l47.988 83.117a4.025 4.025 0 003.485 2.013h95.976a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 000-4.025L151.473 2.012A4.024 4.024 0 00147.988 0zm-8.134 160.2H60.146a4.026 4.026 0 01-3.486-2.012L16.806 89.154a4.025 4.025 0 010-4.025L56.66 16.1a4.024 4.024 0 013.486-2.013h79.708a4.024 4.024 0 013.486 2.013l39.854 69.029a4.025 4.025 0 010 4.025l-39.854 69.03a4.026 4.026 0 01-3.486 2.016z"/>
<path class="hex__shadow" d="M199.461 85.129l-15.687-27.17L143.268 16.2l-.012.021L183.2 85.14a4 4 0 010 4.006l-39.849 69.02a4 4 0 01-3.516 2l-82.1-1.079 17.944 15.2h72.306a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 00.003-4.028z"/>
<path class="hex__center" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
</svg>
</div>
<div class="hex hex--secondary">
<span class="hex__heading">02</span>
<svg class="hexagon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 174.284">
<path class="hex__stroke" d="M147.988 0H52.012a4.024 4.024 0 00-3.485 2.012L.539 85.129a4.025 4.025 0 000 4.025l47.988 83.117a4.025 4.025 0 003.485 2.013h95.976a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 000-4.025L151.473 2.012A4.024 4.024 0 00147.988 0zm-8.134 160.2H60.146a4.026 4.026 0 01-3.486-2.012L16.806 89.154a4.025 4.025 0 010-4.025L56.66 16.1a4.024 4.024 0 013.486-2.013h79.708a4.024 4.024 0 013.486 2.013l39.854 69.029a4.025 4.025 0 010 4.025l-39.854 69.03a4.026 4.026 0 01-3.486 2.016z"/>
<path class="hex__shadow" d="M199.461 85.129l-15.687-27.17L143.268 16.2l-.012.021L183.2 85.14a4 4 0 010 4.006l-39.849 69.02a4 4 0 01-3.516 2l-82.1-1.079 17.944 15.2h72.306a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 00.003-4.028z"/>
<path class="hex__center" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
</svg>
</div>
<div class="hex hex--tertiary">
<span class="hex__heading">03</span>
<svg class="hexagon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 174.284">
<path class="hex__stroke" d="M147.988 0H52.012a4.024 4.024 0 00-3.485 2.012L.539 85.129a4.025 4.025 0 000 4.025l47.988 83.117a4.025 4.025 0 003.485 2.013h95.976a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 000-4.025L151.473 2.012A4.024 4.024 0 00147.988 0zm-8.134 160.2H60.146a4.026 4.026 0 01-3.486-2.012L16.806 89.154a4.025 4.025 0 010-4.025L56.66 16.1a4.024 4.024 0 013.486-2.013h79.708a4.024 4.024 0 013.486 2.013l39.854 69.029a4.025 4.025 0 010 4.025l-39.854 69.03a4.026 4.026 0 01-3.486 2.016z"/>
<path class="hex__shadow" d="M199.461 85.129l-15.687-27.17L143.268 16.2l-.012.021L183.2 85.14a4 4 0 010 4.006l-39.849 69.02a4 4 0 01-3.516 2l-82.1-1.079 17.944 15.2h72.306a4.025 4.025 0 003.485-2.013l47.988-83.117a4.025 4.025 0 00.003-4.028z"/>
<path class="hex__center" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
</svg>
</div>
I'd recommend using linearGradient: https://jsfiddle.net/um4yhrxj/
I won't do all the work for you though, haha!
I started to get into Bootstrap 4.5 and SVG for icons. I'm having a tough time understanding how it works atm. I want to place the SVG inside a shape (rounded-circle) for now. But would like that shape to be side by side another div. I can't move the div to place them on the same line. Following is a code snippet.
.svg-icon {
display: block;
margin: 0 auto;
position: absolute;
top: calc(50% - 14px);
left: calc(50% - 14px);
}
.poll-icon-container {
height: 50px;
width: 50px;
position: relative;
border-radius: 50%;
background-color: pink;
}
<div class="rounded-circle poll-icon-container text-success">
<svg
width="2em"
height="2em"
viewBox="0 0 18 18"
class="bi bi-box-arrow-in-up-right svg-icon"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
/>
<path
fill-rule="evenodd"
d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
/>
<path
fill-rule="evenodd"
d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
/>
</svg>
</div>
<div>
should be on the right side of the icon
</div>
As long as you are using Bootstrap, lets cover those 2 divs in one parent div and make them display flax in bootstrap way
d-flex - BS class to make block to display: flex;
justify-content-start - BS class to make justify-content: flex-start;
align-items-center - BS class to make align-items: center;
ml-3 - BS sizing class, margin-left: 1rem;
.svg-icon {
display: block;
margin: 0 auto;
position: absolute;
top: calc(50% - 14px);
left: calc(50% - 14px);
}
.poll-icon-container {
height: 50px;
width: 50px;
position: relative;
border-radius: 50%;
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="d-flex justify-content-start align-items-center">
<div class="rounded-circle poll-icon-container text-success">
<svg width="2em" height="2em" viewBox="0 0 18 18" class="bi bi-box-arrow-in-up-right svg-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
/>
<path
fill-rule="evenodd"
d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
/>
<path
fill-rule="evenodd"
d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
/>
</svg>
</div>
<div class="ml-3">
should be on the right side of the icon
</div>
</div>
Add inline css with position: absolute; check below snippet.
.svg-icon {
display: block;
margin: 0 auto;
position: absolute;
top: calc(50% - 14px);
left: calc(50% - 14px);
}
.poll-icon-container {
height: 50px;
width: 50px;
position: relative;
border-radius: 50%;
background-color: pink;
}
<div class="rounded-circle poll-icon-container text-success" style="display:inline-block;">
<svg
width="2em"
height="2em"
viewBox="0 0 18 18"
class="bi bi-box-arrow-in-up-right svg-icon"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M14.5 3A1.5 1.5 0 0 0 13 1.5H3A1.5 1.5 0 0 0 1.5 3v5a.5.5 0 0 0 1 0V3a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v10a.5.5 0 0 1-.5.5H9a.5.5 0 0 0 0 1h4a1.5 1.5 0 0 0 1.5-1.5V3z"
/>
<path
fill-rule="evenodd"
d="M4.5 6a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V6.5H5a.5.5 0 0 1-.5-.5z"
/>
<path
fill-rule="evenodd"
d="M10.354 5.646a.5.5 0 0 1 0 .708l-8 8a.5.5 0 0 1-.708-.708l8-8a.5.5 0 0 1 .708 0z"
/>
</svg>
</div>
<div style="display: inline-block; margin-left:10px;line-height: 50px; position: absolute;">
should be on the right side of the icon
</div>