Start refactoring top bar
This commit is contained in:
Cadence Ember
parent
4d6f6e2278
commit
8bae0b30ab
|
|
@ -60,7 +60,10 @@ const config = {
|
|||
options: {
|
||||
// eslint-disable-next-line
|
||||
implementation: require('sass'),
|
||||
},
|
||||
sassOptions: {
|
||||
indentedSyntax: true
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,194 +0,0 @@
|
|||
.topNav {
|
||||
background-color: var(--card-bg-color);
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
-webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color);
|
||||
}
|
||||
|
||||
.topNavBarColor {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.menuIcon {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.navIcon {
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
color: var(--primary-text-color);
|
||||
border-radius: 200px 200px 200px 200px;
|
||||
-webkit-border-radius: 200px 200px 200px 200px;
|
||||
-webkit-transition: background 0.2s ease-out;
|
||||
-moz-transition: background 0.2s ease-out;
|
||||
-o-transition: background 0.2s ease-out;
|
||||
transition: background 0.2s ease-out;
|
||||
}
|
||||
|
||||
.topNavBarColor .navIcon {
|
||||
color: var(--text-with-main-color);
|
||||
}
|
||||
|
||||
.navIcon:hover {
|
||||
background-color: var(--side-nav-hover-color);
|
||||
-moz-transition: background 0.2s ease-in;
|
||||
-o-transition: background 0.2s ease-in;
|
||||
transition: background 0.2s ease-in;
|
||||
}
|
||||
|
||||
.topNavBarColor .navIcon:hover {
|
||||
background-color: var(--primary-color-hover);
|
||||
}
|
||||
|
||||
.navIcon:active {
|
||||
background-color: var(--teritary-text-color);
|
||||
-moz-transition: background 0.2s ease-in;
|
||||
-o-transition: background 0.2s ease-in;
|
||||
transition: background 0.2s ease-in;
|
||||
}
|
||||
|
||||
.topNavBarColor .menuIcon:active {
|
||||
background-color: var(--primary-color-active)
|
||||
}
|
||||
|
||||
.navBackIcon {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50px;
|
||||
}
|
||||
|
||||
.navForwardIcon {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 85px;
|
||||
}
|
||||
|
||||
.navSearchIcon {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logoIcon {
|
||||
background-image: var(--logo-icon);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right top;
|
||||
background-size: 25px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 140px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.logoIconBarColor {
|
||||
background-image: var(--logo-icon-bar-color);
|
||||
}
|
||||
|
||||
.logoText {
|
||||
background-image: var(--logo-text);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right top;
|
||||
background-size: 100px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 175px;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.logoTextBarColor {
|
||||
background-image: var(--logo-text-bar-color);
|
||||
}
|
||||
|
||||
.searchContainer {
|
||||
margin: 0 auto;
|
||||
width: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.navFilterIcon {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.searchFilters {
|
||||
margin-left: 270px;
|
||||
margin-right: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
transition-property: margin;
|
||||
transition-duration: 150ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.expand {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.menuIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navBackIcon {
|
||||
left: 45px;
|
||||
}
|
||||
|
||||
.navForwardIcon {
|
||||
left: 80px;
|
||||
}
|
||||
|
||||
.navSearchIcon {
|
||||
display: block;
|
||||
left: 120px;
|
||||
}
|
||||
|
||||
.logoIcon {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.logoText {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.searchContainer {
|
||||
position: fixed;
|
||||
display: none;
|
||||
width: 100%;
|
||||
top: 60px;
|
||||
background-color: var(--side-nav-color);
|
||||
}
|
||||
|
||||
.topNavBarColor .searchContainer {
|
||||
background-color: var(--primary-color-hover);
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.navFilterIcon {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.searchFilters {
|
||||
margin-top: 130px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -35,7 +35,7 @@ export default Vue.extend({
|
|||
const searchContainer = $('.searchContainer').get(0)
|
||||
|
||||
if (width > 680) {
|
||||
searchContainer.style.display = 'block'
|
||||
searchContainer.style.display = ''
|
||||
} else {
|
||||
searchContainer.style.display = 'none'
|
||||
}
|
||||
|
|
@ -68,8 +68,8 @@ export default Vue.extend({
|
|||
toggleSearchContainer: function () {
|
||||
const searchContainer = $('.searchContainer').get(0)
|
||||
|
||||
if (searchContainer.style.display === 'none' || searchContainer.style.display === '') {
|
||||
searchContainer.style.display = 'block'
|
||||
if (searchContainer.style.display === 'none') {
|
||||
searchContainer.style.display = ''
|
||||
} else {
|
||||
searchContainer.style.display = 'none'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,177 @@
|
|||
.topNav
|
||||
position: fixed
|
||||
z-index: 4
|
||||
left: 0
|
||||
right: 0
|
||||
top: 0
|
||||
height: 60px
|
||||
line-height: 60px
|
||||
background-color: var(--card-bg-color)
|
||||
-webkit-box-shadow: 0px 2px 1px 0px var(--primary-shadow-color)
|
||||
display: grid
|
||||
grid-template-columns: 1fr auto 1fr
|
||||
align-items: center
|
||||
|
||||
|
||||
.side
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
|
||||
.topNavBarColor
|
||||
background-color: var(--primary-color)
|
||||
|
||||
|
||||
.navIcon
|
||||
font-size: 20px
|
||||
padding: 10px
|
||||
cursor: pointer
|
||||
color: var(--primary-text-color)
|
||||
border-radius: 50%
|
||||
transition: background 0.2s ease-out
|
||||
|
||||
|
||||
.topNavBarColor .navIcon
|
||||
color: var(--text-with-main-color)
|
||||
|
||||
|
||||
.navIcon:hover
|
||||
background-color: var(--side-nav-hover-color)
|
||||
transition: background 0.2s ease-in
|
||||
|
||||
|
||||
.topNavBarColor .navIcon:hover
|
||||
background-color: var(--primary-color-hover)
|
||||
|
||||
|
||||
.navIcon:active
|
||||
background-color: var(--tertiary-text-color)
|
||||
transition: background 0.2s ease-in
|
||||
|
||||
|
||||
.topNavBarColor .menuIcon:active
|
||||
background-color: var(--primary-color-active)
|
||||
|
||||
|
||||
.navBackIcon
|
||||
top: 10px
|
||||
left: 50px
|
||||
|
||||
|
||||
.navForwardIcon
|
||||
top: 10px
|
||||
left: 85px
|
||||
|
||||
|
||||
.navSearchIcon
|
||||
top: 10px
|
||||
display: none
|
||||
|
||||
.logo
|
||||
display: flex
|
||||
align-items: center
|
||||
padding: 0px 25px 0px 10px
|
||||
|
||||
.logoIcon
|
||||
background-image: var(--logo-icon)
|
||||
background-repeat: no-repeat
|
||||
background-position: right top
|
||||
background-size: 25px
|
||||
width: 25px
|
||||
height: 25px
|
||||
|
||||
|
||||
.logoIconBarColor
|
||||
background-image: var(--logo-icon-bar-color)
|
||||
|
||||
|
||||
.logoText
|
||||
margin-left: 5px
|
||||
position: relative
|
||||
top: -3px
|
||||
background-image: var(--logo-text)
|
||||
background-repeat: no-repeat
|
||||
background-position: right top
|
||||
background-size: 100px
|
||||
width: 100px
|
||||
height: 40px
|
||||
|
||||
|
||||
.logoTextBarColor
|
||||
background-image: var(--logo-text-bar-color)
|
||||
|
||||
.middle
|
||||
|
||||
.searchContainer
|
||||
display: flex
|
||||
align-items: center
|
||||
|
||||
.searchInput
|
||||
width: 400px
|
||||
|
||||
.searchFilters
|
||||
position: absolute
|
||||
margin-left: 270px
|
||||
margin-right: 20px
|
||||
margin-top: 10px
|
||||
margin-bottom: 20px
|
||||
transition-property: margin
|
||||
transition-duration: 150ms
|
||||
transition-timing-function: ease-in-out
|
||||
|
||||
|
||||
.expand
|
||||
margin-left: 100px
|
||||
|
||||
|
||||
@media only screen and (max-width: 680px)
|
||||
.menuIcon
|
||||
display: none
|
||||
|
||||
|
||||
.navBackIcon
|
||||
left: 45px
|
||||
|
||||
|
||||
.navForwardIcon
|
||||
left: 80px
|
||||
|
||||
|
||||
.navSearchIcon
|
||||
display: block
|
||||
left: 120px
|
||||
|
||||
|
||||
.logoIcon
|
||||
left: 10px
|
||||
|
||||
|
||||
.logoText
|
||||
display: none
|
||||
|
||||
|
||||
.searchContainer
|
||||
position: fixed
|
||||
display: none
|
||||
width: 100%
|
||||
top: 60px
|
||||
background-color: var(--side-nav-color)
|
||||
|
||||
|
||||
.topNavBarColor .searchContainer
|
||||
background-color: var(--primary-color-hover)
|
||||
|
||||
|
||||
.searchInput
|
||||
width: 80%
|
||||
margin: 0 auto
|
||||
|
||||
|
||||
.navFilterIcon
|
||||
right: 0px
|
||||
|
||||
|
||||
.searchFilters
|
||||
margin-top: 130px
|
||||
margin-left: 10px
|
||||
margin-right: 10px
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
class="topNav"
|
||||
:class="{ topNavBarColor: barColor }"
|
||||
>
|
||||
<div class="side">
|
||||
<font-awesome-icon
|
||||
class=" menuIcon navIcon"
|
||||
icon="bars"
|
||||
|
|
@ -23,6 +24,7 @@
|
|||
icon="search"
|
||||
@click="toggleSearchContainer"
|
||||
/>
|
||||
<div class="logo">
|
||||
<div
|
||||
class="logoIcon"
|
||||
:class="{ logoIconBarColor: barColor }"
|
||||
|
|
@ -31,6 +33,9 @@
|
|||
class="logoText"
|
||||
:class="{ logoTextBarColor: barColor }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="searchContainer">
|
||||
<ft-input
|
||||
placeholder="Search / Go to URL"
|
||||
|
|
@ -50,7 +55,9 @@
|
|||
:class="{ expand: !isSideNavOpen }"
|
||||
/>
|
||||
</div>
|
||||
<div class="side" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./top-nav.js" />
|
||||
<style scoped src="./top-nav.css" />
|
||||
<style scoped lang="sass" src="./top-nav.sass" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue