@softheon/armature 10.27.2 → 10.28.1

package/assets/styles/_utility.scss

@@ -0,0 +1,340 @@
+/** Margin Styling */
+/** M-Top */
+[m-t-0],
+.m-t-0 {
+  margin-top: 0px !important;
+}
+[m-t-15],
+.m-t-15 {
+  margin-top: 15px !important;
+}
+[m-t-20],
+.m-t-20 {
+  margin-top: 20px !important;
+}
+[m-t-24],
+.m-t-24 {
+  margin-top: 24px !important;
+}
+[m-t-25],
+.m-t-25 {
+  margin-top: 25px !important;
+}
+[m-t-30],
+.m-t-30 {
+  margin-top: 30px !important;
+}
+[m-t-40],
+.m-t-40 {
+  margin-top: 40px !important;
+}
+[m-t-45],
+.m-t-45 {
+  margin-top: 45px !important;
+}
+.m-t-55,
+[m-t-55] {
+  margin-top: 55px !important;
+}
+[m-t-60],
+.m-t-60 {
+  margin-top: 60px !important;
+}
+/** M-Right */
+.m-r-20,
+[m-r-20] {
+  margin-right: 20px !important;
+}
+.m-r-60,
+[m-r-60] {
+  margin-right: 60px !important;
+}
+/** M-Bottom */
+[m-b-0],
+.m-b-0 {
+  margin-bottom: 0px !important;
+}
+[m-b-10],
+.m-b-10 {
+  margin-bottom: 10px !important;
+}
+[m-b-15],
+.m-b-15 {
+  margin-bottom: 15px !important;
+}
+[m-b-24],
+.m-b-24 {
+  margin-bottom: 24px !important;
+}
+[m-b-25],
+.m-b-25 {
+  margin-bottom: 25px !important;
+}
+[m-b-30],
+.m-b-30 {
+  margin-bottom: 30px !important;
+}
+[m-b-37],
+.m-b-37 {
+  margin-bottom: 37px !important;
+}
+[m-b-45],
+.m-b-45 {
+  margin-bottom: 45px !important;
+}
+[m-b-50],
+.m-b-50 {
+  margin-bottom: 50px !important;
+}
+[m-b-65],
+.m-b-65 {
+  margin-bottom: 65px !important;
+}
+/** M-Left */
+.m-l-35,
+[m-l-35] {
+  margin-left: 35px !important;
+}
+[m-l-20],
+.m-l-20 {
+  margin-left: 20px !important;
+}
+/** M-Horizontal */
+.m-h-10,
+[m-h-10] {
+  margin-left: 10px !important;
+  margin-right: 10px !important;
+}
+.m-h-20,
+[m-h-20] {
+  margin-left: 20px !important;
+  margin-right: 20px !important;
+}
+.m-h-24,
+[m-h-24] {
+  margin-left: 24px !important;
+  margin-right: 24px !important;
+}
+.m-h-30,
+[m-h-30] {
+  margin-left: 30px !important;
+  margin-right: 30px !important;
+}
+.m-h-68,
+[m-h-68] {
+  margin-left: 68px !important;
+  margin-right: 68px !important;
+}
+.m-h-70,
+[m-h-70] {
+  margin-left: 70px !important;
+  margin-right: 70px !important;
+}
+/** M-Vertical */
+.m-v-0,
+[m-v-0] {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+}
+.m-v-10,
+[m-v-10] {
+  margin-top: 10px !important;
+  margin-bottom: 10px !important;
+}
+[m-v-15],
+.m-v-15 {
+  margin-top: 15px !important;
+  margin-bottom: 15px !important;
+}
+.m-v-18,
+[m-v-18] {
+  margin-top: 18px !important;
+  margin-bottom: 18px !important;
+}
+.m-v-20,
+[m-v-20] {
+  margin-top: 20px !important;
+  margin-bottom: 20px !important;
+}
+[m-v-25],
+.m-v-25 {
+  margin-top: 25px !important;
+  margin-bottom: 25px !important;
+}
+.m-v-30,
+[m-v-30] {
+  margin-top: 30px !important;
+  margin-bottom: 30px !important;
+}
+.m-v-35,
+[m-v-35] {
+  margin-top: 35px !important;
+  margin-bottom: 35px !important;
+}
+.m-v-40,
+[m-v-40] {
+  margin-top: 40px !important;
+  margin-bottom: 40px !important;
+}
+/** M-All */
+.m-a-0,
+[m-a-0] {
+  margin: 0px !important;
+}
+.m-a-10,
+[m-a-10] {
+  margin: 10px !important;
+}
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+/** Padding Styling */
+/** P-Top */
+[p-t-12],
+.p-t-12 {
+  padding-top: 12px !important;
+}
+.p-t-15,
+[p-t-15] {
+  padding-top: 15px !important;
+}
+[p-t-17],
+.p-t-17 {
+  padding-top: 17px !important;
+}
+[p-t-20],
+.p-t-20 {
+  padding-top: 20px !important;
+}
+[p-t-25],
+.p-t-25 {
+  padding-top: 25px !important;
+}
+.p-t-30,
+[p-t-30] {
+  padding-top: 30px !important;
+}
+.p-t-35,
+[p-t-35] {
+  padding-top: 35px !important;
+}
+.p-t-60,
+[p-t-60] {
+  padding-top: 60px !important;
+}
+.p-t-65,
+[p-t-60] {
+  padding-top: 65px !important;
+}
+/** P-Right */
+[p-r-6],
+.p-r-6 {
+  padding-right: 6px !important;
+}
+/** P-Bottom */
+[p-b-5],
+.p-b-5 {
+  padding-bottom: 5px !important;
+}
+[p-b-12],
+.p-b-12 {
+  padding-bottom: 12px !important;
+}
+[p-b-20],
+.p-b-20 {
+  padding-bottom: 20px !important;
+}
+[p-b-40],
+.p-b-40 {
+  padding-bottom: 40px !important;
+}
+[p-b-60],
+.p-b-60 {
+  padding-bottom: 60px !important;
+}
+/** P-Left */
+.p-l-25,
+[p-l-25] {
+  padding-left: 25px !important;
+}
+/** P-Horizontal */
+[p-h-6],
+.p-h-6 {
+  padding-left: 6px !important;
+  padding-right: 6px !important;
+}
+/** P-Vertical */
+[p-v-40],
+.p-v-40 {
+  padding-top: 40px !important;
+  padding-bottom: 40px !important;
+}
+[p-v-55],
+.p-v-55 {
+  padding-top: 55px !important;
+  padding-bottom: 55px !important;
+}
+[p-v-100],
+.p-v-100 {
+  padding-top: 100px !important;
+  padding-bottom: 100px !important;
+}
+/** P-All */
+[p-a-20],
+p-a-20 {
+  padding: 20px !important;
+}
+
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+/** Input Width Styling */
+.input-w-300,
+[input-w-300] {
+  width: 300px !important;
+}
+.input-w-200,
+[input-w-200] {
+  width: 200px !important;
+}
+.input-w-150,
+[input-w-150] {
+  width: 150px !important;
+}
+.input-w-120,
+[input-w-120] {
+  width: 120px !important;
+}
+
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+/** Text Styling */
+.text-left,
+[text-left] {
+  text-align: left;
+}
+.text-center,
+[text-center] {
+  text-align: center !important;
+}
+
+[p-x-16],
+.p-x-16 {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+}
+
+[p-t-40],.p-t-40 {
+    padding-top: 40px !important;
+}
+
+[m-v-24], .m-v-24 {
+    margin-top: 24px !important;
+    margin-bottom: 24px !important;
+}
+
+.m-t-24 {
+    margin-top: 24px !important;
+}
+
+.m-t-32 {
+    margin-top: 32px !important;
+}

package/assets/styles/_variables.scss

@@ -0,0 +1,22 @@
+// Breakpoint flex px sizes
+$screen-xs-start: 0px;
+$screen-xs-end: 599px;
+$screen-sm-start: 600px;
+$screen-sm-end: 959px;
+$screen-md-start: 960px; 
+$screen-md-end: 1279px;
+$screen-lg-start: 1280px;
+$screen-lg-end: 1919px;
+$screen-xl-start: 1920px;
+$screen-xl-end: 5000px;
+$mat-lt-sm: 599px;
+$mat-lt-md: 959px;
+$mat-lt-lg: 1279px;
+$mat-gt-sm: 960px;
+$mat-gt-md: 1280px;
+
+// Common static colors
+$main-dark-gray: #646464;
+$main-dark-disabled: #4f4f4f;
+$very-light-grey: #F8F8F8;
+$light-grey: #eee;

package/assets/styles/material-overrides.scss

@@ -1,6 +1,11 @@
 @import "../../../../../node_modules/@angular/material/theming";
 @import "./arm-theme.scss";
 
+// TODO!!!
+// DEPRECATE IN FAVOR OF 'sof-styles.scss' if classes in here are widely used.
+// Please implement in the 'sof-styles.scss' style sheet. That style sheet is more in line with the current UX design guide
+// Will keep this file until ready to completely remove it
+
 @include mat-core();
 
 $main-theme-primary: mat-palette($arm-primary);