(web) Improve contrast of toolbars w/input field
parent
4628292fb3
commit
123ccef770
|
@ -8,7 +8,7 @@
|
||||||
>
|
>
|
||||||
<md-dialog flex="40" flex-md="60" flex-sm="90">
|
<md-dialog flex="40" flex-md="60" flex-sm="90">
|
||||||
|
|
||||||
<md-toolbar class="md-hue-1">
|
<md-toolbar>
|
||||||
<div class="md-toolbar-tools">
|
<div class="md-toolbar-tools">
|
||||||
<!-- name -->
|
<!-- name -->
|
||||||
<md-input-container class="md-block md-flex">
|
<md-input-container class="md-block md-flex">
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
uploader="editor.uploader"
|
uploader="editor.uploader"
|
||||||
var:sg-labels="framework">
|
var:sg-labels="framework">
|
||||||
<form name="messageForm">
|
<form name="messageForm">
|
||||||
<md-toolbar class="md-hue-1">
|
<md-toolbar>
|
||||||
<div class="md-toolbar-tools">
|
<div class="md-toolbar-tools">
|
||||||
<!-- expand dialog -->
|
<!-- expand dialog -->
|
||||||
<md-button ng-click="editor.toggleFullscreen($event)"
|
<md-button ng-click="editor.toggleFullscreen($event)"
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
|
xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
|
||||||
<md-dialog flex="50" flex-sm="80" flex-xs="100">
|
<md-dialog flex="50" flex-sm="80" flex-xs="100">
|
||||||
<form id="accountForm" name="accountForm" var:href="ownPath">
|
<form id="accountForm" name="accountForm" var:href="ownPath">
|
||||||
<md-toolbar class="md-hue-1">
|
<md-toolbar>
|
||||||
<div class="md-toolbar-tools">
|
<div class="md-toolbar-tools">
|
||||||
<md-icon class="material-icons sg-icon-toolbar-bg">account_box</md-icon>
|
<md-icon class="material-icons sg-icon-toolbar-bg">account_box</md-icon>
|
||||||
<md-input-container class="md-block md-flex">
|
<md-input-container class="md-block md-flex">
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
|
xmlns:uix="OGo:uix"><var:string var:value="doctype" const:escapeHTML="NO" />
|
||||||
<md-dialog flex="50" flex-sm="80" flex-xs="100">
|
<md-dialog flex="50" flex-sm="80" flex-xs="100">
|
||||||
<form id="filterForm" name="filterForm" class="md-inline-form" ng-submit="filterEditor.save(filterForm)">
|
<form id="filterForm" name="filterForm" class="md-inline-form" ng-submit="filterEditor.save(filterForm)">
|
||||||
<md-toolbar class="md-hue-1">
|
<md-toolbar>
|
||||||
<div class="md-toolbar-tools">
|
<div class="md-toolbar-tools">
|
||||||
<md-icon class="material-icons sg-icon-toolbar-bg">filter_list</md-icon>
|
<md-icon class="material-icons sg-icon-toolbar-bg">filter_list</md-icon>
|
||||||
<md-input-container class="md-block md-flex">
|
<md-input-container class="md-block md-flex">
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
xmlns:label="OGo:label">
|
xmlns:label="OGo:label">
|
||||||
<md-dialog flex="60" flex-sm="80" flex-xs="100">
|
<md-dialog flex="60" flex-sm="80" flex-xs="100">
|
||||||
<form name="eventForm" class="md-inline-form" ng-submit="editor.save(eventForm)">
|
<form name="eventForm" class="md-inline-form" ng-submit="editor.save(eventForm)">
|
||||||
<md-toolbar class="md-hue-1">
|
<md-toolbar>
|
||||||
<div class="md-toolbar-tools">
|
<div class="md-toolbar-tools">
|
||||||
<md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
|
<md-icon class="material-icons sg-icon-toolbar-bg">event</md-icon>
|
||||||
<!-- summary -->
|
<!-- summary -->
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
<md-dialog flex="50" flex-sm="70" flex-xs="100">
|
<md-dialog flex="50" flex-sm="70" flex-xs="100">
|
||||||
<form name="calendarPropertiesForm" ng-submit="properties.saveProperties(calendarPropertiesForm)">
|
<form name="calendarPropertiesForm" ng-submit="properties.saveProperties(calendarPropertiesForm)">
|
||||||
|
|
||||||
<md-toolbar class="md-hue-1">
|
<md-toolbar>
|
||||||
<div class="md-toolbar-tools">
|
<div class="md-toolbar-tools">
|
||||||
<!-- color -->
|
<!-- color -->
|
||||||
<sg-color-picker ng-model="properties.calendar.color"><!-- color picker --></sg-color-picker>
|
<sg-color-picker ng-model="properties.calendar.color"><!-- color picker --></sg-color-picker>
|
||||||
|
@ -90,7 +90,7 @@
|
||||||
|
|
||||||
<md-dialog-actions>
|
<md-dialog-actions>
|
||||||
<md-button type="button" ng-click="properties.close()"><var:string label:value="Cancel"/></md-button>
|
<md-button type="button" ng-click="properties.close()"><var:string label:value="Cancel"/></md-button>
|
||||||
<md-button type="submit"
|
<md-button type="submit" class="md-primary"
|
||||||
ng-disabled="calendarPropertiesForm.$invalid || calendarPropertiesForm.$submitted">
|
ng-disabled="calendarPropertiesForm.$invalid || calendarPropertiesForm.$submitted">
|
||||||
<var:string label:value="Save"/>
|
<var:string label:value="Save"/>
|
||||||
</md-button>
|
</md-button>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
xmlns:label="OGo:label">
|
xmlns:label="OGo:label">
|
||||||
<md-dialog flex="60" flex-sm="80" flex-xs="100">
|
<md-dialog flex="60" flex-sm="80" flex-xs="100">
|
||||||
<form name="eventForm" ng-submit="editor.save(eventForm)">
|
<form name="eventForm" ng-submit="editor.save(eventForm)">
|
||||||
<md-toolbar class="md-hue-1">
|
<md-toolbar>
|
||||||
<div class="md-toolbar-tools">
|
<div class="md-toolbar-tools">
|
||||||
<md-icon class="material-icons sg-icon-toolbar-bg">assignment_turned_in</md-icon>
|
<md-icon class="material-icons sg-icon-toolbar-bg">assignment_turned_in</md-icon>
|
||||||
<!-- summary -->
|
<!-- summary -->
|
||||||
|
|
|
@ -44,6 +44,10 @@ $icon-badge-size: 2 * $baseline-grid;
|
||||||
font-feature-settings: 'liga';
|
font-feature-settings: 'liga';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
md-icon[ng-click]:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
// Define CSS styles to use ng-class with md-icon
|
// Define CSS styles to use ng-class with md-icon
|
||||||
md-icon {
|
md-icon {
|
||||||
transition: transform 240ms;
|
transition: transform 240ms;
|
||||||
|
@ -54,6 +58,7 @@ md-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: $mg * 3;
|
right: $mg * 3;
|
||||||
transform: rotate(-15deg);
|
transform: rotate(-15deg);
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
&.sg-icon--large {
|
&.sg-icon--large {
|
||||||
font-size: $sg-md-grid-pitch;
|
font-size: $sg-md-grid-pitch;
|
||||||
|
|
|
@ -20,20 +20,7 @@ md-toolbar {
|
||||||
transition-duration: 0s;
|
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 {
|
.md-toolbar-tools {
|
||||||
//padding: 0;
|
|
||||||
// dirty fix to override angular-material botchy typography
|
// dirty fix to override angular-material botchy typography
|
||||||
font-size: 1em !important;
|
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 {
|
header {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
|
|
Loading…
Reference in New Issue