vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 08:52:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Fixed #5667 - Remove base option from theme config

Browse source
This commit is contained in:
Mert Sincan 2024-05-01 09:26:48 +01:00
parent 6d688ef675
commit 0979dde96d
438 changed files with 10872 additions and 11957 deletions
Download patch file Download diff file Expand all files Collapse all files

110
components/lib/colorpicker/style/ColorPickerStyle.js
View file

@ -1,5 +1,114 @@
import BaseStyle from 'primevue/base/style';
const theme = ({ dt }) => `
.p-colorpicker {
display: inline-block;
position: relative;
}
.p-colorpicker-dragging {
cursor: pointer;
}
.p-colorpicker-preview {
width: 1.5rem;
height: 1.5rem;
padding: 0;
border: 0 none;
border-radius: ${dt('rounded.base')};
transition: outline-color ${dt('transition.duration')};
outline-color: transparent;
cursor: pointer;
}
.p-colorpicker-preview:enabled:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-colorpicker-panel {
background: ${dt('colorpicker.panel.background')};
border: 1px solid ${dt('colorpicker.panel.border.color')};
border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
width: 193px;
height: 166px;
position: absolute;
top: 0;
left: 0;
}
.p-colorpicker-panel-inline {
box-shadow: none;
position: static;
}
.p-colorpicker-content {
position: relative;
}
.p-colorpicker-color-selector {
width: 150px;
height: 150px;
top: 8px;
left: 8px;
position: absolute;
}
.p-colorpicker-color-background {
width: 100%;
height: 100%;
background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
.p-colorpicker-color-handle {
position: absolute;
top: 0px;
left: 150px;
border-radius: 100%;
width: 10px;
height: 10px;
border-width: 1px;
border-style: solid;
margin: -5px 0 0 -5px;
cursor: pointer;
opacity: 0.85;
border-color: ${dt('colorpicker.handle.color')};
}
.p-colorpicker-hue {
width: 17px;
height: 150px;
top: 8px;
left: 167px;
position: absolute;
opacity: 0.85;
background: linear-gradient(0deg,
red 0,
#ff0 17%,
#0f0 33%,
#0ff 50%,
#00f 67%,
#f0f 83%,
red);
}
.p-colorpicker-hue-handle {
position: absolute;
top: 150px;
left: 0px;
width: 21px;
margin-left: -2px;
margin-top: -5px;
height: 10px;
border-width: 2px;
border-style: solid;
opacity: 0.85;
cursor: pointer;
border-color: ${dt('colorpicker.handle.color')};
}
`;
const classes = {
root: 'p-colorpicker p-component',
input: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
@ -20,5 +129,6 @@ const classes = {
export default BaseStyle.extend({
name: 'colorpicker',
theme,
classes
});