@koech/esm-core 8.0.0

package/packages/framework/esm-styleguide/src/_overrides.scss

@@ -0,0 +1,750 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use 'vars' as *;
+
+/* UI Shell Header */
+.cds--header {
+  @include brand-01(background-color);
+  border-bottom: none;
+}
+
+.cds--header__action:hover {
+  @include brand-02(background-color);
+}
+
+.cds--header__action--active {
+  @include brand-02(background-color);
+  @include brand-02(border-color);
+}
+
+.cds--header-panel {
+  @include brand-02(background-color);
+}
+
+.cds--header__menu-trigger > svg,
+.cds--header__menu-trigger:hover > svg,
+.cds--btn.cds--btn--icon-only.cds--header__action svg,
+.cds--btn.cds--btn--icon-only.cds--header__action:hover svg {
+  fill: white;
+}
+
+.cds--header-panel--expanded {
+  border-left: none;
+  border-right: none;
+}
+
+.cds--side-nav__overlay-active {
+  display: none;
+}
+
+/* Side nav */
+.cds--side-nav {
+  overflow: auto;
+  z-index: 0;
+}
+
+/* Tooltip */
+.cds--tooltip--definition .cds--tooltip__trigger {
+  border-bottom: none;
+}
+
+/* Tooltips presently have a higher stacking context than modals, which leads to tooltip buttons rendering above modal content */
+.cds--body--with-modal-open .cds--tooltip {
+  z-index: 0;
+}
+
+/* Modals */
+.cds--modal-close {
+  background-color: rgba(0, 0, 0, 0) !important;
+}
+
+.cds--modal-close:hover {
+  background-color: colors.$gray-10-hover !important;
+}
+
+/* Content Switcher */
+.cds--content-switcher:not(.darkThemeSwitch) {
+  & > :first-child {
+    border-bottom-left-radius: layout.$spacing-02;
+    border-right: unset !important;
+    border-top-left-radius: layout.$spacing-02;
+
+    [aria-selected='false'] {
+      border-left: 0.0625rem solid colors.$blue-30 !important;
+    }
+  }
+
+  & > :last-child {
+    border-bottom-right-radius: layout.$spacing-02;
+    border-left: unset !important;
+    border-top-right-radius: layout.$spacing-02;
+
+    [aria-selected='false'] {
+      border-right: 0.0625rem solid colors.$blue-30 !important;
+    }
+  }
+}
+
+.cds--content-switcher-btn:not(.darkThemeSwitch) {
+  background-color: $ui-02;
+  border: none;
+  border-top: 1px solid colors.$blue-30;
+  border-bottom: 1px solid colors.$blue-30;
+
+  &:hover {
+    background-color: colors.$gray-10-hover !important;
+  }
+
+  &::after {
+    background-color: transparent !important;
+  }
+
+  &.cds--btn--primary {
+    background-color: unset;
+  }
+
+  &:focus {
+    box-shadow: none;
+  }
+
+  &::before {
+    height: 100%;
+    z-index: 0;
+  }
+
+  &.cds--content-switcher--selected {
+    border: 1px solid colors.$blue-60 !important;
+    background-color: colors.$blue-10 !important;
+    color: colors.$blue-60 !important;
+
+    svg {
+      fill: colors.$blue-60 !important;
+    }
+
+    &::after {
+      background-color: colors.$blue-10;
+      box-shadow: none !important;
+    }
+
+    &::before {
+      background-color: transparent;
+    }
+
+    &:disabled {
+      border: 0 !important;
+    }
+  }
+}
+
+.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
+  box-shadow: none !important;
+}
+
+.cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
+  box-shadow: none !important;
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn {
+  box-shadow: none !important;
+}
+
+.cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn {
+  box-shadow: none !important;
+}
+
+.cds--content-switcher-popover--selected:has(+ .cds--content-switcher-popover__wrapper .cds--content-switcher-btn:hover)
+  .cds--content-switcher-btn::before,
+.cds--content-switcher-popover__wrapper:hover
+  + .cds--content-switcher-popover__wrapper
+  .cds--content-switcher--selected::before {
+  border-bottom: none !important;
+  border-top: none !important;
+}
+
+.cds--content-switcher-btn.cds--content-switcher--selected:has(+ .cds--content-switcher-btn:hover)::before {
+  border-bottom: none !important;
+  border-top: none !important;
+}
+
+.cds--content-switcher-btn:hover + .cds--content-switcher-btn.cds--content-switcher--selected::before {
+  border-bottom: none !important;
+  border-top: none !important;
+}
+
+.cds--content-switcher--icon-only
+  .cds--content-switcher-popover__wrapper:first-child
+  .cds--content-switcher-btn:not(.darkThemeSwitch) {
+  border-left: unset;
+}
+
+.cds--content-switcher--icon-only
+  .cds--content-switcher-popover__wrapper:last-child
+  .cds--content-switcher-btn:not(.darkThemeSwitch) {
+  border-right: unset;
+}
+
+.cds--content-switcher:not(.cds--content-switcher--icon-only)
+  .cds--content-switcher-btn:not(.darkThemeSwitch):first-child {
+  border-left: 0.0625rem solid colors.$blue-30;
+}
+
+.cds--content-switcher:not(.cds--content-switcher--icon-only)
+  .cds--content-switcher-btn:not(.darkThemeSwitch):last-child {
+  border-right: 0.0625rem solid colors.$blue-30;
+}
+
+/* Tabs */
+.cds--tabs--scrollable .cds--tabs--scrollable__nav-item--selected .cds--tabs--scrollable__nav-link,
+.cds--tabs--scrollable .cds--tabs--scrollable__nav-item--selected .cds--tabs--scrollable__nav-link:active,
+.cds--tabs--scrollable .cds--tabs--scrollable__nav-item--selected .cds--tabs--scrollable__nav-link:focus {
+  border-bottom: 2px solid var(--brand-03);
+}
+
+.cds--tabs--scrollable.cds--tabs--scrollable--container
+  .cds--tabs--scrollable__nav-item--selected
+  .cds--tabs--scrollable__nav-link {
+  box-shadow: inset 0 2px 0 0 var(--brand-03);
+}
+
+.cds--tabs--scrollable .cds--tabs--scrollable__nav-link:active,
+.cds--tabs--scrollable .cds--tabs--scrollable__nav-link:focus {
+  outline: 2px solid var(--brand-03);
+}
+
+/* DataTables */
+.cds--data-table {
+  td,
+  th,
+  .cds--table-header-label {
+    text-align: start;
+  }
+}
+
+.cds--data-table-container {
+  background: $ui-02;
+  position: relative;
+}
+
+.cds--table-toolbar {
+  position: absolute;
+  top: 2px;
+}
+
+.cds--data-table-header {
+  padding: layout.$spacing-04;
+  text-align: start;
+}
+
+.cds--data-table-header__title {
+  font-size: layout.$spacing-05;
+  font-weight: 600;
+  color: $text-02;
+}
+
+.cds--data-table thead,
+.cds--data-table tr,
+.cds--data-table td,
+.cds--data-table th,
+.cds--data-table--sort th,
+.cds--data-table--sort th .cds--table-sort__flex {
+  min-height: unset;
+  color: $text-02;
+}
+
+/* Alternate background and border colors for zebra styled table rows */
+
+// Datatables without expansion
+.cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(odd) td {
+  background-color: $ui-02;
+  border-bottom: 1px solid $ui-03;
+}
+
+.cds--data-table--zebra tbody tr:not(.cds--parent-row):nth-child(2n) td {
+  background-color: $ui-01;
+  border-bottom: 1px solid $ui-03;
+  border-top: 1px solid $ui-03;
+}
+
+// Datatables with expansion
+.cds--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 1) td {
+  background-color: $ui-02;
+  border-bottom: 1px solid $ui-03;
+  border-top: 1px solid $ui-03;
+}
+
+.cds--data-table--zebra tbody tr[data-parent-row]:nth-child(4n + 3) td {
+  background-color: $ui-01;
+  border-bottom: 1px solid $ui-03;
+}
+
+/* Buttons */
+.cds--btn--primary,
+.cds--btn--primary:active,
+.cds--btn--tertiary:hover,
+.cds--btn--tertiary:active,
+.cds--btn--tertiary:focus {
+  @include brand-03(background-color);
+}
+
+.cds--btn--primary:hover {
+  @include brand-02(background-color);
+}
+
+.cds--btn--tertiary {
+  @include brand-03(color);
+}
+
+.cds--btn--tertiary,
+.cds--btn--primary:focus,
+.cds--btn--tertiary:focus {
+  @include brand-03(border-color);
+}
+
+.cds--btn--tertiary:hover,
+.cds--btn--tertiary:active,
+.cds--btn--tertiary:focus {
+  color: $ui-02;
+}
+
+// Override right padding applied to icon-only ghost buttons
+.cds--btn--ghost.cds--btn--icon-only {
+  padding-right: 0 !important;
+}
+
+/* Overflow menu */
+.cds--overflow-menu--flip {
+  &.cds--overflow-menu-options {
+    background-color: $openmrs-background-grey;
+    left: -6.025rem;
+    min-width: 12.5rem;
+    top: layout.$spacing-09;
+  }
+}
+
+.cds--overflow-menu--flip {
+  &.cds--overflow-menu-options[data-floating-menu-direction='bottom'] {
+    &::after {
+      top: 0;
+      height: 0;
+      width: 0;
+      left: 0;
+    }
+  }
+}
+
+/* Pagination */
+.cds--pagination-nav__page:not(.cds--pagination-nav__page--direction) {
+  &::after {
+    @include brand-03(background-color);
+  }
+}
+
+.cds--pagination-nav__page .cds--pagination-nav__page--active,
+.cds--pagination-nav__page:focus {
+  outline: 2px solid var(--brand-03);
+}
+
+/* Data table overflow menu */
+.cds--data-table--xs .cds--overflow-menu {
+  height: layout.$spacing-07;
+}
+
+.cds--data-table--sm .cds--overflow-menu {
+  height: layout.$spacing-08;
+}
+
+.cds--data-table--sm .cds--overflow-menu--sm {
+  height: layout.$spacing-07;
+}
+
+.cds--data-table--xs .cds--overflow-menu {
+  max-height: layout.$spacing-07;
+}
+
+.cds--data-table-container {
+  padding-top: 0;
+}
+
+.cds--data-table td.cds--table-column-menu {
+  width: layout.$spacing-08;
+  vertical-align: top;
+  padding-right: 0;
+}
+
+.cds--data-table--lg td.cds--table-column-menu {
+  width: layout.$spacing-09;
+}
+
+.cds--overflow-menu {
+  background-color: unset;
+}
+
+/* Search inputs */
+.cds--search-input:focus {
+  outline: 2px solid colors.$orange-40;
+}
+
+.cds--search-input:focus ~ .cds--search-close:hover {
+  outline: none;
+}
+
+/* Radio buttons */
+.cds--radio-button-group--vertical .cds--radio-button-wrapper:not(:last-of-type) {
+  margin-bottom: 0;
+}
+
+/* Breadcrumbs */
+.cds--breadcrumb-item {
+  &,
+  &:after {
+    margin-left: unset;
+    margin-right: unset;
+  }
+
+  &:after,
+  &:last-child:after {
+    margin-inline: layout.$spacing-03;
+  }
+}
+
+/* Preloader */
+.cds--inline-loading__animation {
+  margin-inline: layout.$spacing-03;
+}
+
+/* RTL overrides */
+html[dir='rtl'] {
+  .cds--header {
+    & > a:first-child {
+      & > div {
+        margin-left: 0;
+        margin-right: layout.$spacing-05;
+      }
+    }
+  }
+
+  .cds--header__name {
+    padding-inline: layout.$spacing-05 layout.$spacing-07;
+  }
+
+  .cds--header-panel--expanded {
+    left: 0;
+    right: auto;
+  }
+
+  .cds--btn--tertiary {
+    padding: calc(0.875rem - 3px) 15px calc(0.875rem - 3px) 63px;
+
+    svg {
+      left: layout.$spacing-05;
+      right: unset;
+      transform: scale(-1, 1);
+    }
+  }
+
+  .cds--btn--secondary {
+    svg {
+      left: layout.$spacing-05;
+      right: unset;
+      transform: scale(-1, 1);
+    }
+  }
+
+  .cds--btn--ghost {
+    svg {
+      margin-right: layout.$spacing-03;
+      margin-left: unset;
+      transform: scale(-1, 1);
+    }
+  }
+
+  .cds--btn--ghost.cds--btn--icon-only {
+    // Override left padding applied to icon-only ghost buttons
+    padding-left: 0 !important;
+
+    svg {
+      margin: unset;
+    }
+  }
+
+  .cds--btn--primary {
+    padding: calc(0.875rem - 3px) 15px calc(0.875rem - 3px) 63px;
+
+    svg {
+      left: layout.$spacing-05;
+      right: unset;
+      transform: scale(-1, 1);
+    }
+  }
+
+  .cds--btn--primary.cds--btn--icon-only {
+    padding: unset;
+  }
+
+  .cds--accordion__heading {
+    & > svg {
+      margin: 2px 0 0 layout.$spacing-05;
+    }
+
+    p {
+      text-align: right;
+    }
+  }
+
+  .cds--select__page-number {
+    .cds--select-input {
+      padding: 0 layout.$spacing-05 0 2.25rem;
+    }
+  }
+
+  /* RTL Content Switcher */
+  .cds--content-switcher {
+    & > :first-child {
+      border-bottom-right-radius: layout.$spacing-02 !important;
+      border-left: unset !important;
+      border-right: unset !important;
+      border-top-right-radius: layout.$spacing-02 !important;
+
+      [aria-selected='false'] {
+        border-right: 0.0625rem solid colors.$blue-30;
+        border-left: unset !important;
+      }
+    }
+
+    & > :last-child {
+      border-bottom-left-radius: layout.$spacing-02 !important;
+      border-top-left-radius: layout.$spacing-02 !important;
+
+      [aria-selected='false'] {
+        border-left: 0.0625rem solid colors.$blue-30;
+        border-right: unset !important;
+      }
+    }
+
+    .cds--btn--icon-only {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .cds--content-switcher-btn {
+    &::after {
+      background-color: transparent !important;
+    }
+
+    &.cds--btn--primary {
+      background-color: unset;
+
+      &:hover {
+        background-color: colors.$gray-10-hover;
+      }
+    }
+
+    &::before {
+      height: 100%;
+      z-index: 0;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    &.cds--content-switcher--selected {
+      border: 1px solid colors.$blue-60 !important;
+      background-color: colors.$blue-10 !important;
+      color: colors.$blue-60 !important;
+
+      svg {
+        fill: colors.$blue-60 !important;
+      }
+
+      &::after {
+        background-color: colors.$blue-10;
+      }
+
+      &::before {
+        background-color: transparent;
+      }
+
+      &:disabled {
+        border: 0 !important;
+      }
+    }
+  }
+
+  .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn {
+    border-bottom-right-radius: layout.$spacing-02 !important;
+    border-top-right-radius: layout.$spacing-02 !important;
+    border-top-left-radius: unset !important;
+    border-bottom-left-radius: unset !important;
+  }
+
+  .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn {
+    border-bottom-left-radius: layout.$spacing-02 !important;
+    border-top-left-radius: layout.$spacing-02 !important;
+    border-top-right-radius: unset !important;
+    border-bottom-right-radius: unset !important;
+  }
+
+  .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:first-child .cds--content-switcher-btn {
+    border-left: unset;
+  }
+
+  .cds--content-switcher--icon-only .cds--content-switcher-popover__wrapper:last-child .cds--content-switcher-btn {
+    border-right: unset;
+  }
+
+  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:first-child {
+    border-right: 0.0625rem solid colors.$blue-30;
+    border-bottom-left-radius: unset !important;
+    border-top-left-radius: unset !important;
+  }
+
+  .cds--content-switcher:not(.cds--content-switcher--icon-only) .cds--content-switcher-btn:last-child {
+    border-left: 0.0625rem solid colors.$blue-30;
+    border-bottom-right-radius: unset !important;
+    border-top-right-radius: unset !important;
+  }
+
+  .cds--date-picker-input__wrapper {
+    svg {
+      left: layout.$spacing-05;
+      right: unset;
+    }
+  }
+
+  .cds--list-box__field {
+    padding: 0 layout.$spacing-05 0 layout.$spacing-09;
+
+    .cds--list-box__menu-icon {
+      left: layout.$spacing-05;
+      right: unset;
+      transform: scale(-1, 1);
+    }
+  }
+
+  .cds--select-input__wrapper {
+    select {
+      padding: 0 layout.$spacing-05 0 layout.$spacing-09;
+    }
+
+    svg {
+      right: unset;
+      left: layout.$spacing-05;
+    }
+  }
+
+  .cds--search-magnifier {
+    svg {
+      left: unset;
+      right: layout.$spacing-05;
+    }
+  }
+
+  .cds--search-close {
+    right: unset;
+    left: 0;
+  }
+
+  .cds--search--sm {
+    .cds--search-magnifier {
+      svg {
+        left: unset;
+        right: layout.$spacing-03;
+      }
+    }
+  }
+
+  .cds--tile {
+    & > div:first-child {
+      h4 {
+        text-align: right;
+      }
+    }
+  }
+
+  .active-left-nav-link {
+    border-right: layout.$spacing-02 solid var(--brand-01);
+    border-left: unset !important;
+  }
+
+  .omrs-breakpoint-gt-tablet {
+    main {
+      & > section {
+        margin-left: unset;
+        margin-right: var(--omrs-sidenav-width);
+
+        nav {
+          left: calc(100vw - var(--omrs-sidenav-width));
+          border-left: 1px solid #e0e0e0;
+          border-right: unset;
+        }
+      }
+    }
+  }
+
+  .omrs-breakpoint-lt-desktop {
+    .cds--side-nav {
+      left: unset !important;
+    }
+  }
+
+  .form-container {
+    .tab-container {
+      .tab {
+        & > button {
+          text-align: right;
+        }
+
+        .active {
+          border-left: unset !important;
+          border-right: layout.$spacing-03 solid #009d9a;
+        }
+
+        .enabled {
+          border-left: unset !important;
+          border-right: layout.$spacing-03 solid #9ef0f0;
+        }
+      }
+    }
+
+    .tab-content {
+      .pane {
+        padding-inline: 0;
+
+        & > h4 {
+          padding-left: unset;
+          padding-inline-start: layout.$spacing-05;
+        }
+      }
+    }
+
+    .cds--accordion__title {
+      text-align: start;
+    }
+
+    .cds--accordion__content {
+      padding-inline: layout.$spacing-05;
+
+      .cds--text-input,
+      .cds--text-area {
+        box-sizing: border-box;
+      }
+    }
+
+    .question-area {
+      min-width: unset;
+    }
+  }
+}
+
+// This is to override the green border and background color which we apply to tertiary buttons. Since this in the Notification carbon uses blue.
+.cds--actionable-notification__action-button.cds--btn--tertiary {
+  background-color: transparent;
+  border: 1px solid #0f62fe;
+  color: #0f62fe;
+}
+
+.omrs-icon {
+  fill: var(--omrs-icon-fill, 'currentColor');
+}