How to use the uikit/Core.applyDefaultStyles function in uikit
To help you get started, we’ve selected a few uikit examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
kids-first / kf-portal-ui / src / components / UserProfile / UserIntegrations / ui.js View on Github 
import X from 'react-icons/lib/fa/close';
import { Trans } from 'react-i18next';
import { compose } from 'recompose';
import { ActionButton, WhiteButton } from 'uikit/Button';
import { applyDefaultStyles, Span } from 'uikit/Core';
import StackIcon from 'icons/StackIcon';
import { withApi } from 'services/api';
/* === ConnectButton === */
const ConnectButtonWrapper = styled(ActionButton)`
font-size: 14px;
background: ${({ theme }) => theme.lightBlue};
`;
const ExternalLink = applyDefaultStyles(ExternalLinkIcon);
const RightArrow = applyDefaultStyles(RightIcon);
export { ConnectButtonWrapper };
export const ConnectButton = compose(
withApi,
injectState,
)(({ text = 'Connect', doConnect, api, effects, ...props }) => {
return (
{text}
);
});import { Trans } from 'react-i18next';
import { compose } from 'recompose';
import { ActionButton, WhiteButton } from 'uikit/Button';
import { applyDefaultStyles, Span } from 'uikit/Core';
import StackIcon from 'icons/StackIcon';
import { withApi } from 'services/api';
/* === ConnectButton === */
const ConnectButtonWrapper = styled(ActionButton)`
font-size: 14px;
background: ${({ theme }) => theme.lightBlue};
`;
const ExternalLink = applyDefaultStyles(ExternalLinkIcon);
const RightArrow = applyDefaultStyles(RightIcon);
export { ConnectButtonWrapper };
export const ConnectButton = compose(
withApi,
injectState,
)(({ text = 'Connect', doConnect, api, effects, ...props }) => {
return (
{text}
);
});
const connectedButtonCommonStyles = `const ConnectButton = ({ ...props }) => {
const ExternalLink = applyDefaultStyles(ExternalLinkIcon);
const RightArrow = applyDefaultStyles(RightIcon);
return (
Connect
);
};const BaseFileRepoHeading = ({ theme }) => css`
font-family: ${theme.fonts.default};
color: ${theme.secondary};
font-weight: 500;
margin: 0;
padding: 0;
`;
export const FileRepoH1 = applyDefaultStyles(styled('h1')``);
export const FileRepoH2 = applyDefaultStyles(styled('h2')`
${BaseFileRepoHeading};
font-size: 18px;
`);
export const FileRepoH3 = applyDefaultStyles(styled('h3')`
${BaseFileRepoHeading};
font-size: 16px;
`);
/**
* Headings: Join/Login
*/
const BaseJoinHeading = ({ theme }) => css`
font-family: ${theme.fonts.default};
color: ${theme.secondary};
font-weight: 500;
`;
export const JoinH2 = applyDefaultStyles(styled('h2')`
${BaseJoinHeading};
font-size: 28px;letter-spacing: 0.4px;
font-family: ${theme.fonts.default};
text-decoration: none;
`;
export const H1 = applyDefaultStyles(styled('h1')`
${BaseHeading};
font-size: 28px;
`);
export const H2 = applyDefaultStyles(styled('h2')`
${BaseHeading};
font-size: 22px;
`);
export const H3 = applyDefaultStyles(styled('h3')`
${BaseHeading};
font-size: 16px;
line-height: 1;
letter-spacing: 0.3px;
`);
export const H4 = applyDefaultStyles(styled('h4')`
font-family: ${({ theme }) => theme.fonts.details};
font-size: 13px;
font-style: italic;
line-height: 1.85;
text-align: left;
color: ${({ theme }) => theme.greyScale9};
margin: 0;
padding: 0;
font-weight: normal;padding: 0;
font-weight: normal;
`);
/**
* Headings: File Repo
*/
const BaseFileRepoHeading = ({ theme }) => css`
font-family: ${theme.fonts.default};
color: ${theme.secondary};
font-weight: 500;
margin: 0;
padding: 0;
`;
export const FileRepoH1 = applyDefaultStyles(styled('h1')``);
export const FileRepoH2 = applyDefaultStyles(styled('h2')`
${BaseFileRepoHeading};
font-size: 18px;
`);
export const FileRepoH3 = applyDefaultStyles(styled('h3')`
${BaseFileRepoHeading};
font-size: 16px;
`);
/**
* Headings: Join/Login
*/
const BaseJoinHeading = ({ theme }) => css`
font-family: ${theme.fonts.default};const HeaderRow = styled(Row)`
font-size: 20px;
`;
const Heading = applyDefaultStyles(styled('h2')`
display: inline-block;
font-family: ${({ theme }) => theme.fonts.default};
font-size: 100%;
font-weight: 500;
text-align: left;
color: ${({ theme }) => theme.cardTitle};
margin: 0;
`);
export const Badge = applyDefaultStyles(styled('div')`
margin-left: 9px;
display: inline-block;
padding: 0;
color: white;
font-weight: 600;
font-size: 60%;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
font-family: ${({ theme }) => theme.fonts.details};
background-color: ${({ theme }) => theme.defaultBadge};
border-radius: 50px;
position: relative;
height: 25px;
min-width: 25px;
line-height: 25px;import React from 'react';
import styled from 'react-emotion';
import { applyDefaultStyles } from 'uikit/Core';
import Row from 'uikit/Row';
const HeaderRow = styled(Row)`
font-size: 20px;
`;
const Heading = applyDefaultStyles(styled('h2')`
display: inline-block;
font-family: ${({ theme }) => theme.fonts.default};
font-size: 100%;
font-weight: 500;
text-align: left;
color: ${({ theme }) => theme.cardTitle};
margin: 0;
`);
export const Badge = applyDefaultStyles(styled('div')`
margin-left: 9px;
display: inline-block;
padding: 0;
color: white;
font-weight: 600;
font-size: 60%;const ConnectButton = ({ ...props }) => {
const ExternalLink = applyDefaultStyles(ExternalLinkIcon);
const RightArrow = applyDefaultStyles(RightIcon);
return (
Connect
);
};color: ${({ theme }) => theme.greyScale2};
text-decoration: none;
padding: 10px 20px;
border-top: ${({ theme, separated }) => (separated ? `1px solid ${theme.borderGrey}` : 'none')};
border-left: solid 2px ${({ theme }) => theme.white};
&:hover {
color: ${({ theme }) => theme.hover};
border-left: solid 2px ${({ theme }) => theme.hover};
svg {
fill: ${({ theme }) => theme.hover};
}
}
`;
export const DropdownExternalLink = applyDefaultStyles(
styled(ExternalLink)`
color: ${({ theme }) => theme.greyScale2};
text-decoration: none;
padding: 10px 20px;
border-top: ${({ theme, separated }) => (separated ? `1px solid ${theme.borderGrey}` : 'none')};
border-left: solid 2px ${({ theme, borderColor }) => (borderColor ? borderColor : theme.white)};
&:hover {
color: ${({ theme }) => theme.hover};
border-left: solid 2px ${({ theme }) => theme.hover};
svg {
fill: ${({ theme }) => theme.hover};
}
}
`,
{uikit
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
