@thednp/color-picker 0.0.1-alpha1 → 0.0.1

package/dist/css/color-picker.css

@@ -1,338 +1,505 @@
-/* :host */
-color-picker,
-.color-picker {
-  position: relative;
-  display: flex;
-}
-/* :host */
-color-picker:focus,
-.color-picker:focus {
-  outline: none;
-}
-.color-dropdown {
-  position: absolute;
-  left: 0;
-  z-index: 50;
-  display: none;
-  /* width: 100%;
-  max-width: calc(100% - 1rem); */
-  padding: .5rem;
-  color: rgba(255,255,255,.8);
-  background: rgba(0,0,0,.75);
-  border-radius: .5rem;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, .4);
-  flex-basis: 100%;
-  flex-direction: column;
-  min-width: max-content;
-}
-.color-dropdown.menu {
-  right: 0; left: auto;
-}
-.color-dropdown.show {
-  top: calc(100% + 5px);
-  display: flex;
-}
-.color-dropdown.show-top {
-  top: auto;
-  bottom: calc(100% + 5px);
-  display: flex;
-}
-.color-controls {
-  display: none;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-.picker-toggle:focus + .color-preview {
-  box-shadow: 0 0 0 5px rgba(0,0,0,.33);
-}
-.button-appearance {
-  width: 100%;
-  height: 1.5rem;
-  padding: .6rem 1rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  border: 0;
-  border-radius: .25rem;
-  outline: none;
-  appearance: none;
-}
-.color-preview {
-  box-shadow: 0 0 0 1px rgba(120,120,120,.33) inset;
-  direction: ltr; /* color value can never be rtl */
-}
-
-/* :host(.dark) .color-preview */
-.dark .color-preview {
-  color: rgba(255,255,255,.8);
-}
-/* :host(.dark) .color-preview:focus */
-.dark .color-preview:focus {
-  box-shadow: 0 0 0 1px rgb(255,255,255) inset, 0 0 0 3px rgba(0,0,0,.15);
-}
-/* :host(.dark) .color-preview::placeholder { */
-.dark .color-preview::placeholder {
-  color: rgba(255,255,255,.6);
-}
-
-/* :host(.light) .color-preview */
-.light .color-preview {
-  color: rgba(0,0,0,.8);
-}
-/* :host(.light) .color-preview:focus */
-.light .color-preview:focus {
-  color: rgba(0,0,0,.8);
-  box-shadow: 0 0 0 1px rgba(0,0,0,.5) inset, 0 0 0 3px rgba(0,0,0,.15);
-}
-/* :host(.light) .color-preview::placeholder */
-.light .color-preview::placeholder {
-  color: rgba(0,0,0,.6);
-}
-.picker-toggle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: transparent;
-  border: 0;
-}
-
-/* :host(.open) .picker-toggle */
-.open .picker-toggle {
-  z-index: -1;
-}
-.menu-toggle {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  width: 3rem;
-  height: 100%;
-  padding: 0 .25rem;
-  cursor: pointer;
-  border: 0;
-  border-radius: 0 .25rem .25rem 0;
-  transition: all .33s ease;
-}
-
-/* :host(.light) .menu-toggle */
-.light .menu-toggle {
-  background: rgba(0,0,0,.5);
-}
-/* :host(.light) .menu-toggle:hover,
-:host(.light) .menu-toggle:focus { */
-.light .menu-toggle:focus,
-.light .menu-toggle:focus {
-  background: rgba(0,0,0,.7);
-}
-
-/* :host(.dark) .menu-toggle */
-.dark .menu-toggle {
-  background: rgba(255,255,255,.33);
-}
-
-/* :host(.dark) .menu-toggle:focus,
-:host(.dark) .menu-toggle:hover */
-.dark .menu-toggle:focus,
-.dark .menu-toggle:focus {
-  background: rgba(255,255,255,.5);
-}
-.button-appearance:focus,
-.button-appearance:hover {
-  box-shadow: 0 0 0 3px rgba(0,0,0,.15);
-}
-.menu-toggle svg {
-  width: auto;
-  height: 100%;
-}
-.color-menu {
-  display: none;
-  flex-wrap: wrap;
-  flex-flow: column;
-  max-height: 160px;
-  margin: 0;
-  overflow-y: auto;
-  list-style: none;
-  padding-inline: 0;
-}
-.color-menu::-webkit-scrollbar {
-  width: 10px;
-}
-.color-menu::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-.color-menu::-webkit-scrollbar-thumb {
-  background-color: transparent;
-  background-clip: content-box;
-  border: 0;
-  border-radius: 10px;
-}
-.color-menu:hover::-webkit-scrollbar-thumb {
-  background-color: rgba(255,255,255,.2);
-}
-.color-menu::-webkit-scrollbar-thumb:hover {
-  background-color: #fff;
-}
-.color-dropdown.menu .color-menu,
-.color-dropdown.picker .color-controls {
-  display: flex;
-}
-
-.color-option {
-  padding: .25rem .5rem;
-  color: inherit;
-  cursor: pointer
-}
-.color-option:focus,
-.color-option:hover {
-  background: rgba(255,255,255,.3);
-  outline: none;
-}
-.color-option:active,
-.color-option.active {
-  color: #000;
-  background: #fff;
-}
-.color-form {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  padding: .25rem 0;
-  font: 12px sans-serif;
-  max-width: fit-content;
-}
-.color-form.hex { max-width: initial; }
-.color-form > * {
-  flex: 1 0 0%;
-  width: 17.5%;
-  max-width: 17.5%;
-  /* width: calc(65% / 4 - 1rem); */
-}
-.color-form label {
-  width: 7.5%;
-  max-width: 7.5%;
-  text-align: center;
-}
-.color-input {
-  color: inherit;
-  text-align: right;
-  background: transparent;
-  border: 1px solid rgba(255,255,255,.15);
-  outline: none;
-}
-.color-input.hex {
-  width: 92.5%;
-  max-width: 92.5%;
-  /* width: calc(100% - 4% - 1rem); */
-}
-.color-input:active,
-.color-input:focus {
-  background: rgba(0,0,0,.25);
-  border: 1px solid rgba(255,255,255,.33);
-}
-
-.visual-control2,
-.visual-control3 {
-  cursor: ns-resize;
-}
-.color-control {
-  position: relative;
-  display: inline-block;
-}
-.color-slider {
-  cursor: ns-resize;
-  left: 0;
-  width: calc(100% - 2px);
-}
-.color-control + .color-control {
-  margin-left: 0.5rem;
-}
-.knob {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 5px;
-  user-select: none;
-  background: #000;
-  border: 1px solid #fff;
-  outline: none;
-  will-change: transform;
-}
-.knob:hover {
-  box-shadow: 0 0 0 6px rgba(255,255,255,.5);
-}
-.knob:active,
-.knob:focus {
-  z-index: 1;
-  box-shadow: 0 0 0 6px rgba(255,255,255,.9);
-}
-.color-pointer {
-  width: 5px;
-  border-radius: 5px;
-}
-
-/* :host(.dark) .color-pointer */
-.dark .color-pointer {
-  background: #fff;
-  border-color: #fff;
-}
-/* :host(.light) .color-pointer */
-.light .color-pointer {
-  background: #000;
-  border-color: #000;
-}
-.color-pointer:hover,
-.color-pointer:active,
-.color-pointer:focus {
-  background: transparent !important;
-  border-color: transparent !important;
-}
-
-/* :host(.dark) .color-pointer:hover */
-.dark .color-pointer:hover {
-  box-shadow: 0 0 0 6px rgba(255,255,255,.5);
-}
-/* :host(.light) .color-pointer:hover */
-.light .color-pointer:hover {
-  box-shadow: 0 0 0 6px rgba(0,0,0,.5);
-}
-
-/* :host(.dark) .color-pointer:focus,
-:host(.dark) .color-pointer:active */
-.dark .color-pointer:focus,
-.dark .color-pointer:active {
-  box-shadow: 0 0 0 6px rgba(255,255,255,.9);
-}
-/* :host(.light) .color-pointer:focus,
-:host(.light) .color-pointer:active { */
-.light .color-pointer:focus,
-.light .color-pointer:active {
-  box-shadow: 0 0 0 6px rgba(0,0,0,.9);
-}
-
-/* utility */
-.v-hidden {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  clip: rect(0,0,0,0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
-}
-
-[dir="rtl"] .color-preview { text-align: right; }
-[dir="rtl"] .menu-toggle {
-  right: auto;
-  left: 0;
-}
-[dir="rtl"] .menu-toggle {
-  border-radius: .25rem 0 0 .25rem;
-}
-[dir="rtl"] .color-control + .color-control {
-  margin-right: 0.5rem;
-  margin-left: 0;
+/*!
+* ColorPicker v0.0.1 (http://thednp.github.io/color-picker)
+* Copyright 2022 © thednp
+* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
+*/
+/* :host */
+color-picker,
+.color-picker {
+  position: relative;
+  display: flex;
+}
+
+color-picker:focus,
+.color-picker:focus {
+  outline: none;
+}
+
+/* color-dropdown */
+.color-dropdown {
+  position: absolute;
+  z-index: 50;
+  display: none;
+  flex-direction: column;
+  width: min-content;
+  padding: 0.5rem;
+  color: rgba(255, 255, 255, 0.8);
+  background: rgba(0, 0, 0, 0.75);
+  border-radius: 0.5rem;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  transition: transform 0.33s ease, opacity 0.33s ease;
+}
+
+.color-dropdown.picker {
+  left: 0;
+}
+
+.color-dropdown.menu {
+  right: 0;
+}
+
+.open .color-dropdown.top {
+  top: auto;
+  bottom: 100%;
+}
+
+.color-dropdown.bottom {
+  top: 100%;
+}
+
+.open .color-dropdown.top,
+.open .color-dropdown.bottom {
+  display: flex;
+}
+
+.color-dropdown.show {
+  opacity: 1;
+}
+
+.color-dropdown.show.top {
+  transform: translate(0, -5px);
+}
+
+.color-dropdown.show.bottom {
+  transform: translate(0, 5px);
+}
+
+/* color-controls */
+.color-controls {
+  display: none;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: max-content;
+}
+
+/* btn-appearance */
+.btn-appearance {
+  width: 100%;
+  height: 1.5rem;
+  padding: 0.6rem 1rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border: 0;
+  border-radius: 0.25rem;
+  outline: none;
+  appearance: none;
+  transition-duration: 0.33s;
+  transition-property: box-shadow, border;
+}
+
+.btn-appearance:focus,
+.btn-appearance:hover {
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
+}
+
+/* color-preview */
+.color-preview {
+  box-shadow: 0 0 0 1px rgba(120, 120, 120, 0.33) inset;
+  direction: ltr;
+  /* color value can never be rtl */
+}
+
+.txt-dark .color-preview {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.txt-dark .color-preview:focus {
+  box-shadow: 0 0 0 1px white inset, 0 0 0 3px rgba(0, 0, 0, 0.15);
+}
+
+.txt-dark .color-preview::placeholder {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.txt-light .color-preview {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.txt-light .color-preview:focus {
+  color: rgba(0, 0, 0, 0.8);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 0 0 3px rgba(0, 0, 0, 0.15);
+}
+
+.txt-light .color-preview::placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+/* picker-toggle */
+.picker-toggle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border: 0;
+}
+
+.open .picker-toggle {
+  z-index: -1;
+}
+
+/* menu-toggle */
+.menu-toggle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  width: 3rem;
+  height: 100%;
+  padding: 0 0.25rem;
+  cursor: pointer;
+  border: 0;
+  border-radius: 0 0.25rem 0.25rem 0;
+}
+
+.txt-light .menu-toggle {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.txt-light .menu-toggle:focus,
+.txt-light .menu-toggle:focus {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.txt-dark .menu-toggle {
+  background: rgba(255, 255, 255, 0.33);
+}
+
+.txt-dark .menu-toggle:focus,
+.txt-dark .menu-toggle:focus {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.menu-toggle svg {
+  width: auto;
+  height: 100%;
+}
+
+/* scrollable */
+.scrollable {
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.scrollable::-webkit-scrollbar {
+  width: 0.5rem;
+}
+
+.scrollable::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.scrollable::-webkit-scrollbar-thumb {
+  width: 0.5rem;
+  background-color: transparent;
+  background-clip: content-box;
+  border: 0;
+}
+
+.scrollable:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.33);
+}
+
+.scrollable::-webkit-scrollbar-thumb:hover {
+  background-color: #fff;
+}
+
+/* color-defaults */
+.color-defaults {
+  display: none;
+  flex-wrap: wrap;
+  flex-flow: column;
+  margin: 0;
+  list-style: none;
+  padding-inline: 0;
+}
+
+.color-dropdown.menu .color-defaults,
+.color-dropdown.picker .color-controls {
+  display: flex;
+}
+
+.color-dropdown.menu {
+  max-height: 230px;
+}
+
+.color-defaults .color-option {
+  padding: 0.25rem 0.5rem;
+  color: inherit;
+}
+
+.color-option {
+  cursor: pointer;
+}
+
+.color-defaults .color-option:focus,
+.color-defaults .color-option:hover {
+  background: rgba(255, 255, 255, 0.3);
+  outline: none;
+}
+
+.color-defaults .color-option:active,
+.color-defaults .color-option.active {
+  color: #000;
+  background: #fff;
+}
+
+/* color-options grid */
+.color-options {
+  display: grid;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  --grid-item-size: 2rem;
+  --grid-fit: 5;
+  --grid-gap: .25rem;
+  --grid-height: auto;
+  --grid-hover-height: auto;
+  grid-template-columns: repeat(var(--grid-fit), var(--grid-item-size));
+  grid-template-rows: repeat(auto-fill, var(--grid-item-size));
+  gap: var(--grid-gap);
+}
+
+.color-options.scrollable {
+  height: var(--grid-height);
+  margin: 0 -0.5rem 0 0;
+  overflow-y: scroll;
+  transition: height 0.33s ease;
+}
+
+.color-options.scrollable:hover {
+  height: var(--grid-hover-height);
+}
+
+.color-options + .color-defaults {
+  margin-top: 0.25rem;
+}
+
+.multiline + .color-defaults {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.multiline + .color-defaults .color-option {
+  padding: 0.25rem 0.33rem;
+  font-size: 12px;
+}
+
+.color-options .color-option {
+  position: relative;
+  width: var(--grid-item-size);
+  height: var(--grid-item-size);
+  overflow: hidden;
+  text-indent: 2.1rem;
+}
+
+.color-options .color-option:active,
+.color-options .color-option:focus {
+  outline: none;
+}
+
+.color-options .color-option::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.color-options .color-option:hover::before,
+.color-options .color-option:active::before,
+.color-options .color-option:focus::before {
+  content: "";
+  border: 3px solid rgba(255, 255, 255, 0.75);
+  mix-blend-mode: difference;
+}
+
+.color-options .color-option:active,
+.color-options .color-option:focus {
+  box-shadow: 0 0 0 4px rgba(125, 125, 125, 0.75) inset;
+}
+
+.color-options .color-option.active:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 4px;
+  height: 4px;
+  margin: -2px 0 0 -2px;
+  content: "";
+  border-radius: 4px;
+}
+
+.txt-dark .color-options .color-option.active:after {
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9);
+}
+
+.txt-light .color-options .color-option.active:after {
+  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.9);
+}
+
+/* color-form */
+.color-form {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0.25rem 0 0;
+  font: 12px sans-serif;
+}
+
+.color-form.hex {
+  max-width: initial;
+}
+
+.color-form > * {
+  flex: 1 0 0%;
+  width: 17.5%;
+  max-width: 17.5%;
+}
+
+.color-form label {
+  width: 7.5%;
+  max-width: 7.5%;
+  text-align: center;
+}
+
+.color-input {
+  color: inherit;
+  text-align: right;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  outline: none;
+}
+
+.color-input.hex {
+  width: 92.5%;
+  max-width: 92.5%;
+  /* width: calc(100% - 4% - 1rem); */
+}
+
+.color-input:active,
+.color-input:focus {
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.33);
+}
+
+/* visual control */
+.visual-control {
+  height: 150px;
+}
+
+.visual-control1 {
+  width: 150px;
+}
+
+.visual-control2,
+.visual-control3 {
+  width: 21px;
+  cursor: ns-resize;
+}
+
+@media (min-width: 578px) {
+  .visual-control {
+    height: 230px;
+  }
+
+  .visual-control1 {
+    width: 230px;
+  }
+}
+@media (min-width: 1200px) {
+  .visual-control {
+    height: 300px;
+  }
+
+  .visual-control1 {
+    width: 300px;
+  }
+}
+.color-control {
+  position: relative;
+  display: inline-block;
+}
+
+.color-slider {
+  left: 0;
+  width: calc(100% - 2px);
+  cursor: ns-resize;
+}
+
+.color-control + .color-control {
+  margin-left: 0.5rem;
+}
+
+/* knob */
+.knob {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 7px;
+  user-select: none;
+  background-color: #000;
+  border: 1px solid #fff;
+  border-radius: 5px;
+  outline: none;
+  will-change: transform;
+}
+
+.knob:hover {
+  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.5);
+}
+
+.knob:focus,
+.knob:active {
+  z-index: 1;
+  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
+}
+
+/* color-pointer */
+.color-pointer {
+  width: 7px;
+  background-color: transparent;
+  border: 0;
+}
+
+.txt-dark .color-pointer {
+  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.5);
+}
+
+.txt-light .color-pointer {
+  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5);
+}
+
+.txt-dark .color-pointer:hover {
+  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.75);
+}
+
+.txt-light .color-pointer:hover {
+  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.75);
+}
+
+.txt-dark .color-pointer:focus,
+.txt-dark .color-pointer:active {
+  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
+}
+
+.txt-light .color-pointer:focus,
+.txt-light .color-pointer:active {
+  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.9);
+}
+
+/* utility */
+.v-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
 }