amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-04-23 05:49:31 +00:00
Code Issues Projects Releases Wiki Activity

Apply colours to components

Browse Source
This commit is contained in:
iRouge
2015-02-05 19:16:49 -05:00
committed by Francis Lachapelle
parent daaa4284cb
commit e00416e1b8
14 changed files with 6868 additions and 5015 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
UI/Templates/MailerUI/UIxMailFolderTemplate.wox
View File

@@ -2,14 +2,14 @@
<container
xmlns = "http://www.w3.org/1999/xhtml"
>
<md-content class="md-whiteframe-z2" flex="40" style="min-width: 300px; position: relative;" id="messagesList">
<md-content flex="40" style="min-width: 300px; position: relative;" id="messagesList">
<style>
.vs-repeat-repeated-element {
width: 100%;
}
</style>
<header class="md-background sg-md-subheader sg-avatar-left">
<h2 class="sg-md-subhead-solo md-primary md-hue-3">Unread Messages</h2>
<header class="sg-md-subheader sg-avatar-left">
<h2 class="sg-md-subhead-solo fg-sogoBlue-700">Unread Messages</h2>
</header>
<md-list data-vs-repeat="72"

4
UI/Templates/MailerUI/UIxMailMainFrame.wox
View File

@@ -263,7 +263,7 @@
</div>
<!-- Sidenav -->
<md-sidenav class="md-sidenav-left md-whiteframe-z3" md-component-id="left" md-is-locked-open="$media('gt-md')" layout="column">
<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="$media('gt-md')" layout="column">
<md-toolbar class="md-tall" layout-align="end start">
<h2 class="md-toolbar-tools md-toolbar-tools-bottom">
<span class="sg-md-title md-flex">{{activeUser.identification}}</span>
@@ -303,7 +303,7 @@
</span>
</div>
</md-toolbar>
<md-content layout="row" class="md-flex" ui-view="mailbox"><!-- messages list --></md-content>
<div layout="row" class="md-flex" layout-align="space-between" ui-view="mailbox"><!-- messages list --></div>
</section>
</script>

11646
UI/WebServerResources/css/styles.css
View File

File diff suppressed because one or more lines are too long

4
UI/WebServerResources/css/styles.css.map
View File

File diff suppressed because one or more lines are too long

4
UI/WebServerResources/scss/components/_palette.scss
View File

@@ -91,7 +91,7 @@ $sogoGreen: (
A400: #00e676,
A700: #00c853
);
$vintageBlue: (
$sogoBlue: (
50: #f0faf9,
100:#e1f5f3,
200:#ceebe8,
@@ -396,7 +396,7 @@ $colorBlueGrey900: nth($paletteBlueGrey, 10);
};
};
}
@include colors($vintageBlue, 'sogoBlue');
@include colors($sogoBlue, 'sogoBlue');
@include colors($sogoGreen, 'sogoGreen');
@include colors($sogoPaper, 'sogoPaper');

5
UI/WebServerResources/scss/components/content/content.scss
View File

@@ -1 +1,4 @@
@import 'extends';
@import 'extends';
md-content {
background-color: transparent;
}

111
UI/WebServerResources/scss/components/sidenav/sidenav.scss
View File

@@ -1 +1,110 @@
@import "extends";
@import "extends";
$sidenav-default-width: (4 * $pitch);
$sidenav-min-space: $pitch;
md-sidenav {
position: absolute;
width: $sidenav-default-width;
min-width: $sidenav-default-width;
max-width: $sidenav-default-width;
bottom: 0;
z-index: $z-index-sidenav;
background-color: sg-color($sogoPaper, 400);
overflow: auto;
flex-direction: column;
&.md-closed {
display: none;
}
&.md-closed-add,
&.md-closed-remove {
display: flex;
/* this is required as of 1.3x to properly
apply all styling in a show/hide animation */
transition: 0s all;
}
&.md-closed-add.md-closed-add-active,
&.md-closed-remove.md-closed-remove-active {
transition: $swift-ease-out;
}
&.md-locked-open-add,
&.md-locked-open-remove {
position: static;
display: flex;
transform: translate3d(0, 0, 0);
}
&.md-locked-open {
width: $sidenav-default-width;
min-width: $sidenav-default-width;
max-width: $sidenav-default-width;
}
&.md-locked-open,
&.md-locked-open.md-closed,
&.md-locked-open.md-closed.md-sidenav-left,
&.md-locked-open.md-closed.md-sidenav-right,
&.md-locked-open-remove.md-closed {
position: static;
display: flex;
transform: translate3d(0, 0, 0);
}
&.md-locked-open-remove-active {
transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
min-width $swift-ease-in-duration $swift-ease-in-timing-function;
width: 0;
min-width: 0;
}
&.md-closed.md-locked-open-add {
width: 0;
min-width: 0;
transform: translate3d(0%, 0, 0);
}
&.md-closed.md-locked-open-add-active {
transition: width $swift-ease-in-duration $swift-ease-in-timing-function,
min-width $swift-ease-in-duration $swift-ease-in-timing-function;
width: $sidenav-default-width;
min-width: $sidenav-default-width;
transform: translate3d(0%, 0, 0);
}
@extend .md-sidenav-left;
}
.md-sidenav-backdrop.md-locked-open {
display: none;
}
.md-sidenav-left {
left: 0;
top: 0;
transform: translate3d(0%, 0, 0);
&.md-closed {
transform: translate3d(-100%, 0, 0);
}
}
.md-sidenav-right {
left: 100%;
top: 0;
transform: translate3d(-100%, 0, 0);
&.md-closed {
transform: translate3d(0%, 0, 0);
}
}
@media (max-width: $sidenav-default-width + $sidenav-min-space) {
md-sidenav {
width: 85%;
}
}
.md-sidenav-left {
& md-content,
& md-toolbar {
background-color: inherit;
}
}

16
UI/WebServerResources/scss/components/subheader/subheader.scss
View File

@@ -3,14 +3,12 @@
.sg-md-subheader {
padding: $baseline-grid $baseline-grid $baseline-grid $layout-gutter-width;
position: fixed;
background-color: rgb(247,241,220); // default theme background
z-index: 58;
box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26);
background-color: transparent;
z-index: auto;
}
// WIdth for message list
// ----------------------------------------------------------------------------
[id = "messagesList"] .sg-md-subheader {
width: 390px; // todo : convert this in grid-pitch
transform: translateY(-100%); // Compensate the container top-margin
}
.sg-md-subheader {
@@ -20,12 +18,4 @@
.sg-md-subheader > * {
font-size: inherit;
font-weight: inherit;
}
.sg-md-subheader.sg-avatar {
&-left {
padding-left: $sg-md-grid-pitch + $baseline-grid;
}
&-right {
padding-left: $baseline-grid * 2;
}
}
};

3
UI/WebServerResources/scss/components/toolbar/toolbar.scss
View File

@@ -1,5 +1,6 @@
@import 'extends';
.md-toolbar {
md-toolbar {
z-index: 20;
box-shadow: none;
}

15
UI/WebServerResources/scss/core/_functions.scss
View File

@@ -41,3 +41,18 @@
@return $value;
}
/// Utility fonction to easily get any hue from any palette anyware
/// More easy to remember than variable names
@function sg-color($color, $hue) {
@return map-get($color, $hue);
}
/// Utility fonction to easily get font size from typographic scale
/// More easy to remember than variable names.
/// @usage : provide type-size from the Material design typographic scale
/// (caption, body, button, menu, subhead, title, headline, display-1, display-2, display-3, display-4 ; ther's also shortcut aliases : d1, d2, d3, d4)
/// @return : type size
@function sg-size($size) {
@return map-get($typeSize, $size);
}

4
UI/WebServerResources/scss/core/base_styles/_base_style.scss
View File

@@ -10,7 +10,7 @@
*/
body,
.main { // see if '.main' fit the purposes
main {
background-color: sg-color($sogoPaper, 200);
padding-bottom: $toolbar-height; // padding to compensate for the bottom bar
}

18
UI/WebServerResources/scss/core/typography/typography.scss
View File

@@ -180,6 +180,24 @@ $sg-font-size-6: nth($sg-typo-scale, 6) * 1px;
$sg-font-size-7: nth($sg-typo-scale, 7) * 1px;
$sg-font-size-8: nth($sg-typo-scale, 8) * 1px;
$sg-font-size-9: nth($sg-typo-scale, 9) * 1px;
// In a convenient map
$typeSize: (
caption: 12,
body: 14,
button: 14,
subhead: 16,
title: 20,
headline: 24,
display-1: 34,
d1: 34,
display-2: 45,
d2: 45,
display-3: 56,
d3: 56,
display-4: 112,
d4: 112
);
// Basic line heights
// ----------------------------------------------------------------------------

46
UI/WebServerResources/scss/core/variables.scss
View File

@@ -7,43 +7,46 @@ $version: '3.alpha';
// palettes import -
// ------------------------------------------------------------------------------
// fixme : consolidate all settings and imports in a decent 'settings' file
@import '../themes/color-palette'; // fixme : clarify if it is deeded or assure by javascript
//@import '../themes/color-palette'; // fixme : clarify if it is needed or assure by javascript
@import 'components/palette'; // fixme : The maps in color-palettes are more js then scss
// Font Variables
$font-family: 'Fira sans', 'Helvetica Neue', sans-serif !default;
//$dark-theme: false !default;
//$foreground-color-palette: $color-grey !default;
$primary-color: map-get($color-vintage-blue, 'A700') !default;
//$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
$primary-color: sg-color($sogoBlue, 300) !default;
//$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
$foreground-primary-color: rgba($primary-color, 0.87);//override
//$foreground-secondary-color: rgba($foreground-base-color, 0.54) !default;
//$foreground-tertiary-color: rgba($foreground-base-color, 0.26) !default;
//$foreground-quarternary-color: rgba($foreground-base-color, 0.12) !default;
//$foreground-text-shadow: none !default;
$bottombar-color: #212121;
//$input-border-color: $foreground-secondary-color !default;
//$input-disabled-border-color: $foreground-tertiary-color !default;
//
//$background-color-palette: $color-paper !default;
//$background-color-base: map-get($background-color-palette, '200') !default;
//
//$primary-color-palette: $color-light-blue !default;
//$warn-color-palette: $color-red !default;
//$primary-color-palette-contrast-color: white !default;
//todo ; create grey map$bottombar-color: #121212;
// Layout
// ------------------------------
$baseline-grid: 8px !default;
// shortcut aliases for $baseline-grid
$bl: $baseline-grid;
$line: $baseline-grid;
$sg-md-grid-pitch: 8 * $baseline-grid;
// shortcut alias for $sg-md-grid-pitch
$pitch: $sg-md-grid-pitch;
// Google specifies dimensions in grid pitch
// This is a small utility function
// Return dimension in px
@function grid-step($nb) {
@return ($pitch * $nb)
}
// Margins
$layout-gutter-width: ($baseline-grid * 2) !default;
$md-base-margin: $layout-gutter-width;
// alias
$mg: $layout-gutter-width;
$layout-breakpoint-sm: 600px !default;
$layout-breakpoint-md: 960px !default;
$layout-breakpoint-lg: 1200px !default;
$layout-gutter-width: ($baseline-grid * 2) !default;
// App bar variables
$app-bar-height: 64px;
@@ -65,7 +68,6 @@ $whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0,0,0,0.2) !default;
$whiteframe-zindex-z5: 5 !default;
// Z-indexes
//--------------------------------------------

1
UI/WebServerResources/scss/styles.scss
View File

@@ -61,7 +61,6 @@
@import 'components/whiteframe/whiteframe.scss';
// Theme
@import 'components/palette';
//@import '../angular-material/src/components/bottomSheet/bottomSheet-theme.scss';
//@import '../angular-material/src/components/button/button-theme.scss';
//@import '../angular-material/src/components/card/card-theme.scss';