commit
5888d4de47
@ -1,65 +1,47 @@ |
|||||||
.token-tile-view-more { |
.token-tile-view-more { |
||||||
line-height: 0.5; |
align-items: center; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
line-height: 1.2; |
||||||
|
padding-top: 10px; |
||||||
text-align: center; |
text-align: center; |
||||||
|
|
||||||
&:hover, |
a { |
||||||
:focus { |
|
||||||
text-decoration: none; |
text-decoration: none; |
||||||
} |
} |
||||||
} |
|
||||||
|
|
||||||
.token-tile-view-more span { |
|
||||||
display: inline-block; |
|
||||||
position: relative; |
|
||||||
} |
|
||||||
|
|
||||||
.token-tile-view-more span:before, |
&:before, |
||||||
.token-tile-view-more span:after { |
&:after { |
||||||
content: ""; |
border-bottom: 1px solid $border-color; |
||||||
position: absolute; |
border-top: 1px solid $border-color; |
||||||
height: 5px; |
content: ""; |
||||||
border-bottom: 1px solid $border-color; |
height: 4px; |
||||||
border-top: 1px solid $border-color; |
flex-grow: 1; |
||||||
top: 0; |
|
||||||
width: 43%; |
|
||||||
} |
|
||||||
|
|
||||||
.token-tile-view-more span:before { |
|
||||||
right: 55%; |
|
||||||
margin-right: 0.9375rem; |
|
||||||
} |
|
||||||
|
|
||||||
.token-tile-view-more span:after { |
@include media-breakpoint-down(md) { |
||||||
left: 55%; |
} |
||||||
margin-left: 0.9375rem; |
|
||||||
} |
|
||||||
|
|
||||||
@include media-breakpoint-down(md) { |
@include media-breakpoint-down(sm) { |
||||||
.token-tile-view-more span:before, |
} |
||||||
.token-tile-view-more span:after { |
|
||||||
width: 40%; |
|
||||||
} |
} |
||||||
|
|
||||||
.token-tile-view-more span:before { |
&:before { |
||||||
right: 58%; |
margin-right: 10px; |
||||||
} |
|
||||||
|
|
||||||
.token-tile-view-more span:after { |
@include media-breakpoint-down(md) { |
||||||
left: 58%; |
} |
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
@include media-breakpoint-down(sm) { |
@include media-breakpoint-down(sm) { |
||||||
.token-tile-view-more span:before, |
} |
||||||
.token-tile-view-more span:after { |
|
||||||
width: 28%; |
|
||||||
} |
} |
||||||
|
|
||||||
.token-tile-view-more span:before { |
&:after { |
||||||
right: 66%; |
margin-left: 10px; |
||||||
} |
|
||||||
|
@include media-breakpoint-down(md) { |
||||||
|
} |
||||||
|
|
||||||
.token-tile-view-more span:after { |
@include media-breakpoint-down(sm) { |
||||||
left: 66%; |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
@ -1,21 +1,26 @@ |
|||||||
import $ from 'jquery' |
import $ from 'jquery' |
||||||
|
|
||||||
$(function () { |
$(function () { |
||||||
const activeTabCard = $('.card-tab.active') |
const tabCards = $('.js-card-tabs') |
||||||
|
const activeTabCard = tabCards.find('.active') |
||||||
|
const isMobileCardTabs = tabCards.children(':hidden').length |
||||||
|
const isOnlyChild = !activeTabCard.siblings().length |
||||||
|
|
||||||
if (!activeTabCard.siblings().length) { |
if (isOnlyChild) { |
||||||
activeTabCard.addClass('noCaret') |
activeTabCard.addClass('noCaret') |
||||||
} |
} |
||||||
|
|
||||||
activeTabCard.on('click', function (e) { |
activeTabCard.on('click', function (e) { |
||||||
e.preventDefault() |
e.preventDefault() |
||||||
|
|
||||||
const siblings = $(this).siblings() |
if (isMobileCardTabs) { |
||||||
|
const siblings = $(this).siblings() |
||||||
|
|
||||||
if (siblings.is(':hidden')) { |
if (siblings.is(':hidden')) { |
||||||
siblings.show() |
siblings.show() |
||||||
} else { |
} else { |
||||||
siblings.hide() |
siblings.hide() |
||||||
|
} |
||||||
} |
} |
||||||
}) |
}) |
||||||
}) |
}) |
||||||
|
Loading…
Reference in new issue