@trilogy-ds/styles 0.0.1-beta.9 → 0.0.2-calendar

package/framework/src/components/_countdown.scss

@@ -1,55 +1,57 @@
 .countdown {
-    border: 1px solid currentcolor;
-    border-radius: 8px;
-    display: inline-flex;
-    padding: $spacing-2;
-    color: getColor('font');
+  border: 1px solid currentcolor;
+  border-radius: var(--radius);
+  display: inline-flex;
+  padding: $spacing-2;
+  color: getColor('font');
 
-    .count {
-        font-family: $family-sans-serif;
-        font-size: $text-14;
-        font-weight: 400;
-        list-style-type: none;
-        text-align: center;
-        padding: 0 $spacing-2;
-        position: relative;
-
-        &:not(:last-child)::before {
-            content: ' ';
-            border-left: 1px solid currentcolor;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 0;
-        }
-
-        .value {
-            font-size: $text-24;
-            font-weight: 600;
-        }
+  .count {
+    font-family: $family-primary;
+    font-size: $text-14;
+    font-weight: 400;
+    list-style-type: none;
+    text-align: center;
+    padding: 0 $spacing-2;
+    position: relative;
+
+    &:not(:last-child)::before {
+      content: ' ';
+      border-left: 1px solid currentcolor;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
     }
 
-    &.is-small {
-        padding: $spacing-2 0;
-        border-radius: 4px;
-        .count {
-            font-size: $text-12;
-            padding: 0 $spacing-2;
-            font-weight: 500;
-
-            .value {
-                font-size: $text-16;
-                font-weight: 600;
-            }
-        }
+    .value {
+      font-size: $text-24;
+      font-weight: 600;
     }
+  }
+
+  &.is-small {
+    padding: $spacing-2 0;
+    border-radius: var(--radius-small);
+
+    .count {
+      font-size: $text-12;
+      padding: 0 $spacing-2;
+      font-weight: 500;
 
-    &.is-inverted {
-        color: invertColor('font');
-        .count {
-              &:not(:last-child)::before {
-            }
-        }
+      .value {
+        font-size: $text-16;
+        font-weight: 600;
+      }
+    }
+  }
+
+  &.is-inverted {
+    color: invertColor('font');
+
+    .count {
+      &:not(:last-child)::before {
+      }
     }
+  }
 }

package/framework/src/components/_divider.scss

@@ -1,18 +1,29 @@
 .divider {
-    position: relative;
-    text-align: center;
-    background-color: getColor('grey');
-    height: 1px;
-    width: 100%;
-    margin: 16px 0;
+  background-color: getColor('neutral');
+  height: 1px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    p.divider-content {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        white-space: nowrap;
-        padding: 0 $spacing-4;
-        background-color: invertColor('grey');
+  p.divider-content {
+    white-space: nowrap;
+    padding: 0 $spacing-4;
+    background-color: invertColor('neutral');
+  }
+
+  &:not(.is-marginless) {
+    margin: $spacing-5 0;
+  }
+
+  @include mobile {
+    &:not(.is-marginless) {
+      margin: $spacing-4 0;
     }
+  }
 }
+
+*:has(+ .divider) {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+

package/framework/src/components/_fab.scss

@@ -1,60 +1,47 @@
 .fab {
-  background-color: getColor('alternate');
-  border: 1px getColor('alternate');
+  background-color: getColor('font');
   border-radius: 16px;
   cursor: pointer;
   height: 56px;
-  color: white;
   padding: $spacing-4;
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
-  transition: 0.4s;
-
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
-
-  font-style: normal;
+  transition: max-width 500ms ease-out;
+  color: white;
+  border: 0;
+  box-shadow: 0px 3px 6px 0px #00000033;
+  font-size: 16px;
   font-weight: 600;
-  font-size: 0;
   line-height: 20px;
-
   z-index: 9;
-
-  &:hover, &.is-extended {
-    background-color: getVariantColor('alternate',1);
-    border-color:getVariantColor('alternate',2);
-    transition: 0.5s;
-    font-size: initial;
-
-    .icon,
-    .icon .is-small,
-    .icon .is-medium,
-    .icon .is-large {
-      margin-right: 16px;
-    }
-  }
-
-  &:focus, &:focus-visible, &:focus-within {
-    background-color:getVariantColor('alternate', 4);
-    border-color: getVariantColor('alternate', 4);
-    outline: 1px auto getVariantColor('alternate', 4);
+  overflow: hidden;
+  max-width: 54px;
+  white-space: nowrap;
+
+  #{$hoverSelector}, &.is-extended, &:focus, &:focus-visible, &:focus-within {
+    background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.25),
+        rgba(0, 0, 0, 0.25)
+    ) getColor('font');
+    max-width: 300px;
   }
 
   &:active {
-    background-color: getVariantColor('alternate', 5);
-    border-color: getVariantColor('alternate', 5);
-  }
-
-  .disabled {
-    background-color: getColor('bg-disabled');
-    color: getColor('grey-disabled');
+    background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.25),
+        rgba(0, 0, 0, 0.25)
+    ) getColor('font');
   }
 
   .icon {
+    flex: none;
     font-size: 24px !important;
     margin-left: -6px;
-    margin-right: -6px;
+    margin-right: 8px;
     color: white;
-  }
 
+  }
 }

package/framework/src/components/_flex-box.scss

@@ -0,0 +1,457 @@
+@use 'sass:math';
+
+.flex-box {
+  display: flex;
+  gap: 8px;
+  --ColumnGap: 8px;
+  flex-direction: row;
+  justify-content: flex-start;
+
+  // DIRECTION
+  &.is-direction-column {
+    flex-direction: column;
+  }
+
+  &.is-direction-row {
+    flex-direction: row;
+  }
+
+  &.is-direction-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  &.is-direction-column-reverse {
+    flex-direction: column-reverse;
+  }
+
+  @include desktop {
+    &.is-direction-row-desktop {
+      flex-direction: row;
+    }
+
+    &.is-direction-column-desktop {
+      flex-direction: column;
+    }
+
+    &.is-direction-row-reverse-desktop {
+      flex-direction: row-reverse;
+    }
+
+    &.is-direction-column-reverse-desktop {
+      flex-direction: column-reverse;
+    }
+  }
+
+  @include tablet {
+    &.is-direction-row-tablet {
+      flex-direction: row;
+    }
+
+    &.is-direction-column-tablet {
+      flex-direction: column;
+    }
+
+    &.is-direction-row-reverse-tablet {
+      flex-direction: row-reverse;
+    }
+
+    &.is-direction-column-reverse-tablet {
+      flex-direction: column-reverse;
+    }
+  }
+
+  @include mobile {
+    &:has(>.flex-item):not([class*='is-direction']) {
+      flex-direction: column;
+    }
+
+    &.is-direction-row-mobile {
+      flex-direction: row;
+    }
+
+    &.is-direction-column-mobile {
+      flex-direction: column;
+    }
+
+    &.is-direction-row-reverse-mobile {
+      flex-direction: row-reverse;
+    }
+
+    &.is-direction-column-reverse-mobile {
+      flex-direction: column-reverse;
+    }
+  }
+
+  // ALIGN ITEMS
+  &.is-aligned-start {
+    align-items: flex-start;
+  }
+
+  &.is-aligned-end {
+    align-items: flex-end;
+  }
+
+  &.is-aligned-center {
+    align-items: center;
+  }
+
+  &.is-aligned-stretch {
+    align-items: stretch;
+  }
+
+  @include mobile {
+    &.is-aligned-start-mobile {
+      align-items: flex-start;
+    }
+
+    &.is-aligned-end-mobile {
+      align-items: flex-end;
+    }
+
+    &.is-aligned-center-mobile {
+      align-items: center;
+    }
+
+    &.is-aligned-stretch-mobile {
+      align-items: stretch;
+    }
+  }
+
+  @include tablet {
+    &.is-aligned-start-tablet {
+      align-items: flex-start;
+    }
+
+    &.is-aligned-end-tablet {
+      align-items: flex-end;
+    }
+
+    &.is-aligned-center-tablet {
+      align-items: center;
+    }
+
+    &.is-aligned-stretch-tablet {
+      align-items: stretch;
+    }
+  }
+
+  @include desktop {
+    &.is-aligned-start-desktop {
+      align-items: flex-start;
+    }
+
+    &.is-aligned-end-desktop {
+      align-items: flex-end;
+    }
+
+    &.is-aligned-center-desktop {
+      align-items: center;
+    }
+
+    &.is-aligned-stretch-desktop {
+      align-items: stretch;
+    }
+  }
+
+  // JUSTIFY CONTENT
+  &.is-justified-start {
+    justify-content: flex-start;
+  }
+
+  &.is-justified-end {
+    justify-content: flex-end;
+  }
+
+  &.is-justified-center {
+    justify-content: center;
+  }
+
+  &.is-spaced-between {
+    justify-content: space-between;
+  }
+
+  &.is-spaced-around {
+    justify-content: space-around;
+  }
+
+  &.is-spaced-evenly {
+    justify-content: space-evenly;
+  }
+
+  @include mobile {
+    &.is-justified-start-mobile {
+      justify-content: flex-start;
+    }
+
+    &.is-justified-end-mobile {
+      justify-content: flex-end;
+    }
+
+    &.is-justified-center-mobile {
+      justify-content: center;
+    }
+
+    &.is-spaced-between-mobile {
+      justify-content: space-between;
+    }
+
+    &.is-spaced-around-mobile {
+      justify-content: space-around;
+    }
+
+    &.is-spaced-evenly-mobile {
+      justify-content: space-evenly;
+    }
+  }
+
+  @include tablet {
+    &.is-justified-start-tablet {
+      justify-content: flex-start;
+    }
+
+    &.is-justified-end-tablet {
+      justify-content: flex-end;
+    }
+
+    &.is-justified-center-tablet {
+      justify-content: center;
+    }
+
+    &.is-spaced-between-tablet {
+      justify-content: space-between;
+    }
+
+    &.is-spaced-around-tablet {
+      justify-content: space-around;
+    }
+
+    &.is-spaced-evenly-tablet {
+      justify-content: space-evenly;
+    }
+  }
+
+  @include desktop {
+    &.is-justified-start-desktop {
+      justify-content: flex-start;
+    }
+
+    &.is-justified-end-desktop {
+      justify-content: flex-end;
+    }
+
+    &.is-justified-center-desktop {
+      justify-content: center;
+    }
+
+    &.is-spaced-between-desktop {
+      justify-content: space-between;
+    }
+
+    &.is-spaced-around-desktop {
+      justify-content: space-around;
+    }
+
+    &.is-spaced-evenly-desktop {
+      justify-content: space-evenly;
+    }
+  }
+
+  &.is-scrollable {
+    overflow: auto;
+    width: calc(100% + 48px) !important;
+    margin: -24px auto -24px 50% !important;
+    transform: translate(-50%);
+    padding: 24px;
+    scroll-padding: 24px;
+    scroll-behavior: smooth;
+    scroll-snap-type: x mandatory;
+
+    @include mobile {
+      width: calc(100% + 32px) !important;
+      margin: -16px auto -16px 50% !important;
+      padding: 16px;
+      scroll-padding: 16px;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: auto !important;
+    }
+
+    .flex-item {
+      scroll-snap-align: center;
+    }
+  }
+
+
+  // GAP
+  $gap: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 54px, 62px;
+
+  @for $i from 1 through length($gap) {
+    $item: nth($gap, $i);
+    &.is-mobile.has-gap-#{$i} {
+      gap: $item;
+
+      > .flex-item {
+        --ColumnGap: #{$item};
+      }
+    }
+
+    @include mobile {
+      &.has-gap-#{$i}-mobile {
+        gap: $item;
+
+        > .flex-item {
+          --ColumnGap: #{$item};
+        }
+      }
+    }
+
+    @include tablet {
+      &.has-gap-#{$i}:not(.is-desktop),
+      &.has-gap-#{$i}-tablet {
+        gap: $item;
+
+        > .flex-item {
+          --ColumnGap: #{$item};
+        }
+      }
+    }
+
+    @include desktop {
+      &.has-gap-#{$i},
+      &.has-gap-#{$i}-desktop {
+        gap: $item;
+
+        > .flex-item {
+          --ColumnGap: #{$item};
+        }
+      }
+    }
+
+    @include widescreen {
+      &.has-gap-#{$i}-widescreen {
+        gap: $item;
+
+        > .flex-item {
+          --ColumnGap: #{$item};
+        }
+      }
+    }
+
+    @include fullhd {
+      &.has-gap-#{$i}-fullhd {
+        gap: $item;
+
+        > .flex-item {
+          --ColumnGap: #{$item};
+        }
+      }
+    }
+  }
+
+  &.is-gapless {
+    gap: 0;
+
+    > .flex-item {
+      --ColumnGap: 1px;
+    }
+  }
+
+  $itemWidth: calc((100% / (var(--ColumnFraction))) - ((((var(--ColumnFraction)) - 1) / (var(--ColumnFraction))) * var(--ColumnGap)));
+  $itemSize: (
+    "1" : math.div(12, 1),
+    "2" : math.div(12, 2),
+    "3" : math.div(12, 3),
+    "4" : math.div(12, 4),
+    "5" : math.div(12, 5),
+    "6" : math.div(12, 6),
+    "7" : math.div(12, 7),
+    "8" : math.div(12, 8),
+    "9" : math.div(12, 9),
+    "10" : math.div(12, 10),
+    "11" : math.div(12, 11),
+    "12" : math.div(12, 12),
+    "full" : math.div(12, 12),
+    "half" : math.div(12, 6)
+  );
+
+  // SIZE
+  .flex-item {
+    width: 100%;
+
+    &.is-narrow {
+      width: auto;
+    }
+
+    &[class*="is-"]:not(.is-narrow) {
+      width: #{$itemWidth};
+    }
+
+    &:not(.is-narrow) {
+      @include mobile {
+        --ColumnFraction: 1;
+      }
+    }
+  }
+
+  @each $key, $value in $itemSize {
+    .flex-item.is-#{$key} {
+      flex: none;
+      --ColumnFraction: #{$value};
+    }
+  }
+
+  @include mobile {
+    @each $key, $value in $itemSize {
+      .flex-item.is-#{$key}-mobile {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
+    }
+  }
+
+  @include tablet {
+    @each $key, $value in $itemSize {
+      .flex-item.is-#{$key}-tablet {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
+    }
+  }
+
+  @include touch {
+    @each $key, $value in $itemSize {
+      .flex-item.is-#{$key}-touch {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
+    }
+  }
+
+  @include desktop {
+    @each $key, $value in $itemSize {
+      .flex-item.is-#{$key}-desktop {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
+    }
+  }
+
+  @include widescreen {
+    @each $key, $value in $itemSize {
+      .flex-item.is-#{$key}-widescreen {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
+    }
+  }
+
+  @include fullhd {
+    @each $key, $value in $itemSize {
+      .flex-item.is-#{$key}-fullhd {
+        flex: none;
+        --ColumnFraction: #{$value};
+      }
+    }
+  }
+}