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

package/scss/components/widget/_school.scss

@@ -1,99 +1,93 @@
 //Widget établissement
 .widget-school {
-  &-header {
-    @include border-top-radius(6px);
+    &-header {
+        @include border-top-radius(6px);
 
-    position: relative;
-    padding: 30px $widget-padding-x;
-    font-size: 1.3em;
-    color: $white;
-    background-position: center;
-    background-size: cover;
-
-    img {
-      @include avatar-image(65px);
-      background: $white;
-      max-width: initial;
-    }
-
-    .name {
-      font-weight: 600;
-    }
-
-    .school {
-      &,
-      &-multiple {
         position: relative;
-        font-size: 0.9em;
-        font-weight: 400;
-      }
-
-      &-multiple {
-        // @include prepend-icon("\f150", 1.1em);
-
-        cursor: pointer;
-        white-space: normal;
-        display: inline-flex;
-        align-items: baseline;
-        gap: 1rem;
-
-        &::before {
-          @include fontawesome();
-          content: "\f150";
-          top: 0.2rem;
-          position: relative;
+        padding: 30px $widget-padding-x;
+        font-size: 1.3em;
+        color: #fff;
+        background-position: center;
+        background-size: cover;
+
+        .name {
+            font-weight: 600;
         }
 
-        &::after {
-          display: none;
+        .school {
+            &,
+            &-multiple {
+                position: relative;
+                font-size: 0.9em;
+                font-weight: 400;
+            }
+
+            &-multiple {
+                // @include prepend-icon("\f150", 1.1em);
+
+                cursor: pointer;
+                white-space: normal;
+                display: inline-flex;
+                align-items: baseline;
+                gap: 1rem;
+
+                &::before {
+                    @include fontawesome();
+                    content: "\f150";
+                    top: 0.2rem;
+                    position: relative;
+                }
+
+                &::after {
+                    display: none
+                }
+            }
+
+            &-choice {
+                > div {
+                    @include color-to($primary);
+
+                    padding: 6px 20px;
+                    cursor: pointer;
+
+                    &.dropdown-item {
+                        white-space: normal;
+                    }
+                }
+            }
         }
-      }
 
-      &-choice {
-        > div {
-          @include color-to($primary);
-
-          padding: 6px 20px;
-          cursor: pointer;
-
-          &.dropdown-item {
-            white-space: normal;
-          }
+        .avatar-list {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            width: 100%;
+            padding: 0 $widget-padding-x;
+            transform: translateY(50%);
+
+            @include media-breakpoint-down(xl) {
+                .avatar-link:nth-child(n + 4) {
+                    display: none;
+                }
+            }
         }
-      }
     }
 
-    .avatar-list {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      width: 100%;
-      padding: 0 $widget-padding-x;
-      transform: translateY(50%);
+    .btn-group {
+        padding: 1.6rem;
+        padding-bottom: 0;
+        flex-wrap: wrap;
 
-      @include media-breakpoint-down(xl) {
-        .avatar-link:nth-child(n + 4) {
-          display: none;
-        }
-      }
-    }
-  }
+        > * {
+            padding: 0.6rem 1.5rem;
+            margin-bottom: 1em;
 
-  .btn-group {
-    padding: 1.6rem;
-    padding-bottom: 0;
-    flex-wrap: wrap;
-
-    > * {
-      padding: 0.6rem 1.5rem;
-      margin-bottom: 1em;
-
-      &:not(:last-child) {
-        margin-right: 0.4em;
-      }
+            &:not(:last-child) {
+                margin-right: 0.4em;
+            }
+        }
     }
-  }
 }

package/scss/index.scss

@@ -1,6 +1,15 @@
 @import "variables/";
-@import "vendors/";
+
+// --- IMPORT BOOTSTRAP NATIVE ---
+@import "bootstrap";
+
+// --- IMPORT MIXINS ---
 @import "mixins/";
-@import "tokens/";
+
+// --- IMPORT ATOMS ---
+// Contient tous nos éléments de style les plus petits et les plus insécables
+@import "atoms/";
+
+// --- IMPORT COMPONENTS ---
+// Contient tous nos composants visuels, simple ou complexe
 @import "components/";
-@import "utilities/";

package/scss/mixins/_.scss

@@ -1,7 +1,7 @@
-@import "align";
-@import "avatar";
-@import "shape";
+@import "transition";
 @import "icon";
 @import "layer";
+@import "shape";
+@import "avatar";
+@import "align";
 @import "text-truncate";
-@import "transition";

package/scss/mixins/_align.scss

@@ -1,5 +1,5 @@
 @mixin have-child-in-middle() {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }

package/scss/mixins/_avatar.scss

@@ -1,8 +1,8 @@
 @mixin avatar-image($size: 50px) {
-  @include circle($size);
+    @include circle($size);
 
-  object-fit: cover;
-  object-position: center center;
-  border: 2px solid #dcdce6;
-  box-shadow: -2px -2px 5px 0 rgba(0, 0, 0, 0.1);
+    object-fit: cover;
+    object-position: center center;
+    border: 2px solid #dcdce6;
+    box-shadow: -2px -2px 5px 0 rgba(0, 0, 0, 0.1);
 }

package/scss/mixins/_icon.scss

@@ -1,73 +1,73 @@
 @mixin fonticon {
-  font-family: generic-icons;
-  font-weight: 400 !important;
-  background-image: none;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    font-family: generic-icons;
+    font-weight: 400 !important;
+    background-image: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 @mixin fontawesome {
-  display: inline-block;
-  font-family: "Font Awesome 6 Free";
-  font-style: normal;
-  font-weight: 900;
-  font-variant: normal;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: auto;
-  font-feature-settings: "liga";
+    display: inline-block;
+    font-family: "Font Awesome 5 Free";
+    font-style: normal;
+    font-weight: 900;
+    font-variant: normal;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: auto;
+    font-feature-settings: "liga";
 }
 
 @mixin insert-icon($icon: "star", $size: 28px, $top: 0, $color: inherit) {
-  position: relative;
+    position: relative;
 
-  &::before {
-    @include fontawesome();
+    &::before {
+        @include fontawesome();
 
-    position: absolute;
-    top: $top;
-    left: 0;
-    display: block;
-    font-size: $size;
-    line-height: 1em;
-    color: $color;
-    text-transform: initial;
-    content: $icon !important;
-    font-feature-settings: "liga";
-  }
+        position: absolute;
+        top: $top;
+        left: 0;
+        display: block;
+        font-size: $size;
+        line-height: 1em;
+        color: $color;
+        text-transform: initial;
+        content: $icon !important;
+        font-feature-settings: "liga";
+    }
 }
 
 @mixin prepend-icon($icon: "star", $size: 28px, $left: 0, $color: inherit) {
-  @include insert-icon($icon, $size, 50%, $color);
+    @include insert-icon($icon, $size, 50%, $color);
 
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: $left;
-    z-index: 10;
-    transform: translateY(-50%);
-    @content;
-  }
+    &::before {
+        position: absolute;
+        top: 50%;
+        left: $left;
+        z-index: 10;
+        transform: translateY(-50%);
+        @content;
+    }
 }
 
 @mixin append-icon($icon: "star", $size: 28px, $right: 0, $color: inherit) {
-  padding-right: $size * 1.5;
+    padding-right: $size * 1.5;
 
-  @include insert-icon($icon, $size, 50%, $color);
+    @include insert-icon($icon, $size, 50%, $color);
 
-  &::before {
-    position: absolute;
-    top: 50%;
-    right: $right;
-    left: unset;
-    z-index: 10;
-    transform: translateY(-50%);
-    @content;
-  }
+    &::before {
+        position: absolute;
+        top: 50%;
+        right: $right;
+        left: unset;
+        z-index: 10;
+        transform: translateY(-50%);
+        @content;
+    }
 }
 
-@mixin set-icon-top($top: 50%) {
-  &::before {
-    top: $top;
-  }
+@mixin set-icon-top($top:50%) {
+    &::before {
+        top: $top;
+    }
 }

package/scss/mixins/_layer.scss

@@ -1,38 +1,41 @@
 @mixin base-layer() {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    content: "";
 }
 
 @mixin add-before-layer() {
-  position: relative;
+    position: relative;
 
-  &::before {
-    @include base-layer();
-    @content;
-  }
+    &::before {
+
+        @include base-layer();
+        @content;
+    }
 }
 
 @mixin add-after-layer() {
-  position: relative;
+    position: relative;
+
+    &::after {
 
-  &::after {
-    @include base-layer();
-    @content;
-  }
+        @include base-layer();
+        @content;
+    }
 }
 
 @mixin add-overlay($opacity: 0.5) {
-  position: relative;
+    position: relative;
+
+    &::before {
 
-  &::before {
-    @include base-layer();
+        @include base-layer();
 
-    z-index: 1;
-    background: rgba(0, 0, 0, $opacity);
-  }
+        z-index: 1;
+        background: rgba(0, 0, 0, $opacity);
+    }
 }

package/scss/mixins/_shape.scss

@@ -1,14 +1,16 @@
 @mixin rect($width, $height) {
-  width: $width;
-  height: $height;
+    width: $width;
+    height: $height;
 }
 
 @mixin square($width) {
-  @include rect($width, $width);
+
+    @include rect($width, $width);
 }
 
 @mixin circle($width) {
-  @include square($width);
 
-  border-radius: 50%;
+    @include square($width);
+
+    border-radius: 50%;
 }

package/scss/mixins/_text-truncate.scss

@@ -9,7 +9,7 @@
 
 @mixin has-text-truncated($lines: 3) {
   display: -webkit-box;
-  padding-bottom: 0.5rem;
+  padding-bottom: .5rem;
   overflow: hidden;
   -webkit-line-clamp: $lines;
   -webkit-box-orient: vertical;
@@ -30,4 +30,4 @@
     -webkit-box-orient: vertical;
     white-space: normal;
   }
-}
+}

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,39 +70,36 @@ $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: $secondary,
-  $duration: $default-duration,
-  $easing: $default-easing
-) {
-  transition: background-color $duration $easing;
+@mixin background-color-to($color: $primary, $duration: $default-duration, $easing: $default-easing) {
+    transition: background-color $duration $easing;
 
-  &:hover {
-    background-color: $color;
-  }
+    &:hover {
+        background-color: $color;
+    }
 }
 
-@mixin color-to($color: $secondary, $duration: 0.2s, $easing: $default-easing) {
-  transition: color $duration $easing;
+@mixin color-to($color: $primary, $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/variables/_.scss

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