@trilogy-ds/styles 0.0.1-beta-1

package/framework/src/grid/_rows.scss

@@ -0,0 +1,47 @@
+.rows {
+    display: flex;
+    flex-direction: column;
+    margin: -$row-gap-tablet-desktop;
+    flex: 1 1 auto;
+    justify-self: stretch;
+    height: calc(100% + #{$row-gap-tablet-desktop * 2});
+
+    @include mobile {
+      margin: -$row-gap-mobile;
+      height: calc(100% + #{$row-gap-mobile * 2});
+    }
+
+    &.is-aligned-end {
+        justify-content: flex-end;
+    }
+
+    &.is-gapless {
+        .row:not(:first-child) {
+            padding-top: 0;
+        }
+
+        .row:not(:last-child) {
+            padding-bottom: 0;
+        }
+    }
+
+    .is-divider {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    .row {
+        display: block;
+        flex-grow: 1;
+        flex-shrink: 1;
+        padding: $row-gap-tablet-desktop;
+
+        @include mobile {
+          padding: $row-gap-mobile;
+        }
+
+        &.is-narrow {
+            flex-grow: 0;
+        }
+    }
+}

package/framework/src/grid/_tiles.scss

@@ -0,0 +1,78 @@
+@use "sass:math";
+
+.tile {
+    align-items: stretch;
+    display: block;
+    flex-basis: 0;
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-height: min-content;
+
+    &.is-ancestor {
+        margin-left: -7.5px;
+        margin-right: -7.5px;
+        margin-top: -7.5px;
+
+        &:last-child {
+            margin-bottom: -7.5px;
+        }
+
+        &:not(:last-child) {
+            margin-bottom: 7.5px;
+        }
+    }
+
+    &.is-child {
+        margin: 0 !important;
+    }
+
+    &.is-parent {
+        padding: 7.5px;
+
+        &.is-multiline {
+            > .tile.is-child {
+                > *:last-child {
+                    margin-bottom: 20px;
+                }
+            }
+        }
+    }
+
+    &.is-vertical {
+        flex-direction: column;
+
+        & > .tile.is-child:not(:last-child) {
+            margin-bottom: 15px !important;
+        }
+    }
+
+    &:not(.is-child) {
+        display: flex;
+    }
+
+    @include mobile {
+        @for $i from 1 through 12 {
+            &.is-#{$i}-mobile {
+                flex: none;
+                width: math.div($i, 12) * 100%;
+            }
+        }
+
+        &.is-vertical-mobile {
+            flex-direction: column;
+        }
+    }
+
+    @include tablet {
+        &:not(.is-child) {
+            display: flex;
+        }
+
+        @for $i from 1 through 12 {
+            &.is-#{$i} {
+                flex: none;
+                width: math.div($i, 12) * 100%;
+            }
+        }
+    }
+}

package/framework/src/layout/_all.scss

@@ -0,0 +1,6 @@
+@charset "utf-8";
+
+@import "main";
+@import "section";
+@import "hero";
+@import "toolbar";

package/framework/src/layout/_hero.scss

@@ -0,0 +1,268 @@
+$hero-padding-y: 20px;
+$hero-padding-x: $hero-padding-y;
+$hero-padding-small-y: $hero-padding-y;
+$hero-padding-small-x: $hero-padding-y;
+$hero-padding-medium-y: 40px;
+$hero-padding-medium-x: $hero-padding-y;
+$hero-padding-large-y: 60px;
+$hero-padding-large-x: $hero-padding-y;
+
+$hero-padding-desktop-y: 30px;
+$hero-padding-desktop-x: $hero-padding-desktop-y;
+$hero-padding-desktop-small-y: $hero-padding-desktop-y;
+$hero-padding-desktop-small-x: $hero-padding-desktop-y;
+$hero-padding-desktop-medium-y: 60px;
+$hero-padding-desktop-medium-x: $hero-padding-desktop-y;
+$hero-padding-desktop-large-y: 90px;
+$hero-padding-desktop-large-x: $hero-padding-desktop-y;
+
+$overlap: 30px;
+$overlap-desktop: 30px;
+
+.hero {
+    align-items: stretch;
+    background-color: getColor('background');
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+
+    .hero-body {
+        flex-grow: 1;
+        flex-shrink: 0;
+        position: relative;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        padding: 20px;
+
+        @include desktop {
+            padding: 30px 20px;
+        }
+
+        .hero-back {
+            position: relative;
+            flex-basis: 100%;
+            opacity: .7;
+            margin-bottom: 20px;
+            min-width: 100%;
+            padding-left: 26px;
+            transition: opacity 300ms linear;
+
+            &::before {
+                @include arrow(inherit);
+
+                transform: rotate(90deg);
+                top: 0;
+                bottom: 0;
+                left: 5px;
+                width: 11px;
+                height: 6px;
+                font-size: 12px;
+                margin: auto;
+            }
+
+            &:hover {
+                opacity: 1;
+            }
+        }
+
+        > .container {
+            flex: 1;
+            flex-basis: 100%;
+        }
+
+        .title {
+            font-size: 24px;
+
+            @include desktop {
+                font-size: 36px;
+            }
+        }
+    }
+
+    &.has-pattern-dark,
+    &.is-instit {
+        @include pattern-dark(105%, 50%, 35%);
+
+        p,
+        strong,
+        .paragraph,
+        .suptitle,
+        .title,
+        .subtitle,
+        a:not(.button):not(.tag) {
+            color: getColor('background');
+        }
+
+        .subtitle {
+            strong,
+            a:not(.button) {
+                color: getColor('background');
+            }
+        }
+    }
+
+    &.is-overlapped {
+        .hero-body {
+            padding-bottom: 50px;
+        }
+
+        + .section {
+            @include mobile {
+                margin-left: -$hero-padding-y;
+                margin-right: -$hero-padding-y;
+
+                .box {
+                    box-shadow: none;
+                    border-radius: 24px 24px 0 0;
+
+                    .box-content:only-child {
+                        border-radius: 24px 24px 0 0;
+                    }
+                }
+            }
+
+            > .container {
+                margin-top: -$hero-padding-y - $overlap;
+
+                @include desktop {
+                    margin-top: -$hero-padding-desktop-y - $overlap-desktop;
+                }
+            }
+
+            &.is-small {
+                > .container {
+                    margin-top: -$hero-padding-small-y - $overlap;
+
+                    @include desktop {
+                        margin-top: -$hero-padding-desktop-small-y  - $overlap-desktop;
+                    }
+                }
+            }
+
+            &.is-medium {
+                > .container {
+                    margin-top: -$hero-padding-medium-y - $overlap;
+
+                    @include desktop {
+                        margin-top: -$hero-padding-desktop-medium-y  - $overlap-desktop;
+                    }
+                }
+            }
+
+            &.is-large {
+                > .container {
+                    margin-top: -$hero-padding-large-y - $overlap;
+
+                    @include desktop {
+                        margin-top: -$hero-padding-desktop-large-y - $overlap-desktop;
+                    }
+                }
+            }
+        }
+    }
+
+    &.has-background {
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+
+    &.has-pattern-dark,
+    &.has-background {
+        .hero-body {
+            text-align: center;
+            padding: 100px 20px;
+
+            @include desktop {
+                text-align: left;
+                padding-top: 80px;
+                padding-bottom: 80px;
+            }
+
+            .suptitle {
+                display: none;
+
+                @include desktop {
+                    display: block;
+                    margin-bottom: 30px;
+                    font-size: 19px;
+                    text-transform: uppercase;
+                }
+            }
+
+            .title {
+                font-size: 32px;
+                margin-bottom: 25px;
+
+                @include desktop {
+                    font-size: 52px;
+                }
+            }
+
+            .button {
+                width: auto;
+            }
+        }
+
+        &.is-overlapped {
+            .hero-body {
+                padding: 30px 20px 60px;
+
+                @include desktop {
+                    padding: 60px 20px;
+                }
+            }
+        }
+    }
+
+    &.is-centered {
+        text-align: center;
+    }
+
+    &.is-primary {
+        color: getColor('background');
+
+        p,
+        strong,
+        .paragraph,
+        .suptitle,
+        .title,
+        .subtitle,
+        a:not(.button):not(.tag) {
+            color: getColor('background');
+        }
+
+        .subtitle {
+            strong,
+            a:not(.button) {
+                color: getColor('background');
+            }
+        }
+    }
+
+    &.is-info {
+        background: getVariantColor('alternate',2);
+
+        p,
+        strong,
+        .paragraph,
+        .suptitle,
+        .title,
+        .subtitle,
+        a:not(.button):not(.tag) {
+            color: getColor('background');
+        }
+
+        .subtitle {
+            strong,
+            a:not(.button) {
+                color: getColor('background');
+            }
+        }
+    }
+
+    .subtitle {
+        padding-left: 0.2em;
+    }
+}

package/framework/src/layout/_main.scss

@@ -0,0 +1,36 @@
+body > header,
+body > footer,
+.main-content {
+    display: block;
+    width: 100%;
+    margin: 0 auto;
+    flex-shrink: 0;
+    position: relative;
+
+    &.is-fullwidth {
+        @include fullhd {
+            max-width: 100%;
+        }
+    }
+}
+
+.main-content {
+    flex-grow: 1;
+    max-width: 1500px;
+
+    &::before {
+        content: ' ';
+        background-color: transparent;
+        transition: background-color 250ms ease-in-out;
+    }
+
+    &.has-overlay {
+        &::before {
+            @include overlay;
+
+            position: fixed;
+            background-color: rgba(#000, 0.86);
+            z-index: zindex('small');
+        }
+    }
+}

package/framework/src/layout/_section.scss

@@ -0,0 +1,65 @@
+$section-padding-y: $spacing-6;
+$section-padding-x: $spacing-5;
+$section-padding-desktop-y: $spacing-8;
+$section-padding-desktop-x: $spacing-5;
+$overlap-section: $spacing-4 !default;
+$overlap-section-desktop: $spacing-4 !default;
+
+.section {
+  padding: $section-padding-y $section-padding-x;
+
+  @include desktop {
+    padding: $section-padding-desktop-y $section-padding-desktop-x;
+  }
+
+  &.has-overlap > .container {
+    margin-top: -$section-padding-y - $overlap-section;
+
+    @include desktop {
+      margin-top: -$section-padding-desktop-y - $overlap-section-desktop;
+    }
+  }
+
+  &:nth-child(even) {
+    background-color: getColor('grey-lighter');
+  }
+
+  &:nth-child(odd) {
+    background-color: getColor('background');
+  }
+
+  &.is-info {
+    background-color: getVariantColor('alternate',2);
+    color: getColor('background');
+  }
+
+  &.has-overlay {
+    position: relative;
+    z-index: zindex('void');
+    color: getColor('background');
+
+    &::before {
+      @include overlay;
+      content: '';
+      z-index: zindex('subzero');
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+  }
+
+  &.has-pattern-light {
+    @include pattern-light(70%, 180px, -30px);
+  }
+
+  &.has-pattern-dark {
+    @include pattern-dark(120%, 260px, -30%);
+  }
+
+}
+
+.section:nth-child(2n).is-inverted {
+  background-color: getColor('background');
+}
+
+.section:nth-child(2n-1).is-inverted {
+  background-color: getColor('grey-lighter');
+}

package/framework/src/layout/_toolbar.scss

@@ -0,0 +1,100 @@
+$toolbar-height: 60px !default;
+
+.toolbar {
+    height: $toolbar-height;
+    border-bottom: 1px solid getColor('grey-light');
+    display: flex;
+    align-items: center;
+
+    > .container {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        width: 100%;
+    }
+
+    > .container > .toolbar-row,
+    > .toolbar-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        height: 100%;
+        border-right: 1px solid getColor('grey-light');
+
+        &:empty {
+            border-right: none;
+        }
+    }
+
+    > .container > .toolbar-group,
+    > .container > .toolbar-row > .toolbar-group,
+    > .toolbar-group,
+    > .toolbar-row > .toolbar-group {
+        margin-top: 0;
+        margin-bottom: 0;
+        padding: 0 10px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        &:not(:first-of-type) {
+            border-left: 1px solid getColor('grey-light');
+        }
+
+        > .toolbar-item {
+            padding-left: 10px;
+            padding-right: 10px;
+            white-space: nowrap;
+
+            &.is-clipped-to-bottom {
+                align-self: flex-end;
+            }
+        }
+    }
+
+    @include mobile {
+        flex-direction: column;
+        align-items: stretch;
+        height: auto;
+        padding: 0;
+
+        > .container {
+            flex-direction: column;
+            align-items: stretch;
+            height: auto;
+            padding: 0;
+        }
+
+        > .container > .toolbar-group,
+        > .container > .toolbar-row > .toolbar-group,
+        > .toolbar-group,
+        > .toolbar-row > .toolbar-group {
+            height: $toolbar-height;
+
+            &:not(:last-of-type) {
+                border-right: 0;
+                border-bottom: 1px solid getColor('grey-light');
+            }
+        }
+
+        > .container > .toolbar-row,
+        > .toolbar-row {
+            height: $toolbar-height;
+            border-right: 0;
+
+            > .toolbar-group {
+                border-bottom: 1px solid getColor('grey-light');
+                flex-grow: 1;
+
+                &:not(:last-of-type) {
+                    border-right: 1px solid getColor('grey-light');
+                }
+            }
+        }
+    }
+
+    .is-elastic,
+    .toolbar-space {
+        flex-grow: 1;
+    }
+}

package/framework/src/trilogy-core.scss

@@ -0,0 +1,16 @@
+@charset "utf-8";
+
+@import "utilities/functions";
+@import "utilities/initial-variables";
+@import "utilities/derived-variables";
+@import "utilities/mixins";
+@import "base/reset";
+@import "base/generic";
+@import "base/fonts";
+@import "grid/columns";
+@import "grid/rows";
+@import "layout/main";
+@import "layout/section";
+@import "elements/box";
+@import "elements/paragraph";
+@import "elements/title";

package/framework/src/trilogy-mangled.scss

@@ -0,0 +1,14 @@
+@charset "utf-8";
+
+@import "utilities/all";
+
+/* All Base Without reset */
+@import "base/fonts";
+@import "base/helpers";
+@import "base/loading";
+@import "base/elements";
+
+@import "elements/all";
+@import "components/all";
+@import "grid/all";
+@import "layout/all";

package/framework/src/trilogy-namespaced.scss

@@ -0,0 +1,14 @@
+@import './styles/framework/src/utilities/tools';
+
+@import './styles/themes/common/src/utilities/pre';
+@import './styles/framework/src/utilities/pre';
+
+@import './styles/framework/src/utilities/post';
+@import './styles/themes/common/src/utilities/post';
+
+@import './styles/framework/src/all';
+
+// Fonts
+@import './styles/dist/fonts/css/all.scss';
+
+@import './styles/themes/common/src/_all';

package/framework/src/trilogy.scss

@@ -0,0 +1,8 @@
+@charset "utf-8";
+
+@import "utilities/all";
+@import "base/all";
+@import "elements/all";
+@import "components/all";
+@import "grid/all";
+@import "layout/all";

package/framework/src/utilities/_all.scss

@@ -0,0 +1,9 @@
+@charset "utf-8";
+
+@import "initial-variables";
+@import "functions";
+@import "derived-variables";
+@import "mixins";
+@import "controls";
+@import "animations";
+@import "spacing";