TypeScript styled-components Beispiele

Beispiel #1

Datei: tableHeading.styles.ts Projekt: 3drepo/3drepo.io

 *  License, or (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import styled from 'styled-components';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import { COLOR, FONT_WEIGHT } from '../../../../../styles';

export const SortLabel = styled(TableSortLabel) `
	height: 18px;

	&& {
		flex-direction: row-reverse;
		margin-left: ${({ active }) => active ? 0 : '-5px'};
		color: ${COLOR.BLACK_60};
		font-size: 14px;
		font-weight: ${FONT_WEIGHT.SEMIBOLD}
	}

	&::before {
		width: 18px;
		height: 18px;
		left: -2px;
		border-radius: 100%;

Beispiel #2

Datei: modelDialog.styles.ts Projekt: 3drepo/3drepo.io

 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import styled from 'styled-components';
import { COLOR } from './../../../../styles/colors';
import { Field } from 'formik';
import { CustomTable } from '../../../components/customTable/customTable.component';
import FormControl from '@material-ui/core/FormControl';
import TableCell from '@material-ui/core/TableCell';

export const StyledField = styled(Field)`
	margin-right: 10px;
`;

export const SelectWrapper = styled(FormControl)`
	&&:not(:first-child) {
		margin-top: 15px;
	}
`;

export const FieldWrapper = styled(FormControl)``;

export const StyledCustomTable = styled(CustomTable)`
	width: 100%;
`;

Beispiel #3

Datei: autosuggestField.styles.ts Projekt: 3drepo/3drepo.io

 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import styled from 'styled-components';
import Popper from '@material-ui/core/Popper';
import { COLOR } from '../../../styles/colors';
import { TextField } from '../textField/textField.component';

export const Container = styled.div``;

export const StyledTextField = styled(TextField)`
	&& {
		margin: 8px 0;
	}
`;

export const SuggestionsList = styled(Popper)`
	z-index: 1;
	margin-top: -15px;

	.react-autosuggest__suggestions-list {
		max-height: 250px;
		overflow: auto;
		padding-left: 0;
	}

Beispiel #4

Datei: newJobForm.styles.ts Projekt: 3drepo/3drepo.io

 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';

import { COLOR } from '../../../styles';

export const Title = styled.div`
	font-size: 14px;
	color: ${COLOR.BLACK_20};
`;

export const StyledTextField = styled(TextField) `
	font-size: 14px;
	margin-bottom: 12px;
`;

export const StyledTextFieldContainer = styled(Grid) `
	flex: 1;
`;

export const SaveButton = styled(Button) `
	&& {
		width: 100%;
		margin-top: 16px;
	}
`;

Beispiel #5

Datei: fontAwesomeIcon.styles.ts Projekt: 3drepo/3drepo.io

 *  License, or (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU Affero General Public License for more details.
 *
 *  You should have received a copy of the GNU Affero General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

import styled from 'styled-components';
import Icon from '@material-ui/core/Icon';
import { MuiTheme } from '../../../styles';

export const IconContainer = styled(Icon).attrs({
	classes: {
		colorSecondary: 'secondary',
		colorPrimary: 'primary'
	}
})`
	&& {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: inherit;
	}

	svg {
		fill: currentColor;
	}

Beispiel #6

Datei: TrayMenu.styles.ts Projekt: MayGo/backer-timetracker

import styled from 'styled-components';

import { Menu } from 'antd';

export const Brand = styled.div`
    font-family: 'Berkshire Swash', cursive;
    text-align: left;
    font-size: 26px;
`;

export const Img = styled.img`
    margin-right: 15px;
    margin-bottom: 6px;
`;
export const RightMenuItem = styled(Menu.Item)`
    float: right !important;
`;

Beispiel #7

Datei: subscription.styles.ts Projekt: 3drepo/3drepo.io

import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import Button from '@material-ui/core/Button';
import { Form } from 'formik';

import { COLOR } from '../../styles';

export const Container = styled.div`
	height: 100%;
`;

export const StyledTextField = styled(TextField)``;

export const StyledSelectField = styled(Select)``;

export const StyledSelectItem = styled(MenuItem)``;

export const StyledInputLabel = styled(InputLabel)``;

export const StyledFormControl = styled(FormControl)`
	width: 100%;

	&& {
		margin-top: 16px;
		margin-bottom: 8px;
	}
`;

Beispiel #8

Datei: floatingActionPanel.styles.ts Projekt: 3drepo/3drepo.io

 */

import styled from 'styled-components';
import Button from '@material-ui/core/Button';
import Popover from '@material-ui/core/Popover';

export const Container = styled.div``;

export const FloatingButtonContainer = styled.div`
	position: absolute;
	top: -22px;
	right: 14px;
	z-index: 1;
`;

export const FloatingButton = styled(Button).attrs({
	classes: {
		disabled: 'button--disabled'
	}
})`
	&&.button--disabled {
		background: #d9d9d9;
		color: #868686;
	}
`;

export const Panel = styled(Popover).attrs({
	classes: {
		paper: 'floating-panel'
	}
})`

Beispiel #9

Datei: textField.styles.ts Projekt: 3drepo/3drepo.io

import styled from 'styled-components';
import IconButton from '@material-ui/core/IconButton';
import TextField from '@material-ui/core/TextField';

export const Container = styled.div`
	position: relative;
` as any;

export const ActionsLine = styled.div`
	position: absolute;
	bottom: 9px;
	right: 0;
`;

export const StyledIconButton = styled(IconButton)`
	&& {
		padding: 5px;
		margin-right: 0;
	}
`;

export const StyledTextField = styled(TextField)`
	&& {
		margin: 8px 0;

		textarea {
			min-height: 17px;
			padding-right: 56px;
			box-sizing: border-box;
		}

Beispiel #10

Datei: typescript.ts Projekt: dylanpyle/dotfiles

import styled from 'styled-components';


interface SectionProps {
  children?: React.ReactChild,
  className?: string,
}


class Section extends React.Component<SectionProps, {}> {
  render() {
    return <div className={this.props.className}>
      {this.props.children}
    </div>;
  }
}


const StyledSection = styled(Section)`
  width: 100vw;
  height: 100vh;
  background: #2A2C39;

  display: flex;
  justify-items: center;
  align-items: center;
`;


export default StyledSection;