@vuelor/picker 0.3.1 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -11
- package/dist/index.js +363 -363
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.vuelor-picker-root{--vuelor-primary
|
|
1
|
+
.vuelor-picker-root{--color-vuelor-primary: #0d99ff;--color-vuelor-surface: #ffffff;--color-vuelor-border: #e6e6e6;--color-vuelor-shadow-inner: #0000001a;--color-vuelor-input-bg: #f5f5f5;--color-vuelor-button-bg--hover: #0000000d;--opacity-vuelor-disabled: .5;--shadow-vuelor-card: 0 .125rem .3125rem 0 #00000026, 0 .625rem 1rem 0 #0000001f, 0 0 .03125rem 0 #0000001f;--shadow-vuelor-thumb: 0 0 .03125rem rgba(0, 0, 0, .18), 0 .1875rem .5rem rgba(0, 0, 0, .1), 0 .0625rem .1875rem rgba(0, 0, 0, .1);--shadow-vuelor-inner: inset 0 0 0 .0625rem var(--color-vuelor-shadow-inner);width:15rem;background-color:var(--color-vuelor-surface);border-radius:.8125rem;padding:1rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--shadow-vuelor-card)}.vuelor-picker-eye-dropper{padding:.25rem;border-radius:.3125rem}.vuelor-picker-eye-dropper:hover:not(:disabled){background-color:var(--color-vuelor-button-bg--hover)}.vuelor-picker-eye-dropper:disabled{opacity:var(--opacity-vuelor-disabled);background-color:transparent;cursor:not-allowed}.vuelor-picker-eye-dropper:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--color-vuelor-primary)}.vuelor-picker-shared-thumb{display:block;width:1rem;height:1rem;border-radius:9999rem;border-width:.25rem;border-style:solid;border-color:var(--color-vuelor-surface);box-shadow:var(--shadow-vuelor-thumb)}.vuelor-picker-shared-thumb:focus{outline-width:.0625rem;outline-style:solid;outline-color:var(--color-vuelor-primary)}.vuelor-picker-canvas-root{touch-action:none}.vuelor-picker-canvas-root[data-disabled]{pointer-events:none;opacity:var(--opacity-vuelor-disabled)}.vuelor-picker-canvas-area{border-radius:.3125rem;outline-width:.0625rem;outline-style:solid;outline-offset:-.0625rem;outline-color:var(--color-vuelor-shadow-inner)}.vuelor-picker-slider-root{position:relative;height:1rem;width:100%;display:flex;align-items:center;-webkit-user-select:none;user-select:none;touch-action:none}.vuelor-picker-slider-root[data-orientation=vertical]{height:auto;width:1rem;flex-direction:column}.vuelor-picker-slider-root[data-disabled]{pointer-events:none;opacity:var(--opacity-vuelor-disabled)}.vuelor-picker-slider-track{position:relative;height:1rem;width:100%;flex-grow:1;border-radius:9999rem;box-shadow:var(--shadow-vuelor-inner)}.vuelor-picker-slider-track[data-orientation=vertical]{height:100%;width:1rem}.vuelor-picker-input-group{width:100%;display:flex;gap:.0625rem;border-radius:.3125rem;outline-style:solid;outline-width:0;outline-color:var(--color-vuelor-border)}.vuelor-picker-input-group:hover:not([data-disabled]){outline-width:.0625rem}.vuelor-picker-input-group:focus-within{outline-width:.0625rem;outline-color:var(--color-vuelor-primary)}.vuelor-picker-input-group[data-disabled]{pointer-events:none;opacity:var(--opacity-vuelor-disabled)}.vuelor-picker-input-item{display:flex;flex:1 1 0%;align-items:center;padding-left:.25rem;padding-right:.25rem;gap:.25rem;background-color:var(--color-vuelor-input-bg)}.vuelor-picker-input-item[data-before],.vuelor-picker-input-item[data-alpha-input]{flex-grow:0}.vuelor-picker-input-item:first-child{border-top-left-radius:.3125rem;border-bottom-left-radius:.3125rem}.vuelor-picker-input-item:last-child{border-top-right-radius:.3125rem;border-bottom-right-radius:.3125rem}.vuelor-picker-input-label{-webkit-user-select:none;user-select:none;color:#000;font-size:.6875rem;opacity:.4;display:none}.vuelor-picker-input-label[data-alpha-label],.vuelor-picker-input-label:not([data-alpha-label]){display:block}.vuelor-picker-input-field{width:100%;height:1.5rem;min-width:1.25rem;font-size:.6875rem;background:transparent;border:none}.vuelor-picker-input-field:focus{outline:none}.vuelor-picker-swatch-base{position:relative;flex-grow:0;height:1rem;width:1rem;border-radius:20%;overflow:hidden}.vuelor-picker-swatch-basedisabled{opacity:var(--opacity-vuelor-disabled)}.vuelor-picker-swatch-base:focus-within{outline-width:.0625rem;outline-style:solid;outline-color:var(--color-vuelor-primary)}.vuelor-picker-swatch-alpha{position:absolute;top:0;right:0;height:100%;width:50%}
|