@cityway/bo-ui 1.0.0

package/lib/assets/styles/scss/components/table/_table-popover.scss

@@ -0,0 +1,39 @@
+
+// Tables head with popover
+.table tr th.th-with-popover {
+  position: relative;
+
+  .sorting-btn {
+    padding-right: 3.5rem ;
+  }
+
+  .btn-popover {
+    position: absolute;
+    z-index: 2;
+    bottom: 0.5rem;
+    right: 0;
+    width: auto;
+    line-height: inherit;
+
+    .optyweb {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 1.125rem;
+      height: 1.125rem;
+      font-size: 0.7rem;
+      color: $white;
+      border-radius: 100rem;
+      background-color: var(--bs-primary);
+    }
+
+    &:focus-visible {
+      outline-offset: 0.188rem;
+      border-radius: 100rem;
+    }
+  }
+
+  .sorting-btn + .btn-popover {
+    right: 1.625rem;
+  }
+}

package/lib/assets/styles/scss/components/table/_table-sorting.scss

@@ -0,0 +1,64 @@
+table { height: 1px; } /* Will be ignored, don't worry. */
+tr,
+th,
+th > .sorting-btn {
+  height: 100%;
+}
+// permet au bouton de tri de faire 100% de la cellule
+
+
+.sorting-btn {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  padding: $table-cell-padding-y 2.5rem $table-cell-padding-y $table-cell-padding-x;
+  color: var(--bs-body-color);
+  font-weight: $table-th-font-weight;
+  text-align: left;
+  white-space: normal;
+  border: 0;
+  background-color: transparent;
+
+  &.sorting-desc,
+  &.sorting-asc {
+    background-color: var(--bs-alice-blue);
+  }
+
+  &:focus {
+    box-shadow: none;
+    outline-offset: -0.188rem;
+  }
+}
+
+.sorting-icons {
+  position: absolute;
+  top: 0;
+  right: $table-cell-padding-x;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100%;
+  padding-bottom: $table-cell-padding-y;
+  color: var(--bs-grey10);
+  line-height: 1;
+
+  .bo-icons {
+    line-height: 1;
+    font-size: 1.125rem;
+  }
+
+  .sorting-asc &,
+  .sorting-desc & {
+    color: var(--bs-primary);
+  }
+
+  .sorting-asc & > .bo-sort::before {
+    content: $bo-sort-asc;
+  }
+
+  .sorting-desc & > .bo-sort::before {
+    content: $bo-sort-desc;
+  }
+
+}

package/lib/assets/styles/scss/core/_footer.scss

@@ -0,0 +1,15 @@
+/* $footer
+ ------------------------------------------*/
+
+.custom-navbar.main-footer {
+  justify-content: center;
+  min-height: $footer-height;
+  font-size: $font-size-base;
+  background: $body-bg;
+
+  @include media-breakpoint-down(sm) {
+    flex-direction: column;
+    align-items: center;
+    padding-top: 1rem;
+  }
+}

package/lib/assets/styles/scss/core/_header.scss

@@ -0,0 +1,170 @@
+.header {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+}
+
+// Menu
+.menu-link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin-right: 2rem;
+  text-decoration: none;
+  border-radius: 100rem;
+  .optyweb {
+    font-size: 1rem;
+  }
+  @include media-breakpoint-down(sm) {
+    width: 2rem;
+    height: 2rem;
+    margin-right: 1rem;
+    .bo-icons {
+      font-size: 1rem;
+    }
+  }
+  &:focus-visible {
+    outline-offset: 0.188rem;
+  }
+}
+
+.header-login {
+  height: $input-height;
+  padding: $input-padding-y $input-padding-x;
+  border-color: var(--bs-grey2);
+  background-color: var(--bs-grey2);
+  font-size: $input-font-size;
+}
+
+.header-avatar {
+  button:hover &,
+  button:active &,
+  button:focus & {
+    color: var(--bs-body-color);
+  }
+  &.optyweb {
+    font-size: 1.6rem;
+  }
+}
+
+.header-indicator {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  left: 1.85rem;
+  top: 1.1rem;
+  border-radius: 5rem;
+  background-color: var(--bs-primary);
+  color: $white;
+  .bo-icons {
+    font-size: 0.625rem;
+    &::before {
+      top: 0.075rem;
+    }
+  }
+}
+
+
+.custom-navbar {
+  position: relative;
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  min-height: $header-height;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+
+  &.main-header {
+    z-index: 600;
+    background-color: $white;
+    padding-left: $grid-gutter-width;
+    padding-right: $grid-gutter-width;
+  }
+
+  .navbar-nav {
+    flex-direction: row;
+
+    .nav-item {
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+
+    .nav-link .badge {
+      position: absolute;
+      top: 5px;
+      right: 9px;
+      border-radius: 50%;
+      min-height: 12px;
+      min-width: 12px;
+    }
+
+    .nav-link.dropdown>a {
+      line-height: $header-height;
+      display: inline-block;
+    }
+  }
+
+  .navbar-brand {
+    color: $white;
+    margin: 0;
+
+    .navbar-brand-logo {
+      height: 24px;
+      margin-right: 6px;
+    }
+  }
+
+  .navbar-brand-name {
+    display: inline-block;
+    font-size: $sidebar-menu-brand-font-size;
+    line-height: 1;
+
+    &::after {
+      content: "";
+      display: block;
+      width: 4.375rem;
+      height: 0.25rem;
+      margin: 0.5rem auto;
+      border-radius: 0.125rem;
+      background-color: $white;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    .navbar-brand-name,
+    .navbar-brand-project {
+      margin-right: 2rem;
+    }
+  }
+
+  .navbar-brand-project {
+    font-size: 0.875rem;
+    font-weight: normal;
+    text-transform: uppercase;
+  }
+
+  .navbar-heading {
+    font-size: 1rem;
+  }
+
+  .navbar-nav {
+    .dropdown-menu {
+      position: absolute;
+      line-height: initial;
+      min-width: auto;
+    }
+  }
+}
+
+.main-brand {
+  padding: calc(#{$grid-gutter-width} * 2) $grid-gutter-width calc(#{$grid-gutter-width} * 2);
+}

package/lib/assets/styles/scss/core/_layout.scss

@@ -0,0 +1,59 @@
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: var(--bs-grey1);;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+}
+
+html {
+  scrollbar-color: #c1c1c1 $white;
+  scrollbar-width: thin;
+}
+
+body,
+html {
+  width: 100%;
+  min-height: 100%;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  background: $body-bg;
+}
+
+.wrapper {
+  display: flex;
+  height: 100%;
+}
+
+.main-content {
+  min-height: calc(100% - #{$header-height} - #{$footer-height});
+  padding: $grid-gutter-width $grid-gutter-width 0;
+  background-color: $body-bg;
+
+  @include media-breakpoint-down(sm) {
+    padding: 1rem;
+  }
+}
+
+.skip-links {
+  margin-bottom: 0;
+  line-height: 0;
+  font-size: 0;
+  a:focus {
+    display: inline-block;
+    position: relative;
+    left: 1rem;
+    height: auto;
+    width: auto;
+    margin: 0.5rem 0;
+    padding: 0.125rem 0;
+    font-size: 1rem;
+    line-height: 1;
+  }
+}

package/lib/assets/styles/scss/core/_menu.scss

@@ -0,0 +1,253 @@
+.main-menu {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  width: auto;
+  flex: 1;
+  -webkit-overflow-scrolling: touch;
+  transition-duration: 400ms;
+  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition-property: all;
+
+  .bg-closed & {
+    width: $sidebar-width;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .navigation-title {
+    font-size: 80%;
+    font-weight: normal;
+    position: relative;
+    margin: 0 ($spacer * 1);
+    padding: 0.469rem ($spacer * 0.75);
+  }
+
+  .navigation-item {
+    position: relative;
+    display: block;
+  }
+
+  .navigation-link {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: $sidebar-menu-link-height;
+    padding: 0.75rem 1rem;
+    text-align: left;
+    text-decoration: none;
+    font-size: $sidebar-menu-link-font-size;
+    color: $sidebar-menu-color;
+    border: 0;
+    transition: background-color $transition-duration, color $transition-duration;
+
+    &:hover,
+    &:focus {
+      background-color: $sidebar-menu-link-hover;
+      text-decoration: none;
+    }
+
+    &:focus-visible {
+      outline-offset: -0.188rem;
+    }
+
+    &::after {
+      content: none;
+    }
+
+    &.disabled {
+      pointer-events: none;
+      cursor: not-allowed;
+      opacity: 0.6;
+
+      &:hover,
+      &:focus {
+        background-color: transparent;
+      }
+    }
+
+    .icon {
+      font-size: 1.25rem;
+    }
+
+    .title {
+      line-height: 1.2;
+    }
+
+    &.collapsed {
+      .menu-caret {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .navigation-btn {
+    width: 100%;
+    border-radius: 0;
+    color: $sidebar-menu-color;
+  }
+
+  // dropdown submenu static on open menu
+  .navigation-dropdown {
+    position: static;
+
+    &.show {
+      .navigation-link {
+        background-color: #094158;
+      }
+    }
+  }
+
+  .navigation-submenu {
+    position: static !important;
+    transform: none !important;
+    width: 100%;
+    border: 0;
+    border-radius: 0;
+    background-color: #0B4F6C;
+  }
+
+  .menu-caret {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 1rem;
+    width: 1rem;
+    height: 1rem;
+    font-size: 0.8rem;
+    line-height: 1;
+    color: $sidebar-menu-color;
+    transition: transform $transition-duration ease;
+  }
+}
+
+.navigation-item.active {
+
+  &,
+  >a {
+    background-color: $sidebar-menu-link-hover;
+  }
+
+  >button:not(.dropdown-toggle),
+  >a {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 0.25rem;
+      height: 100%;
+      background-color: $sidebar-menu-color;
+    }
+  }
+
+}
+
+.bg-closed {
+  .active {
+    >a::before {
+      width: 0;
+    }
+  }
+}
+
+.navigation-submenu-link {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 2.125rem;
+  padding: 0 1rem 0 3.5rem;
+  color: $sidebar-menu-color;
+  font-size: 1rem;
+  text-decoration: none;
+  border: 0;
+  background-color: #0B4F6C;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $sidebar-menu-color;
+    background-color: #094158;
+  }
+
+  &:focus-visible {
+    outline-offset: -0.188rem;
+  }
+
+}
+
+.menu-opened {
+  transition: all 0.3s linear;
+}
+
+.navigation-link {
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 0.188rem #729BAC;
+  }
+}
+
+// Menu en dropdown flottante quand menu icon only
+.navigation-submenu-dropdown {
+  margin-top: -$sidebar-menu-link-height !important;
+  margin-left: calc($sidebar-menu-collapsed-width + 0.5rem) !important;
+}
+
+.navigation-submenu-collapsed {
+  border: 0;
+
+  // Cache un before transparent pour coller le ul au menu pour la continuité du mouseenter
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -0.5rem;
+    z-index: -1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+  }
+
+  >li:first-child {
+    .navigation-submenu-link {
+      border-radius: $dropdown-border-radius $dropdown-border-radius 0 0;
+    }
+  }
+
+  >li:last-child {
+    .navigation-submenu-link {
+      border-radius: 0 0 $dropdown-border-radius $dropdown-border-radius;
+    }
+  }
+
+  .navigation-submenu-link {
+    padding: 0 1rem;
+  }
+
+  .active {
+    .navigation-submenu-link {
+      background-color: $sidebar-menu-link-hover;
+    }
+  }
+}
+
+// Menu en tooltip flottante quand menu icon only
+.menu-tooltip {
+  margin-left: calc(($sidebar-width * -1) + $sidebar-menu-collapsed-width + 0.5rem) !important;
+}
+
+.referential-icon {
+  color: transparent;
+  background-image: url('./lib/assets/images/icon/referential-icon.svg');
+  background-repeat: no-repeat;
+  background-position: center center;
+}