mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-09-03 12:47:16 +00:00
Integrate md-icon using the Material Icons font
This commit is contained in:
Francis Lachapelle
@@ -7,8 +7,23 @@ md-bottom-sheet.md-default-theme {
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
md-bottom-sheet {
|
||||
&.md-list {
|
||||
md-list-item {
|
||||
.md-list-item-content {
|
||||
flex-direction: row; // fix for md bug
|
||||
flex-grow: 1;
|
||||
md-icon {
|
||||
margin-right: $bottom-sheet-icon-after-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
md-bottom-sheet.md-default-theme .md-button.md-default-theme {
|
||||
&:hover:not([disabled]) {
|
||||
&:hover:not([disabled]),
|
||||
&:hover:not([disabled]) md-icon {
|
||||
background-color: inherit;
|
||||
background-image: url("../img/cardboard-transp.png");
|
||||
background-blend-mode: multiply;
|
||||
|
||||
@@ -12,12 +12,6 @@ md-sidenav md-list .md-button,
|
||||
.view-list md-list .md-button {
|
||||
// dirty fix to squash the theme style
|
||||
background-color: transparent !important;
|
||||
padding: 0 $mg;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
text-transform: initial;
|
||||
font-size: sg-size(button);
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.view-list md-list .md-button {
|
||||
@@ -25,20 +19,13 @@ md-sidenav md-list .md-button,
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.md-sidenav-left .md-button [class^="md-icon"] {
|
||||
//margin-right: 1em;
|
||||
}
|
||||
md-sidenav .md-button.iconButton.sg-button-navicon [class^="md-icon"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Expandable button for a collapsable list
|
||||
.sg-expandable {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
///
|
||||
/// iconButton
|
||||
/// 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
|
||||
@@ -64,68 +51,46 @@ $iconButton-transition: all $swift-ease-in-duration $swift-ease-in-timing-functi
|
||||
$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
|
||||
a.md-button.sg-icon-button,
|
||||
.md-button.sg-icon-button {
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
//padding: $iconButton-padding 0;
|
||||
padding: $iconButton-padding 0;
|
||||
border-radius: 50%;
|
||||
//color: inherit;
|
||||
min-width: $iconButton-size;
|
||||
transition: $iconButton-transition;
|
||||
|
||||
&:hover:not(.md-fab),
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
|
||||
[class^=md-icon],
|
||||
[class*=md-icon-] {
|
||||
transform: scale($iconButton-hover-scale);
|
||||
}
|
||||
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;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
// 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);
|
||||
}
|
||||
// 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
|
||||
@@ -207,8 +172,8 @@ md-toolbar .md-toolbar-tools .iconButton:last-child,
|
||||
}
|
||||
|
||||
// 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"] {
|
||||
.sg-button-navicon.sg-icon-button md-icon,
|
||||
.sg-button-navicon.sg-icon-button {
|
||||
padding: 0;
|
||||
font-size: $iconButton-menu-size;
|
||||
}
|
||||
|
||||
@@ -1,28 +1,2 @@
|
||||
///
|
||||
/// @filename _extends.scss
|
||||
/// @project SOGo
|
||||
/// @version 3.alpha
|
||||
/// @module icon
|
||||
///
|
||||
/// Imports Material Design Iconic Font 1.0.1 from Bower components for extends
|
||||
/// Sources must be imported here to prevent overrides by updates
|
||||
/// The source scss MUST be customized it contains mixin that caused dammages
|
||||
/// if not compiled in a specific order
|
||||
/// todo : build with grunt
|
||||
///
|
||||
//@import "../../../angular-material/src/components/icon/icon.scss";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_variables";
|
||||
// variables in source are not defaulted, we MUST override here
|
||||
// relative (to css) path for src fonts
|
||||
$md-font-path: "../fonts";
|
||||
// Set style directive prefix to "md-icon-"
|
||||
$md-css-prefix: md-icon;
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_mixins";
|
||||
//@import "../../../bower_components/material-design-iconic-font/scss/_path"; // Overiden with base64 src
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_core";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_sizes";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_border";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_pulled";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_spinned";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_rotated";
|
||||
@import "../../../bower_components/material-design-iconic-font/scss/_icons";
|
||||
/*! icon/_extends.scss - */
|
||||
@import "../../../angular-material/src/components/icon/icon.scss";
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -22,7 +22,13 @@
|
||||
//$item-padding-bottom: 0px !default;
|
||||
|
||||
// List item label
|
||||
md-list {
|
||||
md-list-item {
|
||||
.md-list-item-inner {
|
||||
flex-grow: 1; // use all column space
|
||||
}
|
||||
.md-button md-icon {
|
||||
margin-left: 0;
|
||||
}
|
||||
.sg-item-name {
|
||||
font-size: sg-size(button);
|
||||
max-width: 75%; // leave some place for a secondary button
|
||||
@@ -32,9 +38,8 @@ md-list {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sg-inline-list-icon-label {
|
||||
text-transform: uppercase;
|
||||
.sg-inline-list-icon-label {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,15 +75,17 @@ div.md-tile-left {
|
||||
min-width: $sg-md-grid-pitch + $baseline-grid;
|
||||
}
|
||||
.sg-tile-icons {
|
||||
font-size: $sg-font-size-1;
|
||||
color: $colorGray;
|
||||
md-icon {
|
||||
font-size: $sg-font-size-1;
|
||||
color: $colorGray;
|
||||
margin: 2px;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
justify-content: start;
|
||||
width: (2 * $mg);
|
||||
height:(7 * $line);
|
||||
|
||||
}
|
||||
.sg-avatars {
|
||||
margin: ($mg / 2) 0 0 ($mg / 2);
|
||||
@@ -90,38 +97,38 @@ div.md-tile-left {
|
||||
// Avatar placeholder
|
||||
// ------------------------------------
|
||||
.md-tile-left:before {
|
||||
font-family: 'Material Design Iconic Font';
|
||||
font-family: 'Material Icons';
|
||||
font-size: 40px;
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
.md-tile-left-card:before {
|
||||
@extend .md-tile-left;
|
||||
content: "\f251";
|
||||
content: "\e7fd"; // person
|
||||
}
|
||||
.md-tile-left-list:before {
|
||||
@extend .md-tile-left;
|
||||
content: "\f2d4";
|
||||
content: "\e7ef"; // group
|
||||
}
|
||||
.md-tile-left-selected:before {
|
||||
@extend .md-tile-left;
|
||||
content: "\f299";
|
||||
content: "\e5ca"; // check
|
||||
}
|
||||
.md-tile-left-accepted:before {
|
||||
@extend .md-tile-left;
|
||||
background-color: rgba(0, 255, 0, 0.3) !important;
|
||||
content: "\f299";
|
||||
content: "\e5ca"; // check
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.md-tile-left-declined:before {
|
||||
@extend .md-tile-left;
|
||||
background-color: rgba(255, 0, 0, 0.3) !important;
|
||||
content: "\f111";
|
||||
content: "\e15b"; // remove
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.md-tile-left-delegated:before {
|
||||
@extend .md-tile-left;
|
||||
background-color: rgba(192, 192, 192, 0.3) !important;
|
||||
content: "\f298";
|
||||
content: "\e5c8"; // arrow-forward
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.md-tile-left-needs-action:before {
|
||||
@@ -132,5 +139,5 @@ div.md-tile-left {
|
||||
.md-tile-left-tentative:before {
|
||||
@extend .md-tile-left;
|
||||
background-color: rgba(255, 255, 0, 0.3) !important;
|
||||
content: "\f2d8";
|
||||
content: "\e7fd"; // person
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user