Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3481 stevensc 1
import {
2
  LinearProgress,
3
  Rating,
4
  linearProgressClasses,
5
  styled
6
} from '@mui/material'
7
 
8
export const TopicContainer = styled('div')`
9
  background-color: var(--bg-color);
10
  border-radius: 10px;
11
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
12
  display: grid;
13
  grid-template-rows: auto 1fr auto;
14
  overflow: hidden;
15
  width: 100%;
16
  .c-header {
17
    border-bottom: 1px solid var(--border-primary);
18
    padding: 0.5rem;
19
    overflow: hidden;
20
    width: 100%;
21
    h3 {
22
      color: var(--subtitle-color);
23
      font-variant: 14px;
24
      text-align: center;
25
    }
26
  }
27
  .c-body {
28
    position: relative;
29
    overflow: hidden;
30
    svg {
31
      position: absolute;
32
      left: 1rem;
33
      top: 0.5rem;
34
    }
35
  }
36
  img {
37
    aspect-ratio: 7/10;
38
    object-fit: cover;
39
    width: 100%;
40
  }
41
  .c-footer {
42
    align-items: center;
43
    background-color: var(--bg-color);
44
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
45
    display: flex;
46
    gap: 0.5rem;
47
    justify-content: space-between;
48
    padding: 0.5rem;
49
  }
50
`
51
 
52
export const TopicProgress = styled(LinearProgress)`
53
  border-radius: 10px;
54
  flex: 1 1 50%;
55
  background-color: var(--bg-color);
56
  & .${linearProgressClasses.bar} {
57
    border-radius: 10px;
58
    background-color: var(--font-color);
59
  }
60
`
61
 
62
export const TopicsGrid = styled('section')`
63
  display: grid;
64
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
65
  gap: 1rem;
66
  margin-top: 1rem;
67
  width: 100%;
68
`
69
 
70
export const CapsuleRating = styled(Rating)`
71
  display: flex;
72
  span {
73
    font-size: inherit;
74
  }
75
  svg {
76
    color: var(--font-color);
77
  }
78
`