suomifi-ui-components/dist/esm/core/Form/Checkbox/Checkbox.baseStyles.js

Suomi.fi UI component library

import { __makeTemplateObject } from 'tslib';
import { css } from 'styled-components';
import { element, font, fixInternalMargins } from '../../theme/reset/index.js';
import { buildSpacingCSS } from '../../theme/utils/spacing.js';

var checkedStyles = function checkedStyles(theme) {
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.fi-checkbox--checked {\n    & .fi-checkbox_label {\n      &::before {\n        border-color: ", ";\n        background-color: ", ";\n      }\n      & > .fi-checkbox_icon .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n    &.fi-checkbox--disabled {\n      & .fi-checkbox_label {\n        &::before {\n          border-color: ", ";\n          background-color: ", ";\n        }\n        & > .fi-checkbox_icon .fi-icon-base-fill {\n          fill: ", ";\n        }\n      }\n    }\n    &.fi-checkbox--error {\n      & .fi-checkbox_label {\n        &::before {\n          border-color: ", ";\n          background-color: ", ";\n          border-width: 2px;\n        }\n        & > .fi-checkbox_icon .fi-icon-base-fill {\n          fill: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  &.fi-checkbox--checked {\n    & .fi-checkbox_label {\n      &::before {\n        border-color: ", ";\n        background-color: ", ";\n      }\n      & > .fi-checkbox_icon .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n    &.fi-checkbox--disabled {\n      & .fi-checkbox_label {\n        &::before {\n          border-color: ", ";\n          background-color: ", ";\n        }\n        & > .fi-checkbox_icon .fi-icon-base-fill {\n          fill: ", ";\n        }\n      }\n    }\n    &.fi-checkbox--error {\n      & .fi-checkbox_label {\n        &::before {\n          border-color: ", ";\n          background-color: ", ";\n          border-width: 2px;\n        }\n        & > .fi-checkbox_icon .fi-icon-base-fill {\n          fill: ", ";\n        }\n      }\n    }\n  }\n"])), theme.colors.highlightBase, theme.colors.highlightBase, theme.colors.whiteBase, theme.colors.depthLight1, theme.colors.depthLight1, theme.colors.depthLight3, theme.colors.alertBase, theme.colors.alertBase, theme.colors.whiteBase);
};
var disabledStyles = function disabledStyles(theme) {
  return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &.fi-checkbox--disabled {\n    & .fi-checkbox_label {\n      cursor: not-allowed;\n      color: ", ";\n      &::before {\n        background-color: ", ";\n        border-color: ", ";\n        border-width: 1px;\n      }\n      & > .fi-checkbox_icon .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n    & .fi-hint-text {\n      color: ", ";\n    }\n    &.fi-checkbox--large {\n      & .fi-checkbox_label::before {\n        border-width: 2px;\n      }\n    }\n  }\n"], ["\n  &.fi-checkbox--disabled {\n    & .fi-checkbox_label {\n      cursor: not-allowed;\n      color: ", ";\n      &::before {\n        background-color: ", ";\n        border-color: ", ";\n        border-width: 1px;\n      }\n      & > .fi-checkbox_icon .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n    & .fi-hint-text {\n      color: ", ";\n    }\n    &.fi-checkbox--large {\n      & .fi-checkbox_label::before {\n        border-width: 2px;\n      }\n    }\n  }\n"])), theme.colors.depthBase, theme.colors.depthLight3, theme.colors.depthLight1, theme.colors.depthLight3, theme.colors.depthBase);
};
var errorStyles = function errorStyles(theme) {
  return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &.fi-checkbox--error {\n    & .fi-checkbox_label {\n      &::before {\n        border-color: ", ";\n        border-width: 2px;\n      }\n      & > .fi-checkbox_icon .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n  }\n"], ["\n  &.fi-checkbox--error {\n    & .fi-checkbox_label {\n      &::before {\n        border-color: ", ";\n        border-width: 2px;\n      }\n      & > .fi-checkbox_icon .fi-icon-base-fill {\n        fill: ", ";\n      }\n    }\n  }\n"])), theme.colors.alertBase, theme.colors.alertBase);
};
var largeVariantStyles = function largeVariantStyles(theme) {
  return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  &.fi-checkbox--large {\n    & .fi-checkbox_label {\n      padding-left: ", ";\n      line-height: 30px;\n\n      &::before {\n        content: '';\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        box-sizing: border-box;\n        height: 30px;\n        width: 30px;\n        color: ", ";\n        border: 2px solid;\n      }\n      & .fi-checkbox_icon {\n        height: 20px;\n        width: 20px;\n        left: 5px;\n        top: 4px;\n      }\n    }\n    & .fi-hint-text {\n      padding-left: ", ";\n    }\n\n    &:focus-within {\n      & .fi-checkbox_label {\n        &::after {\n          width: 32px;\n          height: 32px;\n          top: -1px;\n          left: -1px;\n        }\n      }\n    }\n  }\n"], ["\n  &.fi-checkbox--large {\n    & .fi-checkbox_label {\n      padding-left: ", ";\n      line-height: 30px;\n\n      &::before {\n        content: '';\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        box-sizing: border-box;\n        height: 30px;\n        width: 30px;\n        color: ", ";\n        border: 2px solid;\n      }\n      & .fi-checkbox_icon {\n        height: 20px;\n        width: 20px;\n        left: 5px;\n        top: 4px;\n      }\n    }\n    & .fi-hint-text {\n      padding-left: ", ";\n    }\n\n    &:focus-within {\n      & .fi-checkbox_label {\n        &::after {\n          width: 32px;\n          height: 32px;\n          top: -1px;\n          left: -1px;\n        }\n      }\n    }\n  }\n"])), theme.spacing.xxl, theme.colors.depthDark3, theme.spacing.xxl);
};
var baseStyles = function baseStyles(theme, globalMargins, propMargins) {
  return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  & .fi-checkbox_label {\n    position: relative;\n    display: block;\n    padding-left: ", ";\n    cursor: pointer;\n    line-height: 27px;\n    min-height: 18px; /* Enable clicking when label text is empty */\n\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0px;\n      top: ", ";\n      box-sizing: border-box;\n      height: 18px;\n      width: 18px;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      background-color: ", ";\n    }\n  }\n\n  & .fi-checkbox_icon {\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    left: 4px;\n    top: 9px;\n  }\n\n  &:focus-within {\n    & .fi-checkbox_label {\n      /* Modified version of theme.focuses.absoluteFocus */\n      &::after {\n        content: '';\n        position: absolute;\n        pointer-events: none;\n        top: 4px;\n        left: -1px;\n        border-radius: 2px;\n        background-color: transparent;\n        border: 0px solid ", ";\n        box-sizing: border-box;\n        box-shadow: 0 0 0 2px ", ";\n        z-index: 9999;\n        width: 20px;\n        height: 20px;\n        outline: 2px solid transparent; /* For high contrast mode */\n      }\n    }\n  }\n\n  & .fi-checkbox_input {\n    position: absolute;\n    opacity: 0;\n    z-index: -9999;\n  }\n\n  & .fi-hint-text {\n    padding-left: ", ";\n    color: ", ";\n  }\n\n  & .fi-status-text {\n    line-height: 18px;\n    &.fi-checkbox_statusText--has-content {\n      margin-top: ", ";\n    }\n  }\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  \n  & .fi-checkbox_label {\n    position: relative;\n    display: block;\n    padding-left: ", ";\n    cursor: pointer;\n    line-height: 27px;\n    min-height: 18px; /* Enable clicking when label text is empty */\n\n    &::before {\n      content: '';\n      position: absolute;\n      left: 0px;\n      top: ", ";\n      box-sizing: border-box;\n      height: 18px;\n      width: 18px;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      background-color: ", ";\n    }\n  }\n\n  & .fi-checkbox_icon {\n    position: absolute;\n    height: 10px;\n    width: 10px;\n    left: 4px;\n    top: 9px;\n  }\n\n  &:focus-within {\n    & .fi-checkbox_label {\n      /* Modified version of theme.focuses.absoluteFocus */\n      &::after {\n        content: '';\n        position: absolute;\n        pointer-events: none;\n        top: 4px;\n        left: -1px;\n        border-radius: 2px;\n        background-color: transparent;\n        border: 0px solid ", ";\n        box-sizing: border-box;\n        box-shadow: 0 0 0 2px ", ";\n        z-index: 9999;\n        width: 20px;\n        height: 20px;\n        outline: 2px solid transparent; /* For high contrast mode */\n      }\n    }\n  }\n\n  & .fi-checkbox_input {\n    position: absolute;\n    opacity: 0;\n    z-index: -9999;\n  }\n\n  & .fi-hint-text {\n    padding-left: ", ";\n    color: ", ";\n  }\n\n  & .fi-status-text {\n    line-height: 18px;\n    &.fi-checkbox_statusText--has-content {\n      margin-top: ", ";\n    }\n  }\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), element(theme), font(theme)('bodyTextSmall'), buildSpacingCSS(globalMargins), buildSpacingCSS(propMargins, true), fixInternalMargins(), theme.spacing.l, theme.spacing.xxs, theme.colors.depthDark3, theme.radiuses.basic, theme.colors.whiteBase, theme.colors.whiteBase, theme.colors.accentSecondary, theme.spacing.l, theme.colors.depthDark1, theme.spacing.xxs, largeVariantStyles(theme), checkedStyles(theme), errorStyles(theme), disabledStyles(theme));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

export { baseStyles };
//# sourceMappingURL=Checkbox.baseStyles.js.map