fk-react-ui-components
Version:
Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should
74 lines (73 loc) • 1.85 kB
JavaScript
/**
* Created by manoraj.k on 17/08/17.
*/
import styled from 'styled-components';
import { colors } from '../../colorCodes';
export const CheckboxTreeContainer = styled.div`
color: ${colors.headingColor};
width: ${props => props.width || 'auto'};
max-height: ${props => props.maxHeight || ''};
height: ${props => props.height || 'auto'};
overflow-y: auto;
ol {
list-style: none;
padding: 0px;
}
.checkbox-tree-collapse-btn {
outline: none;
border: none;
background: inherit;
cursor: pointer;
width: 100%;
text-align: right;
}
.checkbox-tree-item {
cursor: pointer;
line-height: 20px;
padding-top: 5px;
white-space: nowrap;
.checkbox-tree-box {
.fa-square-o,
.fa-check-square,
.fa-check-square-o {
font-size: 16px;
}
.fa-square-o {
color: ${colors.inputBorder};
}
.fa-check-square {
color: ${colors.brandBlue};
}
.fa-check-square-o {
color: ${colors.inputBorder};
}
}
.fa-chevron-up,
.fa-chevron-down {
color: ${colors.inputBorder};
}
.checkbox-tree-label {
margin-left: 5px;
font-family: Arial;
font-size: 13px;
}
.child-list {
margin-left: 20px;
}
.hide-checkbox {
display: none;
}
}
`;
export const CheckboxNodeContainer = styled.div`
input {
display: none;
}
.checkbox-tree-collapse-btn {
outline: none;
border: none;
background: inherit;
cursor: pointer;
}
`;
//# sourceMappingURL=checkbox-tree.js.map