All files / styles Select.js

87.5% Statements 7/8
50% Branches 2/4
75% Functions 3/4
100% Lines 7/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89      2x               2x                     2x                                   12x                             12x     2x                                     1x                      
import { css } from 'emotion';
import styled from '@appbaseio/vue-emotion';
 
const small = css`
	min-height: 0;
	height: 30px;
	border: 0;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
	border-radius: 2px;
`;
 
const dark = ({ theme }) => css`
	background-color: ${theme.colors.backgroundColor};
	border-color: ${theme.colors.borderColor};
	color: ${theme.colors.textColor};
 
	&:hover,
	&:focus {
		background-color: ${theme.colors.backgroundColor};
	}
`;
 
const Select = styled('button')`
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 42px;
	border-radius: 0;
	outline: none;
	padding: 5px 12px;
	font-size: 0.9rem;
	line-height: 1.2rem;
	background-color: #fff;
	border: 1px solid #ccc;
	color: #424242;
	cursor: pointer;
	user-select: none;
	transition: all 0.3s ease;
 
	${props => (props.small ? small : null)};
 
	& > div {
		width: calc(100% - 24px);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left;
	}
 
	&:hover,
	&:focus {
		background-color: #fcfcfc;
	}
 
	${({ themePreset }) => themePreset === 'dark' && dark};
`;
 
const Tick = styled('span')`
	width: 16px;
	height: 16px;
	display: inline-block;
	position: relative;
	user-select: none;
	align-items: center;
 
	&::after {
		box-sizing: content-box;
		content: '';
		position: absolute;
		background-color: transparent;
		top: 50%;
		left: 0;
		width: 8px;
		height: 4px;
		margin-top: -4px;
		border-style: solid;
		border-color: ${({ theme }) => theme.colors.primaryColor};
		border-width: 0 0 2px 2px;
		border-radius: 0;
		border-image: none;
		transform: rotate(-45deg) scale(1);
		transition: all 200ms ease-out;
	}
`;
 
export default Select;
export { Tick };