@dropi/ui 0.1.20 → 0.1.21

package/dist/collection/components/dropi-color-picker/dropi-color-picker.css

@@ -1,183 +1,210 @@
-:host { display: block; position: relative; }
-*, *::before, *::after { box-sizing: border-box; }
-
-.cp-label {
+:host {
   display: block;
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-600, #475066);
-  margin-bottom: 4px;
 }
 
-/* Trigger */
-.cp-trigger {
-  display: flex;
-  align-items: center;
-  gap: var(--Size-2, 8px);
-  padding: 0 var(--Size-3, 12px);
-  height: 40px;
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #fff);
-  cursor: pointer;
-  font-family: inherit;
-  transition: border-color 0.2s;
-  width: 100%;
+.general-container {
+  position: relative;
+  width: fit-content;
 }
-.cp-trigger:hover:not(:disabled) { border-color: var(--Info-Info-500, #50a5f1); }
-.cp-trigger--disabled { opacity: 0.6; cursor: not-allowed; }
 
-.cp-trigger__swatch {
-  width: 20px;
-  height: 20px;
-  border-radius: var(--Border-1, 4px);
-  border: 1px solid rgba(0,0,0,0.1);
-  flex-shrink: 0;
-}
-
-.cp-trigger__value {
-  flex: 1;
-  text-align: left;
-  font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-700, #32394d);
-  font-family: monospace;
+.main-input-container {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--Size-3);
+  position: relative;
+  width: fit-content;
 }
 
-/* Popup */
-.cp-popup {
+.main-input-container .overlay {
   position: absolute;
-  top: calc(100% + 4px);
+  top: 0;
   left: 0;
-  width: 220px;
-  background: var(--Neutral-White, #fff);
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
-  z-index: 300;
-  padding: var(--Size-3, 12px);
-  display: flex;
-  flex-direction: column;
-  gap: var(--Size-3, 12px);
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  cursor: pointer;
 }
 
-/* Spectrum */
-.cp-spectrum-wrap {
+.line-color-preview {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid var(--Gray-Gray-200);
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  gap: var(--Size-1, 4px);
+  padding: 5px;
 }
 
-.cp-native {
+.line-color-preview .color-preview {
   width: 100%;
-  height: 80px;
-  border: none;
-  border-radius: var(--Border-1, 4px);
-  cursor: pointer;
-  padding: 0;
-  background: none;
+  height: 100%;
+  border-radius: 50%;
+  border: 1px solid var(--Gray-Gray-200);
 }
-.cp-native::-webkit-color-swatch-wrapper { padding: 0; }
-.cp-native::-webkit-color-swatch { border: none; border-radius: var(--Border-1, 4px); }
 
-.cp-spectrum-label {
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-400, #858ea6);
+.position-right {
+  top: 0;
+  left: 250px;
 }
 
-/* Hex row */
-.cp-hex-row {
-  display: flex;
-  align-items: center;
-  gap: var(--Size-2, 8px);
+.position-left {
+  top: 0;
+  right: 200px;
 }
 
-.cp-hex-label {
-  font-size: var(--font-size-xs, 10px);
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--Gray-Gray-500, #68738f);
-  width: 24px;
-  flex-shrink: 0;
+.position-top {
+  bottom: 55px;
 }
 
-.cp-hex-input {
-  flex: 1;
-  height: 32px;
-  padding: 0 var(--Size-2, 8px);
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-1, 4px);
-  font-size: var(--font-size-xs, 10px);
-  font-family: monospace;
-  color: var(--Gray-Gray-700, #32394d);
-  outline: none;
+.position-bottom {
+  top: 55px;
+}
+
+.position-bottom::before {
+  transform: rotate(90deg);
+  left: 50%;
+  top: -15px;
+}
+
+.position-right::before {
+  left: -6px;
+  top: 10px;
 }
-.cp-hex-input:focus { border-color: var(--Info-Info-500, #50a5f1); }
 
-.cp-hex-preview {
-  width: 24px;
-  height: 24px;
-  border-radius: var(--Border-1, 4px);
-  border: 1px solid rgba(0,0,0,0.1);
-  flex-shrink: 0;
+.position-top::before {
+  transform: rotate(270deg);
+  left: 50%;
+  bottom: -15px;
 }
 
-/* Opacity */
-.cp-opacity-row {
+.position-left::before {
+  transform: rotate(180deg);
+  right: -9px;
+}
+
+.color-picker-container::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 10px solid transparent;
+  border-bottom: 10px solid transparent;
+  border-right: 10px solid var(--Neutral-White);
+  z-index: 1;
+}
+
+.color-picker-container {
+  width: 280px;
+  padding: var(--Size-4);
+  background: var(--Neutral-White);
+  border-radius: var(--Size-2);
+  box-shadow: var(--Shadow-large);
+  position: absolute;
+  z-index: 100;
+  transform-origin: top left;
+  opacity: 0;
+  transition:
+    transform 0.2s ease-out,
+    opacity 0.2s ease-out;
+  pointer-events: none;
+}
+
+.color-picker-container .main-color-canvas-container {
+  position: relative;
+  margin-bottom: var(--Size-4);
+  border: 1px solid var(--Gray-Gray-200);
+  border-radius: var(--Size-1);
   display: flex;
+  justify-self: center;
   align-items: center;
-  gap: var(--Size-2, 8px);
 }
 
-.cp-opacity-label {
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-500, #68738f);
-  white-space: nowrap;
+.color-picker-container .main-color-canvas-container canvas {
+  display: block;
+  border-radius: var(--Size-1);
 }
 
-.cp-opacity-slider {
-  flex: 1;
-  height: 4px;
-  cursor: pointer;
-  accent-color: var(--Primary-Primary-500, #f49a3d);
+.color-picker-container .main-color-canvas-container .color-selector-pointer {
+  position: absolute;
+  width: var(--Size-3);
+  height: var(--Size-3);
+  border: 2px solid var(--Neutral-White);
+  border-radius: 50%;
+  transform: translate(-6px, -6px);
+  pointer-events: none;
 }
 
-.cp-opacity-value {
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-500, #68738f);
-  width: 28px;
-  text-align: right;
-  flex-shrink: 0;
+.color-picker-container .slider-container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-3);
 }
 
-/* Presets */
-.cp-presets {
-  display: grid;
-  grid-template-columns: repeat(6, 1fr);
-  gap: var(--Size-1, 4px);
+.color-picker-container .slider-container .slider-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Size-1);
 }
 
-.cp-swatch {
-  width: 24px;
-  height: 24px;
-  border-radius: var(--Border-1, 4px);
-  border: 2px solid transparent;
-  cursor: pointer;
-  transition: transform 0.15s, border-color 0.15s;
-  padding: 0;
-}
-.cp-swatch:hover { transform: scale(1.15); }
-.cp-swatch--active { border-color: var(--Gray-Gray-800, #1a2033); }
-
-/* Close */
-.cp-close {
-  background: none;
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-1, 4px);
-  padding: 4px 12px;
-  font-size: var(--font-size-xs, 10px);
-  font-family: inherit;
-  color: var(--Gray-Gray-600, #475066);
-  cursor: pointer;
-  align-self: flex-end;
-  transition: background 0.15s;
+.color-picker-container .slider-container .slider-group label {
+  font-size: var(--font-size-xs);
+  color: var(--Gray-Gray-500);
+  font-weight: var(--font-weight-bold);
+}
+
+.color-picker-container .slider-container .slider-group .hue-slider-container,
+.color-picker-container .slider-container .slider-group .opacity-slider-container {
+  position: relative;
+  height: var(--Size-3);
+  border-radius: var(--Size-4);
+  overflow: hidden;
+}
+
+.color-picker-container .slider-container .slider-group .hue-slider-container canvas,
+.color-picker-container .slider-container .slider-group .opacity-slider-container canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.color-picker-container .slider-container .slider-group .hue-slider-container .slider-pointer,
+.color-picker-container .slider-container .slider-group .opacity-slider-container .slider-pointer {
+  position: absolute;
+  top: 0;
+  height: var(--Size-3);
+  width: var(--Size-3);
+  background: transparent;
+  border: 2px solid var(--Neutral-White);
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.color-picker-container.show {
+  transform: scale(1);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.color-info .color-label {
+  font-size: var(--font-size-xs);
+  color: var(--Gray-Gray-500);
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  margin-bottom: var(--Size-2);
+}
+
+.color-info .color-input {
+  border: 1px solid var(--Gray-Gray-200, #ddd);
+  border-radius: var(--Size-1);
+  padding: 6px 8px;
+  font-size: var(--font-size-s);
+  width: 100%;
+  font-family: monospace;
+  text-transform: uppercase;
+  background-color: var(--Neutral-White, #ffffff);
+  color: var(--Gray-Gray-800, #1f2433);
+  outline: none;
 }
-.cp-close:hover { background: var(--Gray-Gray-50, #f7f8fa); }