ode-bootstrap 1.1.2-feat-explorer.202304201106 → 1.1.3

package/scss/components/_buttons.scss

@@ -1,221 +1,78 @@
-.btn {
-  --#{$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;
-
-  transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-
-  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;
-    }
-  }
-
-  &:first-child:active:focus-visible {
-    box-shadow: none;
-  }
-
-  &:active,
-  &.active {
-    box-shadow: none;
-
-    &:focus-visible {
-      box-shadow: none;
-    }
-  }
-
-  &: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);
-      }
-    }
-
-    &:hover,
-    &.hover {
-      &:not(.btn-search) {
-        transform: translateY(-0.2rem);
-        box-shadow: 0 0.2rem 0 0 var(--#{$prefix}btn-hover-border-color);
-      }
-
-      &:is(.btn-search) {
-        span {
-          transform: translateY(-0.2rem);
-        }
-      }
-    }
-
-    &: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;
-    }
-
+%btn-alt-base {
     position: relative;
-    display: inline-flex;
-    font-size: 2em;
-    color: $white;
-    background-color: $secondary;
+    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;
+}
 
-    .label {
-      position: absolute;
-      bottom: -2em;
-      font-size: 0.8em;
-      color: $gray-700;
-    }
-  }
+.btn {
+    &.btn-alt {
+        @extend %btn-alt-base;
 
-  &.btn-search {
-    --#{$prefix}btn-border-color: #{$gray-400};
-    --#{$prefix}btn-border-width: 0.1rem;
-    background-color: var(--#{$prefix}btn-search-bg);
-    color: $gray-800;
+        background-color: $third;
+        border-color: $third;
 
-    svg {
-      height: $btn-search-icon-size;
-      width: $btn-search-icon-size;
-      min-width: $btn-search-icon-size;
+        @include add-transitions(border-color, background-color) {
+            background-color: $orange;
+            border-color: $orange;
+        }
     }
 
-    &:hover {
-      --#{$prefix}btn-hover-border-color: #{$gray-400};
-    }
+    &.btn-alt-outline {
+        @extend %btn-alt-base;
 
-    &:active {
-      --#{$prefix}btn-active-border-color: #{$gray-400};
-      background-color: var(--#{$prefix}btn-search-bg);
-      color: $gray-900;
-    }
+        @include add-transitions(border-color, color) {
+            color: $orange;
+            border-color: $orange;
+        }
 
-    &:focus-visible {
-      border-color: var(--#{$prefix}btn-search-focus-border-color);
-      box-shadow: none;
+        color: $third;
+        background-color: transparent;
+        border: 1px solid $third;
     }
 
-    &:disabled {
-      --#{$prefix}btn-disabled-border-color: transparent;
+    &-light {
+        background-color: $gray-200;
+        
+        @include add-transitions(color, background-color) {
+            color: $primary;
+            text-decoration: none;
+            background-color: $gray-200;
+        }
     }
-  }
 
-  &.logout {
-    background-color: transparent;
-    border: 0;
-  }
+    &-circle {
+        @include circle(2.5em);
+        @include have-child-in-middle();
 
-  &.btn-naked {
-    all: unset;
+        @include add-transitions(color, background-color) {
+            color: #fff;
+            text-decoration: none;
+            background-color: $cyan;
+        }
 
-    &:focus-visible {
-      background-color: transparent;
+        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;
+        }
     }
-  }
-
-  &.btn-close {
-    background-position: center;
-    background-size: 1.35rem;
+    // A réécrire, mais le btn-circle de Julien ne colle pas à mon cas (les width en em, la font-size, la couleur, etc)
 
-    &:focus-visible {
-      background-color: transparent;
+    &-circular {
+        @include circle(32px);
     }
-  }
 }

package/scss/components/_container-advanced.scss

@@ -2,140 +2,140 @@ $breakpoint-up: "lg";
 $breakpoint-down: "lg";
 
 .container-advanced {
-  position: relative;
-  width: 100%;
-  overflow: hidden;
+    position: relative;
+    width: 100%;
+    overflow: hidden;
 
-  &-wrapper {
-    display: flex;
-    justify-content: space-between;
-    margin: 20px auto;
+    &-wrapper {
+        display: flex;
+        justify-content: space-between;
+        margin: 20px auto;
 
-    @include media-breakpoint-down($breakpoint-down) {
-      width: 300vw;
-      max-width: unset;
+        @include media-breakpoint-down($breakpoint-down) {
+            width: 300vw;
+            max-width: unset;
 
-      @include add-transitions(transform);
-    }
+            @include add-transitions(transform);
+        }
 
-    @include media-breakpoint-up($breakpoint-up) {
-      padding: 0 2rem;
-      max-width: 1700px;
-      gap: 4rem;
+        @include media-breakpoint-up($breakpoint-up) {
+            padding: 0 2rem;
+            max-width: 1700px;
+            gap: 4rem;
+        }
     }
-  }
 
-  &-left,
-  &-center,
-  &-right {
-    flex: 1;
+    &-left,
+    &-center,
+    &-right {
+        flex: 1;
 
-    @include media-breakpoint-down($breakpoint-down) {
-      margin: 2rem;
+        @include media-breakpoint-down($breakpoint-down) {
+            margin: 2rem;
+        }
     }
-  }
 
-  &-left,
-  &-right {
-    @include media-breakpoint-up($breakpoint-up) {
-      max-width: 25%;
+    &-left,
+    &-right {
+        @include media-breakpoint-up($breakpoint-up) {
+            max-width: 25%;
+        }
     }
-  }
 
-  &-left {
-    order: 1;
-  }
+    &-left {
+        order: 1;
+    }
 
-  &-center {
-    order: 2;
+    &-center {
+        order: 2;
 
-    @include media-breakpoint-up($breakpoint-up) {
-      max-width: 50%;
-    }
-  }
-
-  &-right {
-    order: 3;
-  }
-
-  @include media-breakpoint-down($breakpoint-down) {
-    &.focus-left {
-      .container-advanced-wrapper {
-        transform: translateX(0);
-      }
-      &.hide {
-        .container-advanced-center > *,
-        .container-advanced-right > * {
-          display: none;
+        @include media-breakpoint-up($breakpoint-up) {
+            max-width: 50%;
         }
-      }
     }
 
-    &.focus-right {
-      .container-advanced-wrapper {
-        transform: translateX(calc(100 / 3 * 2% * -1));
-      }
-      &.hide {
-        .container-advanced-center > *,
-        .container-advanced-left > * {
-          display: none;
-        }
-      }
+    &-right {
+        order: 3;
     }
 
-    &.focus-center {
-      .container-advanced-wrapper {
-        transform: translateX(calc(100 / 3 * 1% * -1));
-      }
-      &.hide {
-        .container-advanced-left > *,
-        .container-advanced-right > * {
-          display: none;
+    @include media-breakpoint-down($breakpoint-down) {
+        &.focus-left {
+            .container-advanced-wrapper {
+                transform: translateX(0);
+            }
+            &.hide {
+                .container-advanced-center > *,
+                .container-advanced-right > * {
+                    display: none;
+                }
+            }
         }
-      }
-    }
-  }
 
-  &-nav {
-    color: $white;
-    background-color: $secondary;
+        &.focus-right {
+            .container-advanced-wrapper {
+                transform: translateX(calc(100 / 3 * 2% * -1));
+            }
+            &.hide {
+                .container-advanced-center > *,
+                .container-advanced-left > * {
+                    display: none;
+                }
+            }
+        }
 
-    @include media-breakpoint-up($breakpoint-up) {
-      display: none;
+        &.focus-center {
+            .container-advanced-wrapper {
+                transform: translateX(calc(100 / 3 * 1% * -1));
+            }
+            &.hide {
+                .container-advanced-left > *,
+                .container-advanced-right > * {
+                    display: none;
+                }
+            }
+        }
     }
 
-    .list-trigger {
-      display: flex;
-      justify-content: space-around;
-      overflow: hidden;
-
-      .trigger {
-        @include add-before-layer() {
-          @include add-transitions(opacity, transform);
-
-          top: 50%;
-          z-index: -1;
-          height: auto;
-          padding-top: 100%;
-          background: $blue-900;
-          border-radius: 50%;
-          opacity: 0;
-          transform: translateY(-50%) scale(1.1);
+    &-nav {
+        color: $white;
+        background-color: $third;
+
+        @include media-breakpoint-up($breakpoint-up) {
+            display: none;
         }
 
-        z-index: 2;
-        flex: 1;
-        align-self: center;
-        padding: 15px;
-        font-size: 1.1rem;
-        text-align: center;
-
-        &.on {
-          &::before {
-            opacity: 1;
-          }
+        .list-trigger {
+            display: flex;
+            justify-content: space-around;
+            overflow: hidden;
+
+            .trigger {
+                @include add-before-layer() {
+                    @include add-transitions(opacity, transform);
+
+                    top: 50%;
+                    z-index: -1;
+                    height: auto;
+                    padding-top: 100%;
+                    background: $cyan;
+                    border-radius: 50%;
+                    opacity: 0;
+                    transform: translateY(-50%) scale(1.1);
+                }
+
+                z-index: 2;
+                flex: 1;
+                align-self: center;
+                padding: 15px;
+                font-size: 1.1rem;
+                text-align: center;
+
+                &.on {
+                    &::before {
+                        opacity: 1;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }

package/scss/components/_dragndrop.scss

@@ -1,24 +1,21 @@
 .drag-n-drop {
-  &-item {
-    .draggable {
-    } // élement déplacable
-    .no-draggable {
-    } // élément non déplacable
-  }
-  &-area {
-    .draggable {
-    } // Reçoit le drag
-    .no-draggable {
-    } // Ne peux pas recevoir le drag
-  }
+    &-item {
+        .draggable {} // élement déplacable
+        .no-draggable {} // élément non déplacable
+    }
+    &-area {
+        .draggable {} // Reçoit le drag
+        .no-draggable {} // Ne peux pas recevoir le drag
+    }
 }
 
 .drop-zone {
-  padding: 50px;
-  border: 2px dashed $gray-300;
-  background-color: rgba($gray-300, 0.25);
-  border-radius: $border-radius-lg;
-  @include media-breakpoint-down(md) {
-    padding: 25px;
-  }
+    padding: 50px;
+    border: 2px dashed $gray-300;
+    background-color: rgba($gray-100, 0.25);
+    border-radius: $border-radius-lg;
+    @include media-breakpoint-down(md) {
+        padding: 25px;
+    }
 }
+

package/scss/components/_dropdowns.scss

@@ -0,0 +1,6 @@
+.dropdown-item {
+
+    input[type="checkbox"] {
+        vertical-align: middle;
+    }
+}

package/scss/components/_emptyscreen.scss

@@ -1,12 +1,48 @@
 .emptyscreen {
-  max-width: 512px;
-  text-align: center;
-  margin: 0 auto;
-}
-.emptyscreen-image {
-  max-width: 250px;
-  margin: 0 auto;
-  @include media-breakpoint-down(md) {
-    max-width: 200px;
-  }
-}
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 50px;
+
+    @include media-breakpoint-down(md) {
+        padding: 25px;
+    }
+
+    &-header {
+        color: $gray-800;
+        font-size: 3rem;
+
+        @include media-breakpoint-down(md) {
+            font-size: 2rem;
+        }
+    }
+
+    &-body {
+        color: $gray-700;
+        margin: 15px;
+
+        @include media-breakpoint-down(md) {
+            font-size: 1.4rem;
+        }
+    }
+
+    &-image {
+        max-height: 300px;
+        margin-top: 25px;
+
+        @include media-breakpoint-down(md) {
+            max-height: 200px;
+        }
+
+        &.mini {
+            max-height: 200px;
+
+            @include media-breakpoint-down(md) {
+                max-height: 150px;
+            }
+        }
+    }
+}