src/views/CreateProject/SASS/ProjectInvite.scss
@import '../../../common/SASS/palette';
@import '../../../common/SASS/mixins';
div.project-invite {
background-color: $almost-black;
border-radius: 5px;
font-size: 0.8rem;
letter-spacing: 0.11rem;
margin-top: 0.4rem;
box-sizing: border-box;
@include themify($themes) {
background-color: $light-grey;
}
display: flex;
flex-direction: row;
padding: 10px;
width: 100%;
cursor: default;
&:hover,
&:focus {
outline: auto 4px -webkit-focus-ring-color;
}
&:not(:focus):invalid {
border: 2px solid $alert;
}
justify-content: flex-start;
align-content: flex-start;
height: 65px;
.left {
display: flex;
width: 50%;
height: 100%;
.avatar {
height: 54px;
width: 54px;
padding: 0px;
img {
height: 80%;
// width: 80%;
border-radius: 50%;
}
}
.info {
width: 100%;
margin-left: 1.5rem;
margin-right: 0.4rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow: hidden;
p {
overflow: hidden;
width: 100%;
text-align: left;
text-overflow: ellipsis;
}
.status {
margin-top: 4px;
color: gray;
}
}
} //end left
.actions {
display: flex;
width: 50%;
position: relative;
display: flex;
justify-content: space-between;
.invite-edit-div {
// background:$dark-grey;
width: 48%;
cursor: pointer;
.selectpicker {
appearance: none;
background: url('../../../ASSETS/options-icon.png') 100% / 19% no-repeat
$dark-grey;
transition: background 0.2s, color 0.2s;
width: 100%;
height: 100%;
margin-top: 0;
cursor: pointer;
outline: none;
padding-left: 20%;
border-radius: 3px;
}
.special {
width: 150px;
background-color: $field-bg;
color: $grey;
outline-color: none;
&:hover{
background-color: $dark-grey !important;
color: $field-bg !important;
}
}
.invite-edit-drop:hover {
background: url('../../../ASSETS/options-icon.png') 100% / 19% no-repeat $grey;
@include themify($themes) {
background: url('../../../ASSETS/options-icon.png') 100% / 19% no-repeat
$shadow-grey;
}
color: black;
}
}
.close-collab-icon-div {
display: flex;
align-items: center;
background: #6d6d72;
border-radius: 3px;
padding: 0% 13%;
cursor: pointer;
@include themify($themes) {
background: $grey;
}
transition: background 0.2s, color 0.2s;
.close-collab-icon {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: flex-end;
cursor: pointer;
} //end close-collab-icon
} //end close-collab-icon-div
.close-collab-icon-div:hover {
background: $grey;
color: black;
@include themify($themes) {
background: $shadow-grey;
}
}
} //end actions
} //end project-invite
.project-invite:hover {
outline: none !important;
}