ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.11

package/core/lib/components/global-header/global-header.scss

@@ -1,397 +1,397 @@
-.global-header {
-  .left-bar {
-    position: fixed;
-  }
-
-  .right-section {
-    height: 100vh;
-    &.open {
-    }
-    &.close {
-      margin-left: 80px;
-    }
-  }
-
-  .layout-content {
-    display: flex;
-
-    .ant-btn {
-      // padding: 5px 10px;
-      // outline: none;
-      // border: 0;
-    }
-  }
-
-  // Dark theme specific css
-  // Added considering stoptb
-  &.dark {
-    .left-bar {
-      background-color: #31404f;
-    }
-
-    .sidebar-container {
-      .sidemenu {
-        .ant-menu.ant-menu-dark {
-          background-color: #31404f;
-        }
-
-        .ant-menu-dark .ant-menu-inline.ant-menu-sub {
-          background-color: #2b3946;
-        }
-
-        .intro {
-          border-bottom: none;
-        }
-
-        .menu-item {
-          .menu-collapsed {
-            i {
-              color: white;
-            }
-          }
-        }
-      }
-    }
-
-    .sidebar-container .sidemenu .intro .logo-wrapper small {
-      color: #fff;
-    }
-  }
-
-  // END OF STOPTB SPECIFIC CSS
-
-  .left-bar {
-    transition: 0.3s;
-
-    //If kiosk mode is on
-    &.openkioskon {
-      display: none;
-
-      width: 0;
-    }
-
-    //If kiosk mode is off
-    &.closekioskon {
-      display: none;
-    }
-
-    &.hide {
-      width: 0;
-      display: none;
-    }
-
-    &.open {
-      width: var(--sidemenu-width, 211px);
-    }
-
-    &.close {
-      width: 106px;
-    }
-
-    .sidebar-container {
-      transition: 0.3s;
-
-      &.open {
-        width: var(--sidemenu-width, 211px);
-        transition: 0.1s;
-      }
-
-      //If kiosk mode is on
-      &.closekioskon {
-        width: 98px;
-
-        transition: none;
-      }
-
-      &.close {
-        width: 80px;
-      }
-    }
-
-    @media only screen and (min-width: 800px) {
-      width: var(--sidemenu-width, 211px);
-    }
-  }
-
-  &.connected {
-    .right-section {
-      margin-top: 0px;
-      padding: 0px;
-    }
-  }
-
-  .right-section {
-    margin-top: 0px;
-    width: 100%;
-    overflow-x: scroll;
-    position: relative;
-    padding: 15px;
-    margin-left: calc(var(--sidemenu-width, 211px) + 1px);
-
-    &.kioskon {
-      overflow-x: hidden;
-    }
-
-    .menu-caption {
-      margin: 12px 10px;
-
-      &.header-caption {
-        font-size: 14px;
-        font-weight: bold;
-        color: var(--custom-card-text-color);
-        text-transform: uppercase;
-      }
-    }
-
-    .toggler {
-      position: absolute;
-      bottom: 3px;
-      left: -1px;
-      border: 1px solid #c6c6c6;
-
-      &:hover {
-        background-color: hover;
-        border-color: black;
-      }
-    }
-
-    @media only screen and (max-width: 768px) {
-      margin-left: 0 !important; // remove left margin on mobile
-      padding: 10px !important;
-    }
-  }
-
-  .profile-avatar {
-    .profile-picture {
-      border: 1px solid #e2e2e2;
-      border-radius: 23px;
-      box-shadow: 0 0 8px 2px #d1d1d1;
-      color: #000;
-      height: 40px;
-      margin: 0 10px;
-      object-fit: contain;
-      width: 40px;
-    }
-  }
-
-  .ant-tooltip .ant-tooltip-content .ant-tooltip-arrow + span {
-    opacity: 1 !important;
-  }
-
-  .ant-menu.ant-menu-inline-collapsed > .ant-menu-item + span {
-    opacity: 1 !important;
-  }
-
-  .ant-menu {
-    .ant-menu-item {
-      .ant-menu-submenu-popup {
-        .ant-menu-title-content + span {
-          opacity: 1 !important;
-        }
-      }
-    }
-  }
-
-  .fa {
-    padding-right: 15px;
-  }
-
-  .page-wrapper {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    // padding: 3px 8px;
-    border-bottom: 1px solid #d7d7d787;
-    position: fixed;
-    height: 56px;
-    top: 0;
-    background: white;
-    z-index: 1000;
-    width: 92%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    padding: 15px;
-
-    &.open {
-      width: calc(100% - (var(--sidemenu-width, 211px) + 1px));
-      transition: 0.1s;
-      left: calc(var(--sidemenu-width, 211px) + 1px);
-    }
-
-    @media only screen and (max-width: 768px) {
-      padding: 8px 10px 8px 14px !important;
-      left: 0 !important;
-      width: 100% !important;
-
-      &.open {
-        width: 100% !important;
-        left: 0 !important;
-      }
-    }
-
-    .page-header-name {
-      display: flex;
-    }
-
-    &.hidden {
-      display: none;
-    }
-
-    .toggle-box {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-
-      h4 {
-        margin-bottom: 0px;
-      }
-    }
-
-    .toggle-menu {
-      margin-right: 10px;
-      cursor: pointer;
-      // padding: 10px;
-      // border-radius: 4px;
-      // border: 1px solid #dcdcdc;
-      margin-right: 10px;
-
-      span {
-        margin-right: 10px;
-      }
-
-      &:hover {
-        border-color: #c1c1c1;
-      }
-    }
-
-    .show-search {
-      margin-right: 10px;
-      font-size: 16px;
-      cursor: pointer;
-
-      &:hover {
-        border-color: #c1c1c1;
-      }
-    }
-
-    .page-menu {
-      display: flex;
-      align-items: center;
-      gap: 15px;
-
-      a {
-        margin: 0px 5px;
-      }
-
-      .branch-selection {
-        margin: 0px 10px;
-      }
-      .branch-switcher {
-        .branches {
-          .ant-select {
-            min-width: 150px;
-          }
-        }
-      }
-    }
-
-    .header-blk {
-      display: flex;
-      align-items: center;
-      margin-bottom: 15px;
-
-      .page-heading {
-        margin: 2px 0 0 0;
-        font-size: 24px;
-        font-weight: 700;
-        line-height: 26px;
-      }
-    }
-
-    .page-desc {
-      margin-bottom: 10px;
-    }
-  }
-}
-
-// Tooltip — must be top-level because antd Tooltip renders in a portal on document.body
-.modern-tooltip {
-  .ant-tooltip-inner {
-    background: #ffffff;
-    color: #1f1f1f;
-    font-size: 13px;
-    padding: 8px 14px;
-    border-radius: 10px;
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
-    line-height: 1.4;
-    letter-spacing: 0.2px;
-    min-height: auto;
-  }
-
-  .ant-tooltip-arrow {
-    --antd-arrow-background-color: #ffffff;
-
-    &::before {
-      background: #ffffff !important;
-    }
-  }
-
-  .ant-tooltip-arrow-content {
-    background: #ffffff !important;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-
-    &::before {
-      background: #ffffff !important;
-    }
-  }
-}
-
-.side-drawer-content-wrapper {
-  .drawer-content {
-    .ant-drawer-body {
-      padding: 0px;
-    }
-  }
-}
-
-.sidebar-container {
-  //If kiosk is on
-  &.open .kioskoff {
-    display: none;
-  }
-
-  // .opened{
-  //   width: 200px;
-  //   // transition : 0.1s ;
-  // }
-  // .closed{
-  //   width: 80px;
-  // }
-
-  //   .sidebar-container:hover{
-  //     width: 200px;
-  // }
-
-  .menu-search {
-    padding: 10px;
-  }
-
-  .user-info {
-    padding: 5px 16px;
-  }
-}
-
-.side-drawer-content {
-  .ant-drawer-content-wrapper {
-    width: 217px !important;
-
-    .ant-drawer-content {
-      .ant-drawer-body {
-        padding: 0px;
-      }
-      .ant-drawer-header {
-        padding: 2px 20px;
-      }
-    }
-  }
-}
+.global-header {
+  .left-bar {
+    position: fixed;
+  }
+
+  .right-section {
+    height: 100vh;
+    &.open {
+    }
+    &.close {
+      margin-left: 80px;
+    }
+  }
+
+  .layout-content {
+    display: flex;
+
+    .ant-btn {
+      // padding: 5px 10px;
+      // outline: none;
+      // border: 0;
+    }
+  }
+
+  // Dark theme specific css
+  // Added considering stoptb
+  &.dark {
+    .left-bar {
+      background-color: #31404f;
+    }
+
+    .sidebar-container {
+      .sidemenu {
+        .ant-menu.ant-menu-dark {
+          background-color: #31404f;
+        }
+
+        .ant-menu-dark .ant-menu-inline.ant-menu-sub {
+          background-color: #2b3946;
+        }
+
+        .intro {
+          border-bottom: none;
+        }
+
+        .menu-item {
+          .menu-collapsed {
+            i {
+              color: white;
+            }
+          }
+        }
+      }
+    }
+
+    .sidebar-container .sidemenu .intro .logo-wrapper small {
+      color: #fff;
+    }
+  }
+
+  // END OF STOPTB SPECIFIC CSS
+
+  .left-bar {
+    transition: 0.3s;
+
+    //If kiosk mode is on
+    &.openkioskon {
+      display: none;
+
+      width: 0;
+    }
+
+    //If kiosk mode is off
+    &.closekioskon {
+      display: none;
+    }
+
+    &.hide {
+      width: 0;
+      display: none;
+    }
+
+    &.open {
+      width: var(--sidemenu-width, 211px);
+    }
+
+    &.close {
+      width: 106px;
+    }
+
+    .sidebar-container {
+      transition: 0.3s;
+
+      &.open {
+        width: var(--sidemenu-width, 211px);
+        transition: 0.1s;
+      }
+
+      //If kiosk mode is on
+      &.closekioskon {
+        width: 98px;
+
+        transition: none;
+      }
+
+      &.close {
+        width: 80px;
+      }
+    }
+
+    @media only screen and (min-width: 800px) {
+      width: var(--sidemenu-width, 211px);
+    }
+  }
+
+  &.connected {
+    .right-section {
+      margin-top: 0px;
+      padding: 0px;
+    }
+  }
+
+  .right-section {
+    margin-top: 0px;
+    width: 100%;
+    overflow-x: scroll;
+    position: relative;
+    padding: 15px;
+    margin-left: calc(var(--sidemenu-width, 211px) + 1px);
+
+    &.kioskon {
+      overflow-x: hidden;
+    }
+
+    .menu-caption {
+      margin: 12px 10px;
+
+      &.header-caption {
+        font-size: 14px;
+        font-weight: bold;
+        color: var(--custom-card-text-color);
+        text-transform: uppercase;
+      }
+    }
+
+    .toggler {
+      position: absolute;
+      bottom: 3px;
+      left: -1px;
+      border: 1px solid #c6c6c6;
+
+      &:hover {
+        background-color: hover;
+        border-color: black;
+      }
+    }
+
+    @media only screen and (max-width: 768px) {
+      margin-left: 0 !important; // remove left margin on mobile
+      padding: 10px !important;
+    }
+  }
+
+  .profile-avatar {
+    .profile-picture {
+      border: 1px solid #e2e2e2;
+      border-radius: 23px;
+      box-shadow: 0 0 8px 2px #d1d1d1;
+      color: #000;
+      height: 40px;
+      margin: 0 10px;
+      object-fit: contain;
+      width: 40px;
+    }
+  }
+
+  .ant-tooltip .ant-tooltip-content .ant-tooltip-arrow + span {
+    opacity: 1 !important;
+  }
+
+  .ant-menu.ant-menu-inline-collapsed > .ant-menu-item + span {
+    opacity: 1 !important;
+  }
+
+  .ant-menu {
+    .ant-menu-item {
+      .ant-menu-submenu-popup {
+        .ant-menu-title-content + span {
+          opacity: 1 !important;
+        }
+      }
+    }
+  }
+
+  .fa {
+    padding-right: 15px;
+  }
+
+  .page-wrapper {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    // padding: 3px 8px;
+    border-bottom: 1px solid #d7d7d787;
+    position: fixed;
+    height: 56px;
+    top: 0;
+    background: white;
+    z-index: 1000;
+    width: 92%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    padding: 15px;
+
+    &.open {
+      width: calc(100% - (var(--sidemenu-width, 211px) + 1px));
+      transition: 0.1s;
+      left: calc(var(--sidemenu-width, 211px) + 1px);
+    }
+
+    @media only screen and (max-width: 768px) {
+      padding: 8px 10px 8px 14px !important;
+      left: 0 !important;
+      width: 100% !important;
+
+      &.open {
+        width: 100% !important;
+        left: 0 !important;
+      }
+    }
+
+    .page-header-name {
+      display: flex;
+    }
+
+    &.hidden {
+      display: none;
+    }
+
+    .toggle-box {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      h4 {
+        margin-bottom: 0px;
+      }
+    }
+
+    .toggle-menu {
+      margin-right: 10px;
+      cursor: pointer;
+      // padding: 10px;
+      // border-radius: 4px;
+      // border: 1px solid #dcdcdc;
+      margin-right: 10px;
+
+      span {
+        margin-right: 10px;
+      }
+
+      &:hover {
+        border-color: #c1c1c1;
+      }
+    }
+
+    .show-search {
+      margin-right: 10px;
+      font-size: 16px;
+      cursor: pointer;
+
+      &:hover {
+        border-color: #c1c1c1;
+      }
+    }
+
+    .page-menu {
+      display: flex;
+      align-items: center;
+      gap: 15px;
+
+      a {
+        margin: 0px 5px;
+      }
+
+      .branch-selection {
+        margin: 0px 10px;
+      }
+      .branch-switcher {
+        .branches {
+          .ant-select {
+            min-width: 150px;
+          }
+        }
+      }
+    }
+
+    .header-blk {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15px;
+
+      .page-heading {
+        margin: 2px 0 0 0;
+        font-size: 24px;
+        font-weight: 700;
+        line-height: 26px;
+      }
+    }
+
+    .page-desc {
+      margin-bottom: 10px;
+    }
+  }
+}
+
+// Tooltip — must be top-level because antd Tooltip renders in a portal on document.body
+.modern-tooltip {
+  .ant-tooltip-inner {
+    background: #ffffff;
+    color: #1f1f1f;
+    font-size: 13px;
+    padding: 8px 14px;
+    border-radius: 10px;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
+    line-height: 1.4;
+    letter-spacing: 0.2px;
+    min-height: auto;
+  }
+
+  .ant-tooltip-arrow {
+    --antd-arrow-background-color: #ffffff;
+
+    &::before {
+      background: #ffffff !important;
+    }
+  }
+
+  .ant-tooltip-arrow-content {
+    background: #ffffff !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+
+    &::before {
+      background: #ffffff !important;
+    }
+  }
+}
+
+.side-drawer-content-wrapper {
+  .drawer-content {
+    .ant-drawer-body {
+      padding: 0px;
+    }
+  }
+}
+
+.sidebar-container {
+  //If kiosk is on
+  &.open .kioskoff {
+    display: none;
+  }
+
+  // .opened{
+  //   width: 200px;
+  //   // transition : 0.1s ;
+  // }
+  // .closed{
+  //   width: 80px;
+  // }
+
+  //   .sidebar-container:hover{
+  //     width: 200px;
+  // }
+
+  .menu-search {
+    padding: 10px;
+  }
+
+  .user-info {
+    padding: 5px 16px;
+  }
+}
+
+.side-drawer-content {
+  .ant-drawer-content-wrapper {
+    width: 217px !important;
+
+    .ant-drawer-content {
+      .ant-drawer-body {
+        padding: 0px;
+      }
+      .ant-drawer-header {
+        padding: 2px 20px;
+      }
+    }
+  }
+}