285 lines
No EOL
6 KiB
Sass
285 lines
No EOL
6 KiB
Sass
$aside-section-padding: 28px 25px 12px 25px
|
|
$aside-section-padding-mobile: 24px 25px 10px 25px
|
|
|
|
.aside-section-wrapper
|
|
display: flex
|
|
flex: 1
|
|
flex-direction: column
|
|
// align-items: center
|
|
width: 100%
|
|
padding: $aside-section-padding
|
|
background-color: $color-bright
|
|
margin-bottom: 30px
|
|
|
|
&--transparent
|
|
background-color: unset
|
|
&--collapse
|
|
padding: unset
|
|
|
|
.add-entity-entries
|
|
|
|
& &__entry
|
|
margin-bottom: 10px
|
|
|
|
& &__label
|
|
font-size: 1.2em
|
|
margin-bottom: 8px
|
|
|
|
& &__button
|
|
|
|
.action-panel
|
|
margin-bottom: 20px
|
|
|
|
& &__label
|
|
// font-size: 1.2em
|
|
font-weight: bold
|
|
margin-bottom: 12px
|
|
|
|
& &__button-group
|
|
display: flex
|
|
justify-content: space-between
|
|
&--center
|
|
justify-content: center
|
|
|
|
& &__button
|
|
line-height: unset
|
|
height: unset
|
|
padding: 4px 15px
|
|
margin: 0 5px
|
|
// width: 100%
|
|
|
|
.mark-panel
|
|
margin-bottom: 20px
|
|
|
|
& &__status
|
|
font-weight: bold
|
|
|
|
& &__rating-star
|
|
position: relative
|
|
top: 2px
|
|
|
|
& &__actions
|
|
float: right
|
|
& form
|
|
display: inline
|
|
|
|
& &__time
|
|
color: $color-light
|
|
margin-bottom: 10px
|
|
|
|
& &__content
|
|
|
|
& &__clear
|
|
@include clear
|
|
|
|
.review-panel
|
|
& &__label
|
|
font-weight: bold
|
|
& &__actions
|
|
float: right
|
|
& &__time
|
|
color: $color-light
|
|
margin-bottom: 10px
|
|
|
|
& &__review-title
|
|
display: block
|
|
margin-bottom: 15px
|
|
font-weight: bold
|
|
|
|
& &__clear
|
|
@include clear
|
|
|
|
.user-profile
|
|
& &__header
|
|
display: flex
|
|
align-items: flex-start
|
|
margin-bottom: 15px
|
|
|
|
& &__avatar
|
|
width: 72px
|
|
|
|
& &__username
|
|
font-size: large
|
|
margin-left: 10px
|
|
margin-bottom: 0
|
|
|
|
& &__bio
|
|
|
|
& &__report-link
|
|
color: $color-light
|
|
|
|
.user-relation
|
|
& &__label
|
|
display: inline-block
|
|
font-size: large
|
|
margin-bottom: 10px
|
|
|
|
& &__more-link
|
|
margin-left: 5px
|
|
|
|
& &__related-user-list
|
|
display: flex
|
|
justify-content: flex-start
|
|
|
|
& &__related-user
|
|
flex-basis: 25%
|
|
padding: 0px 3px
|
|
text-align: center
|
|
display: inline-block
|
|
& > a
|
|
&:hover
|
|
color: $color-secondary
|
|
|
|
& &__related-user-avatar
|
|
width: 48px
|
|
|
|
& &__related-user-name
|
|
color: inherit
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
|
|
.report-panel
|
|
& &__label
|
|
display: inline-block
|
|
margin-bottom: 10px
|
|
|
|
& &__report-list
|
|
|
|
& &__report
|
|
margin: 2px 0
|
|
|
|
& &__user-link
|
|
margin: 0 2px
|
|
|
|
& &__all-link
|
|
margin-left: 5px
|
|
|
|
.relation-dropdown
|
|
& &__button
|
|
display: none
|
|
|
|
.entity-card
|
|
display: flex
|
|
margin-bottom: 10px
|
|
flex-direction: column
|
|
&--horizontal
|
|
flex-direction: row
|
|
|
|
& &__img
|
|
height: 150px
|
|
|
|
& &__rating-star
|
|
position: relative
|
|
top: 4px
|
|
left: -3px
|
|
|
|
& &__rating-score
|
|
position: relative
|
|
top: 1px
|
|
margin-left: 2px
|
|
|
|
& &__title
|
|
margin-bottom: 10px
|
|
margin-top: 5px
|
|
|
|
& &__info-wrapper
|
|
&--horizontal
|
|
margin-left: 20px
|
|
|
|
& &__img-wrapper
|
|
flex-basis: 100px
|
|
|
|
|
|
// Small devices (landscape phones, 576px and up)
|
|
@media (max-width: $small-devices)
|
|
.add-entity-entries
|
|
display: block !important
|
|
& &__button
|
|
width: 100%
|
|
|
|
.aside-section-wrapper
|
|
&:first-child
|
|
margin-right: 0 !important
|
|
margin-bottom: 0 !important
|
|
&--singular:first-child
|
|
margin-bottom: 20px !important
|
|
// &--no-padding
|
|
// padding: $aside-section-padding-mobile !important
|
|
// margin-top: 0 !important
|
|
.action-panel
|
|
flex-direction: column !important
|
|
|
|
.entity-card
|
|
&--horizontal
|
|
flex-direction: column !important
|
|
// flex-direction: column !important
|
|
& &__info-wrapper
|
|
margin-left: 10px !important
|
|
&--horizontal
|
|
margin-left: 0 !important
|
|
// Medium devices (tablets, 768px and up)
|
|
@media (max-width: $medium-devices)
|
|
pass
|
|
// Large devices (desktops, 992px and up)
|
|
@media (max-width: $large-devices)
|
|
.add-entity-entries
|
|
display: flex
|
|
justify-content: space-around
|
|
|
|
.aside-section-wrapper
|
|
padding: $aside-section-padding-mobile
|
|
|
|
margin-top: 20px
|
|
// &:not(:first-child)
|
|
&:not(:last-child)
|
|
margin-right: 20px
|
|
&--collapse
|
|
padding: $aside-section-padding-mobile !important
|
|
margin-top: 0
|
|
margin-bottom: 0
|
|
&:first-child
|
|
margin-right: 0
|
|
&--no-margin
|
|
margin: 0
|
|
|
|
.action-panel
|
|
flex-direction: row
|
|
& &__button-group
|
|
justify-content: space-evenly
|
|
|
|
.relation-dropdown
|
|
margin-bottom: 20px
|
|
& &__button
|
|
padding-bottom: 10px
|
|
background-color: $color-bright
|
|
width: 100%
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
|
|
& &__button > .icon-arrow
|
|
transition: transform 0.3s
|
|
|
|
& &__button:hover > .icon-arrow
|
|
transform: rotate(-180deg)
|
|
|
|
& &__button:hover + &__body
|
|
max-height: 500px
|
|
transition: max-height 0.6s ease-in
|
|
|
|
& &__body
|
|
background-color: $color-bright
|
|
max-height: 0
|
|
transition: max-height 0.6s ease-out
|
|
overflow: hidden
|
|
|
|
.entity-card
|
|
flex-direction: row
|
|
& &__info-wrapper
|
|
margin-left: 30px
|
|
// Extra large devices (large desktops, 1200px and up)
|
|
@media (max-width: $x-large-devices)
|
|
pass |