ode-bootstrap 3.13.0-dev.202107191426 → 4.0.0

package/scss/atoms/_icons.scss

@@ -0,0 +1,78 @@
+// 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");
+            }
+        }
+    }
+}

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

@@ -0,0 +1,21 @@
+@import "container-advanced";
+@import "avatar";
+@import "buttons";
+@import "modal";
+@import "toast";
+@import "dominos";
+@import "dragndrop";
+@import "dropdowns";
+@import "emptyscreen";
+@import "explorer";
+@import "feed";
+@import "filters";
+@import "forms";
+@import "media-library";
+@import "sticky-toolbox";
+@import "tables";
+@import "table-lists";
+@import "tree-structure";
+@import "popover";
+
+@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

@@ -0,0 +1,74 @@
+$avatar-size: 65px !default;
+
+.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;
+
+        @include circle($avatar-size);
+
+        .photo {
+            img {
+                @include avatar-image($avatar-size);
+            }
+        }
+
+        .circle {
+            @include have-child-in-middle();
+            @include circle($avatar-size / 1.8);
+
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            font-size: $avatar-size / 3.5;
+            color: $white;
+            transform: translate(20%, 20%);
+        }
+    }
+
+    &-link {
+        display: inline-block;
+        cursor: pointer;
+
+        img {
+            @include avatar-image($avatar-size);
+        }
+    }
+
+    .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

@@ -0,0 +1,78 @@
+%btn-alt-base {
+    position: relative;
+    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;
+}
+
+.btn {
+    &.btn-alt {
+        @extend %btn-alt-base;
+
+        background-color: $third;
+        border-color: $third;
+
+        @include add-transitions(border-color, background-color) {
+            background-color: $orange;
+            border-color: $orange;
+        }
+    }
+
+    &.btn-alt-outline {
+        @extend %btn-alt-base;
+
+        @include add-transitions(border-color, color) {
+            color: $orange;
+            border-color: $orange;
+        }
+
+        color: $third;
+        background-color: transparent;
+        border: 1px solid $third;
+    }
+
+    &-light {
+        background-color: $gray-200;
+        
+        @include add-transitions(color, background-color) {
+            color: $primary;
+            text-decoration: none;
+            background-color: $gray-200;
+        }
+    }
+
+    &-circle {
+        @include circle(2.5em);
+        @include have-child-in-middle ();
+
+        @include add-transitions(color, background-color) {
+            color: #fff;
+            text-decoration: none;
+            background-color: $cyan;
+        }
+
+        position: relative;
+        display: inline-flex;
+        // margin-bottom: 1.5em;
+        font-size: 2em;
+        color: #fff;
+        background: $third;
+
+        .label {
+            position: absolute;
+            bottom: -2em;
+            font-size: 0.8em;
+            color: $gray-700;
+        }
+    }
+    // A réécrire, mais le btn-circle de Julien ne colle pas à mon cas (les width en em, la font-size, la couleur, etc)
+
+    &-circular {
+        @include circle(32px);
+    }
+}

package/scss/components/_container-advanced.scss

@@ -0,0 +1,141 @@
+$breakpoint-up: "lg";
+$breakpoint-down: "lg";
+
+.container-advanced {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+
+    &-wrapper {
+        display: flex;
+        justify-content: space-between;
+        margin: 20px auto;
+
+        @include media-breakpoint-down($breakpoint-down) {
+            width: 300vw;
+            max-width: unset;
+
+            @include add-transitions(transform);
+        }
+
+        @include media-breakpoint-up($breakpoint-up) {
+            padding: 0 2rem;
+            max-width: 1700px;
+            gap: 4rem;
+        }
+    }
+
+    &-left,
+    &-center,
+    &-right {
+        flex: 1;
+
+        @include media-breakpoint-down($breakpoint-down) {
+            margin: 2rem;
+        }
+    }
+
+    &-left,
+    &-right {
+        @include media-breakpoint-up($breakpoint-up) {
+            max-width: 25%;
+        }
+    }
+
+    &-left {
+        order: 1;
+    }
+
+    &-center {
+        order: 2;
+
+        @include media-breakpoint-up($breakpoint-up) {
+            max-width: 50%;
+        }
+    }
+
+    &-right {
+        order: 3;
+    }
+
+    @include media-breakpoint-down($breakpoint-down) {
+        &.focus-left {
+            .container-advanced-wrapper {
+                transform: translateX(0);
+            }
+            &.hide {
+                .container-advanced-center > *,
+                .container-advanced-right > * {
+                    display: none;
+                }
+            }
+        }
+
+        &.focus-right {
+            .container-advanced-wrapper {
+                transform: translateX(100 / 3 * 2% * -1);
+            }
+            &.hide {
+                .container-advanced-center > *,
+                .container-advanced-left > * {
+                    display: none;
+                }
+            }
+        }
+
+        &.focus-center {
+            .container-advanced-wrapper {
+                transform: translateX(100 / 3 * 1% * -1);
+            }
+            &.hide {
+                .container-advanced-left > *,
+                .container-advanced-right > * {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    &-nav {
+        color: $white;
+        background-color: $third;
+
+        @include media-breakpoint-up($breakpoint-up) {
+            display: none;
+        }
+
+        .list-trigger {
+            display: flex;
+            justify-content: space-around;
+            overflow: hidden;
+
+            .trigger {
+                @include add-before-layer() {
+                    @include add-transitions(opacity, transform);
+
+                    top: 50%;
+                    z-index: -1;
+                    height: auto;
+                    padding-top: 100%;
+                    background: $cyan;
+                    border-radius: 50%;
+                    opacity: 0;
+                    transform: translateY(-50%) scale(1.1);
+                }
+
+                z-index: 2;
+                flex: 1;
+                align-self: center;
+                padding: 15px;
+                font-size: 1.1rem;
+                text-align: center;
+
+                &.on {
+                    &::before {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+}

package/scss/components/_dominos.scss

@@ -0,0 +1,182 @@
+/* VARIABLES */
+$domino-width: 240px;
+$overlay-width: $domino-width / 1.5;
+
+/* COMPONENT */
+.dominos {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    justify-content: center;
+}
+
+.domino {
+    position: relative;
+    margin: 10px;
+    cursor: pointer;
+    background-color: $white;
+    border: 1px solid $gray-300;
+    border-radius: $border-radius-lg;
+
+    @extend .transition-hover;
+
+    &-image {
+        position: relative;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        height: 120px;
+        border-radius: $border-radius-lg $border-radius-lg 0 0;
+
+        &::before {
+            position: absolute;
+            left: 0;
+            top: 0;
+            content: '';
+            width: 100%;
+            height: 100%;
+            background: currentColor;
+            opacity: 0.1;
+            border-radius: $border-radius-lg $border-radius-lg 0 0;
+        }
+
+        img {
+            width: 100%;
+            height: 100%;
+            border-radius: $border-radius-lg $border-radius-lg 0 0;
+            object-fit: cover;
+        }
+    }
+
+    &-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        width: 100%;
+        height: 100%;
+        padding: 5px 10px;
+        color: $white;
+        border-radius: $border-radius-lg $border-radius-lg 0 0;
+
+        span {
+            font-size: 1.2rem;
+            font-weight: bold;
+        }
+
+        i {
+            margin: 3px;
+            font-weight: normal;
+        }
+
+        & .left,
+        & .right {
+            opacity: 0;
+        }
+    }
+
+    &.folder .domino-image,
+    &.file .domino-image {
+        align-items: center;
+        justify-content: center;
+        
+        > i {
+            font-size: 5rem;
+        }
+    }
+    
+    &.folder .domino-image {
+        color: $gray-600;
+    }
+
+    &-infos {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: calc(#{$domino-width} - #{$overlay-width});
+        padding: 10px;
+
+        .domino-title {
+            margin-bottom: 5px;
+            font-size: 1.4rem;
+            font-weight: bold;
+            color: $gray-700;
+
+            @extend .text-truncate;
+        }
+
+        .domino-info {
+            font-size: 1.2rem;
+            color: $gray-600;
+
+            @extend .text-truncate;
+
+            a {
+                font-weight: bold;
+                color: $secondary;
+                cursor: pointer;
+
+                &:hover {
+                    color: $primary;
+                }
+            }
+        }
+    }
+
+    &:hover {
+        border-color: $secondary;
+
+        @extend .transition-hover-slow;
+
+        .domino-overlay {
+            background-color: rgba($black, 0.4);
+
+            & .left,
+            & .right {
+                opacity: 1;
+
+                @extend .transition-hover;
+            }
+        }
+    }
+
+    &:active,
+    &.active {
+        background-color: rgba($secondary, 0.1);
+        border-color: $secondary;
+    }
+
+    &.active {
+        .domino-overlay {
+            background-color: rgba($black, 0.5);
+
+            & .left,
+            & .right {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.dominos .domino {
+    width: calc(16.667% - 20px);
+    max-width: $domino-width;
+    @media (max-width: 992px) {
+        margin: 5px;
+        &:hover,
+        &.active {
+            .domino-overlay {
+                background-color: transparent;
+    
+                & .left,
+                & .right {
+                    opacity: 0;
+                }
+            }
+        }
+    }
+}
+
+

package/scss/components/_dragndrop.scss

@@ -0,0 +1,21 @@
+.drag-n-drop {
+    &-item {
+        .draggable {} // élement déplacable
+        .no-draggable {} // élément non déplacable
+    }
+    &-area {
+        .draggable {} // Reçoit le drag
+        .no-draggable {} // Ne peux pas recevoir le drag
+    }
+}
+
+.drop-zone {
+    padding: 50px;
+    border: 2px dashed $gray-300;
+    background-color: rgba($gray-100, 0.25);
+    border-radius: $border-radius-lg;
+    @include media-breakpoint-down(md) {
+        padding: 25px;
+    }
+}
+

package/scss/components/_dropdowns.scss

@@ -0,0 +1,6 @@
+.dropdown-item {
+
+    input[type="checkbox"] {
+        vertical-align: middle;
+    }
+}

package/scss/components/_emptyscreen.scss

@@ -0,0 +1,48 @@
+.emptyscreen {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 50px;
+
+    @include media-breakpoint-down(md) {
+        padding: 25px;
+    }
+
+    &-header {
+        color: $gray-800;
+        font-size: 3rem;
+
+        @include media-breakpoint-down(md) {
+            font-size: 2rem;
+        }
+    }
+
+    &-body {
+        color: $gray-700;
+        margin: 15px;
+
+        @include media-breakpoint-down(md) {
+            font-size: 1.4rem;
+        }
+    }
+
+    &-image {
+        max-height: 300px;
+        margin-top: 25px;
+
+        @include media-breakpoint-down(md) {
+            max-height: 200px;
+        }
+
+        &.mini {
+            max-height: 200px;
+
+            @include media-breakpoint-down(md) {
+                max-height: 150px;
+            }
+        }
+    }
+}