Refector sass

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/partials/_dir.scss

@@ -0,0 +1,26 @@
+/*
+* NOTICE: only use this
+* when sides are un-even
+* if they are even just use $property: 0 $spacing; 
+*/
+
+@mixin side($property, $left, $right) {
+  #{$property}: {
+    left: $left;
+    right: $right;
+  };
+  
+  [dir=rtl] & {
+    #{$property}: {
+      left: $right;
+      right: $left;
+    };
+  }
+}
+
+@mixin prop($property, $ltr, $rtl) {
+  #{$property}: $ltr;
+  [dir=rtl] & {
+    #{$property}: $rtl;
+  }
+}

src/app/partials/_flex.scss

@@ -0,0 +1,58 @@
+._s-c {
+  justify-content: flex-start;
+  align-items: center;
+}
+._c-c {
+  justify-content: center;
+  align-items: center;
+}
+._e-c {
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.cp-fx__row {
+  display: flex;
+  flex-direction: row;
+}
+
+.cp-fx__column {
+  display: flex;
+  flex-direction: column;
+}
+
+.cp-fx__row--s-c {
+  @extend .cp-fx__row;
+  @extend ._s-c;
+}
+
+.cp-fx__row--c-c {
+  @extend .cp-fx__row;
+  @extend ._c-c;
+}
+
+.cp-fx__row--e-c {
+  @extend .cp-fx__row;
+  @extend ._e-c;
+}
+
+.cp-fx__column--s-c {
+  @extend .cp-fx__column;
+  @extend ._s-c;
+}
+
+.cp-fx__column--c-c {
+  @extend .cp-fx__column;
+  @extend ._c-c;
+}
+
+.cp-fx__column--e-c {
+  @extend .cp-fx__column;
+  @extend ._e-c;
+}
+
+.cp-fx__item-one {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}

src/app/partials/_text.scss

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