Adapt to latest md changes

2026-07-16 22:04:54 +00:00 · 2016-03-08 13:21:11 -05:00
parent bd81a56e58
commit 19d22cdcfb
39 changed files with 198 additions and 123 deletions
@@ -6,14 +6,3 @@
    right: $baseline-grid*2;
  }
 }
-
-md-autocomplete {
-  &.sg-input-no-message {
-    &[md-floating-label] {
-      md-input-container {
-        // See .md-input-has-messages
-        padding-bottom: $input-container-padding;
-      }
-    }
-  }
-}
@@ -20,6 +20,7 @@ body.popup {
 }

 md-dialog {
+  background-color: white !important;
  md-dialog-content {
    &.sg-dialog-message {
      // Prepare content to receive a "close" button on the right
@@ -25,6 +25,13 @@ md-input-container .bgroup {
  left-margin: -1.25em;
 }

+md-autocomplete .sg-input-no-message [md-floating-label] {
+  md-input-container {
+    // See .md-input-has-messages
+    padding-bottom: $input-container-padding;
+  }
+}
+
 .PseudoField input {
  flex: 1;
  order: 2;
@@ -28,7 +28,7 @@ md-list-item {
    }
  }

-  .md-list-item-inner {
+  ._md-list-item-inner {
    flex-grow: 1; // use all column space
    overflow: hidden;

@@ -71,14 +71,20 @@ md-list-item {
  }

  md-list-item {
-    .md-button {
+    // Gain some space on the right side of the folder icon
+    ._md-list-item-inner > md-icon:first-child,
+    ._md-list-item-inner > md-checkbox:first-child {
+      margin-right: $bl * 2;
+    }
+
+    .md-button,
+    &.md-clickable {
      margin: 0;
      transition: background-color $swift-ease-in-duration $swift-ease-in-timing-function;
    }
-    // Gain some space on the right side of the folder icon
-    .md-list-item-inner > md-icon:first-child,
-    .md-list-item-inner > md-checkbox:first-child {
-      margin-right: $bl * 2;
+
+    &.md-clickable:hover {
+      background-color: rgba(158,158,158,0.2);
    }
  }
 }
@@ -123,9 +129,9 @@ div.md-tile-left {

 .sg-section-list {
  md-list-item {
-    &.md-button-wrap {
+    &._md-button-wrap {
      > .md-button:first-child {
-        .md-list-item-inner {
+        ._md-list-item-inner {
          // Expect the container to include a sg-tile-icons
          padding-right: 0px;
        }
@@ -264,6 +270,7 @@ sg-avatar-image md-icon,
 }
 .sg-avatar-selected {
  &:before {
+    color: inherit;
    content: "\e5ca"; // check
  }
 }
@@ -13,6 +13,9 @@
  bottom: auto;
  background-color: white;
  border-radius: 50%;
-  //padding: $baseline-grid/2;
+  padding: $baseline-grid/2;
  box-shadow: $whiteframe-shadow-3dp;
+  md-progress-circular {
+    display: block;
+  }
 }
@@ -1,25 +1,28 @@
 /// sidenav.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
-@import "extends";
-$sidenav-default-width: (4 * $pitch);
+
+$sidenav-desktop-width: (4 * $pitch);
 $sidenav-min-space: $pitch;
 //$sidenav-right-width: (8 * $pitch);

-md-sidenav {
-  &.md-locked-open {
-    @include from(md) {
-      @include flex-col(md, 4, 1, 0);
-      // Custom representation of a closed sidenav where the sidenav is pushed to the left;
-      // Used in in "locked open" mode.
-      &.sg-closed.md-sidenav-left {
-        transform: translateX(-100%);
-        margin-right: -20vw; // See views/_views.scss
-      }
-    }
-  }
-}
+@import "extends";

 md-sidenav {
  overflow: inherit;
+
+  &._md-locked-open {
+    @include from(md) {
+      @include flex-col($breakpoint: md, $nb: 4, $grow: 1, $shrink: 0);
+      // Custom representation of a closed sidenav where the sidenav is pushed to the left;
+      // Used in in "locked open" mode.
+      &.md-sidenav-left {
+        transition: $swift-ease-out;
+        &.sg-close {
+          margin-right: -20vw; // See views/_views.scss
+          transform: translateX(-100%);
+        }
+      }
+    }
+  }
 }

 // MAIN SIDENAV, actually to the left
@@ -3,7 +3,6 @@

 .md-subheader {
  margin-right: 0;
-  line-height: $touch-zone-width;
 }

 .md-subheader {
@@ -16,14 +16,16 @@ md-toolbar {
  z-index: $z-index-toolbar;
  // dirty fix to override angular-material botchy typography
  font-size: 1em !important;
+  // No transition when switching toolbars
+  transition-duration: 0s;
 }

-// Colors transition when changing folder in dialogs
+// Colors transition when changing folder color in dialogs
 md-dialog {
  md-toolbar,
  md-toolbar .md-input,
  md-toolbar md-input-container.md-input-has-value label,
-  md-toolbar md-input-container label:not(.md-no-float),
+  md-toolbar md-input-container.md-input-has-value label:not(.md-no-float),
  md-toolbar md-icon {
    transition: background-color $swift-ease-out-duration $swift-ease-out-timing-function,
    color $swift-ease-out-duration $swift-ease-out-timing-function;
@@ -0,0 +1,5 @@
+/// layout-attributes.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
+
+// Import from sources for extends
+// -------------------------------
+@import "../../angular-material/src/core/services/layout/layout-attributes";
@@ -56,4 +56,8 @@ html * {
  @extend .md-padding;
  background-color: white;
  margin-bottom: $mg/2;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
@@ -96,6 +96,9 @@ $slicer-breakpoint-names: 'xs' 'sm' 'md' 'lg' 'xl';

 $media-pointer: (pointer fine);

+// Button
+$button-left-right-padding: rem(0.600);
+
 // Icon
 $icon-size: rem(2.400) !default;

@@ -19,6 +19,7 @@
 // fixme : refactor all this to meet our practices
 // ------------------------------------------------------------------------------
@import 'core/mixins';
+@import 'core/layout-attributes';
@import 'core/structure';
@import 'core/layout';
@import 'core/typography';
@@ -5,7 +5,7 @@
  padding-bottom: $baseline-grid;
  padding: 0 $baseline-grid*2 $baseline-grid $baseline-grid*2;
  text-align: center;
-  md-progress-linear > .md-container {
+  md-progress-linear > ._md-container {
    height: 2px;
  }
 }
@@ -67,7 +67,7 @@ md-sidenav {
  md-checkbox {
    &.sg-folder {
      // Show checkbox as a "closed" folder when unchecked and "opened" folder when checked
-      .md-container:after {
+      ._md-container:after {
        color: rgba(0,0,0,0.54);
        font-family: 'Material Icons';
        font-size: 24px;
@@ -77,14 +77,14 @@ md-sidenav {
        width: 1em;
        height: 1em;
      }
-      .md-icon {
+      ._md-icon {
        border-width: 0;
      }
      &.md-checked {
-        .md-container:after {
+        ._md-container:after {
          content: "\e2c8";
        }
-        .md-icon {
+        ._md-icon {
          background-color: initial;
          &:after {
            border-style: none;
@@ -94,7 +94,6 @@ md-sidenav {
    }
  }
  .sg-item-name {
-    line-height: 6 * $baseline-grid; // $list-item-height, 48px
    &:focus {
      outline: none;
    }
@@ -56,11 +56,11 @@ $listView-width: grid-step(6) !global;
  // right side of the list item. Since we define the avatar as the secondary button, we must move it to the left
  // side of the list item and add some padding to the main button (.md-no-style).
  .md-with-secondary {
-    .md-no-style {
+    ._md-no-style {
      min-height: $baseline-grid * 7; // 56px
-      padding-left: 40 + $baseline-grid * 3;
+      padding-left: 40 + $baseline-grid * 2 !important; // 56px
    }
-    .md-secondary-container {
+    ._md-secondary-container {
      left: $baseline-grid * 2;
      right: initial;
      padding: 0;
@@ -92,6 +92,9 @@ $listView-width: grid-step(6) !global;
      min-height: 0;
    }
  }
+  md-card {
+    background-color: white;
+  }

  // On small screens, the view slides from the right and takes all screen place.
  // Expected Display Steps: