amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-08-28 17:57:38 +00:00
Code Issues Projects Releases Wiki Activity

(web) Improve contrast of toolbars w/input field

Browse Source
This commit is contained in:
Francis Lachapelle
2019-11-20 12:18:42 -05:00
parent 4628292fb3
commit 123ccef770
9 changed files with 38 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/WebServerResources/scss/components/icon/icon.scss
+5
View File
@@ -44,6 +44,10 @@ $icon-badge-size: 2 * $baseline-grid;
font-feature-settings: 'liga';
}
md-icon[ng-click]:hover {
cursor: pointer;
}
// Define CSS styles to use ng-class with md-icon
md-icon {
transition: transform 240ms;
@@ -54,6 +58,7 @@ md-icon {
position: absolute;
right: $mg * 3;
transform: rotate(-15deg);
color: white;
}
&.sg-icon--large {
font-size: $sg-md-grid-pitch;
UI/WebServerResources/scss/components/toolbar/toolbar.scss
+25 -13
View File
@@ -20,20 +20,7 @@ md-toolbar {
transition-duration: 0s;
}
// Colors transition when changing folder color in dialogs
md-dialog {
md-toolbar,
md-toolbar .md-input,
md-toolbar md-input-container.md-input-has-value label,
md-toolbar md-input-container.md-input-has-value label:not(.md-no-float),
md-toolbar md-icon {
transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function,
color $swift-ease-out-duration $swift-ease-out-timing-function;
}
}
.md-toolbar-tools {
//padding: 0;
// dirty fix to override angular-material botchy typography
font-size: 1em !important;
}
@@ -64,6 +51,31 @@ md-toolbar,
}
}
// Colors transition when changing folder color in dialogs
md-dialog {
md-toolbar,
md-toolbar .md-input,
md-toolbar md-input-container.md-input-has-value label,
md-toolbar md-input-container.md-input-has-value label:not(.md-no-float),
md-toolbar md-icon {
transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function,
color $swift-ease-out-duration $swift-ease-out-timing-function;
}
}
// Light colors for md-input inside md-toolbar
md-toolbar md-input-container:not(.md-input-invalid) {
&.md-input-focused label,
.md-input {
color: rgba(255,255,255,0.87); // {{primary-contrast}}
}
&.md-input-focused .md-input {
padding-bottom: $input-border-width-focused - $input-border-width-default;
border-bottom-width: $input-border-width-default;
border-color: rgba(255,255,255,0.87); // {{primary-contrast}}
}
}
header {
flex-direction: row;
flex-wrap: nowrap;