.inbox-tabs.nav-tabs { > li { > a { background-color:#FAFAFA; } &.active:not(.open) > a { & , &:hover, &:focus { background-color:#F1F5FA; box-shadow:0 -2px 3px 0 rgba(0, 0, 0, 0.1); color:#48768E; } } > a.btn-new-mail { background-color:transparent; border:none !important; padding:0 !important; > .btn { border-width:0 !important; border-radius:3px !important; padding:0 6px !important; position:relative; transition:none !important; } } &.active > a.btn-new-mail { box-shadow:none !important; > .btn:before { content:""; display:block; position:absolute; top:100%; left:35%; left:~"calc(50% - 6px)"; border-width:6px 8px; border-style:solid; border-color:transparent; border-top-color:inherit; } } } &.tab-size-bigger > li { > a { padding:5px 15px 7px; font-size:14px; > [class*="icon-"]:first-child { margin-bottom:5px; } &.btn-new-mail > .btn{ padding:10px !important; border-radius:7px !important; } } &.active > a.btn-new-mail { margin-top:0 !important; top:1px; } &.active > a.btn-new-mail > .btn:before { left:35%; left:~"calc(50% - 8px)"; border-width:8px 10px; } } } @media only screen and (max-width: 475px) { .inbox-tabs > .li-new-mail { display:block; text-align:right; margin-bottom:8px !important; float:none !important; } .inbox-tabs > .li-new-mail > .btn-new-mail { display:inline-block; width:auto; } } .message-container { position:relative; } .message-list { position:relative; } .message-item { border:1px solid #EAEDF1; border-bottom-width:0; padding:12px 12px 14px; line-height:18px; position:relative; background-color:#FFF; &:first-child { border-top-width:0; } &:hover { border-color:#E2EAF2; background-color:#F2F6F9; + .message-item { border-top-color:#E2EAF2; &.selected { border-top-color:#FFF; } } } &.selected { background-color:#EFF4F7; border-color:#FFF #E2EAF2; + .message-item{ border-top-color:#FFF; &:hover + .message-item { border-top-color:#FFF; } } } } .message-item { .sender { margin:0 6px 0 4px; vertical-align:middle; color:#467287; display:inline-block; width:110px; height:18px; text-overflow:ellipsis; overflow:hidden; white-space: nowrap; cursor:pointer; } &.message-unread .sender { color:#6A9CBA; font-weight:bold; } .summary { vertical-align:middle; display:inline-block; position:relative; margin-left:30px; max-width:250px; max-width:~"calc(100% - 300px)"; min-width:200px; white-space: nowrap; .text { color:#555; vertical-align:middle; display:inline-block; width:auto; max-width:100%; height:18px; text-overflow:ellipsis; overflow:hidden; white-space: nowrap; cursor:pointer; &:hover { text-decoration:underline; } } .message-flags { display:block; position:absolute; right:101%; right:~"calc(100% + 4px)"; height:18px; white-space: nowrap; } } &.message-unread .summary .text { color:#609FC4; font-weight:bold; } .time { float:right; width:60px; height:18px; text-overflow:ellipsis; overflow:hidden; white-space: nowrap; color:#666; } &.message-unread .time { font-weight:bold; color:#609FC4; } .attachment{ color:#999; font-size:18px; vertical-align:middle; float:right; margin:0 12px; position:relative; } &.message-unread .attachment{ color:#4F99C6; } } .message-content .time { font-weight:normal; } .message-star{ vertical-align:middle; margin:2px 4px 0 6px; font-size:15px; cursor:pointer; &:hover { color:@ace-orange2 !important; text-decoration:none; } } .mail-tag:empty { display:inline-block; width:8px; height:11px; padding:0; line-height:normal; vertical-align:middle; margin:0 1px 0 0; } .badge.mail-tag{ border-radius:2px; } @media only screen and (max-width: 979px) { .message-item .summary { min-width:0; } .message-item .sender { width:100px; } } @media only screen and (max-width: 550px) { .message-item .summary { margin:8px 0 0 32px; max-width:95%; min-width:0; display:block; } .message-item .sender { width:auto; max-width:150px; } .message-item .summary .text { max-width:95%; } } .btn-message , .btn-message:hover , .btn-message:focus, .btn-message:active, .open .btn-message.dropdown-toggle { background-color:#FFF !important; border:1px solid #94B9CE !important; color:#7CA3BA !important; text-shadow:none !important; } .message-content { padding:16px 12px; border:1px solid #E9E9E9; .box-shadow(~"0 0 1px 1px rgba(0,0,0,0.02)"); background-color:rgba(255,255,255,0.8); border-top-width:0; .message-item & { margin-top:16px; border-top-width:1px; } } .message-body { padding:0 9px; color:#6A7177; } .message-navbar { line-height:24px; padding:10px 12px; border:1px solid #D6E1EA; border-color:#D6E1EA transparent; background-color:#F1F5FA; position:relative; } .message-navbar , .message-content { .dropdown-toggle { color:#777; &:hover, &:focus { text-decoration:none; color:#2283C5; } } } .message-bar { display:inline-block; min-height:28px; } @media only screen and (max-width: 480px) { .message-bar { display:block; min-height:60px; } } .message-footer { background-color:#F1F1F1; padding:12px 16px; border:1px solid #E6E6E6; border-width:1px 0; border-top:1px solid #E4E9EE; .pagination { margin:0; > li { margin:0; padding:0; > a , > span { color:#777; padding: 3px; margin-left:3px; margin-right:3px; background-color: transparent; border: none; } &.disabled > span { color:#BBBBBB; cursor:default; } > a:hover { color:#2283C5; text-decoration:none; } } } input[type=text] { font-size:12px; width:34px; height:24px; line-height:20px; margin-bottom:0; padding:3px; vertical-align:middle; text-align:center; } } .message-footer-style2 .pagination > li { > a , > span { border:1px solid #B5B5B5; border-radius:100% !important; width:26px; height:26px; line-height:24px; display:inline-block; text-align:center; padding:0; } > span { border-color:#CCC; } > a:hover { border-color:#84AFC9; background-color:#F7F7F7; } } .message-item.message-inline-open { background-color:#F2F6F9; border:1px solid #DDD; border-bottom-color:#CCC; &:first-child { border-top-color:#EEE; } &:last-child { border-bottom-color:#DDD; } + .message-item { border-bottom-color:transparent; } } .message-loading-overlay { position:absolute; z-index:14; top:0;bottom:0;right:0;left:0; background-color:rgba(255,255,255,0.5); text-align:center; > [class*="icon-"] { position:absolute; top:15%; left:0; right:0; text-align:center; } } .message-content { .sender { color:#6A9CBA; font-weight:bold; width:auto; text-overflow:inherit; vertical-align:middle; margin:0; } .time { width:auto; text-overflow:inherit; white-space:normal; float:none; vertical-align:middle; } } ul.attachment-list { margin:6px 0 4px 8px; > li{ margin-bottom:3px; } } .message-attachment { padding-left:10px; padding-right:10px; } .attached-file { color:#777; width:200px; > [class*="icon-"] { display:inline-block; width:16px; margin-right:2px; } &:hover { text-decoration:none; color:#438EB9; .attached-name { color:#2283C5; } } .attached-name { display:inline-block; max-width:175px; text-overflow:ellipsis; overflow:hidden; white-space: nowrap; } } .messagebar-item-left , .messagebar-item-right { position:absolute; bottom:14px; left:12px; text-align:left; } .messagebar-item-right { right:12px; left:auto; } .message-navbar .nav-search { right:auto; left:60px; top:auto; bottom:11px; } .message-form { border:1px solid #ddd; border-top:none; padding-top:22px; } @media only screen and (max-width: 480px) { .message-form { padding-left:16px; padding-right:16px; } } .message-form { .form-actions { margin-bottom:0; } .wysiwyg-editor { overflow:auto; min-height:150px; max-height:250px; height:auto; } } .btn-send-message { position:relative; top:6px; } .btn-back-message-list { color:#777; &:hover { color:#478FCA; text-decoration:none; } } .message-condensed { .message-item { padding-top:8px; padding-bottom:9px; } .message-navbar , .message-footer { padding-top:7px; padding-bottom:7px; } .messagebar-item-left , .messagebar-item-right { bottom:9px; } .message-navbar .nav-search { bottom:7px; } } @media only screen and (max-width: 480px) { .message-condensed .message-bar { min-height:42px; } } //alternative to tabs .inbox-folders .btn-block { margin-top:0; } @media only screen and (max-width: 767px) { .inbox-folders.inbox-folders-responsive .btn-block { width:24%; } } @media only screen and (max-width: 600px) { .inbox-folders.inbox-folders-responsive .btn-block { width:48%; } } @media only screen and (max-width: 320px) { .inbox-folders.inbox-folders-responsive .btn-block { width:99%; } } .inbox-folders .btn-lighter , .inbox-folders .btn-lighter.active { background-color:#F4F4F4 !important; text-shadow:none !important; color:#7C8395 !important; border:1px solid #FFF !important; padding:5px 11px; } .inbox-folders .btn-lighter.active { background-color:#EDF2F8 !important; color:#53617C !important; } .inbox-folders .btn-lighter:hover { background-color:#EFEFEF !important; color:#6092C4 !important; } .inbox-folders .btn > [class*="icon-"]:first-child { display:inline-block; width:14px; text-align:left; } .inbox-folders .btn-lighter + .btn-lighter { border-top-width:0 !important; } .inbox-folders .btn.active:before{ display:block; content:""; position:absolute; top:1px; bottom:1px; left:-1px; border-left:3px solid #4F99C6; } .inbox-folders .btn.active:after{ display:none; } .inbox-folders .btn .counter { border-radius:3px; position:absolute; right: 8px; top:8px; padding-left:6px; padding-right:6px; .opacity(0.75); } .inbox-folders .btn:hover .badge{ .opacity(1); }