suomifi-ui-components/dist/cjs/core/Form/RadioButton/RadioButton.baseStyles.js

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var styled = require('styled-components');
var index = require('../../theme/reset/index.js');
var spacing = require('../../theme/utils/spacing.js');

var errorStyles = function errorStyles(theme) {
  return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  &.fi-radio-button--error {\n    & .fi-radio-button_input {\n      + .fi-radio-button_icon_wrapper {\n        & .fi-icon-radio-base {\n          stroke: ", ";\n        }\n      }\n      &:checked {\n        + .fi-radio-button_icon_wrapper {\n          & .fi-icon-radio-checked {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n"], ["\n  &.fi-radio-button--error {\n    & .fi-radio-button_input {\n      + .fi-radio-button_icon_wrapper {\n        & .fi-icon-radio-base {\n          stroke: ", ";\n        }\n      }\n      &:checked {\n        + .fi-radio-button_icon_wrapper {\n          & .fi-icon-radio-checked {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), theme.colors.alertBase, theme.colors.alertBase);
};
var disabledStyles = function disabledStyles(theme) {
  return styled.css(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  &.fi-radio-button--disabled {\n    & .fi-radio-button_label {\n      cursor: not-allowed;\n      color: ", ";\n    }\n    & .fi-radio-button_hintText {\n      color: ", ";\n      cursor: not-allowed;\n    }\n    & .fi-radio-button_input {\n      + .fi-radio-button_icon_wrapper {\n        & .fi-icon-radio-base {\n          fill: ", ";\n          stroke: ", ";\n        }\n      }\n      &:checked {\n        + .fi-radio-button_icon_wrapper {\n          & .fi-icon-radio-checked {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n"], ["\n  &.fi-radio-button--disabled {\n    & .fi-radio-button_label {\n      cursor: not-allowed;\n      color: ", ";\n    }\n    & .fi-radio-button_hintText {\n      color: ", ";\n      cursor: not-allowed;\n    }\n    & .fi-radio-button_input {\n      + .fi-radio-button_icon_wrapper {\n        & .fi-icon-radio-base {\n          fill: ", ";\n          stroke: ", ";\n        }\n      }\n      &:checked {\n        + .fi-radio-button_icon_wrapper {\n          & .fi-icon-radio-checked {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n"])), theme.colors.depthBase, theme.colors.depthBase, theme.colors.depthLight3, theme.colors.depthLight1, theme.colors.depthBase);
};
var largeStyles = function largeStyles() {
  return styled.css(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  &--large {\n    & .fi-radio-button_hintText {\n      padding-left: 40px;\n    }\n\n    & .fi-radio-button_input {\n      top: 2px;\n      left: 2px;\n      height: 30px;\n      width: 30px;\n      + .fi-radio-button_icon_wrapper {\n        top: 0;\n        left: 0;\n        height: 30px;\n        width: 30px;\n        & .fi-radio-button_icon {\n          height: 30px;\n          width: 30px;\n        }\n      }\n      &:focus {\n        + .fi-radio-button_icon_wrapper {\n          &::after {\n            width: 32px;\n            height: 32px;\n            top: -1px;\n            left: -1px;\n          }\n        }\n      }\n    }\n\n    & .fi-radio-button_label {\n      padding-left: 40px;\n      line-height: 34px;\n    }\n  }\n"], ["\n  &--large {\n    & .fi-radio-button_hintText {\n      padding-left: 40px;\n    }\n\n    & .fi-radio-button_input {\n      top: 2px;\n      left: 2px;\n      height: 30px;\n      width: 30px;\n      + .fi-radio-button_icon_wrapper {\n        top: 0;\n        left: 0;\n        height: 30px;\n        width: 30px;\n        & .fi-radio-button_icon {\n          height: 30px;\n          width: 30px;\n        }\n      }\n      &:focus {\n        + .fi-radio-button_icon_wrapper {\n          &::after {\n            width: 32px;\n            height: 32px;\n            top: -1px;\n            left: -1px;\n          }\n        }\n      }\n    }\n\n    & .fi-radio-button_label {\n      padding-left: 40px;\n      line-height: 34px;\n    }\n  }\n"])));
};
var baseStyles = function baseStyles(theme, globalMargins, propMargins) {
  return styled.css(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  ", "\n  ", "\n  position: relative;\n  ", "\n  ", "\n\n  &.fi-radio-button {\n    & .fi-radio-button_hintText {\n      display: block;\n      padding-left: 26px;\n      color: ", ";\n      ", ";\n    }\n    & .fi-radio-button_label {\n      font-size: 16px;\n      position: relative;\n      cursor: pointer;\n      line-height: 27px;\n      padding-left: 26px;\n    }\n    & .fi-radio-button_input {\n      opacity: 0;\n      position: absolute;\n      z-index: -9999;\n      height: 18px;\n      width: 18px;\n      top: 5px;\n      left: 2px;\n      + .fi-radio-button_icon_wrapper {\n        top: 3px;\n        left: 0;\n        margin: 2px;\n        height: 18px;\n        width: 18px;\n        position: absolute;\n        & .fi-icon-radio-base {\n          stroke: ", ";\n          fill: ", ";\n        }\n      }\n      &:checked {\n        + .fi-radio-button_icon_wrapper {\n          & .fi-icon-radio-checked {\n            fill: ", ";\n          }\n          & .fi-icon-radio-base {\n            stroke: ", ";\n          }\n        }\n      }\n      &:focus {\n        + .fi-radio-button_icon_wrapper {\n          &::after {\n            content: '';\n            position: absolute;\n            pointer-events: none;\n            top: -1px;\n            left: -1px;\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            border-radius: 50%;\n            outline: 2px solid transparent; /* For high contrast mode */\n          }\n        }\n      }\n      &:focus:not(:focus-visible) {\n        + .fi-radio-button_icon_wrapper {\n          &::after {\n            box-shadow: none;\n          }\n        }\n      }\n    }\n    ", ";\n    ", ";\n    ", ";\n  }\n"], ["\n  ", "\n  ", "\n  position: relative;\n  ", "\n  ", "\n\n  &.fi-radio-button {\n    & .fi-radio-button_hintText {\n      display: block;\n      padding-left: 26px;\n      color: ", ";\n      ", ";\n    }\n    & .fi-radio-button_label {\n      font-size: 16px;\n      position: relative;\n      cursor: pointer;\n      line-height: 27px;\n      padding-left: 26px;\n    }\n    & .fi-radio-button_input {\n      opacity: 0;\n      position: absolute;\n      z-index: -9999;\n      height: 18px;\n      width: 18px;\n      top: 5px;\n      left: 2px;\n      + .fi-radio-button_icon_wrapper {\n        top: 3px;\n        left: 0;\n        margin: 2px;\n        height: 18px;\n        width: 18px;\n        position: absolute;\n        & .fi-icon-radio-base {\n          stroke: ", ";\n          fill: ", ";\n        }\n      }\n      &:checked {\n        + .fi-radio-button_icon_wrapper {\n          & .fi-icon-radio-checked {\n            fill: ", ";\n          }\n          & .fi-icon-radio-base {\n            stroke: ", ";\n          }\n        }\n      }\n      &:focus {\n        + .fi-radio-button_icon_wrapper {\n          &::after {\n            content: '';\n            position: absolute;\n            pointer-events: none;\n            top: -1px;\n            left: -1px;\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            border-radius: 50%;\n            outline: 2px solid transparent; /* For high contrast mode */\n          }\n        }\n      }\n      &:focus:not(:focus-visible) {\n        + .fi-radio-button_icon_wrapper {\n          &::after {\n            box-shadow: none;\n          }\n        }\n      }\n    }\n    ", ";\n    ", ";\n    ", ";\n  }\n"])), index.element(theme), index.font(theme)('bodyText'), spacing.buildSpacingCSS(globalMargins), spacing.buildSpacingCSS(propMargins, true), theme.colors.depthDark1, theme.typography.bodyTextSmall, theme.colors.depthDark3, theme.colors.whiteBase, theme.colors.highlightBase, theme.colors.highlightBase, theme.colors.whiteBase, theme.colors.accentSecondary, disabledStyles(theme), errorStyles(theme), largeStyles());
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

exports.baseStyles = baseStyles;
//# sourceMappingURL=RadioButton.baseStyles.js.map