From 05e58b30cca6d58c86f0893f2b1d061b449a585b Mon Sep 17 00:00:00 2001 From: Benoit Favreault Date: Thu, 26 Mar 2015 14:39:44 -0400 Subject: [PATCH] Replace mobile detail-view transitions Minor adjustments to layout --- .../MailerUI/UIxMailFolderTemplate.wox | 4 +-- UI/Templates/MailerUI/UIxMailViewTemplate.wox | 2 +- .../css/ng-tags-input.bootstrap.css | 10 ++++++++ .../css/ng-tags-input.bootstrap.min.css | 2 +- UI/WebServerResources/css/ng-tags-input.css | 25 +++++++++++++++++++ .../css/ng-tags-input.min.css | 2 +- UI/WebServerResources/js/Common/ui.js | 7 +++--- .../scss/components/button/_button.scss | 5 +++- UI/WebServerResources/scss/views/_view.scss | 22 +++++++++++++--- 9 files changed, 66 insertions(+), 13 deletions(-) diff --git a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox index 01c2677c4..f0658845e 100644 --- a/UI/Templates/MailerUI/UIxMailFolderTemplate.wox +++ b/UI/Templates/MailerUI/UIxMailFolderTemplate.wox @@ -16,7 +16,7 @@ vs-scroll-parent="#messagesList"> - +
@@ -42,6 +42,6 @@ -
+
diff --git a/UI/Templates/MailerUI/UIxMailViewTemplate.wox b/UI/Templates/MailerUI/UIxMailViewTemplate.wox index c70366bb3..ac5e53210 100644 --- a/UI/Templates/MailerUI/UIxMailViewTemplate.wox +++ b/UI/Templates/MailerUI/UIxMailViewTemplate.wox @@ -7,7 +7,7 @@ xmlns:label="OGo:label" xmlns:uix="OGo:uix"> - +
diff --git a/UI/WebServerResources/css/ng-tags-input.bootstrap.css b/UI/WebServerResources/css/ng-tags-input.bootstrap.css index 5f8ea5b79..c706c157c 100644 --- a/UI/WebServerResources/css/ng-tags-input.bootstrap.css +++ b/UI/WebServerResources/css/ng-tags-input.bootstrap.css @@ -60,6 +60,16 @@ tags-input.ng-invalid .tags { -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; } +tags-input[disabled] .tags { + background-color: #eeeeee; +} +tags-input[disabled] .tags .tag-item { + background: #337ab7; + opacity: 0.65; +} +tags-input[disabled] .tags .input { + background-color: #eeeeee; +} .input-group tags-input { padding: 0; diff --git a/UI/WebServerResources/css/ng-tags-input.bootstrap.min.css b/UI/WebServerResources/css/ng-tags-input.bootstrap.min.css index d21842194..d3c90a84c 100644 --- a/UI/WebServerResources/css/ng-tags-input.bootstrap.min.css +++ b/UI/WebServerResources/css/ng-tags-input.bootstrap.min.css @@ -1 +1 @@ -tags-input{box-shadow:none;border:none;padding:0;min-height:34px}tags-input .host{margin:0}tags-input .tags{-moz-appearance:none;-webkit-appearance:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-moz-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}tags-input .tags .tag-item{color:#fff;background:#428bca;border:1px solid #357ebd;border-radius:4px}tags-input .tags .tag-item.selected{color:#fff;background:#d9534f;border:1px solid #d43f3a}tags-input .tags .tag-item .remove-button:hover{text-decoration:none}tags-input .tags.focused{border:1px solid #66afe9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}tags-input .autocomplete{border-radius:4px}tags-input .autocomplete .suggestion-item.selected,tags-input .autocomplete .suggestion-item.selected em{color:#262626;background-color:#f5f5f5}tags-input .autocomplete .suggestion-item em{color:#000;background-color:#fff}tags-input.ng-invalid .tags{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.input-group tags-input{padding:0;display:table-cell}.input-group tags-input:not(:first-child) .tags{border-top-left-radius:0;border-bottom-left-radius:0}.input-group tags-input:not(:last-child) .tags{border-top-right-radius:0;border-bottom-right-radius:0}.input-group-lg tags-input:first-child .tags{border-top-left-radius:6px;border-bottom-left-radius:6px}.input-group-lg tags-input:last-child .tags{border-top-right-radius:6px;border-bottom-right-radius:6px}.input-group-sm tags-input:first-child .tags{border-top-left-radius:3px;border-bottom-left-radius:3px}.input-group-sm tags-input:last-child .tags{border-top-right-radius:3px;border-bottom-right-radius:3px}.input-group-lg tags-input,tags-input.ti-input-lg{min-height:46px}.input-group-lg tags-input .tags,tags-input.ti-input-lg .tags{border-radius:6px}.input-group-lg tags-input .tags .tag-item,tags-input.ti-input-lg .tags .tag-item{height:38px;line-height:37px;font-size:18px;border-radius:6px}.input-group-lg tags-input .tags .tag-item .remove-button,tags-input.ti-input-lg .tags .tag-item .remove-button{font-size:20px}.input-group-lg tags-input .tags .input,tags-input.ti-input-lg .tags .input{height:38px;font-size:18px}.input-group-sm tags-input,tags-input.ti-input-sm{min-height:30px}.input-group-sm tags-input .tags,tags-input.ti-input-sm .tags{border-radius:3px}.input-group-sm tags-input .tags .tag-item,tags-input.ti-input-sm .tags .tag-item{height:22px;line-height:21px;font-size:12px;border-radius:3px}.input-group-sm tags-input .tags .tag-item .remove-button,tags-input.ti-input-sm .tags .tag-item .remove-button{font-size:16px}.input-group-sm tags-input .tags .input,tags-input.ti-input-sm .tags .input{height:22px;font-size:12px}.has-feedback tags-input .tags{padding-right:30px}.has-success tags-input .tags{border-color:#3c763d}.has-success tags-input .tags.focused{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-error tags-input .tags{border-color:#a94442}.has-error tags-input .tags.focused{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-warning tags-input .tags{border-color:#8a6d3b}.has-warning tags-input .tags.focused{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b} \ No newline at end of file +tags-input{box-shadow:none;border:none;padding:0;min-height:34px}tags-input .host{margin:0}tags-input .tags{-moz-appearance:none;-webkit-appearance:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-moz-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}tags-input .tags .tag-item{color:#fff;background:#428bca;border:1px solid #357ebd;border-radius:4px}tags-input .tags .tag-item.selected{color:#fff;background:#d9534f;border:1px solid #d43f3a}tags-input .tags .tag-item .remove-button:hover{text-decoration:none}tags-input .tags.focused{border:1px solid #66afe9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}tags-input .autocomplete{border-radius:4px}tags-input .autocomplete .suggestion-item.selected,tags-input .autocomplete .suggestion-item.selected em{color:#262626;background-color:#f5f5f5}tags-input .autocomplete .suggestion-item em{color:#000;background-color:#fff}tags-input.ng-invalid .tags{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}tags-input[disabled] .tags{background-color:#eee}tags-input[disabled] .tags .tag-item{background:#337ab7;opacity:.65}tags-input[disabled] .tags .input{background-color:#eee}.input-group tags-input{padding:0;display:table-cell}.input-group tags-input:not(:first-child) .tags{border-top-left-radius:0;border-bottom-left-radius:0}.input-group tags-input:not(:last-child) .tags{border-top-right-radius:0;border-bottom-right-radius:0}.input-group-lg tags-input:first-child .tags{border-top-left-radius:6px;border-bottom-left-radius:6px}.input-group-lg tags-input:last-child .tags{border-top-right-radius:6px;border-bottom-right-radius:6px}.input-group-sm tags-input:first-child .tags{border-top-left-radius:3px;border-bottom-left-radius:3px}.input-group-sm tags-input:last-child .tags{border-top-right-radius:3px;border-bottom-right-radius:3px}.input-group-lg tags-input,tags-input.ti-input-lg{min-height:46px}.input-group-lg tags-input .tags,tags-input.ti-input-lg .tags{border-radius:6px}.input-group-lg tags-input .tags .tag-item,tags-input.ti-input-lg .tags .tag-item{height:38px;line-height:37px;font-size:18px;border-radius:6px}.input-group-lg tags-input .tags .tag-item .remove-button,tags-input.ti-input-lg .tags .tag-item .remove-button{font-size:20px}.input-group-lg tags-input .tags .input,tags-input.ti-input-lg .tags .input{height:38px;font-size:18px}.input-group-sm tags-input,tags-input.ti-input-sm{min-height:30px}.input-group-sm tags-input .tags,tags-input.ti-input-sm .tags{border-radius:3px}.input-group-sm tags-input .tags .tag-item,tags-input.ti-input-sm .tags .tag-item{height:22px;line-height:21px;font-size:12px;border-radius:3px}.input-group-sm tags-input .tags .tag-item .remove-button,tags-input.ti-input-sm .tags .tag-item .remove-button{font-size:16px}.input-group-sm tags-input .tags .input,tags-input.ti-input-sm .tags .input{height:22px;font-size:12px}.has-feedback tags-input .tags{padding-right:30px}.has-success tags-input .tags{border-color:#3c763d}.has-success tags-input .tags.focused{border-color:#2b542c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168}.has-error tags-input .tags{border-color:#a94442}.has-error tags-input .tags.focused{border-color:#843534;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483}.has-warning tags-input .tags{border-color:#8a6d3b}.has-warning tags-input .tags.focused{border-color:#66512c;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b} \ No newline at end of file diff --git a/UI/WebServerResources/css/ng-tags-input.css b/UI/WebServerResources/css/ng-tags-input.css index 86ee970c2..77e228283 100644 --- a/UI/WebServerResources/css/ng-tags-input.css +++ b/UI/WebServerResources/css/ng-tags-input.css @@ -90,6 +90,28 @@ tags-input.ng-invalid .tags { -moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6); box-shadow: 0 0 3px 1px rgba(255, 0, 0, 0.6); } +tags-input[disabled] .host:focus { + outline: none; +} +tags-input[disabled] .tags { + background-color: #eeeeee; + cursor: default; +} +tags-input[disabled] .tags .tag-item { + opacity: 0.65; + background: -webkit-linear-gradient(top, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%); + background: linear-gradient(to bottom, #f0f9ff 0%, rgba(203, 235, 255, 0.75) 47%, rgba(161, 219, 255, 0.62) 100%); +} +tags-input[disabled] .tags .tag-item .remove-button { + cursor: default; +} +tags-input[disabled] .tags .tag-item .remove-button:active { + color: #585858; +} +tags-input[disabled] .tags .input { + background-color: #eeeeee; + cursor: default; +} tags-input .autocomplete { margin-top: 5px; @@ -107,6 +129,9 @@ tags-input .autocomplete .suggestion-list { margin: 0; padding: 0; list-style-type: none; + max-height: 280px; + overflow-y: auto; + position: relative; } tags-input .autocomplete .suggestion-item { padding: 5px 10px; diff --git a/UI/WebServerResources/css/ng-tags-input.min.css b/UI/WebServerResources/css/ng-tags-input.min.css index 052ecf3d5..ee4a4a98d 100644 --- a/UI/WebServerResources/css/ng-tags-input.min.css +++ b/UI/WebServerResources/css/ng-tags-input.min.css @@ -1 +1 @@ -tags-input{display:block}tags-input *,tags-input :after,tags-input :before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}tags-input .host{position:relative;margin-top:5px;margin-bottom:5px;height:100%}tags-input .host:active{outline:0}tags-input .tags{-moz-appearance:textfield;-webkit-appearance:textfield;padding:1px;overflow:hidden;word-wrap:break-word;cursor:text;background-color:#fff;border:1px solid #a9a9a9;box-shadow:1px 1px 1px 0 #d3d3d3 inset;height:100%}tags-input .tags.focused{outline:0;-webkit-box-shadow:0 0 3px 1px rgba(5,139,242,.6);-moz-box-shadow:0 0 3px 1px rgba(5,139,242,.6);box-shadow:0 0 3px 1px rgba(5,139,242,.6)}tags-input .tags .tag-list{margin:0;padding:0;list-style-type:none}tags-input .tags .tag-item{margin:2px;padding:0 5px;display:inline-block;float:left;font:14px "Helvetica Neue",Helvetica,Arial,sans-serif;height:26px;line-height:25px;border:1px solid #acacac;border-radius:3px;background:-webkit-linear-gradient(top,#f0f9ff 0,#cbebff 47%,#a1dbff 100%);background:linear-gradient(to bottom,#f0f9ff 0,#cbebff 47%,#a1dbff 100%)}tags-input .tags .tag-item.selected{background:-webkit-linear-gradient(top,#febbbb 0,#fe9090 45%,#ff5c5c 100%);background:linear-gradient(to bottom,#febbbb 0,#fe9090 45%,#ff5c5c 100%)}tags-input .tags .tag-item .remove-button{margin:0 0 0 5px;padding:0;border:none;background:0 0;cursor:pointer;vertical-align:middle;font:700 16px Arial,sans-serif;color:#585858}tags-input .tags .tag-item .remove-button:active{color:red}tags-input .tags .input{border:0;outline:0;margin:2px;padding:0;padding-left:5px;float:left;height:26px;font:14px "Helvetica Neue",Helvetica,Arial,sans-serif}tags-input .tags .input.invalid-tag{color:red}tags-input .tags .input::-ms-clear{display:none}tags-input.ng-invalid .tags{-webkit-box-shadow:0 0 3px 1px rgba(255,0,0,.6);-moz-box-shadow:0 0 3px 1px rgba(255,0,0,.6);box-shadow:0 0 3px 1px rgba(255,0,0,.6)}tags-input .autocomplete{margin-top:5px;position:absolute;padding:5px 0;z-index:999;width:100%;background-color:#fff;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}tags-input .autocomplete .suggestion-list{margin:0;padding:0;list-style-type:none}tags-input .autocomplete .suggestion-item{padding:5px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#000;background-color:#fff}tags-input .autocomplete .suggestion-item.selected,tags-input .autocomplete .suggestion-item.selected em{color:#fff;background-color:#0097cf}tags-input .autocomplete .suggestion-item em{font:normal bold 16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#000;background-color:#fff} \ No newline at end of file +tags-input{display:block}tags-input *,tags-input :after,tags-input :before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}tags-input .host{position:relative;margin-top:5px;margin-bottom:5px;height:100%}tags-input .host:active{outline:0}tags-input .tags{-moz-appearance:textfield;-webkit-appearance:textfield;padding:1px;overflow:hidden;word-wrap:break-word;cursor:text;background-color:#fff;border:1px solid #a9a9a9;box-shadow:1px 1px 1px 0 #d3d3d3 inset;height:100%}tags-input .tags.focused{outline:0;-webkit-box-shadow:0 0 3px 1px rgba(5,139,242,.6);-moz-box-shadow:0 0 3px 1px rgba(5,139,242,.6);box-shadow:0 0 3px 1px rgba(5,139,242,.6)}tags-input .tags .tag-list{margin:0;padding:0;list-style-type:none}tags-input .tags .tag-item{margin:2px;padding:0 5px;display:inline-block;float:left;font:14px "Helvetica Neue",Helvetica,Arial,sans-serif;height:26px;line-height:25px;border:1px solid #acacac;border-radius:3px;background:-webkit-linear-gradient(top,#f0f9ff 0,#cbebff 47%,#a1dbff 100%);background:linear-gradient(to bottom,#f0f9ff 0,#cbebff 47%,#a1dbff 100%)}tags-input .tags .tag-item.selected{background:-webkit-linear-gradient(top,#febbbb 0,#fe9090 45%,#ff5c5c 100%);background:linear-gradient(to bottom,#febbbb 0,#fe9090 45%,#ff5c5c 100%)}tags-input .tags .tag-item .remove-button{margin:0 0 0 5px;padding:0;border:none;background:0 0;cursor:pointer;vertical-align:middle;font:700 16px Arial,sans-serif;color:#585858}tags-input .tags .tag-item .remove-button:active{color:red}tags-input .tags .input{border:0;outline:0;margin:2px;padding:0;padding-left:5px;float:left;height:26px;font:14px "Helvetica Neue",Helvetica,Arial,sans-serif}tags-input .tags .input.invalid-tag{color:red}tags-input .tags .input::-ms-clear{display:none}tags-input.ng-invalid .tags{-webkit-box-shadow:0 0 3px 1px rgba(255,0,0,.6);-moz-box-shadow:0 0 3px 1px rgba(255,0,0,.6);box-shadow:0 0 3px 1px rgba(255,0,0,.6)}tags-input[disabled] .host:focus{outline:0}tags-input[disabled] .tags{background-color:#eee;cursor:default}tags-input[disabled] .tags .tag-item{opacity:.65;background:-webkit-linear-gradient(top,#f0f9ff 0,rgba(203,235,255,.75)47%,rgba(161,219,255,.62)100%);background:linear-gradient(to bottom,#f0f9ff 0,rgba(203,235,255,.75)47%,rgba(161,219,255,.62)100%)}tags-input[disabled] .tags .tag-item .remove-button{cursor:default}tags-input[disabled] .tags .tag-item .remove-button:active{color:#585858}tags-input[disabled] .tags .input{background-color:#eee;cursor:default}tags-input .autocomplete{margin-top:5px;position:absolute;padding:5px 0;z-index:999;width:100%;background-color:#fff;border:1px solid rgba(0,0,0,.2);-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2)}tags-input .autocomplete .suggestion-list{margin:0;padding:0;list-style-type:none;max-height:280px;overflow-y:auto;position:relative}tags-input .autocomplete .suggestion-item{padding:5px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#000;background-color:#fff}tags-input .autocomplete .suggestion-item.selected,tags-input .autocomplete .suggestion-item.selected em{color:#fff;background-color:#0097cf}tags-input .autocomplete .suggestion-item em{font:normal bold 16px "Helvetica Neue",Helvetica,Arial,sans-serif;color:#000;background-color:#fff} \ No newline at end of file diff --git a/UI/WebServerResources/js/Common/ui.js b/UI/WebServerResources/js/Common/ui.js index a327c8ed3..32790073c 100644 --- a/UI/WebServerResources/js/Common/ui.js +++ b/UI/WebServerResources/js/Common/ui.js @@ -117,6 +117,7 @@ }) .controller('navController', ['$scope', '$timeout', '$interval', '$http', '$mdSidenav', '$mdBottomSheet', '$mdMedia', '$log', 'sgConstant', function ($scope, $timeout, $interval, $http, $mdSidenav, $mdBottomSheet, $mdMedia, $log, sgConstant) { + // Show current day in top bar $scope.currentDay = window.currentDay; $timeout(function() { @@ -147,10 +148,8 @@ }); }; $scope.toggleDetailView = function() { - $timeout(function() { - var view = angular.element(document.getElementById('detailView')); - view.toggleClass('sg-open'); - }) + var detail = angular.element(document.getElementById('detailView')); + detail.toggleClass('sg-close'); }; $scope.$watch(function() { return $mdMedia(sgConstant['gt-md']); diff --git a/UI/WebServerResources/scss/components/button/_button.scss b/UI/WebServerResources/scss/components/button/_button.scss index aa22d6d10..63cfe02c0 100644 --- a/UI/WebServerResources/scss/components/button/_button.scss +++ b/UI/WebServerResources/scss/components/button/_button.scss @@ -100,11 +100,14 @@ $iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing- .sg-icon-bar--vertical { display: flex; flex-direction: column; - margin: 0 ($iconButton-padding * -1) 0 $mg; + margin: ($iconButton-padding * -1) ($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; + @include at(sm) { + margin-left: $iconButton-padding; + } } // NiceToHave: some horizontal or left hand side variant diff --git a/UI/WebServerResources/scss/views/_view.scss b/UI/WebServerResources/scss/views/_view.scss index c3f31a60a..f0596677f 100644 --- a/UI/WebServerResources/scss/views/_view.scss +++ b/UI/WebServerResources/scss/views/_view.scss @@ -61,11 +61,27 @@ $detailView-width: grid-step(8) !global; 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%); + transition: all 0.2s $swift-ease-in-out-timing-function; + &.sg-close { + transition-delay: 0.2s; + transform: translateX(-200%); + &.ng-enter { + filter: opacity(0); + } + } + &.ng-enter { + transform: translateX(0); + } + &.ng-enter.ng-enter-active, + &.ng-leave { + filter: opacity(1); transform: translateX(-100%); } + &.ng-leave.ng.leave-active { + filter: opacity(1); + transform: translateX(-200%); + } [class *= md-whiteframe-] { box-shadow: none; }