@symphony-talent/component-library 2.0.0 → 3.2.1

package/projects/component-library/global-assets/spacing.scss

@@ -0,0 +1,290 @@
+// Spacing
+$space-0: 0px;
+$space-5: 0.3rem;
+$space-10: 0.625rem;
+$space-15: 0.9375rem;
+$space-20: 1.25rem;
+$space-25: 1.5625rem;
+$space-30: 1.875rem;
+$space-35: 2.1875rem;
+$space-40: 2.5rem;
+$space-50: 3.125rem;
+$space-75: 4.688rem;
+
+// ***** PADDING ***** //
+// Padding all round
+.sfx-p-0 {
+  padding: $space-0;
+}
+.sfx-p-5 {
+  padding: $space-5;
+}
+.sfx-p-10 {
+  padding: $space-10;
+}
+.sfx-p-15 {
+  padding: $space-15;
+}
+.sfx-p-20 {
+  padding: $space-20;
+}
+.sfx-p-30 {
+  padding: $space-30;
+}
+// End Padding all round
+// Padding top
+.sfx-pt-0 {
+  padding-top: $space-0;
+}
+.sfx-pt-5 {
+  padding-top: $space-5;
+}
+.sfx-pt-10 {
+  padding-top: $space-10;
+}
+.sfx-pt-15 {
+  padding-top: $space-15;
+}
+.sfx-pt-20 {
+  padding-top: $space-20;
+}
+.sfx-pt-25 {
+  padding-top: $space-25;
+}
+.sfx-pt-30 {
+  padding-top: $space-30;
+}
+.sfx-pt-35 {
+  padding-top: $space-35;
+}
+.sfx-pt-40 {
+  padding-top: $space-40;
+}
+.sfx-pt-50 {
+  padding-top: $space-50;
+}
+// End Padding top
+// Padding bottom
+.sfx-pb-0 {
+  padding-bottom: $space-0;
+}
+.sfx-pb-5 {
+  padding-bottom: $space-5;
+}
+.sfx-pb-10 {
+  padding-bottom: $space-10;
+}
+.sfx-pb-15 {
+  padding-bottom: $space-15;
+}
+.sfx-pb-20 {
+  padding-bottom: $space-20;
+}
+.sfx-pb-25 {
+  padding-bottom: $space-25;
+}
+.sfx-pb-30 {
+  padding-bottom: $space-30;
+}
+.sfx-pb-35 {
+  padding-bottom: $space-35;
+}
+.sfx-pb-40 {
+  padding-bottom: $space-40;
+}
+.sfx-pb-50 {
+  padding-bottom: $space-50;
+}
+// End Padding bottom
+// Padding left
+.sfx-pl-0 {
+  padding-left: $space-0;
+}
+.sfx-pl-5 {
+  padding-left: $space-5;
+}
+.sfx-pl-10 {
+  padding-left: $space-10;
+}
+.sfx-pl-15 {
+  padding-left: $space-15;
+}
+.sfx-pl-20 {
+  padding-left: $space-20;
+}
+.sfx-pl-25 {
+  padding-left: $space-25;
+}
+.sfx-pl-30 {
+  padding-left: $space-30;
+}
+// End Padding left
+// Padding right
+.sfx-pr-0 {
+  padding-right: $space-0;
+}
+.sfx-pr-5 {
+  padding-right: $space-5;
+}
+.sfx-pr-10 {
+  padding-right: $space-10;
+}
+.sfx-pr-15 {
+  padding-right: $space-15;
+}
+.sfx-pr-20 {
+  padding-right: $space-20;
+}
+.sfx-pr-25 {
+  padding-right: $space-25;
+}
+.sfx-pr-30 {
+  padding-right: $space-30;
+}
+// End Padding right
+// Padding y-axis
+.sfx-py-15 {
+  padding-left: $space-15;
+  padding-right: $space-15;
+}
+.sfx-py-30 {
+  padding-left: $space-30;
+  padding-right: $space-30;
+}
+// End Padding y-axis
+// Padding x-axis
+.sfx-px-0 {
+  padding-top: $space-0;
+  padding-bottom: $space-0;
+}
+.sfx-px-15 {
+  padding-top: $space-15;
+  padding-bottom: $space-15;
+}
+.sfx-px-30 {
+  padding-top: $space-30;
+  padding-bottom: $space-30;
+}
+// End Padding x-axis
+// ***** END PADDING ***** //
+
+// ***** MARGIN ***** //
+// Margin all round
+.sfx-m-0 {
+  margin: $space-0;
+}
+.sfx-m-5 {
+  margin: $space-5;
+}
+.sfx-m-10 {
+  margin: $space-10;
+}
+.sfx-m-15 {
+  margin: $space-15;
+}
+.sfx-m-20 {
+  margin: $space-20;
+}
+.sfx-m-auto {
+  margin: 0 auto;
+}
+// End Margin all round
+// Margin top
+.sfx-mt-0 {
+  margin-top: $space-0;
+}
+.sfx-mt-5 {
+  margin-top: $space-5;
+}
+.sfx-mt-10 {
+  margin-top: $space-10;
+}
+.sfx-mt-15 {
+  margin-top: $space-15;
+}
+.sfx-mt-20 {
+  margin-top: $space-20;
+}
+.sfx-mt-25 {
+  margin-top: $space-25;
+}
+.sfx-mt-30 {
+  margin-top: $space-30;
+}
+.sfx-mt-40 {
+  margin-top: $space-40;
+}
+// End Margin top
+// Margin bottom
+.sfx-mb-0 {
+  margin-bottom: $space-0;
+}
+.sfx-mb-5 {
+  margin-bottom: $space-5;
+}
+.sfx-mb-10 {
+  margin-bottom: $space-10;
+}
+.sfx-mb-15 {
+  margin-bottom: $space-15;
+}
+.sfx-mb-20 {
+  margin-bottom: $space-20;
+}
+.sfx-mb-25 {
+  margin-bottom: $space-25;
+}
+.sfx-mb-30 {
+  margin-bottom: $space-30;
+}
+.sfx-mb-40 {
+  margin-bottom: $space-40;
+}
+// End Margin bottom
+// Margin left
+.sfx-ml-0 {
+  margin-left: $space-0;
+}
+.sfx-ml-5 {
+  margin-left: $space-5;
+}
+.sfx-ml-10 {
+  margin-left: $space-10;
+}
+.sfx-ml-15 {
+  margin-left: $space-15;
+}
+.sfx-ml-20 {
+  margin-left: $space-20;
+}
+.sfx-ml-auto {
+  margin-left: auto;
+}
+// End Margin left
+// Margin right
+.sfx-mr-0 {
+  margin-right: $space-0;
+}
+.sfx-mr-5 {
+  margin-right: $space-5;
+}
+.sfx-mr-10 {
+  margin-right: $space-10;
+}
+.sfx-mr-15 {
+  margin-right: $space-15;
+}
+.sfx-mr-20 {
+  margin-right: $space-20;
+}
+.sfx-mr-25 {
+  margin-right: $space-25;
+}
+.sfx-mr-30 {
+  margin-right: $space-30;
+}
+.sfx-mr-40 {
+  margin-right: $space-40;
+}
+// End Margin right
+// ***** END MARGIN ***** //