| @import "src/app/styles/colors"; |
| @import "src/app/styles/font"; |
| |
| .visits-chart { |
| display: flex; |
| box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey; |
| height: 192px; |
| flex-direction: column; |
| justify-content: space-between; |
| |
| &__header { |
| align-items: center; |
| color: $grey; |
| display: flex; |
| justify-content: space-between; |
| |
| span { |
| cursor: pointer; |
| |
| &:focus { |
| outline: none |
| } |
| |
| } |
| } |
| |
| &__title { |
| font-size: 20px; |
| font-weight: $fw-lighter; |
| margin: 0; |
| line-height: 40px; |
| } |
| |
| &__content { |
| display: flex; |
| flex-direction: column; |
| justify-content: space-between; |
| height: 75%; |
| |
| &-info { |
| align-items: center; |
| display: flex; |
| height: 96px; |
| justify-content: space-between; |
| |
| &-title { |
| margin: 0; |
| font-weight: $fw-lighter; |
| font-size: $fs-large; |
| line-height: 1.5; |
| letter-spacing: 0.15px; |
| color: $dark-grey; |
| } |
| |
| &-chart { |
| margin-left: 16px; |
| } |
| } |
| |
| &-stats { |
| display: flex; |
| justify-content: space-between; |
| |
| &-title { |
| margin: 0; |
| color: $grey; |
| font-weight: $fw-lighter; |
| font-size: $fs-small; |
| } |
| |
| &-data { |
| margin: 0; |
| line-height: 1.5; |
| font-weight: $fw-lighter; |
| font-size: $fs-medium; |
| color: $dark-grey; |
| } |
| } |
| } |
| } |
