Skip to content

Commit

Permalink
Merge pull request #1 from shivangi1422/new-blocks-added
Browse files Browse the repository at this point in the history
New blocks added
  • Loading branch information
teshukatepalli authored Sep 22, 2023
2 parents 8e1451f + aa6a733 commit 86c135b
Showing 4 changed files with 1,153 additions and 0 deletions.
196 changes: 196 additions & 0 deletions blocks/carousel/carousel-cards.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
/*
Cards Carousel specific styling.
*/
.carousel-wrapper.cards {
width: 1020px;
margin: 0 auto;
}

.block.carousel.cards.fully-visible {
justify-content: center;
}

.block.carousel.cards {
text-align: left;
}

.carousel-wrapper.cards .carousel-nav-button:hover {
color: #adb3b7;
border: 1.5px solid #adb3b7;
background-color: inherit;
}

.carousel-wrapper.cards .carousel-nav-left {
left: -50px;
}

.carousel-wrapper.cards .carousel-nav-right {
right: -50px;
}

.carousel.cards {
padding: 0;
}

.carousel.cards .carousel-item {
display: block;
width: 33.3%;
max-width: 33.3%;
padding: 20px 15px;
margin: 0;
}

.carousel.cards .carousel-item:hover {
z-index: 1;
transform: scale(1.01);
transition: all 0.3s;
}

.carousel.cards .carousel-item .card {
height: 100%;
background: #fff;
margin: 0;
position: relative;
box-shadow: 0 1px 15px rgba(0 0 0 / 40%);
transition: all 0.3s;
display: flex;
align-items: stretch;
align-content: stretch;
width: 100%;
flex-direction: column;
justify-content: space-between;
margin-bottom: 30px;
}

.carousel.cards .carousel-item h3 {
font-size: var(--heading-font-size-l);
margin-bottom: 8px;
margin-top: 0;
color: var(--text-color);
}

.carousel.cards .carousel-item p {
font-size: var(--body-font-size-xs);
margin: 0;
color: var(--text-color);
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

.carousel.cards.gpx-compliance-resources .carousel-item p:first-child {
text-transform: uppercase;
color: #6eb43f;
font-size: 14px;
margin-bottom: 10px;
}

.carousel.cards .carousel-item .button-container {
margin-top: auto;
margin-bottom: 0;
}

.carousel.cards .carousel-item a {
font-size: 18px;
color: #008ca8;
}

.carousel.cards .carousel-item a span {
margin-left: 5px;
vertical-align: text-top;
}

.carousel.cards .carousel-item a span svg {
height: 18px;
width: 18px;
}

.carousel.cards .carousel-item .card > div:last-child {
display: flex;
flex-direction: column;
padding: 10px 20px;
color: #12141f;
height: 100%;
min-height: auto;
}

.carousel.cards.gpx-compliance-resources .carousel-item .card > div:first-child,
.carousel.cards.microplate-related-products .carousel-item .card > div:first-child {
flex-shrink: 0;
}

.carousel.cards.gpx-compliance-resources .carousel-item .card > div:first-child {
height: 200px;
}

.carousel.cards.microplate-related-products .carousel-item .card > div:first-child {
height: 250px;
}

.carousel.cards.gpx-compliance-resources .carousel-item .card > div:first-child picture,
.carousel.cards.microplate-related-products .carousel-item .card > div:first-child picture {
display: block;
height: 100%;
}

.carousel.cards.gpx-compliance-resources .carousel-item .card > div:first-child img,
.carousel.cards.microplate-related-products .carousel-item .card > div:first-child img {
height: 100%;
width: 100%;
object-fit: cover;
}

.carousel.cards.gpx-compliance-resources .carousel-item .card > div:last-child {
height: calc(100% - 200px);
}

.carousel.cards.microplate-related-products .carousel-item .card > div:last-child {
height: calc(100% - 250px);
}

.carousel.cards .carousel-item-columns-container {
flex-direction: column;
}

@media only screen and (max-width: 1199px) {
.carousel-wrapper.cards {
width: 940px;
}
}

@media only screen and (max-width: 991px) {
.carousel-wrapper.cards {
width: 750px;
}

.carousel-wrapper.cards .carousel-item {
width: 50%;
max-width: 50%;
}
}

@media only screen and (max-width: 767px) {
.carousel-wrapper.cards {
width: 100%;
}

.carousel.cards {
width: 100%;
padding: 0 10%;
}

.carousel-wrapper.cards .carousel-nav-button {
display: none;
}

.carousel-wrapper.cards .carousel-item {
width: 100%;
max-width: 100%;
}

.carousel.cards .carousel-item img {
width: 100%;
}
}
Loading

0 comments on commit 86c135b

Please sign in to comment.