1. Advisor
  2. @commercetools-uikit/design-system
  3. functions
  4. @commercetools-uikit/design-system.designTokens.borderRadiusForInput
View all @commercetools-uikit/design-system analysis

How to use the @commercetools-uikit/design-system.designTokens.borderRadiusForInput function in @commercetools-uikit/design-system

To help you get started, we’ve selected a few @commercetools-uikit/design-system examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github commercetools / ui-kit / src / components / inputs / localized-rich-text-input / editor.styles.js View on Github external
};

  return css`
    /* avoid wrapping label onto new lines */
    white-space: nowrap;
    flex: 0;
    color: ${overwrittenVars[designTokens.fontColorForInputWhenDisabled]};
    line-height: calc(${vars.sizeHeightInput} - 2 * ${vars.borderRadius1});
    background-color: ${overwrittenVars[
      designTokens.backgroundColorForInputWhenDisabled
    ]};
    border-top-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border-bottom-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border: 1px ${overwrittenVars[designTokens.borderColorForInputWhenDisabled]}
      solid;
    padding: 0 ${vars.spacingS};
    transition: border-color ${vars.transitionStandard},
      background-color ${vars.transitionStandard},
      color ${vars.transitionStandard};
    border-right: 0;
    box-shadow: none;
    appearance: none;
  `;
};
github commercetools / ui-kit / src / components / inputs / localized-text-input / localized-text-input.styles.js View on Github external
...vars,
    ...theme,
  };

  return css`
    /* avoid wrapping label onto new lines */
    flex: 1 0 auto;
    box-sizing: border-box;
    color: ${overwrittenVars[designTokens.fontColorForInputWhenDisabled]};
    height: ${vars.sizeHeightInput};
    line-height: ${vars.sizeHeightInput};
    background-color: ${overwrittenVars[
      designTokens.backgroundColorForInputWhenDisabled
    ]};
    border-top-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border-bottom-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border: 1px ${overwrittenVars[designTokens.borderColorForInputWhenDisabled]}
      solid;
    padding: 0 ${vars.spacingS};
    transition: border-color ${vars.transitionStandard},
      background-color ${vars.transitionStandard},
      color ${vars.transitionStandard};
    border-right: 0;
    box-shadow: none;
    appearance: none;
  `;
};
github commercetools / ui-kit / src / components / inputs / localized-multiline-text-input / translation-input.styles.js View on Github external
...theme,
  };

  return css`
    /* avoid wrapping label onto new lines */
    flex: 1 0 auto;
    color: ${overwrittenVars[designTokens.fontColorForInputWhenDisabled]};
    line-height: calc(${vars.sizeHeightInput} - 2 * ${vars.borderRadius1});
    background-color: ${overwrittenVars[
      designTokens.backgroundColorForInputWhenDisabled
    ]};
    border-top-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border-bottom-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border: 1px ${overwrittenVars[designTokens.borderColorForInputWhenDisabled]}
      solid;
    padding: 0 ${vars.spacingS};
    transition: border-color ${vars.transitionStandard},
      background-color ${vars.transitionStandard},
      color ${vars.transitionStandard};
    border-right: 0;
    box-shadow: none;
    appearance: none;
  `;
};
github commercetools / ui-kit / src / components / inputs / localized-rich-text-input / editor.styles.js View on Github external
const overwrittenVars = {
    ...vars,
    ...theme,
  };

  return css`
    /* avoid wrapping label onto new lines */
    white-space: nowrap;
    flex: 0;
    color: ${overwrittenVars[designTokens.fontColorForInputWhenDisabled]};
    line-height: calc(${vars.sizeHeightInput} - 2 * ${vars.borderRadius1});
    background-color: ${overwrittenVars[
      designTokens.backgroundColorForInputWhenDisabled
    ]};
    border-top-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border-bottom-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border: 1px ${overwrittenVars[designTokens.borderColorForInputWhenDisabled]}
      solid;
    padding: 0 ${vars.spacingS};
    transition: border-color ${vars.transitionStandard},
      background-color ${vars.transitionStandard},
      color ${vars.transitionStandard};
    border-right: 0;
    box-shadow: none;
    appearance: none;
  `;
};
github commercetools / ui-kit / src / components / inputs / localized-multiline-text-input / translation-input.styles.js View on Github external
const getLanguageLabelStyles = (props, theme) => {
  const overwrittenVars = {
    ...vars,
    ...theme,
  };

  return css`
    /* avoid wrapping label onto new lines */
    flex: 1 0 auto;
    color: ${overwrittenVars[designTokens.fontColorForInputWhenDisabled]};
    line-height: calc(${vars.sizeHeightInput} - 2 * ${vars.borderRadius1});
    background-color: ${overwrittenVars[
      designTokens.backgroundColorForInputWhenDisabled
    ]};
    border-top-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border-bottom-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border: 1px ${overwrittenVars[designTokens.borderColorForInputWhenDisabled]}
      solid;
    padding: 0 ${vars.spacingS};
    transition: border-color ${vars.transitionStandard},
      background-color ${vars.transitionStandard},
      color ${vars.transitionStandard};
    border-right: 0;
    box-shadow: none;
    appearance: none;
  `;
};
github commercetools / ui-kit / src / components / inputs / localized-text-input / localized-text-input.styles.js View on Github external
return css`
    /* avoid wrapping label onto new lines */
    flex: 1 0 auto;
    box-sizing: border-box;
    color: ${overwrittenVars[designTokens.fontColorForInputWhenDisabled]};
    height: ${vars.sizeHeightInput};
    line-height: ${vars.sizeHeightInput};
    background-color: ${overwrittenVars[
      designTokens.backgroundColorForInputWhenDisabled
    ]};
    border-top-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border-bottom-left-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border: 1px ${overwrittenVars[designTokens.borderColorForInputWhenDisabled]}
      solid;
    padding: 0 ${vars.spacingS};
    transition: border-color ${vars.transitionStandard},
      background-color ${vars.transitionStandard},
      color ${vars.transitionStandard};
    border-right: 0;
    box-shadow: none;
    appearance: none;
  `;
};
github commercetools / ui-kit / src / components / inputs / time-input / time-input-body.styles.js View on Github external
align-items: center;
    box-sizing: border-box;
    background-color: ${overwrittenVars[designTokens.backgroundColorForInput]};
    border-bottom: 1px solid
      ${overwrittenVars[designTokens.borderColorForInput]};
    border-right: 1px solid ${overwrittenVars[designTokens.borderColorForInput]};
    border-top: 1px solid ${overwrittenVars[designTokens.borderColorForInput]};
    border-left: none;
    height: ${overwrittenVars.sizeHeightInput};
    display: flex;
    padding: ${overwrittenVars.spacingXs};
    border-top-right-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border-bottom-right-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    transition: border-color ${overwrittenVars.transitionStandard};
  `;
  if (props.isDisabled) {
    return [
      baseIconStyles,
      css`
        cursor: not-allowed;
        background-color: ${overwrittenVars[
          designTokens.backgroundColorForInputWhenDisabled
        ]};
        color: ${overwrittenVars[designTokens.fontColorForInputWhenDisabled]};
        border-color: ${overwrittenVars[
          designTokens.borderColorForInputWhenDisabled
        ]};
      `,
github commercetools / ui-kit / src / components / internals / create-select-styles.js View on Github external
const menuListStyles = (props, theme) => base => {
  const overwrittenVars = {
    ...vars,
    ...theme,
  };

  return {
    ...base,
    padding: '0',
    borderRadius: overwrittenVars[designTokens.borderRadiusForInput],
    backgroundColor: overwrittenVars[designTokens.backgroundColorForInput],
  };
};
github commercetools / ui-kit / src / components / inputs / time-input / time-input-body.styles.js View on Github external
};

  const baseIconStyles = css`
    align-items: center;
    box-sizing: border-box;
    background-color: ${overwrittenVars[designTokens.backgroundColorForInput]};
    border-bottom: 1px solid
      ${overwrittenVars[designTokens.borderColorForInput]};
    border-right: 1px solid ${overwrittenVars[designTokens.borderColorForInput]};
    border-top: 1px solid ${overwrittenVars[designTokens.borderColorForInput]};
    border-left: none;
    height: ${overwrittenVars.sizeHeightInput};
    display: flex;
    padding: ${overwrittenVars.spacingXs};
    border-top-right-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    border-bottom-right-radius: ${overwrittenVars[
      designTokens.borderRadiusForInput
    ]};
    transition: border-color ${overwrittenVars.transitionStandard};
  `;
  if (props.isDisabled) {
    return [
      baseIconStyles,
      css`
        cursor: not-allowed;
        background-color: ${overwrittenVars[
          designTokens.backgroundColorForInputWhenDisabled
        ]};
        color: ${overwrittenVars[designTokens.fontColorForInputWhenDisabled]};
        border-color: ${overwrittenVars[
github commercetools / ui-kit / src / components / internals / create-select-styles.js View on Github external
const containerStyles = (props, theme) => (base, state) => {
  const overwrittenVars = {
    ...vars,
    ...theme,
  };

  return {
    ...base,
    fontFamily: 'inherit',
    minHeight: overwrittenVars.sizeHeightInput,
    borderRadius: overwrittenVars[designTokens.borderRadiusForInput],
    borderColor: state.isFocused
      ? overwrittenVars[designTokens.borderColorForInputWhenFocused]
      : base.borderColor,

    boxShadow: state.isFocused ? 'none' : base.boxShadow,
  };
};

@commercetools-uikit/design-system

Core package of the commercetools design system.

GitHub
MIT
Latest version published 10 days ago

Package Health Score

90 / 100
Full package analysis

Popular @commercetools-uikit/design-system functions

Similar packages