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

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/_date-picker.scss

@@ -0,0 +1,58 @@
+.date-picker {
+  span {
+    outline: none;
+    text-align: center;
+    caret-color: transparent;
+    &:focus-visible {
+      background-color: getColor('main-fade')
+    }
+    &::selection {
+      background-color: getColor('main-fade')
+    }
+  }
+
+  .input {
+    &.is-focused {
+      border: 2px solid  currentColor;
+      padding-left: 15px !important;
+      background-color: getColor('background') !important;
+    }
+    &:active {
+      padding-left: 15px !important;
+    }
+    &[aria-disabled="true"] {
+      &:active {
+        padding-left: 16px !important;
+      }
+      & span::selection {
+        background-color: transparent !important
+      }
+    }
+    &-hidden {
+      border: 0;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      white-space: nowrap;
+      width: 1px;
+    }
+  }
+
+  .modal {
+    flex-direction: inherit;
+    .modal-content, .modal-header {
+      background-color: transparent !important;
+    }
+    .modal-body {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .calendar {
+        height: 440px;
+      }
+    }
+  }
+  
+}

package/framework/src/components/_divider.scss

@@ -1,18 +1,52 @@
+@mixin divider {
+  content:'';
+  flex: 1;
+  height: 1px;
+  background-color: getColor('neutral');
+}
+
 .divider {
-    position: relative;
-    text-align: center;
-    background-color: getColor('grey');
-    height: 1px;
+  height: 1px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  p.divider-content {
+    flex-wrap: nowrap;
     width: 100%;
-    margin: 16px 0;
-
-    p.divider-content {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        white-space: nowrap;
-        padding: 0 $spacing-4;
-        background-color: invertColor('grey');
+    display: flex;
+    align-items: center;
+
+    &::before {
+     @include divider
+    }
+    &::after {
+     @include divider
+    }
+
+    &:not(:empty) {
+      &::before {
+        margin-right: $spacing-4;
+      }
+      &::after {
+        margin-left: $spacing-4;
+      }
     }
+  }
+
+  &: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/_dropdown.scss

@@ -1,128 +1,195 @@
+@use 'sass:math';
+@import "../utilities/spacing";
+
+$dropdown-border-radius: var(--radius-small);
+$dropdown-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+$dropdown-item-padding-vertical: 12px;
+$dropdown-item-padding-horizontal: 16px;
+
 .dropdown {
-    display: inline-flex;
-    position: relative;
-    vertical-align: top;
-    width: 100%;
-    &.is-active,
-    &.is-hoverable:hover {
-        .dropdown-menu {
-            display: block;
-        }
+  position: relative;
+  display: block;
+
+  &.is-active {
+    .dropdown-menu {
+      display: block;
     }
+  }
+}
 
-    select {
-        width: 95% !important;
-        border:none;
-        height: 97% !important;
-        margin-left: 16px;
-        -moz-appearance:none; /* Firefox */
-        -webkit-appearance:none; /* Safari and Chrome */
-        appearance:none;
+.dropdown-trigger {
+  display: inline-block;
+}
+
+.dropdown-manual {
+  .dropdown-menu {
+    top: 100%;
+    margin-top: 0px;
+    &[data-position="upward"] {
+      top: auto;
+      bottom: 100%;
+      margin-top: 0;
+      margin-bottom: 85px;
     }
+  }
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  margin-top: 15px;
+  background-color: getColor('background');
+  border-radius: $dropdown-border-radius;
+  box-shadow: $dropdown-shadow;
+  overflow: hidden;
+  max-height: 300px;
+  overflow-y: auto;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  padding-left: 16px;
+  padding-right: 16px;
+  width: max-content;
+  min-width: 200px;
+  opacity: 0;
+  transform: translateY(-10px);
+  transition: opacity 0.2s ease, transform 0.2s ease;
+
+  &[data-position="upward"] {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: 15px;
+    transform: translateY(10px);
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: getColor('main-fade');
+    border-radius: 3px;
+  }
+}
 
-    &.is-active {
-        .dropdown-menu {
-            z-index: zindex('dropdown');
+.dropdown-content {
+  padding: 0;
+}
 
-            .dropdown-content {
-                border: 1px solid getColor('alternate');;
-            }
-        }
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: $dropdown-item-padding-vertical $dropdown-item-padding-horizontal;
+  color: getColor('font');
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  border: none;
+  border-radius: $dropdown-border-radius;
+  background: none;
+  width: 100%;
+  text-align: left;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: 1.4;
+
+  .icon {
+    margin-right: 12px;
+    flex-shrink: 0;
+
+    &.is-smaller {
+      width: 16px;
+      height: 16px;
     }
+  }
 
-    &.is-right {
-        .dropdown-menu {
-            left: auto;
-            right: 0;
-        }
+  &:not(:disabled):not([aria-disabled="true"]) {
+    #{$hoverSelector},
+    &:focus {
+      background-color: getColor('main-fade');
+      outline: none;
     }
 
-    &.is-up {
-        .dropdown-menu {
-            bottom: 100%;
-            padding-bottom: $spacing-1;
-            padding-top: initial;
-            top: auto;
-        }
+    &:active {
+      background-color: getColor('main-fade');
     }
+  }
 
-    .react-autosuggest__container {
-        width: 100%;
+  &.is-active {
+    background-color: getColor('main-fade');
+    font-weight: $weight-semibold;
+  }
 
-        .dropdown-menu .dropdown-content {
-            overflow-y: auto;
-            max-height: 25vh;
+  &:disabled,
+  &[aria-disabled="true"] {
+    color: getColor('disabled');
+    cursor: not-allowed;
+    background-color: transparent;
 
-            .dropdown-item {
-                cursor: pointer;
-            }
-        }
+    .icon {
+      opacity: 0.5;
     }
+  }
+}
 
-    .dropdown-trigger {
-        width: 100%;
+.dropdown-item:disabled, .dropdown-item[aria-disabled=true] {
+  background-color: transparent !important;
+}
 
-        .select {
-            cursor: pointer;
+.dropdown-group {
+  &:not(:first-child) {
+    border-top: 2px solid getColor('neutral-fade');
+  }
 
-            select {
-                pointer-events: none;
-            }
-        }
-    }
+  &:not(:last-child) {
+    margin-bottom: 0;
+  }
 
-    .dropdown-menu {
-        display: none;
-        left: 0;
-        min-width: 120px;
-        padding-top: $spacing-1;
-        position: absolute;
-        top: 100%;
-        width: 100%;
-        z-index: 20;
-
-        .dropdown-content {
-            border-radius: 8px;
-            box-shadow: 0 2px 3px rgba(#000, 0.1),
-            0 0 0 1px rgba(#000, 0.1);
-            font-size: inherit;
-            padding: 5px 10px;
-
-            .dropdown-item {
-                display: block;
-                font-size: inherit;
-                line-height: 1.5;
-                padding: 3.75px 10px;
-                position: relative;
-            }
-        }
+  .dropdown-item {
+    &:first-child {
+      border-top: none;
     }
+  }
 
-    .control.has-dynamic-placeholder .select > select:active ~ label,
-    .control.has-dynamic-placeholder .select > select:focus ~ label {
-        display: flex;
-    }
+  &.is-no-separator {
+    border-top: none;
+  }
 }
 
-a.dropdown-item {
-    padding-right: 30px;
-    white-space: nowrap;
+@include mobile {
+  .dropdown-menu {
+    left: 0;
+    max-height: 250px;
+    width: max-content;
+    min-width: 200px;
+  }
+}
 
-    &:hover {
-        background-color: getColor('background');
-        color: invertColor('background');;
-    }
+.dropdown.is-active .dropdown-menu {
+  opacity: 1;
+  transform: translateY(0);
 
-    &.is-active {
-        background-color: getColor('alternate');
-        color: invertColor('alternate');
-    }
+  &[data-position="upward"] {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
-.dropdown-divider {
-    background-color: rgba(getColor('grey'), 0.5);
-    border: none;
+.dropdown-menu.is-visible {
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
+
+  &[data-position="upward"] {
     display: block;
-    height: 1px;
-    margin: 5px 0;
+    opacity: 1;
+    transform: translateY(0);
+  }
 }

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;
-  }
 
+  }
 }