@empathyco/x-components 3.0.0-alpha.21 → 3.0.0-alpha.25

package/design-system/utilities-margin.css

@@ -0,0 +1,435 @@
+@use 'sass:string';
+.x-margin--auto {
+  margin: auto !important; }
+
+.x-margin--00 {
+  margin: 0 !important; }
+
+.x-margin--01 {
+  margin: var(--x-size-base-01) !important; }
+
+.x-margin--02 {
+  margin: var(--x-size-base-02) !important; }
+
+.x-margin--03 {
+  margin: var(--x-size-base-03) !important; }
+
+.x-margin--04 {
+  margin: var(--x-size-base-04) !important; }
+
+.x-margin--05 {
+  margin: var(--x-size-base-05) !important; }
+
+.x-margin--06 {
+  margin: var(--x-size-base-06) !important; }
+
+.x-margin--07 {
+  margin: var(--x-size-base-07) !important; }
+
+.x-margin--08 {
+  margin: var(--x-size-base-08) !important; }
+
+.x-margin--09 {
+  margin: var(--x-size-base-09) !important; }
+
+.x-margin--10 {
+  margin: var(--x-size-base-10) !important; }
+
+.x-margin--11 {
+  margin: var(--x-size-base-11) !important; }
+
+.x-margin--12 {
+  margin: var(--x-size-base-12) !important; }
+
+.x-margin--13 {
+  margin: var(--x-size-base-13) !important; }
+
+.x-margin--top-auto {
+  -webkit-margin-before: auto !important;
+          margin-top: auto !important; }
+
+.x-margin--bottom-auto {
+  -webkit-margin-after: auto !important;
+          margin-bottom: auto !important; }
+
+[dir="ltr"] .x-margin--right-auto{
+          margin-right: auto !important; }
+
+[dir="rtl"] .x-margin--right-auto{
+          margin-left: auto !important; }
+
+.x-margin--right-auto {
+  -webkit-margin-end: auto !important; }
+
+[dir="ltr"] .x-margin--left-auto{
+          margin-left: auto !important; }
+
+[dir="rtl"] .x-margin--left-auto{
+          margin-right: auto !important; }
+
+.x-margin--left-auto {
+  -webkit-margin-start: auto !important; }
+
+.x-margin--top-00 {
+  -webkit-margin-before: 0 !important;
+          margin-top: 0 !important; }
+
+.x-margin--bottom-00 {
+  -webkit-margin-after: 0 !important;
+          margin-bottom: 0 !important; }
+
+[dir="ltr"] .x-margin--right-00{
+          margin-right: 0 !important; }
+
+[dir="rtl"] .x-margin--right-00{
+          margin-left: 0 !important; }
+
+.x-margin--right-00 {
+  -webkit-margin-end: 0 !important; }
+
+[dir="ltr"] .x-margin--left-00{
+          margin-left: 0 !important; }
+
+[dir="rtl"] .x-margin--left-00{
+          margin-right: 0 !important; }
+
+.x-margin--left-00 {
+  -webkit-margin-start: 0 !important; }
+
+.x-margin--top-01 {
+  -webkit-margin-before: var(--x-size-base-01) !important;
+          margin-top: var(--x-size-base-01) !important; }
+
+.x-margin--bottom-01 {
+  -webkit-margin-after: var(--x-size-base-01) !important;
+          margin-bottom: var(--x-size-base-01) !important; }
+
+[dir="ltr"] .x-margin--right-01{
+          margin-right: var(--x-size-base-01) !important; }
+
+[dir="rtl"] .x-margin--right-01{
+          margin-left: var(--x-size-base-01) !important; }
+
+.x-margin--right-01 {
+  -webkit-margin-end: var(--x-size-base-01) !important; }
+
+[dir="ltr"] .x-margin--left-01{
+          margin-left: var(--x-size-base-01) !important; }
+
+[dir="rtl"] .x-margin--left-01{
+          margin-right: var(--x-size-base-01) !important; }
+
+.x-margin--left-01 {
+  -webkit-margin-start: var(--x-size-base-01) !important; }
+
+.x-margin--top-02 {
+  -webkit-margin-before: var(--x-size-base-02) !important;
+          margin-top: var(--x-size-base-02) !important; }
+
+.x-margin--bottom-02 {
+  -webkit-margin-after: var(--x-size-base-02) !important;
+          margin-bottom: var(--x-size-base-02) !important; }
+
+[dir="ltr"] .x-margin--right-02{
+          margin-right: var(--x-size-base-02) !important; }
+
+[dir="rtl"] .x-margin--right-02{
+          margin-left: var(--x-size-base-02) !important; }
+
+.x-margin--right-02 {
+  -webkit-margin-end: var(--x-size-base-02) !important; }
+
+[dir="ltr"] .x-margin--left-02{
+          margin-left: var(--x-size-base-02) !important; }
+
+[dir="rtl"] .x-margin--left-02{
+          margin-right: var(--x-size-base-02) !important; }
+
+.x-margin--left-02 {
+  -webkit-margin-start: var(--x-size-base-02) !important; }
+
+.x-margin--top-03 {
+  -webkit-margin-before: var(--x-size-base-03) !important;
+          margin-top: var(--x-size-base-03) !important; }
+
+.x-margin--bottom-03 {
+  -webkit-margin-after: var(--x-size-base-03) !important;
+          margin-bottom: var(--x-size-base-03) !important; }
+
+[dir="ltr"] .x-margin--right-03{
+          margin-right: var(--x-size-base-03) !important; }
+
+[dir="rtl"] .x-margin--right-03{
+          margin-left: var(--x-size-base-03) !important; }
+
+.x-margin--right-03 {
+  -webkit-margin-end: var(--x-size-base-03) !important; }
+
+[dir="ltr"] .x-margin--left-03{
+          margin-left: var(--x-size-base-03) !important; }
+
+[dir="rtl"] .x-margin--left-03{
+          margin-right: var(--x-size-base-03) !important; }
+
+.x-margin--left-03 {
+  -webkit-margin-start: var(--x-size-base-03) !important; }
+
+.x-margin--top-04 {
+  -webkit-margin-before: var(--x-size-base-04) !important;
+          margin-top: var(--x-size-base-04) !important; }
+
+.x-margin--bottom-04 {
+  -webkit-margin-after: var(--x-size-base-04) !important;
+          margin-bottom: var(--x-size-base-04) !important; }
+
+[dir="ltr"] .x-margin--right-04{
+          margin-right: var(--x-size-base-04) !important; }
+
+[dir="rtl"] .x-margin--right-04{
+          margin-left: var(--x-size-base-04) !important; }
+
+.x-margin--right-04 {
+  -webkit-margin-end: var(--x-size-base-04) !important; }
+
+[dir="ltr"] .x-margin--left-04{
+          margin-left: var(--x-size-base-04) !important; }
+
+[dir="rtl"] .x-margin--left-04{
+          margin-right: var(--x-size-base-04) !important; }
+
+.x-margin--left-04 {
+  -webkit-margin-start: var(--x-size-base-04) !important; }
+
+.x-margin--top-05 {
+  -webkit-margin-before: var(--x-size-base-05) !important;
+          margin-top: var(--x-size-base-05) !important; }
+
+.x-margin--bottom-05 {
+  -webkit-margin-after: var(--x-size-base-05) !important;
+          margin-bottom: var(--x-size-base-05) !important; }
+
+[dir="ltr"] .x-margin--right-05{
+          margin-right: var(--x-size-base-05) !important; }
+
+[dir="rtl"] .x-margin--right-05{
+          margin-left: var(--x-size-base-05) !important; }
+
+.x-margin--right-05 {
+  -webkit-margin-end: var(--x-size-base-05) !important; }
+
+[dir="ltr"] .x-margin--left-05{
+          margin-left: var(--x-size-base-05) !important; }
+
+[dir="rtl"] .x-margin--left-05{
+          margin-right: var(--x-size-base-05) !important; }
+
+.x-margin--left-05 {
+  -webkit-margin-start: var(--x-size-base-05) !important; }
+
+.x-margin--top-06 {
+  -webkit-margin-before: var(--x-size-base-06) !important;
+          margin-top: var(--x-size-base-06) !important; }
+
+.x-margin--bottom-06 {
+  -webkit-margin-after: var(--x-size-base-06) !important;
+          margin-bottom: var(--x-size-base-06) !important; }
+
+[dir="ltr"] .x-margin--right-06{
+          margin-right: var(--x-size-base-06) !important; }
+
+[dir="rtl"] .x-margin--right-06{
+          margin-left: var(--x-size-base-06) !important; }
+
+.x-margin--right-06 {
+  -webkit-margin-end: var(--x-size-base-06) !important; }
+
+[dir="ltr"] .x-margin--left-06{
+          margin-left: var(--x-size-base-06) !important; }
+
+[dir="rtl"] .x-margin--left-06{
+          margin-right: var(--x-size-base-06) !important; }
+
+.x-margin--left-06 {
+  -webkit-margin-start: var(--x-size-base-06) !important; }
+
+.x-margin--top-07 {
+  -webkit-margin-before: var(--x-size-base-07) !important;
+          margin-top: var(--x-size-base-07) !important; }
+
+.x-margin--bottom-07 {
+  -webkit-margin-after: var(--x-size-base-07) !important;
+          margin-bottom: var(--x-size-base-07) !important; }
+
+[dir="ltr"] .x-margin--right-07{
+          margin-right: var(--x-size-base-07) !important; }
+
+[dir="rtl"] .x-margin--right-07{
+          margin-left: var(--x-size-base-07) !important; }
+
+.x-margin--right-07 {
+  -webkit-margin-end: var(--x-size-base-07) !important; }
+
+[dir="ltr"] .x-margin--left-07{
+          margin-left: var(--x-size-base-07) !important; }
+
+[dir="rtl"] .x-margin--left-07{
+          margin-right: var(--x-size-base-07) !important; }
+
+.x-margin--left-07 {
+  -webkit-margin-start: var(--x-size-base-07) !important; }
+
+.x-margin--top-08 {
+  -webkit-margin-before: var(--x-size-base-08) !important;
+          margin-top: var(--x-size-base-08) !important; }
+
+.x-margin--bottom-08 {
+  -webkit-margin-after: var(--x-size-base-08) !important;
+          margin-bottom: var(--x-size-base-08) !important; }
+
+[dir="ltr"] .x-margin--right-08{
+          margin-right: var(--x-size-base-08) !important; }
+
+[dir="rtl"] .x-margin--right-08{
+          margin-left: var(--x-size-base-08) !important; }
+
+.x-margin--right-08 {
+  -webkit-margin-end: var(--x-size-base-08) !important; }
+
+[dir="ltr"] .x-margin--left-08{
+          margin-left: var(--x-size-base-08) !important; }
+
+[dir="rtl"] .x-margin--left-08{
+          margin-right: var(--x-size-base-08) !important; }
+
+.x-margin--left-08 {
+  -webkit-margin-start: var(--x-size-base-08) !important; }
+
+.x-margin--top-09 {
+  -webkit-margin-before: var(--x-size-base-09) !important;
+          margin-top: var(--x-size-base-09) !important; }
+
+.x-margin--bottom-09 {
+  -webkit-margin-after: var(--x-size-base-09) !important;
+          margin-bottom: var(--x-size-base-09) !important; }
+
+[dir="ltr"] .x-margin--right-09{
+          margin-right: var(--x-size-base-09) !important; }
+
+[dir="rtl"] .x-margin--right-09{
+          margin-left: var(--x-size-base-09) !important; }
+
+.x-margin--right-09 {
+  -webkit-margin-end: var(--x-size-base-09) !important; }
+
+[dir="ltr"] .x-margin--left-09{
+          margin-left: var(--x-size-base-09) !important; }
+
+[dir="rtl"] .x-margin--left-09{
+          margin-right: var(--x-size-base-09) !important; }
+
+.x-margin--left-09 {
+  -webkit-margin-start: var(--x-size-base-09) !important; }
+
+.x-margin--top-10 {
+  -webkit-margin-before: var(--x-size-base-10) !important;
+          margin-top: var(--x-size-base-10) !important; }
+
+.x-margin--bottom-10 {
+  -webkit-margin-after: var(--x-size-base-10) !important;
+          margin-bottom: var(--x-size-base-10) !important; }
+
+[dir="ltr"] .x-margin--right-10{
+          margin-right: var(--x-size-base-10) !important; }
+
+[dir="rtl"] .x-margin--right-10{
+          margin-left: var(--x-size-base-10) !important; }
+
+.x-margin--right-10 {
+  -webkit-margin-end: var(--x-size-base-10) !important; }
+
+[dir="ltr"] .x-margin--left-10{
+          margin-left: var(--x-size-base-10) !important; }
+
+[dir="rtl"] .x-margin--left-10{
+          margin-right: var(--x-size-base-10) !important; }
+
+.x-margin--left-10 {
+  -webkit-margin-start: var(--x-size-base-10) !important; }
+
+.x-margin--top-11 {
+  -webkit-margin-before: var(--x-size-base-11) !important;
+          margin-top: var(--x-size-base-11) !important; }
+
+.x-margin--bottom-11 {
+  -webkit-margin-after: var(--x-size-base-11) !important;
+          margin-bottom: var(--x-size-base-11) !important; }
+
+[dir="ltr"] .x-margin--right-11{
+          margin-right: var(--x-size-base-11) !important; }
+
+[dir="rtl"] .x-margin--right-11{
+          margin-left: var(--x-size-base-11) !important; }
+
+.x-margin--right-11 {
+  -webkit-margin-end: var(--x-size-base-11) !important; }
+
+[dir="ltr"] .x-margin--left-11{
+          margin-left: var(--x-size-base-11) !important; }
+
+[dir="rtl"] .x-margin--left-11{
+          margin-right: var(--x-size-base-11) !important; }
+
+.x-margin--left-11 {
+  -webkit-margin-start: var(--x-size-base-11) !important; }
+
+.x-margin--top-12 {
+  -webkit-margin-before: var(--x-size-base-12) !important;
+          margin-top: var(--x-size-base-12) !important; }
+
+.x-margin--bottom-12 {
+  -webkit-margin-after: var(--x-size-base-12) !important;
+          margin-bottom: var(--x-size-base-12) !important; }
+
+[dir="ltr"] .x-margin--right-12{
+          margin-right: var(--x-size-base-12) !important; }
+
+[dir="rtl"] .x-margin--right-12{
+          margin-left: var(--x-size-base-12) !important; }
+
+.x-margin--right-12 {
+  -webkit-margin-end: var(--x-size-base-12) !important; }
+
+[dir="ltr"] .x-margin--left-12{
+          margin-left: var(--x-size-base-12) !important; }
+
+[dir="rtl"] .x-margin--left-12{
+          margin-right: var(--x-size-base-12) !important; }
+
+.x-margin--left-12 {
+  -webkit-margin-start: var(--x-size-base-12) !important; }
+
+.x-margin--top-13 {
+  -webkit-margin-before: var(--x-size-base-13) !important;
+          margin-top: var(--x-size-base-13) !important; }
+
+.x-margin--bottom-13 {
+  -webkit-margin-after: var(--x-size-base-13) !important;
+          margin-bottom: var(--x-size-base-13) !important; }
+
+[dir="ltr"] .x-margin--right-13{
+          margin-right: var(--x-size-base-13) !important; }
+
+[dir="rtl"] .x-margin--right-13{
+          margin-left: var(--x-size-base-13) !important; }
+
+.x-margin--right-13 {
+  -webkit-margin-end: var(--x-size-base-13) !important; }
+
+[dir="ltr"] .x-margin--left-13{
+          margin-left: var(--x-size-base-13) !important; }
+
+[dir="rtl"] .x-margin--left-13{
+          margin-right: var(--x-size-base-13) !important; }
+
+.x-margin--left-13 {
+  -webkit-margin-start: var(--x-size-base-13) !important; }