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

package/scss/components/_feed.scss

@@ -1,197 +1,197 @@
 $feed-spacing: 20px !default;
 
 .feed {
-  font-size: 14px;
+    font-size: 14px;
 
-  .filter-button {
-    @include append-icon("\f107", 1em, 0);
+    .filter-button {
+        @include append-icon("\f107", 1em, 0);
 
-    display: inline-block;
-    margin-bottom: 0.5em;
-  }
-
-  &-divider-message {
-    @include add-before-layer() {
-      top: 50%;
-      z-index: -1;
-      height: 1px;
-      border-top: 2px dashed $gray-400;
-    }
-
-    margin-bottom: $feed-spacing;
-    text-align: center;
-
-    .message {
-      color: $gray-600;
-      background: $body-bg;
+        display: inline-block;
+        margin-bottom: 0.5em;
     }
-  }
 
-  &-item {
-    display: flex;
-    padding: 15px $feed-spacing;
-    margin-bottom: $feed-spacing;
-    overflow: hidden;
-    background: $white;
-    border-radius: 8px;
-
-    @include add-before-layer();
-
-    @include media-breakpoint-down(lg) {
-      padding-right: 50px;
-    }
-
-    &::before {
-      width: 4px;
-      background: currentColor;
+    &-divider-message {
+        @include add-before-layer() {
+            top: 50%;
+            z-index: -1;
+            height: 1px;
+            border-top: 2px dashed $gray-400;
+        }
 
-      @include border-start-radius(8px);
-    }
+        margin-bottom: $feed-spacing;
+        text-align: center;
 
-    .zone-avatar {
-      padding-right: 25px;
-      justify-self: stretch;
+        .message {
+            color: $gray-600;
+            background: $body-bg;
+        }
     }
 
-    .zone-text {
-      flex: 1;
-      color: $gray-800;
-
-      .meta {
+    &-item {
         display: flex;
-        justify-content: space-between;
-        padding-bottom: 0.4em;
-        margin-bottom: 0.4em;
-        font-size: 0.8em;
-        color: $gray-600;
-        border-bottom: 1px solid $gray-300;
-      }
-
-      .report {
-        br:first-of-type {
-          display: none;
-        }
+        padding: 15px $feed-spacing;
+        margin-bottom: $feed-spacing;
+        overflow: hidden;
+        background: var(--bs-white);
+        border-radius: 8px;
 
-        a {
-          @extend .link;
+        @include add-before-layer();
+
+        @include media-breakpoint-down(lg) {
+            padding-right: 50px;
         }
-      }
 
-      .username {
-        //
+        &::before {
+            width: 4px;
+            background: currentColor;
 
-        .link {
-          color: currentColor;
+            @include border-start-radius(8px);
         }
-      }
-    }
 
-    .zone-tools {
-      position: absolute;
-      top: 0;
-      right: 0;
-      z-index: 2;
-      display: flex;
-      flex-direction: column;
-      align-items: start;
-      justify-content: center;
-      width: 60%;
-      height: 100%;
-      padding-left: 2rem;
-      background-color: $white;
-      transition-duration: 0.2s;
-      transform: translateX(120%);
-      justify-self: stretch;
-
-      @include add-transitions(transform);
-
-      @include media-breakpoint-down(lg) {
-        transform: translateX(101%);
-      }
-
-      @include media-breakpoint-down(md) {
-        width: 50%;
-      }
-
-      @include media-breakpoint-down(sm) {
-        width: 60%;
-      }
-
-      .control {
-        @include prepend-icon("\f053", 1.4em) {
-          position: relative;
-          top: 0;
-          display: flex;
-          align-items: center;
-          height: 100%;
-          padding: 0 10px;
-          transform: translateY(0);
-          transform-origin: center;
-
-          @include add-transitions(transform);
+        .zone-avatar {
+            padding-right: 25px;
+            justify-self: stretch;
         }
 
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        color: $secondary;
-        cursor: pointer;
-        background: $white;
-        border-right: 1px solid $gray-200;
-        border-left: 1px solid $gray-200;
-        box-shadow: -5px 0 10px -10px rgba(0, 0, 0, 0.25);
-        transform: translateX(-100%);
-
-        @include add-transitions(background-color, color) {
-          color: $white;
-          background-color: $secondary;
+        .zone-text {
+            flex: 1;
+            color: $gray-800;
+
+            .meta {
+                display: flex;
+                justify-content: space-between;
+                padding-bottom: 0.4em;
+                margin-bottom: 0.4em;
+                font-size: 0.8em;
+                color: $gray-600;
+                border-bottom: 1px solid $gray-200;
+            }
+
+            .report {
+                br:first-of-type {
+                    display: none;
+                }
+
+                a {
+                    @extend .link;
+                }
+            }
+
+            .username {
+                //
+
+                .link {
+                    color: currentColor;
+                }
+            }
         }
 
-        @include media-breakpoint-down(lg) {
-          border-color: $gray-200;
+        .zone-tools {
+            position: absolute;
+            top: 0;
+            right: 0;
+            z-index: 2;
+            display: flex;
+            flex-direction: column;
+            align-items: start;
+            justify-content: center;
+            width: 60%;
+            height: 100%;
+            padding-left: 2rem;
+            background-color: var(--bs-white);
+            transition-duration: 0.2s;
+            transform: translateX(120%);
+            justify-self: stretch;
+
+            @include add-transitions(transform);
+
+            @include media-breakpoint-down(lg) {
+                transform: translateX(101%);
+            }
+
+            @include media-breakpoint-down(md) {
+                width: 50%;
+            }
+
+            @include media-breakpoint-down(sm) {
+                width: 60%;
+            }
+
+            .control {
+                @include prepend-icon("\f053", 1.4em) {
+                    position: relative;
+                    top: 0;
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                    padding: 0 10px;
+                    transform: translateY(0);
+                    transform-origin: center;
+                    
+                    @include add-transitions(transform);
+                }
+
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: 100%;
+                color: $primary;
+                cursor: pointer;
+                background: var(--bs-white);
+                border-right: 1px solid $gray-200;
+                border-left: 1px solid $gray-200;
+                box-shadow: -5px 0 10px -10px rgba(0, 0, 0, 0.25);
+                transform: translateX(-100%);
+
+                @include add-transitions(background-color, color) {
+                    color: var(--bs-white);
+                    background-color: $primary;
+                }
+
+                @include media-breakpoint-down(lg) {
+                    border-color: $gray-200;
+                }
+            }
+
+            .link {
+                display: block;
+
+                > i {
+                    margin-right: 1rem;
+                }
+            }
+
+            &.open {
+                transform: translateX(0) !important;
+
+                .control {
+                    &::before {
+                        transform: rotate(180deg);
+                    }
+
+                    @media (hover: none) {
+                        color: var(--bs-white);
+                        background-color: $primary;
+                    }
+                }
+            }
         }
-      }
-
-      .link {
-        display: block;
 
-        > i {
-          margin-right: 1rem;
+        [class*="ic-mood"] {
+            font-size: 3rem;
         }
-      }
-
-      &.open {
-        transform: translateX(0) !important;
 
-        .control {
-          &::before {
-            transform: rotate(180deg);
-          }
-
-          @media (hover: none) {
-            color: $white;
-            background-color: $secondary;
-          }
+        &:hover {
+            .zone-tools {
+                transform: translateX(101%);
+            }
         }
-      }
-    }
-
-    [class*="ic-mood"] {
-      font-size: 3rem;
     }
 
-    &:hover {
-      .zone-tools {
-        transform: translateX(101%);
-      }
-    }
-  }
-
-  &.new {
-    .date {
-      @include append-icon("\f111", 0.7em, 0, $orange);
-      @include set-icon-top(1em);
+    &.new {
+        .date {
+            @include append-icon("\f111", 0.7em, 0, $orange);
+            @include set-icon-top(1em);
+        }
     }
-  }
 }

package/scss/components/_filters.scss

@@ -1,76 +1,76 @@
 .filters {
-  .btn {
-    color: $gray-600;
-    box-shadow: none;
+    .btn {
+        color: $gray-600;
+        box-shadow: none;
 
-    &.inactive {
-      color: $gray-400;
+        &.inactive {
+            color: $gray-400;
+        }
     }
-  }
 }
 
 .filters-chips {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: flex-start;
-  margin: 0 -5px 1rem;
-  margin-bottom: 1em;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    justify-content: flex-start;
+    margin: 0 -5px 1rem;
+    margin-bottom: 1em;
 
-  &:hover {
-    color: unset;
-    background-color: transparent;
-  }
+    &:hover {
+        color: unset;
+        background-color: transparent;
+    }
 
-  .filter {
-    position: relative;
-    display: inline-block;
-    padding: 3px 15px;
-    margin: 0 5px 10px;
-    overflow: hidden;
-    font-weight: 400;
-    text-decoration: none;
-    cursor: pointer;
-    background-color: $white;
-    border: 1px solid currentColor;
-    border-radius: 20px;
+    .filter {
+        position: relative;
+        display: inline-block;
+        padding: 3px 15px;
+        margin: 0 5px 10px;
+        overflow: hidden;
+        font-weight: 400;
+        text-decoration: none;
+        cursor: pointer;
+        background-color: #fff;
+        border: 1px solid currentColor;
+        border-radius: 20px;
 
-    @include add-transitions(background-color, color);
+        @include add-transitions(background-color, color);
 
-    &.visible {
-      display: block;
-    }
+        &.visible {
+            display: block;
+        }
 
-    &.active {
-      background-color: currentColor !important;
+        &.active {
+            background-color: currentColor !important;
 
-      .icon,
-      .label {
-        color: $white;
-      }
-    }
+            .icon,
+            .label {
+                color: #fff;
+            }
+        }
 
-    .hidden-checkbox {
-      display: none;
-    }
+        .hidden-checkbox {
+            display: none;
+        }
 
-    .icon {
-      position: relative;
-      z-index: 2;
-      color: inherit;
-      display: inline-flex;
-      align-items: center;
-      vertical-align: middle;
+        .icon {
+            position: relative;
+            z-index: 2;
+            color: inherit;
+            display: inline-flex;
+            align-items: center;
+            vertical-align: middle;
 
-      @include square(1.5em);
-    }
+            @include square(1.5em);
+        }
 
-    .label {
-      position: relative;
-      z-index: 2;
-      display: inline-block;
-      font-size: 1em;
-      vertical-align: middle;
+        .label {
+            position: relative;
+            z-index: 2;
+            display: inline-block;
+            font-size: 1em;
+            vertical-align: middle;
+        }
     }
-  }
 }

package/scss/components/_forms.scss

@@ -0,0 +1,36 @@
+$input-placeholder-color: #B0B0B0;
+
+.input-group {
+    .btn {
+        box-shadow: none !important;
+    }
+}
+
+.form-control {
+    padding: 1.2rem 1.6rem;
+
+    @include media-breakpoint-up(xl) {
+        font-size: 1.6rem;
+    }
+
+    &::placeholder {
+        font-style: italic;
+        color: $input-placeholder-color;
+    }
+}
+
+.input-searchbar {
+    position: relative;
+
+    .ic-search {
+        position: absolute;
+        top: 50%;
+        left: 1.5rem;
+        transform: translateY(-50%);
+        color: $gray-500;
+    }
+
+    .ic-search + input {
+        padding-left: 40px;
+    }
+}

package/scss/components/_media-library.scss

@@ -1,23 +1,23 @@
 .media-library {
-  width: calc(100% - 250px);
-  padding: 10px;
-  @include media-breakpoint-down(md) {
-    width: 100%;
-  }
-  .item {
-    border-radius: $border-radius;
-    width: calc(20% - 10px);
-    text-align: center;
+    width: calc(100% - 250px);
     padding: 10px;
-    margin: 1px;
     @include media-breakpoint-down(md) {
-      width: calc(50% - 10px);
+        width: 100%;
     }
-    &:hover {
-      background-color: rgba($secondary, 0.1);
-      .figure-caption {
-        color: $secondary;
-      }
+    .item {
+        border-radius: $border-radius;
+        width: calc(20% - 10px);
+        text-align: center;
+        padding: 10px;
+        margin: 1px;
+        @include media-breakpoint-down(md) {
+            width: calc(50% - 10px);
+        }
+        &:hover {
+            background-color: rgba($secondary, .1);
+            .figure-caption {
+                color: $secondary;
+            }
+        }
     }
-  }
-}
+}