@symphony-talent/component-library 3.0.0 → 3.1.0

package/projects/component-library/global.scss

@@ -117,7 +117,7 @@ $space-40: 2.5rem;
 $space-50: 3.125rem;
 $space-75: 4.688rem;
 // Iconography
-@import "global-assets/iconography/iconography.css";
+@import "global-assets/iconography/library-icons.css";
 // End Iconography
 @import "node_modules/ag-grid-community/src/styles/ag-grid.scss";
 @import "node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin.scss";
@@ -131,483 +131,485 @@ body {
   overflow-x: hidden;
   background: $color-white;
   color: $color-black;
-  a {
-    font-size: $font-14;
-    color: $color-st-link;
-    text-decoration: none;
-    &:hover {
-      -webkit-transition: 0.3s ease-in-out;
-      -moz-transition: 0.3s ease-in-out;
-      -o-transition: 0.3s ease-in-out;
-      transition: 0.3s ease-in-out;
-      outline: 0 !important;
+  .sfx {
+    a {
+      font-size: $font-14;
+      color: $color-st-link;
+      text-decoration: none;
+      &:hover {
+        -webkit-transition: 0.3s ease-in-out;
+        -moz-transition: 0.3s ease-in-out;
+        -o-transition: 0.3s ease-in-out;
+        transition: 0.3s ease-in-out;
+        outline: 0 !important;
+      }
     }
+    p {
+      font-size: $font-14;
+      font-family: $font-reg;
+    }
+    h5 {
+      font-size: $font-14;
+      font-family: $font-bold;
+    }
+    h4 {
+      font-size: $font-24;
+      font-family: $font-bold;
+    }
+    h3 {
+      font-size: $font-30;
+      font-family: $font-bold;
+    }
+    h2 {
+      font-size: $font-46;
+      font-family: $font-black;
+    }
+    h1 {
+      font-size: $font-56;
+      font-family: $font-black;
+    }
+    // End Typography
+    // Utilities
+    // Fonts
+    .sfx-font12 {
+      font-size: $font-12;
+    }
+    .sfx-font14 {
+      font-size: $font-14;
+    }
+    .sfx-font18 {
+      font-size: $font-18;
+    }
+    .sfx-font24 {
+      font-size: $font-24;
+    }
+    .sfx-font30 {
+      font-size: $font-30;
+    }
+    .sfx-font-40 {
+      font-size: $font-40;
+    }
+    .sfx-font46 {
+      font-size: $font-46;
+    }
+    .sfx-font56 {
+      font-size: $font-56;
+    }
+    .sfx-font400 {
+      font-weight: 400;
+    }
+    .sfx-font600 {
+      font-weight: 600;
+    }
+    .sfx-font700 {
+      font-weight: 600;
+    }
+    .sfx-font-light {
+      font-family: $font-light;
+    }
+    .sfx-font-bold {
+      font-family: $font-bold;
+    }
+    .sfx-font-black {
+      font-family: $font-black;
+    }
+    // End Fonts
+    // Color
+    .sfx-txt-white {
+      color: $color-white;
+    }
+    .sfx-txt-black {
+      color: $color-black;
+    }
+    .sfx-txt-mdm-black {
+      color: $color-mdm-black;
+    }
+    .sfx-txt-gray {
+      color: $color-gray;
+    }
+    .sfx-txt-light-gray {
+      color: $color-light-gray;
+    }
+    .sfx-txt-light-gray2 {
+      color: $color-light-gray2;
+    }
+    .sfx-txt-fuchsia {
+      color: $color-st-fuchsia;
+    }
+    .sfx-txt-purple {
+      color: $color-purple;
+    }
+    .sfx-txt-pink {
+      color: $color-pink;
+    }
+    .sfx-txt-turq {
+      color: $color-turquoise;
+    }
+    .sfx-txt-blue {
+      color: $color-blue;
+    }
+    .sfx-txt-green {
+      color: $color-green;
+    }
+    .sfx-txt-orange {
+      color: $color-orange;
+    }
+    .sfx-txt-yellow {
+      color: $color-yellow;
+    }
+    .sfx-txt-red {
+      color: $color-red;
+    }
+    .sfx-link {
+      color: $color-st-link;
+    }
+    // Background Color
+    .sfx-bg-black {
+      background: $color-black;
+    }
+    .sfx-bg-white {
+      background: $color-white;
+    }
+    // End Background Color
+    // End Color
+  
+    // Padding
+    .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;
+    }
+    // End Padding
+    // 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-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-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
+    // Margin
+    .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
+    // 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 Padding bottom
+    // Padding 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 Paddimargin
+    // Padding 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 Padding right
+    // End Spacing
+    // Border
+    .sfx-border-0 {
+      border: 0;
+    }
+    .sfx-border-top-0 {
+      border-top: 0;
+    }
+    .sfx-border-bottom-0 {
+      border-bottom: 0;
+    }
+    .sfx-border-left-0 {
+      border-left: 0;
+    }
+    .sfx-border-right-0 {
+      border-right: 0;
+    }
+    .sfx-border-gray-1 {
+      border: 1px solid $color-light-gray2;
+    }
+    .sfx-border-black-1 {
+      border: 1px solid $color-black;
+    }
+    .sfx-border-bottom-gray-1 {
+      border-bottom: 1px solid $color-light-gray2;
+    }
+    .sfx-border-bottom-black-1 {
+      border-bottom: 1px solid $color-black;
+    }
+    .sfx-border-bottom-mdm-black-1 {
+      border-bottom: 1px solid $color-mdm-black;
+    }
+    .sfx-border-bottom-black-5 {
+      border-bottom: 5px solid $color-black;
+    }
+    .sfx-border-bottom-white-5 {
+      border-bottom: 5px solid $color-white;
+    }
+    .sfx-border-top-gray-1 {
+      border-top: 1px solid $color-light-gray2;
+    }
+    .sfx-border-top-black-1 {
+      border-top: 1px solid $color-black;
+    }
+    .sfx-border-top-black-5 {
+      border-top: 5px solid $color-black;
+    }
+    .sfx-border-radius-0 {
+      border-radius: 0;
+    }
+    // End Border
+    // Display
+    .sfx-d-none {
+      display: none;
+    }
+    .sfx-d-block {
+      display: block;
+    }
+    .sfx-d-inline-block {
+      display: inline-block;
+    }
+    .sfx-d-flex {
+      display: flex;
+    }
+    .sfx-d-table {
+      display: table;
+    }
+    .sfx-d-grid {
+      display: grid;
+    }
+    // End Display
+    .sfx-wid-100 {
+      width: 100%;
+    }
+    .sfx-wid-100px {
+      width: 100px;
+    }
+    // Position
+    .sfx-position-relative {
+      position: relative;
+    }
+    .sfx-position-absolute {
+      position: absolute;
+    }
+    .sfx-position-fixed {
+      position: fixed;
+    }
+    .sfx-position-sticky {
+      position: sticky;
+    }
+    // End Position
+    // Helper Classes
+    .sfx-cursor-pointer {
+      cursor: pointer;
+    }
+    // End Helper Classes
+    // End Utilities
   }
-  p {
-    font-size: $font-14;
-    font-family: $font-reg;
-  }
-  h5 {
-    font-size: $font-14;
-    font-family: $font-bold;
-  }
-  h4 {
-    font-size: $font-24;
-    font-family: $font-bold;
-  }
-  h3 {
-    font-size: $font-30;
-    font-family: $font-bold;
-  }
-  h2 {
-    font-size: $font-46;
-    font-family: $font-black;
-  }
-  h1 {
-    font-size: $font-56;
-    font-family: $font-black;
-  }
-  // End Typography
-  // Utilities
-  // Fonts
-  .sfx-font12 {
-    font-size: $font-12;
-  }
-  .sfx-font14 {
-    font-size: $font-14;
-  }
-  .sfx-font18 {
-    font-size: $font-18;
-  }
-  .sfx-font24 {
-    font-size: $font-24;
-  }
-  .sfx-font30 {
-    font-size: $font-30;
-  }
-  .sfx-font-40 {
-    font-size: $font-40;
-  }
-  .sfx-font46 {
-    font-size: $font-46;
-  }
-  .sfx-font56 {
-    font-size: $font-56;
-  }
-  .sfx-font400 {
-    font-weight: 400;
-  }
-  .sfx-font600 {
-    font-weight: 600;
-  }
-  .sfx-font700 {
-    font-weight: 600;
-  }
-  .sfx-font-light {
-    font-family: $font-light;
-  }
-  .sfx-font-bold {
-    font-family: $font-bold;
-  }
-  .sfx-font-black {
-    font-family: $font-black;
-  }
-  // End Fonts
-  // Color
-  .sfx-txt-white {
-    color: $color-white;
-  }
-  .sfx-txt-black {
-    color: $color-black;
-  }
-  .sfx-txt-mdm-black {
-    color: $color-mdm-black;
-  }
-  .sfx-txt-gray {
-    color: $color-gray;
-  }
-  .sfx-txt-light-gray {
-    color: $color-light-gray;
-  }
-  .sfx-txt-light-gray2 {
-    color: $color-light-gray2;
-  }
-  .sfx-txt-fuchsia {
-    color: $color-st-fuchsia;
-  }
-  .sfx-txt-purple {
-    color: $color-purple;
-  }
-  .sfx-txt-pink {
-    color: $color-pink;
-  }
-  .sfx-txt-turq {
-    color: $color-turquoise;
-  }
-  .sfx-txt-blue {
-    color: $color-blue;
-  }
-  .sfx-txt-green {
-    color: $color-green;
-  }
-  .sfx-txt-orange {
-    color: $color-orange;
-  }
-  .sfx-txt-yellow {
-    color: $color-yellow;
-  }
-  .sfx-txt-red {
-    color: $color-red;
-  }
-  .sfx-link {
-    color: $color-st-link;
-  }
-  // Background Color
-  .sfx-bg-black {
-    background: $color-black;
-  }
-  .sfx-bg-white {
-    background: $color-white;
-  }
-  // End Background Color
-  // End Color
-
-  // Padding
-  .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;
-  }
-  // End Padding
-  // 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-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-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
-  // Margin
-  .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
-  // 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 Padding bottom
-  // Padding 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 Paddimargin
-  // Padding 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 Padding right
-  // End Spacing
-  // Border
-  .sfx-border-0 {
-    border: 0;
-  }
-  .sfx-border-top-0 {
-    border-top: 0;
-  }
-  .sfx-border-bottom-0 {
-    border-bottom: 0;
-  }
-  .sfx-border-left-0 {
-    border-left: 0;
-  }
-  .sfx-border-right-0 {
-    border-right: 0;
-  }
-  .sfx-border-gray-1 {
-    border: 1px solid $color-light-gray2;
-  }
-  .sfx-border-black-1 {
-    border: 1px solid $color-black;
-  }
-  .sfx-border-bottom-gray-1 {
-    border-bottom: 1px solid $color-light-gray2;
-  }
-  .sfx-border-bottom-black-1 {
-    border-bottom: 1px solid $color-black;
-  }
-  .sfx-border-bottom-mdm-black-1 {
-    border-bottom: 1px solid $color-mdm-black;
-  }
-  .sfx-border-bottom-black-5 {
-    border-bottom: 5px solid $color-black;
-  }
-  .sfx-border-bottom-white-5 {
-    border-bottom: 5px solid $color-white;
-  }
-  .sfx-border-top-gray-1 {
-    border-top: 1px solid $color-light-gray2;
-  }
-  .sfx-border-top-black-1 {
-    border-top: 1px solid $color-black;
-  }
-  .sfx-border-top-black-5 {
-    border-top: 5px solid $color-black;
-  }
-  .sfx-border-radius-0 {
-    border-radius: 0;
-  }
-  // End Border
-  // Display
-  .sfx-d-none {
-    display: none;
-  }
-  .sfx-d-block {
-    display: block;
-  }
-  .sfx-d-inline-block {
-    display: inline-block;
-  }
-  .sfx-d-flex {
-    display: flex;
-  }
-  .sfx-d-table {
-    display: table;
-  }
-  .sfx-d-grid {
-    display: grid;
-  }
-  // End Display
-  .sfx-wid-100 {
-    width: 100%;
-  }
-  .sfx-wid-100px {
-    width: 100px;
-  }
-  // Position
-  .sfx-position-relative {
-    position: relative;
-  }
-  .sfx-position-absolute {
-    position: absolute;
-  }
-  .sfx-position-fixed {
-    position: fixed;
-  }
-  .sfx-position-sticky {
-    position: sticky;
-  }
-  // End Position
-  // Helper Classes
-  .sfx-cursor-pointer {
-    cursor: pointer;
-  }
-  // End Helper Classes
-  // End Utilities
 }
 // Grid
 .ag-theme-alpine {