Improve sgFolderTree directive (mailboxes tree)
This commit is contained in:
parent
7f74d5a3d9
commit
225d039f89
|
@ -4760,6 +4760,51 @@ md-tab > .md-ripple-container .md-ripple {
|
|||
|
||||
Other features at : http://zavoloklom.github.io/material-design-iconic-font/examples.html
|
||||
*/
|
||||
md-sidenav md-list md-item-content:hover {
|
||||
background-color: #ede5ca;
|
||||
cursor: pointer; }
|
||||
md-sidenav md-list md-item-content.sg-active {
|
||||
color: #00b0c0; }
|
||||
md-sidenav md-list md-item-content.sg-loading {
|
||||
color: #a1ccc8; }
|
||||
md-sidenav md-list md-item-content .sg-item-name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap; }
|
||||
|
||||
md-item-content .childLevel1 {
|
||||
padding-left: 15px; }
|
||||
|
||||
md-item-content .childLevel2 {
|
||||
padding-left: 30px; }
|
||||
|
||||
md-item-content .childLevel3 {
|
||||
padding-left: 45px; }
|
||||
|
||||
md-item-content .childLevel4 {
|
||||
padding-left: 60px; }
|
||||
|
||||
md-item-content .childLevel5 {
|
||||
padding-left: 75px; }
|
||||
|
||||
md-item-content .childLevel6 {
|
||||
padding-left: 90px; }
|
||||
|
||||
md-item-content .childLevel7 {
|
||||
padding-left: 105px; }
|
||||
|
||||
md-item-content .childLevel8 {
|
||||
padding-left: 120px; }
|
||||
|
||||
md-item-content .childLevel9 {
|
||||
padding-left: 135px; }
|
||||
|
||||
md-item-content .childLevel10 {
|
||||
padding-left: 150px; }
|
||||
|
||||
md-item-content .childLevel11 {
|
||||
padding-left: 165px; }
|
||||
|
||||
.view[layout=row] {
|
||||
max-height: 100%; }
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -214,23 +214,22 @@
|
|||
},
|
||||
template:
|
||||
'<md-item>' +
|
||||
' <span class="folder-container">' +
|
||||
' <span class="folder-content">' +
|
||||
' <i class="icon icon-ion-folder"></i>' +
|
||||
' <form data-ng-submit="save()">' +
|
||||
' <a>{{folder.name}}</a>' +
|
||||
' <input type="text" class="folder-name ng-hide"' +
|
||||
' data-ng-model="folder.name"' +
|
||||
' data-ng-blur="save()"' +
|
||||
' data-sg-escape="revert()"/>' +
|
||||
' </form>' +
|
||||
' <span class="icon ng-hide" data-ng-cloak="ng-cloak">' +
|
||||
' <md-item-content>' +
|
||||
' <i class="md-icon-folder-open"></i>' +
|
||||
' <a class="md-flex md-tile-content sg-item-name">{{folder.name}}</a>' +
|
||||
' <md-input-container class="md-flex md-tile-content ng-hide">'+
|
||||
' <input type="text"' +
|
||||
' ng-model="folder.name"' +
|
||||
' ng-blur="save()"' +
|
||||
' sg-enter="save()"' +
|
||||
' sg-escape="revert()"/>' +
|
||||
' </md-input-container>' +
|
||||
' <span class="icon ng-hide" ng-cloak="ng-cloak">' +
|
||||
' <a class="icon" href="#"' +
|
||||
' data-dropdown-toggle="#folderProperties"' +
|
||||
' data-options="align:right"><i class="icon-cog"></i></a>' +
|
||||
' </span>' +
|
||||
' </span>' +
|
||||
' dropdown-toggle="#folderProperties"' +
|
||||
' options="align:right"><i class="md-icon-more-vert"></i></a>' +
|
||||
' </span>' +
|
||||
' </md-item-content>' +
|
||||
'</md-item>' +
|
||||
'<sg-folder-tree ng-repeat="child in folder.children track by child.path"' +
|
||||
' data-sg-root="root"' +
|
||||
|
@ -238,7 +237,7 @@
|
|||
' data-sg-select-folder="selectFolder"></sg-folder-tree>',
|
||||
compile: function(element) {
|
||||
return RecursionHelper.compile(element, function(scope, iElement, iAttrs, controller, transcludeFn) {
|
||||
var level, link, input, edit;
|
||||
var level, link, inputContainer, input, edit;
|
||||
|
||||
// Set CSS class for folder hierarchical level
|
||||
level = scope.folder.path.split('/').length - 1;
|
||||
|
@ -246,11 +245,12 @@
|
|||
|
||||
// Select dynamic elements
|
||||
link = angular.element(iElement.find('a')[0]);
|
||||
inputContainer = angular.element(iElement.find('md-input-container'));
|
||||
input = iElement.find('input')[0];
|
||||
|
||||
var edit = function() {
|
||||
link.addClass('ng-hide');
|
||||
angular.element(input).removeClass('ng-hide');
|
||||
inputContainer.removeClass('ng-hide');
|
||||
input.focus();
|
||||
input.select();
|
||||
};
|
||||
|
@ -265,12 +265,12 @@
|
|||
while (list[0].tagName != 'MD-LIST') {
|
||||
list = list.parent();
|
||||
}
|
||||
items = list.find('md-item');
|
||||
items = list.find('md-item-content');
|
||||
|
||||
// Highlight element as "loading"
|
||||
items.removeClass('_selected');
|
||||
items.removeClass('_loading');
|
||||
angular.element(iElement.find('md-item')[0]).addClass('_loading');
|
||||
items.removeClass('sg-active');
|
||||
items.removeClass('sg-loading');
|
||||
angular.element(iElement.find('md-item-content')[0]).addClass('sg-loading');
|
||||
|
||||
// Call external function
|
||||
scope.selectFolder(scope.root, scope.folder);
|
||||
|
@ -294,19 +294,19 @@
|
|||
while (list[0].tagName != 'MD-LIST') {
|
||||
list = list.parent();
|
||||
}
|
||||
items = list.find('md-item');
|
||||
items = list.find('md-item-content');
|
||||
|
||||
// Hightlight element as "selected"
|
||||
angular.element(iElement.find('md-item')[0]).removeClass('_loading');
|
||||
angular.element(iElement.find('md-item')[0]).addClass('_selected');
|
||||
angular.element(iElement.find('md-item-content')[0]).removeClass('sg-loading');
|
||||
angular.element(iElement.find('md-item-content')[0]).addClass('sg-active');
|
||||
|
||||
// Show options button
|
||||
angular.forEach(items, function(element) {
|
||||
var li = angular.element(element);
|
||||
var spans = li.find('span');
|
||||
angular.element(spans[2]).addClass('ng-hide');
|
||||
angular.element(spans[0]).addClass('ng-hide');
|
||||
});
|
||||
angular.element(iElement.find('span')[2]).removeClass('ng-hide');
|
||||
angular.element(iElement.find('span')[0]).removeClass('ng-hide');
|
||||
}
|
||||
else {
|
||||
scope.mode.selected = false;
|
||||
|
@ -326,7 +326,7 @@
|
|||
|
||||
scope.save = function() {
|
||||
if (link.hasClass('ng-hide')) {
|
||||
angular.element(input).addClass('ng-hide');
|
||||
inputContainer.addClass('ng-hide');
|
||||
link.removeClass('ng-hide');
|
||||
scope.$emit('sgSaveFolder', scope.folder.id);
|
||||
}
|
||||
|
|
|
@ -1,399 +1,285 @@
|
|||
@import "../core/functions";
|
||||
|
||||
$module-color: #D04747; // red
|
||||
$module-secondary-color: #501B1B; // darker red
|
||||
$topbar-bg-color: $module-color;
|
||||
$topbar-link-bg-active-hover: scale-color($module-secondary-color, $lightness: -14%);
|
||||
$topbar-link-bg-active: $module-secondary-color;
|
||||
$topbar-link-bg-hover: scale-color($module-color, $lightness: -14%);
|
||||
|
||||
@import "foundation";
|
||||
|
||||
@mixin off-canvas-list {
|
||||
list-style-type: none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
/* display: table; */
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
/*
|
||||
+-----------------------------------------------+
|
||||
+ li |
|
||||
|+------+-----------------------------+--------+|
|
||||
|| i | form | span ||
|
||||
|+------+-----------------------------+--------+|
|
||||
+-----------------------------------------------+
|
||||
*/
|
||||
/* display: table-row; */
|
||||
transition: background 300ms ease;
|
||||
label {
|
||||
display: block;
|
||||
padding: $off-canvas-label-padding;
|
||||
color: $off-canvas-label-color;
|
||||
text-transform: $off-canvas-label-text-transform;
|
||||
font-size: $off-canvas-label-font-size;
|
||||
font-weight: $off-canvas-label-font-weight;
|
||||
background: $off-canvas-label-bg;
|
||||
border-top: $off-canvas-label-border-top;
|
||||
border-bottom: $off-canvas-label-border-bottom;
|
||||
margin: $off-canvas-label-margin;
|
||||
}
|
||||
.folder-container {
|
||||
display: table;
|
||||
width: 100%;
|
||||
.folder-content {
|
||||
display: table-row;
|
||||
>* {
|
||||
display: table-cell;
|
||||
padding: $off-canvas-link-padding;
|
||||
color: $off-canvas-link-color;
|
||||
/* border-bottom: $off-canvas-link-border-bottom; */
|
||||
//vertical-align: middle;
|
||||
}
|
||||
}
|
||||
md-sidenav {
|
||||
md-list {
|
||||
md-item-content {
|
||||
&:hover {
|
||||
background: scale-color($tabbar-bg, $lightness: -30%);
|
||||
background-color: #ede5ca; // paper 200
|
||||
cursor: pointer;
|
||||
}
|
||||
&.sg-active {
|
||||
color: #00b0c0; // vintage-blue A700
|
||||
}
|
||||
>span {
|
||||
//vertical-align: middle; // causes glitch when selecting row
|
||||
border-left: 3px solid transparent;
|
||||
//width: 2em;
|
||||
&.sg-loading {
|
||||
color: #a1ccc8; // vintage-blue 500
|
||||
}
|
||||
.icon {
|
||||
color: $off-canvas-label-color;
|
||||
width: 1px;
|
||||
}
|
||||
form {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
* {
|
||||
color: $off-canvas-link-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
//padding-left: $off-canvas-link-padding;
|
||||
}
|
||||
input {
|
||||
border: 0;
|
||||
color: #333 !important;
|
||||
font-size: 1rem;
|
||||
height: $off-canvas-link-padding/2+1rem;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
&._selected {
|
||||
//background-color: #242424 !important;
|
||||
//border: 0 !important;
|
||||
>span {
|
||||
border-left-color: $primary-color;
|
||||
}
|
||||
//* {
|
||||
// color: #eee;
|
||||
//}
|
||||
}
|
||||
&._loading {
|
||||
>span {
|
||||
border-left-color: $off-canvas-label-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.folders-list {
|
||||
@include off-canvas-wrap();
|
||||
ul {
|
||||
@include off-canvas-list();
|
||||
>li >ul {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.f-dropdown {
|
||||
width: auto;
|
||||
max-width: 300px;
|
||||
.sg-item-name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
&.icons-dropdown {
|
||||
height: inherit;
|
||||
//background-color: $primary-color;
|
||||
.button {
|
||||
margin: 0;
|
||||
padding: $f-dropdown-list-padding;
|
||||
border-color: $primary-color;
|
||||
//color: scale-color($secondary-color, $lightness: 52%);
|
||||
color: #fff;
|
||||
}
|
||||
background-color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
&:before {
|
||||
border-color: transparent transparent $primary-color transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$i: 1;
|
||||
@while $i < 12 {
|
||||
.folders-list ul li .folder-container .folder-content > .childLevel#{$i} { padding-left: 15px * $i; }
|
||||
md-item-content .childLevel#{$i} { padding-left: 15px * $i; }
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
$total-columns: 13;
|
||||
$column-gutter: 0;
|
||||
//$total-columns: 13;
|
||||
//$column-gutter: 0;
|
||||
|
||||
#pageContent {
|
||||
@include grid-row($behavior: nest);
|
||||
|
||||
#mailboxesList {
|
||||
position: absolute;
|
||||
top: $topbar-height;
|
||||
bottom: 0;
|
||||
background-color: #333;
|
||||
@include grid-column($columns:13); //, $collapse:true);
|
||||
@media #{$medium-up} {
|
||||
@include grid-column($columns:3);
|
||||
}
|
||||
.newItemsToolbar {
|
||||
margin-top: rem-calc(6);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.scrollView {
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
top: $topbar-height;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
label {
|
||||
padding-right: 0;
|
||||
button {
|
||||
float: right;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonsToolbar {
|
||||
border-top: $off-canvas-link-border-bottom;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#messagesList, #messageEditor {
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
top: $topbar-height;
|
||||
bottom: 0;
|
||||
left: 23.07692%;
|
||||
}
|
||||
#messagesList {
|
||||
background-color: $f-dropdown-list-hover-bg;
|
||||
@include grid-column($columns:13);
|
||||
@media #{$medium-up} {
|
||||
@include grid-column($columns:4);
|
||||
}
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
//border-bottom: $topbar-divider-border-bottom;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
float: left;
|
||||
clear: left;
|
||||
//border: 2px solid #fff;
|
||||
//-webkit-border-radius: 4px;
|
||||
//-moz-border-radius: 4px;
|
||||
//border-radius: 4px;
|
||||
//transition: all 300ms ease;
|
||||
background-color: $f-dropdown-list-hover-bg;
|
||||
transition: background 300ms ease;
|
||||
a {
|
||||
display: block;
|
||||
color: #666;
|
||||
//border-bottom: 1px dotted #ddd;
|
||||
//width: 100%;
|
||||
//font-size: $table-row-font-size;
|
||||
//line-height: $table-line-height;
|
||||
line-height: rem-calc(24);
|
||||
padding: $table-head-padding;
|
||||
//padding: rem-calc(8 10 18);
|
||||
//margin: 0 rem-calc(12);
|
||||
.name {
|
||||
margin: 0;
|
||||
//font-size: $table-head-font-size;
|
||||
//color: $table-head-font-color;
|
||||
font-weight: $table-head-font-weight;
|
||||
}
|
||||
div {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
span {
|
||||
font-weight: normal;
|
||||
font-size: smaller;
|
||||
}
|
||||
&._selected {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
&.unread {
|
||||
a {
|
||||
.name,
|
||||
.subject {
|
||||
color: $table-head-font-color;
|
||||
/* font-weight: $table-head-font-weight; */
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#messageView {
|
||||
position: absolute;
|
||||
top: $topbar-height;
|
||||
bottom: 0;
|
||||
left: 53.8461507692%;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
border-left: $topbar-divider-border-bottom;
|
||||
padding: $table-head-padding;
|
||||
padding-top: 0;
|
||||
@include grid-column($columns:13);
|
||||
@media #{$medium-up} {
|
||||
@include grid-column($columns:6);
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
padding-top: rem-calc(12);
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h2 {
|
||||
font-weight: lighter;
|
||||
}
|
||||
.header {
|
||||
background-color: $secondary-color;
|
||||
padding-left: rem-calc(12);
|
||||
padding-right: rem-calc(12);
|
||||
padding-bottom: 0.2em;
|
||||
h1, h2, h4, h6 {
|
||||
color: #fff;
|
||||
}
|
||||
.label {
|
||||
background-color: transparent;
|
||||
border: 1px solid $primary-color;
|
||||
border: 1px solid scale-color($primary-color, $lightness: 52%);
|
||||
color: $primary-color;
|
||||
color: scale-color($primary-color, $lightness: 52%);
|
||||
}
|
||||
.flags {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
/*
|
||||
+-----------------------------------------------+
|
||||
+ .attr (13) |
|
||||
|+-------------+-------------------------------+|
|
||||
|| .key (4) | .value (9) ||
|
||||
|+-------------+-------------------------------+|
|
||||
+-----------------------------------------------+
|
||||
*/
|
||||
.attr {
|
||||
@include grid-row($behavior:collapse);
|
||||
.key {
|
||||
@include grid-column($columns:4);
|
||||
label {
|
||||
color: #999;
|
||||
margin-right: rem-calc(12);
|
||||
}
|
||||
}
|
||||
.value {
|
||||
@include grid-column($columns:9);
|
||||
&.single {
|
||||
@include grid-column($offset: 4, $columns:9);
|
||||
}
|
||||
div {
|
||||
a {
|
||||
color: #666;
|
||||
margin-left: 0.2em;
|
||||
&:hover {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonsToolbar {
|
||||
margin-bottom: rem-calc(12);
|
||||
background-color: #eee;
|
||||
border-top: 2px solid #ddd;
|
||||
.button {
|
||||
margin: 0.4em;
|
||||
&.alert {
|
||||
//display: $button-display;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mailer_mailcontent {
|
||||
background-color: #fff;
|
||||
padding: .5em;
|
||||
overflow: auto;
|
||||
.mailer_mailcontent TABLE {
|
||||
table-layout: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
#messageEditor {
|
||||
right: 0;
|
||||
textarea {
|
||||
height: 20em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: lighter;
|
||||
}
|
||||
|
||||
.buttonsToolbar {
|
||||
text-align: right;
|
||||
.button {
|
||||
margin-bottom: 0;
|
||||
font-size: 1.0em;
|
||||
}
|
||||
.folders-list & {
|
||||
background-color: $tabbar-bg;
|
||||
background-color: $off-canvas-bg;
|
||||
text-align: center;
|
||||
.button {
|
||||
background-color: $tabbar-bg;
|
||||
font-size: 1.5em;
|
||||
transition: color 300ms ease;
|
||||
color: scale-color($tabbar-bg, $lightness: 52%);
|
||||
&:focus, &:hover {
|
||||
color: $primary-color;
|
||||
color: #fff;
|
||||
//background-color: scale-color($tabbar-bg, $lightness: 13%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//#pageContent {
|
||||
// //@include grid-row($behavior: nest);
|
||||
//
|
||||
// #mailboxesList {
|
||||
// position: absolute;
|
||||
// top: $topbar-height;
|
||||
// bottom: 0;
|
||||
// background-color: #333;
|
||||
// @include grid-column($columns:13); //, $collapse:true);
|
||||
// @media #{$medium-up} {
|
||||
// @include grid-column($columns:3);
|
||||
// }
|
||||
// .newItemsToolbar {
|
||||
// margin-top: rem-calc(6);
|
||||
// text-align: center;
|
||||
// text-transform: uppercase;
|
||||
// }
|
||||
// .scrollView {
|
||||
// position: absolute;
|
||||
// overflow: auto;
|
||||
// overflow-x: hidden;
|
||||
// top: $topbar-height;
|
||||
// bottom: 0;
|
||||
// right: 0;
|
||||
// left: 0;
|
||||
// label {
|
||||
// padding-right: 0;
|
||||
// button {
|
||||
// float: right;
|
||||
// background-color: transparent;
|
||||
// padding: 0;
|
||||
// margin: 0;
|
||||
// width: 32px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .buttonsToolbar {
|
||||
// border-top: $off-canvas-link-border-bottom;
|
||||
// position: absolute;
|
||||
// bottom: 0px;
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// #messagesList, #messageEditor {
|
||||
// position: absolute;
|
||||
// overflow: auto;
|
||||
// overflow-x: hidden;
|
||||
// top: $topbar-height;
|
||||
// bottom: 0;
|
||||
// left: 23.07692%;
|
||||
// }
|
||||
// #messagesList {
|
||||
// background-color: $f-dropdown-list-hover-bg;
|
||||
// @include grid-column($columns:13);
|
||||
// @media #{$medium-up} {
|
||||
// @include grid-column($columns:4);
|
||||
// }
|
||||
// ul {
|
||||
// margin: 0;
|
||||
// padding: 5px 0;
|
||||
// li {
|
||||
// list-style-type: none;
|
||||
// //border-bottom: $topbar-divider-border-bottom;
|
||||
// width: 100%;
|
||||
// height: 56px;
|
||||
// float: left;
|
||||
// clear: left;
|
||||
// //border: 2px solid #fff;
|
||||
// //-webkit-border-radius: 4px;
|
||||
// //-moz-border-radius: 4px;
|
||||
// //border-radius: 4px;
|
||||
// //transition: all 300ms ease;
|
||||
// background-color: $f-dropdown-list-hover-bg;
|
||||
// transition: background 300ms ease;
|
||||
// a {
|
||||
// display: block;
|
||||
// color: #666;
|
||||
// //border-bottom: 1px dotted #ddd;
|
||||
// //width: 100%;
|
||||
// //font-size: $table-row-font-size;
|
||||
// //line-height: $table-line-height;
|
||||
// line-height: rem-calc(24);
|
||||
// padding: $table-head-padding;
|
||||
// //padding: rem-calc(8 10 18);
|
||||
// //margin: 0 rem-calc(12);
|
||||
// .name {
|
||||
// margin: 0;
|
||||
// //font-size: $table-head-font-size;
|
||||
// //color: $table-head-font-color;
|
||||
// font-weight: $table-head-font-weight;
|
||||
// }
|
||||
// div {
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// }
|
||||
// span {
|
||||
// font-weight: normal;
|
||||
// font-size: smaller;
|
||||
// }
|
||||
// &._selected {
|
||||
// background-color: #fff;
|
||||
// }
|
||||
// }
|
||||
// &.unread {
|
||||
// a {
|
||||
// .name,
|
||||
// .subject {
|
||||
// color: $table-head-font-color;
|
||||
// /* font-weight: $table-head-font-weight; */
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &:hover,
|
||||
// &:active {
|
||||
// background-color: #fff;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// #messageView {
|
||||
// position: absolute;
|
||||
// top: $topbar-height;
|
||||
// bottom: 0;
|
||||
// left: 53.8461507692%;
|
||||
// overflow: auto;
|
||||
// overflow-x: hidden;
|
||||
// border-left: $topbar-divider-border-bottom;
|
||||
// padding: $table-head-padding;
|
||||
// padding-top: 0;
|
||||
// @include grid-column($columns:13);
|
||||
// @media #{$medium-up} {
|
||||
// @include grid-column($columns:6);
|
||||
// }
|
||||
// h1, h2, h3, h4, h5, h6 {
|
||||
// margin: 0;
|
||||
// padding-top: rem-calc(12);
|
||||
// }
|
||||
// h1 {
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
// h2 {
|
||||
// font-weight: lighter;
|
||||
// }
|
||||
// .header {
|
||||
// background-color: $secondary-color;
|
||||
// padding-left: rem-calc(12);
|
||||
// padding-right: rem-calc(12);
|
||||
// padding-bottom: 0.2em;
|
||||
// h1, h2, h4, h6 {
|
||||
// color: #fff;
|
||||
// }
|
||||
// .label {
|
||||
// background-color: transparent;
|
||||
// border: 1px solid $primary-color;
|
||||
// border: 1px solid scale-color($primary-color, $lightness: 52%);
|
||||
// color: $primary-color;
|
||||
// color: scale-color($primary-color, $lightness: 52%);
|
||||
// }
|
||||
// .flags {
|
||||
// float: right;
|
||||
// }
|
||||
// }
|
||||
// /*
|
||||
// +-----------------------------------------------+
|
||||
// + .attr (13) |
|
||||
// |+-------------+-------------------------------+|
|
||||
// || .key (4) | .value (9) ||
|
||||
// |+-------------+-------------------------------+|
|
||||
// +-----------------------------------------------+
|
||||
// */
|
||||
// .attr {
|
||||
// @include grid-row($behavior:collapse);
|
||||
// .key {
|
||||
// @include grid-column($columns:4);
|
||||
// label {
|
||||
// color: #999;
|
||||
// margin-right: rem-calc(12);
|
||||
// }
|
||||
// }
|
||||
// .value {
|
||||
// @include grid-column($columns:9);
|
||||
// &.single {
|
||||
// @include grid-column($offset: 4, $columns:9);
|
||||
// }
|
||||
// div {
|
||||
// a {
|
||||
// color: #666;
|
||||
// margin-left: 0.2em;
|
||||
// &:hover {
|
||||
// color: #000;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .buttonsToolbar {
|
||||
// margin-bottom: rem-calc(12);
|
||||
// background-color: #eee;
|
||||
// border-top: 2px solid #ddd;
|
||||
// .button {
|
||||
// margin: 0.4em;
|
||||
// &.alert {
|
||||
// //display: $button-display;
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// .mailer_mailcontent {
|
||||
// background-color: #fff;
|
||||
// padding: .5em;
|
||||
// overflow: auto;
|
||||
// .mailer_mailcontent TABLE {
|
||||
// table-layout: auto;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// }
|
||||
// #messageEditor {
|
||||
// right: 0;
|
||||
// textarea {
|
||||
// height: 20em;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//h1 {
|
||||
// font-weight: lighter;
|
||||
//}
|
||||
//
|
||||
//.buttonsToolbar {
|
||||
// text-align: right;
|
||||
// .button {
|
||||
// margin-bottom: 0;
|
||||
// font-size: 1.0em;
|
||||
// }
|
||||
// .folders-list & {
|
||||
// background-color: $tabbar-bg;
|
||||
// background-color: $off-canvas-bg;
|
||||
// text-align: center;
|
||||
// .button {
|
||||
// background-color: $tabbar-bg;
|
||||
// font-size: 1.5em;
|
||||
// transition: color 300ms ease;
|
||||
// color: scale-color($tabbar-bg, $lightness: 52%);
|
||||
// &:focus, &:hover {
|
||||
// color: $primary-color;
|
||||
// color: #fff;
|
||||
// //background-color: scale-color($tabbar-bg, $lightness: 13%);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
|
|
@ -6,6 +6,8 @@
|
|||
///
|
||||
///
|
||||
|
||||
@import 'MailerUI.scss';
|
||||
|
||||
.view[layout=row] {
|
||||
max-height: 100%;
|
||||
}
|
Loading…
Reference in a new issue