blur-admin/src/sass/app/_email.scss

1046 lines
17 KiB
SCSS

.letter-layout {
margin-top: -15px;
margin-right: -22px;
}
.mail-panel {
.panel-body{
padding-left: 0;
}
.panel-content {
padding: 15px 22px 0 0;
}
}
.mail-navigation-container {
width: 300px;
.mail-navigation {
cursor: pointer;
font-weight: $font-light;
font-size: 16px;
padding: 10px;
margin-left: 22px;
.new-mails {
display: inline-block;
float: right;
color: white;
background-color: $primary-light;
padding: 1px 6px;
margin-top: -2px;
font-size: 12px;
margin-right: 5px;
border-radius: 10px;
}
&.active {
background-color: $primary-light;
color: white;
&:hover {
background-color: $primary-light;
}
.new-mails {
color: $primary-light;
background-color: white;
}
transition: background-color .2s ease;
}
&:hover {
background-color: $border-light;
}
}
.compose-button {
margin: 7px 0;
.btn {
width: 140px;
color: white;
font-weight: $font-light;
background-color: $dribble-color;
}
}
}
.labels, .add-label-container {
margin-top: 16px;
margin-left: 22px;
}
.labels-title {
padding-left: 10px;
border-bottom: 1px solid $border-light;
.label-header {
line-height: 24px;
}
}
.label-item {
margin: 10px 0 0 10px;
}
.add-label-container {
padding-left: 10px;
font-size: 16px;
font-weight: $font-light;
.label-input-stub {
margin-left: 5px;
}
i {
cursor: pointer;
}
}
.margin-left {
margin-left: 10px;
}
.mail-messages-control {
padding: 10px;
ul.dropdown-menu {
margin-top: 5px;
}
.btn {
background-color: transparent;
border: 1px solid $border-light;
}
.more-button {
width: 60px;
font-size: 14px;
padding: 6px 5px;
}
span.select-all-label {
font-size: 13px;
font-weight: $font-light;
}
}
.message-container, .side-message-navigation, .mail-navigation-container {
float: left;
padding: 0 15px;
position: relative;
height: 550px;
overflow: scroll;
transition: width 0.5s;
}
.side-message-navigation {
padding: 10px 0 0 0;
width: calc(100% - 300px);
box-shadow: -4px 0 7px -2px $input-border;
.side-message-navigation-item {
border-bottom: 1px solid $input-border;
&.work {
border-left: 4px solid $primary-light;
}
&.study {
border-left: 4px solid $google-color;
}
&.family {
border-left: 4px solid $warning;
}
&.friend {
border-left: 4px solid $danger;
}
}
}
.mail-body-part {
text-overflow: ellipsis;
height: 16px;
overflow: hidden;
margin-top: 3px;
margin-left: 5px;
}
.mail-tag.tag.label {
display: inline-block;
font-size: 14px;
text-transform: uppercase;
margin-top: 10px;
width: 65px;
}
.phone-email {
i {
color: $primary-dark;
}
}
.message-container {
width: calc(100% - 300px);
padding: 15px 15px 10px 30px;
box-shadow: -4px 0 7px -2px $input-border;
overflow-x: hidden;
}
.little-human {
cursor: pointer;
transition: border-left 1.5s ease;
.little-human-picture {
width: 45px;
height: 45px;
border-radius: 23px;
margin: 7px 0 7px 7px;
transition: all .2s ease-in-out;
}
.name {
font-size: 14px;
vertical-align: super;
white-space: nowrap;
}
.name-wrap {
margin-left: 10px;
}
.date {
float: right;
margin-top: 10px;
display: inline-block;
font-size: 13px;
margin-left: 5px;
margin-right: 5px;
white-space: nowrap;
}
.tag {
vertical-align: super;
}
.subject {
font-size: 14px;
white-space: nowrap;
}
&:hover {
.little-human-picture {
animation: rotateReturnAnimation 0.5s;
}
color: $dribble-color;
}
}
.name-container{
margin-left: 10px;
}
.mail-checkbox {
margin-top: 5px;
margin-left: 6px;
.custom-checkbox{
margin-left: 5px;
}
}
.mail-panel .tag {
text-transform: lowercase;
font-size: 11px;
font-weight: $font-light;
width: 45px;
cursor: pointer;
display: inline-block;
&.label {
padding: .2em .5em;
border-radius: 2px;
line-height: 1.1;
}
&.work {
background-color: $primary;
}
&.study {
background-color: $warning;
}
&.family {
background-color: $success;
}
&.friend {
background-color: $danger;
}
}
.messages {
overflow: auto;
table {
width: 100%;
}
}
.important {
color: $warning;
}
.message-control-icon {
cursor: pointer;
font-size: 16px;
margin-right: 5px;
}
.person-info {
padding: 0 0 10px 15px;
margin-top: 10px;
.human-picture {
width: 80px;
height: 80px;
border-radius: 40px;
margin-top: -60px;
}
.name {
display: inline-block;
margin-left: 10px;
margin-top: 5px;
h2 {
margin-bottom: 0;
font-size: 24px;
}
}
}
.no-padding {
padding: 0;
}
.contact-info {
display: inline-block;
div {
margin-top: 10px;
}
&.phone-email {
.ion-iphone {
font-size: 32px;
width: 27px;
display: inline-block;
}
.phone {
font-size: 19px;
font-weight: $font-light;
vertical-align: super;
}
.ion-email {
font-size: 24px;
width: 27px;
display: inline-block;
}
.email {
font-size: 16px;
font-weight: $font-light;
vertical-align: super;
}
}
&.position-address {
div {
margin-top: 17px;
}
.position {
font-size: 20px;
font-weight: $font-light;
}
.address {
font-size: 16px;
font-weight: $font-light;
}
}
}
.message-details {
margin: 5px 0;
.subject {
font-size: 20px;
margin-right: 10px;
font-weight: $font-light;
}
.control-icons {
float: right;
font-size: 20px;
margin-right: 40px;
i {
cursor: pointer;
}
}
.date {
white-space: nowrap;
font-size: 12px;
}
}
.message-body {
margin: 20px 0;
font-weight: $font-light;
line-height: 18px;
p {
margin-bottom: 0;
}
}
.attachment {
margin: 5px 0;
.file-icon {
font-size: 24px;
cursor: pointer;
}
.file-name {
font-size: 14px;
margin-left: 3px;
position: relative;
top: -3px;
font-weight: $font-light;
}
.file-links {
font-size: 14px;
}
}
.line {
height: 1px;
background-color: $input-border;
opacity: 0.3;
}
.answer-button {
margin-left: 20px;
color: white;
font-size: 16px;
font-weight: $font-light;
padding-left: 40px;
padding-right: 40px;
background-color: $dribble-color;
&:hover {
color: white;
}
&:focus {
color: white;
}
&.focus {
color: white;
}
}
.answer-container {
float: right;
margin-top: 10px;
.btn {
margin-top: 3px;
background-color: $primary-light;
border: none;
color: white;
width: 100px;
transition: none;
&:hover {
transform: none;
background-color: $danger;
}
}
}
.second-name {
margin-top: -7px;
}
@keyframes rotateReturnAnimation {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
@media screen and (max-width: 1300px) {
.mail-navigation-container {
width: 260px
}
.side-message-navigation {
width: calc(100% - 260px);
}
.message-container {
width: calc(100% - 260px);
}
}
@media screen and (max-width: 1199px) {
.name-h {
display: inline;
}
.person-info .human-picture {
margin-top: -30px;
}
.second-name {
margin-top: 0;
}
}
@media screen and (max-width: 990px) {
.mail-navigation-container {
width: 200px
}
.side-message-navigation {
width: calc(100% - 200px);
}
.message-container {
width: calc(100% - 200px);
}
.person-info .human-picture {
width: 150px;
height: 150px;
border-radius: 75px;
margin: 5px auto;
display: block;
}
.person-info {
padding-left: 0;
}
.message-container {
padding-left: 15px;
}
.back-button, .contact-info {
margin-left: 15px;
}
.additional-info {
display: none;
}
.little-human .date {
font-size: 10px;
}
.margin-left {
margin-left: 5px;
}
}
@media screen and (max-width: 760px) {
.mail-navigation-container {
width: 175px
}
.side-message-navigation {
width: calc(100% - 175px);
}
.message-container {
width: calc(100% - 175px);
}
.mail-body-part {
display: none;
}
.little-human .little-human-picture {
width: 30px;
height: 30px;
}
.messages-control .more-button {
width: 50px;
}
}
@media screen and (max-width: 560px) {
.mail-navigation-container {
padding: 0;
width: 0;
&.expanded {
width: 155px;
}
.mail-navigation {
font-size: 14px;
.new-mails {
left: 82%;
padding: 0px 5px;
margin-top: 0px;
font-size: 12px;
}
.labels {
margin-left: 10px;
}
}
.compose-button .btn {
width: 110px;
}
}
.mail-messages-control{
.custom-checkbox{
margin-left: 5px;
margin-top: -2px;
}
}
.side-message-navigation, .message-container {
&.expanded {
width: 100%;
border: none;
box-shadow: none;
}
width: calc(100% - 155px);
}
div.toggle-navigation-container {
display: inline-block;
}
.little-human {
.name {
white-space: inherit;
}
.little-human-picture {
display: none;
}
}
.add-label-container {
padding-left: 0;
font-size: 13px;
font-weight: $font-light;
}
}
.compose-header {
padding: 8px 3px 8px 10px;
color: white;
font-weight: $font-light;
font-size: 13px;
background-color: $github-color;
}
.header-controls {
display: inline-block;
float: right;
i {
margin-right: 5px;
font-size: 14px;
cursor: pointer;
&:hover {
color: $primary-light;
}
}
}
.compose-container .ta-scroll-window > .ta-bind {
height: 290px;
overflow-y: scroll;
}
.compose-input {
border-left: 0;
border-right: 0;
border-top: 0;
}
.compose-footer {
padding: 2px 4px;
background-color: whitesmoke;
.btn-send {
background-color: $primary-light;
color: white;
padding: 2px 10px;
margin: 3px;
font-weight: $font-light;
}
.btn-default {
background-color: transparent;
border: none;
}
}
.footer-controls {
float: right;
margin: 6px;
}
.compose-footer-icon {
font-size: 18px;
margin-right: 5px;
cursor: pointer;
color: $help-text;
&:hover {
color: $primary-light;
}
}
.compose-container {
background-color: whitesmoke;
.ta-text.ta-editor {
background-color: white;
}
}
.footer-control-first {
border-right: 2px solid $help-text;
display: inline-block;
padding-right: 9px;
}
.toggle-navigation-container {
display: none;
vertical-align: middle;
margin-left: -1px;
&.detail-page{
margin-left: 10px;
}
}
.collapse-navigation-link {
font-size: 32px;
color: $default;
&:hover{
color: $default;
opacity: .8;
}
&:visited{
color: $default;
}
}
.collapsed {
width: 0;
}
.modal .modal-dialog.modal-compose {
width: 398px;
position: fixed;
bottom: 0;
right: 0;
max-height: 474px;
.form-control, .bootstrap-tagsinput input {
@include placeholderStyle($default-text, 1);
color: $default-text;
}
.ta-toolbar {
.btn {
border-width: 1px;
border-radius: 0;
color: $default-text;
border-color: transparent;
&.active {
box-shadow: none;
background-color: rgba(0, 0, 0, .12);
}
}
}
@include overrideColors($default-text)
}
body.badmin-transparent {
.mail-navigation-container {
overflow: hidden;
width: 250px;
padding: 0;
.mail-navigation {
margin-left: 0;
text-align: center;
.new-mails {
position: absolute;
left: 85%;
padding: 1px 6px;
border: 1px solid;
background-color: transparent;
}
&.active {
background: rgba(255, 255, 255, 0.2);
color: white;
transition: background-color .5s ease;
.new-mails {
background-color: transparent;
color: $default;
}
&:hover {
background-color: rgba(255, 255, 255, 0.3);
}
}
&:hover {
background-color: rgba(0, 0, 0, 0.1);
}
}
}
.message-container, .side-message-navigation{
width: calc(100% - 250px);
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-left: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: -1px 0px 0px 0px rgba(255, 255, 255, 0.12);
}
.side-message-navigation {
overflow: hidden;
padding: 0;
}
.labels-container {
text-align: center;
padding-right: 8px;
.label-item {
display: inline-block;
}
}
.labels, .add-label-container {
margin-left: 0;
}
.add-label-container {
margin-top: 10px;
text-align: center;
}
.labels-title {
text-align: center;
.label-header {
width: 100%;
margin-bottom: 5px;
}
padding-left: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}
.compose-button {
text-align: center;
.btn {
border: $default 2px solid;
background-color: transparent;
}
}
.side-message-navigation .side-message-navigation-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
&.work, &.study, &.family, &.friend {
border-left: none;
}
}
.mail-messages-control {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 1px 0px rgba(255, 255, 255, 0.12);
padding-right: 0;
.btn {
border: none;
width: auto;
&:focus, &:hover {
color:$default;
opacity: 0.8;
box-shadow: none;
}
}
.refresh-button{
margin-left: 10px;
}
}
.little-human {
font-weight: $font-light;
transition: background-color .5s;
&:hover {
color: $default;
background-color: rgba(255, 255, 255, 0.12);
}
.subject {
font-weight: $font-light;
margin: 0 30px;
font-size: 16px;
}
.date {
margin-right: 10px;
}
}
.mail-body-part {
width: calc(100% - 50px);
opacity: 0.8;
}
.name-h {
font-weight: $font-light;
&.second-name {
margin: 5px 0;
}
}
.person-info .human-picture {
margin-top: -65px;
}
.mail-tag.tag.label {
margin-top: 0;
}
.back-button {
margin-left: 45px;
}
.phone-email i {
color: $default;
}
.message-details {
padding: 5px 0 5px 30px;
}
.message-body, .attachment {
padding-left: 30px;
}
.person-info {
padding-left: 45px;
}
@media screen and (max-width: 1199px) {
.person-info {
.human-picture {
margin-top: -35px;
}
.name {
margin-top: 20px;
}
}
.mail-tag.tag.label {
margin-top: 10px;
}
}
@media screen and (max-width: 990px) {
.person-info {
.human-picture {
margin-top: 5px;
}
}
.mail-navigation-container {
width: 200px
}
.side-message-navigation {
width: calc(100% - 200px);
}
.message-container {
width: calc(100% - 200px);
}
.back-button {
margin-left: 10px;
}
.message-details {
padding: 5px 0 5px 0;
}
.message-body, .attachment {
padding-left: 0;
}
.person-info {
padding-left: 0;
}
}
@media screen and (max-width: 760px) {
.mail-navigation-container {
width: 175px
}
.side-message-navigation {
width: calc(100% - 175px);
}
.message-container {
width: calc(100% - 175px);
}
}
@media screen and (max-width: 560px) {
.mail-navigation-container {
width: 0;
&.expanded {
width: 155px;
}
.mail-navigation {
font-size: 14px;
.new-mails {
left: 82%;
padding: 0px 5px;
margin-top: 0px;
font-size: 12px;
}
.labels {
margin-left: 10px;
}
}
.compose-button .btn {
width: 110px;
}
}
.mail-messages-control{
.custom-checkbox{
margin-left: 5px;
margin-top: -2px;
}
}
.side-message-navigation, .message-container {
&.expanded {
width: 100%;
border: none;
box-shadow: none;
}
width: calc(100% - 155px);
}
.toggle-navigation-container {
display: inline-block;
}
.little-human {
.name {
white-space: inherit;
}
.little-human-picture {
display: none;
}
}
.add-label-container {
padding-left: 0;
font-size: 13px;
font-weight: $font-light;
}
}
}