ode-bootstrap 3.13.0-dev.202103031343 → 4.0.0

package/scss/components/_explorer.scss

@@ -0,0 +1,38 @@
+.explorer {
+
+    &-header {
+        padding: 15px 15px 0;
+        @include media-breakpoint-down(lg) {
+            padding: 10px 10px 0;
+        }
+
+        h2 {
+            position: relative;
+            margin-bottom: 0;
+            font-size: 2rem;
+            color: $gray-700;
+            color: $gray-700;
+            @include media-breakpoint-down(lg) {
+                font-size: 1.4rem;
+            }
+
+            small {
+                font-size: 80%;
+                color: $gray-600;
+            }
+        }
+    }
+
+    &-view {
+        height: calc(100vh - 210px);
+        padding: 10px;
+        overflow-x: auto;
+        border-top: 1px solid $gray-200;
+        scrollbar-width: thin;
+        scrollbar-color: $gray-500 $gray-200;
+        @include media-breakpoint-down(lg) {
+            height: calc(100vh - 112px);
+        }
+    }
+}
+

package/scss/components/_feed.scss

@@ -0,0 +1,193 @@
+$feed-spacing: 20px !default;
+
+.feed {
+    font-size: 14px;
+
+    .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;
+        }
+    }
+
+    &-item {
+        display: flex;
+        padding: 15px $feed-spacing;
+        margin-bottom: $feed-spacing;
+        overflow: hidden;
+        background: var(--bs-white);
+        border-radius: 8px;
+
+        @include add-before-layer();
+
+        @include media-breakpoint-down(lg) {
+            padding-right: 50px;
+        }
+
+        &::before {
+            width: 4px;
+            background: currentColor;
+
+            @include border-start-radius(8px);
+        }
+
+        .zone-avatar {
+            padding-right: 25px;
+            justify-self: stretch;
+        }
+
+        .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;
+                }
+            }
+        }
+
+        .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;
+                    }
+                }
+            }
+        }
+
+        &:hover {
+            .zone-tools {
+                transform: translateX(101%);
+            }
+        }
+    }
+
+    &.new {
+        .date {
+            @include append-icon("\f111", 0.7em, 0, $orange);
+            @include set-icon-top(1em);
+        }
+    }
+}

package/scss/components/_filters.scss

@@ -0,0 +1,76 @@
+.filters {
+    .btn {
+        color: $gray-600;
+        box-shadow: none;
+
+        &.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;
+
+    &: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: #fff;
+        border: 1px solid currentColor;
+        border-radius: 20px;
+
+        @include add-transitions(background-color, color);
+
+        &.visible {
+            display: block;
+        }
+
+        &.active {
+            background-color: currentColor !important;
+
+            .icon,
+            .label {
+                color: #fff;
+            }
+        }
+
+        .hidden-checkbox {
+            display: none;
+        }
+
+        .icon {
+            position: relative;
+            z-index: 2;
+            color: inherit;
+            display: inline-flex;
+            align-items: center;
+            vertical-align: middle;
+
+            @include square(1.5em);
+        }
+
+        .label {
+            position: relative;
+            z-index: 2;
+            display: inline-block;
+            font-size: 1em;
+            vertical-align: middle;
+        }
+    }
+}

package/scss/components/_forms.scss

@@ -0,0 +1,28 @@
+$input-placeholder-color: $gray-500;
+
+.input-group {
+    .btn {
+        box-shadow: none !important;
+    }
+}
+
+.form-control::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

@@ -0,0 +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;
+        padding: 10px;
+        margin: 1px;
+        @include media-breakpoint-down(md) {
+            width: calc(50% - 10px);
+        }
+        &:hover {
+            background-color: rgba($secondary, .1);
+            .figure-caption {
+                color: $secondary;
+            }
+        }
+    }
+}

package/scss/components/_modal.scss

@@ -0,0 +1,25 @@
+.modal {
+    .modal-title {
+        color: $cyan;
+        font-size: 2rem;
+    }
+}
+
+// HELP MODAL
+.modal {
+    &-help {
+        .modal-footer {
+            display: none;
+        }
+    }
+}
+// @include media-breakpoint-down(lg) {
+//   .modal-dialog {
+//     max-width: calc(100% - 3.5rem);
+//   }
+// }
+// @include media-breakpoint-down(lg) {
+//   .modal-dialog {
+//     max-width: calc(100% - 1rem);
+//   }
+// }

package/scss/components/_popover.scss

@@ -0,0 +1,100 @@
+popover {
+    position: relative;
+    z-index: 100;
+    display: inline-block;
+
+    popover-content.hidden {
+        pointer-events: none;
+        opacity: 0;
+    }
+
+    popover-content {
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        width: 250px;
+        text-align: center;
+        background: $white;
+        border: 1px solid $gray-300;
+        border-radius: 2px;
+        box-shadow: 0 .1rem 2rem rgba(0, 0, 0, .1);
+        transform: translate(-50%, 4%);
+
+        &::before {
+            content: "\25b2";
+            position: absolute;
+            top: -2rem;
+            left: 50%;
+            z-index: 0;
+            display: block;
+            width: 40px;
+            font-family: none;
+            font-size: 2rem;
+            color: $white;
+            transform: translateX(-50%);
+        }
+
+        .widget-applications {
+            .widget-body {
+                padding: 1.5rem;
+                max-height: 22rem;
+                overflow: auto;
+            }
+
+            .widget-footer-action & {
+                color: $gray-600;
+            }
+        }
+
+        .bookmarked-app {
+            padding: .5rem;
+            flex: 1 1 33%;
+            text-align: center;
+            border: 1px solid transparent;
+            border-radius: $border-radius;
+
+            @include add-transitions(border-color) {
+                border-color: $gray-200;
+            };
+
+            > a {
+                @include square(100%);
+                @include have-child-in-middle();
+            }
+
+            .application {
+                font-size: 3rem;
+            }
+
+            img {
+                max-width: 80%;
+            }
+        }
+
+        .search-text {
+            justify-content: center;
+            
+            .searchInput {
+                height: 30px;
+                margin: 1rem -0.2rem 1rem 0;
+                width: 70%;
+                border: 1px solid $gray-200;
+            }
+            .searchButton {
+                @extend .btn-primary;
+                width: 30px;
+                height: 30px;
+                padding: 0;
+                margin-top: 1rem;
+                line-height: 30px;
+                font-weight: 700;
+                text-transform: uppercase;
+                text-align: center;
+                border: none;
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+                box-shadow: none;
+            }
+        }
+    }
+}

package/scss/components/_sticky-toolbox.scss

@@ -0,0 +1,162 @@
+.sticky-toolbox {
+    position: fixed;
+    top: 100px;
+    bottom: 0;
+    right: 0;
+    z-index: 22;
+    color: $white;
+    transform: translateX(100%);
+
+    @include add-transitions(transform);
+
+    .link-tool {
+        position: absolute;
+        width: 50px;
+        // padding: 5px 10px;
+        padding: 0.5rem 1.3rem;
+        font-size: 1.5em;
+        color: $white;
+        cursor: pointer;
+        background: $primary;
+        border-top-left-radius: 50%;
+        border-bottom-left-radius: 50%;
+        transform: translate(-100%, 0);
+    }
+
+    .sticky-toolbox-content {
+        display: none;
+        overflow: auto;
+        width: 400px;
+        height: 100%;
+        padding: 20px 30px;
+        background: $secondary;
+    }
+
+    .sticky-toolbox-title {
+        margin: 0 0 10px;
+        font-weight: 700;
+
+        &:not(:first-child) {
+            margin-top: 10px;
+        }
+    }
+
+    .sticky-toolbox-item {
+        display: block;
+        color: $white;
+        text-align: center;
+        text-decoration: none;
+        background: rgba($white, .10);
+        border-radius: 10px;
+        overflow: hidden;
+
+        // @include background-color-to($primary);
+
+        &.selected {
+            background: $primary;
+
+            /* &:hover {
+                background: rgba($white, .10);
+            } */
+        }
+
+        small {
+            display: inline-block;
+            line-height: 1.6rem;
+            margin-top: 0.5rem;
+        }
+    }
+
+    [class*="buttons-"] {
+        margin-right: -5px;
+        margin-left: -5px;
+
+        > .col,
+        > [class*="col-"] {
+            padding-right: 5px;
+            padding-left: 5px;
+            margin-bottom: 10px;
+        }
+    }
+
+    .buttons-theme {
+        .sticky-toolbox-item {
+            padding: 20px 10px;
+        }
+    }
+
+    .buttons-widget {
+        .sticky-toolbox-item {
+            .inner {
+                position: relative;
+                display: block;
+                padding-top: 100%;
+            }
+
+            i {
+                position: absolute;
+                top: 0;
+                font-size: 2em;
+                border-radius: 18px;
+
+                @include have-child-in-middle();
+                @include square(100%);
+            }
+        }
+    }
+
+    .buttons-countries {
+        padding: 0 0.8rem;
+        gap: 2rem;
+        margin: 0 -1rem;
+        justify-content: center;
+
+        > div {
+            padding: 0 !important;
+            margin-bottom: 0 !important;
+            width: 20%;
+        }
+    }
+
+    .sticky-toolbox-country {
+        display: block;
+        color: $white;
+        text-align: center;
+        text-decoration: none;
+        cursor: pointer;
+
+        .flag {
+            max-width: 70%;
+            height: auto;
+            margin: 0 auto;
+            filter: saturate(0);
+
+            @include add-transitions(filter);
+
+            + div {
+                margin-top: .5rem;
+                font-size: 1.2rem;
+            }
+        }
+
+        &.selected {
+            .flag {
+                filter: saturate(1);
+            }
+        }
+
+        &:hover:not(.selected) {
+            .flag {
+                filter: saturate(0.3);
+            }
+        }
+    }
+
+    &.open {
+        transform: translateX(0);
+
+        .sticky-toolbox-content {
+            display: block;
+        }
+    }
+}