@cityway/bo-ui 1.0.0

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

@@ -0,0 +1,195 @@
+.sidebar-scroll {
+  position: sticky;
+  top: 0;
+  height: 100dvh;
+  overflow: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .responsive-menu.bg-opened & {
+    width: $sidebar-width;
+    z-index: 10;
+  }
+
+  .responsive-menu &
+  .bg-closed & {
+    overflow: hidden;
+  }
+}
+
+.wrapper-content-opened.wrapper-content-responsive {
+  margin-left: -$sidebar-width;
+}
+
+.sidebar {
+  display: block;
+  width: $sidebar-width;
+  min-height: 100dvh;
+
+  padding-bottom: calc(17rem + #{$footer-height});
+  background-color: $sidebar-menu-bg;
+  background-image: url("./lib/assets/images/common/logo-fr-bw.svg"), url("./lib/assets/images/common/bg-menu.svg");
+  background-size: 200px 72px, contain;
+  background-repeat: no-repeat, no-repeat;
+  background-position: bottom calc(4.5rem + #{$footer-height}) center, bottom 3.5rem left;
+  transition-duration: 400ms;
+  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition-property: all;
+
+  .lang-en & {
+    background-image: url("./lib/assets/images/common/logo-en-bw.svg"), url("./lib/assets/images/common/bg-menu.svg");
+  }
+
+  @media (any-pointer: coarse) {
+    width: calc(100%);
+  }
+
+  &::before {
+    position: absolute;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    content: "";
+    display: block;
+    opacity: 0.8;
+  }
+
+  .bg-closed & {
+    display: block;
+    width: 3.2rem;
+    overflow: hidden;
+    padding-bottom: 17rem;
+    background-image: url("./lib/assets/images/common/logo-fr-bw.svg"), url("./lib/assets/images/common/bg-menu.svg");
+    background-size: 0, $sidebar-width;
+    background-repeat: no-repeat, no-repeat;
+    background-position: bottom 14.15rem center, bottom 122px left -20px;
+  }
+
+  .responsive-menu & {
+    position: absolute;
+    z-index: 10;
+  }
+
+  .responsive-menu.bg-close & {
+    width: 0;
+  }
+
+  .btn-close-menu {
+    position: absolute;
+    top: 0.875rem;
+    right: 1rem;
+    display: flex;
+    width: auto;
+    padding: 0.125rem;
+    text-decoration: none;
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: transparent !important;
+      border-color: transparent !important;
+      opacity: 0.75;
+    }
+
+    .optyweb {
+      font-size: 1rem;
+    }
+  }
+
+  .custom-checkbox {
+    padding-left: 1.2rem;
+  }
+
+  .form-check-label {
+    border-color: 1px solid rgba(255, 255, 255, 0.54);
+  }
+
+  .custom-checkbox .form-check-input:checked~.form-check-label {
+
+    &::before,
+    &::after {
+      color: rgba(255, 255, 255, 0.54);
+    }
+  }
+
+  .bo-change-app::before {
+    right: 0.0625rem;
+    bottom: 0.0625rem;
+  }
+
+}
+
+.sidebar-footer {
+  position: fixed;
+  bottom: 0;
+  z-index: 1;
+  width: $sidebar-width;
+  min-height: $footer-height;
+
+  .navbar-nav {
+    justify-content: center;
+    align-items: center;
+    gap: 1.5rem;
+  }
+
+  .nav-item {
+    margin: 0;
+  }
+
+  .nav-link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    color: $sidebar-menu-color;
+    text-decoration: none;
+    border-radius: 10rem;
+    background-color: $sidebar-menu-bg;
+
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: $sidebar-menu-link-hover;
+    }
+
+    &:focus-visible {
+      outline-offset: 0.188rem;
+    }
+  }
+
+  .responsive-menu.bg-closed & {
+    opacity: 0;
+  }
+
+  &.sidebar-footer-closed {
+    width: $sidebar-menu-collapsed-width;
+    padding: 0.125rem;
+    transition-duration: 400ms;
+    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+    transition-property: all;
+
+    .navbar-nav {
+      flex-direction: column;
+      gap: 0.5rem;
+      padding: 0.5rem 0;
+    }
+
+    .nav-link {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 2rem;
+      height: 2rem;
+
+      .optyweb,
+      .bo-icons {
+        font-size: 1rem;
+      }
+    }
+  }
+}

package/lib/assets/styles/scss/mixins/_utilities.scss

@@ -0,0 +1,9 @@
+@function rgba-to-rgb($rgba, $opacity: 0, $background: $white) {
+    @if $opacity > 0 {
+      @if $opacity < 1 {
+        $opacity: $opacity * 100
+      }
+      @return mix(mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%), rgb(255,255,255), $opacity);
+    }
+    @return mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%);
+  }

package/lib/assets/styles/scss/styles.scss

@@ -0,0 +1,86 @@
+//## Import des variables de couleurs
+//--------------------------------------------------------
+//@import "scss/variables-colors";
+
+//## Import de bootstrap contrôlé
+//--------------------------------------------------------
+//@import "bootstrap";
+@import "bootstrap/scss/mixins/banner";
+@include bsBanner("");
+
+
+// scss-docs-start import-stack
+// Configuration
+@import "bootstrap/scss/functions";
+@import "variables/custom";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// Layout & components
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+@import "bootstrap/scss/nav";
+@import "bootstrap/scss/navbar";
+@import "bootstrap/scss/card";
+@import "bootstrap/scss/accordion";
+@import "bootstrap/scss/breadcrumb";
+@import "bootstrap/scss/pagination";
+@import "bootstrap/scss/badge";
+@import "bootstrap/scss/alert";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/list-group";
+@import "bootstrap/scss/close";
+@import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal";
+@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/popover";
+@import "bootstrap/scss/carousel";
+@import "bootstrap/scss/spinners";
+@import "bootstrap/scss/offcanvas";
+@import "bootstrap/scss/placeholders";
+
+// Helpers
+@import "bootstrap/scss/helpers";
+
+// Utilities
+@import "bootstrap/scss/utilities/api";
+// scss-docs-end import-stack
+
+//## Mixins
+//--------------------------------------------------------
+@import "mixins/utilities";
+
+//## Import des variables propres au site
+//--------------------------------------------------------
+@import "variables/site";
+
+//## Import des fonts
+//--------------------------------------------------------
+@import "../../fonts/nunito/nunito";
+@import "../../fonts/optyweb/optyweb.scss";
+@import "../../fonts/bo/bo.scss";
+
+
+//## Import styles
+//--------------------------------------------------------
+@import "custom-bootstrap";
+@import "core";
+@import "components";
+
+// Tools
+//--------------------------------------------------------
+@import "tools/loader";
+@import "tools/focus";

package/lib/assets/styles/scss/tools/_focus.scss

@@ -0,0 +1,39 @@
+
+
+[tabindex="-1"]:focus,
+[tabindex="-1"]:focus-visible {
+  outline: none;
+  box-shadow: none !important;
+}
+
+// Déstyler tous les focus de bootstrap
+.stretched-link:focus::after, // stretched link
+:focus,
+.btn:not(:disabled):not(.disabled):active:focus,
+.btn:not(:disabled):not(.disabled).active:focus,
+button:focus,
+.btn:focus,
+.btn-secondary:focus,
+.btn-primary:focus {
+  outline: 0;
+  box-shadow: none;
+}
+
+
+// Styler le focus-visible
+.stretched-link:focus-visible::after, // stretched link
+:focus-visible,
+.btn:not(:disabled):not(.disabled):active:focus-visible,
+.btn:not(:disabled):not(.disabled).active:focus-visible,
+button:focus-visible,
+.btn:focus-visible,
+.btn-secondary:focus-visible,
+.btn-primary:focus:focus-visible {
+  outline: solid 0.188rem #729BAC;
+  box-shadow: none;
+}
+
+a:focus-visible {
+  outline-offset: 0.188rem;
+  border-radius: 0.125rem;
+}

package/lib/assets/styles/scss/tools/_loader.scss

@@ -0,0 +1,106 @@
+.animated-loader {
+  width: $loader-size;
+  height: $loader-size;
+  border: $loader-border-size solid rgba(red($loader-bg-color), green($loader-bg-color), blue($loader-bg-color), $loader-bg-color-opacity);
+  border-top-color: $loader-color;
+  border-radius: 50%;
+  position: relative;
+  animation: loader-rotate $loader-animation-duration ease-in-out infinite;
+
+  &.white {
+    border-color: rgba(red($white), green($white), blue($white), .25);
+    border-top-color: $white;
+  }
+}
+
+// Sizes
+.animated-loader-medium {
+  .animated-loader {
+    width: calc($loader-size / 1.5);
+    height: calc($loader-size / 1.5);
+    border-width: calc($loader-border-size / 1.5);
+  }
+
+  .animated-loader-text {
+    font-size: $font-size-base;
+  }
+}
+
+.animated-loader-small {
+  .animated-loader {
+    width: calc($loader-size / 2);
+    height: calc($loader-size / 2);
+    border-width: calc($loader-border-size / 2);
+  }
+
+  .animated-loader-text {
+    font-size: $font-size-base * 0.8;
+  }
+}
+
+.animated-loader-xsmall {
+  .animated-loader {
+    width: calc($loader-size / 3);
+    height: calc($loader-size / 3);
+    border-width: calc($loader-border-size / 3);
+  }
+
+  .animated-loader-text {
+    font-size: $font-size-base * 0.8;
+  }
+}
+
+.animated-loader-text {
+  font-size: $font-size-base * 1.1;
+  font-weight: bold;
+}
+
+// Positions and sizes management
+.animated-loader-container {
+  display: flex;
+  align-items: center;
+}
+
+.animated-loader-container-center {
+  justify-content: center;
+}
+
+.animated-loader-container-top,
+.animated-loader-container-bottom {
+  flex-direction: column;
+}
+
+.animated-loader-container-top {
+  padding-bottom: 10px;
+}
+
+.animated-loader-container-bottom {
+  padding-top: 10px;
+}
+
+.animated-loader {
+
+  .animated-loader-container-right &,
+  .animated-loader-container-bottom & {
+    order: 2;
+  }
+
+  .animated-loader-container-right & {
+    margin-left: 10px;
+  }
+
+  .animated-loader-container-left & {
+    margin-right: 10px;
+  }
+}
+
+
+@keyframes loader-rotate {
+  0% {
+    transform: rotate(0deg)
+  }
+
+  100% {
+    transform: rotate(360deg)
+  }
+}

package/lib/assets/styles/scss/variables/_colors.scss

@@ -0,0 +1,43 @@
+
+// Neutral
+$dark:    #1F1F1F;
+$grey1:   #F9F9F9;
+$grey2:   #F5F5F5;
+$grey3:   #E9E9E9;
+$grey4:   #E9ECEF;
+$grey5:   #E2E5E9;
+$grey6:   #8996A9;
+$grey7:   #D6D6D6;
+$grey8:   #797676;
+$grey9:   #6A6A6A;
+$grey10:  #6C757D;
+$white:   #ffffff;
+
+// Primary
+$primary-default: #0B4F6C;
+$primary-hover: #083f56;
+$primary-link: #1378A8;
+
+// Info
+$info-default: #0480A9;
+$info-hover: #036484;
+
+// Warning
+$warning-default: #F39E02;
+$warning-hover: #CD8502;
+
+// Danger
+$danger-default: #E1001A;
+$danger-hover: #BB0016;
+
+// Success
+$success-default: #238909;
+$success-hover: #2F7C20;
+
+// Success
+$light-default: $grey2;
+$light-hover: $grey4;
+
+// Table
+$alice-blue: #ECF8FD;
+