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

package/scss/mixins/_transition.scss

@@ -2,27 +2,27 @@
 //Note Julien -> appliquer ce type de transition à l'ensemble des propriétés provoque des mouvements au chargement de la page
 
 .transition-hover-fast {
-    transition-timing-function: ease;
-    transition-duration: 0.25s;
-    transition-property: all;
+  transition-timing-function: ease;
+  transition-duration: 0.25s;
+  transition-property: all;
 }
 
 .transition-hover {
-    transition-timing-function: ease;
-    transition-duration: 0.5s;
-    transition-property: all;
+  transition-timing-function: ease;
+  transition-duration: 0.5s;
+  transition-property: all;
 }
 
 .transition-hover-slow {
-    transition-timing-function: ease;
-    transition-duration: 0.75s;
-    transition-property: all;
+  transition-timing-function: ease;
+  transition-duration: 0.75s;
+  transition-property: all;
 }
 
 .transition-hover-very-slow {
-    transition-timing-function: ease;
-    transition-duration: 0.75s;
-    transition-property: all;
+  transition-timing-function: ease;
+  transition-duration: 0.75s;
+  transition-property: all;
 }
 
 /**
@@ -70,36 +70,39 @@ $default-duration: 0.4s;
 //Mixins
 
 @mixin add-transitions($properties...) {
-    transition-timing-function: $default-easing;
-    transition-duration: $default-duration;
-    transition-property: $properties;
-
-    @media (hover: hover) {
-        &:hover {
-            @content;
-        }
+  transition-timing-function: $default-easing;
+  transition-duration: $default-duration;
+  transition-property: $properties;
+
+  @media (hover: hover) {
+    &:hover {
+      @content;
     }
+  }
 }
 
-@mixin background-color-to($color: $primary, $duration: $default-duration, $easing: $default-easing) {
-    transition: background-color $duration $easing;
+@mixin background-color-to(
+  $color: $secondary,
+  $duration: $default-duration,
+  $easing: $default-easing
+) {
+  transition: background-color $duration $easing;
 
-    &:hover {
-        background-color: $color;
-    }
+  &:hover {
+    background-color: $color;
+  }
 }
 
-@mixin color-to($color: $primary, $duration: 0.2s, $easing: $default-easing) {
-    transition: color $duration $easing;
+@mixin color-to($color: $secondary, $duration: 0.2s, $easing: $default-easing) {
+  transition: color $duration $easing;
 
-    &:hover {
-        color: $color;
-    }
+  &:hover {
+    color: $color;
+  }
 }
 
 @mixin decoration-to($state: "underline") {
-
-    &:hover {
-        text-decoration: $state;
-    }
+  &:hover {
+    text-decoration: $state;
+  }
 }

package/scss/tokens/_.scss

@@ -0,0 +1,4 @@
+@import "display";
+@import "icons";
+@import "type";
+@import "shadows";

package/scss/tokens/_display.scss

@@ -0,0 +1,9 @@
+.pe-xs {
+  pointer-events: none;
+}
+
+@include media-breakpoint-up(md) {
+  .pe-md {
+    pointer-events: none;
+  }
+}

package/scss/tokens/_icons.scss

@@ -0,0 +1,118 @@
+@use "sass:color";
+
+// 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");
+    }
+  }
+}
+
+.bg-light {
+  //applications
+  @each $app, $data in $icons-applications {
+    &-#{$app} {
+      background-color: color.scale(
+        map-get($data, "color"),
+        $lightness: 90%,
+        $saturation: 5%
+      );
+    }
+  }
+  //connectors
+  @each $app, $data in $icons-connectors {
+    &-#{$app} {
+      background-color: color.scale(
+        map-get($data, "color"),
+        $lightness: 90%,
+        $saturation: 5%
+      );
+    }
+  }
+}
+
+.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/tokens/_shadows.scss

@@ -0,0 +1,19 @@
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+$box-shadow: 0 0.2rem 0.6em rgba($black, 0.15);
+$box-shadow-hover: 0 0.4rem 1rem rgba($black, 0.12);
+$box-shadow-bottom: 0 -0.6rem 3rem -1rem rgba($black, 0.15);
+
+.shadow {
+  --#{$prefix}box-shadow: #{$box-shadow};
+  box-shadow: var(--#{$prefix}box-shadow);
+}
+
+.shadow-hover {
+  --#{$prefix}box-shadow-hover: #{$box-shadow-hover};
+  box-shadow: var(--#{$prefix}box-shadow-hover);
+}
+
+.shadow-bottom {
+  --#{$prefix}box-shadow-bottom: #{$box-shadow-bottom};
+  box-shadow: var(--#{$prefix}box-shadow-bottom);
+}

package/scss/tokens/_type.scss

@@ -0,0 +1,85 @@
+/* Font Awesome */
+@import "./@fortawesome/fontawesome-free/scss/fontawesome.scss";
+@import "./@fortawesome/fontawesome-free/scss/solid.scss";
+@import "./@fortawesome/fontawesome-free/scss/regular.scss";
+@import "./@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);
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.link,
+.link a {
+  @include color-to($primary);
+
+  font-weight: 400;
+  color: $secondary;
+  text-decoration: none;
+}
+
+.link-discret,
+.link-discret a {
+  @include color-to($primary);
+
+  font-weight: 400;
+  color: currentColor;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.subtitle {
+  font-size: 1.4rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.body {
+  font-family: $font-family-sans-serif;
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+
+  &:first-letter {
+    text-transform: uppercase;
+  }
+}
+
+.small {
+  line-height: 2.2rem;
+}
+
+.caption {
+  font-size: $caption-font-size;
+  line-height: 2rem;
+}
+
+h1,
+.h1 {
+  line-height: 3.6rem;
+}
+
+h2,
+.h2 {
+  line-height: 3.2rem;
+}
+
+h3,
+.h3 {
+  line-height: 2.8rem;
+}
+
+h4,
+.h4 {
+  line-height: 2.6rem;
+}

package/scss/utilities/_.scss

@@ -0,0 +1,3 @@
+@import "animation";
+@import "containers";
+@import "custom-utilities";

package/scss/utilities/_animation.scss

@@ -0,0 +1,8 @@
+@keyframes loading {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/scss/utilities/_containers.scss

@@ -0,0 +1,37 @@
+$container-spacings: (
+  "xs": 0,
+  "sm": 0,
+  "md": 2.4rem,
+  "lg": 2.4rem,
+  "xl": 2.4rem,
+) !default;
+
+.container-fluid {
+  --#{$prefix}container-width: 100%;
+  max-width: map-get($container-max-widths, "xxl");
+  width: var(--#{$prefix}container-width);
+
+  @include media-breakpoint-up(md) {
+    --#{$prefix}container-width: calc(100% - #{$spacer-24} * 2);
+  }
+}
+
+main {
+  &.container-fluid {
+    min-height: calc(100vh - 65px);
+  }
+}
+
+.grid {
+  --#{$prefix}columns: 4;
+  --#{$prefix}gap: 1.6rem;
+
+  @include media-breakpoint-up(md) {
+    --#{$prefix}columns: 8;
+    --#{$prefix}gap: 2.4rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    --#{$prefix}columns: 12;
+  }
+}

package/scss/utilities/_custom-utilities.scss

@@ -0,0 +1,96 @@
+$zindex-levels: (
+  n1: -1,
+  0: 0,
+  1: 1,
+  2: 2,
+  3: 3,
+  2000:2000
+);
+
+$width-sizing: (
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%,
+  auto: auto
+);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "color": (
+      property: color,
+      class: text,
+      local-vars: (
+        "text-opacity": 1
+      ),
+      values: map-merge(
+        $utilities-text-colors,
+        (
+          "gray-700": $gray-700,
+          "blue": $blue,
+          "muted": $text-muted,
+          "black-50": rgba($black, .5), // deprecated
+          "white-50": rgba($white, .5), // deprecated
+          "reset": inherit,
+        )
+      )
+    ),
+    "cursor": (
+      property: cursor,
+      class: c,
+      values: auto pointer grab,
+    ),
+    "width": (
+      property: width,
+      class: w,
+      values:
+        map-merge(
+          $width-sizing,
+          $spacers,
+        ),
+    ),
+    "max-width": (
+      property: max-width,
+      class: max-w,
+      values: (
+        full: 100%,
+        64: 64px,
+        96: 96px,
+        128: 128px,
+        256: 256px,
+        384: 384px,
+        512: 512px,
+        auto: auto,
+      ),
+    ),
+    "height": (
+      property: height,
+      class: h,
+      values:
+        map-merge(
+          $spacers,
+          (1\/4: 25%, 1\/2: 50%, 3\/4: 75%, full: 100%, auto: auto)
+        ),
+    ),
+    //To remove with Bootstrap 5.3
+    //https://getbootstrap.com/docs/5.3/utilities/object-fit/
+    "object-fit":
+      (
+        responsive: true,
+        property: object-fit,
+        values: (
+          contain: contain,
+          cover: cover,
+          fill: fill,
+          scale: scale-down,
+          none: none,
+        ),
+      ),
+    "z-index": (
+      property: z-index,
+      class: z,
+      values: $zindex-levels
+    )
+  )
+);

package/scss/variables/_.scss

@@ -1,4 +1,8 @@
+// Quickly modify global styling by enabling or disabling optional features
+@import "options";
+
+// Other variables
 @import "colors";
-@import "variables-bootstrap";
-@import "variables-ode";
+@import "bootstrap";
+@import "type";
 @import "icons";