@cityway/basic-ui 1.0.1

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

@@ -0,0 +1,155 @@
+// Tr background according to status
+.table,
+.table-bordered {
+
+  thead, tbody, tfoot, tr, td, th {
+    border-color: $table-border-color;
+  }
+
+  tr th,
+  tr td {
+
+    // cases à cocher
+    .form-check {
+      margin: 0;
+      padding: 0;
+
+      &-input {
+        margin: 0;
+      }
+    }
+
+    // styles des liens comportement inverse au défaut sur le souligné
+    a {
+      text-decoration: none;
+      &:hover, &:active, &:focus {
+        text-decoration: underline;
+      }
+    }
+    .btn-link {
+      width: 100%;
+      justify-content: flex-start;
+      padding: $table-cell-padding-y $table-cell-padding-x;
+      text-align: left;
+      text-decoration: none;
+      border-radius: 0;
+      &:focus {
+        outline-offset: -0.188rem;
+      }
+    }
+  }
+  tr td {
+    vertical-align: middle;
+  }
+}
+
+
+// Table full width
+.table-responsive-full-width {
+  width: calc($width-minus-container - 1rem);
+  max-width: calc($width-minus-container - 1rem);
+  margin: (-$spacer) calc(-#{$grid-gutter-width} + 0.5rem);
+
+  overflow: visible;
+
+  @include media-breakpoint-down(sm) {
+    width: $width-minus-container-rwd;
+    max-width: $width-minus-container-rwd;
+    margin: -1rem -1rem 0 -1rem;
+  }
+
+  .table-full-width {
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+
+    border-collapse: separate;
+    border-spacing: 0;
+    > thead {
+      position: sticky;
+      top: 17px;
+      z-index: 9;
+      background-color: $white;
+    }
+
+    th, td {
+      border-top-width: 0;
+      border-left-width: 0;
+      &:first-child {
+        border-left-width: 1px;
+      }
+    }
+  }
+
+  .card-body &,
+  .tab-content & {
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+
+    // @include media-breakpoint-down(sm) {
+    //   width: $width-minus-container-rwd;
+    //   max-width: $width-minus-container-rwd;
+    //   margin: -1rem -1rem 0 -1rem;
+    // }
+  }
+  .tab-content & {
+    @include media-breakpoint-down(sm) {
+      margin-top: 0.6rem;
+    }
+  }
+}
+
+.table-full-width {
+  width: $width-minus-card;
+  max-width: $width-minus-card;
+  margin: -$spacer;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  background-color: $white;
+
+  @include media-breakpoint-down(sm) {
+    width: $width-minus-container-rwd;
+    max-width: $width-minus-container-rwd;
+    margin: -1rem;
+  }
+}
+
+// Heading cells
+.table,
+.table-responsive > .table-bordered {
+  border-top: solid 2px darken($table-border-color, 10%);
+  thead th {
+    border-bottom: solid 2px darken($table-border-color, 10%);
+  }
+  tbody tr:first-child td {
+    border-top-width: 0;
+  }
+}
+
+.table td.table-action-cell {
+  padding: 0;
+
+  // Allows the dropdown not to be hidden by the overflow of the rwd table
+  .dropdown {
+    position: static;
+  }
+
+  .btn-link {
+    justify-content: center;
+  }
+
+  a {
+    &:hover, &:active, &:focus {
+      text-decoration: none;
+    }
+  }
+}
+
+// No result - TODO : variables instead of #color
+.table td.no-result {
+  border-left-color: #B9DBE7;
+  border-right-color: #B9DBE7;
+  text-align: center;
+}

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: var(--bs-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);
+  }
+}