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

Refactored ColorPicker css

pull/201/head
cagataycivici 2020-01-30 13:17:47 +03:00
parent bfc8fae132
commit 365fbb5542
2 changed files with 89 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/colorpicker/ColorPicker.css
View File

@ -1,86 +1,7 @@
.p-colorpicker {
display: inline-block;
}
.p-colorpicker-dragging {
cursor: pointer;
}
.p-colorpicker-overlay {
position: relative;
}
.p-colorpicker-panel {
position: relative;
width: 193px;
height: 166px;
background-color: #323232;
border-color: #191919;
}
.p-colorpicker-overlay-panel {
position: absolute;
}
.p-colorpicker-preview {
width: 2em;
cursor: pointer;
}
.p-colorpicker-panel .p-colorpicker-content {
position: relative;
}
.p-colorpicker-panel .p-colorpicker-color-selector {
width: 150px;
height: 150px;
top: 8px;
left: 8px;
position: absolute;
}
.p-colorpicker-panel .p-colorpicker-color { .p-colorpicker-panel .p-colorpicker-color {
width: 150px;
height: 150px;
background: transparent url("./images/color.png") no-repeat left top; background: transparent url("./images/color.png") no-repeat left top;
} }
.p-colorpicker-panel .p-colorpicker-color-handle {
position: absolute;
top: 0px;
left: 150px;
border-radius: 100%;
width: 10px;
height: 10px;
border: 1px solid #ffffff;
margin: -5px 0 0 -5px;
cursor: pointer;
}
.p-colorpicker-panel .p-colorpicker-hue { .p-colorpicker-panel .p-colorpicker-hue {
background: transparent url("./images/hue.png") no-repeat left top; background: transparent url("./images/hue.png") no-repeat left top;
width: 17px;
height: 150px;
top: 8px;
left: 167px;
position: absolute;
opacity: .85;
} }
.p-colorpicker-panel .p-colorpicker-hue-handle {
position: absolute;
top: 150px;
left: 0px;
width: 21px;
margin-left: -2px;
margin-top: -5px;
height: 10px;
border: 2px solid #ffffff;
opacity: .85;
cursor: pointer;
}
.p-colorpicker-panel.p-disabled .p-colorpicker-hue-handle,
.p-colorpicker-panel.p-disabled .p-colorpicker-color-handle {
opacity: .5;
}

87
src/components/colorpicker/ColorPicker.vue
View File

@ -447,3 +447,90 @@ export default {
} }
} }
</script> </script>
<style>
.p-colorpicker {
display: inline-block;
}
.p-colorpicker-dragging {
cursor: pointer;
}
.p-colorpicker-overlay {
position: relative;
}
.p-colorpicker-panel {
position: relative;
width: 193px;
height: 166px;
background-color: #323232;
border-color: #191919;
}
.p-colorpicker-overlay-panel {
position: absolute;
}
.p-colorpicker-preview {
width: 2em;
cursor: pointer;
}
.p-colorpicker-panel .p-colorpicker-content {
position: relative;
}
.p-colorpicker-panel .p-colorpicker-color-selector {
width: 150px;
height: 150px;
top: 8px;
left: 8px;
position: absolute;
}
.p-colorpicker-panel .p-colorpicker-color {
width: 150px;
height: 150px;
}
.p-colorpicker-panel .p-colorpicker-color-handle {
position: absolute;
top: 0px;
left: 150px;
border-radius: 100%;
width: 10px;
height: 10px;
border: 1px solid #ffffff;
margin: -5px 0 0 -5px;
cursor: pointer;
}
.p-colorpicker-panel .p-colorpicker-hue {
width: 17px;
height: 150px;
top: 8px;
left: 167px;
position: absolute;
opacity: .85;
}
.p-colorpicker-panel .p-colorpicker-hue-handle {
position: absolute;
top: 150px;
left: 0px;
width: 21px;
margin-left: -2px;
margin-top: -5px;
height: 10px;
border: 2px solid #ffffff;
opacity: .85;
cursor: pointer;
}
.p-colorpicker-panel.p-disabled .p-colorpicker-hue-handle,
.p-colorpicker-panel.p-disabled .p-colorpicker-color-handle {
opacity: .5;
}
</style>