@thednp/color-picker 0.0.1-alpha1 → 0.0.1

package/src/scss/color-picker.scss

@@ -0,0 +1,449 @@
+/* :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: .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);
+  opacity: 0;
+  transition: transform .33s ease, opacity .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: .6rem 1rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border: 0;
+  border-radius: .25rem;
+  outline: none;
+  appearance: none;
+  transition-duration: .33s;
+  transition-property: box-shadow, border;
+}
+.btn-appearance:focus,
+.btn-appearance:hover {
+  box-shadow: 0 0 0 3px rgba(0,0,0,.15);
+}
+
+/* color-preview */
+.color-preview {
+  box-shadow: 0 0 0 1px rgba(120,120,120,.33) inset;
+  direction: ltr; /* color value can never be rtl */
+}
+
+.txt-dark .color-preview {
+  color: rgba(255,255,255,.8);
+}
+.txt-dark .color-preview:focus {
+  box-shadow: 0 0 0 1px rgb(255,255,255) inset, 0 0 0 3px rgba(0,0,0,.15);
+}
+.txt-dark .color-preview::placeholder {
+  color: rgba(255,255,255,.6);
+}
+.txt-light .color-preview {
+  color: rgba(0,0,0,.8);
+}
+.txt-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);
+}
+.txt-light .color-preview::placeholder {
+  color: rgba(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 .25rem;
+  cursor: pointer;
+  border: 0;
+  border-radius: 0 .25rem .25rem 0;
+}
+.txt-light .menu-toggle {
+  background: rgba(0,0,0,.5);
+}
+.txt-light .menu-toggle:focus,
+.txt-light .menu-toggle:focus {
+  background: rgba(0,0,0,.7);
+}
+.txt-dark .menu-toggle {
+  background: rgba(255,255,255,.33);
+}
+.txt-dark .menu-toggle:focus,
+.txt-dark .menu-toggle:focus {
+  background: rgba(255,255,255,.5);
+}
+.menu-toggle svg {
+  width: auto;
+  height: 100%;
+}
+
+/* scrollable */
+.scrollable {
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+.scrollable::-webkit-scrollbar {
+  width: .5rem;
+}
+
+.scrollable::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.scrollable::-webkit-scrollbar-thumb {
+  width: .5rem;
+  background-color: transparent;
+  background-clip: content-box;
+  border: 0;
+}
+
+.scrollable:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(255,255,255,.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; // Firefox
+}
+
+.color-dropdown.menu .color-defaults,
+.color-dropdown.picker .color-controls {
+  display: flex;
+}
+
+.color-dropdown.menu {
+  max-height: 230px;
+}
+
+.color-defaults .color-option {
+  padding: .25rem .5rem;
+  color: inherit;
+}
+
+.color-option {
+  cursor: pointer;
+}
+
+.color-defaults .color-option:focus,
+.color-defaults .color-option:hover {
+  background: rgba(255,255,255,.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 item width / height
+  --grid-fit: 5; // grid columns
+  --grid-gap: .25rem; // grid vertical / horizontal spacing
+  --grid-height: auto; // default height
+  --grid-hover-height: auto; // height on hover
+  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 -.5rem 0 0; // 0.5rem is the scrollbar width
+  overflow-y: scroll;
+  transition: height .33s ease;
+}
+.color-options.scrollable:hover {
+  height: var(--grid-hover-height);
+}
+.color-options + .color-defaults {
+  margin-top: .25rem;
+}
+.multiline + .color-defaults {
+  flex-direction: row;
+  flex-wrap: wrap;
+  .color-option {
+    padding: .25rem .33rem; font-size: 12px;
+  }
+}
+.color-options .color-option {
+  // hide any text
+  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.3,.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,.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,.9);
+}
+.txt-light .color-options .color-option.active:after {
+  box-shadow: 0 0 0 4px rgba(0,0,0,.9);
+}
+
+/* color-form */
+.color-form {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: .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,.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 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: .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,.5);
+}
+.knob:focus,
+.knob:active {
+  z-index: 1;
+  box-shadow: 0 0 0 6px rgba(255,255,255,.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,.5);
+}
+.txt-light .color-pointer {
+  box-shadow: 0 0 0 5px rgba(0,0,0,.5);
+}
+
+.txt-dark .color-pointer:hover {
+  box-shadow: 0 0 0 5px rgba(255,255,255,.75);
+}
+.txt-light .color-pointer:hover {
+  box-shadow: 0 0 0 5px rgba(0,0,0,.75);
+}
+
+.txt-dark .color-pointer:focus,
+.txt-dark .color-pointer:active {
+  box-shadow: 0 0 0 5px rgba(255,255,255,.9);
+}
+.txt-light .color-pointer:focus,
+.txt-light .color-pointer:active {
+  box-shadow: 0 0 0 5px 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;
+}