scinote-web/app/assets/stylesheets/global_activities.scss

467 lines
8.5 KiB
SCSS
Raw Normal View History

// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
@import "constants";
@import "mixins";
.global-activities-container {
background: $color-white;
display: flex;
flex-direction: column;
height: calc(100vh - 89px);
padding: 0 15px;
2019-08-09 20:31:50 +08:00
&.task-activities {
height: calc(100vh - 136px);
2020-07-30 19:30:23 +08:00
padding-top: 20px;
}
.ga-top {
.ga-title {
border-bottom: 1px solid $color-gainsboro;
2020-07-13 20:51:51 +08:00
margin-top: 14px;
padding: 15px 0;
position: relative;
width: calc(100% + 30px);
}
2019-08-09 20:31:50 +08:00
.ga-actions {
align-items: center;
border-bottom: 1px solid $color-gainsboro;
display: flex;
height: 42px;
.ga-search-container {
2019-11-25 18:09:37 +08:00
display: none;
flex-grow: 1;
max-width: 500px;
position: relative;
&::placeholder {
color: $color-silver-chalice;
}
.search-field {
border: 1px solid $color-gainsboro;
border-radius: 4px;
color: $color-emperor;
display: block;
font-size: 14px;
height: 30px;
line-height: 28px;
outline: 0;
padding: 0 0 0 30px;
width: 100%;
}
.fa-search {
color: $color-silver-chalice;
font-size: 18px;
left: 0;
2019-08-09 20:31:50 +08:00
line-height: 30px;
position: absolute;
text-align: center;
top: 0;
width: 30px;
}
}
}
.ga-tags-container {
border-bottom: 1px solid $color-gainsboro;
display: flex;
2019-08-09 20:31:50 +08:00
min-height: 38px;
padding: 2px 0;
.clear-container {
flex-shrink: 0;
margin-left: 4px;
}
.ga-tags {
align-items: center;
2019-08-09 20:31:50 +08:00
display: flex;
flex-grow: 1;
2019-08-09 20:31:50 +08:00
flex-wrap: wrap;
&::after {
2019-08-09 20:31:50 +08:00
content: "";
flex-grow: 1000000000;
}
.ds-tags {
@include font-small;
align-items: center;
background: $color-concrete;
border-radius: $border-radius-tag;
2019-08-09 20:31:50 +08:00
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1);
display: flex;
flex-shrink: 0;
line-height: 13px;
margin: 2px 3px;
max-height: 24px;
2019-09-12 20:11:27 +08:00
max-width: 250px;
overflow: hidden;
padding: 5px 8px;
2019-09-12 20:11:27 +08:00
transition: .3s;
user-select: none;
2019-09-12 20:11:27 +08:00
&.closing {
margin: 2px 0;
max-width: 0;
padding: 5px 0;
}
&.stretch {
flex-grow: 1;
flex-shrink: 1;
}
.tag-label {
display: inline-block;
margin-right: 5px;
margin-top: 1px;
max-width: 500px;
overflow: hidden;
2019-09-12 20:11:27 +08:00
text-overflow: ellipsis;
white-space: nowrap;
width: auto;
}
.fas {
cursor: pointer;
flex-grow: 1;
font-size: 12px;
2019-08-09 20:31:50 +08:00
opacity: .7;
text-align: right;
}
}
}
}
}
.ga-bottom {
display: flex;
flex-grow: 1;
2019-09-05 15:05:25 +08:00
height: 100%;
}
.ga-main {
border-right: 1px solid $color-gainsboro;
flex-grow: 5;
height: 100%;
overflow: hidden;
position: relative;
2019-11-25 18:09:37 +08:00
.activities-container {
height: 100%;
padding-top: 10px;
position: absolute;
width: 100%;
}
.ga-activities-list {
.activities-day {
display: flex;
2019-03-15 23:02:38 +08:00
margin-bottom: 10px;
.date-container {
flex-shrink: 0;
padding-right: 20px;
.activities-group-expand-button {
user-select: none;
&:hover,
&:visited,
&:focus {
text-decoration: none;
}
.fas {
margin-right: 3px;
}
}
}
.date-activities {
flex-grow: 1;
}
}
}
.activities-counter-label {
margin-left: 5px;
}
.activities-group-expand-button {
color: $color-emperor;
.fas {
display: inline-block;
width: 10px;
}
}
.activity-card {
cursor: default;
2019-08-26 21:49:33 +08:00
margin-right: 15px;
2019-08-26 21:52:03 +08:00
padding: 5px 0 5px 40px;
&:hover {
background-color: $brand-primary-light;
2019-09-05 15:05:25 +08:00
border-radius: 5px;
}
.activity-text {
p {
margin: 0;
}
.atwho-user-container {
2019-08-09 20:31:50 +08:00
&:not(:first-child) {
.global-avatar-container {
height: 20px;
2019-08-09 20:31:50 +08:00
line-height: 20px;
margin-left: 0;
position: relative;
top: 1px;
width: 20px;
}
}
&:nth-child(1) {
height: 20px;
margin-left: -35px;
.global-avatar-container {
margin: 0 5px 0 0;
position: relative;
top: 10px;
}
}
}
}
.activity-info {
color: $color-silver-chalice;
2019-03-25 16:39:17 +08:00
display: flex;
min-height: 20px;
2019-03-25 16:39:17 +08:00
.activity-timestamp {
color: inherit;
flex-shrink: 0;
2019-03-25 16:39:17 +08:00
}
2019-04-10 18:37:13 +08:00
.navigational-breadcrumbs {
color: inherit;
display: flex;
flex-wrap: wrap;
2019-04-10 18:37:13 +08:00
.ga-breadcrumb {
align-items: center;
display: flex;
margin-left: 15px;
.fas,
img {
margin-right: 3px;
}
}
}
2019-04-10 18:37:13 +08:00
}
}
2019-03-27 16:43:04 +08:00
.no-activities-message {
margin-top: 20px;
}
}
}
.ga-side {
2019-09-12 20:11:27 +08:00
flex-basis: 450px;
flex-shrink: 0;
height: 100%;
margin-right: -15px;
overflow: hidden;
position: relative;
2019-11-25 18:09:37 +08:00
.filters-container {
height: 100%;
margin-bottom: 60px;
padding: 15px 20px;
position: absolute;
}
.filter-block {
display: inline-block;
width: 100%;
.title {
2020-01-31 21:11:37 +08:00
@include font-small;
float: left;
line-height: 20px;
margin-bottom: 5px;
width: calc(100% - 50px);
&.sub {
font-size: 12px;
}
}
.clear {
cursor: pointer;
display: none;
float: right;
font-weight: normal;
line-height: 12px;
margin-bottom: 0;
margin-top: 8px;
padding-bottom: 8px;
padding-top: 8px;
&:hover {
text-decoration: underline;
}
}
.select-container {
display: inline-block;
margin-bottom: 5px;
min-height: 36px;
width: 100%;
2019-08-09 20:31:50 +08:00
select {
display: none;
}
}
2019-11-25 18:09:37 +08:00
&.report-block {
margin-bottom: 60px;
}
}
.date-selector {
display: inline-block;
2019-08-09 20:31:50 +08:00
margin-bottom: 5px;
position: relative;
width: 100%;
.hot-buttons {
display: inline-block;
width: 100%;
.hot-button {
border: 0;
cursor: pointer;
float: left;
margin: 0;
opacity: .7;
text-align: left;
width: calc(50% - 25px);
2019-03-27 20:15:44 +08:00
&.selected {
background: $brand-light-blue;
opacity: 1;
}
&:nth-child(even) {
margin-left: 20px;
}
&:nth-child(odd) {
margin-right: 20px;
}
}
}
.from,
.to {
float: left;
position: relative;
width: calc(50% - 15px);
}
.separator {
background: $color-alto;
float: left;
height: 2px;
margin: 16px 10px;
position: relative;
width: 10px;
}
}
}
2019-09-12 20:11:27 +08:00
@media (max-width: 1200px) {
.ga-side {
flex-basis: 350px;
}
}
@media (max-height: 800px) {
.ga-side {
.date-selector {
.hot-buttons {
.hot-button {
margin: 5px 0;
}
}
}
}
}
2019-09-05 15:05:25 +08:00
@media (max-width: 900px) {
.ga-main {
.activities-day {
flex-direction: column;
.date-activities {
margin: 5px 10px 0 0;
padding-left: 10px;
.activities-counter-label {
border-bottom: 1px solid $color-gainsboro;
padding-bottom: 5px;
}
}
}
}
}
// Common code
.datetime-picker-container {
position: relative;
2019-03-27 21:39:29 +08:00
2019-11-25 18:09:37 +08:00
.fa-calendar-alt {
color: $color-silver-chalice;
font-size: 18px;
line-height: 34px;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 34px;
}
.calendar-input {
2019-03-27 21:39:29 +08:00
background-color: transparent !important;
box-shadow: none;
color: inherit;
2019-11-25 18:09:37 +08:00
cursor: pointer;
2019-03-27 21:39:29 +08:00
font-size: 13px;
padding-left: 5px;
2019-11-25 18:09:37 +08:00
padding-right: 34px;
position: relative;
z-index: 3;
2019-03-27 21:39:29 +08:00
&::placeholder {
2019-03-27 21:39:29 +08:00
color: $color-silver-chalice;
}
}
}