jinql
/
blur-admin
mirror of https://github.com/akveo/blur-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor(email): apply configurable style

pull/46/head
alex 2016-04-25 16:23:14 +03:00 committed by kostya.danovsky
parent aae31155fd
commit c0d40df904
2 changed files with 107 additions and 352 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/pages/components/mail/mail.html
View File

@ -3,8 +3,8 @@
<div ba-panel ba-panel-class="xmedium-panel mail-panel"> <div ba-panel ba-panel-class="xmedium-panel mail-panel">
<div class="letter-layout"> <div class="letter-layout">
<div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}"> <div class="mail-navigation-container" ng-class="{'expanded' : !tabCtrl.navigationCollapsed}">
<div class="compose-button"> <div class="text-center">
<button type="button" class="btn compose-button" ng-click="tabCtrl.showCompose('','','')"> <button type="button" class="btn btn-default compose-button" ng-click="tabCtrl.showCompose('','','')">
Compose Compose
</button> </button>
</div> </div>

453
src/sass/app/_email.scss
View File

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