2015-05-20 15:31:53 +02:00
|
|
|
/// toolbar.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
2015-09-03 22:10:05 +02:00
|
|
|
//$toolbar-tools-height: 100%;
|
2015-03-28 02:13:39 +01:00
|
|
|
$toolbar-height: $pitch;
|
2015-09-03 22:10:05 +02:00
|
|
|
//$toolbar-medium-tall-height: 88px !default;
|
2015-03-28 02:13:39 +01:00
|
|
|
$toolbar-tall-height: ($toolbar-height * 2);
|
|
|
|
$toolbar-indent-margin: $pitch;
|
|
|
|
$toolbar-padding: $mg;
|
2015-02-04 03:22:12 +01:00
|
|
|
@import 'extends';
|
|
|
|
|
2015-03-28 02:13:39 +01:00
|
|
|
// According to specs, there's no case where toolbars have no padding
|
|
|
|
// We overule angular-material way of implenting this by defining padding toolbars
|
|
|
|
// instead of toolbar-tools to prevent padding addition
|
|
|
|
// INFO: because we make intensive use of border-box box sizing model, horizontal paddings
|
|
|
|
// must be declare in containers with sg-padded
|
2015-02-06 01:16:49 +01:00
|
|
|
md-toolbar {
|
2015-03-28 06:24:31 +01:00
|
|
|
z-index: $z-index-toolbar;
|
2015-04-01 00:33:14 +02:00
|
|
|
// dirty fix to override angular-material botchy typography
|
|
|
|
font-size: 1em !important;
|
2016-03-08 19:20:34 +01:00
|
|
|
// No transition when switching toolbars
|
|
|
|
transition-duration: 0s;
|
2015-02-06 15:37:00 +01:00
|
|
|
}
|
2015-03-13 07:10:31 +01:00
|
|
|
|
2015-03-28 02:13:39 +01:00
|
|
|
.md-toolbar-tools {
|
2015-04-01 00:33:14 +02:00
|
|
|
// dirty fix to override angular-material botchy typography
|
|
|
|
font-size: 1em !important;
|
2015-03-28 02:13:39 +01:00
|
|
|
}
|
|
|
|
|
2015-09-03 22:10:05 +02:00
|
|
|
md-toolbar,
|
|
|
|
.md-toolbar-tools {
|
|
|
|
// Animate the first icon button of a "secondary" toolbar
|
|
|
|
&.sg-toolbar-secondary {
|
|
|
|
> .md-toolbar-tools > .sg-icon-button:first-child,
|
2015-12-11 21:11:53 +01:00
|
|
|
> .md-toolbar-tools > .md-icon-button:first-child,
|
|
|
|
> .sg-icon-button:first-child,
|
|
|
|
> .md-icon-button:first-child {
|
2015-09-03 22:10:05 +02:00
|
|
|
transition: $swift-ease-in;
|
|
|
|
transform: translateX(0px);
|
|
|
|
}
|
|
|
|
&.ng-hide > .md-toolbar-tools > .sg-icon-button:first-child,
|
2015-12-11 21:11:53 +01:00
|
|
|
&.ng-hide > .md-toolbar-tools > .md-icon-button:first-child,
|
|
|
|
&.ng-hide > .sg-icon-button:first-child,
|
|
|
|
&.ng-hide > .md-icon-button:first-child {
|
2015-09-03 22:10:05 +02:00
|
|
|
transform: translateX(-$touch-zone-width);
|
|
|
|
}
|
|
|
|
}
|
2015-12-04 21:00:58 +01:00
|
|
|
&.md-accent.md-hue-1 {
|
|
|
|
md-icon {
|
|
|
|
// Hack until this bug is fixed: https://github.com/angular/material/issues/5989
|
|
|
|
color: rgba(0,0,0,0.54);
|
|
|
|
}
|
|
|
|
}
|
2015-09-03 22:10:05 +02:00
|
|
|
}
|
|
|
|
|
2019-11-20 18:18:42 +01:00
|
|
|
// 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
|
2020-02-18 22:24:36 +01:00
|
|
|
md-toolbar:not(.md-accent):not(.md-hue-1) md-input-container:not(.md-input-invalid),
|
|
|
|
md-toolbar:not(.md-accent):not(.md-hue-1) md-chips,
|
|
|
|
md-toolbar:not(.md-accent):not(.md-hue-1) .pseudo-input-container md-select:focus {
|
2019-11-20 18:18:42 +01:00
|
|
|
&.md-input-focused label,
|
2020-02-18 22:24:36 +01:00
|
|
|
.md-input,
|
|
|
|
.md-select-value {
|
2019-11-20 18:18:42 +01:00
|
|
|
color: rgba(255,255,255,0.87); // {{primary-contrast}}
|
|
|
|
}
|
2020-02-18 22:24:36 +01:00
|
|
|
&.md-input-focused .md-input,
|
|
|
|
&.md-input-focused .md-select-value,
|
|
|
|
> .md-select-value {
|
2019-11-20 18:18:42 +01:00
|
|
|
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}}
|
|
|
|
}
|
2020-02-18 22:24:36 +01:00
|
|
|
.md-chips.md-focused {
|
|
|
|
box-shadow: 0 1px rgba(255,255,255,0.87); // {{primary-contrast}}
|
|
|
|
}
|
2019-11-20 18:18:42 +01:00
|
|
|
}
|
|
|
|
|
2015-02-06 15:37:00 +01:00
|
|
|
header {
|
|
|
|
flex-direction: row;
|
2015-02-24 03:33:47 +01:00
|
|
|
flex-wrap: nowrap;
|
2015-02-11 10:04:09 +01:00
|
|
|
align-items: stretch;
|
2015-02-06 15:37:00 +01:00
|
|
|
justify-content: space-between;
|
|
|
|
display: flex;
|
|
|
|
}
|
2018-06-28 17:03:03 +02:00
|
|
|
|
2015-02-06 15:37:00 +01:00
|
|
|
hgroup {
|
|
|
|
align-items: center;
|
|
|
|
&h3 {
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
2015-03-13 07:10:31 +01:00
|
|
|
|
2018-06-28 17:03:03 +02:00
|
|
|
.sg-toolbar-auto {
|
|
|
|
height: auto;
|
|
|
|
max-height: inherit;
|
|
|
|
}
|
|
|
|
|
2015-02-16 08:15:01 +01:00
|
|
|
.sg-toolbar-group {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
2015-07-08 20:46:07 +02:00
|
|
|
align-items: center;
|
2015-02-16 08:15:01 +01:00
|
|
|
justify-content: space-between;
|
|
|
|
&-1 {
|
|
|
|
order: 1;
|
2016-11-17 20:47:58 +01:00
|
|
|
flex: 1 1 0;
|
2015-02-27 04:32:22 +01:00
|
|
|
max-width: $listView-width;
|
2015-02-16 08:15:01 +01:00
|
|
|
}
|
|
|
|
&-2 {
|
|
|
|
order: 2;
|
|
|
|
}
|
2015-03-28 02:13:39 +01:00
|
|
|
&-3,
|
|
|
|
&-last {
|
2015-02-16 08:15:01 +01:00
|
|
|
order: 3;
|
|
|
|
}
|
|
|
|
}
|
2015-03-28 06:24:31 +01:00
|
|
|
|
2015-09-14 20:57:16 +02:00
|
|
|
.sg-folder-name {
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
}
|
|
|
|
|
2016-04-27 21:48:31 +02:00
|
|
|
// Animate transitions from one toolbar to the other
|
|
|
|
.sg-toolbar-multiple {
|
|
|
|
overflow: hidden;
|
|
|
|
.md-toolbar-tools {
|
|
|
|
&.ng-hide {
|
|
|
|
transform: translateY(100%);
|
|
|
|
transition: transform 0ms;
|
|
|
|
}
|
|
|
|
transform: translateY(0%);
|
|
|
|
transition: transform 240ms;
|
|
|
|
}
|
2015-07-08 20:46:07 +02:00
|
|
|
}
|
2016-04-27 21:48:31 +02:00
|
|
|
|
|
|
|
.sg-toolbar-tools--dense {
|
2016-05-18 22:43:00 +02:00
|
|
|
min-height: $bl * 6;
|
2016-04-27 21:48:31 +02:00
|
|
|
height: $bl * 6;
|
|
|
|
}
|
|
|
|
|
|
|
|
//.sg-toolbar-search {
|
|
|
|
// padding: $toolbar-padding 0;
|
|
|
|
//}
|