(css) Cleanup and fixes for latest md changes
Francis Lachapelle
parent
d1e1d11e4a
commit
d58030a475
|
|
@ -115,54 +115,6 @@ a.md-button.sg-icon-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;
|
||||
|
||||
&:hover {
|
||||
[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);
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
@import 'extends';
|
||||
|
||||
md-card {
|
||||
overflow: hidden;
|
||||
|
||||
md-card-content {
|
||||
overflow-y: auto;
|
||||
transition: $swift-ease-in-out;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
/// icon.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
||||
// Override some md styles
|
||||
md-icon {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
// TODO: encode font in base64 to include it in the CSS
|
||||
// perl -MMIME::Base64 -0777 -ne 'print encode_base64($_, "")' < fonts/MaterialIcons-Regular.woff
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
/// input.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
@import 'extends';
|
||||
|
||||
md-input-container.md-input-number {
|
||||
flex-grow: 0;
|
||||
width: 4em;
|
||||
input {
|
||||
text-align: center;
|
||||
md-input-container {
|
||||
&.md-input-number {
|
||||
flex-grow: 0;
|
||||
width: 4em;
|
||||
input {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&.md-no-flex {
|
||||
flex: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -46,8 +46,7 @@ md-sidenav {
|
|||
}
|
||||
}
|
||||
|
||||
// MAILER Folder tree (in the left sidenav
|
||||
// ---------------------------------------
|
||||
// Mailboxes tree
|
||||
$i: 1;
|
||||
@while $i < 12 {
|
||||
.sg-child-level-#{$i} { padding-left: $mg * $i; }
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ $toolbar-padding: $mg;
|
|||
// INFO: because we make intensive use of border-box box sizing model, horizontal paddings
|
||||
// must be declare in containers with sg-padded
|
||||
md-toolbar {
|
||||
padding: $toolbar-padding 0;
|
||||
z-index: $z-index-toolbar;
|
||||
// dirty fix to override angular-material botchy typography
|
||||
font-size: 1em !important;
|
||||
|
|
@ -82,6 +81,7 @@ hgroup {
|
|||
.sg-toolbar-search {
|
||||
background-color: sg-color($sogoPaper, 100);
|
||||
color: rgba(0,0,0,0.54);
|
||||
padding: $toolbar-padding 0;
|
||||
md-icon {
|
||||
color: rgba(0,0,0,0.54);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
// Import from sources for extends
|
||||
// -------------------------------
|
||||
//@import "../../angular-material/src/core/style/typography";
|
||||
@import "../../angular-material/src/core/style/typography";
|
||||
|
||||
// Fonts declaration
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
@ -115,96 +115,6 @@
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
html {
|
||||
// angular-material does it like in 2005
|
||||
font-size: 62.5%;
|
||||
// but we won't let evrything pass
|
||||
line-height: 1;
|
||||
}
|
||||
body {
|
||||
// angular-material does it like in 2005
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
html, body {
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
md-select, md-card, md-list, md-toolbar,
|
||||
ul, ol, p, h1, h2, h3, h4, h5, h6 {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
// angular-material source
|
||||
|
||||
|
||||
/************
|
||||
* Headings
|
||||
************/
|
||||
.md-display-4 {
|
||||
font-size: $display-4-font-size-base;
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.010em;
|
||||
line-height: $display-4-font-size-base;
|
||||
}
|
||||
.md-display-3 {
|
||||
font-size: $display-3-font-size-base;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.005em;
|
||||
line-height: $display-3-font-size-base;
|
||||
}
|
||||
.md-display-2 {
|
||||
font-size: $display-2-font-size-base;
|
||||
font-weight: 400;
|
||||
line-height: 6.4rem;
|
||||
}
|
||||
.md-display-1 {
|
||||
font-size: $display-1-font-size-base;
|
||||
font-weight: 400;
|
||||
line-height: 4rem;
|
||||
}
|
||||
.md-headline {
|
||||
font-size: $headline-font-size-base;
|
||||
font-weight: 400;
|
||||
line-height: 3.2rem;
|
||||
}
|
||||
.md-title {
|
||||
font-size: $title-font-size-base;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.005em;
|
||||
}
|
||||
.md-subhead {
|
||||
font-size: $subhead-font-size-base;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.010em;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
/************
|
||||
* Body Copy
|
||||
************/
|
||||
.md-body-1 {
|
||||
font-size: $body-font-size-base;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.010em;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.md-body-2 {
|
||||
font-size: $body-font-size-base;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.010em;
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
.md-caption {
|
||||
font-size: $caption-font-size-base;
|
||||
letter-spacing: 0.020em;
|
||||
}
|
||||
.md-button {
|
||||
letter-spacing: 0.010em;
|
||||
}
|
||||
|
||||
|
||||
// Google's Material design specs are in 'sp' or 'dp' which are not css units
|
||||
// 'dp' is 'density independant pixels' and 'sp' is 'scale-independent pixels'
|
||||
// (same as dp, but will be scaled by the user's font size preference)
|
||||
|
|
@ -271,7 +181,6 @@ $typeSize: (
|
|||
display-4: 112,
|
||||
);
|
||||
|
||||
|
||||
// Basic line heights
|
||||
// ----------------------------------------------------------------------------
|
||||
$sg-line-height-1: $sg-font-size-1 + $sg-md-typo-baseline;
|
||||
|
|
@ -283,6 +192,7 @@ $sg-line-height-6: 40px;
|
|||
$sg-line-height-7: $sg-font-size-7 + $sg-md-typo-baseline;
|
||||
$sg-line-height-8: $sg-font-size-8 + $sg-md-typo-baseline;
|
||||
$sg-line-height-9: $sg-font-size-9 + $sg-md-typo-baseline;
|
||||
|
||||
// Font weights
|
||||
// Google Material Design specifications strongly recommend to avoid bold
|
||||
// font weight. Here are some variables to define weights more conveniently
|
||||
|
|
@ -346,7 +256,6 @@ html p {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/// Gogle Material Design Standard styles
|
||||
/// as specified (http://www.google.com/design/spec/style/typography.html#typography-standard-styles)
|
||||
/// Some specification class names are counterintuitive. We provide some aliases
|
||||
|
|
@ -476,33 +385,3 @@ $today-font-size: 72px; // Visualy adjusted
|
|||
line-height: 56px; // Visualy adjusted
|
||||
font-weight: $sg-font-thin;
|
||||
}
|
||||
|
||||
/************
|
||||
* Defaults
|
||||
************/
|
||||
|
||||
button,
|
||||
select,
|
||||
html,
|
||||
textarea,
|
||||
input {
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
select,
|
||||
button,
|
||||
textarea,
|
||||
input {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:active,
|
||||
a:visited,
|
||||
link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,17 +3,3 @@
|
|||
[id="contactsList"] .sg-md-subheader {
|
||||
transform: translateY(-100%); // Compensate the container top-margin
|
||||
}
|
||||
|
||||
// md is overqualifying, we have to do the same to override
|
||||
md-content[ui-view="card"] {
|
||||
margin: 0 auto;
|
||||
background-color: sg-color($sogoPaper, 200);
|
||||
}
|
||||
|
||||
// md is overqualifying, we have to do the same to override
|
||||
md-card.viewer {
|
||||
|
||||
}
|
||||
|
||||
// Contact editor
|
||||
// ----------------------------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
/// LoginUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
|
||||
|
||||
|
||||
|
||||
[ui-view="login"] > md-content {
|
||||
width: grid-step(5);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue