mis-crystal-design-system 4.0.14 → 4.0.17

package/styles/mis-flex.scss

@@ -0,0 +1,321 @@
+//Flex---------------------------------------------------------------
+.flex {
+  display: flex;
+}
+
+//Flex Direction----------------------------------
+.flex-row {
+  flex-direction: row;
+}
+.flex-row-reverse {
+  flex-direction: row-reverse;
+}
+.flex-col {
+  flex-direction: column;
+}
+.flex-col-reverse {
+  flex-direction: column-reverse;
+}
+//Flex Basis-------------------------------------
+.basis-0 {
+  flex-basis: 0px;
+}
+.basis-1 {
+  flex-basis: 0.25rem; /* 4px */
+}
+.basis-2 {
+  flex-basis: 0.5rem; /* 8px */
+}
+.basis-3 {
+  flex-basis: 0.75rem; /* 12px */
+}
+.basis-4 {
+  flex-basis: 1rem; /* 16px */
+}
+.basis-5 {
+  flex-basis: 1.25rem; /* 20px */
+}
+.basis-6 {
+  flex-basis: 1.5rem; /* 24px */
+}
+.basis-7 {
+  flex-basis: 1.75rem; /* 28px */
+}
+.basis-8 {
+  flex-basis: 2rem; /* 32px */
+}
+.basis-9 {
+  flex-basis: 2.25rem; /* 36px */
+}
+.basis-10 {
+  flex-basis: 2.5rem; /* 40px */
+}
+.basis-11 {
+  flex-basis: 2.75rem; /* 44px */
+}
+.basis-12 {
+  flex-basis: 3rem; /* 48px */
+}
+.basis-14 {
+  flex-basis: 3.5rem; /* 56px */
+}
+.basis-16 {
+  flex-basis: 4rem; /* 64px */
+}
+.basis-20 {
+  flex-basis: 5rem; /* 80px */
+}
+.basis-24 {
+  flex-basis: 6rem; /* 96px */
+}
+.basis-28 {
+  flex-basis: 7rem; /* 112px */
+}
+.basis-32 {
+  flex-basis: 8rem; /* 128px */
+}
+.basis-36 {
+  flex-basis: 9rem; /* 144px */
+}
+.basis-40 {
+  flex-basis: 10rem; /* 160px */
+}
+.basis-44 {
+  flex-basis: 11rem; /* 176px */
+}
+.basis-48 {
+  flex-basis: 12rem; /* 192px */
+}
+.basis-52 {
+  flex-basis: 13rem; /* 208px */
+}
+.basis-56 {
+  flex-basis: 14rem; /* 224px */
+}
+.basis-60 {
+  flex-basis: 15rem; /* 240px */
+}
+.basis-64 {
+  flex-basis: 16rem; /* 256px */
+}
+.basis-72 {
+  flex-basis: 18rem; /* 288px */
+}
+.basis-80 {
+  flex-basis: 20rem; /* 320px */
+}
+.basis-96 {
+  flex-basis: 24rem; /* 384px */
+}
+.basis-auto {
+  flex-basis: auto;
+}
+.basis-px {
+  flex-basis: 1px;
+}
+.basis-0-5 {
+  flex-basis: 0.125rem; /* 2px */
+}
+.basis-1-5 {
+  flex-basis: 0.375rem; /* 6px */
+}
+.basis-2-5 {
+  flex-basis: 0.625rem; /* 10px */
+}
+.basis-3-5 {
+  flex-basis: 0.875rem; /* 14px */
+}
+.basis-50per {
+  flex-basis: 50%;
+}
+.basis-33per {
+  flex-basis: 33.333333%;
+}
+.basis-66per {
+  flex-basis: 66.666667%;
+}
+.basis-25per {
+  flex-basis: 25%;
+}
+.basis-75per {
+  flex-basis: 75%;
+}
+.basis-20per {
+  flex-basis: 20%;
+}
+.basis-40per {
+  flex-basis: 40%;
+}
+.basis-60per {
+  flex-basis: 60%;
+}
+.basis-80per {
+  flex-basis: 80%;
+}
+.basis-full {
+  flex-basis: 100%;
+}
+
+//Flex wrap----------------------------------------------------
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+//Flex Grow and Shrink-----------------------------------------
+.grow {
+  flex-grow: 1;
+}
+.grow-0 {
+  flex-grow: 0;
+}
+.shrink {
+  flex-shrink: 1;
+}
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+//Flex order---------------------------------------------------
+.order-1 {
+  order: 1;
+}
+.order-2 {
+  order: 2;
+}
+.order-3 {
+  order: 3;
+}
+.order-4 {
+  order: 4;
+}
+.order-5 {
+  order: 5;
+}
+.order-6 {
+  order: 6;
+}
+.order-7 {
+  order: 7;
+}
+.order-8 {
+  order: 8;
+}
+.order-9 {
+  order: 9;
+}
+.order-10 {
+  order: 10;
+}
+.order-11 {
+  order: 11;
+}
+.order-12 {
+  order: 12;
+}
+.order-first {
+  order: -9999;
+}
+.order-last {
+  order: 9999;
+}
+.order-none {
+  order: 0;
+}
+
+//Justify content-------------------------------------------------------
+.justify-normal {
+  justify-content: normal;
+}
+.justify-start {
+  justify-content: flex-start;
+}
+.justify-end {
+  justify-content: flex-end;
+}
+.justify-center {
+  justify-content: center;
+}
+.justify-between {
+  justify-content: space-between;
+}
+.justify-around {
+  justify-content: space-around;
+}
+.justify-evenly {
+  justify-content: space-evenly;
+}
+.justify-stretch {
+  justify-content: stretch;
+}
+
+//Align content----------------------------------------------------------
+.content-normal {
+  align-content: normal;
+}
+.content-center {
+  align-content: center;
+}
+.content-start {
+  align-content: flex-start;
+}
+.content-end {
+  align-content: flex-end;
+}
+.content-between {
+  align-content: space-between;
+}
+.content-around {
+  align-content: space-around;
+}
+.content-evenly {
+  align-content: space-evenly;
+}
+.content-baseline {
+  align-content: baseline;
+}
+.content-stretch {
+  align-content: stretch;
+}
+
+//Align items------------------------------------------------
+.items-start {
+  align-items: flex-start;
+}
+.items-end {
+  align-items: flex-end;
+}
+.items-center {
+  align-items: center;
+}
+.items-baseline {
+  align-items: baseline;
+}
+.items-stretch {
+  align-items: stretch;
+}
+
+//Align self---------------------------------------------------
+.self-auto {
+  align-self: auto;
+}
+.self-start {
+  align-self: flex-start;
+}
+.self-end {
+  align-self: flex-end;
+}
+.self-center {
+  align-self: center;
+}
+.self-stretch {
+  align-self: stretch;
+}
+.self-baseline {
+  align-self: baseline;
+}