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 }; |