ode-bootstrap-one 1.1.0-explorer.202111161306

package/scss/atoms/_icons.scss

@@ -0,0 +1,30 @@
+.application {
+    //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");
+            }
+        }
+    }
+}
+
+.ic-avatar::before {
+    content: '\e95a'
+}
+
+.navbar-help::before {
+    content: url(#{$images-path}/icons/question.svg) !important;
+    display: block;
+    height: 24px;
+    width: 18px;
+    margin: .6rem .3rem;
+}

package/scss/atoms/_typography.scss

@@ -0,0 +1,13 @@
+@font-face {
+    font-family: "Fira Sans";
+    src: url(#{$fonts-path}/fira-sans/FiraSans-Regular.ttf);
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "KGJune";
+    src: url(#{$fonts-path}/kg-june/KGJuneBug.ttf);
+    font-weight: normal;
+    font-style: normal;
+}

package/scss/components/_.scss

@@ -0,0 +1,7 @@
+@import "navbar";
+@import "buttons";
+// ?
+@import "applications";
+@import "dominos";
+//A enlever après création du bouton custom
+@import "filters";

package/scss/components/_applications.scss

@@ -0,0 +1,507 @@
+.application {
+    &__title {
+        font-family: "KGJune";
+        color: $accent;
+        text-transform: uppercase;
+        font-size: 2.8rem;
+    }
+    &__item {
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        align-items: center;
+        text-decoration: none;
+        position: relative;
+        width: $application-width;
+        height: $application-height;
+        margin: 5px;
+        padding: 5px;
+        background-color: transparent;
+        color: $text-color;
+        text-align: center;
+        border: 1px dashed transparent;
+        border-radius: $border-radius;
+        transition: color 0.4s ease-in-out;
+        cursor: pointer;
+        font-size: 1.6rem;
+        
+        i {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: $application-icon-size;
+            height: $application-icon-size;
+            font-size: 6.4rem;
+            color: $white;
+            transition: box-shadow 0.4s ease-in-out, opacity 0.25s ease-in-out;
+            &::before {
+                text-shadow: 3px 3px 0 rgba($black, 0.1);
+            }
+        }
+        span {
+            padding-top: 7px;
+            line-height: 1.3;
+            display: flex;
+            flex: 1;
+            align-items: center;
+        }
+        &:hover {
+            transition: color 0.4s ease-in-out;
+            color: $primary;
+            text-decoration: none;
+            i {
+                transition: box-shadow 0.4s ease-in-out, opacity 0.25s ease-in-out;
+                box-shadow: 3px 3px 5px rgba($black, 0.1);
+                opacity: 0.85;
+            }
+        }
+        &:active {
+            i {
+                transition: box-shadow 0.4s ease-in-out;
+                box-shadow: 5px 5px 10px 0px rgba($black, 0.15) inset;
+            }
+        }
+        &.blue-background-class {
+			background-color: rgba($primary, 0.15);
+        }
+        img {
+            max-height: 110px;
+            max-width: 110px;
+            padding: 10px;
+        }
+    }
+}
+
+.applications {
+    &__list {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+    &__connector {
+        h2 {
+            font-size: 1rem;
+            font-weight: bold;
+            span {
+                padding-right: 10px;
+                background-color: $white;
+            }
+            &::after {
+                display: block;
+                content: "";
+                border-top: 2px dotted $primary;
+                margin-top: -10px;
+            }
+        }
+    }
+}
+
+@include media-breakpoint-down(md) {
+    .application {
+        &__item {
+            width: $application-width-sm;
+            height: $application-height-sm;
+            padding: 1rem;
+
+            i {
+                font-size: 3.2rem;
+                width: $application-icon-size-sm;
+                height: $application-icon-size-sm;
+            }
+            &::after {
+                line-height: 115px;
+            }
+            img {
+                max-height: 60px;
+                max-width: 60px;
+            }
+            span {
+                font-size: 1.2rem;
+            }
+        }
+    }
+}
+
+// APPLICATIONS AND CONNECTORS : ICONS AND COLORS
+.application {
+    font-family: "generic-icons";
+    font-style: normal;
+    border-radius: $border-radius;
+    background: radial-gradient(farthest-side at 10% 10%, $gray-100, $gray-300);
+
+    // ICON COLOR : RED
+    &.admission-post-bac,
+    &.admission-post-bac-large,
+
+    &.assr,
+    &.assr-large,
+
+    &.canal-numerique,
+    &.canal-numerique-large,
+
+    &.cerise,
+    &.cerise-large,
+
+    &.charlemagne,
+    &.charlemagne-large,
+
+    &.edumoov,
+    &.edumoov-large,
+
+    &.electron,
+    &.electron-large,
+
+    &.glpi,
+    &.glpi-large,
+
+    &.madmagz,
+    &.madmagz-large,
+
+    &.matholycee,
+    &.matholycee-large,
+
+    &.mediacentre,
+    &.mediacentre-large,
+    &.public,
+    &.public-large,
+
+    &.notes,
+    &.notes-large, 
+
+    &.pages,
+    &.pages-large,
+
+    &.parametrage,
+    &.parametrage-large,
+
+    &.rbs,
+    &.rbs-large,
+
+    &.support,
+    &.support-large,
+    
+    &.wiki,
+    &.wiki-large,
+
+    &.workspace,
+    &.workspace-large {
+        background: radial-gradient(farthest-side at 10% 10%, lighten($red, 20%), $red);
+    }
+
+    // ICON COLOR : ORANGE
+    &.paths,
+    &.paths-large,
+    
+    &.blog,
+    &.blog-large,
+
+    &.connecteur-generique1,
+    &.connecteur-generique1-large,
+
+    &.connecteur-generique2,
+    &.connecteur-generique2-large,
+
+    &.forum,
+    &.forum-large,
+
+    &.kne,
+    &.kne-large,
+
+    &.pronote,
+    &.pronote-large,
+
+    &.qwant-junior,
+    &.qwant-junior-large,
+
+    &.scolinfo,
+    &.scolinfo-large,
+
+    &.userbook,
+    &.userbook-large {
+        background: radial-gradient(farthest-side at 10% 10%, lighten($orange, 20%), $orange);
+    }
+
+    // ICON COLOR : YELLOW
+    &.archive,
+    &.archive-large,
+
+    &.attendance,
+    &.attendance-large,
+    
+    &.calendar,
+    &.calendar-large,
+
+    &.charte,
+    &.charte-large, 
+
+    &.conversation,
+    &.conversation-large,
+
+    &.edutheque,
+    &.edutheque-large,
+
+    &.le-site-tv,
+    &.le-site-tv-large,
+
+    &.library,
+    &.library-large,
+
+    &.madmagz,
+    &.madmagz-large,
+
+    &.maxicours,
+    &.maxicours-large,
+
+    &.monorientationenligne,
+    &.monorientationenligne-large,
+
+    &.note,
+    &.note-large,
+    
+    &.timelinegenerator,
+    &.timelinegenerator-large,
+
+    &.turboself,
+    &.turboself-large,
+
+    &.vie-scolaire,
+    &.vie-scolaire-large {
+        background: radial-gradient(farthest-side at 10% 10%, lighten($yellow, 20%), $yellow)
+    }
+
+    // ICON COLOR : GREEN
+    &.aide-devoirs,
+    &.aide-devoirs-large,
+    &.award,
+    &.award-large,
+    
+    &.biblionisep,
+    &.biblionisep-large,
+
+    &.ccn,
+    &.ccn-large,
+    &.residence-artiste,
+    &.residence-artiste-large,
+
+    &.cidj,
+    &.cidj-large,
+
+    &.collaborative-wall,
+    &.collaborative-wall-large,
+
+    &.hiboutheque,
+    &.hiboutheque-large,
+
+    &.itopstore,
+    &.itopstore-large,
+
+    &.maxicours,
+    &.maxicours-large,
+
+    &.netvibes,
+    &.netvibes-large,
+    
+    &.notebook,
+    &.notebook-large,
+
+    &.paraschool,
+    &.paraschool-large,
+    
+    &.schoolbook,
+    &.schoolbook-large,
+
+    &.scrap-book,
+    &.scrap-book-large {
+        background: radial-gradient(farthest-side at 10% 10%, lighten($green, 20%), $green)
+    }
+
+    // ICON COLOR : CYAN
+    &.assistance,
+    &.assistance-large,
+
+    &.banquesavoir,
+    &.banquesavoir-large,
+
+    &.cahier-textes,
+    &.cahier-textes-large,
+    &.cahier-de-texte,
+    &.cahier-de-texte-large,
+
+    &.cervoprint,
+    &.cervoprint-large,
+
+    &.edumedia,
+    &.edumedia-large,
+
+    &.europress,
+    &.europress-large,
+
+    &.gepi,
+    &.gepi-large,
+
+    &.lsu,
+    &.lsu-large,
+    
+    &.mindmap,
+    &.mindmap-large,
+
+    &.monstageenligne,
+    &.monstageenligne-large,
+
+    &.onisep,
+    &.onisep-large,
+    &.webclasseur,
+    &.webclasseur-large,
+    
+    &.onisep2,
+    &.onisep2-large,
+    
+    &.pad,
+    &.pad-large,
+
+    &.pearltrees,
+    &.pearltrees-large,
+    
+    &.poll,
+    &.poll-large,
+
+    &.pro-eps,
+    &.pro-eps-large,
+
+    &.rack,
+    &.rack-large,
+
+    &.universalis,
+    &.universalis-large {
+    background: radial-gradient(farthest-side at 10% 10%, lighten($cyan, 20%), $cyan)
+    }
+
+    // ICON COLOR : INDIGO
+    &.educagri,
+    &.educagri-large,
+
+    &.elyceepicardie,
+    &.elyceepicardie-large,
+
+    &.esidoc,
+    &.esidoc-large,
+
+    &.lemonde,
+    &.lemonde-large,
+
+    &.lesechos,
+    &.lesechos-large,
+
+    &.museefrancaisphoto,
+    &.museefrancaisphoto-large,
+
+    &.pronote,
+    &.pronote-large,
+
+    &.ressourcesdepartementale91,
+    &.ressourcesdepartementale91-large,
+    
+    &.sacoche,
+    &.sacoche-large {
+        background: radial-gradient(farthest-side at 10% 10%, lighten($indigo, 20%), $indigo)
+    }
+
+    // ICON COLOR : PURPLE
+    &.account,
+    &.account-large,
+
+    &.actualites,
+    &.actualites-large,
+    
+    &.admin,
+    &.admin-large,
+
+    &.bcdi,
+    &.bcdi-large,
+    
+    &.community,
+    &.community-large,
+
+    &.cns,
+    &.cns-large,
+    
+    &.exercizer,
+    &.exercizer-large,
+
+    &.picardie-cursus,
+    &.picardie-cursus-large,
+
+    &.settings-class,
+    &.settings-class-large,
+
+    &.sharebigfiles,
+    &.sharebigfiles-large,
+
+    &.stats,
+    &.stats-large,
+
+    &.statistics,
+    &.statistics-large,
+    
+    &.visioconf,
+    &.visioconf-large,
+    &.Web-conference,
+    &.Web-conference-large {
+        background: radial-gradient(farthest-side at 10% 10%, lighten($purple, 20%), $purple)
+    }
+
+    // ICON COLOR : PINK
+    &.unstagepourtous,
+    &.unstagepourtous-large {
+        background: radial-gradient(farthest-side at 10% 10%, lighten($pink, 20%), $pink)
+    }
+
+}
+
+// Add class for applications 2D
+.application {
+    &.exercizer,
+    &.exercizer-large,
+
+    &.calendar,
+    &.calendar-large,
+
+    &.statistics,
+    &.statistics-large,
+
+    &.poll,
+    &.poll-large,
+
+    &.community,
+    &.community-large,
+
+    &.forum,
+    &.forum-large,
+
+    &.pages,
+    &.pages-large,
+
+    &.rbs,
+    &.rbs-large,
+
+    &.sharebigfiles,
+    &.sharebigfiles-large,
+
+    &.notes,
+    &.notes-large {
+        &::after {
+            font-family: "Fira Sans";
+            font-size: 1.4rem;
+            content: "2D";
+            position: absolute;
+            top: 0;
+            right: 10px;
+            color: $white;
+            width: 25px;
+            height: 25px;
+            line-height: 25px;
+            background-color: $primary;
+            border-radius: 50%;
+        }
+    }
+}

package/scss/components/_buttons.scss

@@ -0,0 +1,41 @@
+.btn {
+    text-transform: uppercase;
+    line-height: 1.2;
+}
+
+.btn-accent {
+    color: $white;
+}
+
+button {
+    background: $primary;
+    background-image: linear-gradient($primary, $cyan);
+    color: $white;
+    font-family: "KGJune";
+    text-transform: uppercase;
+    height: 40px;
+    display: inline-block;
+    box-sizing: border-box;
+    border-radius: 15px;
+    font-size: 2.2rem;
+    border: none;
+    line-height: 40px;
+    padding-left: 1.2rem;
+    padding-right: 1.2rem;
+
+    &:hover {
+        background: $primary;
+    }
+}
+
+// Surcharge le style des boutons secondaire pour coller au besoin du 1D
+.btn-outline-secondary {
+    border-color: $primary;
+    color: $primary;
+
+    &:hover {
+        background-color: $primary;
+        border-color: $primary;
+        color: $white;
+    }
+}

package/scss/components/_dominos.scss

@@ -0,0 +1,29 @@
+/* COMPONENT */
+
+.dominos .domino {
+    width: calc(16.667% - 20px); // 6 per line, sidebar on
+
+    @media (min-width: 1380px) and (max-width: 1620px) {
+        width: calc(20% - 20px); // 5 per line, sidebar on
+    }
+
+    @media (min-width: 1120px) and (max-width: 1380px) {
+        width: calc(25% - 20px); // 4 per line, sidebar on
+    }
+
+    @media (min-width: 992px) and (max-width: 1120px) {
+        width: calc(33% - 20px); // 3 per line, sidebar on
+    }
+
+    @media (min-width: 760px) and (max-width: 992px) {
+        width: calc(25% - 10px); // 4 per line
+    }
+
+    @media (min-width: 520px) and (max-width: 760px) {
+        width: calc(33% - 10px); // 3 per line
+    }
+
+    @media (max-width: 520px) {
+        width: calc(50% - 10px); // 2 per line
+    }
+}

package/scss/components/_filters.scss

@@ -0,0 +1,8 @@
+//REmplacer par un bouton custom
+//https://getbootstrap.com/docs/5.0/components/buttons/#mixins
+.filters {
+    .btn:hover {
+        color: $secondary;
+        background-color: rgba($secondary, 0.1);
+    }
+}