@trilogy-ds/styles 0.0.1-beta-1

package/framework/src/components/_pagination.scss

@@ -0,0 +1,182 @@
+.pagination {
+    font-size: $size-normal;
+    margin: -2.5px;
+
+    &.is-rounded {
+        .pagination-previous,
+        .pagination-next {
+            padding-left: 1em;
+            padding-right: 1em;
+            height: 35px;
+            width: 35px;
+            border-radius: $radius-rounded;
+        }
+
+        .pagination-link {
+            height: 35px;
+            border-radius: $radius-rounded;
+        }
+
+        .pagination-list {
+            flex: 0 0 auto;
+
+            .pagination-link {
+                &.is-current {
+                    background: getColor('alternate');
+                    border-color: currentColor;
+                }
+            }
+        }
+    }
+}
+
+.pagination,
+.pagination-list {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+}
+
+.pagination-previous,
+.pagination-next,
+.pagination-link,
+.pagination-ellipsis {
+    @include control;
+    @include unselectable;
+
+    font-size: 1em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    justify-content: center;
+    margin: 2.5px;
+    text-align: center;
+}
+
+.pagination-previous,
+.pagination-next,
+.pagination-link {
+    border-color: transparent;
+    color: getColor('grey-dark');
+    min-width: 2.25em;
+
+    &:hover {
+        border-color: getColor('alternate');
+    }
+
+    &:focus {
+        border-color: getVariantColor('alternate',2);
+    }
+
+    &:active {
+        box-shadow: inset 0 1px 2px getColor('grey-dark');
+    }
+
+    &[disabled] {
+        background-color: getColor('grey-lighter');
+        border-color: currentColor;
+        box-shadow: none;
+        color: getColor('grey');
+        opacity: 0.5;
+    }
+}
+
+.pagination-previous,
+.pagination-next {
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    white-space: nowrap;
+}
+
+.pagination-link {
+    &.is-current {
+        background-color: getColor('alternate');
+        border-color: currentColor;
+        color: getColor('background');
+    }
+}
+
+.pagination-ellipsis {
+    color: getColor('grey-light');
+    pointer-events: none;
+}
+
+.pagination-list {
+    flex-wrap: wrap;
+}
+
+@include mobile {
+    .pagination {
+        flex-wrap: wrap;
+    }
+
+    .pagination-previous,
+    .pagination-next {
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+
+    .pagination-list {
+        li {
+            flex-grow: 1;
+            flex-shrink: 1;
+        }
+    }
+}
+
+@include tablet {
+    .pagination-list {
+        flex-grow: 1;
+        flex-shrink: 1;
+        justify-content: flex-start;
+        order: 1;
+    }
+
+    .pagination-previous {
+        order: 2;
+    }
+
+    .pagination-next {
+        order: 3;
+    }
+
+    .pagination {
+        justify-content: space-between;
+
+        &.is-centered {
+            .pagination-previous {
+                order: 1;
+            }
+
+            .pagination-list {
+                justify-content: center;
+                order: 2;
+            }
+
+            .pagination-next {
+                order: 3;
+            }
+        }
+
+        &.is-right {
+            .pagination-previous {
+                order: 1;
+            }
+
+            .pagination-next {
+                order: 2;
+            }
+
+            .pagination-list {
+                justify-content: flex-end;
+                order: 3;
+            }
+        }
+    }
+}
+
+@include desktop {
+    .pagination {
+        justify-content: center;
+    }
+}

package/framework/src/components/_plus-symbol.scss

@@ -0,0 +1,32 @@
+$plus-symbol-size: 40px;
+
+@mixin plus-symbol($color: getColor('grey-light'), $text-color: getColor('grey-dark')) {
+    &::after {
+        content: "+";
+        display: inline-block;
+        width: $plus-symbol-size;
+        height: $plus-symbol-size;
+        border-radius: $plus-symbol-size;
+        font-size: 24px;
+        text-align: center;
+        line-height: $plus-symbol-size;
+        background-color: $color;
+        color: $text-color;
+    }
+}
+
+.plus-symbol {
+    @include plus-symbol();
+
+    display: inline-block;
+
+    @each $name in $colors-brand {
+      $brandName: getColorBrandName($name);
+      $color: getColor($name);
+      $color-invert: invertColor($name);
+
+        &.is-#{$brandName} {
+            @include plus-symbol($color, $color-invert);
+        }
+    }
+}

package/framework/src/components/_popover.scss

@@ -0,0 +1,340 @@
+@mixin position-top {
+    top: auto;
+    bottom: 100%;
+    left: 50%;
+    right: auto;
+    transform: translate(-50%, 2.5px);
+    margin-bottom: 8px;
+
+    &::before {
+        bottom: auto;
+        right: auto;
+        top: 100%;
+        left: 50%;
+        transform: rotate(-45deg);
+    }
+}
+
+@mixin position-right {
+    top: auto;
+    bottom: 50%;
+    left: 100%;
+    right: auto;
+    transform: translate(7px, 50%);
+
+    // flèche sur le contour de la popover
+    &::before {
+        top: 50%;
+        bottom: auto;
+        left: 0;
+        right: auto;
+        transform: rotate(45deg);
+    }
+}
+
+@mixin position-bottom {
+    top: 100%;
+    bottom: auto;
+    left: 50%;
+    right: auto;
+    transform: translate(-50%, 7px);
+
+    // flèche sur le contour de la popover
+    &::before {
+        top: 0;
+        bottom: auto;
+        right: auto;
+        left: 50%;
+        transform: rotate(135deg);
+    }
+}
+
+@mixin position-left {
+    top: auto;
+    bottom: 50%;
+    left: auto;
+    right: 100%;
+    transform: translate(-7px, 50%);
+
+    // flèche sur le contour de la popover
+    &::before {
+        top: 50%;
+        bottom: auto;
+        left: 100%;
+        right: auto;
+        transform: rotate(-135deg);
+    }
+}
+
+.popover {
+    position: relative;
+    display: inline-block;
+
+    .popover-content {
+        @include position-top();
+
+        background-color: getColor('font');
+        border-radius: $radius-small;
+        box-shadow: $shadow;
+        color: getColor('background');
+        display: inline-block;
+        font-size: 12px;
+        opacity: 0.95;
+        visibility: hidden;
+        padding: $spacing-2;
+        font-weight: 500;
+        position: absolute;
+        text-align: center;
+        max-width: 210px;
+        width: max-content;
+        z-index: zindex('popover');
+
+        ul {
+            padding-left: 14px;
+        }
+
+        // dessine la flèche sur le contour de la popover
+        &::before {
+            content: '';
+            border-color: transparent;
+            border-bottom-color: getColor('font');
+            border-left-color: getColor('font');
+            border-style: solid;
+            border-width: 4px;
+            pointer-events: none;
+            position: absolute;
+            margin-left: -4px;
+            margin-top: -4px;
+            transform-origin: center;
+            height: 0;
+            width: 0;
+        }
+
+        .title,
+        .suptitle,
+        .paragraph,
+        .text,
+        p {
+            color: getColor('background');
+        }
+    }
+
+    &.is-popover-right .popover-content {
+        @include position-right();
+    }
+
+    &.is-popover-bottom .popover-content {
+        @include position-bottom();
+    }
+
+    &.is-popover-left .popover-content {
+        @include position-left();
+    }
+
+    @include mobile {
+        &.is-popover-top-mobile .popover-content {
+            @include position-top();
+        }
+
+        &.is-popover-right-mobile .popover-content {
+            @include position-right();
+        }
+
+        &.is-popover-bottom-mobile .popover-content {
+            @include position-bottom();
+        }
+
+        &.is-popover-left-mobile .popover-content {
+            @include position-left();
+        }
+    }
+
+    @include tablet {
+        &.is-popover-top-tablet .popover-content {
+            @include position-top();
+        }
+
+        &.is-popover-right-tablet .popover-content {
+            @include position-right();
+        }
+
+        &.is-popover-bottom-tablet .popover-content {
+            @include position-bottom();
+        }
+
+        &.is-popover-left-tablet .popover-content {
+            @include position-left();
+        }
+    }
+
+    @include tablet-only {
+        &.is-popover-top-tablet-only .popover-content {
+            @include position-top();
+        }
+
+        &.is-popover-right-tablet-only .popover-content {
+            @include position-right();
+        }
+
+        &.is-popover-bottom-tablet-only .popover-content {
+            @include position-bottom();
+        }
+
+        &.is-popover-left-tablet-only .popover-content {
+            @include position-left();
+        }
+    }
+
+    @include touch {
+        &.is-popover-top-touch .popover-content {
+            @include position-top();
+        }
+
+        &.is-popover-right-touch .popover-content {
+            @include position-right();
+        }
+
+        &.is-popover-bottom-touch .popover-content {
+            @include position-bottom();
+        }
+
+        &.is-popover-left-touch .popover-content {
+            @include position-left();
+        }
+    }
+
+    @include desktop {
+        &.is-popover-top-desktop .popover-content {
+            @include position-top();
+        }
+
+        &.is-popover-right-desktop .popover-content {
+            @include position-right();
+        }
+
+        &.is-popover-bottom-desktop .popover-content {
+            @include position-bottom();
+        }
+
+        &.is-popover-left-desktop .popover-content {
+            @include position-left();
+        }
+    }
+
+    @include desktop-only {
+        &.is-popover-top-desktop-only .popover-content {
+            @include position-top();
+        }
+
+        &.is-popover-right-desktop-only .popover-content {
+            @include position-right();
+        }
+
+        &.is-popover-bottom-desktop-only .popover-content {
+            @include position-bottom();
+        }
+
+        &.is-popover-left-desktop-only .popover-content {
+            @include position-left();
+        }
+    }
+
+    @include widescreen {
+        &.is-popover-top-widescreen .popover-content {
+            @include position-top();
+        }
+
+        &.is-popover-right-widescreen .popover-content {
+            @include position-right();
+        }
+
+        &.is-popover-bottom-widescreen .popover-content {
+            @include position-bottom();
+        }
+
+        &.is-popover-left-widescreen .popover-content {
+            @include position-left();
+        }
+    }
+
+    @include widescreen-only {
+        &.is-popover-top-widescreen-only .popover-content {
+            @include position-top();
+        }
+
+        &.is-popover-right-widescreen-only .popover-content {
+            @include position-right();
+        }
+
+        &.is-popover-bottom-widescreen-only .popover-content {
+            @include position-bottom();
+        }
+
+        &.is-popover-left-widescreen-only .popover-content {
+            @include position-left();
+        }
+    }
+
+    @include fullhd {
+        &.is-popover-top-fullhd .popover-content {
+            @include position-top();
+        }
+
+        &.is-popover-right-fullhd .popover-content {
+            @include position-right();
+        }
+
+        &.is-popover-bottom-fullhd .popover-content {
+            @include position-bottom();
+        }
+
+        &.is-popover-left-fullhd .popover-content {
+            @include position-left();
+        }
+    }
+
+    // ajustement des flèches en fonction de la position
+    &.is-popover-right,
+    &.is-popover-left {
+        &.is-arrow-start .popover-content::before {
+            top: 20%;
+        }
+
+        &.is-arrow-end .popover-content::before {
+            top: 80%;
+        }
+    }
+
+    &.is-popover-right {
+        &.is-arrow-start .popover-content::before,
+        &.is-arrow-end .popover-content::before {
+            left: 0;
+        }
+    }
+
+    &.is-popover-left {
+        &.is-arrow-start .popover-content::before,
+        &.is-arrow-end .popover-content::before {
+            left: 100%;
+        }
+    }
+
+    &.is-arrow-start .popover-content::before {
+        left: 10%;
+    }
+
+    &.is-arrow-end .popover-content::before {
+        left: 90%;
+    }
+
+    &.is-popover-active .popover-content,
+    &:hover .popover-content {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    .popover-trigger:focus ~ .popover-content {
+        opacity: 1;
+        visibility: visible;
+    }
+}