ode-bootstrap 3.13.0-dev.202103031343 → 4.0.0

package/scss/components/_table-lists.scss

@@ -0,0 +1,140 @@
+.table-list {
+
+    &-header {
+        display: flex;
+        justify-content: space-between;
+        padding: 5px 15px;
+        font-size: 1.4rem;
+        font-weight: bold;
+        color: $gray-600;
+        
+        @include media-breakpoint-down(sm) {
+            display: none;
+        }
+
+        .table-list-item-preview {
+            width: 40px;
+        }
+    }
+
+    &-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 5px 15px;
+        margin: 5px 0;
+        font-size: 1.4rem;
+        color: $gray-600;
+        cursor: pointer;
+        border: 1px solid $gray-200;
+        border-radius: $border-radius-lg;
+
+        @extend .transition-hover;
+
+        &:hover {
+            border-color: $secondary;
+
+            @extend .transition-hover-fast;
+        }
+        
+        &:active,
+        &.active {
+            background-color: rgba($secondary, 0.1);
+            border-color: $secondary;
+        }
+
+        @include media-breakpoint-down(sm) {
+            flex-wrap: wrap;
+            padding: 10px;
+            margin: 10px 0;
+            border-color: $gray-300;
+        }
+
+        .table-list-item-preview {
+            width: 40px;
+            font-size: 1.6rem;
+            text-align: center;
+            vertical-align: middle;
+            @include media-breakpoint-down(sm) {
+                width: 30px;
+            }
+        }
+
+        .table-list-title {
+            margin: 0;
+            overflow: hidden;
+            font-size: 1.6rem;
+            font-weight: bold;
+            color: $gray-700;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .table-list-image {
+            width: 30px;
+            height: 30px;
+            margin-right: 5px;
+            border-radius: $border-radius;
+        }
+
+        .table-list-status {
+            padding-right: 10px;
+            font-size: 1.6rem;
+            text-align: right;
+
+            > * {
+                margin: 0 5px;
+            }
+        }
+
+        .table-list-modifiedBy {
+            font-size: 1.2rem;
+            @include media-breakpoint-down(sm) {
+                display: none;
+            }
+        }
+    }
+
+    &-title {
+        width: calc(100% - 450px);
+        @include media-breakpoint-down(sm) {
+            width: calc(100% - 40px); // 100% - .list-item-preview
+        }
+    }
+
+    &-status {
+        width: 75px;
+        @include media-breakpoint-down(sm) {
+            display: none;
+        }
+    }
+
+    &-owner {
+        width: 200px;
+        @include media-breakpoint-down(sm) {
+            width: 55%;
+            .avatar {
+                display: none;
+            }
+        }
+    }
+
+    &-modification {
+        width: 175px;
+        @include media-breakpoint-down(sm) {
+            width: 45%;
+            text-align: right;
+        }
+    }
+}
+
+@include media-breakpoint-down(sm) {
+
+    .explorer-view.table-list {
+        padding: 5px;
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+        border-left-color: transparent;
+    }
+}
+

package/scss/components/_tables.scss

@@ -0,0 +1,19 @@
+.table {
+  & > :not(:last-child) > :last-child > * {
+    border-bottom-color: $gray-200;
+  }
+  &-light {
+    color: $gray-700;
+  }
+  .remove {
+    color: $medium;
+    &:hover {
+      color: $red;
+    }
+  }
+
+  .btn-close {
+    margin-left: auto;
+    display: block;
+  }
+}

package/scss/components/_toast.scss

@@ -0,0 +1,45 @@
+$toast-start-color: #f0f9fc;
+$toast-end-color: #dceff7;
+$btn-border-radius: 0;
+
+.toast {
+    &-container {
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        z-index: 999;
+        padding: 10px;
+        font-size: 2em;
+    }
+    
+    ode-infotip & {
+        background: linear-gradient(to right, $toast-start-color, $toast-end-color);
+
+        &,
+        > *,
+        > * > * {
+            border: 0;
+            border-radius: 0;
+        }
+
+        .toast-header {
+            padding-bottom: 0;
+            margin-bottom: -1rem;
+            background-color: transparent;
+        }
+        .toast-body {
+            color: $deep-blue;
+        }
+
+        .btn {
+            border-radius: $btn-border-radius;
+
+            &-light {
+                &:hover {
+                    color: $primary;
+                }
+            }
+        }
+        
+    }
+}

package/scss/components/_tree-structure.scss

@@ -0,0 +1,143 @@
+/* VARIABLES */
+$tree-structure-width: 250px;
+
+/* COMPONENT */
+
+/* aside */.tree-structure {
+    width: $tree-structure-width;
+    padding: 15px;
+    font-size: 1.4rem;
+    font-weight: bold;
+    color: $gray-600;
+    background-color: rgba($white, 0.7);
+    box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.05);
+
+    &-title {
+        margin-bottom: 20px;
+        font-size: 2.4rem;
+        font-weight: bold;
+        color: $secondary;
+    }
+
+    &-tree {
+        max-height: calc(100vh - 220px);
+        padding-right: 5px;
+        padding-left: 0;
+        margin-left: 0;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: $gray-500 $gray-200;
+
+        ul {
+            padding-left: 10px;
+            margin-left: 0;
+        }
+
+        li {
+            list-style-type: none;
+
+            input[type="checkbox"] {
+                position: absolute;
+                margin: 6px 10px;
+                cursor: pointer;
+                opacity: 0;
+            }
+
+            label {
+                display: block;
+
+                a::before {
+                    margin-right: 5px;
+                    font-family: "FontAwesome";
+                    content: "\f105";
+                }
+            }
+
+            input ~ ul {
+                display: none;
+            }
+
+            input:checked {
+                & ~ ul {
+                    display: block;
+                }
+
+                & ~ label a::before {
+                    content: "\f107";
+                }
+            }
+
+            a {
+                display: block;
+                padding: 7px 15px;
+                margin: 5px 0;
+                line-height: 1.2;
+                color: $gray-600;
+                border-radius: $border-radius;
+
+                @extend .transition-hover-slow;
+
+                &:hover {
+                    color: $secondary;
+                    text-decoration: none;
+                    background-color: rgba($secondary, 0.075);
+
+                    @extend .transition-hover-fast;
+                }
+
+                &.active,
+                &:active {
+                    color: $secondary;
+                    background-color: rgba($secondary, 0.2);
+                }
+            }
+        }
+    }
+}
+
+.tree-structure-left {
+    border-radius: $border-radius 0 0 $border-radius;
+}
+
+.tree-structure-right {
+    border-radius: 0 $border-radius $border-radius 0;
+}
+
+.tree-structure + .main-content {
+    width: calc(100% - #{$tree-structure-width});
+    border-radius: 0 $border-radius $border-radius 0;
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.05);
+}
+
+.tree-structure.offcanvas {
+    background-color: rgba($white, 0.95);
+
+    .tree-structure-tree {
+        max-height: calc(100vh - 130px);
+    }
+}
+
+@include media-breakpoint-down(lg) {
+    .tree-structure {
+        display: none;
+        width: 400px;
+        background-color: $white;
+    }
+
+    .tree-structure.tree-structure-mobile {
+        display: block;
+    }
+
+    .tree-structure + .main-content {
+        width: 100%;
+        border-radius: $border-radius;
+    }
+}
+
+// tree-structure in modal
+.modal {
+  .tree-structure {
+    padding: 15px 0;
+    box-shadow: none;
+  }
+}

package/scss/components/widget/_.scss

@@ -0,0 +1,14 @@
+$widget-padding-x: 2rem;
+
+@import "base";
+@import "applications";
+@import "bookmarks";
+@import "calendar";
+@import "featured-news";
+@import "news";
+@import "recently-viewed";
+@import "record";
+@import "rss";
+@import "school";
+@import "dashboard";
+@import "flash";

package/scss/components/widget/_applications.scss

@@ -0,0 +1,48 @@
+.widget-applications {
+    //Widget Applications
+
+    .icon-grid {
+        display: flex;
+        flex-wrap: wrap;
+
+        &-item {
+            position: relative;
+            width: 25%;
+            font-size: 3.2em;
+
+            a {
+                @include have-child-in-middle();
+                @include background-color-to(white, 0.8s);
+
+                position: relative;
+                padding-top: 100%;
+                margin: 1px;
+                text-decoration: none;
+                background: $gray-100;
+
+                > i,
+                > img {
+                    @include have-child-in-middle();
+                    @include square(100%);
+
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+
+                > img {
+                    @include square(80%);
+                }
+            }
+
+            @include media-breakpoint-between(sm, md) {
+                width: 100 / 6 * 1%;
+            }
+        }
+    }
+
+    > .widget-body {
+        max-height: 300px;
+        overflow: auto;
+    }
+}

package/scss/components/widget/_base.scss

@@ -0,0 +1,133 @@
+.widget {
+    margin-bottom: 2em;
+    font-size: 1.4rem;
+    background-color: #fff;
+    border-radius: 6px;
+    box-shadow: 2px 2px 40px 0 rgba(0, 0, 0, 0.05);
+    //overflow: hidden;
+
+    a {
+        text-decoration: none;
+    }
+
+    ul {
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+    }
+
+    .meta {
+        font-size: 0.8em;
+        color: $gray-700;
+    }
+
+    &-empty-message {
+        display: block;
+        padding: 10px $widget-padding-x;
+        font-style: italic;
+        color: $gray-700;
+        text-align: center;
+
+        &.link {
+            cursor: pointer;
+
+            @include media-breakpoint-down(lg) {
+                pointer-events: none;
+            }
+        }
+    }
+
+    &-header {
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        padding: 1.2rem $widget-padding-x;
+        border-bottom: 1px solid $ghost;
+
+        .subtitle {
+            flex: 1;
+
+            .seemore {
+                @include color-to($orange);
+
+                color: inherit;
+
+                &:hover {
+                    text-decoration: none;
+                }
+            }
+
+            .seemore-text {
+                padding-left: 0.5em;
+                font-size: 0.8em;
+                font-weight: 400;
+                text-transform: initial;
+            }
+        }
+
+        &:hover {
+            .widget-options {
+                opacity: 1;
+            }
+        }
+    }
+
+    &-options {
+        @include add-transitions(opacity);
+        opacity: 0;
+        
+        & > * {
+            display: inline-block;
+
+            &:not(:first-child) {
+                margin-left: 0.8rem;
+            }
+        }
+
+        .tool,
+        .widget-handle {
+            @include color-to($gray-700);
+            color: $gray-400;
+        }
+
+        @include media-breakpoint-down(lg) {
+            display: none;
+        }
+    }
+
+    &-footer {
+        &-action {
+            text-align: center;
+
+            .link {
+                display: block;
+                padding: 0.4em 0;
+                font-size: $small-font-size;
+                color: $gray-600;
+
+                @include add-transitions(background-color, color) {
+                    color: $primary;
+                    background-color: $ghost;
+                }
+            }
+        }
+    }
+
+    &:not(.widget-locked) {
+        .widget-header {
+            cursor: grab;
+        }
+    }
+
+    &:is(.widget-locked) {
+        .widget-handle {
+            display: none;
+        }
+    }
+
+    &-qwant {
+        .widget-header {
+            margin-bottom: -2em;
+        }
+    }
+}

package/scss/components/widget/_bookmarks.scss

@@ -0,0 +1,23 @@
+.widget-bookmarks {
+    //Widget Liens utiles
+
+    .bookmark {
+        &-item {
+
+            @include background-color-to(rgba($third, 0.1));
+
+            padding: 0 $widget-padding-x;
+            color: $third;
+            border-bottom: 1px solid $gray-100;
+
+            .link {
+
+                @include decoration-to(none);
+                @include insert-icon("\f0c1", 0.8em, 1em);
+
+                display: block;
+                padding: 0.4em 0 0.4em 25px;
+            }
+        }
+    }
+}

package/scss/components/widget/_calendar.scss

@@ -0,0 +1,57 @@
+.widget-calendar {
+    //Widget Calendar
+
+    .day-list {
+        margin: 10px $widget-padding-x;
+    }
+
+    .day-item {
+        position: relative;
+        padding-bottom: 0.5em;
+
+        &-title {
+            padding-left: 20px;
+
+            @include prepend-icon("\f111", 8px, 0, $orange);
+        }
+
+        &::before {
+            position: absolute;
+            top: 0.7em;
+            left: 3.5px;
+            display: block;
+            width: 1px;
+            height: 100%;
+            content: "";
+            background: #c8c8c8;
+        }
+
+        &:last-child {
+            &::before {
+                content: none;
+            }
+        }
+    }
+
+    .moment-item {
+        display: flex;
+        align-items: start;
+        padding-bottom: 0.75em;
+        padding-left: 25px;
+
+        .icon,
+        .hour {
+            width: 1em;
+            margin-right: 0.75em;
+        }
+
+        .hour {
+            width: 2.5em;
+            text-align: right;
+        }
+
+        .link {
+            flex: 1;
+        }
+    }
+}

package/scss/components/widget/_dashboard.scss

@@ -0,0 +1,95 @@
+.widget-dashboard {
+    .dashboard {
+        &-choice {
+            display: flex;
+            justify-content: start;
+            background: #fff;
+
+            .avatar-link {
+                flex: 1;
+                padding: 10px $widget-padding-x;
+                text-align: center;
+                text-decoration: none;
+
+                @include background-color-to($cyan);
+                @include color-to(#fff);
+
+                img {
+
+                    @include square(40px);
+
+                    display: block;
+                    margin: 0 auto 5px;
+                }
+
+                span {
+                    display: block;
+                }
+
+                &.active {
+                    color: #fff;
+                    background: $third;
+                }
+
+                &:not(:last-child) {
+                    border-right: $cyan 1px solid;
+                }
+            }
+        }
+
+        &-list {
+            .item {
+                &-inner {
+                    display: flex;
+                    padding: 8px $widget-padding-x;
+                    text-decoration: none;
+
+                    @include background-color-to($gray-100, 0.4s, $easeOutQuad);
+                }
+
+                .left {
+                    //width: 40px;
+
+                    padding-right: $widget-padding-x;
+                }
+
+                .icon {
+                    font-size: 1.4em;
+                    color: #fff;
+                    background: #0d5571;
+
+                    @include circle(1.8em);
+                    @include have-child-in-middle();
+                }
+
+                &:nth-child(2n) {
+                    background: rgba($third, 0.07);
+                }
+
+                &:nth-child(2) {
+                    .icon {
+                        background: #167194;
+                    }
+                }
+
+                &:nth-child(3) {
+                    .icon {
+                        background: #1e83ac;
+                    }
+                }
+
+                &:nth-child(4) {
+                    .icon {
+                        background: #2e99c4;
+                    }
+                }
+
+                &:nth-child(5) {
+                    .icon {
+                        background: #29a3d3;
+                    }
+                }
+            }
+        }
+    }
+}