amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-07-09 02:15:08 +00:00
Code Issues Projects Releases Wiki Activity

Adopt theming system of Angular Material

Browse Source 
The SASS has been simplified so that different themes can be applied by
only using the $mdThemingProvider serivce.

The resulting design is more "Materialized" and less prone to the
future changes of Angular Material.
This commit is contained in:
Francis Lachapelle
2015-09-09 16:35:09 -04:00
parent 16d312eb98
commit 11e7af3450
20 changed files with 83 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/WebServerResources/scss/components/_palette.scss
+3 -3
View File
@@ -403,7 +403,7 @@ $colorBlueGrey900: nth($paletteBlueGrey, 10);
};
};
}
@include colors($sogoBlue, 'sogoBlue');
@include colors($sogoGreen, 'sogoGreen');
@include colors($sogoPaper, 'sogoPaper');
// @include colors($sogoBlue, 'sogoBlue');
// @include colors($sogoGreen, 'sogoGreen');
// @include colors($sogoPaper, 'sogoPaper');
UI/WebServerResources/scss/components/button/button.scss
-11
View File
@@ -10,12 +10,6 @@
// Buttons for the sidenav folder tree
// ------------------------------------
md-sidenav md-list .md-button,
.view-list md-list .md-button {
// dirty fix to squash the theme style
background-color: transparent !important;
}
.view-list md-list .md-button {
// Gain some space in lists
padding: 0;
@@ -61,11 +55,6 @@ md-list md-list-item button.md-button.sg-icon-button {
border-radius: 50%;
min-width: $iconButton-size;
transition: $iconButton-transition;
&:hover,
&:active {
background-color: transparent;
transform: scale($iconButton-hover-scale);
}
.md-ripple-container {
border-radius: 50%;
}
UI/WebServerResources/scss/components/card/card-theme.scss
+5
View File
@@ -0,0 +1,5 @@
md-card {
&.md-default-theme {
background-color: sg-color($sogoPaper, 50);
}
}
UI/WebServerResources/scss/components/card/card.scss
-4
View File
@@ -8,10 +8,6 @@ md-card {
transition: $swift-ease-in-out;
}
&.md-default-theme {
background-color: sg-color($sogoPaper, 50);
}
// Collapsed/expanded states for cards in ACL editor
&.sg-collapsed, &.sg-expanded {
transition: $swift-ease-in-out;
UI/WebServerResources/scss/components/content/content-theme.scss
+3
View File
@@ -0,0 +1,3 @@
.sg-subcontent {
border-left: $baseline-grid solid sg-color($sogoGreen, 100);
}
UI/WebServerResources/scss/components/list/list-theme.scss
+15
View File
@@ -0,0 +1,15 @@
.sg-section-list {
md-list-item {
&:hover:not([disabled]) {
background-color: sg-color($sogoPaper, 300);
color: sg-color($sogoBlue, 800);
}
&:active {
color: sg-color($sogoBlue, 800);
}
&:focus,
&.sg-active {
background-color: sg-color($sogoBlue, 100);
}
}
}
UI/WebServerResources/scss/components/list/list.scss
-20
View File
@@ -61,28 +61,8 @@ div.md-tile-left {
min-width: $sg-md-grid-pitch + $baseline-grid;
}
// Specific lists with a single subheader (sg-md-subheader--fixed) at the top
[id='messagesList'],
[id='contactsList'] {
border-top: 44px solid transparent; // padding for the header.subheader until md-subheader is fixed
}
.sg-section-list {
md-list-item {
transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
color 0.12s linear;
&:hover:not([disabled]) {
background-color: sg-color($sogoPaper, 300);
color: sg-color($sogoBlue, 800);
cursor: pointer;
}
&:active {
color: sg-color($sogoBlue, 800);
}
&:focus,
&.sg-active {
background-color: sg-color($sogoBlue, 100);
}
.md-list-item-inner {
.md-secondary {
// Expect the container to include a sg-tile-icons
UI/WebServerResources/scss/components/sidenav/sidenav.scss
+3 -51
View File
@@ -2,11 +2,9 @@
@import "extends";
$sidenav-default-width: (4 * $pitch);
$sidenav-min-space: $pitch;
$sidenav-right-width: (8 * $pitch);
//$sidenav-right-width: (8 * $pitch);
md-sidenav {
background-color: sg-color($sogoPaper, 400);
&.md-locked-open {
@include from(lg) {
@include flex-col(lg, 4, 1, 0)
@@ -15,36 +13,8 @@ md-sidenav {
}
}
.md-sidenav-left {
&.md-whiteframe-z2 {
box-shadow: $sidenav-shadow-z2;
}
}
// MAIN SIDENAV, actually to the left
// ----------------------------------------------------------------------------
.md-sidenav-left {
& md-content,
& md-toolbar {
background-color: inherit;
background-image: url("../img/cardboard-transp.png");
background-blend-mode: multiply;
}
}
.md-sidenav-left md-toolbar {
box-shadow: none;
}
.md-sidenav-right {
width: $sidenav-right-width;
max-width: $sidenav-right-width;
& md-content,
& md-toolbar {
background-color: inherit;
background-image: none;
}
}
// Mailboxes tree
$i: 1;
@@ -69,27 +39,9 @@ $i: 1;
}
.md-sidenav-left {
&.md-whiteframe-z1 {
box-shadow: $sidenav-shadow-z1;
}
md-list-item {
transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function,
color 0.12s linear;
&:hover {
background-color: sg-color($sogoBlue, 500);
}
&.sg-active {
background-color: sg-color($sogoBlue, 400);
}
&.sg-loading {
color: sg-color($sogoBlue, 200);
}
}
}
.md-sidenav-left {
md-bottom-sheet {
md-list-item:hover {
background-color: transparent;
.md-button {
transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
}
}
}
UI/WebServerResources/scss/components/subheader/subheader.scss
-10
View File
@@ -28,13 +28,3 @@
font-weight: $sg-font-medium;
}
}
md-list .md-subheader.sg-md-subheader {
font-weight: $sg-font-medium;
font-size: $sg-font-size-2;
}
.sg-md-subheader > * {
font-weight: inherit;
font-size: inherit;
}
UI/WebServerResources/scss/components/toolbar/toolbar-theme.scss
+12
View File
@@ -0,0 +1,12 @@
md-toolbar {
background-image: url("../img/felt-transp.png");
background-blend-mode: luminosity;
}
.sg-toolbar-search {
background-color: sg-color($sogoPaper, 100);
color: rgba(0,0,0,0.54);
md-icon {
color: rgba(0,0,0,0.54);
}
}
UI/WebServerResources/scss/components/toolbar/toolbar.scss
-21
View File
@@ -16,9 +16,6 @@ md-toolbar {
z-index: $z-index-toolbar;
// dirty fix to override angular-material botchy typography
font-size: 1em !important;
background-image: url("../img/felt-transp.png");
background-blend-mode: luminosity;
//box-shadow: $whiteframe-shadow-z1;
}
.md-toolbar-tools {
@@ -43,11 +40,6 @@ md-toolbar,
}
}
// angular-material is overspecifying so we are
.md-toolbar-tools[layout-align="start start"] {
//align-items: flex-start;
}
.md-toolbar-tools.md-toolbar-tools-top {
align-items: flex-start;
}
@@ -66,24 +58,16 @@ header {
}
hgroup {
align-items: center;
//flex: 1 1 auto;
&h3 {
margin-bottom: 0;
}
}
.toolbar-main .md-button {
// color: inherit;
// font-size: sg-size(headline);
}
.sg-toolbar-group {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
// & > .sg-icon-button:first-child {
// padding-left: 0;
// }
&-1 {
order: 1;
max-width: $listView-width;
@@ -98,10 +82,5 @@ hgroup {
}
.sg-toolbar-search {
background-color: sg-color($sogoPaper, 100);
color: rgba(0,0,0,0.54);
padding: $toolbar-padding 0;
md-icon {
color: rgba(0,0,0,0.54);
}
}