Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3719 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3719 Rev 3736
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react';
 1 
import React, { useEffect, useState } from 'react';
2 
import styled, { css } from 'styled-components';
 2 
import { styled } from '@mui/material';
Línea 3... Línea 3...
3 
 
 3 
 
4 
const SwitchContainer = styled.label`
 4 
const SwitchContainer = styled('label')`
5 
  display: flex;
 5 
  display: flex;
6 
  flex-direction: column;
 6 
  flex-direction: column;
Línea 7... Línea 7...
7 
`;
 7 
`;
8 
 
 8 
 
9 
const StyledSwitch = styled.div`
 9 
const StyledSwitch = styled('div')(({ isChecked }) => ({
10 
  position: relative;
 10 
  position: 'relative',
11 
  display: inline-block;
 11 
  display: 'inline-block',
12 
  width: 60px;
 12 
  width: '60px',
13 
  height: 34px;
 13 
  height: '34px',
14 
  input {
 14 
  '& input': {
15 
    opacity: 0;
 15 
    opacity: 0,
- 
 
 16 
    width: 0,
- 
 
 17 
    height: 0
- 
 
 18 
  },
- 
 
 19 
  '& .slider': {
- 
 
 20 
    position: 'absolute',
- 
 
 21 
    cursor: 'pointer',
- 
 
 22 
    top: 0,
- 
 
 23 
    left: 0,
- 
 
 24 
    right: 0,
- 
 
 25 
    bottom: 0,
- 
 
 26 
    backgroundColor: isChecked ? '#2196f3' : '#ccc',
- 
 
 27 
    WebkitTransition: '0.4s',
- 
 
 28 
    transition: '0.4s'
- 
 
 29 
  },
- 
 
 30 
  '& .slider:before': {
- 
 
 31 
    position: 'absolute',
- 
 
 32 
    content: '""',
- 
 
 33 
    height: '26px',
- 
 
 34 
    width: '26px',
- 
 
 35 
    left: '4px',
- 
 
 36 
    bottom: '4px',
- 
 
 37 
    backgroundColor: 'white',
- 
 
 38 
    WebkitTransition: '0.4s',
- 
 
 39 
    transform: isChecked ? 'translateX(26px)' : 'translateX(0px)',
- 
 
 40 
    transition: '0.4s'
- 
 
 41 
  },
- 
 
 42 
  '& input:focus + .slider': {
- 
 
 43 
    boxShadow: '0 0 1px #2196f3'
- 
 
 44 
  },
- 
 
 45 
  '& .slider.round': {
- 
 
 46 
    borderRadius: '34px'
- 
 
 47 
  },
16 
    width: 0;
 48 
  '& .slider.round:before': {
17 
    height: 0;
 - 
 
18 
  }
 - 
 
19 
  .slider {
 - 
 
20 
    position: absolute;
 - 
 
21 
    cursor: pointer;
 - 
 
22 
    top: 0;
 - 
 
23 
    left: 0;
 - 
 
24 
    right: 0;
 - 
 
25 
    bottom: 0;
 - 
 
26 
    background-color: #ccc;
 - 
 
27 
    -webkit-transition: 0.4s;
 - 
 
28 
    transition: 0.4s;
 - 
 
29 
  }
 - 
 
30 
  .slider:before {
 - 
 
31 
    position: absolute;
 - 
 
32 
    content: '""';
 - 
 
33 
    height: 26px;
 - 
 
34 
    width: 26px;
 - 
 
35 
    left: 4px;
 - 
 
36 
    bottom: 4px;
 - 
 
37 
    background-color: white;
 - 
 
38 
    -webkit-transition: 0.4s;
 - 
 
39 
    transition: 0.4s;
 - 
 
40 
  }
 - 
 
41 
  input:focus + .slider {
 - 
 
42 
    box-shadow: 0 0 1px #2196f3;
 - 
 
43 
  }
 - 
 
44 
  .slider.round {
 - 
 
45 
    border-radius: 34px;
 - 
 
46 
  }
 - 
 
47 
  .slider.round:before {
 - 
 
48 
    border-radius: 50%;
 - 
 
49 
  }
 - 
 
50 
  ${(props) =>
 - 
 
51 
    props.isChecked &&
 - 
 
52 
    css`
 - 
 
53 
      input + .slider {
 - 
 
54 
        background-color: #2196f3;
 - 
 
55 
      }
 - 
 
56 
      input + .slider:before {
 - 
 
57 
        -webkit-transform: translateX(26px);
 - 
 
58 
        -ms-transform: translateX(26px);
 - 
 
59 
        transform: translateX(26px);
 - 
 
60 
      }
 49 
    borderRadius: '50%'
Línea 61... Línea 50...
61 
    `}
 50 
  }
62 
`;
 51 
}));
Línea 63... Línea 52...
63 
 
 52