mirror of https://github.com/akveo/blur-admin
refactor(email): apply configurable style
alex
kostya.danovsky
parent
aae31155fd
commit
c0d40df904
|
|
@ -3,8 +3,8 @@
|
|||
<div ba-panel ba-panel-class="xmedium-panel mail-panel">
|
||||
<div class="letter-layout">
|
||||
<div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}">
|
||||
<div class="compose-button">
|
||||
<button type="button" class="btn compose-button" ng-click="tabCtrl.showCompose('','','')">
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-default compose-button" ng-click="tabCtrl.showCompose('','','')">
|
||||
Compose
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,27 +4,34 @@
|
|||
}
|
||||
|
||||
.mail-panel {
|
||||
&.panel>.panel-body{
|
||||
&.panel > .panel-body {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-navigation-container {
|
||||
float: left;
|
||||
position: relative;
|
||||
height: 550px;
|
||||
transition: width 0.5s;
|
||||
color: $default-text;
|
||||
width: 200px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
.mail-navigation {
|
||||
cursor: pointer;
|
||||
font-weight: $font-light;
|
||||
font-size: 16px;
|
||||
text-align: left;
|
||||
padding: 10px 10px 10px 30px;
|
||||
margin-left: 0;
|
||||
transition: 0.8s padding ease;
|
||||
.new-mails {
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
padding: 1px 6px;
|
||||
border: 1px solid;
|
||||
background-color: $primary-light;
|
||||
background-color: transparent;
|
||||
margin-top: -2px;
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
|
|
@ -32,33 +39,31 @@
|
|||
transition: 0.8s left ease;
|
||||
}
|
||||
&.active {
|
||||
background-color: $primary-light;
|
||||
background: rgba(black, 0.2);
|
||||
color: white;
|
||||
transition: background-color .5s ease;
|
||||
&:hover {
|
||||
background-color: $primary-light;
|
||||
background-color: rgba(black, 0.3);
|
||||
}
|
||||
.new-mails {
|
||||
color: $primary-light;
|
||||
background-color: $default;
|
||||
background-color: transparent;
|
||||
}
|
||||
transition: background-color .2s ease, 0.8s padding ease;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $border-light;
|
||||
background-color: rgba(black, 0.1);
|
||||
}
|
||||
}
|
||||
.compose-button {
|
||||
margin: 7px 0;
|
||||
.btn {
|
||||
width: 140px;
|
||||
font-weight: $font-light;
|
||||
background-color: $dribble-color;
|
||||
}
|
||||
.btn.compose-button {
|
||||
width: 140px;
|
||||
font-weight: $font-light;
|
||||
border: $border 2px solid;
|
||||
background-color: transparent;
|
||||
margin: 15px 0 ;
|
||||
}
|
||||
}
|
||||
|
||||
.labels {
|
||||
margin-top: 14px;
|
||||
margin-left: 22px;
|
||||
}
|
||||
|
||||
.labels-container {
|
||||
|
|
@ -73,18 +78,20 @@
|
|||
|
||||
.labels-title {
|
||||
padding-left: 10px;
|
||||
border-bottom: 1px solid $border-light;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
|
||||
.label-header {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.label-item {
|
||||
margin: 10px 0 0 10px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.add-label-container {
|
||||
padding-left: 10px;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: $font-light;
|
||||
.label-input-stub {
|
||||
|
|
@ -109,7 +116,12 @@
|
|||
|
||||
.btn {
|
||||
background-color: transparent;
|
||||
border: 1px solid $border-light;
|
||||
width: auto;
|
||||
&:focus, &:hover, &:active {
|
||||
color: $default-text;
|
||||
opacity: 0.8;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.more-button {
|
||||
|
|
@ -118,76 +130,69 @@
|
|||
padding: 6px 5px;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
span.select-all-label {
|
||||
font-size: 13px;
|
||||
font-weight: $font-light;
|
||||
}
|
||||
}
|
||||
|
||||
.message-container, .side-message-navigation, .mail-navigation-container {
|
||||
.message-container, .side-message-navigation {
|
||||
float: left;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
height: 550px;
|
||||
transition: width 0.5s;
|
||||
width: calc(100% - 200px);
|
||||
border-bottom-right-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.12);
|
||||
box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.side-message-navigation {
|
||||
padding: 10px 0 0 0;
|
||||
padding: 0;
|
||||
width: calc(100% - 200px);
|
||||
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;
|
||||
}
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.mail-body-part {
|
||||
width: calc(100% - 30px);
|
||||
text-overflow: ellipsis;
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
margin-top: 3px;
|
||||
margin-left: 5px;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.mail-tag.tag.label {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
margin-top: 10px;
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
.phone-email {
|
||||
i {
|
||||
color: $primary-dark;
|
||||
color: $default-text;
|
||||
}
|
||||
}
|
||||
|
||||
.message-container {
|
||||
width: calc(100% - 300px);
|
||||
padding: 15px 15px 10px 30px;
|
||||
box-shadow: -4px 0 7px -2px $input-border;
|
||||
padding: 15px 15px 10px 15px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.little-human {
|
||||
cursor: pointer;
|
||||
transition: border-left 1.5s ease;
|
||||
font-weight: 300;
|
||||
.little-human-picture {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
|
|
@ -205,36 +210,39 @@
|
|||
}
|
||||
.date {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
margin: 10px 10px 0 5px;
|
||||
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;
|
||||
margin: 0 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
&:hover {
|
||||
.little-human-picture {
|
||||
animation: rotateReturnAnimation 0.5s;
|
||||
}
|
||||
color: $dribble-color;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.name-container{
|
||||
.back-button {
|
||||
margin-left: 45px;
|
||||
}
|
||||
|
||||
.name-container {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.mail-checkbox {
|
||||
margin-top: 5px;
|
||||
margin-left: 6px;
|
||||
.custom-checkbox{
|
||||
.custom-checkbox {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -274,11 +282,12 @@
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1199px) {
|
||||
.photo-td {
|
||||
width: 55px;
|
||||
}
|
||||
.check-td{
|
||||
.check-td {
|
||||
width: 35px;
|
||||
}
|
||||
}
|
||||
|
|
@ -294,13 +303,13 @@
|
|||
}
|
||||
|
||||
.person-info {
|
||||
padding: 0 0 10px 15px;
|
||||
padding: 0 0 10px 45px;
|
||||
margin-top: 10px;
|
||||
.human-picture {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 40px;
|
||||
margin-top: -60px;
|
||||
margin-top: -65px;
|
||||
}
|
||||
|
||||
.name {
|
||||
|
|
@ -308,9 +317,13 @@
|
|||
margin-left: 10px;
|
||||
margin-top: 5px;
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
.second-name {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -365,6 +378,7 @@
|
|||
|
||||
.message-details {
|
||||
margin: 5px 0;
|
||||
padding: 5px 0 5px 30px;
|
||||
.subject {
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
|
|
@ -386,6 +400,7 @@
|
|||
|
||||
.message-body {
|
||||
margin: 20px 0;
|
||||
padding-left: 30px;
|
||||
font-weight: $font-light;
|
||||
line-height: 18px;
|
||||
p {
|
||||
|
|
@ -395,6 +410,7 @@
|
|||
|
||||
.attachment {
|
||||
margin: 5px 0;
|
||||
padding-left: 30px;
|
||||
.file-icon {
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
|
|
@ -452,10 +468,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.second-name {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
@keyframes rotateReturnAnimation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
|
|
@ -468,13 +480,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1199px) {
|
||||
.name-h {
|
||||
display: inline;
|
||||
}
|
||||
.person-info .human-picture {
|
||||
margin-top: -30px;
|
||||
.person-info {
|
||||
.human-picture {
|
||||
margin-top: -35px;
|
||||
}
|
||||
.name {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mail-tag {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.second-name {
|
||||
margin-top: 0;
|
||||
|
|
@ -492,8 +511,8 @@
|
|||
|
||||
}
|
||||
|
||||
.person-info {
|
||||
padding-left: 0;
|
||||
.person-info, .message-details, .message-body, .attachment {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
|
|
@ -522,7 +541,7 @@
|
|||
|
||||
.mail-navigation-container {
|
||||
width: 175px;
|
||||
.mail-navigation{
|
||||
.mail-navigation {
|
||||
padding-left: 19px;
|
||||
.new-mails {
|
||||
left: 137px;
|
||||
|
|
@ -570,13 +589,13 @@
|
|||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.compose-button .btn {
|
||||
.compose-button {
|
||||
width: 110px;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-messages-control{
|
||||
.custom-checkbox{
|
||||
.mail-messages-control {
|
||||
.custom-checkbox {
|
||||
margin-left: 5px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
|
@ -641,13 +660,13 @@
|
|||
|
||||
.modal-compose input.form-control.compose-input {
|
||||
background-color: transparent;
|
||||
border-bottom: 1px solid rgba(0,0,0,.2);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .2);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.compose-footer {
|
||||
padding: 2px 4px;
|
||||
background-color: whitesmoke;
|
||||
background-color: $input-border;
|
||||
.btn-send {
|
||||
background-color: $primary-light;
|
||||
color: white;
|
||||
|
|
@ -670,18 +689,18 @@
|
|||
font-size: 18px;
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
color: $help-text;
|
||||
color: $dropdown-text;
|
||||
&:hover {
|
||||
color: $primary-light;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-container {
|
||||
background-color: whitesmoke;
|
||||
background-color: $input-border;
|
||||
.ta-text.ta-editor {
|
||||
background-color: white;
|
||||
div{
|
||||
&:focus{
|
||||
background-color: $input-border;
|
||||
div {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -699,20 +718,20 @@
|
|||
display: none;
|
||||
vertical-align: middle;
|
||||
margin-left: -1px;
|
||||
&.detail-page{
|
||||
&.detail-page {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-navigation-link {
|
||||
font-size: 32px;
|
||||
color: $default;
|
||||
&:hover{
|
||||
color: $default;
|
||||
opacity: .8;
|
||||
color: $default-text;
|
||||
&:visited {
|
||||
color: $default-text;
|
||||
}
|
||||
&:visited{
|
||||
color: $default;
|
||||
&:hover {
|
||||
color: $warning;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -729,15 +748,15 @@
|
|||
max-height: 474px;
|
||||
|
||||
.form-control, .bootstrap-tagsinput input {
|
||||
@include placeholderStyle($default-text, 1);
|
||||
color: $default-text;
|
||||
@include placeholderStyle($dropdown-text, 1);
|
||||
color: $dropdown-text;
|
||||
border-radius: 0;
|
||||
}
|
||||
.ta-toolbar {
|
||||
.btn {
|
||||
border-width: 1px;
|
||||
border-radius: 0;
|
||||
color: $default-text;
|
||||
color: $dropdown-text;
|
||||
border-color: transparent;
|
||||
&.active {
|
||||
box-shadow: none;
|
||||
|
|
@ -745,275 +764,11 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
@include overrideColors($default-text)
|
||||
@include overrideColors($dropdown-text)
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.modal .modal-dialog.modal-compose {
|
||||
max-height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-client-container.transparent {
|
||||
.mail-navigation-container {
|
||||
overflow: hidden;
|
||||
width: 200px;
|
||||
padding: 0;
|
||||
.mail-navigation {
|
||||
margin-left: 0;
|
||||
.new-mails {
|
||||
background-color: transparent;
|
||||
}
|
||||
&.active {
|
||||
background: rgba(white, 0.2);
|
||||
color: white;
|
||||
transition: background-color .5s ease;
|
||||
.new-mails {
|
||||
background-color: transparent;
|
||||
color: $default-text;
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(white, 0.3);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: rgba(black, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-container, .side-message-navigation{
|
||||
width: calc(100% - 200px);
|
||||
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, .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-text 2px solid;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.side-message-navigation .side-message-navigation-item {
|
||||
border-bottom: 1px solid rgba($border, 0.2);
|
||||
&.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-text;
|
||||
opacity: 0.8;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
.refresh-button{
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.little-human {
|
||||
font-weight: $font-light;
|
||||
transition: background-color .5s;
|
||||
&:hover {
|
||||
color: $default-text;
|
||||
background-color: rgba(black, 0.05);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
padding: 0 5px;
|
||||
margin-top: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue