removed 'invertButton' from themes
This commit is contained in:
parent
6c1d383c69
commit
691a0ed881
6 changed files with 27 additions and 98 deletions
|
@ -95,15 +95,13 @@ export const PageCard = styled.div`
|
|||
${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & {
|
||||
color: ${({ theme }) => theme.colors.secondary};
|
||||
border-color: ${({ theme }) => theme.colors.secondary};
|
||||
background-color: ${({ theme }) => theme.invertButtons ?
|
||||
theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
|
||||
background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
|
||||
}
|
||||
|
||||
${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
|
||||
color: ${({ theme }) => theme.colors.secondary};
|
||||
border-color: ${({ theme }) => theme.colors.secondary};
|
||||
background-color: ${({ theme }) => theme.invertButtons ?
|
||||
theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
|
||||
background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
|
||||
}
|
||||
`;
|
||||
|
||||
|
@ -146,14 +144,12 @@ export const OnlineStatus = styled.p<OnlinePropType>`
|
|||
|
||||
${CardStyleWrap}:focus,${CardStyleWrap}:active,${CardStyleWrap}:hover & {
|
||||
border-color: ${({ theme }) => theme.colors.secondary};
|
||||
background-color: ${({ theme }) => theme.invertButtons ?
|
||||
theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
|
||||
background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
|
||||
}
|
||||
|
||||
${CardLink}:focus,${CardLink}:active,${CardLink}:hover & {
|
||||
border-color: ${({ theme }) => theme.colors.secondary};
|
||||
background-color: ${({ theme }) => theme.invertButtons ?
|
||||
theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background : theme.colors.background};
|
||||
background-color: ${({ theme }) => theme.colors.backgroundAlt ? theme.colors.backgroundAlt : theme.colors.background};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
@ -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};
|
||||
}
|
||||
`
|
|
@ -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};
|
||||
}
|
||||
`
|
|
@ -20,12 +20,12 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
|
|||
border: 2px solid;
|
||||
border-radius: 5px;
|
||||
background-color: ${ props => props.focus ?
|
||||
({ theme }) => theme.invertButtons ? theme.colors.secondary : theme.colors.background :
|
||||
({ theme }) => theme.colors.background :
|
||||
({ theme }) => theme.colors.background};
|
||||
padding: 2px 6px;
|
||||
cursor: pointer;
|
||||
color: ${props => props.focus ? ({ theme }) => theme.invertButtons ?
|
||||
theme.colors.text ? theme.colors.text : theme.colors.primary : theme.colors.secondary :
|
||||
color: ${props => props.focus ?
|
||||
({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary :
|
||||
({ theme }) => theme.colors.primary};
|
||||
|
||||
transition-property: color, border-bottom-left-radius, border-bottom-right-radius, background-color;
|
||||
|
@ -34,13 +34,9 @@ export const ThemeDropDownButton = styled.button<DisplayPropType>`
|
|||
transition-delay: 0s, ${ props => props.show ? "0s, 0s" : "0.6s, 0.6s" }, 0s;
|
||||
|
||||
&:focus,:hover {
|
||||
color: ${({ theme }) => theme.invertButtons ?
|
||||
theme.colors.text ? theme.colors.text : theme.colors.primary :
|
||||
theme.colors.secondary};
|
||||
color: ${({ theme }) => theme.colors.text ? theme.colors.text : theme.colors.secondary};
|
||||
|
||||
background-color: ${({ theme }) => theme.invertButtons ?
|
||||
theme.colors.secondary :
|
||||
theme.colors.background};
|
||||
background-color: ${({ theme }) => theme.colors.background};
|
||||
}
|
||||
|
||||
border-bottom-left-radius: ${ props => props.show ? "0" : "" };
|
||||
|
|
|
@ -53,13 +53,11 @@
|
|||
"themeId": 4,
|
||||
"backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
|
||||
"backgroundOffset": "60%",
|
||||
"invertButtons": true,
|
||||
"colors": {
|
||||
"background": "#0008",
|
||||
"backgroundAlt": "#000d",
|
||||
"primary": "#ccc",
|
||||
"secondary": "#00C7C7",
|
||||
"text": "#000",
|
||||
"online": "#00ff00",
|
||||
"loading": "#0063C7",
|
||||
"offline": "#ff0000"
|
||||
|
@ -69,7 +67,6 @@
|
|||
"themeName": "dev",
|
||||
"themeId": 5,
|
||||
"backgroundImage": "https://images4.alphacoders.com/112/1123390.jpg",
|
||||
"invertButtons": true,
|
||||
"colors": {
|
||||
"background": "#0000",
|
||||
"backgroundAlt": "#0000",
|
||||
|
|
1
styled.d.ts
vendored
1
styled.d.ts
vendored
|
@ -6,7 +6,6 @@ declare module 'styled-components' {
|
|||
themeId: number,
|
||||
backgroundImage?: string,
|
||||
backgroundOffset?: string,
|
||||
invertButtons?: boolean,
|
||||
colors: {
|
||||
background: string,
|
||||
backgroundAlt?: string,
|
||||
|
|
Loading…
Reference in a new issue