lightning-base-components 1.18.7-ssr → 1.18.8-alpha

package/src/lightning/input/input-checkbox.slds.css

@@ -1,395 +0,0 @@
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-:host([data-render-mode="shadow"]) {
-  /**
-   * Host mapping to composed sds-icon
-   *
-   * Static fallbacks in place for accessibility
-   */
-  --sds-c-icon-color-background: var(
-    --sds-c-inputcheckbox-color-background,
-    var(--sds-s-input-color-background, var(--sds-g-color-neutral-base-1))
-  );
-  --sds-c-icon-color-foreground: var(--sds-c-inputcheckbox-mark-color-foreground, transparent);
-  --sds-c-icon-color-border: var(
-    --sds-c-inputcheckbox-color-border,
-    var(--sds-s-input-color-border, var(--sds-g-color-neutral-base-contrast-4))
-  );
-  --sds-c-icon-sizing: var(--sds-c-inputcheckbox-sizing, 1rem);
-  --sds-c-icon-spacing: var(--sds-c-inputcheckbox-spacing);
-  --sds-c-icon-radius-border: var(--sds-c-inputcheckbox-radius-border, var(--sds-s-input-radius-border));
-}
-
-:host([data-render-mode="shadow"]:hover) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(--sds-c-inputcheckbox-mark-color-foreground-hover);
-  --sds-c-inputcheckbox-color-background: var(
-    --sds-c-inputcheckbox-color-background-hover,
-    var(--sds-s-input-color-background-hover)
-  );
-  --sds-c-inputcheckbox-color-border: var(
-    --sds-c-inputcheckbox-color-border-hover,
-    var(--sds-s-input-color-border-hover)
-  );
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-hover);
-}
-
-:host([data-render-mode="shadow"][checked]) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(
-    --sds-c-inputcheckbox-mark-color-foreground-checked,
-    var(--sds-g-color-neutral-base-1)
-  );
-  --sds-c-inputcheckbox-color-background: var(
-    --sds-c-inputcheckbox-color-background-checked,
-    var(--sds-g-color-neutral-base-contrast-4)
-  );
-  --sds-c-inputcheckbox-color-border: var(
-    --sds-c-inputcheckbox-color-border-checked,
-    var(--sds-g-color-neutral-base-contrast-4)
-  );
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-checked);
-}
-
-:host([data-render-mode="shadow"][checked]:hover) {
-  --sds-c-inputcheckbox-mark-color-foreground-checked: var(
-    --sds-c-inputcheckbox-mark-color-foreground-checked-hover
-  );
-  --sds-c-inputcheckbox-color-background-checked: var(--sds-c-inputcheckbox-color-background-checked-hover);
-  --sds-c-inputcheckbox-color-border-checked: var(--sds-c-inputcheckbox-color-border-checked-hover);
-  --sds-c-inputcheckbox-label-color-checked: var(
-    --sds-c-inputcheckbox-label-color-checked-hover,
-    var(--sds-c-inputcheckbox-label-color-hover)
-  );
-}
-
-:host([data-render-mode="shadow"][indeterminate]) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(
-    --sds-c-inputcheckbox-mark-color-foreground-indeterminate,
-    #fff
-  );
-  --sds-c-inputcheckbox-color-background: var(
-    --sds-c-inputcheckbox-color-background-indeterminate,
-    var(--sds-s-input-color-background, #111)
-  );
-  --sds-c-inputcheckbox-color-border: var(
-    --sds-c-inputcheckbox-color-border-indeterminate,
-    var(--sds-s-input-color-border, #111)
-  );
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-indeterminate);
-}
-
-:host([data-render-mode="shadow"][indeterminate]:hover) {
-  --sds-c-inputcheckbox-mark-color-foreground-indeterminate: var(
-    --sds-c-inputcheckbox-mark-color-foreground-indeterminate-hover
-  );
-  --sds-c-inputcheckbox-color-background-indeterminate: var(
-    --sds-c-inputcheckbox-color-background-indeterminate-hover
-  );
-  --sds-c-inputcheckbox-color-border-indeterminate: var(
-    --sds-c-inputcheckbox-color-border-indeterminate-hover
-  );
-  --sds-c-inputcheckbox-label-color-indeterminate: var(
-    --sds-c-inputcheckbox-label-color-indeterminate-hover,
-    var(--sds-c-inputcheckbox-label-color-hover)
-  );
-}
-
-:host([data-render-mode="shadow"][focus-visible]) {
-  --sds-c-inputcheckbox-shadow: var(
-    --sds-c-inputcheckbox-shadow-focus,
-    var(--sds-s-input-shadow-focus, 0 0 4px 1px var(--sds-g-color-palette-blue-50, #0176d3))
-  );
-}
-
-:host([data-render-mode="shadow"][disabled]) {
-  --sds-c-inputcheckbox-color-background: var(
-    --sds-c-inputcheckbox-color-background-disabled,
-    var(--sds-s-input-color-background-disabled, #efefef)
-  );
-
-  /* TODO: Add shared border hook when available: https://github.com/salesforce-ux/salesforce-design-system/issues/272 */
-  --sds-c-inputcheckbox-color-border: var(--sds-c-inputcheckbox-color-border-disabled, #666);
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-disabled);
-}
-
-:host([data-render-mode="shadow"][error]) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(--sds-c-inputcheckbox-mark-color-foreground-error);
-  --sds-c-inputcheckbox-color-background: var(--sds-c-inputcheckbox-color-background-error);
-  --sds-c-inputcheckbox-color-border: var(--sds-c-inputcheckbox-color-border-error);
-  --sds-c-inputcheckbox-label-color: var(--sds-c-inputcheckbox-label-color-error);
-}
-
-:host([data-render-mode="shadow"][disabled][checked]) {
-  --sds-c-inputcheckbox-mark-color-foreground: var(
-    --sds-c-inputcheckbox-mark-color-foreground-disabled,
-    #666
-  );
-}
-
-:host([data-render-mode="shadow"][error][focus-visible]) {
-  --sds-c-inputcheckbox-shadow: var(
-    --sds-c-inputcheckbox-shadow-error-focus,
-    0 0 4px 1px var(--sds-g-color-palette-blue-50, #0176d3)
-  );
-}
-
-:host([data-render-mode="shadow"]) [part~='input-checkbox'] {
-  display: inline-flex;
-  align-items: center;
-}
-
-:host([data-render-mode="shadow"]) [part~='indicator'] {
-  display: inline-flex;
-  align-items: center;
-  box-shadow: var(--sds-c-inputcheckbox-shadow, var(--sds-s-input-shadow));
-}
-
-/**
- * Size and position the input on top of our icon for accessibility
- */
-
-:host([data-render-mode="shadow"]) [part~='checkbox'] {
-  position: absolute;
-  height: calc(
-    var(--sds-c-inputcheckbox-sizing, 1rem) + (var(--sds-c-inputcheckbox-sizing-border, 1px) * 2) +
-      var(--sds-c-inputcheckbox-spacing, 0px)
-  );
-  width: calc(
-    var(--sds-c-inputcheckbox-sizing, 1rem) + (var(--sds-c-inputcheckbox-sizing-border, 1px) * 2) +
-      var(--sds-c-inputcheckbox-spacing, 0px)
-  );
-  opacity: 0.00001;
-}
-
-:host([data-render-mode="shadow"]) [part~='label'] {
-  padding-inline-start: var(--sds-c-inputcheckbox-label-spacing-inline-start);
-  color: var(--sds-c-inputcheckbox-label-color);
-}
-
-/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
-  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
-
-@supports (--styling-hooks: '') {
-  /**
-     * Base
-     */
-  :host([data-render-mode="shadow"]) [part~='input-checkbox'] {
-    /* Label */
-    --sds-c-inputcheckbox-label-spacing-inline-start: var(
-      --slds-c-inputcheckbox-label-spacing-inline-start,
-      var(--sds-g-spacing-2, 0.5rem)
-    );
-
-    /* We need 'flex' instead of SDS's 'inline-flex' for the responsive label-inline variant */
-    display: flex;
-  }
-
-  /**
-     * Label Container
-     */
-  :host([data-render-mode="shadow"]) [part~='label-container'] {
-    display: inline-flex;
-    align-items: center;
-
-    /* Accounts for help-text in same row as label */
-    padding-inline-end: var(--sds-g-spacing-1, 0.25rem);
-  }
-
-  /**
-     * Label
-     *
-     * Add [part~='input-checkbox'] to increase specificity and
-     * avoid collisions with other components using [part~='label'] (e.g. slds-input-text)
-     */
-  :host([data-render-mode="shadow"]) [part~='input-checkbox'] [part~='label'] {
-    color: var(--slds-c-inputcheckbox-label-color, var(--sds-g-color-neutral-base-30, #444444));
-    font-size: var(--sds-g-font-scale-neg-2, 0.8125rem);
-    margin-block-end: 0;
-    padding-block-start: calc(var(--sds-g-spacing-1, 0.25rem) / 2);
-  }
-
-  /**
-     * Checkbox
-     *
-     * Hidden from view, see Indicator for visual faux checkbox.
-     */
-  :host([data-render-mode="shadow"]) [part~='checkbox'] {
-    width: 1px;
-    height: 1px;
-    border: 0;
-    clip: rect(0 0 0 0);
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    pointer-events: auto;
-  }
-
-  /**
-     * Checkbox Indicator
-     *
-     * ┌────────────────────┐  ┌─────────────────────┐
-     * │      sds-icon      │  │   Faux via <span>   │
-     * └────────────────────┘  └─────────────────────┘
-     *           ▲                        ▲
-     * ┌────────────────────┐  ┌─────────────────────┐
-     * │ sds-input-checkbox │  │ slds-input-checkbox │
-     * └────────────────────┘  └─────────────────────┘
-     *
-     * sds-input-checkbox uses sds-icon for its visual checkbox indicator. SLDS
-     * + LBC uses a styled <span>. Due to this divergence, we require custom CSS.
-     */
-  :host([data-render-mode="shadow"]) [part~='indicator'] {
-    position: relative;
-    width: var(--slds-c-inputcheckbox-sizing, 1rem);
-    height: var(--slds-c-inputcheckbox-sizing, 1rem);
-    border-radius: var(--slds-c-inputcheckbox-radius-border, var(--sds-g-radius-border-1, 0.125rem));
-    border: var(--slds-c-inputcheckbox-sizing-border, var(--sds-g-sizing-border-1, 1px)) solid
-      var(--slds-c-inputcheckbox-color-border, var(--sds-g-color-neutral-base-80, #c9c9c9));
-    background-color: var(--slds-c-inputcheckbox-color-background, var(--sds-g-color-neutral-base-100, #ffffff));
-    box-shadow: var(--slds-c-inputcheckbox-shadow);
-    transition: border 0.1s linear, background-color 0.1s linear;
-  }
-
-  /**
-     * Checked
-     */
-  :host([data-render-mode="shadow"][checked]) [part~='indicator']::after {
-    content: '';
-    height: calc(var(--slds-c-inputcheckbox-sizing, 1rem) / 4);
-    width: calc(var(--slds-c-inputcheckbox-sizing, 1rem) / 2);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
-    border-bottom: 2px solid
-      var(--slds-c-inputcheckbox-mark-color-foreground, var(--sds-g-color-brand-base-50, #0176d3));
-    border-left: 2px solid var(--slds-c-inputcheckbox-mark-color-foreground, var(--sds-g-color-brand-base-50, #0176d3));
-  }
-
-  :host([data-render-mode="shadow"][checked]) [part~='indicator'] {
-    --slds-c-inputcheckbox-color-background: var(--slds-c-inputcheckbox-color-background-checked);
-    --slds-c-inputcheckbox-color-border: var(--slds-c-inputcheckbox-color-border-checked);
-  }
-
-  /**
-     * Disabled
-     */
-  :host([data-render-mode="shadow"][disabled]) [part~='indicator'] {
-    --slds-c-inputcheckbox-color-background: var(
-      --slds-c-inputcheckbox-color-background-disabled,
-      var(--sds-g-color-neutral-base-95, #f3f3f3)
-    );
-    --slds-c-inputcheckbox-color-border: var(--slds-c-inputcheckbox-color-border-disabled);
-    --slds-c-inputcheckbox-mark-color-foreground: var(
-      --slds-c-inputcheckbox-mark-color-foreground-disabled,
-      var(--sds-g-color-neutral-base-60, #939393)
-    );
-  }
-
-  /**
-     * Focused
-     */
-  :host([data-render-mode="shadow"]:focus-within) [part~='indicator'] {
-    --slds-c-inputcheckbox-color-background: var(--slds-c-inputcheckbox-color-background-focus);
-    --slds-c-inputcheckbox-color-border: var(
-      --slds-c-inputcheckbox-color-border-focus,
-      var(--sds-g-color-brand-base-50, #0176d3)
-    );
-    --slds-c-inputcheckbox-shadow: var(
-      --slds-c-inputcheckbox-shadow-focus,
-      0 0 3px var(--sds-g-color-brand-base-50, #0176d3)
-    );
-  }
-
-  /**
-     * Invalid
-     */
-  :host([data-render-mode="shadow"][invalid]) [part~='indicator'] {
-    --slds-c-inputcheckbox-color-background: var(--slds-c-inputcheckbox-color-background-invalid);
-    --slds-c-inputcheckbox-sizing-border: var(
-      --slds-c-inputcheckbox-sizing-border-invalid,
-      var(--sds-g-sizing-border-2, 2px)
-    );
-    --slds-c-inputcheckbox-color-border: var(
-      --slds-c-inputcheckbox-color-border-invalid,
-      var(--sds-g-color-error-base-50, #ea001e)
-    );
-    --slds-c-inputcheckbox-mark-color-foreground: var(
-      --slds-c-inputcheckbox-mark-color-foreground-invalid,
-      var(--sds-g-color-error-base-50, #ea001e)
-    );
-  }
-
-  :host([data-render-mode="shadow"][invalid]) [part~='help-text'] {
-    color: var(--slds-c-inputcheckbox-helptext-color-invalid, var(--sds-g-color-error-base-50, #ea001e));
-  }
-
-  /**
-     * Label Inline Variant
-     *
-     * @TODO: Remove magic number for MQ
-     */
-  @media (min-width: 48em) {
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='label-container'] {
-      float: left;
-
-      /* TODO: Get rid of these magic numbers */
-      max-width: calc(33% - 1.125rem);
-      padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-      padding-inline-start: var(--sds-g-spacing-1, 0.25rem);
-    }
-
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-checkbox'] {
-      display: block;
-      margin-inline-start: 33%;
-      padding-block: var(--sds-g-spacing-1, 0.25rem);
-      margin-block-end: var(--sds-g-spacing-2, 0.5rem);
-    }
-
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='inline-help'] {
-      float: left;
-      padding-block-start: var(--sds-g-spacing-1, 0.25rem);
-    }
-
-    :host([data-render-mode="shadow"][variant~='label-inline']) [part~='indicator'] {
-      /* @TODO: add change to SDS, removes line-height from display inline */
-      display: block;
-    }
-  }
-
-  /**
-     * Standalone Checkbox
-     *
-     * label-inline & label-stacked uses the "standalone" checkbox that lives outside the label
-     */
-  :host([data-render-mode="shadow"][variant~='label-inline']) [part~='checkbox'],:host([data-render-mode="shadow"][variant~='label-stacked']) [part~='checkbox'] {
-    width: 1rem;
-    height: 1rem;
-    margin: 0;
-    clip: auto;
-    opacity: 0;
-    z-index: 1;
-  }
-}
-
-/**
-   * A temporarily baked-in utility class until SLDS gets a proper utility package.
-   *
-   * This is a hybrid patch between synthetic and native shadow. The ideal final
-   * outcome is the removal of this class and replacing the class with the SLDS
-   * utility package solution.
-   */
-
-:host([data-render-mode="shadow"]) .slds-assistive-text {
-  position: absolute !important;
-  margin: -1px !important;
-  border: 0 !important;
-  padding: 0 !important;
-  width: 1px !important;
-  height: 1px !important;
-  overflow: hidden !important;
-  clip: rect(0 0 0 0) !important;
-  text-transform: none !important;
-  white-space: nowrap !important;
-}