suomifi-ui-components
Version:
Suomi.fi UI component library
14 lines (10 loc) • 2.51 kB
JavaScript
'use strict';
var tslib = require('tslib');
var styled = require('styled-components');
var Toggle_baseStyles = require('./Toggle.baseStyles.js');
var baseStyles = function baseStyles(theme) {
return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n width: ", ";\n height: ", ";\n vertical-align: bottom;\n overflow: visible;\n & .fi-icon-toggle-base {\n stroke: ", ";\n fill: ", ";\n }\n & .fi-icon-toggle-knob {\n fill: ", ";\n transform: translateX(-17px);\n }\n & .fi-icon-toggle-checkmark {\n fill: none;\n }\n &.fi-toggle_icon--checked {\n & .fi-icon-toggle-base {\n stroke: ", ";\n }\n & .fi-icon-toggle-knob {\n fill: ", ";\n transform: translateX(0px);\n }\n & .fi-icon-toggle-checkmark {\n fill: ", ";\n }\n }\n\n &.fi-toggle_icon--disabled {\n & .fi-icon-toggle-base {\n stroke: ", ";\n fill: ", ";\n }\n & .fi-icon-toggle-knob {\n fill: ", ";\n }\n & .fi-icon-toggle-checkmark {\n fill: none;\n }\n }\n\n &.fi-toggle_icon--checked.fi-toggle_icon--disabled {\n & .fi-icon-toggle-checkmark {\n fill: ", ";\n }\n }\n"], ["\n width: ", ";\n height: ", ";\n vertical-align: bottom;\n overflow: visible;\n & .fi-icon-toggle-base {\n stroke: ", ";\n fill: ", ";\n }\n & .fi-icon-toggle-knob {\n fill: ", ";\n transform: translateX(-17px);\n }\n & .fi-icon-toggle-checkmark {\n fill: none;\n }\n &.fi-toggle_icon--checked {\n & .fi-icon-toggle-base {\n stroke: ", ";\n }\n & .fi-icon-toggle-knob {\n fill: ", ";\n transform: translateX(0px);\n }\n & .fi-icon-toggle-checkmark {\n fill: ", ";\n }\n }\n\n &.fi-toggle_icon--disabled {\n & .fi-icon-toggle-base {\n stroke: ", ";\n fill: ", ";\n }\n & .fi-icon-toggle-knob {\n fill: ", ";\n }\n & .fi-icon-toggle-checkmark {\n fill: none;\n }\n }\n\n &.fi-toggle_icon--checked.fi-toggle_icon--disabled {\n & .fi-icon-toggle-checkmark {\n fill: ", ";\n }\n }\n"])), Toggle_baseStyles.iconWidth, Toggle_baseStyles.iconHeight, theme.colors.depthDark3, theme.colors.whiteBase, theme.colors.depthDark2, theme.colors.depthDark3, theme.colors.successBase, theme.colors.whiteBase, theme.colors.depthLight1, theme.colors.depthLight3, theme.colors.depthLight1, theme.colors.whiteBase);
};
var templateObject_1;
exports.baseStyles = baseStyles;
//# sourceMappingURL=ToggleIcon.baseStyles.js.map