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

Migrated Checkbox/RadioButton

pull/5507/head
Cagatay Civici 2024-02-18 13:32:20 +03:00
parent 0d41caf199
commit 370b653f30
7 changed files with 311 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
components/lib/theme/aura/checkbox/index.js Normal file
View File

@ -0,0 +1,133 @@
export default {
variables: {
common: {
root: {
borderRadius: '{rounded.sm}',
width: '1.25rem',
height: '1.25rem',
background: '{form.field.background}',
backgroundChecked: '{primary.color}',
backgroundCheckedHover: '{primary.hover.color}',
backgroundDisabled: '{form.field.background.disabled}',
backgroundFilled: '{form.field.background.filled}',
borderColor: '{form.field.border.color}',
borderColorHover: '{form.field.border.color.hover}',
borderColorChecked: '{primary.color}',
borderColorCheckedHover: '{primary.hover.color}',
borderColorInvalid: '{form.field.border.color.invalid}',
boxShadow: '{form.field.box.shadow}'
},
icon: {
size: '0.875rem',
color: '{form.field.text.color}',
colorChecked: '{primary.inverse.color}',
colorCheckedHover: '{primary.inverse.color}',
colorDisabled: '{form.field.text.disabled}'
}
}
},
css: `
.p-checkbox {
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
width: var(--p-checkbox-width);
height: var(--p-checkbox-height);
}
.p-checkbox-input {
cursor: pointer;
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border: 1px solid transparent;
border-radius: var(--p-checkbox-border-radius);
}
.p-checkbox-box {
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--p-rounded-sm);
border: 1px solid var(--p-checkbox-border-color);
background: var(--p-checkbox-background);
width: var(--p-checkbox-width);
height: var(--p-checkbox-height);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
outline-color: transparent;
box-shadow: var(--p-checkbox-box-shadow);
}
.p-checkbox-icon {
transition-duration: var(--p-transition-duration);
color: var(--p-checkbox-icon-color);
font-size: var(--p-checkbox-icon-size);
width: var(--p-checkbox-icon-size);
height: var(--p-checkbox-icon-size);
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
border-color: var(--p-checkbox-border-color-hover);
}
.p-checkbox.p-highlight .p-checkbox-box {
border-color: var(--p-checkbox-border-color-checked);
background: var(--p-checkbox-background-checked);
}
.p-checkbox.p-highlight .p-checkbox-box .p-checkbox-icon {
color: var(--p-checkbox-icon-color-checked);
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
border-color: var(--p-checkbox-border-color-checked-hover);
background: var(--p-checkbox-background-checked-hover)
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box .p-checkbox-icon {
color: var(--p-checkbox-icon-color-checked-hover);
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
}
.p-checkbox.p-invalid > .p-checkbox-box {
border-color: var(--p-checkbox-border-color-invalid);
}
.p-checkbox.p-variant-filled .p-checkbox-box {
background: var(--p-checkbox-background-filled);
}
.p-checkbox.p-variant-filled.p-highlight .p-checkbox-box {
background: var(--p-checkbox-background-checked);
}
.p-checkbox.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover).p-highlight .p-checkbox-box {
background: var(--p-checkbox-background-checked-hover);
}
.p-checkbox.p-disabled {
opacity: 1;
}
.p-checkbox.p-disabled .p-checkbox-box {
background: var(--p-checkbox-background-disabled);
}
.p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
color: var(--p-checkbox-icon-color-disabled);
}
`
};

6
components/lib/theme/aura/checkbox/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

10
components/lib/theme/aura/index.js
View File

@ -6,6 +6,7 @@ import breadcrumb from 'primevue/theme/aura/breadcrumb';
import button from 'primevue/theme/aura/button';
import card from 'primevue/theme/aura/card';
import carousel from 'primevue/theme/aura/carousel';
import checkbox from 'primevue/theme/aura/checkbox';
import chip from 'primevue/theme/aura/chip';
import confirmdialog from 'primevue/theme/aura/confirmdialog';
import confirmpopup from 'primevue/theme/aura/confirmpopup';
@ -38,6 +39,7 @@ import panelmenu from 'primevue/theme/aura/panelmenu';
import picklist from 'primevue/theme/aura/picklist';
import progressbar from 'primevue/theme/aura/progressbar';
import progressspinner from 'primevue/theme/aura/progressspinner';
import radiobutton from 'primevue/theme/aura/radiobutton';
import rating from 'primevue/theme/aura/rating';
import scrollpanel from 'primevue/theme/aura/scrollpanel';
import scrolltop from 'primevue/theme/aura/scrolltop';
@ -145,11 +147,10 @@ export default {
textColorFocus: '{primary.800}'
},
maskBackground: 'rgba(0,0,0,0.4)',
textfield: {
formField: {
background: '{surface.0}',
backgroundDisabled: '{surface.200}',
backgroundFilled: '{surface.50}',
backgroundFilledHover: '{surface.50}',
backgroundFilledFocus: '{surface.0}',
borderColor: '{surface.300}',
borderColorHover: '{surface.400}',
@ -189,11 +190,10 @@ export default {
textColorFocus: 'rgba(255,255,255,.87)'
},
maskBackground: 'rgba(0,0,0,0.4)',
textfield: {
formField: {
background: '{surface.950}',
backgroundDisabled: '{surface.700}',
backgroundFilled: '{surface.800}',
backgroundFilledHover: '{surface.800}',
backgroundFilledFocus: '{surface.950}',
borderColor: '{surface.700}',
borderColorHover: '{surface.600}',
@ -217,6 +217,7 @@ export default {
button,
card,
carousel,
checkbox,
chip,
confirmdialog,
confirmpopup,
@ -248,6 +249,7 @@ export default {
picklist,
progressbar,
progressspinner,
radiobutton,
rating,
scrollpanel,
scrolltop,

29
components/lib/theme/aura/inputtext/index.js
View File

@ -2,19 +2,18 @@ export default {
variables: {
common: {
root: {
background: '{textfield.background}',
backgroundDisabled: '{textfield.background.disabled}',
backgroundFilled: '{textfield.background.filled}',
backgroundFilledHover: '{textfield.background.filled.hover}',
backgroundFilledFocus: '{textfield.background.filled.focus}',
borderColor: '{textfield.border.color}',
borderColorHover: '{textfield.border.color.hover}',
borderColorFocus: '{textfield.border.color.focus}',
borderColorInvalid: '{textfield.border.color.invalid}',
textColor: '{textfield.text.color}',
textColorDisabled: '{textfield.text.disabled}',
placeholderTextColor: '{textfield.placeholder.text.color}',
boxShadow: '{textfield.box.shadow}'
background: '{form.field.background}',
backgroundDisabled: '{form.field.background.disabled}',
backgroundFilled: '{form.field.background.filled}',
backgroundFilledFocus: '{form.field.background.filled.focus}',
borderColor: '{form.field.border.color}',
borderColorHover: '{form.field.border.color.hover}',
borderColorFocus: '{form.field.border.color.focus}',
borderColorInvalid: '{form.field.border.color.invalid}',
textColor: '{form.field.text.color}',
textColorDisabled: '{form.field.text.disabled}',
placeholderTextColor: '{form.field.placeholder.text.color}',
boxShadow: '{form.field.box.shadow}'
}
}
},
@ -51,10 +50,6 @@ export default {
background-color: var(--p-inputtext-background-filled);
}
.p-inputtext.p-variant-filled:enabled:hover {
background-color: var(--p-inputtext-background-filled-hover);
}
.p-inputtext.p-variant-filled:enabled:focus {
background-color: var(--p-inputtext-background-filled-focus);
}

136
components/lib/theme/aura/radiobutton/index.js Normal file
View File

@ -0,0 +1,136 @@
export default {
variables: {
common: {
root: {
width: '1.25rem',
height: '1.25rem',
background: '{form.field.background}',
backgroundChecked: '{form.field.background}',
backgroundCheckedHover: '{form.field.background}',
backgroundDisabled: '{form.field.background.disabled}',
backgroundFilled: '{form.field.background.filled}',
borderColor: '{form.field.border.color}',
borderColorHover: '{form.field.border.color.hover}',
borderColorChecked: '{primary.color}',
borderColorCheckedHover: '{primary.hover.color}',
borderColorInvalid: '{form.field.border.color.invalid}',
boxShadow: '{form.field.box.shadow}'
},
icon: {
size: '0.75rem',
colorChecked: '{primary.color}',
colorCheckedHover: '{primary.hover.color}',
colorDisabled: '{form.field.text.disabled}'
}
}
},
css: `
.p-radiobutton {
position: relative;
display: inline-flex;
user-select: none;
vertical-align: bottom;
width: var(--p-radiobutton-width);
height: var(--p-radiobutton-height);
}
.p-radiobutton-input {
cursor: pointer;
appearance: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
opacity: 0;
z-index: 1;
outline: 0 none;
border: 1px solid transparent;
border-radius: 50%;
}
.p-radiobutton-box {
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
border: 1px solid var(--p-radiobutton-border-color);
background: var(--p-radiobutton-background);
width: var(--p-radiobutton-width);
height: var(--p-radiobutton-height);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
outline-color: transparent;
box-shadow: var(--p-radiobutton-box-shadow);
}
.p-radiobutton-icon {
transition-duration: var(--p-transition-duration);
background: transparent;
font-size: var(--p-radiobutton-icon-size);
width: var(--p-radiobutton-icon-size);
height: var(--p-radiobutton-icon-size);
border-radius: 50%;
backface-visibility: hidden;
transform: translateZ(0) scale(0.1);
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) .p-radiobutton-box {
border-color: var(--p-radiobutton-border-color-hover);
}
.p-radiobutton.p-highlight .p-radiobutton-box {
border-color: var(--p-radiobutton-border-color-checked);
background: var(--p-radiobutton-background-checked);
}
.p-radiobutton.p-highlight .p-radiobutton-box .p-radiobutton-icon {
background: var(--p-radiobutton-icon-color-checked);
transform: translateZ(0) scale(1, 1);
visibility: visible;
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
border-color: var(--p-radiobutton-border-color-checked-hover);
background: var(--p-radiobutton-background-checked-hover)
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box .p-radiobutton-icon {
background: var(--p-radiobutton-icon-color-checked-hover);
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
}
.p-radiobutton.p-invalid > .p-radiobutton-box {
border-color: var(--p-radiobutton-border-color-invalid);
}
.p-radiobutton.p-variant-filled .p-radiobutton-box {
background: var(--p-radiobutton-background-filled);
}
.p-radiobutton.p-variant-filled.p-highlight .p-radiobutton-box {
background: var(--p-radiobutton-background-checked);
}
.p-radiobutton.p-variant-filled:not(.p-disabled):has(.p-radiobutton-input:hover).p-highlight .p-radiobutton-box {
background: var(--p-radiobutton-background-checked-hover);
}
.p-radiobutton.p-disabled {
opacity: 1;
}
.p-radiobutton.p-disabled .p-radiobutton-box {
background: var(--p-radiobutton-background-disabled);
}
.p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon {
color: var(--p-radiobutton-icon-color-disabled);
}
`
};

6
components/lib/theme/aura/radiobutton/package.json Normal file
View File

@ -0,0 +1,6 @@
{
"main": "./index.cjs.js",
"module": "./index.esm.js",
"unpkg": "./index.min.js",
"types": "./index.d.ts"
}

29
components/lib/theme/aura/textarea/index.js
View File

@ -2,19 +2,18 @@ export default {
variables: {
common: {
root: {
background: '{textfield.background}',
backgroundDisabled: '{textfield.background.disabled}',
backgroundFilled: '{textfield.background.filled}',
backgroundFilledHover: '{textfield.background.filled.hover}',
backgroundFilledFocus: '{textfield.background.filled.focus}',
borderColor: '{textfield.border.color}',
borderColorHover: '{textfield.border.color.hover}',
borderColorFocus: '{textfield.border.color.focus}',
borderColorInvalid: '{textfield.border.color.invalid}',
textColor: '{textfield.text.color}',
textColorDisabled: '{textfield.text.disabled}',
placeholderTextColor: '{textfield.placeholder.text.color}',
boxShadow: '{textfield.box.shadow}'
background: '{form.field.background}',
backgroundDisabled: '{form.field.background.disabled}',
backgroundFilled: '{form.field.background.filled}',
backgroundFilledFocus: '{form.field.background.filled.focus}',
borderColor: '{form.field.border.color}',
borderColorHover: '{form.field.border.color.hover}',
borderColorFocus: '{form.field.border.color.focus}',
borderColorInvalid: '{form.field.border.color.invalid}',
textColor: '{form.field.text.color}',
textColorDisabled: '{form.field.text.disabled}',
placeholderTextColor: '{form.field.placeholder.text.color}',
boxShadow: '{form.field.box.shadow}'
}
}
},
@ -51,10 +50,6 @@ export default {
background-color: var(--p-textarea-background-filled);
}
.p-inputtextarea.p-variant-filled:enabled:hover {
background-color: var(--p-textarea-background-filled-hover);
}
.p-inputtextarea.p-variant-filled:enabled:focus {
background-color: var(--p-textarea-background-filled-focus);
}