Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1066 | Rev 1569 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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