@cityway/basic-ui 1.0.1

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

@@ -0,0 +1,53 @@
+.dropdown-toggle::after {
+  margin-left: 0.5rem;
+}
+
+.show {
+    .dropdown-toggle {
+        &::after {
+          border-top: 0;
+          border-right: 0.3em solid transparent;
+          border-bottom: 0.3em solid;
+          border-left: 0.3em solid transparent;
+        }
+    }
+}
+
+.input-group {
+    .dropdown-toggle {
+      color: var(--bs-body-color);
+    }
+}
+
+.dropdown-header {
+  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+}
+
+.dropdown-item {
+    cursor: pointer;
+    &,
+    > a { text-decoration: none; }
+    &:focus {
+      outline: dotted 1px $input-border-color;
+    }
+    &:active {
+      .btn {
+          color: $dropdown-link-active-color;
+      }
+    }
+    &.disabled,
+    &:disabled {
+      opacity: 0.65;
+    }
+}
+
+
+.dropdown-nocaret,
+.dropup.dropdown-nocaret {
+    &::after { content: none !important; }
+}
+.dropdown-xs-nocaret {
+    @include media-breakpoint-down(xs) {
+        &::after { content: none; }
+    }
+}

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

@@ -0,0 +1,259 @@
+.field-required {
+  margin-top: -0.5rem;
+  font-size: 0.75rem;
+  text-align: right;
+
+  @include media-breakpoint-down(sm) {
+    margin-bottom: 0.5rem;
+  }
+}
+
+.form-group {
+  &,
+  .form-inline & {
+    margin-bottom: $form-group-margin-bottom;
+  }
+}
+
+.form-inline {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+}
+
+// Label in bold except checkbox/radio
+.form-label {
+  line-height: 1;
+}
+
+.form-check {
+  margin-right: 0.75rem;
+
+  &:not(:disabled)+.form-check-label {
+    cursor: pointer;
+  }
+}
+
+.form-check-label,
+.form-check-label {
+  line-height: 1.7;
+  font-weight: normal;
+}
+
+.form-switch {
+
+  .form-check-input:not(.disabled),
+  .form-check-input:not(:disabled) {
+    .form-check-label {
+      cursor: pointer;
+    }
+  }
+}
+
+.input-group-text {
+  height: $input-height;
+  padding: 0 $input-padding-x;
+}
+
+.form-text+.form-text {
+  margin-top: 0;
+}
+
+.form-select,
+.form-control {
+  height: $input-height;
+
+  &[disabled],
+  .disabled,
+  &[readonly] {
+    color: var(--bs-grey10);
+    border-color: $input-disabled-border-color;
+    background-color: $input-disabled-bg;
+  }
+
+  &[readonly]+.input-group-append>.input-group-text {
+    border-width: 0;
+  }
+
+  &[readonly]+.input-group-append>.btn-secondary {
+    border-color: $input-disabled-border-color;
+    border-left-color: var(--bs-grey10);
+    background-color: $input-disabled-border-color;
+    color: var(--bs-grey10);
+  }
+}
+
+// Switch red version
+.form-switch-danger {
+
+  .form-check-input:checked {
+    border-color: var(--bs-danger);
+    background-color: var(--bs-danger);
+  }
+
+  .form-check-input:focus {
+    box-shadow: 0 0 0 0.2rem #FD5D75;
+  }
+
+  .form-check-input:active:focus {
+    border-color: var(--bs-danger);
+  }
+}
+
+// Switch small version
+.form-switch-small {
+  padding-left: 2rem;
+  .form-check-input {
+    width: 1.5rem;
+    height: 1rem;
+    margin-top: 0.25rem;
+    margin-left: -2rem;
+  }
+}
+
+fieldset {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+// Fieldset legend => equivalent style label
+legend {
+  margin-bottom: 0.5rem;
+  line-height: 1;
+  font-size: $font-size-base;
+  font-weight: bold;
+}
+
+// Button in RWD block style
+@include media-breakpoint-down(sm) {
+  .btn-block-rwd {
+    display: block;
+    width: 100%;
+
+    +.btn-block-rwd {
+      margin-top: 10px;
+    }
+  }
+}
+
+// Form inline
+@include media-breakpoint-down(sm) {
+  .form-row {
+    display: block;
+
+    >div:not(:last-child) {
+      margin-bottom: $form-group-margin-bottom !important;
+    }
+
+    // Bootstrap overload
+  }
+}
+
+// select
+.form-select {
+  line-height: 1;
+}
+
+// Textarea min height
+textarea.form-control {
+  min-height: 5.1rem;
+}
+
+// Attachments
+input[type=file] {
+  display: block;
+  padding: 0;
+
+  // &::-moz-file-selector-button,
+  &::file-selector-button,
+  &::-webkit-file-upload-button {
+    height: $input-height;
+    margin: 0;
+    margin-bottom: 0; // Allow use of  <label class="form-label"> elements by overriding our default margin-bottom
+    margin-right: 0.5rem;
+    padding: $input-padding-y $input-padding-x;
+    font-family: $font-family-base;
+    @include font-size($input-font-size); // Match inputs
+    font-weight: $font-weight-normal;
+    line-height: 1.1;
+    color: $input-group-addon-color;
+    text-align: center;
+    white-space: nowrap;
+    border: 0;
+    border-right: $input-border-width solid $input-group-addon-border-color;
+    background-color: $input-group-addon-bg;
+    cursor: pointer;
+  }
+}
+
+input[type=file].ng-invalid:not(.ng-untouched) {
+  border-left: $input-border-width solid var(--bs-danger);
+
+  &::-webkit-file-upload-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) {
+  border-left-color: var(--bs-danger);
+
+  // &::-moz-file-selector-button,
+  &::-webkit-file-upload-button {
+    border-right-color: var(--bs-danger);
+  }
+}
+
+// Champs date /  time / datetime placeholder
+input[type=date],
+input[type=datetime-local],
+input[type=time] {
+  &:not(.has-value):not(:focus)::before {
+    content: attr(placeholder);
+    position: absolute;
+    width: calc(100% - 5rem);
+    font-size: $input-font-size;
+    color: $input-placeholder-color;
+    background-color: $input-bg;
+  }
+}
+
+// Invalid fields
+.was-validated .form-control:invalid,
+.form-control.is-invalid,
+.was-validated .form-control:valid,
+.form-control.is-valid {
+  background-image: none;
+  border-color: $input-border-color;
+}
+
+
+// See password
+.see-password-container {
+  position: relative;
+
+  .form-control {
+    padding-right: 2.8rem;
+  }
+}
+
+.see-password {
+  width: auto;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  z-index: 2;
+  cursor: pointer;
+  transform: translateY(-50%);
+
+  &.btn:focus,
+  &.btn:focus-visible {
+    outline-offset: 0;
+  }
+}
+
+// Form-controle date
+.form-control-date[readonly] {
+  background-color: $input-bg;
+}

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

@@ -0,0 +1,61 @@
+.input-group-prepend ~ ng-select {
+  margin-left: -1px;
+  z-index: 2;
+  .ng-select-container {
+    border-radius: 0 $input-border-radius $input-border-radius 0;
+  }
+  &.ng-select-opened.ng-select-bottom > .ng-select-container {
+    border-radius: 0 $input-border-radius 0 0;
+  }
+}
+
+// Button with icon in input-group (datepicker type)
+.input-group,
+.input-group {
+    .btn-secondary {
+        &.disabled, &[disabled] {
+          color: var(--bs-grey10);
+          border-color: $input-disabled-border-color;
+          border-right-color: var(--bs-grey6);;
+          background-color: $input-disabled-bg;
+        }
+    }
+
+    input {
+      ~ .btn-secondary {
+          &.disabled, &[disabled] {
+            border-right-color: $input-disabled-border-color;
+            border-left-color: var(--bs-grey6);;
+          }
+      }
+    }
+
+    .input-group-text {
+        &.disabled, &[disabled] {
+          color: var(--bs-grey10);
+          border-color: $input-disabled-border-color;
+          border-left-color: var(--bs-grey6);;
+          background-color: $input-disabled-bg;
+
+          + input {
+            &.disabled, &[disabled] {
+              border-left-color: var(--bs-grey6);;
+            }
+          }
+        }
+    }
+}
+input.ng-invalid {
+  ~ .input-group-append {
+    .btn-secondary {
+      color: var(--bs-danger);
+      &, &.disabled, &[disabled], &:hover, &:focus, &:active {
+        border-color: var(--bs-danger);
+      }
+      &:focus {
+        border-color: #FD5D75;
+        box-shadow: 0 0 0 0.2rem rgba($danger, 0.25);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+ul ul {
+  padding-left: 1.75rem;
+}
+
+dd {
+  margin-bottom: 0.25rem;
+}
+
+.custom-description-list {
+  margin-bottom: 0;
+  dd::after {
+    content: '\A';
+    white-space: pre-line;
+  }
+  dd:last-of-type::after {
+      content: '';
+  }
+  dd, dt {
+      display: inline;
+  }
+  dd, dt {
+      vertical-align: top;
+  }
+  dt::after {
+    content: ' ';
+  }
+  & + h3 {
+    margin-top: 1.5rem;
+  }
+}

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

@@ -0,0 +1,152 @@
+.modal {
+  flex-direction: column;
+  justify-content: center;
+
+  &.d-block {
+    display: flex !important;
+  }
+}
+
+.modal-title {
+  position: relative;
+  @include font-size($h2-font-size);
+  line-height: 1;
+}
+
+@include media-breakpoint-up(sm) {
+  .modal-dialog {
+    width: 100%;
+  }
+}
+
+.modal-content {
+  max-height: 95vh;
+  box-shadow: $box-shadow;
+}
+
+.modal-header {
+  min-height: 3.125rem;
+  align-items: center;
+  flex-shrink: 0;
+  padding: $modal-header-padding-y $modal-header-padding-x;
+  background-color: var(--bs-primary);
+  color: $white;
+
+  h1 {
+    line-height: 1.2;
+  }
+}
+
+.modal-body {
+  overflow: auto;
+
+  >h2 {
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  >h3 {
+    @include font-size($h3-font-size);
+  }
+}
+
+.modal-footer {
+  flex-shrink: 0;
+  min-height: 3.5rem;
+  padding: 0 $grid-gutter-width $grid-gutter-width $grid-gutter-width;
+  gap: 0.5rem;
+
+  >* {
+    margin: 0;
+  }
+
+
+  @include media-breakpoint-down(sm) {
+    * {
+      width: 100%;
+    }
+  }
+
+  .modal-md & {
+    align-items: stretch;
+
+    > * {
+      flex: 1;
+
+      .btn {
+        width: 100%;
+      }
+    }
+
+  }
+
+  .modal-sm & {
+    * {
+      width: 100%;
+
+      @include media-breakpoint-up(sm) {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.modal-xxl {
+  max-width: 90vw;
+}
+
+@include media-breakpoint-between(sm, xl) {
+  .modal-xxl {
+    max-width: 90vw;
+  }
+}
+
+
+// modal quick view
+.quick-view-modal {
+
+  // Modal traslate from right not top
+  &.modal.fade .modal-dialog {
+    transform: translate(50px, 0);
+  }
+
+  &.modal.show .modal-dialog {
+    transform: translate(10px, 0);
+  }
+
+  .modal-header {
+    border-radius: 0;
+  }
+
+  .modal-dialog {
+    position: absolute;
+    right: 10px;
+    min-height: 100%;
+    //margin: 0 0 0 auto;
+
+    &.modal-dialog-scrollable {
+      max-height: 100%;
+
+      .modal-content {
+        min-height: 100%;
+        max-height: 100%;
+      }
+
+      .component-host-scrollable {
+        flex: 1;
+      }
+    }
+  }
+
+  .modal-content {
+    border-radius: 0;
+  }
+
+  .modal-body {
+    padding: $grid-gutter-width $grid-gutter-width 0 $grid-gutter-width;
+  }
+
+  .modal-footer {
+    padding: $modal-inner-padding;
+  }
+}

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

@@ -0,0 +1,21 @@
+//
+// Base styles
+//
+
+// Pagination
+//
+// Expand pagination de bootstrap
+
+.page-item {
+  .page-link {
+    cursor: pointer;
+    .optyweb {
+      font-size: 0.75rem;
+    }
+  }
+  &.active .page-link {
+    &:hover, &:active, &:focus {
+      color: $pagination-active-color;
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+.popover-header {
+  margin-top: 0;
+  font-weight: bold;
+  border-bottom: 0;
+}

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

@@ -0,0 +1,6 @@
+@each $color, $value in $theme-colors {
+  .progress-bar.bg-#{$color} > span {
+    color: color-contrast($value);
+    font-weight: bold;
+  }
+}

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

@@ -0,0 +1,5 @@
+abbr[title],
+abbr[data-original-title] {
+    text-decoration: none;
+    border-bottom: dotted 1px #999999;
+}