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 { @-webkit-keyframes flyInLeft {
from { from {
opacity: 0; opacity: 0;
-webkit-transform: translateX(-2rem); -webkit-transform: translateX(-0.5rem);
transform: translateX(-2rem); transform: translateX(-0.5rem);
} }
to { to {
opacity: 1; opacity: 1;
@ -397,8 +397,8 @@ ul .balance:last-of-type {
@keyframes flyInLeft { @keyframes flyInLeft {
from { from {
opacity: 0; opacity: 0;
-webkit-transform: translateX(-2rem); -webkit-transform: translateX(-0.5rem);
transform: translateX(-2rem); transform: translateX(-0.5rem);
} }
to { to {
opacity: 1; opacity: 1;
@ -410,8 +410,8 @@ ul .balance:last-of-type {
@-webkit-keyframes flyInRight { @-webkit-keyframes flyInRight {
from { from {
opacity: 0; opacity: 0;
-webkit-transform: translateX(2rem); -webkit-transform: translateX(0.5rem);
transform: translateX(2rem); transform: translateX(0.5rem);
} }
to { to {
opacity: 1; opacity: 1;
@ -423,8 +423,8 @@ ul .balance:last-of-type {
@keyframes flyInRight { @keyframes flyInRight {
from { from {
opacity: 0; opacity: 0;
-webkit-transform: translateX(2rem); -webkit-transform: translateX(0.5rem);
transform: translateX(2rem); transform: translateX(0.5rem);
} }
to { to {
opacity: 1; opacity: 1;
@ -441,8 +441,8 @@ ul .balance:last-of-type {
} }
to { to {
opacity: 0; opacity: 0;
-webkit-transform: translateX(-2rem); -webkit-transform: translateX(-0.5rem);
transform: translateX(-2rem); transform: translateX(-0.5rem);
} }
} }
@ -454,8 +454,8 @@ ul .balance:last-of-type {
} }
to { to {
opacity: 0; opacity: 0;
-webkit-transform: translateX(-2rem); -webkit-transform: translateX(-0.5rem);
transform: translateX(-2rem); transform: translateX(-0.5rem);
} }
} }
@ -467,8 +467,8 @@ ul .balance:last-of-type {
} }
to { to {
opacity: 0; opacity: 0;
-webkit-transform: translateX(2rem); -webkit-transform: translateX(0.5rem);
transform: translateX(2rem); transform: translateX(0.5rem);
} }
} }
@ -480,29 +480,29 @@ ul .balance:last-of-type {
} }
to { to {
opacity: 0; opacity: 0;
-webkit-transform: translateX(2rem); -webkit-transform: translateX(0.5rem);
transform: translateX(2rem); transform: translateX(0.5rem);
} }
} }
.fly-in-from-left { .fly-in-from-left {
-webkit-animation: flyInLeft 0.3s forwards; -webkit-animation: flyInLeft 0.2s forwards;
animation: flyInLeft 0.3s forwards; animation: flyInLeft 0.2s forwards;
} }
.fly-in-from-right { .fly-in-from-right {
-webkit-animation: flyInRight 0.3s forwards; -webkit-animation: flyInRight 0.2s forwards;
animation: flyInRight 0.3s forwards; animation: flyInRight 0.2s forwards;
} }
.fly-out-to-left { .fly-out-to-left {
-webkit-animation: flyOutLeft 0.3s forwards; -webkit-animation: flyOutLeft 0.2s forwards;
animation: flyOutLeft 0.3s forwards; animation: flyOutLeft 0.2s forwards;
} }
.fly-out-to-right { .fly-out-to-right {
-webkit-animation: flyOutRight 0.3s forwards; -webkit-animation: flyOutRight 0.2s forwards;
animation: flyOutRight 0.3s forwards; animation: flyOutRight 0.2s forwards;
} }
#highlights { #highlights {
@ -756,15 +756,26 @@ p {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
white-space: nowrap; white-space: nowrap;
border-bottom: transparent; border-bottom: transparent;
/*&.active{
opacity: 1;
border-bottom: 0.1em solid rgba(var(--text), 0.8);
}*/
} }
.tabs .tab:last-of-type { .tabs .tab:last-of-type {
margin-right: 0; margin-right: 0;
} }
.tabs .tab.active { .tabs .line {
opacity: 1; position: absolute;
border-bottom: 0.1em solid rgba(var(--text), 0.8); 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 { .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{ @keyframes flyInLeft{
from{ from{
opacity: 0; opacity: 0;
transform: translateX(-2rem); transform: translateX(-0.5rem);
} }
to{ to{
opacity: 1; opacity: 1;
@ -291,7 +291,7 @@ ul{
@keyframes flyInRight{ @keyframes flyInRight{
from{ from{
opacity: 0; opacity: 0;
transform: translateX(2rem); transform: translateX(0.5rem);
} }
to{ to{
opacity: 1; opacity: 1;
@ -305,7 +305,7 @@ ul{
} }
to{ to{
opacity: 0; opacity: 0;
transform: translateX(-2rem); transform: translateX(-0.5rem);
} }
} }
@keyframes flyOutRight{ @keyframes flyOutRight{
@ -315,20 +315,20 @@ ul{
} }
to{ to{
opacity: 0; opacity: 0;
transform: translateX(2rem); transform: translateX(0.5rem);
} }
} }
.fly-in-from-left{ .fly-in-from-left{
animation: flyInLeft 0.3s forwards; animation: flyInLeft 0.2s forwards;
} }
.fly-in-from-right{ .fly-in-from-right{
animation: flyInRight 0.3s forwards; animation: flyInRight 0.2s forwards;
} }
.fly-out-to-left{ .fly-out-to-left{
animation: flyOutLeft 0.3s forwards; animation: flyOutLeft 0.2s forwards;
} }
.fly-out-to-right{ .fly-out-to-right{
animation: flyOutRight 0.3s forwards; animation: flyOutRight 0.2s forwards;
} }
#highlights{ #highlights{
padding: 1.5rem 0; padding: 1.5rem 0;
@ -514,10 +514,18 @@ p{
&:last-of-type{ &:last-of-type{
margin-right: 0; margin-right: 0;
} }
&.active{ /*&.active{
opacity: 1; opacity: 1;
border-bottom: 0.1em solid rgba(var(--text), 0.8); 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{ .contract-choice{

8
index.html
View File

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