openreplay/frontend/app/components/Session_/EventsBlock/event.css
2021-05-01 15:12:01 +05:30

160 lines
No EOL
2.6 KiB
CSS

.contextMenu {
position: absolute;
top: 27px;
right: 15px;
padding: 2px 3px;
background: $white;
border: 1px solid $gray-light;
border-radius: 3px;
cursor: pointer;
color: $gray-medium;
font-size: 12px;
z-index: 2;
}
.event {
position: relative;
background: #fff;
border-radius: 3px;
user-select: none;
/* box-shadow: 0px 1px 3px 0 $gray-light; */
border: 1px solid #EEE;
transition: all 0.2s;
cursor: pointer;
&:hover {
background-color: $active-blue;
border: 1px solid $active-blue-border;
}
& .title {
font-size: 13px;
}
& .topBlock {
min-height: 30px;
position: relative;
padding: 8px 10px;
}
& .checkbox {
position: absolute;
left: 10px;
top: 8px;
bottom: 0;
/* margin: auto; */
display: none;
/* align-items: center; */
}
&.menuClosed:hover {
& .edit {
opacity: 1;
transition: all 0.2s;
}
}
&.menuClosed.showSelection {
&:hover, &.selected {
background-color: #EFFCFB;
& .checkbox {
display: flex;
}
& .icon {
opacity: 0;
}
}
}
&.highlighted {
background-color: $active-blue;
transition: all 0.2s;
box-shadow: 0px 2px 10px 0 $gray-light;
border-color: $active-blue-border;
}
&.red {
border-color: $red;
}
}
.firstLine {
display: flex;
justify-content: space-between;
align-items: center;
}
.main {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
align-items: start;
}
.type {
color: $gray-dark;
font-size: 12px;
text-transform: capitalize;
font-weight: bold;
}
.data {
margin-left: 5px;
color: $gray-medium;
font-size: 12px;
max-width: 100%;
/* overflow: hidden; */
/* text-overflow: ellipsis; */
}
.badge {
display: inline-block;
padding: 0;
border-radius: 3px;
font-size: 9px;
/* margin-left: 28px; */
max-width: 170px;
word-wrap: break-word;
line-height: normal;
color: #999;
text-transform: none;
}
.icon {
margin-right: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
& i {
width: 18px;
height: 18px;
}
}
.clickType, .inputType {
/* border: 1px solid $gray-light; */
background-color: $gray-lightest;
cursor: pointer;
}
.clickrageType {
background-color: #FFF3F3;
border: 1px solid #CC0000;
box-shadow:
/* The top layer shadow */
/* 0 1px 1px rgba(0,0,0,0.15), */
/* The second layer */
2px 2px 1px 1px white,
/* The second layer shadow */
2px 2px 0px 1px rgba(0,0,0,0.4);
/* Padding for demo purposes */
/* padding: 12px; */
}
.highlight {
border: solid thin red;
}