ode-bootstrap 1.1.4-dev.202306051654 → 1.1.4-feat-produit.202306051650

package/scss/atoms/_fonts.scss

@@ -0,0 +1,20 @@
+/* Font Awesome */
+
+@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "node_modules/@fortawesome/fontawesome-free/scss/solid.scss";
+@import "node_modules/@fortawesome/fontawesome-free/scss/regular.scss";
+@import "node_modules/@fortawesome/fontawesome-free/scss/brands.scss";
+
+/* Generic Icons */
+
+@font-face {
+    font-family: "generic-icons";
+    font-display: swap;
+    font-style: normal;
+    font-weight: normal;
+    src: url(#{$fonts-path}/generic-icons/generic-icons.woff);
+}
+
+html {
+    font-size: 62.5%;
+}

package/scss/atoms/_icons.scss

@@ -0,0 +1,90 @@
+// Initialize good style and good font on all icons
+[class*="ic-"] {
+    font-family: "generic-icons";
+    font-style: normal;
+    font-weight: 400;
+}
+
+// Icons list
+.ic {
+    @each $icon, $data in $icons-interface {
+        &-#{$icon} {
+            &::before {
+                content: map-get($data, "glyph");
+            }
+        }
+    }
+}
+
+// Classes utilitaires par application
+.color-app {
+    //applications
+    @each $app, $data in $icons-applications {
+        &-#{$app} {
+            color: map-get($data, "color");
+        }
+    }
+    //connectors
+    @each $app, $data in $icons-connectors {
+        &-#{$app} {
+            color: map-get($data, "color");
+        }
+    }
+}
+
+.bg-app {
+    //applications
+    @each $app, $data in $icons-applications {
+        &-#{$app} {
+            background-color: map-get($data, "color");
+        }
+    }
+    //connectors
+    @each $app, $data in $icons-connectors {
+        &-#{$app} {
+            background-color: map-get($data, "color");
+        }
+    }
+}
+
+.ic-app {
+    //applications
+    @each $app, $data in $icons-applications {
+        &-#{$app}, &-#{$app}-large {
+            &::before {
+                content: map-get($data, "glyph");
+            }
+        }
+    }
+    //connectors
+    @each $app, $data in $icons-connectors {
+        &-#{$app}, &-#{$app}-large {
+            &::before {
+                content: map-get($data, "glyph");
+            }
+        }
+    }
+}
+
+// Classes des icones pour les widgets
+.ic-widget {
+    @each $app, $data in $icons-widgets {
+        &-#{$app}, &-#{$app}-large {
+            &::before {
+                content: map-get($data, "glyph");
+            }
+        }
+    }
+}
+
+// Classes des icones pour les humeurs
+.ic-mood {
+    @each $mood, $data in $icons-mood {
+        &-#{$mood} {
+            &::before {
+                content: map-get($data, "glyph");
+                color: map-get($data, "color");
+            }
+        }
+    }
+}

package/scss/atoms/_typography.scss

@@ -0,0 +1,27 @@
+.link,
+.link a {
+
+    @include color-to($primary);
+
+    font-weight: 400;
+    color: $third;
+    text-decoration: none;
+}
+
+.link-discret,
+.link-discret a {
+
+    @include color-to($third);
+
+    font-weight: 400;
+    color: currentColor;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.subtitle {
+    font-size: 1.4rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    // cursor: pointer;
+}

package/scss/components/_.scss

@@ -1,37 +1,21 @@
-@import "actionbar";
-@import "alert";
+@import "container-advanced";
 @import "avatar";
-@import "app-card";
 @import "buttons";
-@import "card";
-@import "container-advanced";
-// @import "dominos";
+@import "modal";
+@import "toast";
+@import "dominos";
 @import "dragndrop";
-@import "dropdown";
+@import "dropdowns";
 @import "emptyscreen";
-// @import "explorer";
+@import "explorer";
 @import "feed";
 @import "filters";
-@import "form-control";
-@import "form-label";
-@import "form-text";
-@import "loading-screen";
+@import "forms";
 @import "media-library";
-@import "help";
-@import "input-group";
-@import "image-picker";
-@import "modal";
-@import "header";
-@import "popover";
-@import "loader";
-@import "select-list";
-@import "spinner";
 @import "sticky-toolbox";
 @import "tables";
 @import "table-lists";
-@import "table-explorer";
-@import "toast";
-@import "treeview";
-@import "validate-mail";
+@import "tree-structure";
+@import "popover";
 
-@import "widget/";
+@import "widget/";

package/scss/components/_alerts.scss

@@ -0,0 +1,30 @@
+.alert {
+    display: flex;
+    align-items: center;
+
+    i {
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        font-size: 2rem;
+    }
+
+    &.alert-dismissible .btn-close {
+        font-size: 1rem;
+        opacity: 0.25;
+    }
+}
+
+.feedback {
+    .alert {
+        position: fixed;
+        top: 75px;
+        right: 10px;
+        width: 350px;
+        font-size: 1.4rem;
+        border-width: 1px;
+        box-shadow: 3px 2px 5px rgba($gray-700, 0.15);
+    }
+}

package/scss/components/_avatar.scss

@@ -1,146 +1,75 @@
 $avatar-size: 65px !default;
 
 .avatar {
-  --#{$prefix}avatar-size: 8rem;
-  --#{$prefix}avatar-svg-size: 5rem;
-  --#{$prefix}avatar-bg-color: #{$white};
+  display: inline-block;
+  vertical-align: middle;
+  border-radius: 50%;
 
-  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;
-  }
-
-  > svg {
-    width: var(--#{$prefix}avatar-svg-size);
-    height: var(--#{$prefix}avatar-svg-size);
-  }
-
-  &.avatar-square {
-    border-radius: $border-radius;
+  &--20 {
+    width: 20px;
+    height: 20px;
   }
 
-  &.avatar-rounded {
-    border-radius: 50%;
+  &--25 {
+    width: 25px;
+    height: 25px;
   }
-
-  &.avatar-title {
-    height: 100%;
-  }
-
-  &.avatar-xs {
-    --#{$prefix}avatar-size: 2.4rem;
-    --#{$prefix}avatar-svg-size: 1.25rem;
-  }
-
-  &.avatar-sm {
-    --#{$prefix}avatar-size: 3.2rem;
-    --#{$prefix}avatar-svg-size: 2.5rem;
+  &--50 {
+    width: 50px;
+    height: 50px;
   }
 
-  &.avatar-md {
-    --#{$prefix}avatar-size: 4rem;
-    --#{$prefix}avatar-svg-size: 2.5rem;
+  &--100 {
+    width: 100px;
+    height: 100px;
   }
 
-  &.avatar-lg {
-    --#{$prefix}avatar-size: 8rem;
-    --#{$prefix}avatar-svg-size: 5rem;
-  }
-
-  &.avatar-xl {
-    --#{$prefix}avatar-size: 16rem;
-    --#{$prefix}avatar-svg-size: 10rem;
-  }
-
-  &.avatar-auto {
-    --#{$prefix}avatar-size: auto;
-    --#{$prefix}avatar-svg-size: 100%;
-  }
-}
-
-body:not(.app-react) {
-  .avatar {
-    display: inline-block;
-    vertical-align: middle;
-    border-radius: 50%;
-
-    /*&--20 {
-      width: 20px;
-      height: 20px;
-    }
-
-    &--25 {
-      width: 25px;
-      height: 25px;
-    }
-    &--50 {
-      width: 50px;
-      height: 50px;
-    }
-
-    &--100 {
-      width: 100px;
-      height: 100px;
-    }*/
+  &-social {
+    position: relative;
 
-    &-social {
-      position: relative;
+    @include circle($avatar-size);
 
-      @include circle($avatar-size);
-
-      .photo {
-        overflow: hidden;
+    .photo {
+      img {
         @include avatar-image($avatar-size);
       }
+    }
 
-      .circle {
-        @include have-child-in-middle();
-        @include circle(calc(#{$avatar-size} / 1.8));
+    .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%);
-      }
+      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);
+  &-link {
+    display: inline-block;
+    cursor: pointer;
 
-      img {
-        background: $white;
-      }
-    }*/
+    img {
+      @include avatar-image($avatar-size);
+      background: #ffff;
+    }
   }
 
-  /*.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;
-      }
+  .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;
     }
-  }*/
+  }
 }

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