lightning-base-components 1.26.4-alpha → 1.27.2-alpha

package/src/lightning/colorPickerCustom/color-picker-custom.slds.css

@@ -1,5 +1,4 @@
 
-
 :host([data-render-mode="shadow"]) [part='color-picker-custom'] .slds-assistive-text {
   position: absolute !important;
   margin: -1px !important;
@@ -13,213 +12,215 @@
   white-space: nowrap !important;
 }
 
-  :host([data-render-mode="shadow"]) [part='color-picker-custom'] {
-    --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-1);
-    --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-1);
-    
-    padding-block: var(--slds-g-spacing-1);
-    padding-inline: 0;
-    
-  }
-
-  /* needed to change the size of the hex input */
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__input-custom-hex {
-    flex: none;
-    width: 4.2rem;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-m-bottom_small {
-    margin-block-end: var(--slds-g-spacing-3);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__range-indicator,:host([data-render-mode="shadow"]) 
-  .slds-color-picker__range-indicator:focus{
-    --_slds-c-color-picker-half-spacing: calc(0.75rem * 0.5);
-    /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
-    transform: translate3d(
-          calc(var(--_slds-c-color-picker-half-spacing) * -1),
-          var(--_slds-c-color-picker-half-spacing),
-          0);
-    cursor: pointer;
-    position: absolute;
-    height: var(--slds-g-sizing-4);
-    width: var(--slds-g-sizing-4);
-    border: var(--slds-g-sizing-border-2) solid var(--slds-g-color-surface-container-1);
-    border-radius: var(--slds-g-radius-border-circle);
-    box-shadow: 0 2px 4px 4px rgba(0, 0, 0, 16%), inset 0 2px 4px 4px rgba(0, 0, 0, 16%);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__range-indicator:focus {
-    outline: none;
-    box-shadow: var(--slds-s-input-shadow-focus);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-and-preview {
-    display: flex;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider {
-    appearance: none;
-    cursor: pointer;
-    flex: 1;
-    margin: 0;
-    padding: 0;
-    height: var(--slds-g-spacing-5);
-    width: 100%;
-    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
-    border-radius: var(--slds-g-spacing-1);
-    background: linear-gradient(
-      to right,
-      red,
-      #ff1500,
-      #ff2b00,
-      #ff4000,
-      #f50,
-      #ff6a00,
-      #ff8000,
-      #ff9500,
-      #fa0,
-      #ffbf00,
-      #ffd500,
-      #ffea00,
-      yellow,
-      #eaff00,
-      #d5ff00,
-      #bfff00,
-      #af0,
-      #95ff00,
-      #80ff00,
-      #6aff00,
-      #5f0,
-      #40ff00,
-      #2bff00,
-      #15ff00,
-      lime,
-      #00ff15,
-      #00ff2b,
-      #00ff40,
-      #0f5,
-      #00ff6a,
-      #00ff80,
-      #00ff95,
-      #0fa,
-      #00ffbf,
-      #00ffd5,
-      #00ffea,
-      aqua,
-      #00eaff,
-      #00d5ff,
-      deepskyblue,
-      #0af,
-      #0095ff,
-      #0080ff,
-      #006aff,
-      #05f,
-      #0040ff,
-      #002bff,
-      #0015ff,
-      blue,
-      #1500ff,
-      #2b00ff,
-      #4000ff,
-      #50f,
-      #6a00ff,
-      #8000ff,
-      #9500ff,
-      #a0f,
-      #bf00ff,
-      #d500ff,
-      #ea00ff,
-      fuchsia,
-      #ff00ea,
-      #ff00d5,
-      #ff00bf,
-      #f0a,
-      #ff0095,
-      #ff0080,
-      #ff006a,
-      #f05,
-      #ff0040,
-      #ff002b,
-      #ff0015
-    );
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-webkit-slider-thumb {
-    appearance: none;
-    cursor: pointer;
-    height: calc(var(--slds-g-spacing-5) - (1px * 2));
-    width: 0.375rem;
-    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);
-    border-radius: var(--slds-g-radius-border-1);
-    background: var(--slds-g-color-surface-container-2);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-moz-range-thumb {
-    appearance: none;
-    box-sizing: border-box; /* Note: FF did not inherit border-box from parent. Initially set to content-box, it needs to set manually here */
-    cursor: pointer;
-    height: calc(var(--slds-g-spacing-5) - (1px * 2));
-    width: 0.375rem;
-    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);
-    border-radius: var(--slds-g-radius-border-1);
-    background: var(--slds-g-color-neutral-base-95);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 5px var(--slds-g-color-accent-2);
-    border: none;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-moz-range-thumb {
-    box-shadow: 0 0 5px var(--slds-g-color-accent-2);
-    border: none;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-webkit-slider-thumb {
-    box-shadow: 0 0 5px var(--slds-g-color-accent-2);
-    border: none;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-moz-range-thumb {
-    box-shadow: 0 0 5px var(--slds-g-color-accent-2);
-    border: none;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus {
-    outline: none;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-swatch {
-    margin-inline-start: var(--slds-g-spacing-1);
-    height: var(--slds-g-spacing-5);
-    width: var(--slds-g-spacing-5);
-    border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
-    border-radius: var(--slds-g-spacing-1);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs {
-    display: flex;
-    padding-block-start: var(--slds-g-spacing-2);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs > div {
-    margin-inline-end: var(--slds-g-spacing-1);
-    display: inline-block;
-  }
-
-  :host([data-render-mode="shadow"]) .slds-has-error {
-    border-color: var(--slds-g-color-border-error-1);
-  }
-
-  :host([data-render-mode="shadow"]) .slds-form-element__help {
-    padding-block-start: var(--slds-g-spacing-2);
-    padding-inline-start: var(--slds-g-spacing-1);
-    color: var(--slds-g-color-error-1);
-    font-size: var(--slds-g-spacing-3);
-  }
-
-  :host([data-render-mode="shadow"]) abbr[title] {
-    text-decoration: none;
-  }
+:host([data-render-mode="shadow"]) [part='color-picker-custom'] {
+  --slds-c-inputtext-spacing-inlinestart: var(--slds-g-spacing-1);
+  --slds-c-inputtext-spacing-inlineend: var(--slds-g-spacing-1);
+
+  padding-block: var(--slds-g-spacing-1);
+  padding-inline: 0;
+}
+
+/* needed to change the size of the hex input */
+
+:host([data-render-mode="shadow"]) .slds-color-picker__input-custom-hex {
+  flex: none;
+  width: 4.2rem;
+}
+
+:host([data-render-mode="shadow"]) .slds-m-bottom_small {
+  margin-block-end: var(--slds-g-spacing-3);
+}
+
+:host([data-render-mode="shadow"]) .slds-color-picker__range-indicator,:host([data-render-mode="shadow"]) 
+.slds-color-picker__range-indicator:focus {
+  --_slds-c-color-picker-half-spacing: calc(0.75rem * 0.5);
+  /* stylelint-disable sds-stylelint-plugin/styling-hooks-pattern */
+  transform: translate3d(
+    calc(var(--_slds-c-color-picker-half-spacing) * -1),
+    var(--_slds-c-color-picker-half-spacing),
+    0
+  );
+  cursor: pointer;
+  position: absolute;
+  height: var(--slds-g-sizing-4);
+  width: var(--slds-g-sizing-4);
+  border: var(--slds-g-sizing-border-2) solid var(--slds-g-color-surface-container-1);
+  border-radius: var(--slds-g-radius-border-circle);
+  box-shadow:
+    0 2px 4px 4px rgba(0, 0, 0, 16%),
+    inset 0 2px 4px 4px rgba(0, 0, 0, 16%);
+}
+
+:host([data-render-mode="shadow"]) .slds-color-picker__range-indicator:focus {
+  outline: none;
+  box-shadow: var(--slds-s-input-shadow-focus);
+}
+
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-and-preview {
+  display: flex;
+}
+
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider {
+  appearance: none;
+  cursor: pointer;
+  flex: 1;
+  margin: 0;
+  padding: 0;
+  height: var(--slds-g-spacing-5);
+  width: 100%;
+  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+  border-radius: var(--slds-g-spacing-1);
+  background: linear-gradient(
+    to right,
+    red,
+    #ff1500,
+    #ff2b00,
+    #ff4000,
+    #f50,
+    #ff6a00,
+    #ff8000,
+    #ff9500,
+    #fa0,
+    #ffbf00,
+    #ffd500,
+    #ffea00,
+    yellow,
+    #eaff00,
+    #d5ff00,
+    #bfff00,
+    #af0,
+    #95ff00,
+    #80ff00,
+    #6aff00,
+    #5f0,
+    #40ff00,
+    #2bff00,
+    #15ff00,
+    lime,
+    #00ff15,
+    #00ff2b,
+    #00ff40,
+    #0f5,
+    #00ff6a,
+    #00ff80,
+    #00ff95,
+    #0fa,
+    #00ffbf,
+    #00ffd5,
+    #00ffea,
+    aqua,
+    #00eaff,
+    #00d5ff,
+    deepskyblue,
+    #0af,
+    #0095ff,
+    #0080ff,
+    #006aff,
+    #05f,
+    #0040ff,
+    #002bff,
+    #0015ff,
+    blue,
+    #1500ff,
+    #2b00ff,
+    #4000ff,
+    #50f,
+    #6a00ff,
+    #8000ff,
+    #9500ff,
+    #a0f,
+    #bf00ff,
+    #d500ff,
+    #ea00ff,
+    fuchsia,
+    #ff00ea,
+    #ff00d5,
+    #ff00bf,
+    #f0a,
+    #ff0095,
+    #ff0080,
+    #ff006a,
+    #f05,
+    #ff0040,
+    #ff002b,
+    #ff0015
+  );
+}
+
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-webkit-slider-thumb {
+  appearance: none;
+  cursor: pointer;
+  height: calc(var(--slds-g-spacing-5) - (1px * 2));
+  width: 0.375rem;
+  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);
+  border-radius: var(--slds-g-radius-border-1);
+  background: var(--slds-g-color-surface-container-2);
+}
+
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider::-moz-range-thumb {
+  appearance: none;
+  box-sizing: border-box; /* Note: FF did not inherit border-box from parent. Initially set to content-box, it needs to set manually here */
+  cursor: pointer;
+  height: calc(var(--slds-g-spacing-5) - (1px * 2));
+  width: 0.375rem;
+  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-2);
+  border-radius: var(--slds-g-radius-border-1);
+  background: var(--slds-g-color-neutral-base-95);
+}
+
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 5px var(--slds-g-color-accent-2);
+  border: none;
+}
+
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus::-moz-range-thumb {
+  box-shadow: 0 0 5px var(--slds-g-color-accent-2);
+  border: none;
+}
+
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-webkit-slider-thumb {
+  box-shadow: 0 0 5px var(--slds-g-color-accent-2);
+  border: none;
+}
+
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:active::-moz-range-thumb {
+  box-shadow: 0 0 5px var(--slds-g-color-accent-2);
+  border: none;
+}
+
+:host([data-render-mode="shadow"]) .slds-color-picker__hue-slider:focus {
+  outline: none;
+}
+
+:host([data-render-mode="shadow"]) .slds-swatch {
+  margin-inline-start: var(--slds-g-spacing-1);
+  height: var(--slds-g-spacing-5);
+  width: var(--slds-g-spacing-5);
+  border: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
+  border-radius: var(--slds-g-spacing-1);
+}
+
+:host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs {
+  display: flex;
+  padding-block-start: var(--slds-g-spacing-2);
+}
+
+:host([data-render-mode="shadow"]) .slds-color-picker__custom-inputs > div {
+  margin-inline-end: var(--slds-g-spacing-1);
+  display: inline-block;
+}
+
+:host([data-render-mode="shadow"]) .slds-has-error {
+  border-color: var(--slds-g-color-border-error-1);
+}
+
+:host([data-render-mode="shadow"]) .slds-form-element__help {
+  padding-block-start: var(--slds-g-spacing-2);
+  padding-inline-start: var(--slds-g-spacing-1);
+  color: var(--slds-g-color-error-1);
+  font-size: var(--slds-g-spacing-3);
+}
+
+:host([data-render-mode="shadow"]) abbr[title] {
+  text-decoration: none;
+}