RanchiMall/floscout
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.0.8

Browse Source
This commit is contained in:
sairaj mote 2020-05-17 19:21:45 +05:30
parent 7350c6834e
commit 72bc223ba0
4 changed files with 62 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
css/main.css
View File

@ -384,8 +384,8 @@ ul .balance:last-of-type {
@-webkit-keyframes flyInLeft {
from {
opacity: 0;
-webkit-transform: translateX(-2rem);
transform: translateX(-2rem);
-webkit-transform: translateX(-0.5rem);
transform: translateX(-0.5rem);
}
to {
opacity: 1;
@ -397,8 +397,8 @@ ul .balance:last-of-type {
@keyframes flyInLeft {
from {
opacity: 0;
-webkit-transform: translateX(-2rem);
transform: translateX(-2rem);
-webkit-transform: translateX(-0.5rem);
transform: translateX(-0.5rem);
}
to {
opacity: 1;
@ -410,8 +410,8 @@ ul .balance:last-of-type {
@-webkit-keyframes flyInRight {
from {
opacity: 0;
-webkit-transform: translateX(2rem);
transform: translateX(2rem);
-webkit-transform: translateX(0.5rem);
transform: translateX(0.5rem);
}
to {
opacity: 1;
@ -423,8 +423,8 @@ ul .balance:last-of-type {
@keyframes flyInRight {
from {
opacity: 0;
-webkit-transform: translateX(2rem);
transform: translateX(2rem);
-webkit-transform: translateX(0.5rem);
transform: translateX(0.5rem);
}
to {
opacity: 1;
@ -441,8 +441,8 @@ ul .balance:last-of-type {
}
to {
opacity: 0;
-webkit-transform: translateX(-2rem);
transform: translateX(-2rem);
-webkit-transform: translateX(-0.5rem);
transform: translateX(-0.5rem);
}
}
@ -454,8 +454,8 @@ ul .balance:last-of-type {
}
to {
opacity: 0;
-webkit-transform: translateX(-2rem);
transform: translateX(-2rem);
-webkit-transform: translateX(-0.5rem);
transform: translateX(-0.5rem);
}
}
@ -467,8 +467,8 @@ ul .balance:last-of-type {
}
to {
opacity: 0;
-webkit-transform: translateX(2rem);
transform: translateX(2rem);
-webkit-transform: translateX(0.5rem);
transform: translateX(0.5rem);
}
}
@ -480,29 +480,29 @@ ul .balance:last-of-type {
}
to {
opacity: 0;
-webkit-transform: translateX(2rem);
transform: translateX(2rem);
-webkit-transform: translateX(0.5rem);
transform: translateX(0.5rem);
}
}
.fly-in-from-left {
-webkit-animation: flyInLeft 0.3s forwards;
animation: flyInLeft 0.3s forwards;
-webkit-animation: flyInLeft 0.2s forwards;
animation: flyInLeft 0.2s forwards;
}
.fly-in-from-right {
-webkit-animation: flyInRight 0.3s forwards;
animation: flyInRight 0.3s forwards;
-webkit-animation: flyInRight 0.2s forwards;
animation: flyInRight 0.2s forwards;
}
.fly-out-to-left {
-webkit-animation: flyOutLeft 0.3s forwards;
animation: flyOutLeft 0.3s forwards;
-webkit-animation: flyOutLeft 0.2s forwards;
animation: flyOutLeft 0.2s forwards;
}
.fly-out-to-right {
-webkit-animation: flyOutRight 0.3s forwards;
animation: flyOutRight 0.3s forwards;
-webkit-animation: flyOutRight 0.2s forwards;
animation: flyOutRight 0.2s forwards;
}
#highlights {
@ -756,15 +756,26 @@ p {
-webkit-tap-highlight-color: transparent;
white-space: nowrap;
border-bottom: transparent;
/*&.active{
opacity: 1;
border-bottom: 0.1em solid rgba(var(--text), 0.8);
}*/
}
.tabs .tab:last-of-type {
margin-right: 0;
}
.tabs .tab.active {
opacity: 1;
border-bottom: 0.1em solid rgba(var(--text), 0.8);
.tabs .line {
position: absolute;
height: 0.1em;
background: rgba(var(--text), 1);
width: 1px;
bottom: 0;
-webkit-transition: width 0.4s, -webkit-transform 0.4s;
transition: width 0.4s, -webkit-transform 0.4s;
transition: transform 0.4s, width 0.4s;
transition: transform 0.4s, width 0.4s, -webkit-transform 0.4s;
}
.contract-choice {

2
css/main.css.map
View File

File diff suppressed because one or more lines are too long

28
css/main.scss
View File

@ -281,7 +281,7 @@ ul{
@keyframes flyInLeft{
from{
opacity: 0;
transform: translateX(-2rem);
transform: translateX(-0.5rem);
}
to{
opacity: 1;
@ -291,7 +291,7 @@ ul{
@keyframes flyInRight{
from{
opacity: 0;
transform: translateX(2rem);
transform: translateX(0.5rem);
}
to{
opacity: 1;
@ -305,7 +305,7 @@ ul{
}
to{
opacity: 0;
transform: translateX(-2rem);
transform: translateX(-0.5rem);
}
}
@keyframes flyOutRight{
@ -315,20 +315,20 @@ ul{
}
to{
opacity: 0;
transform: translateX(2rem);
transform: translateX(0.5rem);
}
}
.fly-in-from-left{
animation: flyInLeft 0.3s forwards;
animation: flyInLeft 0.2s forwards;
}
.fly-in-from-right{
animation: flyInRight 0.3s forwards;
animation: flyInRight 0.2s forwards;
}
.fly-out-to-left{
animation: flyOutLeft 0.3s forwards;
animation: flyOutLeft 0.2s forwards;
}
.fly-out-to-right{
animation: flyOutRight 0.3s forwards;
animation: flyOutRight 0.2s forwards;
}
#highlights{
padding: 1.5rem 0;
@ -514,10 +514,18 @@ p{
&:last-of-type{
margin-right: 0;
}
&.active{
/*&.active{
opacity: 1;
border-bottom: 0.1em solid rgba(var(--text), 0.8);
}
}*/
}
.line{
position: absolute;
height: 0.1em;
background: rgba(var(--text), 1);
width: 1px;
bottom: 0;
transition: transform 0.4s, width 0.4s;
}
}
.contract-choice{

8
index.html
View File

@ -652,7 +652,8 @@
targetBody = document.getElementById(targetTab),
targetGroup = targetBody.dataset.tabGroup,
tabGroupMembers = document.querySelectorAll(`[data-tab-group = '${targetGroup}']`),
allTabs = tab.parentNode.querySelectorAll('.tab')
allTabs = tab.parentNode.querySelectorAll('.tab'),
line = tab.parentNode.querySelector('.line')
if(!currentBody.isEqualNode(targetBody)){
if(activeTabRank < currentTabRank){
targetBody.classList.add('fly-in-from-right')
@ -668,14 +669,15 @@
})
targetBody.classList.remove('hide-completely')
currentBody.classList.remove('fly-out-to-right', 'fly-out-to-left')
},300)
},200)
setTimeout(() => {
targetBody.classList.remove('fly-in-from-right', 'fly-in-from-left')
},600)
},400)
allTabs.forEach(thisTab => {
thisTab.classList.remove('active')
})
tab.classList.add('active')
line.setAttribute('style', `transform: translateX(${tab.offsetLeft}px); width: ${tab.getBoundingClientRect().width}px`)
}
}