@esri/calcite-components 1.4.0-next.1 → 1.4.0-next.11

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

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -110,67 +138,48 @@
   opacity: 1;
 }
 
+:host([scale=s]) {
+  --calcite-color-picker-spacing: 8px;
+}
 :host([scale=s]) .container {
   inline-size: 160px;
 }
 :host([scale=s]) .saved-colors {
-  grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
-}
-:host([scale=s]) .channels {
-  flex-direction: column;
-}
-:host([scale=s]) .channel {
-  inline-size: 100%;
-  margin-block-end: 4px;
-}
-:host([scale=s]) .channel:last-child {
-  margin-block-end: 0;
+  gap: 0.25rem;
+  grid-template-columns: repeat(auto-fill, 20px);
 }
 
+:host([scale=m]) {
+  --calcite-color-picker-spacing: 12px;
+}
 :host([scale=m]) .container {
   inline-size: 272px;
 }
 
-:host([scale=l]) .header {
-  padding-block-end: 0px;
-}
-
 :host([scale=l]) {
+  --calcite-color-picker-spacing: 16px;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 :host([scale=l]) .container {
   inline-size: 464px;
 }
-:host([scale=l]) .color-field-and-slider {
-  margin-block-end: -20px;
-}
-:host([scale=l]) .section {
-  padding-block: 0 16px;
-  padding-inline: 16px;
-}
 :host([scale=l]) .section:first-of-type {
-  padding-block-start: 16px;
+  padding-block-start: var(--calcite-color-picker-spacing);
 }
 :host([scale=l]) .saved-colors {
-  grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
-  grid-gap: 12px;
-  padding-block-start: 16px;
+  grid-template-columns: repeat(auto-fill, 32px);
 }
 :host([scale=l]) .control-section {
   flex-wrap: nowrap;
   align-items: baseline;
-}
-:host([scale=l]) .control-section > :nth-child(2) {
-  margin-inline-start: 12px;
+  flex-wrap: wrap;
 }
 :host([scale=l]) .color-hex-options {
   display: flex;
   flex-shrink: 1;
   flex-direction: column;
   justify-content: space-around;
-  min-block-size: 98px;
-  inline-size: 160px;
 }
 :host([scale=l]) .color-mode-container {
   flex-shrink: 3;
@@ -182,15 +191,18 @@
   border: 1px solid var(--calcite-ui-border-1);
 }
 
-.color-field-and-slider-wrap {
+.control-and-scope {
   position: relative;
+  display: flex;
+  cursor: pointer;
+  touch-action: none;
 }
 
 .scope {
   position: absolute;
+  z-index: 1;
   font-size: var(--calcite-font-size--1);
   outline-color: transparent;
-  outline-offset: 14px;
 }
 .scope:focus {
   outline: 2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));
@@ -208,14 +220,11 @@
   outline-offset: 16px;
 }
 
-.color-field-and-slider {
-  margin-block-end: -16px;
-  touch-action: none;
-}
-.color-field-and-slider--interactive {
-  cursor: pointer;
+.hex-and-channels-group {
+  inline-size: 100%;
 }
 
+.hex-and-channels-group,
 .control-section {
   display: flex;
   flex-direction: row;
@@ -223,11 +232,24 @@
 }
 
 .section {
-  padding-block: 0 12px;
-  padding-inline: 12px;
+  padding-block: 0 var(--calcite-color-picker-spacing);
+  padding-inline: var(--calcite-color-picker-spacing);
 }
 .section:first-of-type {
-  padding-block-start: 12px;
+  padding-block-start: var(--calcite-color-picker-spacing);
+}
+
+.sliders {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin-inline-start: var(--calcite-color-picker-spacing);
+}
+
+.preview-and-sliders {
+  display: flex;
+  align-items: center;
+  padding: var(--calcite-color-picker-spacing);
 }
 
 .color-hex-options,
@@ -239,30 +261,43 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-block-end: 0.25rem;
   color: var(--calcite-ui-text-1);
 }
 
-.header--hex,
 .color-mode-container {
-  padding-block-start: 12px;
+  padding-block-start: var(--calcite-color-picker-spacing);
 }
 
 .channels {
   display: flex;
-  justify-content: space-between;
+  row-gap: 0.125rem;
+}
+
+.channel[data-channel-index="3"] {
+  inline-size: 159px;
+}
+
+:host([scale=s]) .channels {
+  flex-wrap: wrap;
+}
+:host([scale=s]) .channel {
+  flex-basis: 30%;
+  flex-grow: 1;
+}
+:host([scale=s]) .channel[data-channel-index="3"] {
+  inline-size: unset;
+  margin-inline-start: unset;
 }
 
-.channel {
-  inline-size: 31%;
+:host([scale=l]) .channel[data-channel-index="3"] {
+  inline-size: 131px;
 }
 
 .saved-colors {
-  padding-block-start: 12px;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
-  grid-gap: 8px;
-  inline-size: 100%;
+  gap: 0.5rem;
+  padding-block-start: var(--calcite-color-picker-spacing);
+  grid-template-columns: repeat(auto-fill, 24px);
 }
 
 .saved-colors-buttons {