Neshweb-Sites/main-site
Neshweb-Sites/main-site
1
0
Fork 0
Code Issues2 Pull requests Releases11 Packages1 Activity Actions

removed 'invertButton' from themes

Browse source
This commit is contained in:
Neshura 2023-03-16 22:19:17 +01:00
parent 6c1d383c69
commit 691a0ed881
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
6 changed files with 27 additions and 98 deletions
components/styles/navbar
desktop.tsxmobile.tsx

21
components/styles/navbar/desktop.tsx
View file

@ -24,15 +24,12 @@ export const NavBar = styled.nav`
`
export const NavLink = styled(Link) <ActivePropType>`
color: ${props => props.active ?
({ theme }) => theme.invertButtons ?
theme.colors.text ? theme.colors.text : theme.colors.secondary : theme.colors.secondary :
({ theme }) => theme.colors.primary};
color: ${props => ({ theme }) => props.active ?
theme.colors.text ?
theme.colors.text : theme.colors.secondary :
theme.colors.primary};
background-color: ${props => props.active ?
({ theme }) => theme.invertButtons ?
theme.colors.secondary : theme.colors.background :
({ theme }) => theme.colors.background};
background-color: ${props => ({ theme }) => theme.colors.background};
padding: 2px 6px;
border: 2px solid;
@ -43,12 +40,6 @@ export const NavLink = styled(Link) <ActivePropType>`
transition: all 0.1s ease;
&:hover {
color: ${({ theme }) => theme.invertButtons ?
theme.colors.text ? theme.colors.text : theme.colors.primary :
theme.colors.secondary};
background-color: ${({ theme }) => theme.invertButtons ?
theme.colors.secondary :
theme.colors.background};
color: ${({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary};
}
`

74
components/styles/navbar/mobile.tsx
View file

@ -87,12 +87,7 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
color: ${props => ({ theme }) => {
let ret: string;
if (props.active) {
if (theme.invertButtons) {
ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
}
else {
ret = theme.colors.secondary;
}
ret = theme.colors.secondary;
}
else {
ret = theme.colors.primary;
@ -102,12 +97,7 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
background-color: ${props => ({ theme }) => {
let ret: string;
if (props.active) {
if (theme.invertButtons) {
ret = theme.colors.secondary;
}
else {
ret = theme.colors.background;
}
ret = theme.colors.secondary;
}
else {
ret = theme.colors.background;
@ -120,12 +110,7 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
border-color: ${props => ({ theme }) => {
let ret: string;
if (props.active) {
if (theme.invertButtons) {
ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
}
else {
ret = theme.colors.secondary;
}
ret = theme.colors.secondary;
}
else {
ret = theme.colors.primary;
@ -135,36 +120,15 @@ export const NavSideMenuButton = styled.button <ActivePropType>`
&:hover {
color: ${({ theme }) => {
let ret: string;
if (theme.invertButtons) {
ret = theme.colors.text ? theme.colors.text : theme.colors.primary;
}
else {
ret = theme.colors.secondary;
}
return ret;
return theme.colors.secondary
}};
background-color: ${({ theme }) => {
let ret: string;
if (theme.invertButtons) {
ret = theme.colors.secondary;
}
else {
ret = theme.colors.background;
}
return ret;
return theme.colors.background
}};
border-color: ${({ theme }) => {
let ret: string;
if (theme.invertButtons) {
ret = theme.colors.text ? theme.colors.text : theme.colors.secondary;
}
else {
ret = theme.colors.secondary;
}
return ret;
border-color: ${({ theme }) => {
return theme.colors.secondary;
}};
}
`
@ -220,29 +184,15 @@ export const NavIndicator = styled(Link) <ActivePropType>`
aspect-ratio: 1;
width: 10px;
border: 1px solid;
border-color: ${ props => ({ theme }) => props.active ?
theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
theme.colors.primary
};
border-color: ${ props => ({ theme }) => props.active ? theme.colors.primary : theme.colors.primary};
background-color: ${props => ({ theme }) => props.active ?
theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
theme.colors.background
};
background-color: ${props => ({ theme }) => props.active ? theme.colors.secondary : theme.colors.background};
&:hover {
border-color: ${ props => ({ theme }) =>
theme.invertButtons ? theme.colors.secondary : theme.colors.primary
};
border-color: ${({ theme }) => theme.colors.primary};
color: ${({ theme }) => theme.invertButtons ?
theme.invertButtons ? theme.colors.secondary : theme.colors.primary :
theme.colors.primary
};
color: ${({ theme }) => theme.colors.primary};
background-color: ${({ theme }) => theme.invertButtons ?
theme.colors.secondary :
theme.colors.primary
};
background-color: ${({ theme }) => theme.colors.primary};
}
`