From 3054c04261e52707ffe1e470071a0d22134101d7 Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Tue, 27 Jan 2015 20:57:24 -0500
Subject: [PATCH] Add a utility to replace attributes without values by classes

---
 UI/WebServerResources/scss/core/layout.scss | 291 +-------------------
 UI/WebServerResources/scss/core/mixins.scss |  11 +
 2 files changed, 23 insertions(+), 279 deletions(-)

diff --git a/UI/WebServerResources/scss/core/layout.scss b/UI/WebServerResources/scss/core/layout.scss
index b3e46e666..ad7d8e191 100644
--- a/UI/WebServerResources/scss/core/layout.scss
+++ b/UI/WebServerResources/scss/core/layout.scss
@@ -1,282 +1,15 @@
-// Responsive attributes
+// Import from sources for extends
 // ------------------------------
+@import "../../angular-material/src/core/style/layout";
 
-// hide means hide everywhere
-/* Sizes:
-  0    <= size <= 600  Phone
-  600  <= size <= 960  Tablet
-  960  <= size <= 1200 Tablet-Landscape
-  1200 <= size         PC
-*/
+// Utility classes to compensate for the the xml mandatory attribute values
+// ------------------------------------------------------------------------
+$selectors: layout, layout-sm, layout-gt-sm, layout-md, layout-gt-md, layout-lg, layout-gt-lg,
+layout-align,layout-align-sm, layout-align-gt-sm, layout-align-md, layout-align-gt-md, layout-align-lg, layout-align-gt-lg,
+layout-padding,
+layout-margin,
+layout-wrap,
+layout-fill,
+ flex, flex-sm, flex-gt-sm, flex-md, flex-gt-md, flex-lg, flex-gt-lg, hide, hide-sm, hide-gt-sm, hide-md, hide-gt-md, hide-lg, hide-gt-lg, show, show-sm, show-gt-sm, show-md, show-gt-md, show-lg, show-gt-lg;
 
-[layout] {
-  box-sizing: border-box;
-  display: flex;
-}
-
-[layout=column] {
-  flex-direction: column;
-}
-
-[layout=row] {
-  flex-direction: row;
-}
-
-[layout-padding],
-[layout-padding] > [flex] {
-  padding: $layout-gutter-width / 2;
-}
-[layout-margin],
-[layout-margin] > [flex] {
-  margin: $layout-gutter-width / 2;
-}
-
-[layout-wrap] {
-  flex-wrap: wrap;
-}
-
-[layout-fill] {
-  margin: 0;
-  min-height: 100%;
-  width: 100%;
-}
-@-moz-document url-prefix() { 
-  [layout-fill] {
-    margin: 0;
-    width: 100%;
-    min-height: auto;
-    height: inherit;
-  }
-}
-
-@mixin layout-for-name($name) {
-  [layout-#{$name}] {
-    box-sizing: border-box;
-    display: flex;
-  }
-  [layout-#{$name}=column] {
-    flex-direction: column;
-  }
-  [layout-#{$name}=row] {
-    flex-direction: row;
-  }
-}
-
-@mixin flex-properties-for-name($name: null) {
-  $flexName: 'flex';
-  @if $name != null {
-    $flexName: 'flex-#{$name}';
-  }
-
-  [#{$flexName}] {
-    flex: 1;
-  }
-
-
-  // (0-20) * 5 = 0-100%
-  @for $i from 0 through 20 {
-    [#{$flexName}="#{$i * 5}"] {
-      flex: 0 0 #{$i * 5 + '%'};
-    }
-    [layout="row"] > [#{$flexName}="#{$i * 5}"] {
-      max-width: #{$i * 5 + '%'};
-    }
-    [layout="column"] > [#{$flexName}="#{$i * 5}"] {
-      max-height: #{$i * 5 + '%'};
-    }
-  }
-
-  [layout="row"] {
-    > [#{$flexName}="33"], > [#{$flexName}="34"] {
-      flex: 0 0 33.33%;
-      max-width: 33.33%;
-    }
-    > [#{$flexName}="66"], > [#{$flexName}="67"] {
-      flex: 0 0 66.66%;
-      max-width: 66.66%;
-    }
-  }
-  [layout="column"] {
-    > [#{$flexName}="33"], > [#{$flexName}="34"] {
-      flex: 0 0 33.33%;
-      max-height: 33.33%;
-    }
-    > [#{$flexName}="66"], > [#{$flexName}="67"] {
-      flex: 0 0 66.66%;
-      max-height: 66.66%;
-    }
-  }
-}
-
-// Alignment attributes for layout containers' children
-// Arrange on the Main Axis
-// center, start, end, space-between, space-around
-// flex-start is the default for justify-content
-// ------------------------------
-
-@mixin layout-align-for-name($suffix: null) {
-  $name: 'layout-align';
-  @if $suffix != null {
-    $name: 'layout-align-#{$suffix}';
-  }
-
-  // Main Axis Center
-  [#{$name}="center"], //stretch
-  [#{$name}="center center"],
-  [#{$name}="center start"],
-  [#{$name}="center end"] {
-    justify-content: center;
-  }
-
-  // Main Axis End
-  [#{$name}="end"], //stretch
-  [#{$name}="end center"],
-  [#{$name}="end start"],
-  [#{$name}="end end"] {
-    justify-content: flex-end;
-  }
-
-  // Main Axis Space Around
-  [#{$name}="space-around"], //stretch
-  [#{$name}="space-around center"],
-  [#{$name}="space-around start"],
-  [#{$name}="space-around end"] {
-    justify-content: space-around;
-  }
-
-  // Main Axis Space Between
-  [#{$name}="space-between"], //stretch
-  [#{$name}="space-between center"],
-  [#{$name}="space-between start"],
-  [#{$name}="space-between end"] {
-    justify-content: space-between;
-  }
-
-
-  // Arrange on the Cross Axis
-  // center, start, end
-  // stretch is the default for align-items
-  // ------------------------------
-
-  // Cross Axis Center
-  [#{$name}="center center"],
-  [#{$name}="start center"],
-  [#{$name}="end center"],
-  [#{$name}="space-between center"],
-  [#{$name}="space-around center"] {
-    align-items: center;
-  }
-
-  // Cross Axis Start
-  [#{$name}="center start"],
-  [#{$name}="start start"],
-  [#{$name}="end start"],
-  [#{$name}="space-between start"],
-  [#{$name}="space-around start"] {
-    align-items: flex-start;
-  }
-
-  // Cross Axis End
-  [#{$name}="center end"],
-  [#{$name}="start end"],
-  [#{$name}="end end"],
-  [#{$name}="space-between end"],
-  [#{$name}="space-around end"] {
-    align-items: flex-end;
-  }
-
-}
-
-// Flex attributes for layout children
-// ------------------------------
-
-@include flex-properties-for-name();
-@include layout-align-for-name();
-
-[hide]:not([show]) {
-  display: none;
-}
-
-@media (max-width: $layout-breakpoint-sm) {
-  [hide-sm], [hide] {
-    &:not([show-sm]) {
-      display: none;
-    }
-  }
-
-  @include layout-align-for-name(sm);
-  @include layout-for-name(sm);
-  @include flex-properties-for-name(sm);
-}
-@media (min-width: $layout-breakpoint-sm) {
-  [hide-gt-sm], [hide] {
-    &:not([show-gt-sm]):not([show-md]):not([show-gt-md]):not([show-lg]):not([show-gt-lg]) {
-      display: none;
-    }
-  }
-
-  @include layout-align-for-name(gt-sm);
-  @include layout-for-name(gt-sm);
-  @include flex-properties-for-name(gt-sm);
-}
-
-@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md) {
-  [hide-md], [hide] {
-    &:not([show-md]) {
-      display: none;
-    }
-  }
-
-  @include layout-align-for-name(md);
-  @include layout-for-name(md);
-  @include flex-properties-for-name(md);
-}
-@media (min-width: $layout-breakpoint-md) {
-  [hide-gt-md], [hide] {
-    &:not([show-gt-md]):not([show-lg]):not([show-gt-lg]) {
-      display: none;
-    }
-  }
-
-  @include layout-align-for-name(gt-md);
-  @include layout-for-name(gt-md);
-  @include flex-properties-for-name(gt-md);
-}
-
-@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg) {
-  [hide-lg], [hide] {
-    &:not([show-lg]) {
-      display: none;
-    }
-  }
-
-  @include layout-align-for-name(lg);
-  @include layout-for-name(lg);
-  @include flex-properties-for-name(lg);
-}
-@media (min-width: $layout-breakpoint-lg) {
-  [hide-gt-lg], [hide] {
-    &:not([show-gt-lg]) {
-      display: none;
-    }
-  }
-
-  @include layout-align-for-name(gt-lg);
-  @include layout-for-name(gt-lg);
-  @include flex-properties-for-name(gt-lg);
-}
-
-
-
-// Order attributes for layout children
-// ------------------------------
-[flex-order="0"] { order: 0; }
-[flex-order="1"] { order: 1; }
-[flex-order="2"] { order: 2; }
-[flex-order="3"] { order: 3; }
-[flex-order="4"] { order: 4; }
-[flex-order="5"] { order: 5; }
-[flex-order="6"] { order: 6; }
-[flex-order="7"] { order: 7; }
-[flex-order="8"] { order: 8; }
-[flex-order="9"] { order: 9; }
+@include attributesToClasses($selectors);
diff --git a/UI/WebServerResources/scss/core/mixins.scss b/UI/WebServerResources/scss/core/mixins.scss
index e01ec99cb..e3a0cce06 100644
--- a/UI/WebServerResources/scss/core/mixins.scss
+++ b/UI/WebServerResources/scss/core/mixins.scss
@@ -17,3 +17,14 @@
     color: $color;
   }
 }
+// Utility to compensate for the the xml mandatory attribute values
+// Creates classes extending layout attributes with no values
+// ----------------------------------------------------------------
+@mixin attributesToClasses($selectors) {
+  @each $selector in $selectors {
+    .md-#{$selector} {
+// no syntax error here
+      @extend [#{$selector}] !optional
+    }
+  }
+}
\ No newline at end of file