refactor(elements-css): moving elements css into component based css

chore(pr-review): corrections from pr review

Author: Cathy Siller

src/helix-ui.less

@@ -2,7 +2,6 @@
 @import 'config';
 @import 'reset';
 @import 'base';
-@import 'elements';
 @import 'components';
 @import 'helpers';
 @import 'overrides';

src/helix-ui/elements/HXFileTileElement.less

@@ -1,8 +1,7 @@
 @import "./HXElement";
 @import "base/links";
-@import "elements/hx-progress";
-@import "components/progress";
 @import (reference) "components/buttons";
+@import (reference) "components/progress";
 
 :host {
   // reset buttons

src/helix-ui/styles/components.less

@@ -2,6 +2,7 @@
     - Complex CSS Selectors
     - NO !important
 \* ========== COMPONENTS ========== */
+@import 'components/accordions';
 @import 'components/alerts';
 @import 'components/badges';
 @import 'components/box';
@@ -10,18 +11,28 @@
 @import 'components/checkbox';
 @import 'components/choice-tiles';
 @import 'components/dropdown-select';
+@import 'components/files';
 @import 'components/forms';
 @import 'components/grid';
+@import 'components/icons';
 @import 'components/layouts';
 @import 'components/lists';
+@import 'components/loaders';
+@import 'components/menus';
+@import 'components/modals';
 @import 'components/navigation';
 @import 'components/pagination';
 @import 'components/panels';
+@import 'components/pills';
+@import 'components/popovers';
 @import 'components/progress';
+@import 'components/reveals';
 @import 'components/search';
 @import 'components/selectors';
 @import 'components/stepper'; // BETA
 @import 'components/tables';
 @import 'components/tabs';
 @import 'components/text-inputs';
+@import 'components/toasts';
+@import 'components/tooltips';
 @import 'components/typography';

src/helix-ui/styles/elements/hx-accordion-panel.less renamed to src/helix-ui/styles/components/accordions.less

@@ -16,3 +16,8 @@ hx-accordion-panel {
     padding: 0.5rem 0;
   }
 }
+
+hx-accordion {
+  display: block;
+}
+

src/helix-ui/styles/components/alerts.less

@@ -1,6 +1,7 @@
 hx-alert {
   background-color: @gray-400;
   color: @gray-1000;
+  display: block;
   font-weight: 300;
   line-height: 1.25rem;
 

src/helix-ui/styles/components/choice-tiles.less

@@ -1,6 +1,77 @@
+@import (reference) 'components/box';
 @import (reference) 'components/grid';
 @import (reference) 'mixins';
 
+hx-tile {
+  #Box.md();
+  border-radius: 2px;
+  display: inline-block;
+  height: 100%;
+  position: relative;
+  text-align: center;
+  width: 100%;
+
+  > header {
+    font-size: 1rem;
+    font-weight: 700;
+    margin-bottom: 0;
+  }
+
+  > p {
+    font-size: 0.75rem;
+  }
+
+  &.hxSm {
+    @pad: 0.75rem;
+    padding: @pad;
+
+    > p {
+      display: none;
+    }
+
+    hx-icon[type="checkmark"] {
+      right: @pad;
+      top: @pad;
+    }
+  }
+
+  &.hxLg {
+    @pad: 1.75rem;
+    padding: @pad;
+
+    hx-icon[type="checkmark"] {
+      right: @pad;
+      top: @pad;
+    }
+  }
+
+  > header + *,
+  .hx-tile-icon + * {
+    margin-top: 0.5rem;
+  }
+
+  .hx-tile-icon {
+    hx-icon {
+      font-size: 1.75rem;
+    }
+  }
+
+  hx-icon[type="checkmark"] {
+    display: none;
+    font-size: 1rem;
+    right: 1.25rem;
+    top: 1.25rem;
+  }
+
+  &.hxSubdued {
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}//hx-tile
+
 .hxRow > label.hxChoice {
   #grid.column();
 }
@@ -142,3 +213,31 @@ label.hxChoice > input[disabled] + hx-tile:hover {
     color: @gray-500;
   }
 }
+
+// DEPRECATED: remove in v1.0.0
+hx-tile-description {
+  display: block;
+  font-size: 0.75rem;
+}
+
+hx-tile-title {
+  display: block;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+hx-tile {
+  hx-tile-title {
+    margin-bottom: 0;
+  }
+
+  &.hxSm {
+    hx-tile-description {
+      display: none;
+    }
+  }
+
+  hx-tile-title + * {
+    margin-top: 0.5rem;
+  }
+}

src/helix-ui/styles/components/files.less

@@ -0,0 +1,70 @@
+@import (reference) 'components/box';
+
+hx-drop-fence {
+  #Box.md();
+  border: 1px dashed @gray-600;
+  display: block;
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+hx-drop-zone {
+  display: block;
+  min-height: 0; // because IE
+  padding: 0 !important;
+  position: relative;
+
+  &::after {
+    border: 4px dashed @cyan-500;
+    content: '';
+    display: none;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &[drag]{
+    &::after {
+      display: block;
+    }
+  }
+
+  &[drag="over"] {
+    &::after {
+      background-color: rgba(255, 255, 255, 0.6);
+      border-style: solid;
+    }
+  }
+}
+
+hx-file-icon {
+  display: inline-block;
+}
+
+hx-file-input {
+  display: inline-block;
+  position: relative;
+
+  input[type="file"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: 0;
+    height: 1px;
+    margin: -1px;
+    outline: none;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    z-index: -10;
+  }
+}
+
+hx-file-tile {
+  display: block;
+  height: 3.75rem;
+  width: 25rem; // 400px
+}

src/helix-ui/styles/elements/hx-icon.less renamed to src/helix-ui/styles/components/icons.less

@@ -1,3 +1,6 @@
+@import (reference) 'vars';
+@import (reference) 'components/box';
+
 // NOTE: be aware of changes needed in the base/typography.less
 @header-height: 3.5rem; // 56px
 @footer-height: 2.5rem; // 40px
@@ -194,3 +197,115 @@ body.hxHorizontal {
     grid-area: footer;
   }
 }//body.hxHorizontal
+
+// TODO: refactor and find a better home for this mixin
+#HXDiv {
+  .shadyRoot(@rules) {
+    > #hxDiv {
+      @rules();
+    }
+  }
+}
+
+hx-div {
+  display: block;
+  padding: 0 !important; // avoid unfixable padding-block-end bug
+
+  &[scroll="horizontal"] {
+    overflow-x: auto;
+    overflow-y: hidden;
+  }
+
+  &[scroll="vertical"] {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &[scroll="both"] {
+    overflow: auto;
+  }
+
+  &[scroll="none"] {
+    overflow: visible;
+  }
+}
+
+// ===== Polyfilled browsers =====
+// CSS specificity overrides selectors in the next block
+hx-div {
+  &.hxXs {
+    #HXDiv.shadyRoot({
+      #Box.xs();
+    });
+  }
+
+  &.hxSm {
+    #HXDiv.shadyRoot({
+      #Box.sm();
+    });
+  }
+
+  &.hxMd {
+    #HXDiv.shadyRoot({
+      #Box.md();
+    });
+  }
+
+  &.hxLg {
+    #HXDiv.shadyRoot({
+      #Box.lg();
+    });
+  }
+
+  &.hxXl {
+    #HXDiv.shadyRoot({
+      #Box.xl();
+    });
+  }
+
+  &.hx2x {
+    #HXDiv.shadyRoot({
+      #Box.xxl();
+    });
+  }
+
+  &.hxFlush {
+    #HXDiv.shadyRoot({
+      #Box.flush();
+    });
+  }
+}
+
+// ===== Modern Browsers =====
+// Should only apply to browsers with ShadowDOM support.
+@supports(--modern: true) {
+  hx-div {
+    &.hxXs {
+      --padding-base: @space[xs];
+    }
+
+    &.hxSm {
+      --padding-base: @space[sm];
+    }
+
+    &.hxMd {
+      --padding-base: @space[md];
+    }
+
+    &.hxLg {
+      --padding-base: @space[lg];
+    }
+
+    &.hxXl {
+      --padding-base: @space[xl];
+    }
+
+    &.hx2x {
+      --padding-base: @space[xxl];
+    }
+
+    &.hxFlush {
+      --padding-base: @space[flush];;
+    }
+  }
+}

src/helix-ui/styles/components/layouts.less

@@ -57,7 +57,7 @@ dl.hxList.hxVertical {
   }
 }
 
-ol.hxList, 
+ol.hxList,
 ul.hxList {
   margin-left: 1.25rem;
   padding-left: 1.25rem;
@@ -117,3 +117,13 @@ hx-dl.hxVertical {
     margin: 0;
   }
 }
+
+hx-dl,
+hx-dd,
+hx-dt {
+  display: block;
+}
+
+hx-def {
+  display: flex;
+}