@xdam/ember-partials 0.9.0-beta.0 → 0.10.0

package/app/styles/ember-partials/components/xep-toolbar.scss

@@ -1,107 +1,107 @@
-$xep-toolbar-spacing: 5px;
-$xep-toolbar-divider-thickness: 2px;
-
-.xep-toolbar {
-  background: $mdc-theme-surface;
-  display: flex;
-  box-sizing: border-box;
-  flex-flow: row nowrap;
-  overflow: visible;
-  z-index: 1;
-
-  &--fixed {
-    position: fixed;
-  }
-
-  &__section {
-    display: inline-flex;
-
-    &--align-start {
-      justify-content: flex-start;
-    }
-
-    &--align-end {
-      justify-content: flex-end;
-    }
-
-    &--align-middle {
-      justify-content: center;
-    }
-
-    &--flex-grow {
-      flex: 1 1 auto;
-    }
-
-    &--flex-shrink {
-      flex: 0 1 auto;
-    }
-  }
-
-  &__item {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    position: relative;
-  }
-
-  &__item-button,
-  &__item-text,
-  &__item-icon {
-    padding: $xep-toolbar-spacing;
-  }
-
-  &__divider {
-    background: map-get($xep-shades, typography-3);
-  }
-
-  &__item-text {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  &--horizontal {
-    padding: 0 $xep-toolbar-spacing;
-
-    .xep-toolbar__section {
-      flex-flow: row nowrap;
-    }
-
-    .xep-toolbar__divider {
-      width: $xep-toolbar-divider-thickness;
-      margin: ($xep-toolbar-spacing * 2) $xep-toolbar-spacing;
-    }
-  }
-
-  &--vertical {
-    height: 100%;
-    padding: $xep-toolbar-spacing 0;
-    flex-flow: column nowrap;
-
-    .xep-toolbar__section {
-      flex-flow: column nowrap;
-    }
-
-    .xep-toolbar__item {
-      display: flex;
-      text-align: center;
-      justify-content: center;
-      flex-direction: column;
-    }
-
-    .xep-toolbar__item-text {
-      font-size: 10px;
-    }
-
-    .xep-toolbar__divider {
-      height: $xep-toolbar-divider-thickness;
-      margin: $xep-toolbar-spacing ($xep-toolbar-spacing * 2);
-    }
-
-    .xep-toolbar__item-icon,
-    .xep-toolbar__item-text {
-      display: block;
-      line-height: 1;
-    }
-  }
-}
+$xep-toolbar-spacing: 5px;
+$xep-toolbar-divider-thickness: 2px;
+
+.xep-toolbar {
+  background: $mdc-theme-surface;
+  display: flex;
+  box-sizing: border-box;
+  flex-flow: row nowrap;
+  overflow: visible;
+  z-index: 1;
+
+  &--fixed {
+    position: fixed;
+  }
+
+  &__section {
+    display: inline-flex;
+
+    &--align-start {
+      justify-content: flex-start;
+    }
+
+    &--align-end {
+      justify-content: flex-end;
+    }
+
+    &--align-middle {
+      justify-content: center;
+    }
+
+    &--flex-grow {
+      flex: 1 1 auto;
+    }
+
+    &--flex-shrink {
+      flex: 0 1 auto;
+    }
+  }
+
+  &__item {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    position: relative;
+  }
+
+  &__item-button,
+  &__item-text,
+  &__item-icon {
+    padding: $xep-toolbar-spacing;
+  }
+
+  &__divider {
+    background: map-get($xep-shades, typography-3);
+  }
+
+  &__item-text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  &--horizontal {
+    padding: 0 $xep-toolbar-spacing;
+
+    .xep-toolbar__section {
+      flex-flow: row nowrap;
+    }
+
+    .xep-toolbar__divider {
+      width: $xep-toolbar-divider-thickness;
+      margin: ($xep-toolbar-spacing * 2) $xep-toolbar-spacing;
+    }
+  }
+
+  &--vertical {
+    height: 100%;
+    padding: $xep-toolbar-spacing 0;
+    flex-flow: column nowrap;
+
+    .xep-toolbar__section {
+      flex-flow: column nowrap;
+    }
+
+    .xep-toolbar__item {
+      display: flex;
+      text-align: center;
+      justify-content: center;
+      flex-direction: column;
+    }
+
+    .xep-toolbar__item-text {
+      font-size: 10px;
+    }
+
+    .xep-toolbar__divider {
+      height: $xep-toolbar-divider-thickness;
+      margin: $xep-toolbar-spacing ($xep-toolbar-spacing * 2);
+    }
+
+    .xep-toolbar__item-icon,
+    .xep-toolbar__item-text {
+      display: block;
+      line-height: 1;
+    }
+  }
+}

package/app/styles/ember-partials/dark-theme.scss

@@ -1,42 +1,42 @@
-$xep-colors: (
-  primary: #2284ff,
-  success: #3adb76,
-  warning: #ffae00,
-  alert: #cc4b37
-) !default;
-
-$xep-shades: (
-  typography: #fefefe,
-  typography-1: #b2b3b4,
-  typography-2: #8d9192,
-  typography-3: #7c8081,
-  typography-4: #616364,
-  background: #1b1e22,
-  background-1: #1f2327,
-  background-2: #282b2f,
-  background-3: #383b3f,
-  background-4: #44474b
-) !default;
-
-$xep-surface-border: map-get($xep-shades, background-3) !default;
-
-/* ============= MDC Color ============= */
-
-$mdc-theme-primary: map-get($xep-colors, primary) !default;
-$mdc-theme-secondary: map-get($xep-colors, success) !default;
-$mdc-theme-background: map-get($xep-shades, background) !default;
-$mdc-theme-surface: map-get($xep-shades, background-2) !default;
-$mdc-theme-on-primary: map-get($xep-shades, typography) !default;
-$mdc-theme-on-secondary: map-get($xep-shades, typography) !default;
-$mdc-theme-on-surface: map-get($xep-shades, typography-1) !default;
-
-$mdc-theme-text-primary-on-light: map-get($xep-colors, primary) !default;
-$mdc-theme-text-primary-on-dark: map-get($xep-colors, primary) !default;
-$mdc-theme-text-secondary-on-dark: map-get($xep-colors, success) !default;
-$mdc-theme-text-secondary-on-light: map-get($xep-colors, success) !default;
-$mdc-theme-text-hint-on-dark: map-get($xep-shades, typography-2) !default;
-$mdc-theme-text-hint-on-light: map-get($xep-shades, typography-2) !default;
-$mdc-theme-text-disabled-on-dark: map-get($xep-shades, typography-3) !default;
-$mdc-theme-text-disabled-on-light: map-get($xep-shades, typography-3) !default;
-$mdc-theme-text-icon-on-dark: map-get($xep-shades, typography-1) !default;
-$mdc-theme-text-icon-on-light: map-get($xep-shades, typography-1) !default;
+$xep-colors: (
+  primary: #2284ff,
+  success: #3adb76,
+  warning: #ffae00,
+  alert: #cc4b37
+) !default;
+
+$xep-shades: (
+  typography: #fefefe,
+  typography-1: #b2b3b4,
+  typography-2: #8d9192,
+  typography-3: #7c8081,
+  typography-4: #616364,
+  background: #1b1e22,
+  background-1: #1f2327,
+  background-2: #282b2f,
+  background-3: #383b3f,
+  background-4: #44474b
+) !default;
+
+$xep-surface-border: map-get($xep-shades, background-3) !default;
+
+/* ============= MDC Color ============= */
+
+$mdc-theme-primary: map-get($xep-colors, primary) !default;
+$mdc-theme-secondary: map-get($xep-colors, success) !default;
+$mdc-theme-background: map-get($xep-shades, background) !default;
+$mdc-theme-surface: map-get($xep-shades, background-2) !default;
+$mdc-theme-on-primary: map-get($xep-shades, typography) !default;
+$mdc-theme-on-secondary: map-get($xep-shades, typography) !default;
+$mdc-theme-on-surface: map-get($xep-shades, typography-1) !default;
+
+$mdc-theme-text-primary-on-light: map-get($xep-colors, primary) !default;
+$mdc-theme-text-primary-on-dark: map-get($xep-colors, primary) !default;
+$mdc-theme-text-secondary-on-dark: map-get($xep-colors, success) !default;
+$mdc-theme-text-secondary-on-light: map-get($xep-colors, success) !default;
+$mdc-theme-text-hint-on-dark: map-get($xep-shades, typography-2) !default;
+$mdc-theme-text-hint-on-light: map-get($xep-shades, typography-2) !default;
+$mdc-theme-text-disabled-on-dark: map-get($xep-shades, typography-3) !default;
+$mdc-theme-text-disabled-on-light: map-get($xep-shades, typography-3) !default;
+$mdc-theme-text-icon-on-dark: map-get($xep-shades, typography-1) !default;
+$mdc-theme-text-icon-on-light: map-get($xep-shades, typography-1) !default;

package/app/styles/ember-partials/helpers/alignment.scss

@@ -1,59 +1,59 @@
-.xep-text {
-  &-center {
-    text-align: center !important;
-  }
-
-  &-left {
-    text-align: left !important;
-  }
-
-  &-right {
-    text-align: right !important;
-  }
-}
-
-.xep-flex {
-  &-justify-center {
-    justify-content: center !important;
-  }
-
-  &-justify-flex-end {
-    justify-content: flex-end !important;
-  }
-
-  &-justify-flex-start {
-    justify-content: flex-start !important;
-  }
-
-  &-align-center {
-    align-items: center !important;
-  }
-
-  &-align-flex-end {
-    align-items: flex-end !important;
-  }
-
-  &-align-flex-start {
-    align-items: flex-start !important;
-  }
-
-  &-grow {
-    flex: 1 0 auto;
-  }
-
-  &-auto {
-    flex: 1 1 auto;
-  }
-
-  &-shrink {
-    flex: 0 1 auto;
-  }
-
-  &-direction-row {
-    flex-direction: row;
-  }
-
-  &-direction-column {
-    flex-direction: column;
-  }
-}
+.xep-text {
+  &-center {
+    text-align: center !important;
+  }
+
+  &-left {
+    text-align: left !important;
+  }
+
+  &-right {
+    text-align: right !important;
+  }
+}
+
+.xep-flex {
+  &-justify-center {
+    justify-content: center !important;
+  }
+
+  &-justify-flex-end {
+    justify-content: flex-end !important;
+  }
+
+  &-justify-flex-start {
+    justify-content: flex-start !important;
+  }
+
+  &-align-center {
+    align-items: center !important;
+  }
+
+  &-align-flex-end {
+    align-items: flex-end !important;
+  }
+
+  &-align-flex-start {
+    align-items: flex-start !important;
+  }
+
+  &-grow {
+    flex: 1 0 auto;
+  }
+
+  &-auto {
+    flex: 1 1 auto;
+  }
+
+  &-shrink {
+    flex: 0 1 auto;
+  }
+
+  &-direction-row {
+    flex-direction: row;
+  }
+
+  &-direction-column {
+    flex-direction: column;
+  }
+}

package/app/styles/ember-partials/helpers/color.scss

@@ -1,27 +1,27 @@
-@each $name, $value in $xep-colors {
-  .xep-#{"" + $name}-color {
-    color: $value !important;
-  }
-
-  .xep-#{"" + $name}-background {
-    background-color: $value !important;
-  }
-
-  .xep-#{"" + $name}-border {
-    border-color: $value !important;
-  }
-}
-
-@each $name, $value in $xep-shades {
-  .xep-#{"" + $name}-color {
-    color: $value !important;
-  }
-
-  .xep-#{"" + $name}-background {
-    background-color: $value !important;
-  }
-
-  .xep-#{"" + $name}-border {
-    border-color: $value !important;
-  }
-}
+@each $name, $value in $xep-colors {
+  .xep-#{"" + $name}-color {
+    color: $value !important;
+  }
+
+  .xep-#{"" + $name}-background {
+    background-color: $value !important;
+  }
+
+  .xep-#{"" + $name}-border {
+    border-color: $value !important;
+  }
+}
+
+@each $name, $value in $xep-shades {
+  .xep-#{"" + $name}-color {
+    color: $value !important;
+  }
+
+  .xep-#{"" + $name}-background {
+    background-color: $value !important;
+  }
+
+  .xep-#{"" + $name}-border {
+    border-color: $value !important;
+  }
+}

package/app/styles/ember-partials/helpers/display.scss

@@ -1,19 +1,27 @@
-.xep-display-block {
-  display: block !important;
-}
-
-.xep-display-inline-block {
-  display: inline-block !important;
-}
-
-.xep-display-inline {
-  display: inline !important;
-}
-
-.xep-display-flex {
-  display: flex !important;
-}
-
-.xep-display-inline-flex {
-  display: inline-flex !important;
-}
+.xep-display-block {
+  display: block !important;
+}
+
+.xep-display-inline-block {
+  display: inline-block !important;
+}
+
+.xep-display-inline {
+  display: inline !important;
+}
+
+.xep-display-flex {
+  display: flex !important;
+}
+
+.xep-display-inline-flex {
+  display: inline-flex !important;
+}
+
+.xep-width-100 {
+  width: 100% !important;
+}
+
+.xep-height-100 {
+  height: 100% !important;
+}

package/app/styles/ember-partials/helpers/overrides.scss

@@ -1,7 +1,7 @@
-// Extra layers are creating performance issues
-:not(.mdc-list--non-interactive) > .mdc-list-item,
-:not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item,
-.mdc-button {
-  will-change: initial;
-  contain: initial;
-}
+// Extra layers are creating performance issues
+:not(.mdc-list--non-interactive) > .mdc-list-item,
+:not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item,
+.mdc-button {
+  will-change: initial;
+  contain: initial;
+}

package/app/styles/ember-partials/helpers/root.scss

@@ -1,13 +1,13 @@
-:root {
-  @each $name, $value in $xep-colors {
-    --xep-#{"" + $name}-color: #{$value};
-  }
-
-  @each $name, $value in $xep-shades {
-    --xep-#{"" + $name}-shade: #{$value};
-  }
-
-  @each $name, $value in $xep-breakpoints {
-    --xep-#{"" + $name}-breakpoint: #{strip-unit($value)};
-  }
-}
+:root {
+  @each $name, $value in $xep-colors {
+    --xep-#{"" + $name}-color: #{$value};
+  }
+
+  @each $name, $value in $xep-shades {
+    --xep-#{"" + $name}-shade: #{$value};
+  }
+
+  @each $name, $value in $xep-breakpoints {
+    --xep-#{"" + $name}-breakpoint: #{strip-unit($value)};
+  }
+}

package/app/styles/ember-partials/helpers/rotate.scss

@@ -0,0 +1,11 @@
+.xep-rotate-90 {
+  transform: rotate(90deg);
+}
+
+.xep-rotate-180 {
+  transform: rotate(180deg);
+}
+
+.xep-rotate-270 {
+  transform: rotate(270deg);
+}

package/app/styles/ember-partials/helpers/spacing.scss

@@ -1,25 +1,25 @@
-$xep-spacing-types: 'margin' 'padding';
-$xep-spacing-positions: 'top' 'bottom' 'left' 'right';
-
-$xep-spacing-amounts: (
-  none: 0,
-  quarter: 0.25,
-  half: 0.5,
-  one: 1,
-  two: 2,
-  three: 3
-);
-
-@each $type in $xep-spacing-types {
-  @each $name, $amount in $xep-spacing-amounts {
-    @each $position in $xep-spacing-positions {
-      .xep-#{$type}-#{$position}-#{$name} {
-        #{$type}-#{$position}: $xep-global-spacing * $amount !important;
-      }
-    }
-
-    .xep-#{$type}-#{$name} {
-      #{$type}: $xep-global-spacing * $amount !important;
-    }
-  }
-}
+$xep-spacing-types: 'margin' 'padding';
+$xep-spacing-positions: 'top' 'bottom' 'left' 'right';
+
+$xep-spacing-amounts: (
+  none: 0,
+  quarter: 0.25,
+  half: 0.5,
+  one: 1,
+  two: 2,
+  three: 3
+);
+
+@each $type in $xep-spacing-types {
+  @each $name, $amount in $xep-spacing-amounts {
+    @each $position in $xep-spacing-positions {
+      .xep-#{$type}-#{$position}-#{$name} {
+        #{$type}-#{$position}: $xep-global-spacing * $amount !important;
+      }
+    }
+
+    .xep-#{$type}-#{$name} {
+      #{$type}: $xep-global-spacing * $amount !important;
+    }
+  }
+}

package/app/styles/ember-partials/helpers/typography.scss

@@ -0,0 +1,5 @@
+.xep-truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/app/styles/ember-partials/helpers/visibility.scss

@@ -1,23 +1,23 @@
-@each $type, $value in $xep-breakpoints {
-  .xep-hide-for-#{$type} {
-    @include breakpoint(#{$type}, up) {
-      display: none !important;
-    }
-  }
-
-  .xep-show-for-#{$type} {
-    display: none !important;
-
-    @include breakpoint(#{$type}, up) {
-      display: inherit !important;
-    }
-  }
-}
-
-.xep-hide {
-  display: none !important;
-}
-
-.xep-hidden {
-  visibility: hidden !important;
-}
+@each $type, $value in $xep-breakpoints {
+  .xep-hide-for-#{$type} {
+    @include breakpoint(#{$type}, up) {
+      display: none !important;
+    }
+  }
+
+  .xep-show-for-#{$type} {
+    display: none !important;
+
+    @include breakpoint(#{$type}, up) {
+      display: inherit !important;
+    }
+  }
+}
+
+.xep-hide {
+  display: none !important;
+}
+
+.xep-hidden {
+  visibility: hidden !important;
+}