@cityway/bo-ui 1.0.0

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

@@ -0,0 +1,71 @@
+.nav-tabs {
+  border-bottom: 0;
+
+  .nav-link.active {
+    border-radius: $border-radius $border-radius 0 0;
+    box-shadow: 0 5px 0 $white, $box-shadow;
+  }
+
+  .nav-item.show .nav-link {
+    background-color: transparent;
+  }
+
+  .nav-link {
+    padding: 0.75rem $grid-gutter-width;
+    line-height: 1.2;
+  }
+}
+
+.tab-content {
+  &:not(.tab-content-light):not(.tab-content-card) {
+    margin-bottom: $grid-gutter-width;
+    padding: $card-spacer-x;
+    border: $nav-tabs-border-width solid $nav-tabs-border-color;
+    border-radius: $card-border-radius;
+    background-color: $nav-tabs-content-bg;
+    background-clip: border-box;
+    box-shadow: $box-shadow;
+  }
+}
+
+// Tabs style within dropdown
+// Goes hand in hand with the directive rwd-tabs.ts
+.nav-link.dropdown-toggle {
+  background-color: transparent;
+}
+.dropdown-menu {
+  .nav-item {
+    margin: 0;
+  }
+  .nav-tabs & .nav-link,
+  .nav-tabs .nav-item.show & .nav-link {
+    color: $dropdown-link-color;
+    white-space: nowrap;
+    border: 0;
+    box-shadow: none;
+    border-radius: 0;
+
+    &:hover, &:focus {
+      color: $dropdown-link-hover-color;
+      text-decoration: none;
+      @include gradient-bg($dropdown-link-hover-bg);
+    }
+  }
+  .nav-tabs .nav-item.show & .nav-link.active,
+  .nav-tabs & .nav-link.active {
+    background-color: $dropdown-link-active-bg;
+    color: $dropdown-link-active-color;
+  }
+}
+
+// tab card
+// onglet dans une card
+// Contenu sans card
+
+.nav-tabs-card {
+  margin: 0.5rem 0 !important;
+
+  .nav-link.active {
+    box-shadow: none;
+  }
+}

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

@@ -0,0 +1,3 @@
+.tooltip-inner {
+  line-height: 1.1;
+}

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

@@ -0,0 +1,55 @@
+
+h2, .h2 {
+  margin-bottom: 1rem;
+}
+
+h3, .h3 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  color: var(--bs-grey10);
+}
+
+.bg-body {
+  background-color: $body-bg;
+}
+.bg-dark {
+  background-color: rgba(51, 51, 51, 1);
+}
+.bg-black {
+  background-color: black;
+}
+.no-bg,
+.bg-none {
+  background-color: transparent !important;
+}
+
+.v-align-middle {
+  vertical-align: middle !important;
+}
+.v-align-top {
+  vertical-align: top !important;
+}
+.v-align-bottom {
+  vertical-align: bottom !important;
+}
+
+.white-space-nowrap {
+  white-space: nowrap;
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.font-size-sm {
+  font-size: $font-size-sm;
+}
+
+.font-size-lg {
+  font-size: $font-size-lg;
+}
+
+.custom-list-group {
+  @extend .form-group;
+}

package/lib/assets/styles/scss/components/_forms-firefox.scss

@@ -0,0 +1,17 @@
+// Séparation des styles de pseudo élement pour fire car
+// incompatibles avec les déclaration webkit présentes dans _forms.scss
+
+
+// Attachments
+input[type=file].ng-invalid:not(.ng-untouched) {
+  &::file-selector-button {
+    border-right-color: var(--bs-danger);
+  }
+}
+
+input[type=file].required.ng-invalid:not(.ng-untouched),
+input[type=file][required].ng-invalid:not(.ng-untouched) {
+  &::file-selector-button {
+    border-right-color: var(--bs-danger);
+  }
+}

package/lib/assets/styles/scss/components/_leaflet.scss

@@ -0,0 +1,41 @@
+@import "../variables/site";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+
+.map-container { // parent class for styles to apply
+  .leaflet-bar,
+  &.leaflet-touch .leaflet-bar,
+  .leaflet-touch .leaflet-bar {
+    margin-top: $spacer;
+    margin-left: $spacer;
+    border: 0;
+    box-shadow: none;
+
+    .leaflet-control-zoom-fullscreen,
+    .leaflet-control-zoom-in,
+    .leaflet-control-zoom-out {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 3.5rem;
+      height: 3.5rem;
+      margin-bottom: $spacer;
+      color: var(--bs-body-color);
+      border-radius: 5rem;
+      box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.17);
+
+      &:first-child,
+      &:last-child {
+        border-radius: 5rem;
+      }
+    }
+  }
+
+  .leaflet-control-zoom-fullscreen {
+    &::before {
+      content: $cw-map-full-screen;
+      font-family: "optyweb";
+      font-size: 1.7rem;
+    }
+  }
+}

package/lib/assets/styles/scss/components/_legend.scss

@@ -0,0 +1,36 @@
+
+.legend {
+  font-size: 0.75rem;
+
+  &-title {
+    margin-bottom: $form-label-margin-bottom;
+    font-weight: bold;
+  }
+  &-items {
+    display: flex;
+    gap: 2rem;
+    margin-bottom: 0;
+  }
+  &-item {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.5rem;
+
+    &-color {
+      display: inline-block;
+      width: 1rem;
+      height: 1rem;
+    }
+
+    &:not(:last-child) {
+      margin: 0;
+    }
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      background-color: map-get($bg-subtle-colors, $color);
+    }
+  }
+}

package/lib/assets/styles/scss/components/_ng-select.scss

@@ -0,0 +1,148 @@
+.ng-select {
+
+  .main-content & .ng-arrow-wrapper { // main-content to override
+    height: $input-height;
+    .ng-arrow {
+      height: $input-height;
+      width: 100%;
+      border: 0;
+      background-image: $form-select-indicator;
+      background-size: $form-select-bg-size;
+      background-position: right 0.45rem center;
+      background-repeat: no-repeat;
+    }
+  }
+
+  &.ng-select-multiple,
+  &.ng-select-single {
+    .ng-select-container {
+      align-items: center;
+      min-height: $input-height;
+      border: $input-border-width solid $input-border-color;
+
+      .ng-value-container {
+        height: 100%;
+        padding-top: 0;
+        padding-left: $input-padding-x;
+
+        .ng-value {
+          margin: 0;
+          margin-right: 0.5rem;
+        }
+
+        .ng-placeholder {
+          top: inherit;
+          padding-left: 0;
+          padding-bottom: 0;
+          color: $input-placeholder-color;
+          font-weight: $font-weight-base;
+        }
+        .ng-input {
+          top: 0.5rem;
+          padding-left: 0;
+        }
+      }
+    }
+  }
+
+  &.ng-select-single {
+    .ng-select-container {
+      .ng-value-container {
+        .ng-input {
+          > input {
+            padding-left: $input-padding-x;
+          }
+        }
+      }
+    }
+  }
+
+  &.ng-select-opened {
+
+    &.ng-select-bottom > .ng-select-container {
+      border-radius: $input-border-radius;
+    }
+
+    &> .ng-select-container {
+      border: $input-border-width solid $input-border-color;
+
+      .ng-arrow {
+        top: 0;
+      }
+    }
+  }
+
+  // Clear
+  .ng-select-container {
+    .ng-clear-wrapper {
+      width: 1.375rem;
+      color: var(--bs-grey10);
+      text-align: center;
+      &:hover, &:active, &:focus {
+        border-radius: $border-radius;
+        background-color: var(--bs-grey2);
+        .ng-clear {
+          color: var(--bs-grey10);
+        }
+      }
+      .ng-clear {
+        font-size: 1rem;
+      }
+    }
+  }
+
+  // Invalid
+  &.ng-invalid:not(.ng-untouched) {
+    border-left: 0;
+    .ng-select-container ,
+    .ng-select-container  {
+      @include validation($danger);
+    }
+  }
+
+  // readonly
+  &.ng-select-disabled > .ng-select-container {
+    color: $input-color;
+    border-color: var(--bs-grey5);
+    background-color: var(--bs-grey5);
+  }
+
+  // focus
+  &.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    box-shadow: $input-focus-box-shadow;
+  }
+
+  // focus et invalid
+  &.ng-invalid.ng-select-focused:not(.ng-select-opened):not(.ng-untouched) > .ng-select-container {
+    border-color: #FD5D75;
+    box-shadow: 0 0 0 0.2rem rgba($danger, 0.25);
+  }
+}
+
+.ng-dropdown-panel {
+  &.ng-select-bottom {
+    margin-top: 0.125rem;
+    border: $dropdown-border-width solid $dropdown-border-color;
+    border-radius: $dropdown-border-radius ;
+  }
+  .ng-dropdown-panel-items .ng-option {
+    &.ng-option-marked {
+      background-color: $dropdown-link-hover-bg;
+    }
+    &.ng-option-selected,
+    &.ng-option-selected.ng-option-marked {
+      color: $dropdown-link-active-color;
+      background-color: $dropdown-link-active-bg;
+
+      .ng-option-label {
+        font-weight: normal;
+      }
+    }
+    &.ng-option-disabled {
+      color: var(--bs-body-color);
+    }
+  }
+}

package/lib/assets/styles/scss/components/_ng2-dragula.scss

@@ -0,0 +1,36 @@
+.drag-container {
+  min-height: 10rem;
+  padding: 1rem;
+  border-radius: $input-border-radius;
+  &-from {
+    border: $input-border-width solid $input-group-addon-border-color;
+    background-color: var(--bs-grey1);;
+  }
+
+  &-to {
+    border: $input-border-width dashed $input-group-addon-border-color;
+    background-color: $white;
+  }
+}
+
+.drag-item {
+  list-style-type: none;
+  padding: 0.5rem 1rem;
+  border-radius: $input-border-radius;
+  background-color: $white;
+  box-shadow: $box-shadow;
+  cursor: move;
+
+  &:not(:last-child) {
+    margin-bottom: 0.75rem;
+  }
+}
+
+
+
+// drag-container-from
+
+// drag-container-to
+.drag-container-to {
+  border-style: dotted;
+}

package/lib/assets/styles/scss/components/_ng2-validation.scss

@@ -0,0 +1,39 @@
+@import "../variables/site";
+
+
+@mixin validation($color,$border: false) {
+  border-color: $color;
+  &:focus {
+    border-color: lighten($color, 25%);
+    box-shadow: 0 0 0 0.2rem rgba($color, 0.25);
+  }
+}
+
+.ng-invalid:not(.ng-untouched) {
+  border-color: var(--bs-danger);
+
+  &:focus {
+    border-color: #FD5D75;
+    box-shadow: 0 0 0 0.2rem rgba($danger, 0.25);
+  }
+}
+
+.ng-invalid.no-validation-style {
+  border-left: 0;
+}
+
+// ngx Editor
+.ngx-editor {
+  .ng-invalid:not(.ng-untouched) & {
+    @include validation($danger);
+  }
+}
+
+file-drop .content {
+  border-radius: $border-radius !important;
+}
+
+file-drop .drop-zone {
+  border: 1px dotted $primary !important;
+  border-radius: $border-radius !important;
+}

package/lib/assets/styles/scss/components/_ng5-slider.scss

@@ -0,0 +1,28 @@
+// To do the overload
+.main-content .ng5-slider { // to override <style>
+  .ng5-slider-tick,
+  .ng5-slider-bar {
+    background-color: $input-border-color;
+  }
+  .ng5-slider-pointer {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 0.25rem;
+    background-color: var(--bs-primary);
+        &:after {
+          top: 0.5rem;
+          left: 0.5rem;
+          width: 0.5rem;
+          height: 0.5rem;
+        }
+      &.ng5-slider-active {
+        &:after {
+          background-color: $white;
+        }
+      }
+  }
+  .ng5-slider-tick.ng5-slider-selected,
+  .ng5-slider-selection {
+    background-color: var(--bs-primary);
+  }
+}

package/lib/assets/styles/scss/components/_ngb-datepicker.scss

@@ -0,0 +1,165 @@
+.main-content {
+  // main-content to override
+
+  [ngbdatepicker] {
+    width: 6.7rem;
+  }
+
+  ngb-datepicker {
+    animation: fade 0.2s ease-in-out;
+  }
+  @keyframes fade {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+
+  // select month, year and arrows
+  .ngb-dp-header {
+    padding: 0.25rem;
+    background-color: $white;
+  }
+
+  ngb-datepicker-navigation-select>.form-select {
+    margin: 0 0.125rem;
+  }
+
+  .ngb-dp-arrow {
+    justify-content: flex-end;
+
+    &.right {
+      justify-content: flex-start;
+    }
+
+    &-btn {
+      color: var(--bs-primary);
+    }
+  }
+
+  // Month in letters
+  .ngb-dp-month-name {
+    padding: 0.25rem;
+    font-size: 1rem;
+    text-transform: capitalize;
+    background-color: $white;
+  }
+
+  // Days in letters short
+  .ngb-dp-weekdays {
+    margin-bottom: 0.25rem;
+    border-color: $dropdown-border-color;
+    background-color: var(--bs-grey2);
+  }
+
+  .ngb-dp-weekday {
+    font-size: 0.75rem;
+    font-style: normal;
+    color: var(--bs-body-color);
+    text-transform: capitalize;
+  }
+
+  // Days numbers
+  .ngb-dp-day {
+    .btn-light {
+      &:hover {
+        border-color: var(--bs-grey4);
+        background-color: var(--bs-grey4);
+      }
+    }
+
+    &.disabled {
+      background-color: var(--bs-grey2);
+
+      [ngbDatepickerDayView].outside {
+        color: $body-color !important; // override text-muted bootstrap
+      }
+    }
+  }
+
+  // Days outsite of month
+  [ngbDatepickerDayView].outside {
+    color: var(--bs-grey10) !important; // override text-muted bootstrap
+    opacity: 1;
+
+    &:hover {
+      color: $body-color !important; // override text-muted bootstrap
+    }
+  }
+
+  // gestion du fond de la colonne vide si le nombre total de mois est impaire
+  ngb-datepicker {
+    overflow: hidden;
+  }
+
+  .ngb-dp-month:last-child {
+    .ngb-dp-month-name {
+      position: relative;
+
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: var(--bs-grey1);;
+        top: 0;
+        right: -100%;
+      }
+    }
+
+    .ngb-dp-weekdays {
+      position: relative;
+
+      &::after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: calc(100% + 1px);
+        background-color: var(--bs-grey2);
+        border-bottom: 1px solid $dropdown-border-color;
+        top: 0;
+        right: -100%;
+      }
+    }
+  }
+
+  // gère le nombre d'éléments par ligne selon le nombre dl'élement total
+  .ngb-dp-months {
+
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    .ngb-dp-month:only-child {
+      grid-column: 4 / 4;
+    }
+
+    /* Between 2 and 4 children (boundaries inclusive) */
+    &:has(> :nth-child(2)):has(> :nth-child(-n+4):last-child) {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    /* Between 5 and 6 children (boundaries inclusive) */
+    &:has(> :nth-child(5)):has(> :nth-child(-n+6):last-child) {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    /* Between 7 and 8 children (boundaries inclusive) */
+    &:has(> :nth-child(7)):has(> :nth-child(-n+8):last-child) {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    /* Between 9 and 10 children (boundaries inclusive) */
+    &:has(> :nth-child(9)):has(> :nth-child(-n+10):last-child) {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+    }
+  }
+}

package/lib/assets/styles/scss/components/_ngb-timepicker.scss

@@ -0,0 +1,19 @@
+.main-content { // main-content to override
+  .ngb-tp-input-container {
+    width: 3.5rem;
+    .btn-link {
+      display: none;
+    }
+  }
+
+  ngb-timepicker.ng-invalid {
+    .ngb-tp-input {
+      border-color: var(--bs-danger);
+      &:focus {
+        border-color: #FD5D75;
+        box-shadow: 0 0 0 0.2rem rgba($danger, 0.25);
+      }
+    }
+  }
+}
+