sogo/UI/WebServerResources/scss/components/button/button.scss

/// button.scss -*- Mode: text; indent-tabs-mode: nil; basic-offset: 2 -*-
@import 'extends';

// sometimes fabs get squized
.md-button.md-fab {
  min-width: $button-fab-width;
}

// Buttons for the sidenav folder tree
// ------------------------------------
sg-folder-tree .md-button,
md-sidenav md-list button.md-button {
  padding: 0;
  outline: none;
  color: inherit;
  text-transform: initial;
  font-size: sg-size(button);
  -webkit-font-smoothing: auto;
}

.sg-folder {
  text-align: left;
  flex: 1;
}

.sg-active .md-button {
  color: sg-color($sogoBlue, 800);
}

md-sidenav .md-button [class ^= "md-icon"] {
  margin-right: 1em;
}
md-sidenav .md-button.iconButton.sg-button-navicon [class ^= "md-icon"] {
  margin: 0;
}

///
/// iconButton
/// 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;


// Classes
.iconButton,
.md-button.md-default-theme:not([disabled]).iconButton {
  // z-index provides a stacking context that prevent ripple-effect from overflowing
  z-index: 1;
  overflow: hidden;
  padding: $iconButton-padding;
  border-radius: 50%;
  color: inherit;
  transition: $iconButton-transition;

  &:hover:not(.md-fab),
  &:active {
    background-color: transparent;

    [class ^= md-icon],
    [class *= md-icon-] {
      transform: scale($iconButton-hover-scale);
    }
  }

  [class ^= md-icon],
  [class *= md-icon-] {
    padding: $iconButton-icon-padding;
    color: currentColor;
    font-size: $iconButton-icon-size;
    transition: $iconButton-transition;
  }
  .md-icon-arrow-back {
    font-size: sg-size('headline')
  }

  .md-ripple-container {
    border-radius: 50%;
  }
}
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;
}

.md-button.iconButton.md-fab,
// angular-material is overspecifying so we are
.md-button.iconButton.md-fab.md-default-theme:not([disabled]) {
  z-index: $z-index-fab;
  // flex might stretch or squize fab bottons
  min-width: $button-fab-width;
  min-height: $button-fab-height;
  // this is a temporary fix, see comment in variables
  padding: $mg;
  margin-right: $mg;
  // this is to positioned the button on the toolbar's edge
  transform: translate3d(0, -50%, 0);

  &:hover {
    transform: translate3d(0, -49%, 0);
    [class ^= md-icon],
    [class *= md-icon-] {
      transform: scale($iconButton-hover-scale);
    }
  }

  @include at(sm) {
    //position: absolute;
    transform: translate3d(-100%, -50%, 0);
    &:hover {
      transform: translate3d(-100%, -49%, 0);
    }
  }

  i[class|="md-icon"] {
    padding: 0;
    font-size: sg-size('headline');
  }
}

.md-button.iconButton.md-fab.md-fab--bottom {
  align-self: flex-end;
  // this is to positioned the button on the container's edge
  transform: translate3d(-50%, -50%, 0) !important; // at this point important is not worst than long selector
  &:hover {
    transform: translate3d(-50%, -49%, 0) !important;
  }
}

.md-button.iconButton.md-fab.md-fab--bottom-inside {
  transform: translate3d(0, (($button-fab-height + $mg) * -1), 0) !important; // at this point important is not worst than long selector
  // to prevent empty space at bottom of container
  position: absolute;
  right: 0;
  &:hover {
    transform: translate3d(0, (($button-fab-height + $mg - 1) * -1) 0) !important; // at this point important is not worst than long selector
  }
}

.sg-button-navicon {
  //top: ($mg * -1);
  //margin-left: ($mg * -1);
  width: $touch-zone;
  height: $touch-zone;
}

// angular-material is overspecifying so we are and so we have to continue
.sg-button-navicon.iconButton span.md-icon-menu,
.sg-button-navicon.iconButton i[class|="md-icon"] {
  padding: 0;
  font-size: $iconButton-menu-size;
}