mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-02-20 08:56:23 +00:00
141 lines
3.7 KiB
SCSS
141 lines
3.7 KiB
SCSS
/*! _button.scss */
|
|
////
|
|
/// Project SOGo
|
|
/// Version 3.alpha
|
|
/// Component button
|
|
///
|
|
/// Definitions for buttons (based on md-buttons)
|
|
////
|
|
@import 'extends';
|
|
|
|
// 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;
|
|
}
|
|
|
|
///
|
|
/// 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
|
|
$iconButton-padding: ($iconButton-size - ($iconButton-icon-size + ($iconButton-icon-padding * 2))) / 2;
|
|
$iconButton-hover-scale: 1.25;
|
|
$iconButton-transition: transform $swift-ease-in-duration $swift-ease-in-timing-function;
|
|
|
|
// 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;
|
|
|
|
&:hover,
|
|
&: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: curentColor;
|
|
font-size: $iconButton-icon-size;
|
|
transition: $iconButton-transition;
|
|
}
|
|
.md-icon-arrow-back {
|
|
font-size: sg-size('headline')
|
|
}
|
|
|
|
.md-ripple-container {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 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: ($iconButton-padding * -1) ($iconButton-padding * -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;
|
|
@include at(sm) {
|
|
margin-left: $iconButton-padding;
|
|
}
|
|
}
|
|
|
|
// NiceToHave: some horizontal or left hand side variant
|
|
|
|
.sg-icon-bar *.button {
|
|
display: block;
|
|
}
|
|
|
|
//// angular-material is overspecifying so we are
|
|
//.md-button.md-default-theme:not([disabled]).iconButton {
|
|
// @extend .iconButton;
|
|
//}
|
|
|
|
.md-button.iconButton.md-fab.md-default-theme {
|
|
z-index: $z-index-fab;
|
|
margin-right: $mg;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.sg-button-navicon {
|
|
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;
|
|
} |