Files
groovee/src/components/ItemType.module.css
zadit frontend 5b4de33afb add stocking page
2024-08-03 07:29:36 +00:00

68 lines
1.3 KiB
CSS

.item-type {
width: calc(25vw - 20px);
height: calc(39vw - 20px);
margin: 1px 10px -5px;
overflow: hidden;
text-align: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
position: relative; /* Ensure absolute positioning inside works */
}
.item-type-rect {
position: relative;
height: 20vw;
width: 20vw;
object-fit: cover;
border-radius: 15px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.item-type-name {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
margin-bottom: 10px; /* Adjust margin for spacing */
font-size: 14px;
color: #333;
width: calc(25vw - 30px);
text-align: center;
background-color: transparent;
position: relative; /* Needed for positioning the button */
}
.item-type-image {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 15px;
}
.item-type-image-input {
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
.item-type-create {
position: absolute;
top: 80%; /* Position below the input */
left: 50%;
transform: translateX(-50%);
margin-top: 10px; /* Space between input and button */
width: 20vw;
text-align: center; /* Center button text */
}
.border {
border: 1px solid #000000;
}
.noborder {
border: 1px solid #ffffff00;
}