Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 940 | Rev 1567 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
930 stevensc 1 
import React from 'react'
2 
import styled from 'styled-components'
3 
 
4 
const StyledButton = styled.button`
5 
  border-radius: 30px;
6 
  align-items: center;
1066 stevensc 7 
  justify-content: center;
930 stevensc 8 
  padding: 0.2rem 1rem;
9 
  border: none;
10 
  cursor: pointer;
11 
  font-weight: 600;
12 
  font-size: 0.9rem;
13 
  display: inline-flex;
14 
  overflow: hidden;
15 
  text-align: center;
16 
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
17 
  &:hover {
18 
    background-color: whitesmoke;
19 
  }
20 
  &:disabled {
21 
    cursor: no-drop;
940 stevensc 22 
    background-color: #dddddd;
23 
    color: #a3a1a1;
930 stevensc 24 
  }
25 
`
26 
 
933 stevensc 27 
export const Button = ({
930 stevensc 28 
  onClick = () => {},
29 
  label = 'Confirmar',
934 stevensc 30 
  icon: Icon = null,
930 stevensc 31 
  ...rest
32 
}) => {
33 
  return (
34 
    <StyledButton onClick={() => onClick()} {...rest}>
934 stevensc 35 
      {Icon && <Icon />}
930 stevensc 36 
      {label}
37 
    </StyledButton>
38 
  )
39 
}
40 
 
940 stevensc 41 
export const ButtonPrimary = styled(Button)`
931 stevensc 42 
  background-color: var(--button-bg);
43 
  color: var(--button-text-color);
940 stevensc 44 
  border: 1px solid var(--button-bg) !important;
931 stevensc 45 
  &:hover {
46 
    background-color: var(--button-bg-hover);
940 stevensc 47 
    border: 1px solid var(--button-bg-hover) !important;
931 stevensc 48 
  }
49 
`
50 
 
940 stevensc 51 
export const ButtonSecondary = styled(Button)`
931 stevensc 52 
  background: var(--button-bg-secondary);
940 stevensc 53 
  border: 1px solid var(--border-primary) !important;
931 stevensc 54 
  color: var(--button-text-color-secondary);
55 
  &:hover {
56 
    background-color: var(--button-bg-secondary-hover);
57 
    border-color: transparent;
58 
  }
59 
`
60 
 
940 stevensc 61 
export const ButtonTertiary = styled(Button)`
931 stevensc 62 
  background-color: var(--button-bg-tertiary);
63 
  border-color: #f4f4f4;
64 
  color: var(--button-text-color-tertiary);
940 stevensc 65 
  border: 1px solid transparent !important;
931 stevensc 66 
  &:hover {
67 
    background: #d4d4d4;
940 stevensc 68 
    border: 1px solid var(--border-primary) !important;
931 stevensc 69 
    color: var(--border-primary);
70 
  }
71 
`