public.component.assets.css.less.page.inbox.less Maven / Gradle / Ivy
.enable_inbox() when(@enable-inbox = true) {
.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: 50%;
margin-left: -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: @font-size-inbox-tab-large;
> .@{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: 50%;
margin-left: -8px;
border-width:8px 10px;
}
}
}
@media only screen and (max-width: @screen-tiny-max) {//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-navbar , .message-item {
input.ace + .lbl::before {
top: auto;
}
}
.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: 100%;
margin-right: 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;
}
&.message-unread .message-content .time {
font-weight: normal;
}
.attachment {
color: #999;
font-size: @font-size-inbox-attachment-icon;
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: @font-size-inbox-start-icon;
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;
}
.dropdown-menu > li > a >.mail-tag {
vertical-align: inherit;
}
@media only screen and (max-width: @screen-sm-max) {
.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;
text-align: center;
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: @screen-xs) {
.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 6px;
margin-left: 1px;
margin-right: 1px;
background-color: transparent;
border: 1px solid transparent;
}
&.disabled > span {
color: #BBBBBB;
cursor: default;
background-color: transparent;
border-color: transparent;
}
> a:hover {
border-color: lighten(desaturate(#2283C5 , 25%) , 25%);
color: #2283C5;
text-decoration: none;
background-color: #FFF;
}
}
}
input[type=text] {
font-size: @baseFontSize - 1;
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: 26px;
display: inline-block;
text-align: center;
padding: 0;
}
> span , &.disabled > 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;
> .@{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;
display: inline-block;
> .@{icon} {
display: inline-block;
width: 16px;
margin-right: 2px;
vertical-align: middle;
}
&: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;
vertical-align: middle;
}
}
.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: 5px;
top: auto;
bottom: 11px;
}
.message-navbar .messagebar-item-left ~ .nav-search {
left: 60px;
}
.message-form {
border:1px solid #ddd;
border-top:none;
padding-top:22px;
}
@media only screen and (max-width: @screen-xs) {
.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;
vertical-align: middle;
}
.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: @screen-xs) {
.message-condensed .message-bar {
min-height:42px;
}
}
.enable_inbox_tabless() when(@enable-inbox-tabless = true) {
//alternative to tabs
.inbox-folders .btn-block {
margin-top:0;
}
@media only screen and (max-width: @screen-xs-max) {
.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: @screen-tiny) {
.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 > .@{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);
}
}
.enable_inbox_tabless();
}
.enable_inbox();© 2015 - 2025 Weber Informatics LLC | Privacy Policy