@skbkontur/react-ui 4.12.0-theme2022.6 → 4.13.0

package/cjs/components/Button/Button.mixins.js

@@ -59,7 +59,8 @@ borderBottomColor,
 borderWidth)
 {
   var hasGradient = btnBackgroundStart !== btnBackgroundEnd;
-  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-color: ", ";\n    background-image: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n    }\n  "])),
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    &:hover:enabled {\n      background-color: ", ";\n      background-image: ", ";\n      box-shadow: 0 0 0 ", " ", "", ";\n\n      .", " {\n        box-shadow: ", " 0 0 ", ";\n      }\n    }\n  "])),
+
   hasGradient ? "initial" : btnBackground,
   hasGradient ? "linear-gradient(" + btnBackgroundStart + ", " + btnBackgroundEnd + ")" : "none",
   borderWidth, borderColor, borderBottomColor ? ", 0 " + borderWidth + " 0 0 " + borderBottomColor : "",
@@ -68,6 +69,7 @@ borderWidth)
   borderWidth, borderColor);
 
 
+
 };exports.buttonHoverMixin = buttonHoverMixin;
 
 var buttonActiveMixin = function buttonActiveMixin(
@@ -78,9 +80,7 @@ borderTopColor,
 borderWidth,
 arrowBgImage)
 {
-  return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ", " !important; // override :hover styles\n      box-shadow: 0 0 0 ", " ", "", " !important; // override :hover styles\n\n      .", " {\n        box-shadow: ", ";\n      }\n\n      .", " {\n        box-shadow: ", " 0 0 ", ";\n\n        &.", " {\n          background-image: ", ";\n        }\n      }\n    }\n  "])),
-
-
+  return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n    background-image: none;\n    background-color: ", ";\n    box-shadow: 0 0 0 ", " ", "", ";\n\n    .", " {\n      box-shadow: ", ";\n    }\n\n    .", " {\n      box-shadow: ", " 0 0 ", ";\n\n      &.", " {\n        background-image: ", ";\n      }\n    }\n  "])),
 
   btnBackground,
   borderWidth, borderColor, borderTopColor ? ", 0 -" + borderWidth + " 0 0 " + borderTopColor : "",
@@ -97,7 +97,6 @@ arrowBgImage)
 
 
 
-
 };exports.buttonActiveMixin = buttonActiveMixin;
 
 var buttonSizeMixin = function buttonSizeMixin(

package/cjs/components/Button/Button.mixins.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Button.mixins.ts"],"names":["getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","css","globalClasses","arrowHelper","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":"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","sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (\n  fontSize: string,\n  paddingY: string,\n  paddingX: string,\n  fontFamilyCompensation: string,\n  additionalOffset = 0,\n): string => {\n  let paddingTop = paddingY;\n  let paddingBottom = paddingY;\n  const offset = parseInt(fontFamilyCompensation) || 0;\n\n  const shiftUp = (top: string, bottom: string, offset: number) => {\n    return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\n  };\n\n  if (fontSize === '16px' && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\n  }\n  if (additionalOffset && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\n  }\n\n  return `${paddingTop} ${paddingX} ${paddingBottom}`;\n};\n\nexport const buttonUseMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    color: ${color};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 0 ${borderColor};\n    }\n  `;\n};\n\nexport const buttonHoverMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 ${borderColor};\n    }\n  `;\n};\n\nexport const buttonActiveMixin = (\n  btnBackground: string,\n  btnShadow: string,\n  borderColor: string,\n  borderTopColor: string,\n  borderWidth: string,\n  arrowBgImage: string,\n) => {\n  return css`\n    &,\n    &:hover {\n      background-image: none !important; // override :hover styles\n      background-color: ${btnBackground} !important; // override :hover styles\n      box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``} !important; // override :hover styles\n\n      .${globalClasses.innerShadow} {\n        box-shadow: ${btnShadow};\n      }\n\n      .${globalClasses.arrowHelper} {\n        box-shadow: ${borderWidth} 0 0 ${borderColor};\n\n        &.${globalClasses.arrowHelperTop} {\n          background-image: ${arrowBgImage};\n        }\n      }\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\n  fontSize: string,\n  lineHeight: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const buttonSizeMixinIE11 = (\n  fontSize: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n    line-height: normal;\n  `;\n};\n\nexport const arrowOutlineMixin = (\n  insetWidth: string,\n  outlineColor: string,\n  outlineWidth: string,\n  insetColor: string,\n) => {\n  return css`\n    .${globalClasses.arrowHelper} {\n      &.${globalClasses.arrowHelperTop} {\n        box-shadow: inset -${insetWidth} ${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      &.${globalClasses.arrowHelperBottom} {\n        box-shadow: inset -${insetWidth} -${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ${insetWidth};\n        right: ${insetWidth};\n        left: ${insetWidth};\n      }\n      &.${globalClasses.arrowHelperBottom}:before {\n        bottom: ${insetWidth};\n      }\n    }\n  `;\n};\n"]}
+{"version":3,"sources":["Button.mixins.ts"],"names":["getBtnPadding","fontSize","paddingY","paddingX","fontFamilyCompensation","additionalOffset","paddingTop","paddingBottom","offset","parseInt","shiftUp","top","bottom","buttonUseMixin","btnBackground","btnBackgroundStart","btnBackgroundEnd","color","borderColor","borderBottomColor","borderWidth","hasGradient","css","globalClasses","arrowHelper","buttonHoverMixin","buttonActiveMixin","btnShadow","borderTopColor","arrowBgImage","innerShadow","arrowHelperTop","buttonSizeMixin","lineHeight","buttonSizeMixinIE11","arrowOutlineMixin","insetWidth","outlineColor","outlineWidth","insetColor","arrowHelperBottom"],"mappings":"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","sourcesContent":["import { css } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\n\nimport { globalClasses } from './Button.styles';\n\nconst getBtnPadding = (\n  fontSize: string,\n  paddingY: string,\n  paddingX: string,\n  fontFamilyCompensation: string,\n  additionalOffset = 0,\n): string => {\n  let paddingTop = paddingY;\n  let paddingBottom = paddingY;\n  const offset = parseInt(fontFamilyCompensation) || 0;\n\n  const shiftUp = (top: string, bottom: string, offset: number) => {\n    return [shift(top, `${-offset}`), shift(bottom, `${offset}`)];\n  };\n\n  if (fontSize === '16px' && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, offset);\n  }\n  if (additionalOffset && offset) {\n    [paddingTop, paddingBottom] = shiftUp(paddingTop, paddingBottom, additionalOffset);\n  }\n\n  return `${paddingTop} ${paddingX} ${paddingBottom}`;\n};\n\nexport const buttonUseMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  color: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    background-color: ${hasGradient ? `initial` : btnBackground};\n    background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n    color: ${color};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 0 ${borderColor};\n    }\n  `;\n};\n\nexport const buttonHoverMixin = (\n  btnBackground: string,\n  btnBackgroundStart: string,\n  btnBackgroundEnd: string,\n  borderColor: string,\n  borderBottomColor: string,\n  borderWidth: string,\n) => {\n  const hasGradient = btnBackgroundStart !== btnBackgroundEnd;\n  return css`\n    &:hover:enabled {\n      background-color: ${hasGradient ? `initial` : btnBackground};\n      background-image: ${hasGradient ? `linear-gradient(${btnBackgroundStart}, ${btnBackgroundEnd})` : `none`};\n      box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderBottomColor ? `, 0 ${borderWidth} 0 0 ${borderBottomColor}` : ``};\n\n      .${globalClasses.arrowHelper} {\n        box-shadow: ${borderWidth} 0 0 ${borderColor};\n      }\n    }\n  `;\n};\n\nexport const buttonActiveMixin = (\n  btnBackground: string,\n  btnShadow: string,\n  borderColor: string,\n  borderTopColor: string,\n  borderWidth: string,\n  arrowBgImage: string,\n) => {\n  return css`\n    background-image: none;\n    background-color: ${btnBackground};\n    box-shadow: 0 0 0 ${borderWidth} ${borderColor}${borderTopColor ? `, 0 -${borderWidth} 0 0 ${borderTopColor}` : ``};\n\n    .${globalClasses.innerShadow} {\n      box-shadow: ${btnShadow};\n    }\n\n    .${globalClasses.arrowHelper} {\n      box-shadow: ${borderWidth} 0 0 ${borderColor};\n\n      &.${globalClasses.arrowHelperTop} {\n        background-image: ${arrowBgImage};\n      }\n    }\n  `;\n};\n\nexport const buttonSizeMixin = (\n  fontSize: string,\n  lineHeight: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    font-size: ${fontSize};\n    box-sizing: border-box;\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation)};\n    line-height: ${lineHeight};\n  `;\n};\n\nexport const buttonSizeMixinIE11 = (\n  fontSize: string,\n  paddingX: string,\n  paddingY: string,\n  fontFamilyCompensation: string,\n) => {\n  return css`\n    padding: ${getBtnPadding(fontSize, paddingY, paddingX, fontFamilyCompensation, 1)};\n    line-height: normal;\n  `;\n};\n\nexport const arrowOutlineMixin = (\n  insetWidth: string,\n  outlineColor: string,\n  outlineWidth: string,\n  insetColor: string,\n) => {\n  return css`\n    .${globalClasses.arrowHelper} {\n      &.${globalClasses.arrowHelperTop} {\n        box-shadow: inset -${insetWidth} ${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      &.${globalClasses.arrowHelperBottom} {\n        box-shadow: inset -${insetWidth} -${insetWidth} 0 0 ${insetColor}, ${outlineWidth} 0 0 0 ${outlineColor} !important; // override :active styles\n      }\n\n      // don't hide inner outline\n      // and keep the middle-line fix\n      &:before {\n        top: ${insetWidth};\n        right: ${insetWidth};\n        left: ${insetWidth};\n      }\n      &.${globalClasses.arrowHelperBottom}:before {\n        bottom: ${insetWidth};\n      }\n    }\n  `;\n};\n"]}

package/cjs/components/Button/Button.styles.d.ts

@@ -1,99 +1,72 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const globalClasses: {
-    arrowHelper: string;
-    arrowHelperTop: string;
-    arrowHelperBottom: string;
-    caption: string;
-    text: string;
-    innerShadow: string;
-};
-export declare const styles: {
-    root(t: Theme): string;
-    withArrowIconRightSmall(t: Theme): string;
-    withArrowIconRightMedium(t: Theme): string;
-    withArrowIconRightLarge(t: Theme): string;
-    withArrowIconLeftSmall(t: Theme): string;
-    withArrowIconLeftMedium(t: Theme): string;
-    withArrowIconLeftLarge(t: Theme): string;
-    simulatedPress(): string;
-    outline(): string;
-    outlineWarning(t: Theme): string;
-    outlineError(t: Theme): string;
-    outlineLink(): string;
-    outlineLinkWarning(t: Theme): string;
-    outlineLinkError(t: Theme): string;
-    sizeSmall(t: Theme): string;
-    sizeSmallIE11(t: Theme): string;
-    sizeMedium(t: Theme): string;
-    sizeMediumIE11(t: Theme): string;
-    sizeLarge(t: Theme): string;
-    sizeLargeIE11(t: Theme): string;
-    sizeSmallWithIcon(t: Theme): string;
-    sizeMediumWithIcon(t: Theme): string;
-    sizeLargeWithIcon(t: Theme): string;
-    sizeSmallWithIconWithoutText(t: Theme): string;
-    sizeMediumWithIconWithoutText(t: Theme): string;
-    sizeLargeWithIconWithoutText(t: Theme): string;
-    link(t: Theme): string;
-    linkLineHeight(): string;
-    linkLineHeightSafariFallback(): string;
-    linkFocus(t: Theme): string;
-    linkDisabled(t: Theme): string;
-    focus(t: Theme): string;
-    disabled(t: Theme): string;
-    arrowWarning(t: Theme): string;
-    arrowError(t: Theme): string;
-    arrowFocus(t: Theme): string;
-    arrow(): string;
-    arrowLeft(): string;
-    arrowIconRoot(): string;
-    arrowIconRootSmall(t: Theme): string;
-    arrowIconRootMedium(t: Theme): string;
-    arrowIconRootLarge(t: Theme): string;
-    arrowIconLeft(): string;
-    default(t: Theme): string;
-    primary(t: Theme): string;
-    success(t: Theme): string;
-    danger(t: Theme): string;
-    pay(t: Theme): string;
-    text(t: Theme): string;
-    backless(t: Theme): string;
-    checked(t: Theme): string;
-    checked2022(t: Theme): string;
-    checkedFocused(t: Theme): string;
-    checkedDisabled(t: Theme): string;
-    checkedDisabled2022(t: Theme): string;
-    caption(): string;
-    captionLink(): string;
-    captionTranslated(): string;
-    captionDisabled(): string;
-    wrap(t: Theme): string;
-    wrapSmall(t: Theme): string;
-    wrapMedium(t: Theme): string;
-    wrapLarge(t: Theme): string;
-    narrow(): string;
-    noPadding(): string;
-    noRightPadding(): string;
-    iconNoRightMargin(): string;
-    iconLink(t: Theme): string;
-    wrapLink(): string;
-    wrapArrow(): string;
-    wrapArrowLeft(): string;
-    icon(): string;
-    iconSmall(t: Theme): string;
-    iconMedium(t: Theme): string;
-    iconLarge(t: Theme): string;
-    borderless(): string;
-    loading(): string;
-    visibilityHidden(): string;
-};
-export declare const activeStyles: {
-    default(t: Theme): string;
-    primary(t: Theme): string;
-    success(t: Theme): string;
-    danger(t: Theme): string;
-    pay(t: Theme): string;
-    link(t: Theme): string;
-    text(t: Theme): string;
-    backless(t: Theme): string;
-};
+import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    arrowHelper: string;
+    arrowHelperTop: string;
+    arrowHelperBottom: string;
+    caption: string;
+    innerShadow: string;
+};
+export declare const styles: {
+    root(t: Theme): string;
+    outline(): string;
+    outlineWarning(t: Theme): string;
+    outlineError(t: Theme): string;
+    outlineLink(): string;
+    outlineLinkWarning(t: Theme): string;
+    outlineLinkError(t: Theme): string;
+    sizeSmall(t: Theme): string;
+    sizeSmallIE11(t: Theme): string;
+    sizeMedium(t: Theme): string;
+    sizeMediumIE11(t: Theme): string;
+    sizeLarge(t: Theme): string;
+    sizeLargeIE11(t: Theme): string;
+    link(t: Theme): string;
+    linkFocus(t: Theme): string;
+    linkDisabled(t: Theme): string;
+    focus(t: Theme): string;
+    disabled(t: Theme): string;
+    arrowWarning(t: Theme): string;
+    arrowError(t: Theme): string;
+    arrowFocus(t: Theme): string;
+    arrow(): string;
+    arrowLeft(): string;
+    default(t: Theme): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    danger(t: Theme): string;
+    pay(t: Theme): string;
+    checked(t: Theme): string;
+    checkedFocused(t: Theme): string;
+    checkedDisabled(t: Theme): string;
+    caption(): string;
+    captionLink(): string;
+    captionTranslated(): string;
+    captionDisabled(): string;
+    wrap(t: Theme): string;
+    wrapSmall(t: Theme): string;
+    wrapMedium(t: Theme): string;
+    wrapLarge(t: Theme): string;
+    narrow(): string;
+    noPadding(): string;
+    noRightPadding(): string;
+    iconNoRightMargin(): string;
+    iconLink(t: Theme): string;
+    wrapLink(): string;
+    wrapArrow(): string;
+    wrapArrowLeft(): string;
+    icon(): string;
+    iconSmall(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconLarge(t: Theme): string;
+    borderless(): string;
+    loading(): string;
+    visibilityHidden(): string;
+};
+export declare const activeStyles: {
+    default(t: Theme): string;
+    primary(t: Theme): string;
+    success(t: Theme): string;
+    danger(t: Theme): string;
+    pay(t: Theme): string;
+    link(t: Theme): string;
+};