mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-05-20 19:05:25 +00:00
Add responsiveness (First draft)
This commit is contained in:
Benoit Favreault
committed by
Francis Lachapelle
Francis Lachapelle
parent
516e5fd303
commit
48b74b0f6b
@@ -207,9 +207,10 @@
|
||||
<md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
|
||||
<div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
|
||||
<div class="sg-toolbar-group-1" layout="row">
|
||||
<md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon iconButton" label:aria-label="Toggle Menu">
|
||||
<md-button ng-click="toggleLeft()" class="hide-gt-md sg-button-navicon iconButton" label:aria-label="Toggle Menu">
|
||||
<span class="md-icon-menu"></span>
|
||||
</md-button>
|
||||
<!--todo: provide live data for this group-->
|
||||
<div class="sg-date-group" layout="column" layout-align="space-between end">
|
||||
<p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
|
||||
<p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
|
||||
@@ -237,10 +238,8 @@
|
||||
<md-option value="category"><var:string label:value="Category"/></md-option>
|
||||
<md-option value="organization"><var:string label:value="Organization"/></md-option>
|
||||
</md-select>
|
||||
<md-button class="iconButton" label:aria-label="New Contact" ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><i class="md-icon-create"><!--icon--></i></md-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer cols-8"><!-- spacer --></div>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
@@ -273,7 +272,7 @@
|
||||
<md-item ng-repeat="currentCard in addressbook.cards track by currentCard.id">
|
||||
<md-item-content
|
||||
ng-class="{_selected: card.id == currentCard.id}"
|
||||
ng-click="select($index)">
|
||||
ng-click="select($index); toggleDetailView()">
|
||||
<div class="md-tile-left">
|
||||
<!--avatar--><!-- currentCard.tag = vcard || vlist -->
|
||||
</div>
|
||||
@@ -289,7 +288,8 @@
|
||||
</md-content>
|
||||
<!-- This extra container is used to animate views transitions
|
||||
double quotes in ng-animate is not a typo -->
|
||||
<div class="view-detail" ui-view="card" layout="column" ng-animate="'view'"><!-- card view --></div>
|
||||
<div id="detailView" class="view-detail" ui-view="card" layout="column" ng-animate="'view'"><!-- card view --></div>
|
||||
<md-button class="iconButton md-fab md-accent" label:aria-label="New Contact" ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><i class="md-icon-add"><!--icon--></i></md-button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
>
|
||||
<md-card class="viewer">
|
||||
<md-card-content>
|
||||
<md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-arrow-back"><!--icon--></i></md-button>
|
||||
<header>
|
||||
<div class="sg-avatar">
|
||||
<!--avatar--><!-- currentCard.tag = vcard || vlist -->
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<container
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
>
|
||||
<md-content class="view-list" style="position: relative;" id="messagesList">
|
||||
<md-content class="view-list cols-6" style="position: relative;" id="messagesList">
|
||||
<style>
|
||||
.vs-repeat-repeated-element {
|
||||
width: 100%;
|
||||
@@ -16,7 +16,7 @@
|
||||
vs-scroll-parent="#messagesList">
|
||||
<md-item ng-repeat="currentMessage in mailbox.$messages track by currentMessage.id"
|
||||
ng-class="{unread: !currentMessage.isread}">
|
||||
<md-item-content ui-sref-active="_selected">
|
||||
<md-item-content ui-sref-active="_selected" ng-click="toggleDetailView()">
|
||||
<div class="md-tile-left">
|
||||
<!--avatar-->
|
||||
</div>
|
||||
@@ -42,6 +42,6 @@
|
||||
</md-content>
|
||||
<!-- This extra container is used to animate views transitions
|
||||
double quotes in ng-animate is not a typo -->
|
||||
<div class="view-detail" layout="column" ui-view="message" ng-animate="'view'"><!-- message view --></div>
|
||||
<div id="detailView" class="view-detail" layout="column" ui-view="message"><!-- message view --></div>
|
||||
|
||||
</container>
|
||||
|
||||
@@ -306,9 +306,10 @@
|
||||
<md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
|
||||
<div class="md-toolbar-tools md-toolbar-tools-top" layout="row" layout-align="space-between start">
|
||||
<div class="sg-toolbar-group-1" layout="row">
|
||||
<md-button ng-click="toggleLeft()" class="md-hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
|
||||
<md-button ng-click="toggleLeft()" class="hide-gt-md sg-button-navicon iconButton" aria-label="Toggle Menu">
|
||||
<span class="md-icon-menu"></span>
|
||||
</md-button>
|
||||
<!--todo: provide live data for this group-->
|
||||
<div class="sg-date-group" layout="column" layout-align="space-between end">
|
||||
<p class="sg-day" ng-bind="currentDay.weekday"><!-- weekday --></p>
|
||||
<p class="sg-month" ng-bind="currentDay.month"><!-- month --></p>
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
xmlns:uix="OGo:uix">
|
||||
|
||||
<md-content md-scroll-y="md-scroll-y" class="md-padding bg-sogoPaper-50 md-whiteframe-z1">
|
||||
<md-button class="iconButton show-sm" ng-click="toggleDetailView()"><i class="md-icon-arrow-back"><!--icon--></i></md-button>
|
||||
<header class="msg-header">
|
||||
|
||||
<div class="msg-header-content">
|
||||
|
||||
@@ -37,7 +37,8 @@ module.exports = function(grunt) {
|
||||
loadPath: ['scss', 'bower_components/compass-mixins/lib',
|
||||
'bower_components/compass-breakpoint/stylesheets',
|
||||
'bower_components/breakpoint-slicer/stylesheets',
|
||||
'bower_components/sassy-maps/sass'],
|
||||
'bower_components/sassy-maps/sass'
|
||||
],
|
||||
style: 'expanded'
|
||||
},
|
||||
dist: {
|
||||
|
||||
@@ -91,9 +91,9 @@
|
||||
'hue-3': 'A700'
|
||||
})
|
||||
.accentPalette('sogo-green', {
|
||||
'default': '300',
|
||||
'default': '500',
|
||||
'hue-1': '200',
|
||||
'hue-2': '500',
|
||||
'hue-2': '300',
|
||||
'hue-3': 'A700'
|
||||
})
|
||||
.backgroundPalette('sogo-paper', {
|
||||
@@ -146,6 +146,12 @@
|
||||
templateUrl: 'bottomSheetTemplate.html'
|
||||
});
|
||||
};
|
||||
$scope.toggleDetailView = function() {
|
||||
$timeout(function() {
|
||||
var view = angular.element(document.getElementById('detailView'));
|
||||
view.toggleClass('sg-open');
|
||||
})
|
||||
};
|
||||
$scope.$watch(function() {
|
||||
return $mdMedia(sgConstant['gt-md']);
|
||||
},
|
||||
|
||||
@@ -87,15 +87,16 @@ linters:
|
||||
enabled: true
|
||||
|
||||
PropertySortOrder:
|
||||
enabled: false
|
||||
ignore_unspecified: false
|
||||
enabled: true
|
||||
order: concentric
|
||||
ignore_unspecified: true
|
||||
|
||||
PropertySpelling:
|
||||
enabled: true
|
||||
extra_properties: []
|
||||
|
||||
QualifyingElement:
|
||||
enabled: true
|
||||
enabled: false
|
||||
allow_element_with_attribute: false
|
||||
allow_element_with_class: false
|
||||
allow_element_with_id: false
|
||||
|
||||
@@ -12,24 +12,27 @@
|
||||
// ------------------------------------
|
||||
sg-folder-tree .md-button,
|
||||
md-sidenav md-list button.md-button {
|
||||
padding: 0;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-size: sg-size(button);
|
||||
padding: 0;
|
||||
text-transform: initial;
|
||||
font-size: sg-size(button);
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.sg-folder {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sg-active .md-button {
|
||||
color: sg-color($sogoBlue, 800);
|
||||
}
|
||||
|
||||
md-sidenav .md-button [class ^= md-icon] {
|
||||
md-sidenav .md-button [class ^= "md-icon"] {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
///
|
||||
/// iconButton
|
||||
/// according to Material design specs:
|
||||
@@ -54,25 +57,26 @@ $iconButton-padding: ($iconButton-size - ($iconButton-icon-size + ($iconButton-i
|
||||
$iconButton-hover-scale: 1.25;
|
||||
$iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-function;
|
||||
|
||||
|
||||
// Classes
|
||||
.iconButton {
|
||||
padding: $iconButton-padding;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
.iconButton,
|
||||
.md-button.md-default-theme:not([disabled]).iconButton {
|
||||
// z-index provides a stacking context that prevent ripple-effect from overflowing
|
||||
z-index: 1;
|
||||
background-clip: content-box;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
padding: $iconButton-padding;
|
||||
border-radius: 50%;
|
||||
color: inherit;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
|
||||
[class ^= md-icon],
|
||||
[class *= md-icon-] {
|
||||
transform: scale($iconButton-hover-scale);
|
||||
}
|
||||
}
|
||||
|
||||
[class ^= md-icon],
|
||||
[class *= md-icon-] {
|
||||
padding: $iconButton-icon-padding;
|
||||
@@ -80,20 +84,27 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
|
||||
font-size: $iconButton-icon-size;
|
||||
transition: $iconButton-transition;
|
||||
}
|
||||
.md-icon-arrow-back {
|
||||
font-size: sg-size('headline')
|
||||
}
|
||||
|
||||
.md-ripple-container {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Icon-bars are for iconButtons, by default they're vertical and at the right
|
||||
// the modifier class is to reflect those values and leave place to other versions
|
||||
.sg-icon-bar--vertical {
|
||||
font-size: $sg-font-size-3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
// Containers have padding, we compensate to align according to specs
|
||||
margin: 0 ($iconButton-padding * -1) 0 $mg;
|
||||
font-size: $sg-font-size-3;
|
||||
align-items: center;
|
||||
// Containers have padding, we compensate to align according to specs
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
// NiceToHave: some horizontal or left hand side variant
|
||||
@@ -102,16 +113,23 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-
|
||||
display: block;
|
||||
}
|
||||
|
||||
// angular-material is overspecifying so we are
|
||||
.md-button.md-default-theme:not([disabled]).iconButton {
|
||||
@extend .iconButton;
|
||||
//// angular-material is overspecifying so we are
|
||||
//.md-button.md-default-theme:not([disabled]).iconButton {
|
||||
// @extend .iconButton;
|
||||
//}
|
||||
|
||||
.md-button.iconButton.md-fab.md-default-theme {
|
||||
z-index: $z-index-fab;
|
||||
margin-right: $mg;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.sg-button-navicon {
|
||||
margin-left: ($mg * -1);
|
||||
width: $touch-zone;
|
||||
height: $touch-zone;
|
||||
margin-left: ($mg * -1);
|
||||
}
|
||||
|
||||
// angular-material is overspecifying so we are and so we have to continue
|
||||
.sg-button-navicon.iconButton span.md-icon-menu,
|
||||
.sg-button-navicon.iconButton i[class|="md-icon"] {
|
||||
|
||||
@@ -4,9 +4,6 @@ $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;
|
||||
@@ -37,9 +34,10 @@ md-sidenav {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
&.md-locked-open {
|
||||
width: $sidenav-default-width;
|
||||
min-width: $sidenav-default-width;
|
||||
max-width: $sidenav-default-width;
|
||||
@include from(lg) {
|
||||
@include flex-col(lg, 4, 1, 1)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.md-locked-open,
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
|
||||
md-toolbar {
|
||||
// todo: create variables scaled z-index
|
||||
z-index: 20;
|
||||
box-shadow: none;
|
||||
font-size: initial;
|
||||
}
|
||||
|
||||
@@ -9,11 +9,6 @@
|
||||
*
|
||||
*/
|
||||
|
||||
.sg-app-content {
|
||||
// Adjust visualy to keep breathing room at the bottom
|
||||
padding-bottom: $mg;
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: sg-color($sogoPaper, 200);
|
||||
}
|
||||
|
||||
@@ -2,30 +2,161 @@
|
||||
// -------------------------------
|
||||
@import "../../angular-material/src/core/style/layout";
|
||||
|
||||
|
||||
/**
|
||||
* Overrides angular-material sources
|
||||
* There are some redundancies (thanks to breakpoint-slicer) that can't
|
||||
* be easily overriden and are interfeering
|
||||
*
|
||||
*/
|
||||
// todo: look for redundancies and find a way to override them
|
||||
|
||||
// Responsive attributes
|
||||
// Some value are defined in project variables
|
||||
// ------------------------------
|
||||
|
||||
// hide means hide everywhere
|
||||
/* Sizes:
|
||||
0 <= size < 600 Phone
|
||||
600 <= size < 960 Tablet
|
||||
960 <= size < 1200 Tablet-Landscape
|
||||
1200 <= size PC
|
||||
*/
|
||||
|
||||
|
||||
// SMALL SCREEN
|
||||
@include at(sm) {
|
||||
.hide-sm, .hide {
|
||||
&:not(.show-sm):not(.show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include flex-order-for-name(sm);
|
||||
@include layout-align-for-name(sm);
|
||||
@include layout-for-name(sm);
|
||||
@include flex-properties-for-name(sm);
|
||||
}
|
||||
|
||||
@include from(md) {
|
||||
.show-sm {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// BIGGER THAN SMALL SCREEN
|
||||
@include from(md) {
|
||||
@include flex-order-for-name(gt-sm);
|
||||
@include layout-align-for-name(gt-sm);
|
||||
@include layout-for-name(gt-sm);
|
||||
@include flex-properties-for-name(gt-sm);
|
||||
}
|
||||
|
||||
// MEDIUM SCREEN
|
||||
@include at(md) {
|
||||
.hide, .hide-gt-sm {
|
||||
&:not(.show-gt-sm):not(.show-md):not(.show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.hide-md:not(.show-md):not(.show) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include flex-order-for-name(md);
|
||||
@include layout-align-for-name(md);
|
||||
@include layout-for-name(md);
|
||||
@include flex-properties-for-name(md);
|
||||
}
|
||||
|
||||
// BIGGER THAN MEDIUM SCREEN
|
||||
@include from(lg) {
|
||||
@include flex-order-for-name(gt-md);
|
||||
@include layout-align-for-name(gt-md);
|
||||
@include layout-for-name(gt-md);
|
||||
@include flex-properties-for-name(gt-md);
|
||||
@include flex-order-for-name(lg);
|
||||
@include layout-align-for-name(lg);
|
||||
@include layout-for-name(lg);
|
||||
@include flex-properties-for-name(lg);
|
||||
}
|
||||
// BIGGER THAN LARGE SCREEN
|
||||
@include from(lg) {
|
||||
.hide, .hide-gt-sm, .hide-gt-md {
|
||||
&:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.hide-lg:not(.show-lg):not(.show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// BIGGER THAN X-LARGE SCREEN in needed
|
||||
@include from(xl) {
|
||||
.hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide {
|
||||
&:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include flex-order-for-name(gt-lg);
|
||||
@include layout-align-for-name(gt-lg);
|
||||
@include layout-for-name(gt-lg);
|
||||
@include flex-properties-for-name(gt-lg);
|
||||
}
|
||||
|
||||
|
||||
// Utility classes to compensate for the the xml mandatory attribute values
|
||||
// ------------------------------------------------------------------------
|
||||
$selectors: layout, layout-sm, layout-gt-sm, layout-md, layout-gt-md, layout-lg, layout-gt-lg,
|
||||
layout-align,layout-align-sm, layout-align-gt-sm, layout-align-md, layout-align-gt-md, layout-align-lg, layout-align-gt-lg,
|
||||
layout-padding,
|
||||
layout-margin,
|
||||
layout-wrap,
|
||||
layout-fill,
|
||||
flex, flex-sm, flex-gt-sm, flex-md, flex-gt-md, flex-lg, flex-gt-lg, hide, hide-sm, hide-gt-sm, hide-md, hide-gt-md, hide-lg, hide-gt-lg, show, show-sm, show-gt-sm, show-md, show-gt-md, show-lg, show-gt-lg;
|
||||
$selectors: layout, layout-align, layout-padding, layout-margin, layout-wrap, layout-fill,
|
||||
flex, hide, show, show-sm;
|
||||
|
||||
@include attributesToClasses($selectors);
|
||||
|
||||
.md-flex {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
@for $i from 1 to 20 {
|
||||
.cols-#{$i} {
|
||||
max-width: grid-step($i);
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.cols-#{$i}.spacer {
|
||||
width: grid-step($i);
|
||||
// Generate responsive columns
|
||||
// ----------------------------------------------------------------------------
|
||||
@mixin responsive-columns($breakpoint, $query) {
|
||||
$cols: map-get($base-grid-total-columns, $breakpoint);
|
||||
$colWidth: ((100 / $cols) * 1vw);
|
||||
// there must be a way to escape the rule but we didn't found-out
|
||||
@if ($query == 'from') {
|
||||
@include from($breakpoint) {
|
||||
@for $i from 1 to $cols {
|
||||
.cols-#{$i}, {
|
||||
max-width: ($colWidth * $i);
|
||||
flex: 1 1 ($colWidth * $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@include at($breakpoint) {
|
||||
@for $i from 1 to $cols {
|
||||
.cols-#{$i} {
|
||||
max-width: ($colWidth * $i);
|
||||
flex: 1 1 ($colWidth * $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include responsive-columns('md', 'at');
|
||||
@include responsive-columns('lg', 'from');
|
||||
|
||||
// Utility to implement a specific one without extending
|
||||
// todo: include error handling
|
||||
|
||||
@mixin flex-col($breakpoint, $nb, $grow: 1, $shrink: 1) {
|
||||
$cols: map-get($base-grid-total-columns, $breakpoint);
|
||||
$colWidth: ((100 / $cols) * 1vw);
|
||||
max-width: ($colWidth * $nb);
|
||||
flex: $grow $shrink ($colWidth * $nb);
|
||||
}
|
||||
|
||||
// Rows are included in padded containers, margins are used for vertical spacing
|
||||
// ----------------------------------------------------------------------------
|
||||
@@ -33,3 +164,11 @@ flex, flex-sm, flex-gt-sm, flex-md, flex-gt-md, flex-lg, flex-gt-lg, hide, hide-
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
// App container for responsive
|
||||
.sg-app-content {
|
||||
@include to(sm) {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -22,9 +22,9 @@
|
||||
// Utility to compensate for the the xml mandatory attribute values
|
||||
// Creates classes extending layout attributes with no values
|
||||
// ----------------------------------------------------------------
|
||||
@mixin attributesToClasses($selectors) {
|
||||
@mixin attributesToClasses($selectors, $prefix: 'md') {
|
||||
@each $selector in $selectors {
|
||||
.md-#{$selector} {
|
||||
.#{$prefix}-#{$selector} {
|
||||
// no syntax error here
|
||||
@extend #{'['$selector']'} !optional
|
||||
}
|
||||
|
||||
@@ -143,7 +143,7 @@
|
||||
$md-prefix : 'sg-md';
|
||||
/// @alias $md-prefix
|
||||
$md: $md-prefix;
|
||||
$sg-rem-Base-value: 16 !global;
|
||||
$sg-rem-Base-value: 16;
|
||||
$sg-sp-value: (1 / $sg-rem-Base-value) !default; // sp value
|
||||
|
||||
$sg-md-typo-baseline: 4px;
|
||||
|
||||
@@ -39,10 +39,12 @@ $touch-zone: $touch-zone-width;
|
||||
// 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;
|
||||
@@ -61,9 +63,19 @@ $layout-breakpoint-lg: 1200px !default;
|
||||
$layout-breakpoint-md: 1024px;
|
||||
$layout-breakpoint-lg: 1280px;
|
||||
|
||||
// We use column-based responsive grids inspired by Google's Material design metrics
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
$base-grid-total-columns: (
|
||||
'sm': 1,
|
||||
'md': 16,
|
||||
'lg': 20,
|
||||
);
|
||||
|
||||
// Passing to breakpoint-slicer
|
||||
$slicer-breakpoints: 0 $layout-breakpoint-sm $layout-breakpoint-md $layout-breakpoint-lg;
|
||||
$slicer-breakpoint-names: 'phones' 'tablets' 'laptops' 'desktops';
|
||||
// todo: ? 'md' name is error prone because of possible confusion with the 'md-' prefix
|
||||
$slicer-breakpoint-names: 'sm' 'md' 'lg' 'xl';
|
||||
|
||||
$media-pointer: (pointer fine);
|
||||
|
||||
@@ -100,7 +112,8 @@ $z-index-toast: 90 !default;
|
||||
$z-index-bottom-sheet: 70 !default;
|
||||
$z-index-sidenav: 60 !default;
|
||||
$z-index-backdrop: 50 !default;
|
||||
$z-index-fab: 20 !default;
|
||||
$z-index-fab: 20;
|
||||
$z-index-view: 10;
|
||||
|
||||
// Easing Curves
|
||||
//--------------------------------------------
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
[id = "contactsList"] .sg-md-subheader {
|
||||
transform: translateY(-100%); // Compensate the container top-margin
|
||||
}
|
||||
|
||||
// md is overqualifying, we have to do the same to override
|
||||
md-content[ui-view="card"] {
|
||||
margin: 0 auto;
|
||||
@@ -11,7 +12,7 @@ md-content[ui-view="card"] {
|
||||
|
||||
// md is overqualifying, we have to do the same to override
|
||||
md-card.viewer {
|
||||
min-width: ($detailView-width - ($pitch * 2));
|
||||
|
||||
}
|
||||
|
||||
// Contact editor
|
||||
|
||||
@@ -29,8 +29,8 @@
|
||||
@extend .sg-md-title;
|
||||
margin: 0;
|
||||
margin-bottom: $line;
|
||||
font-weight: $sg-font-regular;
|
||||
white-space: normal;
|
||||
font-weight: $sg-font-regular;
|
||||
}
|
||||
|
||||
.mailer_mailcontent {
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
.view[layout=row] {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
// We make intensive use of the list/detail view pattern, here are some base
|
||||
// definitions for this
|
||||
// ----------------------------------------------------------------------------
|
||||
@@ -32,38 +33,42 @@ $detailView-width: grid-step(8) !global;
|
||||
//}
|
||||
|
||||
.view-list {
|
||||
flex: 0 1 $listView-width;
|
||||
min-width: ($listView-width - ($pitch * 2));
|
||||
@include at(md){
|
||||
@include flex-col(md, 7, 1, 1);
|
||||
}
|
||||
@include from(lg) {
|
||||
@include flex-col(lg, 6, 1, 0);
|
||||
}
|
||||
@include to(sm) {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.view-detail {
|
||||
flex: 1 2 $detailView-width;
|
||||
min-width: ($detailView-width - $pitch);
|
||||
max-width: ($detailView-width + $pitch);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: $z-index-view;
|
||||
@include from(lg) {
|
||||
@include flex-col(lg, 8, 2, 1);
|
||||
margin: 0 auto $mg auto;
|
||||
}
|
||||
@include at(md) {
|
||||
@include flex-col(md, 9);
|
||||
margin: 0;
|
||||
}
|
||||
@include to(sm) {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
background-color: sg-color($sogoPaper, 50);
|
||||
transform: translateX(0);
|
||||
transition: all 0.25s $swift-ease-in-out-timing-function;
|
||||
&.sg-open {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
[class *= md-whiteframe-] {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[ui-view="message"] {
|
||||
|
||||
&.ng-enter {
|
||||
border: 4px solid red;
|
||||
transition: all 1s linear;
|
||||
|
||||
&.ng-enter-active {
|
||||
border: 4px solid green;
|
||||
transition: all 1s linear;
|
||||
}
|
||||
}
|
||||
|
||||
&.ng-leave {
|
||||
border: 4px solid blue;
|
||||
transition: all 1s linear;
|
||||
|
||||
&.ng-leave-active {
|
||||
border: 4px solid blue;
|
||||
transition: all 1s linear;
|
||||
filter: opacity(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user