ode-bootstrap 1.1.4-feat-produit.202306051650 → 1.1.4-feat-explorer.202306051652

package/scss/components/_app-card.scss

@@ -0,0 +1,67 @@
+.application:is(.application-react) {
+  // variant title, square
+  &.application-title {
+    display: none;
+    background-image: none;
+
+    img {
+      object-fit: contain;
+    }
+
+    @include media-breakpoint-up(md) {
+      display: flex;
+      gap: $spacer-12;
+      align-items: center;
+    }
+  }
+  &.application-square {
+    align-items: center;
+    border-radius: $border-radius;
+    display: flex;
+    flex-direction: column;
+    gap: $spacer-8;
+    width: 8rem;
+
+    > div {
+      align-items: center;
+      aspect-ratio: 1;
+      border-radius: $border-radius;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+
+.app-icon {
+  flex-shrink: 0;
+  &.icon-ratio {
+    &.square,
+    &.rounded,
+    &.rounded-circle {
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      &.icon-xs {
+        padding: $spacer-4;
+      }
+
+      &.icon-sm {
+        padding: $spacer-8;
+      }
+
+      &.icon-md {
+        padding: $spacer-8;
+      }
+
+      &.icon-lg {
+        padding: $spacer-16;
+      }
+
+      &.icon-xl {
+        padding: 3.2rem;
+      }
+    }
+  }
+}

package/scss/components/_avatar.scss

@@ -1,75 +1,146 @@
 $avatar-size: 65px !default;
 
 .avatar {
-  display: inline-block;
-  vertical-align: middle;
-  border-radius: 50%;
+  --#{$prefix}avatar-size: 8rem;
+  --#{$prefix}avatar-svg-size: 5rem;
+  --#{$prefix}avatar-bg-color: #{$white};
 
-  &--20 {
-    width: 20px;
-    height: 20px;
+  background-color: var(--#{$prefix}avatar-bg-color);
+  border-radius: 0.8rem;
+  overflow: clip;
+  min-width: var(--ode-avatar-size);
+  height: var(--#{$prefix}avatar-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1 / 1;
+
+  > img {
+    object-fit: cover;
+    margin: 0 auto;
   }
 
-  &--25 {
-    width: 25px;
-    height: 25px;
+  > svg {
+    width: var(--#{$prefix}avatar-svg-size);
+    height: var(--#{$prefix}avatar-svg-size);
   }
-  &--50 {
-    width: 50px;
-    height: 50px;
+
+  &.avatar-square {
+    border-radius: $border-radius;
   }
 
-  &--100 {
-    width: 100px;
-    height: 100px;
+  &.avatar-rounded {
+    border-radius: 50%;
   }
 
-  &-social {
-    position: relative;
+  &.avatar-title {
+    height: 100%;
+  }
 
-    @include circle($avatar-size);
+  &.avatar-xs {
+    --#{$prefix}avatar-size: 2.4rem;
+    --#{$prefix}avatar-svg-size: 1.25rem;
+  }
 
-    .photo {
-      img {
-        @include avatar-image($avatar-size);
-      }
-    }
+  &.avatar-sm {
+    --#{$prefix}avatar-size: 3.2rem;
+    --#{$prefix}avatar-svg-size: 2.5rem;
+  }
 
-    .circle {
-      @include have-child-in-middle();
-      @include circle(calc(#{$avatar-size} / 1.8));
+  &.avatar-md {
+    --#{$prefix}avatar-size: 4rem;
+    --#{$prefix}avatar-svg-size: 2.5rem;
+  }
 
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      font-size: calc(#{$avatar-size} / 3.5);
-      color: $white;
-      transform: translate(20%, 20%);
-    }
+  &.avatar-lg {
+    --#{$prefix}avatar-size: 8rem;
+    --#{$prefix}avatar-svg-size: 5rem;
+  }
+
+  &.avatar-xl {
+    --#{$prefix}avatar-size: 16rem;
+    --#{$prefix}avatar-svg-size: 10rem;
   }
 
-  &-link {
+  &.avatar-auto {
+    --#{$prefix}avatar-size: auto;
+    --#{$prefix}avatar-svg-size: 100%;
+  }
+}
+
+body:not(.app-react) {
+  .avatar {
     display: inline-block;
-    cursor: pointer;
+    vertical-align: middle;
+    border-radius: 50%;
 
-    img {
-      @include avatar-image($avatar-size);
-      background: #ffff;
+    /*&--20 {
+      width: 20px;
+      height: 20px;
     }
-  }
 
-  .navbar.no-1d & {
-    margin-top: -0.3rem;
-    width: 3rem;
-    max-width: 3rem;
-    height: 3rem;
-    background-color: $white;
-
-    @include media-breakpoint-down(md) {
-      display: inline-block;
-      width: 2rem;
-      max-width: 2rem;
-      height: 2rem;
+    &--25 {
+      width: 25px;
+      height: 25px;
+    }
+    &--50 {
+      width: 50px;
+      height: 50px;
+    }
+
+    &--100 {
+      width: 100px;
+      height: 100px;
+    }*/
+
+    &-social {
+      position: relative;
+
+      @include circle($avatar-size);
+
+      .photo {
+        overflow: hidden;
+        @include avatar-image($avatar-size);
+      }
+
+      .circle {
+        @include have-child-in-middle();
+        @include circle(calc(#{$avatar-size} / 1.8));
+
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        font-size: calc(#{$avatar-size} / 3.5);
+        color: $white;
+        transform: translate(20%, 20%);
+      }
     }
+
+    /*&-link {
+      cursor: pointer;
+      overflow: hidden;
+      @include avatar-image($avatar-size);
+
+      img {
+        background: $white;
+      }
+    }*/
   }
+
+  /*.navbar.no-1d {
+    .avatar {
+      margin-top: -0.3rem;
+      width: 3rem;
+      max-width: 3rem;
+      height: 3rem;
+      background-color: $white;
+
+      @include media-breakpoint-down(md) {
+        display: inline-block;
+        width: 2rem;
+        max-width: 2rem;
+        height: 2rem;
+      }
+    }
+  }*/
 }

package/scss/components/_buttons.scss

@@ -1,78 +1,221 @@
-%btn-alt-base {
-    position: relative;
-    z-index: 2;
-    padding: 0 15px;
-    font-size: 14px;
-    line-height: 2.4em;
-    color: #fff;
-    letter-spacing: 1.08px;
-    border: 1px solid currentColor;
-    border-radius: 30px;
-}
-
 .btn {
-    &.btn-alt {
-        @extend %btn-alt-base;
+  --#{$prefix}btn-active-box-shadow-color: #{$btn-box-shadow};
+  --#{$prefix}btn-align-items: #{$btn-align-items};
+  --#{$prefix}btn-border-radius: #{$btn-border-radius};
+  --#{$prefix}btn-border-width: #{$btn-border-width};
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
+  --#{$prefix}btn-display-mode: #{$btn-display-mode};
+  --#{$prefix}btn-focus-bg: #{$primary};
+  --#{$prefix}btn-focus-border-color: #{$orange-200};
+  --#{$prefix}btn-focus-box-shadow-color: #{$btn-box-shadow};
+  --#{$prefix}btn-focus-color: #{$white};
+  --#{$prefix}btn-font-family: #{$btn-font-family};
+  --#{$prefix}btn-font-size: #{$btn-font-size};
+  --#{$prefix}btn-font-weight: #{$btn-font-weight};
+  --#{$prefix}btn-gap: #{$btn-gap};
+  --#{$prefix}btn-justify-content: #{$btn-justify-content};
+  --#{$prefix}btn-search-bg: #{$btn-search-bg};
+  --#{$prefix}btn-search-focus-border-color: #{$btn-search-focus-border-color};
+  --#{$prefix}btn-active-box-shadow-width: 0.1rem;
 
-        background-color: $third;
-        border-color: $third;
+  transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
-        @include add-transitions(border-color, background-color) {
-            background-color: $orange;
-            border-color: $orange;
-        }
+  span,
+  .loading {
+    align-items: var(--#{$prefix}btn-align-items);
+    display: var(--#{$prefix}btn-display-mode);
+    gap: var(--#{$prefix}btn-gap);
+    justify-content: var(--#{$prefix}btn-justify-content);
+    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  }
+
+  svg {
+    height: $btn-svg-size;
+    width: $btn-svg-size;
+    min-width: $btn-svg-size;
+
+    path {
+      fill: currentColor;
     }
+  }
 
-    &.btn-alt-outline {
-        @extend %btn-alt-base;
+  &:first-child:active:focus-visible {
+    box-shadow: none;
+  }
 
-        @include add-transitions(border-color, color) {
-            color: $orange;
-            border-color: $orange;
-        }
+  &:active,
+  &.active {
+    box-shadow: none;
 
-        color: $third;
-        background-color: transparent;
-        border: 1px solid $third;
+    &:focus-visible {
+      box-shadow: none;
     }
+  }
 
-    &-light {
-        background-color: $gray-200;
-        
-        @include add-transitions(color, background-color) {
-            color: $primary;
-            text-decoration: none;
-            background-color: $gray-200;
-        }
+  &:not(.btn-icon):focus-visible {
+    background-color: var(--#{$prefix}btn-focus-bg);
+    border-color: var(--#{$prefix}btn-focus-border-color);
+    box-shadow: none;
+  }
+
+  @if $enable-one {
+    text-transform: uppercase;
+
+    &:not(.btn-icon, .btn-search, .btn-ghost-primary, .btn-ghost-secondary, .btn-ghost-tertiary, .btn-ghost-danger) {
+      svg {
+        transform: translateY(-0.2rem);
+      }
     }
 
-    &-circle {
-        @include circle(2.5em);
-        @include have-child-in-middle();
+    &:hover,
+    &.hover {
+      &:not(.btn-search) {
+        transform: translateY(-0.2rem);
+        box-shadow: 0 0.2rem 0 0 var(--#{$prefix}btn-hover-border-color);
+      }
 
-        @include add-transitions(color, background-color) {
-            color: #fff;
-            text-decoration: none;
-            background-color: $cyan;
+      &:is(.btn-search) {
+        span {
+          transform: translateY(-0.2rem);
         }
+      }
+    }
 
-        position: relative;
-        display: inline-flex;
-        // margin-bottom: 1.5em;
-        font-size: 2em;
-        color: #fff;
-        background-color: $third;
-
-        .label {
-            position: absolute;
-            bottom: -2em;
-            font-size: 0.8em;
-            color: $gray-700;
-        }
+    &:active,
+    &.active {
+      &:not(.btn-search) {
+        transform: translateY(0);
+        box-shadow: none;
+      }
+    }
+
+    &:not(.btn-icon):focus-visible {
+      --#{$prefix}btn-border-width: 0.1rem;
+      box-shadow: inset 0 0 0 0.1rem var(--#{$prefix}btn-focus-border-color);
+    }
+  } @else {
+    &:hover,
+    &.hover,
+    &:focus-visible {
+      > span {
+        transform: translateY(-0.2rem);
+      }
+    }
+
+    &:active,
+    &.active {
+      box-shadow: inset
+        0
+        0
+        0
+        var(--#{$prefix}btn-active-box-shadow-width)
+        var(--#{$prefix}btn-active-border-color);
+
+      > span {
+        transform: translateY(0);
+      }
+    }
+
+    &:focus-visible {
+      box-shadow: inset
+        0
+        0
+        0
+        var(--#{$prefix}btn-active-box-shadow-width)
+        var(--#{$prefix}btn-focus-border-color);
+    }
+  }
+
+  &.btn-sm {
+    --#{$prefix}btn-padding-x: #{$spacer-8};
+    --#{$prefix}btn-padding-y: #{$spacer-8};
+  }
+
+  &.btn-md {
+    --#{$prefix}btn-padding-x: #{$btn-padding-x};
+    --#{$prefix}btn-padding-y: #{$btn-padding-y};
+  }
+
+  &.btn-loading {
+    pointer-events: none;
+  }
+
+  &.btn-circle {
+    @include circle(2.5em);
+    @include have-child-in-middle();
+
+    @include add-transitions(color, background-color) {
+      color: #fff;
+      text-decoration: none;
+      background-color: $secondary-900;
+    }
+
+    position: relative;
+    display: inline-flex;
+    font-size: 2em;
+    color: $white;
+    background-color: $secondary;
+
+    .label {
+      position: absolute;
+      bottom: -2em;
+      font-size: 0.8em;
+      color: $gray-700;
+    }
+  }
+
+  &.btn-search {
+    --#{$prefix}btn-border-color: #{$gray-400};
+    --#{$prefix}btn-border-width: 0.1rem;
+    background-color: var(--#{$prefix}btn-search-bg);
+    color: $gray-800;
+
+    svg {
+      height: $btn-search-icon-size;
+      width: $btn-search-icon-size;
+      min-width: $btn-search-icon-size;
+    }
+
+    &:hover {
+      --#{$prefix}btn-hover-border-color: #{$gray-400};
     }
-    // A réécrire, mais le btn-circle de Julien ne colle pas à mon cas (les width en em, la font-size, la couleur, etc)
 
-    &-circular {
-        @include circle(32px);
+    &:active {
+      --#{$prefix}btn-active-border-color: #{$gray-400};
+      background-color: var(--#{$prefix}btn-search-bg);
+      color: $gray-900;
+    }
+
+    &:focus-visible {
+      border-color: var(--#{$prefix}btn-search-focus-border-color);
+      box-shadow: none;
+    }
+
+    &:disabled {
+      --#{$prefix}btn-disabled-border-color: transparent;
+    }
+  }
+
+  &.logout {
+    background-color: transparent;
+    border: 0;
+  }
+
+  &.btn-naked {
+    all: unset;
+
+    &:focus-visible {
+      background-color: transparent;
+    }
+  }
+
+  &.btn-close {
+    background-position: center;
+    background-size: 1.35rem;
+
+    &:focus-visible {
+      background-color: transparent;
     }
+  }
 }

package/scss/components/_card.scss

@@ -0,0 +1,132 @@
+.card {
+  --#{$prefix}card-cap-bg: #{$gray-200};
+  --#{$prefix}card-inner-border-radius: #{$border-radius};
+  --#{$prefix}card-selected: #{$secondary-200};
+  --#{$prefix}card-spacer-x: #{$spacer-16};
+  --#{$prefix}card-spacer-y: #{$spacer-16};
+  --#{$prefix}card-title-spacer-y: #{$spacer-4};
+  --#{$prefix}enter-delay: 1s;
+
+  overflow: hidden;
+  border-color: transparent;
+
+  @if $enable-one {
+    border: 1px solid $gray-400;
+
+    &:hover {
+      border-color: $orange-200;
+    }
+  } @else {
+    box-shadow: $box-shadow;
+  }
+
+  &-body {
+    display: flex;
+    align-items: center;
+    gap: $spacer-12;
+  }
+
+  &-image {
+    width: 8rem;
+    height: 8rem;
+    flex-shrink: 0;
+    overflow: clip;
+    border-radius: $border-radius;
+
+    > img {
+      aspect-ratio: 1 / 1;
+    }
+  }
+
+  &-text {
+    em {
+      color: $gray-700;
+    }
+  }
+
+  &-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-block: $spacer-8;
+    padding-inline: $spacer-16;
+    border-radius: $border-radius;
+    border: 0;
+
+    &:last-child {
+      border-radius: var(--#{$prefix}card-inner-border-radius);
+    }
+  }
+
+  .btn {
+    --#{$prefix}btn-border-radius: 0.8rem;
+
+    opacity: 0;
+    padding-block: $spacer-12;
+    padding-inline: $spacer-12;
+    position: absolute;
+    right: 0;
+    background-color: transparent;
+    border: 0;
+
+    &:focus-visible {
+      opacity: 1;
+    }
+  }
+
+  &.is-selected {
+    border-color: var(--#{$prefix}card-selected);
+
+    @if $enable-one {
+      --#{$prefix}card-selected: #{orange};
+    }
+
+    .btn {
+      opacity: 1;
+      background-color: $secondary-100;
+    }
+  }
+
+  &.is-animated {
+    opacity: 0;
+    transition: all 850ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    animation: enter 850ms forwards;
+    animation-delay: var(--#{$prefix}enter-delay);
+  }
+
+  &:focus-within {
+    outline: 0;
+
+    @if $enable-one == false {
+      border-color: var(--#{$prefix}card-selected);
+    }
+
+    .btn {
+      opacity: 1;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      .btn {
+        opacity: 1;
+      }
+    }
+  }
+
+  @media (hover: none) {
+    .btn {
+      opacity: 1;
+    }
+  }
+}
+
+@keyframes enter {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}