@cityway/bo-ui 1.0.0

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;
+  }
+
+}

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; }
+    }
+}