icleafreportui 0.1.0

package/src/components/sidebar.css

@@ -0,0 +1,947 @@
+/*-----------------
+	Sidebar
+-----------------------*/
+
+.sidebar {
+      background-color: #fff;
+      border-right: 1px solid #ddd;
+      bottom: 0;
+      left: 0;
+      margin-top: 0;
+      position: fixed;
+      top: 0px;
+      /* transition: all 0.2s ease-in-out 0s; */
+      width: 260px;
+      z-index: 1001;
+      display: block;
+      overflow-y: auto;
+}
+
+
+.sidebar.opened {
+      -webkit-transition: all 0.4s ease;
+      -moz-transition: all 0.4s ease;
+      transition: all 0.4s ease;
+}
+
+.sidebar-inner {
+      height: auto;
+      transition: all 0.2s ease-in-out 0s;
+}
+
+.sidebar-menu {
+      padding: 0;
+      max-height: calc(100vh);
+      /* overflow-y: auto; */
+      height: 100%;
+}
+
+.sidebar-menu ul {
+      font-size: 15px;
+      list-style-type: none;
+      margin: 4px 2px;
+      padding: 0;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      /* row-gap: 5px; */
+}
+
+.sidebar-menu li a {
+      color: #333;
+      display: block;
+      font-size: 14px;
+      height: auto;
+      padding: 0 10px;
+      text-decoration: none;
+      line-height: 20px;
+      border-radius: 8px;
+      font-weight: 300;
+}
+
+.sidebar-menu li a:hover {
+      color: var(--primary-color);
+      background-color: var(--sidebar_mnu_bg);
+      cursor: pointer;
+}
+
+.sidebar-menu li a:hover .icon_background {
+      background-color: transparent;
+      box-shadow: none;
+}
+
+
+.sidebar-menu li.active a {
+      color: var(--primary-color);
+      background-color: var(--sidebar_side_mnu_bg);
+}
+
+.sidebar-menu li.active .icon_background {
+      background-color: transparent;
+      box-shadow: none;
+}
+
+
+.menu-title {
+      color: #9e9e9e;
+      display: flex;
+      font-size: 14px;
+      opacity: 1;
+      padding: 5px 15px;
+      white-space: nowrap;
+}
+
+.menu-title>i {
+      float: right;
+      line-height: 40px;
+}
+
+.sidebar-menu li.menu-title a {
+      color: #ff9b44;
+      display: inline-block;
+      margin-left: auto;
+      padding: 0;
+}
+
+.sidebar-menu li.menu-title a.btn {
+      color: #fff;
+      display: block;
+      float: none;
+      font-size: 15px;
+      margin-bottom: 15px;
+      padding: 10px 15px;
+}
+
+
+.subitem {
+      color: #888;
+}
+
+.sidebar-menu ul ul a.active {
+      /* background-color: #ffebda; */
+      color: #000;
+      /* text-decoration: underline; */
+}
+
+.mobile-user-menu {
+      color: #fff;
+      display: none;
+      float: right;
+      font-size: 24px;
+      height: 60px;
+      line-height: 60px;
+      padding: 0 20px;
+      position: absolute;
+      right: 0;
+      text-align: right;
+      top: 0;
+      width: 60px;
+      z-index: 10;
+}
+
+.mobile-user-menu>a {
+      color: #333;
+      padding: 0;
+}
+
+.mobile-user-menu a:hover {
+      color: #333;
+}
+
+.mobile-user-menu>.dropdown-menu {
+      min-width: 130px;
+}
+
+.mobile-user-menu>.dropdown-menu>a {
+      line-height: 23px;
+}
+
+.profile-rightbar {
+      display: none !important;
+      color: #bbb;
+      font-size: 26px;
+      margin-left: 15px;
+}
+
+.mobile_btn {
+      display: none;
+      float: left;
+}
+
+.sidebar .sidebar-menu>ul>li>a span {
+      transition: all 0.2s ease-in-out 0s;
+      display: inline-block;
+      margin-left: 5px;
+      /* white-space: nowrap; */
+      font-weight: 300;
+}
+
+
+.sidebar.sidebar-menu>ul>li>a span.chat-user {
+      margin-left: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+}
+
+.sidebar.sidebar-menu>ul>li>a span.badge {
+      margin-left: auto;
+}
+
+
+.sidebar-menu ul ul a {
+      display: flex;
+      font-size: 14px;
+      padding: 10px 0px 10px 10px;
+      position: relative;
+      gap: 20px;
+      align-items: center;
+}
+
+.sidebar-menu ul ul ul a {
+      padding-left: 70px;
+}
+
+.info_icon {
+      font-size: 14px;
+}
+
+.sidebar-menu ul ul ul ul a {
+      padding-left: 90px;
+}
+
+.sidebar-menu>ul>li {
+      position: relative;
+}
+
+.sidebar-menu .menu-arrow {
+      -webkit-transition: -webkit-transform 0.15s;
+      -o-transition: -o-transform 0.15s;
+      transition: transform .15s;
+      position: absolute;
+      right: 10px;
+      display: inline-block;
+      font-family: 'FontAwesome';
+      text-rendering: auto;
+      line-height: 40px;
+      font-size: 20px;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-transform: translate(0, 0);
+      -ms-transform: translate(0, 0);
+      -o-transform: translate(0, 0);
+      transform: translate(0, 0);
+      line-height: 18px;
+      top: 0;
+      height: 46px;
+}
+
+
+
+.sidebar-menu li a.subdrop .menu-arrow {
+      -ms-transform: rotate(90deg);
+      -webkit-transform: rotate(90deg);
+      -o-transform: rotate(90deg);
+      transform: rotate(90deg);
+}
+
+
+.sidebar-menu li a.subdrop {
+      color: var(--primary-color);
+      background-color: var(--sidebar_mnu_bg);
+      margin-bottom: 0px;
+}
+
+.sidebar-menu li a.subdrop .icon_background {
+      background-color: transparent;
+      box-shadow: none;
+}
+
+
+.sidebar-menu li:has(a.subdrop) ul li {
+      /* background-color: var(--sidebar_bg); */
+      font-size: 14px;
+      line-height: 16px;
+      letter-spacing: 0em;
+      color: #222222;
+}
+
+
+.sidebar-menu li:has(a.subdrop) ul {
+      row-gap: 0px;
+      border-radius: 8px;
+      background-color: var(--sidebar_side_mnu_bg);
+      margin: 4px 14px;
+}
+
+.mini-sidebar .sidebar-menu li:has(a.subdrop) ul {
+      /* position: absolute;
+      left: 57px;
+      top: 1px;
+      width: 212px;
+      height: auto;
+      box-shadow: 1px 1px 3px #847474; */
+      /* border-radius: 0px 2px 2px 0px; */
+      box-shadow: 1px 1px 3px #847474;
+      position: fixed;
+}
+
+.mini-sidebar .sidebar-menu li:has(a.subdrop) div {
+      position: absolute;
+      left: 57px;
+      top: 1px;
+      width: 212px;
+      height: auto;
+
+      /* border-radius: 0px 2px 2px 0px; */
+}
+
+.mini-sidebar .menu-arrow {
+      display: none;
+}
+
+.sidebar-menu li:has(a.subdrop) ul li a.active {
+      background-color: var(--sidebar_bg);
+      ;
+      color: var(--primary-color);
+      text-decoration: none;
+      /* margin-top: 5px; */
+      display: flex;
+      align-items: center;
+      /* gap:10px; */
+
+}
+
+
+
+.sidebar-menu li:has(a.subdrop) ul li a:hover {
+      color: var(--primary-color) !important;
+      background-color: transparent;
+}
+
+
+.sidebar-menu ul ul a .menu-arrow {
+      top: 6px;
+}
+
+.sidebar-menu a {
+      line-height: 1.3;
+      transition: unset;
+      -moz-transition: unset;
+      -o-transition: unset;
+      -ms-transition: unset;
+      -webkit-transition: unset;
+}
+
+
+.sidebar-menu>ul>li>a {
+      padding: 5px 5px;
+      margin: 4px 14px;
+      align-items: center;
+      display: flex;
+      justify-content: flex-start;
+      position: relative;
+      transition: all 0.2s ease-in-out 0s;
+}
+
+
+
+
+.sidebar-menu ul li a i {
+      display: inline-block;
+      font-size: 16px;
+      line-height: 24px;
+      text-align: left;
+      vertical-align: middle;
+      transition: all 0.2s ease-in-out 0s;
+}
+
+.sidebar-menu ul li.menu-title a i {
+      font-size: 16px !important;
+      margin-right: 0;
+      text-align: right;
+      width: auto;
+}
+
+.account-mnu-icon {
+      color: var(--primary-color);
+      cursor: pointer;
+      -webkit-user-select: none;
+      user-select: none;
+      outline: unset;
+      height: 25px;
+      width: 25px;
+      padding: 4px;
+      background: yellow;
+      border-radius: 50%;
+      border: 1px solid #e6e6e6;
+      box-shadow: 0px 0px 1px 0px gray;
+      margin: 0 10px 0 10px;
+}
+
+.account-setting-mnu-icon {
+      color: var(--primary-color);
+      cursor: pointer;
+      -webkit-user-select: none;
+      user-select: none;
+      outline: unset;
+      height: 22px;
+      width: 22px;
+      margin: 0 10px 0 5px;
+}
+
+.acc_conf_main {
+      position: relative;
+      appearance: none;
+      max-width: 100%;
+      font-family: Roboto, sans-serif;
+      font-size: 0.8125rem;
+      display: inline-flex;
+      justify-content: center;
+      white-space: nowrap;
+      outline: 0px;
+      text-decoration: none;
+      padding: 0px;
+      vertical-align: middle;
+      box-sizing: border-box;
+      user-select: none;
+      -webkit-tap-highlight-color: transparent;
+      cursor: pointer;
+      border: 1px solid rgb(227, 242, 253);
+      color: rgb(33, 150, 243);
+      height: 45px;
+      /* width: fit-content; */
+      align-items: center;
+      border-radius: 27px;
+      transition: all 0.2s ease-in-out 0s;
+      background-color: var(--sidebar_side_mnu_bg);
+}
+
+.acc_conf_main:hover {
+      border-color: rgb(33, 150, 243);
+      color: rgb(227, 242, 253);
+      background-color: rgb(33, 150, 243) !important;
+}
+
+.acc_conf_main:hover .account-setting-mnu-icon {
+      color: var(--button-text-color);
+}
+
+.lang-mnu-icon {
+      color: var(--pdf-icon-color);
+      cursor: pointer;
+      border-radius: 8px;
+      padding: 6px;
+      align-items: center;
+      -webkit-user-select: none;
+      user-select: none;
+      outline: unset;
+      height: 30px;
+      width: 30px;
+      background: var(--sidebar_side_mnu_bg);
+      border: 1px solid #e8e3ef;
+}
+
+.lang-mnu-icon:hover {
+      background-color: var(--pdf-icon-color);
+      color: var(--button-text-color);
+}
+
+.icon_background {
+      /* box-shadow: 4px 4px 11px 1px #00000014; */
+      /* background-color: #ffffff; */
+      border-radius: 50%;
+      padding: 7px;
+      display: flex !important;
+      justify-content: center;
+      align-items: center;
+      margin-left: 0px !important;
+      height: fit-content;
+}
+
+.sub_icon_background svg {
+      font-size: 6px;
+}
+
+.sub_icon_background {
+      padding-right: 0px !important;
+      color: var(--primary-color);
+}
+
+.submenu ul::after {
+      content: "";
+      position: absolute;
+      left: 22px;
+      top: 8%;
+      height: 84%;
+      width: 1px;
+      opacity: 1;
+      background-color: transparent;
+      border-left: 1px dashed var(--primary-color);
+}
+
+.mini-sidebar .submenu ul::after {
+      opacity: 0;
+}
+
+.mini-sidebar .sidebar-menu ul ul a {
+      gap: 10px;
+}
+
+/* icon backgroud drawer */
+.icon_backgrounddrawer {
+      /* box-shadow: 4px 4px 11px 1px #00000014; */
+      /* background-color: #ffffff; */
+      border-radius: 50%;
+      padding: 10px;
+      display: flex !important;
+      justify-content: center;
+      align-items: center;
+      margin-left: 0px !important;
+      height: -moz-fit-content;
+      height: fit-content;
+}
+
+.item_text {
+      font-size: 18px;
+      font-weight: 500;
+}
+
+.dashborad_icon {
+      /* color: #F47A7A; */
+}
+
+.sidebar-menu li a:hover .dashborad_icon {
+      /* color: white !important; */
+      color: var(--primary-color) !important;
+}
+
+.course_icon {
+      /* color: #00D936; */
+}
+
+.sidebar-menu li a:hover .course_icon {
+      /* color: white !important; */
+      color: var(--primary-color) !important;
+}
+
+
+.myCourse_icon {
+      /* color: #CF4EFD; */
+}
+
+.sidebar-menu li a:hover .myCourse_icon {
+      /* color: white !important; */
+      color: var(--primary-color) !important;
+}
+
+.eRes_icon {
+      /* color: #5AB0FF; */
+}
+
+.sidebar-menu li a:hover .eRes_icon {
+      /* color: white !important; */
+      color: var(--primary-color) !important;
+}
+
+
+.exam_icon {
+      /* color: #F8B83D; */
+}
+
+.manage_corporate_icon {
+      /* color: #F8B83D; */
+}
+
+.manageexam_icon {
+
+      /* color: #2C4AE9; */
+}
+
+.manage_user_icon {
+      /* color: #50A0DD; */
+}
+
+.manage_content_icon {
+      /* color: #CF4EFD; */
+
+}
+
+.manage_control_icon {
+
+      /* color: #984BD5; */
+}
+
+.profile_icon {
+      /* color: #6DDD46; */
+}
+
+.sidebar-menu li a:hover .manage_content_icon {
+      color: white !important;
+}
+
+.sidebar-menu li a:hover .manageexam_icon {
+      color: white !important;
+}
+
+.sidebar-menu li a:hover .manage_user_icon {
+      color: white !important;
+}
+
+.sidebar-menu li a:hover .manage_corporate_icon {
+      color: white !important;
+}
+
+.sidebar-menu li a:hover .manage_control_icon {
+      color: white !important;
+}
+
+
+
+
+/* user drawer */
+.sidebardrawer {
+      background-color: #fff;
+      border-right: 1px solid #ddd;
+      bottom: 0;
+      left: 0;
+      margin-top: 0;
+      position: fixed;
+      top: 35px;
+      /* transition: all 0.2s ease-in-out 0s; */
+      width: 232px;
+      z-index: 1001;
+      display: block;
+}
+
+.sidebardrawer.opened {
+      -webkit-transition: all 0.4s ease;
+      -moz-transition: all 0.4s ease;
+      transition: all 0.4s ease;
+}
+
+.sidebardrawer-inner {
+      height: 100%;
+      transition: all 0.2s ease-in-out 0s;
+}
+
+.sidebar-menudrawer {
+      margin-top: 30px;
+      padding: 0;
+}
+
+.main_drawer .ant-drawer-body {
+      padding: 45px 0px !important;
+}
+
+.sidebar .sidebar-menudrawer>ul>li>a span.chat-user {
+      margin-left: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+}
+
+.sidebar .sidebar-menudrawer>ul>li>a span.badge {
+      margin-left: auto;
+}
+
+.sidebar-menudrawer ul ul a {
+      display: flex;
+      font-size: 14px;
+      padding: 10px 0px 10px 9.5px;
+      position: relative;
+      gap: 10px;
+      align-items: center;
+}
+
+.sidebar-menudrawer ul ul ul a {
+      padding-left: 35px;
+}
+
+.sidebar-menudrawer ul ul ul ul a {
+      padding-left: 45px;
+}
+
+.sidebar-menudrawer>ul>li {
+      position: relative;
+}
+
+.sidebar-menudrawer .menu-arrow {
+      -webkit-transition: -webkit-transform 0.15s;
+      -o-transition: -o-transform 0.15s;
+      transition: transform .15s;
+      position: absolute;
+      right: 10px;
+      display: inline-block;
+      font-family: 'FontAwesome';
+      text-rendering: auto;
+      line-height: 20px;
+      font-size: 20px;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-transform: translate(0, 0);
+      -ms-transform: translate(0, 0);
+      -o-transform: translate(0, 0);
+      transform: translate(0, 0);
+      line-height: 18px;
+}
+
+.submenu_drawer ul::after {
+      content: "";
+      position: absolute;
+      left: 22px;
+      top: 8%;
+      height: 84%;
+      width: 1px;
+      opacity: 1;
+      background-color: transparent;
+      border-left: 1px dashed var(--primary-color);
+}
+
+
+
+
+.sidebar-menudrawer li a {
+      color: #333;
+      display: block;
+      font-size: 14px;
+      height: auto;
+      padding: 0 10px;
+      text-decoration: none;
+      line-height: 20px;
+      border-radius: 8px;
+      font-weight: 300;
+}
+
+.sidebar-menudrawer li a.subdrop {
+      color: var(--primary-color);
+      background-color: var(--sidebar_mnu_bg);
+      margin-bottom: 0px;
+}
+
+.sidebar-menudrawer li a.subdrop .icon_background {
+      background-color: transparent;
+      box-shadow: none;
+}
+
+.sidebar-menudrawer li:has(a.subdrop) ul li {
+      /* background-color: var(--sidebar_mnu_bg); */
+      font-size: 14px;
+      line-height: 16px;
+      letter-spacing: 0em;
+      color: #222222;
+}
+
+.sidebar-menudrawer li:has(a.subdrop) ul {
+      row-gap: 0px
+}
+
+.sidebar-menudrawer li:has(a.subdrop) ul li a.active {
+      background-color: var(--sidebar_bg);
+      color: var(--primary-color);
+      text-decoration: none;
+}
+
+.activeExamLi {
+      color: var(--primary-color) !important;
+      background-color: var(--sidebar_bg) !important
+}
+
+.inactiveExamLi {
+      color: #000 !important;
+      /* background-color: var(--sidebar_bg) !important */
+}
+
+.sidebar-menudrawer li:has(a.subdrop) ul li a:hover {
+      color: var(--primary-color) !important;
+      background-color: transparent;
+}
+
+.sidebar-menudrawer ul ul a .menu-arrow {
+      top: 3px;
+}
+
+.sidebar-menudrawer a {
+      line-height: 1.3;
+      transition: unset;
+      -moz-transition: unset;
+      -o-transition: unset;
+      -ms-transition: unset;
+      -webkit-transition: unset;
+}
+
+.sidebar-menudrawer>ul>li>a {
+      padding: 5px 5px;
+      margin: 4px 14px;
+      align-items: center;
+      display: flex;
+      justify-content: flex-start;
+      position: relative;
+      transition: all 0.2s ease-in-out 0s;
+}
+
+.sidebar-menudrawer ul li a i {
+      display: inline-block;
+      font-size: 16px;
+      line-height: 14px;
+      text-align: left;
+      vertical-align: middle;
+      transition: all 0.2s ease-in-out 0s;
+}
+
+.sidebar-menudrawer ul li.menu-title a i {
+      font-size: 12px !important;
+      margin-right: 0;
+      text-align: right;
+      width: auto;
+}
+
+.sidebar-menudrawer li a:hover .dashborad_icon {
+      color: white !important;
+}
+
+.sidebar-menudrawer li a:hover .course_icon {
+      color: white !important;
+}
+
+.sidebar-menudrawer li a:hover .myCourse_icon {
+      color: white !important;
+}
+
+.sidebar-menudrawer li a:hover .eRes_icon {
+      color: white !important;
+}
+
+.sidebar-menudrawer li a:hover .exam_icon {
+      color: white !important;
+}
+
+.sidebar-menudrawer li a:hover .profile_icon {
+      color: white !important;
+}
+
+.sidebar-menudrawer li a.subdrop .menu-arrow {
+      -ms-transform: rotate(45deg);
+      -webkit-transform: rotate(45deg);
+      -o-transform: rotate(45deg);
+      transform: rotate(45deg);
+}
+
+.sidebar-menudrawer li.active a {
+      color: var(--primary-color);
+      background-color: var(--sidebar_side_mnu_bg);
+}
+
+.sidebar-menudrawer li.active .icon_backgrounddrawer {
+      background-color: transparent;
+      box-shadow: none;
+}
+
+.subdrop .icon_backgrounddrawer {
+      background-color: transparent;
+      box-shadow: none;
+}
+
+.sidebar-menudrawer li:has(a.subdrop) ul {
+      row-gap: 0px;
+      border-radius: 8px;
+      background-color: var(--sidebar_side_mnu_bg);
+      margin: 4px 14px;
+}
+
+.sidebar-menudrawer ul {
+      font-size: 15px;
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      /* row-gap: 5px;
+}
+
+.sidebar {
+      display: block;
+}
+
+.drawer_main {
+      display: none;
+}
+
+.sidebar-menudrawer a {
+      text-decoration: none;
+}
+
+.inaction_menu span {
+      color: #333;
+      font-size: 12px;
+      font-weight: 500;
+}
+
+.submenu_drawer span {
+
+      color: #333;
+      font-size: 12px;
+      font-weight: 500;
+      margin-left: 10px;
+
+}
+
+.submenu_name span {
+
+      margin-top: 5px;
+      margin-left: 10px;
+
+}
+
+.menu_name_span {
+      margin-top: 5px;
+      margin-left: 10px;
+}
+
+.active span {
+      /* margin-top: 2px !important;
+      margin-left: 10px !important; */
+}
+
+.ant-drawer-content-wrapper {
+      width: 200px !important;
+}
+
+@media only screen and (max-width : 1001px) {
+      .sidebar {
+            display: none;
+      }
+
+      .drawer_main {
+            display: block;
+      }
+
+      .ant-drawer-content-wrapper {
+            width: 100%;
+      }
+
+      .main_drawer .ant-drawer-body {
+            padding: 0px 0px !important;
+      }
+
+      .sidebar-menudrawer {
+            margin-top: 0px;
+            padding: 0;
+      }
+
+      .sidebar-menudrawer li a:hover .exam_icon {
+            color: #F8B83D !important;
+      }
+
+}
+
+.comp-info-main {
+      display: none;
+      position: absolute;
+      bottom: 0;
+      font-size: 10px;
+      text-align: center;
+      width: 100%;
+      padding: 10px 0;
+      user-select: none;
+      font-weight: 300;
+}