@up-group/react-controls/dist/Components/Inputs/_Common/Styled/index.js

We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var themedComponents_1 = require("../../../../Common/theming/themedComponents");
exports.sizeMap = {
    xxsmall: "30px",
    xsmall: "60px",
    small: "150px",
    normal: "300px",
    medium: "250px",
    large: "350px",
    xlarge: "400px",
    xxlarge: "500px",
    fill: "100%",
};
exports.CommonCheckableStyle = function (props) {
    return (_a = ["\n  position:relative;\n  display: block;\n  cursor: pointer;\n  min-height: 20px;\n  padding-left: 26px;\n  text-transform: none;\n  line-height: 16px;  \n  \n  svg {\n    margin:4px 4px 4px 0px;\n    display:inline-block;\n    float:left;\n  }\n\n  .up-control-indicator {\n    line-height: 1;\n    font-family: \"Icons16\", sans-serif;\n    font-size: 16px;\n    font-weight: 400;\n    font-style: normal;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    background: #f5f8fa;\n    background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin: 0;\n    border: none;\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1);\n    background-clip: padding-box;\n    cursor: pointer;\n    width: 16px;\n    height: 16px;\n    line-height: 16px;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none; \n  }\n .up-control-indicator::before {\n      position: relative;\n      content: \"\"; \n  }\n  input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin: 0;\n    z-index:0;\n    visibility:hidden;\n  }\n  input:checked ~ .up-control-indicator, \n  input:indeterminate ~ .up-control-indicator {\n    background: #137cbd;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #137cbd;\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2);\n    color: #ffffff; \n  }\n  &:hover .up-control-indicator {\n    background: #ebf1f5;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5; \n  }\n  &:hover input:checked ~ .up-control-indicator, \n  &:hover input:indeterminate ~ .up-control-indicator {\n    background: #106ba3;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #106ba3;\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); \n  }\n  input:not(:disabled):active ~ .up-control-indicator {\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 1px 2px rgba(16, 22, 26, 0.2);\n    background: #d8e1e8; \n  }\n  input:not(:disabled):active:checked ~ .up-control-indicator, \n  input:not(:disabled):active:indeterminate ~ .up-control-indicator {\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 1px 2px rgba(16, 22, 26, 0.2);\n    background: #0e5a8a; \n  }\n  input:focus ~ .up-control-indicator {\n    outline: rgba(19, 124, 189, 0.5) auto 2px;\n    outline-offset: 2px;\n    -moz-outline-radius: 6px; \n  }\n  input:disabled ~ .up-control-indicator {\n    box-shadow: none;\n    background: rgba(206, 217, 224, 0.5);\n    cursor: not-allowed; \n  }\n  input:disabled:checked ~ .up-control-indicator {\n    box-shadow: none;\n    background: rgba(19, 124, 189, 0.5); \n  }\n  .up-control-indicator {\n    border-radius: 3px;\n    font-size: 16px; \n  }\n  input:checked ~ .up-control-indicator::before {\n    content: \"\uE6D8\"; \n  }\n  input:indeterminate ~ .up-control-indicator::before {\n    content: \"\uE70E\"; \n  }\n"], _a.raw = ["\n  position:relative;\n  display: block;\n  cursor: pointer;\n  min-height: 20px;\n  padding-left: 26px;\n  text-transform: none;\n  line-height: 16px;  \n  \n  svg {\n    margin:4px 4px 4px 0px;\n    display:inline-block;\n    float:left;\n  }\n\n  .up-control-indicator {\n    line-height: 1;\n    font-family: \"Icons16\", sans-serif;\n    font-size: 16px;\n    font-weight: 400;\n    font-style: normal;\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    background: #f5f8fa;\n    background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #f5f8fa;\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin: 0;\n    border: none;\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 -1px 0 rgba(16, 22, 26, 0.1);\n    background-clip: padding-box;\n    cursor: pointer;\n    width: 16px;\n    height: 16px;\n    line-height: 16px;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none; \n  }\n .up-control-indicator::before {\n      position: relative;\n      content: \"\"; \n  }\n  input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    margin: 0;\n    z-index:0;\n    visibility:hidden;\n  }\n  input:checked ~ .up-control-indicator, \n  input:indeterminate ~ .up-control-indicator {\n    background: #137cbd;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #137cbd;\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2);\n    color: #ffffff; \n  }\n  &:hover .up-control-indicator {\n    background: #ebf1f5;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #ebf1f5; \n  }\n  &:hover input:checked ~ .up-control-indicator, \n  &:hover input:indeterminate ~ .up-control-indicator {\n    background: #106ba3;\n    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)) left no-repeat, center no-repeat #106ba3;\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 -1px 0 rgba(16, 22, 26, 0.2); \n  }\n  input:not(:disabled):active ~ .up-control-indicator {\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.2), inset 0 1px 2px rgba(16, 22, 26, 0.2);\n    background: #d8e1e8; \n  }\n  input:not(:disabled):active:checked ~ .up-control-indicator, \n  input:not(:disabled):active:indeterminate ~ .up-control-indicator {\n    box-shadow: inset 0 0 0 1px rgba(16, 22, 26, 0.4), inset 0 1px 2px rgba(16, 22, 26, 0.2);\n    background: #0e5a8a; \n  }\n  input:focus ~ .up-control-indicator {\n    outline: rgba(19, 124, 189, 0.5) auto 2px;\n    outline-offset: 2px;\n    -moz-outline-radius: 6px; \n  }\n  input:disabled ~ .up-control-indicator {\n    box-shadow: none;\n    background: rgba(206, 217, 224, 0.5);\n    cursor: not-allowed; \n  }\n  input:disabled:checked ~ .up-control-indicator {\n    box-shadow: none;\n    background: rgba(19, 124, 189, 0.5); \n  }\n  .up-control-indicator {\n    border-radius: 3px;\n    font-size: 16px; \n  }\n  input:checked ~ .up-control-indicator::before {\n    content: \"\uE6D8\"; \n  }\n  input:indeterminate ~ .up-control-indicator::before {\n    content: \"\uE70E\"; \n  }\n"], themedComponents_1.css(_a));
    var _a;
};
//# sourceMappingURL=index.js.map