@cityway/basic-ui 1.0.1

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

@@ -0,0 +1,14 @@
+// Import only used components
+
+// Eternal css from lib components
+//@import "ngx-toastr/toastr-bs5-alert";
+@import "@ng-select/ng-select/themes/default.theme.css";
+
+// Custom scss product
+@import "components/forms-firefox";
+//@import "components/ng-select";
+@import "components/ngx-intl-tel-input";
+//@import "components/ngx-toast";
+@import "components/legend";
+@import "components/pwd-policy";
+

package/lib/assets/styles/scss/_custom-bootstrap.scss

@@ -0,0 +1,22 @@
+
+@import "bootstrap/accordion";
+//@import "bootstrap/alert";
+//@import "bootstrap/badge";
+@import "bootstrap/breadcrumb";
+//@import "bootstrap/button-group";
+//@import "bootstrap/buttons";
+//@import "bootstrap/card";
+//@import "bootstrap/close";
+@import "bootstrap/dropdown";
+@import "bootstrap/forms";
+@import "bootstrap/input-group";
+@import "bootstrap/lists";
+@import "bootstrap/modal";
+@import "bootstrap/pagination";
+@import "bootstrap/popover";
+@import "bootstrap/progress";
+@import "bootstrap/reboot";
+@import "bootstrap/tables";
+//@import "bootstrap/tabs";
+@import "bootstrap/tooltip";
+@import "bootstrap/type";

package/lib/assets/styles/scss/bootstrap/_accordion.scss

@@ -0,0 +1 @@
+

package/lib/assets/styles/scss/bootstrap/_alert.scss

@@ -0,0 +1,32 @@
+//
+// Base styles
+//
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissible {
+  // Adjust close link position
+  .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 0.5rem $alert-padding-x;
+    font-size: 2rem;
+    color: inherit;
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    .alert-link {
+      color: inherit;
+    }
+
+    .btn-close {
+      $emphasis-color: map-get($emphasis-colors, "#{$color}");
+      background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$emphasis-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"))
+    }
+  }
+}

package/lib/assets/styles/scss/bootstrap/_badge.scss

@@ -0,0 +1,36 @@
+
+// Colors
+//
+// Contextual variations (linked badges get darker on :hover).
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.25rem;
+  color: var(--bs-alert-color);
+  background-color: var(--bs-alert-bg);
+
+  .icon {
+    margin-right: 0.25rem;
+    font-size: 1rem;
+  }
+}
+
+@each $state in map-keys($theme-colors) {
+  .badge-#{$state} {
+    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
+  }
+}
+
+.badge-light {
+  color: var(--bs-body-color);
+  border-color: var(--bs-grey3);
+  background-color: var(--bs-grey3);
+}
+
+.badge-dark {
+  color: color-contrast($dark);
+  background-color: var(--bs-dark);
+}
+

package/lib/assets/styles/scss/bootstrap/_breadcrumb.scss

@@ -0,0 +1,46 @@
+.breadcrumb {
+    @include media-breakpoint-down(sm) {
+      flex-wrap: nowrap;
+      .optyweb {
+        color: var(--bs-primary);
+        &:hover,
+        &:active,
+        &:focus {
+          color: var(--bs-primary-hover);
+        }
+      }
+    }
+  }
+  .breadcrumb-item {
+    display: flex;
+    align-items: baseline;
+    color: var(--bs-grey9);
+
+    + .breadcrumb-item {
+      &::before {
+        font-family: $cw-font-transinfo;
+        font-size: 0.75rem;
+      }
+    }
+
+    // Breadcrumb h1 title
+    h1 {
+      display: flex;
+      margin: 0;
+      font-size: 1.125rem;
+      line-height: 1;
+      @include media-breakpoint-down(sm) {
+        font-size: 1rem;
+      }
+    }
+
+    // Cache tous les éléments en rwd sauf titre
+    @include media-breakpoint-down(sm) {
+      &:first-child a {
+        text-decoration: none;
+      }
+      &:not(:first-child):not(:last-child) {
+        display: none;
+      }
+    }
+  }

package/lib/assets/styles/scss/bootstrap/_button-group.scss

@@ -0,0 +1,107 @@
+.btn-group {
+  .btn-secondary:not(:disabled):not(.disabled) {
+    &:active,
+    &.active {
+      color: color-contrast($primary);
+      background-color: var(--bs-primary);
+    }
+  }
+
+  .btn-form {
+    color: var(--bs-body-color);
+    border-color: $input-border-color;
+    &:not(:disabled):not(.disabled) {
+      &:active,
+      &.active {
+        background-color: var(--bs-grey4);
+      }
+    }
+    .bo-icon,
+    .optyweb {
+      color: var(--bs-primary);
+    }
+
+    .btn {
+      margin-bottom: 0;
+    }
+  }
+
+  .btn-secondary,
+  .btn-form {
+    &:disabled:not(.btn-link),
+    &.disabled {
+      pointer-events: none;
+      color: var(--bs-grey10);
+      border-color: $input-border-color;
+      background-color: $input-bg;
+
+      .optyweb {
+        color: var(--bs-grey10);
+      }
+    }
+  }
+}
+
+// button group en checkbox ou radio
+.btn-group {
+  // Prevent double borders when buttons are next to each other
+  > label:first-of-type {
+    border-top-left-radius: $btn-border-radius !important;
+    border-bottom-left-radius: $btn-border-radius !important;
+  }
+
+  > label {
+    .optyweb {
+      color: var(--bs-primary);
+    }
+  }
+
+  input:checked + label {
+    &.btn-form {
+      background-color: var(--bs-primary);
+      color: color-contrast($primary);
+    }
+    &.btn-secondary:not(:disabled):not(.disabled) {
+      color: color-contrast($primary);
+      background-color: var(--bs-primary);
+    }
+  }
+
+  input:focus + label {
+    &.btn-form {
+      border-color: $input-focus-border-color;
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+
+  input:disabled + label {
+    &.btn-secondary {
+      pointer-events: none;
+      color: $btn-disabled-color;
+      border-color: $btn-disabled-bg;
+      background-color: $btn-disabled-bg;
+    }
+    &.btn-form {
+      pointer-events: none;
+      color: var(--bs-grey10);
+      border-color: $input-border-color;
+      background-color: $input-bg;
+
+      .optyweb {
+        color: var(--bs-grey10);
+      }
+    }
+  }
+
+  input:disabled:checked + label {
+    &.btn-form {
+      color: $white;
+      background-color: rgba-to-rgb($form-check-input-checked-bg-color, $form-check-input-disabled-opacity);
+      border-color: rgba-to-rgb($form-check-input-checked-bg-color, $form-check-input-disabled-opacity);
+
+      .optyweb {
+        color: $white;
+      }
+    }
+  }
+}

package/lib/assets/styles/scss/bootstrap/_buttons.scss

@@ -0,0 +1,324 @@
+@use "sass:map";
+
+// Responsive des btn
+.btn {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  @include media-breakpoint-up(sm) {
+    width: auto;
+  }
+}
+
+// btn secondary style entièrement custom custom
+.btn-secondary {
+  @include button-variant(
+    $white, // bg
+    $primary, //border
+    $grey2, //hover-background
+    $primary-hover, //$hover-border
+    $grey2, // active-background
+    $primary-hover); // $active-border
+
+  color: var(--bs-primary);
+  &:hover, &:focus {
+    border-color: var(--bs-primary);
+    background-color: var(--bs-grey2);
+  }
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    border-color: var(--bs-primary);
+  }
+
+}
+
+// btn primary hover custom
+// .btn-primary {
+//   &:hover, &:focus, &:active {
+//     background-color: var(--bs-primary-hover);
+//     border-color: var(--bs-primary-hover);
+//   }
+// }
+
+// btn danger default outline style
+.btn-danger {
+  color: var(--bs-danger);
+  background-color: $white;
+  &:hover, &:focus, &:active {
+    &:hover, &:focus, &:active {
+      background-color: var(--bs-grey2);
+      border-color: var(--bs-danger-hover);
+      color:var(--bs-danger-hover);
+    }
+  }
+}
+
+// btn danger (action cell)
+.btn-link.text-danger {
+  &:hover, &:focus, &:active {
+    color: var(--bs-danger-hover) !important;
+  }
+}
+
+// btn info hover custom
+.btn-info {
+  &:hover, &:focus, &:active {
+    background-color: var(--bs-info-hover);
+    border-color: var(--bs-info-hover);
+  }
+}
+
+// btn warning hover custom
+.btn-warning {
+  &:hover, &:focus, &:active {
+    background-color: var(--bs-warning-hover);
+    border-color: var(--bs-warning-hover);
+    color: var(--bs-body-color);
+  }
+}
+
+// btn success hover custom
+.btn-success {
+  &:hover, &:focus, &:active {
+    background-color: var(--bs-success-hover);
+    border-color: var(--bs-success-hover);
+  }
+}
+
+// btn light hover custom
+.btn-light {
+  &:hover, &:focus, &:active {
+    background-color: var(--bs-light-hover);
+    border-color: var(--bs-light-hover);
+  }
+}
+
+.modal-footer {
+  .btn-danger {
+    color: $white;
+    background-color: var(--bs-danger);
+    &:hover, &:focus, &:active {
+      &:hover, &:focus, &:active {
+        color: $white;
+        background-color: var(--bs-danger-hover);
+        border-color: var(--bs-danger-hover);
+      }
+    }
+  }
+}
+
+// btn large, use border-radius base instead of large
+.btn-lg {
+  border-radius: $border-radius;
+}
+
+// possibilité d'affecter une largeur min aux bouton (input sur composant)
+.btn-min-width {
+  min-width: $btn-min-width;
+}
+
+// Spinner button
+.spinner-border {
+  position: relative;
+  pointer-events: none;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: inline-block;
+    width: 1.2rem;
+    height: 1.2rem;
+    margin-top: -0.6rem;
+    margin-left: -0.6rem;
+    vertical-align: text-bottom;
+    border-radius: 50%;
+    -webkit-animation: spinner-border 0.75s linear infinite;
+    animation: spinner-border 0.75s linear infinite;
+  }
+
+  @each $color, $value in $theme-colors {
+    &.btn-#{$color} {
+      color: map.get($theme-colors, "#{$color}");
+      &::before {
+        border: 0.2em solid color-contrast(map.get($theme-colors, "#{$color}"));
+        border-right-color: transparent;
+      }
+    }
+  }
+
+  &.btn-secondary {
+    &,
+    &:focus {
+      color: $white;
+    }
+    &::before {
+      border: 0.2em solid var(--bs-primary);
+      border-right-color: transparent;
+    }
+    &.btn-actions-on-table {
+      &.btn-import {
+        pointer-events: auto;
+      }
+      &,
+      &:focus {
+        color: lighten($body-color, 50%);
+      }
+    }
+  }
+}
+@-webkit-keyframes spinner-border {
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes spinner-border {
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+// Import buttons
+.btn-import {
+  &.btn-secondary {
+    &::before {
+      content: "";
+      position: relative;
+      display: inline-block;
+      width: 1.2rem;
+      height: 1.2rem;
+      margin-top: -0.7rem;
+      vertical-align: text-bottom;
+      border: 0.2em solid var(--bs-primary);
+      border-right-color: transparent;
+      border-radius: 50%;
+      -webkit-animation: spinner-border 0.75s linear infinite;
+      animation: spinner-border 0.75s linear infinite;
+    }
+  }
+  &.btn-success {
+    &::before {
+      content: "\f071";
+      position: relative;
+      top: 0.15rem;
+      left: -0.15rem;
+      font-family: "font-bo";
+    }
+  }
+  &.btn-warning {
+    &::before {
+      content: "\e129";
+      position: relative;
+      top: 0.15rem;
+      left: -0.15rem;
+      font-family: "optyweb";
+    }
+  }
+  &.btn-danger {
+    &::before {
+      content: "\e132";
+      position: relative;
+      top: 0.15rem;
+      left: -0.15rem;
+      font-family: "optyweb";
+    }
+  }
+}
+
+// Disabled buttons
+// Serves on clickable elements that cannot be with point-event: none
+// ex: disabled element with a tooltip on hover
+.btn-disabled {
+  opacity: 0.65;
+  cursor: default !important;
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+}
+// If used in table-action-cell
+.table-action-cell .btn-disabled.btn-link:not(.dropdown-toggle) {
+  &:hover, &:focus {
+    text-decoration: none;
+  }
+}
+
+// Disabled buttons
+.btn.disabled:not(.btn-link),
+.btn:disabled:not(.btn-link) {
+  opacity: 1;
+  color: $btn-disabled-color;
+  border-color: $btn-disabled-bg;
+  background-color: $btn-disabled-bg;
+}
+.btn.disabled.btn-link,
+.btn:disabled.btn-link {
+  color: $btn-disabled-bg !important;
+  opacity: 1;
+}
+
+// Btn popover
+.btn-popover {
+  line-height: 1;
+  padding: 0 !important;
+  border-radius: 1rem; // For focus-visible
+  border: none;
+  legend &,
+  label & {
+    width: auto;
+    margin-top: -0.25rem;
+    margin-left: 0.5rem;
+    text-decoration: none;
+  }
+}
+.btn-popover-icon {
+  color: var(--bs-primary);
+  &:hover, &:focus, &:active {
+    color: var(--bs-primary-hover);
+  }
+}
+
+// Outline buttons
+.btn-outline-primary {
+  background-color: $white;
+}
+
+// comme un lien
+.btn-link-like {
+  appearance: none;
+  display: inline;
+  padding: 0;
+  line-height: $line-height-base;
+  text-align: left;;
+  border: 0;
+}
+
+.btn-container {
+  text-align: right;
+  .btn {
+    margin-bottom: 0.5rem;
+    margin-left: 0;
+  }
+
+  @include media-breakpoint-between(sm, md) {
+    display: flex;
+   .btn {
+      min-width: auto;
+      flex: 1 1 auto;
+      margin-left: 0.5rem;
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    .btn {
+      margin-bottom: 0;
+      margin-left: 0.5rem;
+    }
+  }
+}

package/lib/assets/styles/scss/bootstrap/_card.scss

@@ -0,0 +1,107 @@
+app-card {
+  display: block;
+}
+
+app-card,
+.card {
+  border: 0;
+  margin-bottom: 1rem;
+  @include media-breakpoint-up(md) {
+    margin-bottom: $grid-gutter-width;
+  }
+}
+
+.card-header {
+  margin-top: 0; // Removes the default margin-top of <hN>
+
+  .card-body + & {
+    border-top: $card-border-width solid $card-border-color;
+  }
+}
+
+.card-body {
+  padding: $card-spacer-y $card-spacer-x;
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  .card-body + & {
+    border-top: $card-border-width solid $card-border-color;
+  }
+}
+
+.card-footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0 $card-spacer-x $card-spacer-y;
+  min-height: 3.5rem;
+  border: 0;
+  @include media-breakpoint-up(sm) {
+    flex-direction: row;
+  }
+}
+
+.card {
+  box-shadow: $box-shadow;
+}
+
+
+// Grey cards in modals for description list
+.custom-card-light {
+  margin-bottom: calc($grid-gutter-width + 0.5rem);
+  padding: 1rem;
+  background-color: var(--bs-grey1);;
+  border-radius: $border-radius;
+  h3:first-child {
+    margin-top: 0;
+  }
+}
+
+
+// Card avec grid présentation
+.card-body-grid {
+  display: grid;
+  gap: 0 calc($grid-gutter-width * 3);
+  flex: 1 1 auto;
+  min-height: 1px;
+
+  padding: $card-spacer-y $card-spacer-x 0.25rem $card-spacer-x;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: auto auto;
+    grid-template-rows: max-content;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  &.card-body-grid-3-cols {
+
+    @include media-breakpoint-between(md, xl) {
+      grid-template-columns: auto auto;
+      grid-template-rows: max-content;
+      > div:last-child {
+        grid-column-start: 1;
+        grid-column-end: span 2;
+      }
+    }
+
+    @include media-breakpoint-up(xl) {
+      grid-template-columns: max-content max-content auto;
+      grid-template-rows: max-content;
+    }
+  }
+
+  .card-body-grid-item {
+    margin-bottom: $form-group-margin-bottom;
+  }
+}
+
+.map-within {
+  .card-body {
+    padding: 0;
+  }
+}

package/lib/assets/styles/scss/bootstrap/_close.scss

@@ -0,0 +1,8 @@
+.close {
+
+  &:focus,
+  &:focus:active {
+    border-radius: $border-radius;
+  }
+
+}