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

package/scss/components/widget/_record.scss

@@ -1,68 +1,64 @@
 .widget-record {
-    .widget-body {
-        display: flex;
-        align-items: center;
+  .widget-body {
+    display: flex;
+    align-items: center;
 
-        >* {
-            // flex: 1;
-            padding: 1.6rem;
-            text-align: center;
+    > * {
+      // flex: 1;
+      padding: 1.6rem;
+      text-align: center;
 
-            .img-fluid {
-                width: 100px;
-            }
-        }
+      .img-fluid {
+        width: 100px;
+      }
     }
+  }
 
-    .form-control,
-    .form-select {
-        padding: 12px 16px;
-        border: 1px solid #E4E4E4;
-        border-radius: 8px;
-    }
+  .form-control,
+  .form-select {
+    padding: 12px 16px;
+    border: 1px solid #e4e4e4;
+    border-radius: 8px;
+  }
 }
 
 .record {
-    &-timer {
-        font-size: 2.2rem;
-    }
+  &-timer {
+    font-size: 2.2rem;
+  }
 
-    &-widget-player {
-        margin: 1.6rem 2.4rem;
-        min-height: 150px;
-        border-radius: 4px;
-        background-color: #D9D9D9;
+  &-widget-player {
+    margin: 1.6rem 2.4rem;
+    min-height: 150px;
+    border-radius: 4px;
+    background-color: #d9d9d9;
 
-        > video {
-            display: block;
-        }
+    > video {
+      display: block;
     }
+  }
 
-    &-widget-message {
-        margin: -3.2rem 0 0 0;
-    }
+  &-controls {
+    display: flex;
+    justify-content: space-around;
+    margin-block: 1.5em;
 
-    &-controls {
-        display: flex;
-        justify-content: space-around;
-        margin-block: 1.5em;
+    .btn-circle {
+      font-size: 1.6rem;
 
-        .btn-circle {
-            font-size: 1.6rem;
+      &:hover {
+        color: $white;
+      }
 
-            &:hover {
-                color: $white;
-            }
+      &:disabled {
+        opacity: 1;
+        background-color: #e4e4e4 !important;
+        border-color: transparent;
+      }
 
-            &:disabled {
-                opacity: 1;
-                background-color: #E4E4E4 !important;
-                border-color: transparent;
-            }
-
-            &.btn-danger {
-                background-color: $red;
-            }
-        }
+      &.btn-danger {
+        background-color: $red;
+      }
     }
-}
+  }
+}

package/scss/components/widget/_rss.scss

@@ -1,33 +1,33 @@
 //Widget RSS
 .widget-rss {
-    .rss-feed {
-        .feed-title {
-            padding: 8px $widget-padding-x;
-            font-weight: 700;
-            color: #fff;
-            background: $third;
+  .rss-feed {
+    .feed-title {
+      padding: 8px $widget-padding-x;
+      font-weight: 700;
+      color: $white;
+      background: $secondary;
 
-            @include append-icon("\f0d7", 1em, 15px);
-            cursor: pointer;
-        }
+      @include append-icon("\f0d7", 1em, 15px);
+      cursor: pointer;
+    }
 
-        .item {
-            &:nth-child(2n) {
-                background: rgba($third, 0.07);
-            }
+    .item {
+      &:nth-child(2n) {
+        background: rgba($secondary, 0.07);
+      }
 
-            a {
-                display: block;
-                padding: 10px $widget-padding-x;
-                text-decoration: none;
+      a {
+        display: block;
+        padding: 10px $widget-padding-x;
+        text-decoration: none;
 
-                @include background-color-to($gray-100, 0.4s, $easeOutQuad);
-            }
+        @include background-color-to($gray-300, 0.4s, $easeOutQuad);
+      }
 
-            img {
-                max-width: 100%;
-                height: auto;
-            }
-        }
+      img {
+        max-width: 100%;
+        height: auto;
+      }
     }
+  }
 }

package/scss/components/widget/_school.scss

@@ -1,93 +1,99 @@
 //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;
-        padding: 30px $widget-padding-x;
-        font-size: 1.3em;
-        color: #fff;
-        background-position: center;
-        background-size: cover;
-
-        .name {
-            font-weight: 600;
+        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;
         }
 
-        .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;
-                    }
-                }
-            }
+        &::after {
+          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%);
-
-            @include media-breakpoint-down(xl) {
-                .avatar-link:nth-child(n + 4) {
-                    display: none;
-                }
-            }
+      &-choice {
+        > div {
+          @include color-to($primary);
+
+          padding: 6px 20px;
+          cursor: pointer;
+
+          &.dropdown-item {
+            white-space: normal;
+          }
         }
+      }
     }
 
-    .btn-group {
-        padding: 1.6rem;
-        padding-bottom: 0;
-        flex-wrap: wrap;
+    .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%);
 
-        > * {
-            padding: 0.6rem 1.5rem;
-            margin-bottom: 1em;
-
-            &:not(:last-child) {
-                margin-right: 0.4em;
-            }
+      @include media-breakpoint-down(xl) {
+        .avatar-link:nth-child(n + 4) {
+          display: none;
         }
+      }
+    }
+  }
+
+  .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;
+      }
     }
+  }
 }

package/scss/index.scss

@@ -1,15 +1,6 @@
 @import "variables/";
-
-// --- IMPORT BOOTSTRAP NATIVE ---
-@import "bootstrap";
-
-// --- IMPORT MIXINS ---
+@import "vendors/";
 @import "mixins/";
-
-// --- 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 "tokens/";
 @import "components/";
+@import "utilities/";

package/scss/mixins/_.scss

@@ -1,7 +1,7 @@
-@import "transition";
+@import "align";
+@import "avatar";
+@import "shape";
 @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 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";
+  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";
 }
 
 @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,41 +1,38 @@
 @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;
-
-    &::after {
+  position: relative;
 
-        @include base-layer();
-        @content;
-    }
+  &::after {
+    @include base-layer();
+    @content;
+  }
 }
 
 @mixin add-overlay($opacity: 0.5) {
-    position: relative;
-
-    &::before {
+  position: relative;
 
-        @include base-layer();
+  &::before {
+    @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,16 +1,14 @@
 @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);
 
-    @include square($width);
-
-    border-radius: 50%;
+  border-radius: 50%;
 }

package/scss/mixins/_text-truncate.scss

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