mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-09-30 00:41:09 +00:00
New nav menu styling
This commit is contained in:
parent
2993a97e7f
commit
e1d565e939
@ -1,7 +1,9 @@
|
|||||||
@mixin iconNav {
|
@mixin iconNav($url, $color) {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background-color: var(--text-secondary);
|
background-color: $color;
|
||||||
|
-webkit-mask: $url no-repeat center;
|
||||||
|
mask: $url no-repeat center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navLink {
|
.navLink {
|
||||||
@ -13,14 +15,29 @@
|
|||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
width: 158px;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
>div {
|
||||||
|
background-color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
margin-left: 16px;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 20px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
background: none;
|
||||||
|
font-size: 18px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
@ -28,137 +45,71 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
|
||||||
display: inline;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 20px;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.homeIcon {
|
|
||||||
@include iconNav;
|
|
||||||
-webkit-mask: url(../../assets/icons/nav/home.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/home.svg) no-repeat center;
|
|
||||||
}
|
|
||||||
.readsIcon {
|
|
||||||
@include iconNav;
|
|
||||||
-webkit-mask: url(../../assets/icons/nav/long.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/long.svg) no-repeat center;
|
|
||||||
}
|
|
||||||
.exploreIcon {
|
|
||||||
@include iconNav;
|
|
||||||
-webkit-mask: url(../../assets/icons/nav/search.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/search.svg) no-repeat center;
|
|
||||||
}
|
|
||||||
.messagesIcon {
|
|
||||||
@include iconNav;
|
|
||||||
-webkit-mask: url(../../assets/icons/nav/messages.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/messages.svg) no-repeat center;
|
|
||||||
}
|
|
||||||
.notificationsIcon {
|
|
||||||
@include iconNav;
|
|
||||||
-webkit-mask: url(../../assets/icons/nav/notifications.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/notifications.svg) no-repeat center;
|
|
||||||
}
|
|
||||||
.downloadIcon {
|
|
||||||
@include iconNav;
|
|
||||||
-webkit-mask: url(../../assets/icons/nav/downloads.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/downloads.svg) no-repeat center;
|
|
||||||
}
|
|
||||||
.settingsIcon {
|
|
||||||
@include iconNav;
|
|
||||||
-webkit-mask: url(../../assets/icons/nav/settings.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/settings.svg) no-repeat center;
|
|
||||||
}
|
|
||||||
.helpIcon {
|
|
||||||
@include iconNav;
|
|
||||||
-webkit-mask: url(../../assets/icons/nav/help.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/help.svg) no-repeat center;
|
|
||||||
}
|
|
||||||
.bookmarkIcon {
|
|
||||||
@include iconNav;
|
|
||||||
-webkit-mask: url(../../assets/icons/nav/bookmarks.svg) no-repeat 0 / auto 100%;
|
|
||||||
mask: url(../../assets/icons/nav/bookmarks.svg) no-repeat center 0 / auto 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover, a.active {
|
|
||||||
.homeIcon {
|
.homeIcon {
|
||||||
background-color: var(--text-primary);
|
@include iconNav(url(../../assets/icons/nav/home.svg), var(--text-secondary));
|
||||||
-webkit-mask: url(../../assets/icons/nav/home_selected.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/home_selected.svg) no-repeat center;
|
|
||||||
}
|
}
|
||||||
.readsIcon {
|
.readsIcon {
|
||||||
background-color: var(--text-primary);
|
@include iconNav(url(../../assets/icons/nav/long.svg), var(--text-secondary));
|
||||||
-webkit-mask: url(../../assets/icons/nav/long_selected.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/long_selected.svg) no-repeat center;
|
|
||||||
}
|
}
|
||||||
.exploreIcon {
|
.exploreIcon {
|
||||||
background-color: var(--text-primary);
|
@include iconNav(url(../../assets/icons/nav/search.svg), var(--text-secondary));
|
||||||
-webkit-mask: url(../../assets/icons/nav/search_selected.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/search_selected.svg) no-repeat center;
|
|
||||||
}
|
}
|
||||||
.messagesIcon {
|
.messagesIcon {
|
||||||
background-color: var(--text-primary);
|
@include iconNav(url(../../assets/icons/nav/messages.svg), var(--text-secondary));
|
||||||
-webkit-mask: url(../../assets/icons/nav/messages_selected.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/messages_selected.svg) no-repeat center;
|
|
||||||
}
|
}
|
||||||
.notificationsIcon {
|
.notificationsIcon {
|
||||||
background-color: var(--text-primary);
|
@include iconNav(url(../../assets/icons/nav/notifications.svg), var(--text-secondary));
|
||||||
-webkit-mask: url(../../assets/icons/nav/notifications_selected.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/notifications_selected.svg) no-repeat center;
|
|
||||||
}
|
}
|
||||||
.downloadIcon {
|
.downloadIcon {
|
||||||
background-color: var(--text-primary);
|
@include iconNav(url(../../assets/icons/nav/downloads.svg), var(--text-secondary));
|
||||||
-webkit-mask: url(../../assets/icons/nav/downloads_selected.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/downloads_selected.svg) no-repeat center;
|
|
||||||
}
|
}
|
||||||
.settingsIcon {
|
.settingsIcon {
|
||||||
background-color: var(--text-primary);
|
@include iconNav(url(../../assets/icons/nav/settings.svg), var(--text-secondary));
|
||||||
-webkit-mask: url(../../assets/icons/nav/settings_selected.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/settings_selected.svg) no-repeat center;
|
|
||||||
}
|
|
||||||
.helpIcon {
|
|
||||||
background-color: var(--text-primary);
|
|
||||||
-webkit-mask: url(../../assets/icons/nav/help_selected.svg) no-repeat center;
|
|
||||||
mask: url(../../assets/icons/nav/help_selected.svg) no-repeat center;
|
|
||||||
}
|
}
|
||||||
.bookmarkIcon {
|
.bookmarkIcon {
|
||||||
background-color: var(--text-primary);
|
@include iconNav(url(../../assets/icons/nav/bookmarks.svg), var(--text-secondary));
|
||||||
-webkit-mask: url(../../assets/icons/nav/bookmarks_selected.svg) no-repeat 0 / auto 100%;
|
|
||||||
mask: url(../../assets/icons/nav/bookmarks_selected.svg) no-repeat center 0 / auto 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: flex-end;
|
|
||||||
background: none;
|
|
||||||
|
|
||||||
>div {
|
|
||||||
background-color: var(--text-primary);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
|
||||||
color: var(--text-primary);
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.inactive {
|
&:hover, a.active {
|
||||||
display: flex;
|
.label {
|
||||||
justify-content: flex-start;
|
color: var(--text-primary);
|
||||||
align-items: flex-end;
|
background: none;
|
||||||
|
// font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
>div {
|
.homeIcon {
|
||||||
background-color: var(--text-secondary);
|
@include iconNav(url(../../assets/icons/nav/home_selected.svg), var(--text-primary));
|
||||||
|
}
|
||||||
|
.readsIcon {
|
||||||
|
@include iconNav(url(../../assets/icons/nav/long_selected.svg), var(--text-primary));
|
||||||
|
}
|
||||||
|
.exploreIcon {
|
||||||
|
@include iconNav(url(../../assets/icons/nav/search_selected.svg), var(--text-primary));
|
||||||
|
}
|
||||||
|
.messagesIcon {
|
||||||
|
@include iconNav(url(../../assets/icons/nav/messages_selected.svg), var(--text-primary));
|
||||||
|
}
|
||||||
|
.notificationsIcon {
|
||||||
|
@include iconNav(url(../../assets/icons/nav/notifications_selected.svg), var(--text-primary));
|
||||||
|
}
|
||||||
|
.downloadIcon {
|
||||||
|
@include iconNav(url(../../assets/icons/nav/downloads_selected.svg), var(--text-primary));
|
||||||
|
}
|
||||||
|
.settingsIcon {
|
||||||
|
@include iconNav(url(../../assets/icons/nav/settings_selected.svg), var(--text-primary));
|
||||||
|
}
|
||||||
|
.bookmarkIcon {
|
||||||
|
@include iconNav(url(../../assets/icons/nav/bookmarks_selected.svg), var(--text-primary));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
a.active {
|
||||||
color: var(--text-secondary);
|
.label {
|
||||||
background: none;
|
color: var(--text-primary);
|
||||||
|
background: none;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -68,12 +68,6 @@ const NavMenu: Component< { id?: string } > = (props) => {
|
|||||||
hiddenOnSmallScreens: true,
|
hiddenOnSmallScreens: true,
|
||||||
bubble: () => account?.sec ? 1 : 0,
|
bubble: () => account?.sec ? 1 : 0,
|
||||||
},
|
},
|
||||||
{
|
|
||||||
to: '/help',
|
|
||||||
label: intl.formatMessage(t.help),
|
|
||||||
icon: 'helpIcon',
|
|
||||||
hiddenOnSmallScreens: true,
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const isBigScreen = () => (media?.windowSize.w || 0) > 1300;
|
const isBigScreen = () => (media?.windowSize.w || 0) > 1300;
|
||||||
|
Loading…
Reference in New Issue
Block a user