@symphony-talent/component-library 2.0.0 → 3.0.0

package/projects/component-library/global.scss

@@ -0,0 +1,804 @@
+:root {
+  font-size: 16px;
+}
+// Color Palette
+$color-white: #ffffff;
+$color-black: #000000;
+$color-mdm-black: #565656;
+$color-gray: #bababa;
+$color-light-gray: #d0d0d0;
+$color-light-gray2: #d9d9d9;
+$color-st-fuchsia: #ec0a8c;
+$color-purple: #af5af9;
+$color-pink: #ff6cff;
+$color-turquoise: #00ebb5;
+$color-blue: #007dbb;
+$color-green: #00bb5b;
+$color-orange: #f57300;
+$color-yellow: #ffec37;
+$color-red: #d60000;
+$color-st-link: #eb0d8b;
+$color-night-mode: #212121;
+$color-grey-text: #999999;
+$color-transparent: transparent;
+$color-scroll-thumb: #d4d4d4;
+// End Color Palette
+// Custom Scroll
+%sfx-custom-scroll {
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+  /* Track */
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 3px $color-transparent;
+    border-radius: 30px;
+  }
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: $color-scroll-thumb;
+    border-radius: 30px;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+// End Custom Scroll
+// Typography
+@font-face {
+  font-family: "neuzeit_groteskregular";
+  src: url("global-assets/fonts/neuzeitgro-reg-webfont.woff2") format("woff2"),
+    url("global-assets/fonts/neuzeitgro-reg-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "neuzeit_grotesklight";
+  src: url("global-assets/fonts/neuzeitgro-lig-webfont.woff2") format("woff2"),
+    url("global-assets/fonts/neuzeitgro-lig-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "neuzeit_groteskbold";
+  src: url("global-assets/fonts/neuzeitgro-bol-webfont.woff2") format("woff2"),
+    url("global-assets/fonts/neuzeitgro-bol-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "neuzeit_groteskblack";
+  src: url("global-assets/fonts/neuzeitgro-bla-webfont.woff2") format("woff2"),
+    url("global-assets/fonts/neuzeitgro-bla-webfont.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "neuzeit_grotesk_t_otBlkCn";
+  src: url("global-assets/fonts/neuzeit-grotesk-t-ot-black-condensed_32179-webfont.woff2")
+      format("woff2"),
+    url("global-assets/fonts/neuzeit-grotesk-t-ot-black-condensed_32179-webfont.woff")
+      format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "neuzeit_grotesk_t_otBlkXCn";
+  src: url("global-assets/fonts/neuzeit-grotesk-t-ot-black-extra-condensed_32180-webfont.woff2")
+      format("woff2"),
+    url("global-assets/fonts/neuzeit-grotesk-t-ot-black-extra-condensed_32180-webfont.woff")
+      format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+$font-12: 0.75rem;
+$font-14: 0.875rem;
+$font-18: 1.125rem;
+$font-24: 1.5rem;
+$font-30: 1.875rem;
+$font-40: 2.5rem;
+$font-46: 2.875rem;
+$font-56: 3.5rem;
+$font-reg: "neuzeit_groteskregular", sans-serif;
+$font-light: "neuzeit_grotesklight", sans-serif;
+$font-bold: "neuzeit_groteskbold", sans-serif;
+$font-black: "neuzeit_groteskblack", sans-serif;
+$font-cond-black: "neuzeit_grotesk_t_otBlkCn", sans-serif;
+$font-sfxicon: "sfxicons", sans-serif;
+// 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;
+// Iconography
+@import "global-assets/iconography/iconography.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";
+.ag-theme-alpine {
+  @include ag-theme-alpine();
+}
+body {
+  @extend %sfx-custom-scroll;
+  font-family: $font-reg !important;
+  line-height: 20px;
+  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;
+    }
+  }
+  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 {
+  .ag-body-viewport {
+    scrollbar-width: normal;
+    scrollbar-color: $color-scroll-thumb $color-transparent;
+    &::-webkit-scrollbar {
+      width: 12px;
+    }
+    /* Track */
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 3px $color-transparent;
+      border-radius: 30px;
+    }
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      background: $color-scroll-thumb;
+      border-radius: 30px;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+  font-family: $font-reg;
+  .ag-root-wrapper {
+    border-color: $color-white;
+    border-radius: 0px;
+  }
+  .ag-row-selected {
+    background-color: $color-white;
+  }
+  // Grid Header
+  .ag-header {
+    font-size: $font-14;
+    font-family: $font-bold;
+    background-color: $color-white;
+    .ag-header-cell-text {
+      color: $color-black;
+    }
+  }
+  .ag-row-odd {
+    background-color: $color-white;
+  }
+  // End Grid Header
+  // Checkbox in Grid
+  .ag-checkbox-input-wrapper {
+    border: 2px solid $color-black;
+    border-radius: 4px;
+    box-shadow: none !important;
+    &::after {
+      content: "";
+    }
+  }
+  .ag-checkbox-input-wrapper.ag-checked {
+    &::after {
+      content: "";
+      top: 1px;
+      left: 0;
+      width: 5px;
+      height: 10px;
+      border-top: 0px solid transparent;
+      border-left: 0px solid transparent;
+      border-bottom: 2px solid $color-black;
+      border-right: 2px solid $color-black;
+      z-index: 1;
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+      -webkit-transform: rotateZ(37deg) scale(1);
+      transform: rotateZ(37deg) scale(1);
+      -webkit-transform-origin: 100% 100%;
+      transform-origin: 100% 100%;
+    }
+  }
+  .ag-checkbox-input-wrapper.ag-indeterminate {
+    &::after {
+      content: "";
+      top: 5px;
+      left: 2px;
+      width: 8px;
+      height: 0px;
+      border-top: 0px solid transparent;
+      border-left: 0px solid transparent;
+      border-bottom: 2.5px solid $color-black;
+      z-index: 1;
+      -webkit-backface-visibility: hidden;
+      backface-visibility: hidden;
+    }
+  }
+  // End Checkbox in Grid
+  .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) {
+    border-right: none;
+    border-color: transparent;
+  }
+  .ag-pinned-left-header {
+    border-right: none;
+  }
+  .ag-center-cols-container {
+    .ag-cell {
+      border-color: transparent !important;
+      padding: 20px 17px 20px 17px;
+      font-size: 0.875rem;
+      color: $color-black;
+    }
+  }
+  .ag-row-hover {
+    background-color: $color-white;
+  }
+}
+// grid rows
+.ag-row {
+  z-index: 1;
+  .ag-row div:first-child {
+    font-family: "neuzeit_groteskbold";
+  }
+  .ag-cell {
+    .more-options {
+      display: none;
+    }
+    .sfx-icon-show-password {
+      display: none;
+    }
+    &:last-child {
+      overflow: visible;
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+.ag-row.ag-row-hover {
+  .ag-cell {
+    .more-options {
+      display: inline-block;
+      float: right;
+      .dropdown-menu::before {
+        top: -24px;
+      }
+    }
+    .sfx-icon-show-password {
+      display: inline-block;
+      color: $color-white;
+    }
+  }
+}
+.ag-row.ag-row-focus {
+  z-index: 2;
+}
+
+// End Grid
+.circle-bg {
+  color: $color-white;
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  line-height: 40px;
+  display: block;
+  text-align: center;
+  &.green {
+    background: $color-green;
+  }
+  &.orange {
+    background: $color-orange;
+  }
+  &.red {
+    background: $color-red;
+  }
+}
+.circle-border {
+  border: 1px solid $color-black;
+  color: $color-black;
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  line-height: 40px;
+  display: block;
+  text-align: center;
+}
+// Spinner
+@-webkit-keyframes sfxspin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes sfxspin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+// End Spinner