FILE / Unmei/Frontend
src/components/User/User.sass
Исходный файл и его история в репозитории.
144 lines
3.1 KiB
Sass
144 lines
3.1 KiB
Sass
@import "../App/App"
|
|
|
|
.User
|
|
&__Activate
|
|
background-color: var(--sec-bg-color)
|
|
border-radius: $borderRadius
|
|
padding: .5rem
|
|
|
|
|
|
&__Info
|
|
background-color: var(--sec-bg-color)
|
|
border-radius: $borderRadius
|
|
display: flex
|
|
align-items: flex-end
|
|
flex-direction: column
|
|
|
|
@media (max-width: 250px)
|
|
flex-direction: column
|
|
|
|
&_Cover
|
|
height: 20rem
|
|
width: 100%
|
|
background-position: center
|
|
background-size: cover
|
|
background-repeat: no-repeat
|
|
|
|
@media (max-width: 500px)
|
|
height: 10rem !important
|
|
|
|
&_Main
|
|
display: flex
|
|
align-items: flex-end
|
|
background-color: var(--sec-bg-color)
|
|
width: 100%
|
|
padding: 0.5rem
|
|
border-radius: 0 0 $borderRadius $borderRadius
|
|
box-sizing: border-box
|
|
|
|
&_Nick
|
|
font-size: 1.5rem
|
|
font-weight: 600
|
|
|
|
&_Group
|
|
border: 1px solid #eeeeee
|
|
border-radius: 4px
|
|
padding: .1rem
|
|
text-align: center
|
|
font-size: 1rem
|
|
font-weight: 300
|
|
|
|
&_Avatar
|
|
background-size: cover
|
|
background-position: center
|
|
width: 96px
|
|
height: 96px
|
|
border-radius: 50%
|
|
margin-right: .5rem
|
|
|
|
&__Statistic
|
|
background-color: var(--sec-bg-color)
|
|
border-radius: $borderRadius
|
|
padding: $primaryPadding
|
|
margin-top: 1rem
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
|
|
&_Item
|
|
width: calc(100% / 5 - 1rem)
|
|
@media (max-width: 1060px)
|
|
width: calc(100% / 4 - 1rem)
|
|
@media (max-width: 900px)
|
|
width: calc(100% / 3 - 1rem)
|
|
@media (max-width: 680px)
|
|
width: calc(100% / 2 - 1rem)
|
|
@media (max-width: 460px)
|
|
width: calc(100% - 1rem)
|
|
|
|
|
|
padding: .5rem 0
|
|
margin: 0 .5rem
|
|
|
|
.User__Statistic_Title
|
|
font-weight: 500
|
|
margin-bottom: .2rem
|
|
|
|
.User__Statistic_Blocks
|
|
display: flex
|
|
flex-direction: column
|
|
color: white
|
|
|
|
@media (max-width: 300px)
|
|
width: 100%
|
|
|
|
.User__Statistic_Block
|
|
display: flex
|
|
padding: .5rem
|
|
height: 1.2rem !important
|
|
|
|
&:first-child
|
|
border-radius: $borderRadius $borderRadius 0 0
|
|
|
|
&:last-child
|
|
border-radius: 0 0 $borderRadius $borderRadius
|
|
|
|
.Planned
|
|
background: #339999
|
|
|
|
.Completed
|
|
background: #339933
|
|
|
|
.Dropped
|
|
background: #993333
|
|
|
|
.InProgress
|
|
background: #993399
|
|
|
|
.Deferred
|
|
background: #333333
|
|
|
|
.Planned:after, .Completed:after, .Dropped:after, .InProgress:after, .Deferred:after
|
|
content: attr(data-count)
|
|
margin-left: 1rem
|
|
height: 1rem
|
|
|
|
&__List
|
|
background-color: var(--sec-bg-color)
|
|
border-radius: $borderRadius
|
|
padding: $primaryPadding
|
|
margin-top: 1rem
|
|
|
|
&_Title
|
|
font-size: 1.2rem
|
|
margin: .3rem 0
|
|
display: flex
|
|
justify-content: space-between
|
|
|
|
&_Items
|
|
padding: $blockPadding * 3
|
|
background-color: var(--block-sec-color)
|
|
border-radius: $borderRadius
|
|
display: flex
|
|
flex-wrap: wrap
|
|
justify-content: center |