LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve Sass of SOGoRootPage & Contacts modules

pull/91/head
Francis Lachapelle 2014-08-06 15:52:43 -04:00
parent d52d7582ca
commit 16d04e998f
2 changed files with 124 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

238
UI/WebServerResources/scss/ContactsUI.scss
View File

@ -24,40 +24,81 @@ $topbar-link-bg-hover: scale-color($module-color, $lightness: -14%);
@import "foundation";
//@import "foundation/components/grid";
@import "foundation/components/offcanvas";
//@import "foundation/components/dropdown", "foundation/components/offcanvas", "foundation/components/top-bar";
//@import "toolbars";
@mixin off-canvas-list {
list-style-type: none;
padding:0;
margin:0;
list-style-type: none;
padding:0;
margin:0;
display: table;
width: 100%;
li {
label {
padding: $off-canvas-label-padding;
color: $off-canvas-label-color;
text-transform: $off-canvas-label-text-transform;
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;
li {
/*
+-----------------------------------------------+
+ li |
|+------+-----------------------------+--------+|
|| i | form | span ||
|+------+-----------------------------+--------+|
+-----------------------------------------------+
*/
display: table-row;
transition: background 300ms ease;
width: 100%;
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;
}
>* {
display: table-cell;
padding: $off-canvas-link-padding;
color: $off-canvas-link-color;
border-bottom: $off-canvas-link-border-bottom;
//vertical-align: middle;
}
.icon {
width: 2em;
}
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;
}
}
&:hover {
background: scale-color($tabbar-bg, $lightness: -30%);
}
&._selected {
background-color: #242424 !important;
border: 0 !important;
* {
color: #eee;
}
}
}
div, a {
display: block;
}
div {
padding: $off-canvas-link-padding;
color: $off-canvas-link-color;
border-bottom: $off-canvas-link-border-bottom;
&:hover { background: scale-color($tabbar-bg, $lightness: -30%); }
transition: background 300ms ease;
a { color: $off-canvas-link-color; }
}
}
}
//ul.off-canvas-list { @include off-canvas-list; }
$total-columns: 13;
$column-gutter: 0;
@ -66,62 +107,10 @@ $column-gutter: 0;
@include off-canvas-wrap();
ul {
@include off-canvas-list();
li {
&._selected {
background-color: #242424 !important;
border: 0 !important;
a {
color: #eee !important;
}
}
div {
@include grid-row($behavior: nest);
.folder {
@include grid-column($columns:11);
i {
float: left;
width: 30px;
padding: $off-canvas-link-padding / 2;
}
}
.actions {
@include grid-column($columns:2);
text-align: center;
}
}
a {
&[data-ng-click] {
//display: table-cell;
//font-size: $off-canvas-link-text-size;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
//padding-right: 30px;
}
&[data-dropdown-toggle-n0] {
//display: table-cell;
//float: right;
color: #fff;
position: absolute;
right: 7px;
//line-height: 3em;
}
}
input {
//padding-right: 30px;
//background-color: scale-color($f-dropdown-list-hover-bg, $lightness: 28%);
//background-color: scale-color($tabbar-bg, $lightness: 52%);
font-size: 1em;
height: 23px;
height: 1.6em;
padding-left: 30px;
margin: 0;
}
}
}
}
.contact-picture {
.card-picture {
display: inline-block;
float: left;
width: 40px;
@ -236,12 +225,6 @@ $column-gutter: 0;
border-left: $topbar-divider-border-bottom;
padding: $table-head-padding;
padding-top: 0;
//font-size: $table-row-font-size;
/* span { */
/* ul { */
/* margin-left: 20px; */
/* } */
/* } */
@include grid-column($columns:13);
@media #{$medium-up} {
@include grid-column($columns:5);
@ -275,7 +258,6 @@ $column-gutter: 0;
}
.section {
border-bottom: 1px solid #ddd;
//margin-bottom: rem-calc(12);
margin: 0 rem-calc(12) rem-calc(12) rem-calc(12);
padding-bottom: rem-calc(12);
}
@ -305,7 +287,6 @@ $column-gutter: 0;
}
.buttonsToolbar {
margin-bottom: rem-calc(12);
//text-align: right;
background-color: #eee;
border-top: 2px solid #ddd;
.button {
@ -318,7 +299,7 @@ $column-gutter: 0;
}
.viewer {
.value {
div, a, ul, span {
div, a, address, ul, span {
line-height: $form-label-line-height;
margin-left: rem-calc(12);
}
@ -364,30 +345,10 @@ $column-gutter: 0;
}
.buttonsToolbar {
/* background-color: $secondary-color; */
/* text-align: center; */
text-align: right;
/* font-size: 1.5em; */
/* line-height: 2.5em; */
/* min-height: 2.5em; */
.button {
margin-bottom: 0;
//background-color: $tabbar-bg;
/* background-color: $secondary-color; */
/* color: scale-color($secondary-color, $lightness: 52%); */
//padding: 0.45em 1em 0.35em 1em;
/* padding: 0 1em; */
/* font-size: 1.0em; */
font-size: 1.0em;
/* transition: color 300ms ease; */
//&.success {
// background-color: $secondary-color;
//}
/* &:focus, &:hover { */
/* color: #fff; */
/* //background-color: #449539; */
/* //background-color: scale-color($secondary-color, $lightness: 13%); */
/* } */
}
.folders-list & {
background-color: $tabbar-bg;
@ -409,20 +370,42 @@ $column-gutter: 0;
.searchToolbar {
@include grid-row($behavior:collapse);
.inputField {
//@include grid-column($offset:1, $columns:9);
.input-content {
@include grid-column($offset:0, $columns:11);
input {
transition: background-color 300ms ease;
//background-color: $secondary-color;
background-color: transparent;
margin: 0.4em;
&:focus {
background-color: #fff;
.input-search {
//display: flex;
display: table;
width: 100%;
background-color: $input-bg-color;
border: $input-border-width $input-border-style $input-border-color;
@include radius($input-border-radius);
box-shadow: $input-box-shadow;
margin: 5px;
i {
display: table-cell;
//min-width: rem-calc(24);
width: rem-calc(24);
color: $clearing-caption-font-color;
font-size: rem-calc(18);
line-height: rem-calc(32);
padding-left: $form-spacing;
vertical-align: middle;
}
input {
display: table-cell;
/* transition: background-color 300ms ease; */
//background-color: $secondary-color;
background-color: transparent;
border: 0;
box-shadow: none;
margin-bottom: 0;
/* &:focus { */
/* background-color: #fff; */
/* } */
}
}
}
.optionsButton {
.input-options {
@include grid-column($columns:2);
.button {
color: $input-disabled-bg;
@ -432,6 +415,17 @@ $column-gutter: 0;
}
}
.alert-bg {
color: #ccc;
font-size: 24px;
text-align: center;
i {
display: block;
font-size: 48px;
margin: 12px;
}
}
.button {
&.icon {
background-color: transparent;
@ -478,6 +472,10 @@ $column-gutter: 0;
}
}
address {
font-style: normal;
}
h1 {
font-weight: lighter;
}

8
UI/WebServerResources/scss/SOGoRootPage.scss
View File

@ -1,6 +1,10 @@
@import "settings";
@import "foundation/components/grid";
@import "foundation/components/forms";
@import "foundation";
/* @import "foundation/components/alert-boxes", */
/* "foundation/components/buttons", */
/* "foundation/components/grid", */
/* "foundation/components/forms", */
/* "foundation/components/top-bar"; */
$total-columns: 12;