vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Toggle Switch style for Nora

pull/5756/head
Cagatay Civici 2024-05-15 01:26:11 +03:00
parent 3d4ada0d03
commit 99daeaab78
4 changed files with 28 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/lib/themes/aura/toggleswitch/index.js
View File

@ -15,13 +15,15 @@ export default {
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
borderWidth: '1px',
borderColor: 'transparent',
invalidBorderColor: '{form.field.invalid.border.color}'
},
colorScheme: {
light: {
root: {
background: '{surface.300}',
invalidBackground: '{red.400}',
hoverBackground: '{surface.400}',
checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}'
@ -30,14 +32,12 @@ export default {
background: '{surface.0}',
hoverBackground: '{surface.0}',
checkedBackground: '{surface.0}',
checkedHoverBackground: '{surface.0}',
invalidBackground: '{surface.0}'
checkedHoverBackground: '{surface.0}'
}
},
dark: {
root: {
background: '{surface.700}',
invalidBackground: '{red.300}',
hoverBackground: '{surface.600}',
checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}'
@ -46,8 +46,7 @@ export default {
background: '{surface.400}',
hoverBackground: '{surface.300}',
checkedBackground: '{surface.900}',
checkedHoverBackground: '{surface.900}',
invalidBackground: '{surface.900}'
checkedHoverBackground: '{surface.900}'
}
}
}

13
components/lib/themes/lara/toggleswitch/index.js
View File

@ -15,13 +15,15 @@ export default {
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
}
},
borderWidth: '1px',
borderColor: 'transparent',
invalidBorderColor: '{form.field.invalid.border.color}'
},
colorScheme: {
light: {
root: {
background: '{surface.300}',
invalidBackground: '{red.400}',
hoverBackground: '{surface.400}',
checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}'
@ -30,14 +32,12 @@ export default {
background: '{surface.0}',
hoverBackground: '{surface.0}',
checkedBackground: '{surface.0}',
checkedHoverBackground: '{surface.0}',
invalidBackground: '{surface.0}'
checkedHoverBackground: '{surface.0}'
}
},
dark: {
root: {
background: '{surface.700}',
invalidBackground: '{red.300}',
hoverBackground: '{surface.600}',
checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}'
@ -46,8 +46,7 @@ export default {
background: '{surface.400}',
hoverBackground: '{surface.300}',
checkedBackground: '{surface.900}',
checkedHoverBackground: '{surface.900}',
invalidBackground: '{surface.900}'
checkedHoverBackground: '{surface.900}'
}
}
}

45
components/lib/themes/nora/toggleswitch/index.js
View File

@ -1,7 +1,11 @@
export default {
handle: {
borderRadius: '50%',
size: '1rem'
size: '1rem',
background: '{form.field.border.color}',
hoverBackground: '{form.field.border.color}',
checkedBackground: '{primary.contrast.color}',
checkedHoverBackground: '{primary.contrast.color}'
},
root: {
width: '2.5rem',
@ -15,40 +19,13 @@ export default {
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
colorScheme: {
light: {
root: {
background: '{surface.300}',
invalidBackground: '{red.400}',
hoverBackground: '{surface.400}',
borderWidth: '1px',
borderColor: '{form.field.border.color}',
invalidBorderColor: '{form.field.invalid.border.color}',
background: '{form.field.background}',
hoverBackground: '{form.field.background}',
checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}'
},
handle: {
background: '{surface.0}',
hoverBackground: '{surface.0}',
checkedBackground: '{surface.0}',
checkedHoverBackground: '{surface.0}',
invalidBackground: '{surface.0}'
}
},
dark: {
root: {
background: '{surface.700}',
invalidBackground: '{red.300}',
hoverBackground: '{surface.600}',
checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}'
},
handle: {
background: '{surface.400}',
hoverBackground: '{surface.300}',
checkedBackground: '{surface.900}',
checkedHoverBackground: '{surface.900}',
invalidBackground: '{surface.900}'
}
}
checkedHoverBackground: '{primary.color}'
}
};

10
components/lib/toggleswitch/style/ToggleSwitchStyle.js
View File

@ -30,7 +30,9 @@ const theme = ({ dt }) => `
left: 0;
right: 0;
bottom: 0;
border: 0 none;
border-width: ${dt('toggleswitch.border.width')};
border-style: solid;
border-color: ${dt('toggleswitch.border.color')};
background: ${dt('toggleswitch.background')};
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
border-radius: ${dt('toggleswitch.border.radius')};
@ -84,11 +86,7 @@ const theme = ({ dt }) => `
}
.p-toggleswitch.p-invalid > .p-toggleswitch-slider {
background: ${dt('toggleswitch.invalid.background')};
}
.p-toggleswitch.p-invalid > .p-toggleswitch-slider:before {
background: ${dt('toggleswitch.handle.invalid.background')};
border-color: ${dt('toggleswitch.invalid.border.color')};
}
`;