262 lines
7.2 KiB
SCSS
262 lines
7.2 KiB
SCSS
/// button.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
|
@import 'extends';
|
|
|
|
md-sidenav md-list .md-button {
|
|
font-weight: normal;
|
|
}
|
|
|
|
/**
|
|
* Applying a background color (using ng-class or ui-sref-active) to a clickable (ng-click)
|
|
* md-list-item would hide the content of the item content.
|
|
*
|
|
* See https://github.com/angular/material/commit/9a8eab0cbb0a934f4ba2ffe616359ba6ce38ae75
|
|
* => HAS BEEN REVERTED
|
|
*/
|
|
a.md-button-wrap-executor.md-no-style {
|
|
//background-color: transparent;
|
|
}
|
|
|
|
/**
|
|
* Overlap fab button by half its height downward
|
|
*/
|
|
.md-button.md-fab-overlap-bottom {
|
|
&.md-fab-bottom-right,
|
|
&.md-fab-bottom-left {
|
|
bottom: -(($button-fab-width + $button-fab-padding)/2);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Keep main fab button visible and either at the bottom right of the list
|
|
* view or at the bottom left of the detail view
|
|
*
|
|
* Three-pane view (full view):
|
|
*
|
|
* +------+-------+--------------+
|
|
* | x | | x |
|
|
* | | | |
|
|
* | | | |
|
|
* | | | |
|
|
* | | (*)| |
|
|
* +------+-------+--------------+
|
|
*
|
|
* Sidenav closed:
|
|
*
|
|
* +-------+--------------+
|
|
* |= | x |
|
|
* | | |
|
|
* | | |
|
|
* | | |
|
|
* | (*)| |
|
|
* +-------+--------------+
|
|
*
|
|
* Detail view expanded (list view closed):
|
|
*
|
|
* +------+--------------+
|
|
* | x | + |
|
|
* | | |
|
|
* | | |
|
|
* | | |
|
|
* | |(*) |
|
|
* +------+--------------+
|
|
*
|
|
* Sidenav closed and detail view expanded:
|
|
*
|
|
* +--------------+
|
|
* | + |
|
|
* | |
|
|
* | |
|
|
* | |
|
|
* |(*) |
|
|
* +--------------+
|
|
*
|
|
*/
|
|
.sg-fab-bottom-center {
|
|
position: absolute;
|
|
bottom: ($button-fab-height - $button-fab-padding)/2;
|
|
left: auto;
|
|
right: ($button-fab-width - $button-fab-padding)/2;
|
|
top: auto;
|
|
transition: $swift-ease-out;
|
|
@include at(sm) {
|
|
right: col-width($breakpoint: sm, $nb: 10) + 2vw;
|
|
&.sg-center-close {
|
|
left: ($button-fab-width - $button-fab-padding)/2;
|
|
right: auto;
|
|
}
|
|
}
|
|
@include at(md) {
|
|
// sidenav is hidden, center list can be closed
|
|
right: col-width($breakpoint: md, $nb: 14) + 2vw;
|
|
&.sg-center-close {
|
|
left: ($button-fab-width - $button-fab-padding)/2;
|
|
right: auto;
|
|
}
|
|
}
|
|
@include from(lg) {
|
|
// both sidenav and center list can be closed
|
|
right: col-width($breakpoint: lg, $nb: 10) + 2vw;
|
|
&.sg-sidenav-close, &.sg-center-close {
|
|
right: col-width($breakpoint: lg, $nb: 14) + 2vw;
|
|
}
|
|
&.sg-sidenav-close.sg-center-close {
|
|
left: ($button-fab-width - $button-fab-padding)/2;
|
|
right: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Expandable button for a collapsable list
|
|
.sg-expandable {
|
|
width: 100%;
|
|
}
|
|
|
|
// Remove left margin when in first menu button of dialogs
|
|
.md-toolbar-tools {
|
|
md-menu:first-child {
|
|
.md-icon-button:first-child {
|
|
margin-left: 0
|
|
}
|
|
}
|
|
}
|
|
|
|
///
|
|
/// sg-icon-button
|
|
/// according to Material design specs:
|
|
/// @link www.google.com/design/spec/style/icons.html#icons-system-icons
|
|
/// @link www.google.com/design/spec/layout/metrics-keylines.html#metrics-keylines-touch-target-size
|
|
/// @link www.google.com/design/spec/layout/structure.html#structure-app-bar
|
|
/// @require angular-material/components/button
|
|
///
|
|
/// Buttons here defined are project-wide, so we don't use mixin but variables
|
|
/// ----------------------------------------------------------------------------
|
|
|
|
// Variables
|
|
$iconButton-size: $touch-zone-width;
|
|
$iconButton-icon-size: sg-size(title);
|
|
$iconButton-menu-size: sg-size(headline);
|
|
$iconButton-icon-padding: 2px;
|
|
$iconButton-size-cursor-coarse: $iconButton-size;
|
|
// Could be use to scale-down buttons if desktop layout suffers too much from touch-size
|
|
$iconButton-size-cursor-fine: $iconButton-size;
|
|
// convenient wrapper for padding calculation todo: write a mixin or a function for a more generic use
|
|
$iconButton-padding: ($iconButton-size - ($iconButton-icon-size + ($iconButton-icon-padding * 2))) / 2;
|
|
$iconButton-hover-scale: 1.25;
|
|
$iconButton-transition: all $swift-ease-in-duration $swift-ease-in-timing-function;
|
|
|
|
$button-fab-width: 56px;
|
|
$button-fab-height: 56px;
|
|
|
|
a.md-button.sg-icon-button,
|
|
.md-button.sg-icon-button,
|
|
md-list md-list-item button.md-button.sg-icon-button {
|
|
@extend .md-button.md-icon-button;
|
|
//transition: $iconButton-transition;
|
|
min-width: $iconButton-size;
|
|
&:hover:not([disabled]),
|
|
&:active {
|
|
//background-color: transparent;
|
|
//transform: scale($iconButton-hover-scale);
|
|
}
|
|
}
|
|
|
|
// Center icon button inside md-avatar
|
|
.md-avatar {
|
|
.sg-icon-button {
|
|
margin-top: 1px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
|
|
.md-subheader-content {
|
|
.md-icon-button:first-child {
|
|
// Delegation button of mail accounts
|
|
padding-left: 0;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
md-tab-content {
|
|
.md-subheader-content {
|
|
.md-icon-button:first-child {
|
|
margin-right: $icon-button-margin/2;
|
|
}
|
|
}
|
|
}
|
|
|
|
// md-toolbar .md-toolbar-tools:first-of-type .iconButton,
|
|
// md-toolbar .md-toolbar-tools:first-child .iconButton,
|
|
// md-toolbar .md-toolbar-tools.md-toolbar-tools-top .iconButton,
|
|
// md-toolbar .md-toolbar-tools:not(.md-toolbar-tools-bottom) .iconButton {
|
|
// margin-top: ($mg * -1);
|
|
// }
|
|
// First button must have it's icon align to margin/padding
|
|
// md-toolbar .md-toolbar-tools .iconButton:first-child,
|
|
// .sg-toolbar-group-last .iconButton:first-child {
|
|
// margin-left: ($mg * -1);
|
|
// }
|
|
// md-content.md-padding,
|
|
// md-card-content {
|
|
// &> .iconButton:first-child {
|
|
// margin-top: ($mg * -1);
|
|
// margin-left: ($mg * -1);
|
|
// }
|
|
// }
|
|
// Last button must have it's icon align to margin/padding
|
|
// md-toolbar .md-toolbar-tools .iconButton:last-child,
|
|
// .sg-toolbar-group-last .iconButton:last-child {
|
|
// margin-right: ($mg * -1);
|
|
// }
|
|
|
|
// Icon-bars are for iconButtons, by default they're vertical and at the right
|
|
// the modifier class is to reflect those values and leave place to other versions
|
|
.sg-icon-bar--vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
//margin: 0 ($mg * -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;
|
|
|
|
// for transitions
|
|
@include at(sm) {
|
|
margin-left: $iconButton-padding;
|
|
}
|
|
}
|
|
|
|
// NiceToHave: some horizontal or left hand side variant
|
|
|
|
.sg-icon-bar *.button {
|
|
display: block;
|
|
}
|
|
|
|
.sg-button-navicon {
|
|
//top: ($mg * -1);
|
|
//margin-left: ($mg * -1);
|
|
width: $touch-zone;
|
|
height: $touch-zone;
|
|
line-height: $touch-zone;
|
|
}
|
|
|
|
// angular-material is overspecifying so we are and so we have to continue
|
|
.sg-button-navicon.sg-icon-button md-icon,
|
|
.sg-button-navicon.sg-icon-button {
|
|
padding: 0;
|
|
font-size: $iconButton-menu-size;
|
|
}
|
|
|
|
.sg-outline-button {
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-radius: $button-border-radius;
|
|
margin: 0 0 0 rem(0.500);
|
|
padding: 0 rem(0.500);
|
|
min-width: initial;
|
|
min-height: initial;
|
|
font-size: $sg-font-size-1;
|
|
font-weight: $sg-font-medium;
|
|
line-height: $sg-font-size-1 * 2;
|
|
text-transform: uppercase;
|
|
}
|