sogo/UI/WebServerResources/scss/components/card/card.scss
Francis Lachapelle e14414ed56 Various Web interface changes
- more contrasted primary palette;
- white toolbars for list and detail views;
- modules navigation always visible;
- wrapped detail views into a md-card;
- moved preferences button to the sidenav;
- moved the sidenav toggle button to the top toolbar;
- new "flip" visual effect when looking at the raw source of cards and
  messages.
2015-12-04 15:15:44 -05:00

77 lines
1.6 KiB
SCSS

/// card.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
@import 'extends';
md-card {
md-card-content {
overflow-y: auto;
transition: $swift-ease-in-out;
}
md-card-actions:not(.layout-column) {
.md-button {
// "last-of-type" doesn't work well when we have multiple types so we overwrite md's directive
&.md-icon-button,
&.md-icon-button:last-of-type,
&.sg-icon-button,
&.sg-icon-button:last-of-type {
margin: 0 $baseline-grid * .5;
}
}
}
// Collapsed/expanded states for cards in ACL editor
&.sg-collapsed, &.sg-expanded {
transition: $swift-ease-in-out;
transition-delay: 0s;
> .md-button {
margin: 0;
flex-direction: row;
}
.md-icon-button {
transition: $swift-linear;
transition-duration: 0.2s;
transition-delay: 0.2s;
opacity: 1;
&.ng-hide {
transition: $swift-linear;
opacity: 0;
}
}
md-card-content {
order: 1;
transition: $swift-ease-in-out;
transition-delay: 0.1s;
max-height: 500px;
&.ng-hide {
max-height: 0;
padding-bottom: 0;
padding-top: 0;
}
}
}
&.sg-collapsed {
background-color: transparent;
border-radius: 0;
box-shadow: none;
margin-top: 0;
margin-bottom: 0;
}
&.sg-expanded {
@extend .md-whiteframe-z2;
margin: 0 0 1px 0;
&-remove { // ngAnimate with ngClass
transition-delay: 0.5s;
}
}
.md-button {
.sg-tile-content {
text-align: left;
text-transform: none;
}
}
}