ui-soxo-bootstrap-core 2.6.5 → 2.6.6

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

@@ -1,369 +1,369 @@
-.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: 256px;
-    }
-
-    &.close {
-      width: 106px;
-    }
-
-    .sidebar-container {
-      transition: 0.3s;
-
-      &.open {
-        width: 256px;
-        transition: 0.1s;
-      }
-
-      //If kiosk mode is on
-      &.closekioskon {
-        width: 98px;
-
-        transition: none;
-      }
-
-      &.close {
-        width: 80px;
-      }
-    }
-
-    @media only screen and (min-width: 800px) {
-      width: 256px;
-    }
-  }
-
-  &.connected {
-    .right-section {
-      margin-top: 0px;
-      padding: 0px;
-    }
-  }
-
-  .right-section {
-    margin-top: 0px;
-    width: 100%;
-    overflow-x: scroll;
-    position: relative;
-    padding: 15px;
-    margin-left: 212px;
-
-    &.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% - 212px);
-      transition: 0.1s;
-      left: 212px;
-    }
-
-  @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;
-    }
-  }
-}
-
-.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: 256px;
+    }
+
+    &.close {
+      width: 106px;
+    }
+
+    .sidebar-container {
+      transition: 0.3s;
+
+      &.open {
+        width: 256px;
+        transition: 0.1s;
+      }
+
+      //If kiosk mode is on
+      &.closekioskon {
+        width: 98px;
+
+        transition: none;
+      }
+
+      &.close {
+        width: 80px;
+      }
+    }
+
+    @media only screen and (min-width: 800px) {
+      width: 256px;
+    }
+  }
+
+  &.connected {
+    .right-section {
+      margin-top: 0px;
+      padding: 0px;
+    }
+  }
+
+  .right-section {
+    margin-top: 0px;
+    width: 100%;
+    overflow-x: scroll;
+    position: relative;
+    padding: 15px;
+    margin-left: 212px;
+
+    &.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% - 212px);
+      transition: 0.1s;
+      left: 212px;
+    }
+
+  @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;
+    }
+  }
+}
+
+.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;
+      }
+    }
+  }
+}