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

package/framework/src/components/_otp.scss

@@ -3,15 +3,17 @@
   flex-wrap: nowrap;
 
   .otp {
+    @include hover();
     outline: none;
-    border: 1px solid currentColor;
-    border-radius: 4px;
+    border: var(--border);
+    border-radius: var(--radius-small);
     background: transparent;
     width: 33px;
     height: 40px;
     margin: 4px 4px 0 4px;
     text-align: center;
-    color: getColor('grey');
+    color: getColor('main');
+
     &:first-child {
       margin: 4px 4px 0 0;
     }
@@ -24,13 +26,7 @@
 
   &.is-danger {
     .otp {
-      border: 2px solid  getColor('error');
-    }
-  }
-
-  &.is-tertiary {
-    .otp {
-      border: 2px solid getColor('font');
+      border: 1px solid getColor('error');
     }
   }
 
@@ -42,7 +38,7 @@
 
   &.is-focus {
     .otp {
-      border: 2px solid getColor('alternate');;
+      border: 1px solid getColor('font');;
       color: getColor('font')
     }
   }
@@ -50,43 +46,28 @@
 
   &.is-error {
     .otp {
-      border: 2px solid getColor('error');
+      border: 1px solid getColor('error');
       color: getColor('font')
     }
   }
 
-  &.is-tertiary {
-    .otp {
-      border: 2px solid getColor('font');
-    }
-  }
-
-  &.is-disabled {
-    .otp {
-      border: none !important;
-      background: getColor('grey-disabled');
-      pointer-events: none;
-      color: getColor('grey');
-    }
-  }
-
 }
 
 .otp-list:focus-within {
   .otp {
-    border: 2px solid getColor('alternate');;
+    border: 1px solid getColor('font');;
     color: getColor('font');
   }
 }
 
 .otp-list.is-error:focus-within {
   .otp {
-    border: 2px solid getColor('error');
+    border: 1px solid getColor('error');
     color: getColor('font');
   }
 }
 
-.otp-error-message {
+.help {
   font-size: $text-12;
   margin-top: 4px;
 }

package/framework/src/components/_pagination.scss

@@ -1,182 +1,83 @@
 .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 {
+  font-size: $size-normal;
+  margin: -2.5px;
+  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');
+  }
+
+  .pagination-previous,
+  .pagination-next,
+  .pagination-link,
+  .pagination-ellipsis {
+    @include hover();
+    color: getColor('font');
     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 {
+    height: 35px;
+    width: 35px;
+    border-radius: 9999px;
     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');
+    &[aria-disabled=true]{
+      border-color: transparent !important;
     }
-}
+  }
 
-.pagination-ellipsis {
-    color: getColor('grey-light');
-    pointer-events: none;
-}
-
-.pagination-list {
+  .pagination-list {
+    flex: 0 0 auto;
     flex-wrap: wrap;
-}
-
-@include mobile {
-    .pagination {
-        flex-wrap: wrap;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .pagination-previous {
+    order: 1;
+  }
+
+  .pagination-list {
+    order: 2;
+  }
+
+  .pagination-next {
+    order: 3;
+  }
+
+  .pagination-link {
+    &[aria-current] {
+      background-color: getColor('font');
+      color: getColor('background');
+      #{$hoverSelector}, &:focus, &:focus-within {
+        background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 0.25),
+            rgba(0, 0, 0, 0.25)
+        ) getColor('font') !important;
+      }
     }
+  }
 
-    .pagination-previous,
-    .pagination-next {
-        flex-grow: 1;
-        flex-shrink: 1;
-    }
+  .pagination-ellipsis {
+    pointer-events: none;
+  }
 
-    .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;
-    }
-}