@sapphire-ion/framework 0.30.0

package/themes/components/_inputs_new/inputs.scss

@@ -0,0 +1,15 @@
+.input-container{
+  @apply rounded-lg flex flex-col pt-1 transition-all items-start justify-center border border-[var(--ion-color-step-250)];
+  background-color: color-mix(in srgb, var(--ion-color-dark) 3%, transparent);
+  .input-label{
+    @apply text-white text-sm mx-1.5;
+  }
+  input{
+    @apply outline-none rounded-md px-1.5;
+  }
+}
+.input-container:focus-within{
+  @apply outline outline-1;
+  outline-color: color-mix(in srgb, var(--ion-color-primary) 30%, transparent);
+  box-shadow: 0 0 1px 2px color-mix(in srgb, var(--ion-color-primary) 50%, transparent);
+}

package/themes/components/carousel/carousel.component.scss

@@ -0,0 +1,9 @@
+ion-button::part(native){
+  background: color-mix(in srgb, var(--ion-color-dark) 30%, transparent);
+  &::after{
+    @apply transition-all;
+    &:hover{
+      background: color-mix(in srgb, var(--ion-color-dark) 50%, transparent);
+    }
+  }
+}

package/themes/components/default/default-pagination/default-pagination.component.scss

@@ -0,0 +1,22 @@
+#pagination{
+  background-color: var(--ion-color-step-300);
+  color: var(--ion-color-step-700);
+  @media (prefers-color-scheme: light) {
+    background-color: var(--ion-framework-table-light);
+  }
+}
+
+button.page{
+  @apply flex min-w-6 h-6 px-1 border cursor-pointer rounded-md mx-1  text-center justify-center items-center;
+  border: var(--ion-color-dark) solid 1px;
+  color: var(--ion-color-dark);
+  transition: all .25s;
+  &:disabled{
+    opacity: .75;
+  }
+  
+  &.selected{
+    background-color: var(--ion-color-dark);
+    color: var(--ion-color-dark-contrast) !important;
+  }
+}

package/themes/components/default/default-table/default-table.component.scss

@@ -0,0 +1,33 @@
+section{
+  transition: height 600ms;
+  transition-timing-function: ease-in-out;
+}
+
+#th-filter-select{
+  &:hover{
+    .order-switch{
+      background-color: var(--ion-color-step-200);
+      #up, #down{ opacity: 1 !important; color: var(--ion-color-step-700) !important }
+    }
+  }
+  .order-switch{
+    #up, #down{ opacity: 0; transition: all 300ms; }
+    transition: background-color 300ms;
+    &.ordering-asc{
+      #up  { color: var(--ion-color-primary)  !important; opacity: 1; }
+      #down{ color: var(--ion-color-step-800) !important; opacity: 1; }
+    }
+    &.ordering-desc{
+      #up  { color: var(--ion-color-step-800) !important; opacity: 1; }
+      #down{ color: var(--ion-color-primary)  !important; opacity: 1; }
+    }
+  }
+}
+
+.unique-conteiner{
+  @apply min-h-10 w-full top-10 px-3 text-center my-10 absolute z-30 flex items-center justify-center translate-y-0;
+}
+
+#wrapper{
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%);
+}

package/themes/components/default/default-table/th-filter/th-filter.component.scss

@@ -0,0 +1,24 @@
+.th-select{
+    border-radius: 0 !important;
+    ion-card{
+        --border-radius: 0 !important;
+        --border-width: 0 !important;
+        border-radius: 0 !important;
+        border-width: 0 !important;
+        ion-item{
+            --border-radius: 0 !important;
+            --border-width: 0 !important;
+            border-radius: 0 !important;
+            border-width: 0 !important;
+        }
+        div.w-12{
+            ion-button{
+                --border-width: 1px !important;
+                --border-radius: 0rem 0rem 1rem 0rem !important;
+            }
+        }
+    }
+}
+.popover-filter{
+  --width: 18rem
+}

package/themes/components/default/default-view/default-view.component.scss

@@ -0,0 +1,5 @@
+ion-card-header{
+  @apply p-0;
+  @extend .translucid-border !optional;
+  // border-bottom: 1px solid color-mix(in srgb, var(--ion-color-dark) 10%, transparent 90%);
+}

package/themes/components/default/default-view/header-view/header-view.component.scss

@@ -0,0 +1,7 @@
+#back{
+  @apply m-0 rounded-2xl w-8 p-0 mr-2;
+  
+  &::part(native){
+    @apply px-2;
+  };
+}

package/themes/components/default-page/default.page.scss

@@ -0,0 +1,4 @@
+ion-popover::part(content){
+    @apply overflow-y-auto;
+    @extend .mask-y !optional;
+}

package/themes/components/drag-drop-file/drag-drop-overlay/drag-drop-overlay.component.scss

@@ -0,0 +1,9 @@
+.fileOver{
+  @apply backdrop-blur-sm backdrop-grayscale-[.5] top-0 #{!important};
+  div{
+    @apply border-blue-500;
+    ion-icon{
+      color: var(--ion-color-dark);
+    }
+  }
+}

package/themes/components/drawer/drawer-group/drawer-group.component.scss

@@ -0,0 +1,22 @@
+
+.bg-active{
+  --background: color-mix(in srgb, var(--ion-color-secondary) 70%, transparent 30%) !important;
+}
+.bg-inactive{
+  @apply cursor-pointer;
+  --border-radius: 1rem;
+
+  &::part(native){
+      @apply transition-all;
+  }
+  --background: color-mix(in srgb, var(--ion-color-light-shade) 50%, transparent 50%);
+  &:hover{
+      --background: color-mix(in srgb, var(--ion-color-light-shade) 70%, transparent 30%);
+  }
+  @media (prefers-color-scheme: dark) {
+      --background: color-mix(in srgb, var(--ion-color-light-tint) 70%, transparent 30%);
+      &:hover{
+          --background: var(--ion-color-light-tint);
+      }
+  }
+}

package/themes/components/drawer/drawer.component.scss

@@ -0,0 +1,46 @@
+#drawer-button{
+    &:hover{
+        background-color: color-mix(in srgb, var(--ion-color-dark-tint) 50%, transparent 50%);
+        ion-icon{
+            color: var(--ion-color-light);
+        }
+    }
+    @apply rounded-full;
+}
+
+#menu-conteiner{
+    @apply overflow-y-auto overflow-x-hidden size-full;
+}
+
+#group-menu{
+    --min-height: 3rem;
+    --min-width: 3rem;
+    @apply transition-all;
+    &:hover{
+        #tooltip{
+            @apply translate-x-0 opacity-100 w-fit #{!important};
+        }
+    }
+}
+
+.bg-active{
+    --background: color-mix(in srgb, var(--ion-color-secondary) 70%, transparent 30%) !important;
+}
+.bg-inactive{
+    @apply cursor-pointer;
+    --border-radius: 1rem;
+
+    &::part(native){
+        @apply transition-all;
+    }
+    --background: color-mix(in srgb, var(--ion-color-light-shade) 50%, transparent 50%) ;
+    &:hover{
+        --background: color-mix(in srgb, var(--ion-color-light-shade) 70%, transparent 30%) ;
+    }
+    @media (prefers-color-scheme: dark) {
+        --background: color-mix(in srgb, var(--ion-color-light-tint) 70%, transparent 30%);
+        &:hover{
+            --background: var(--ion-color-light-tint);
+        }
+    }
+}

package/themes/components/http-responses-pages/forbidden-403/forbidden-403.component.scss

@@ -0,0 +1,19 @@
+@keyframes gradientFade {
+  0% {
+    background-position: 0% 50%;
+    opacity: 1;
+  }
+  50% {
+    background-position: 100% 50%;
+    opacity: 0.7;
+  }
+  100% {
+    background-position: 0% 50%;
+    opacity: 1;
+  }
+}
+
+.animate-gradient-fade {
+  background-size: 200% 200%;
+  animation: gradientFade 8s ease 1;
+}

package/themes/components/info-popover/info-popover.component.scss

@@ -0,0 +1,3 @@
+ion-popover{
+    --width: fit-content;
+}

package/themes/components/inputs/input-bool/input-bool.component.scss

@@ -0,0 +1,14 @@
+#content{
+  @apply rounded-2xl w-full h-full flex justify-center items-center transition-all ease-in-out duration-300 px-3;
+  // background: color-mix(in srgb, var(--ion-color-dark) 3%, transparent 97%);
+  // &:hover{
+  //   background: color-mix(in srgb, var(--ion-color-dark) 15%, transparent 93%);
+  // }
+}
+
+// ion-item{
+//   --background: color-mix(in srgb, var(--ion-color-dark) 3%, transparent 97%);
+//   &:hover{
+//     --background: color-mix(in srgb, var(--ion-color-dark) 15%, transparent 93%);
+//   }
+// }

package/themes/components/inputs/input-color/input-color.component.scss

@@ -0,0 +1,48 @@
+input:focus{
+    outline: solid 1px color-mix(in srgb, var(--ion-color-primary) 30%, transparent);
+}
+input{
+    @apply rounded h-5;
+    outline: 1px solid transparent;
+    transition-property: outline;
+    transition-duration: 0.2s;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
+input[type='number'] {
+    -moz-appearance:textfield;
+}
+
+
+.color-indicator {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 2px solid white;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+}
+
+.indicator {
+    position: absolute;
+    top: 50%;
+    width: 6px;
+    height: 24px;
+    background-color: white;
+    border-radius: 3px;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+.quick-transition{
+    transition: all 0.075s;
+}
+ion-popover{
+  --width: fit-content;
+  --height: fit-content;
+}

package/themes/components/inputs/input-date/input-date.component.scss

@@ -0,0 +1,41 @@
+ion-input{
+  @apply text-center select-none whitespace-nowrap;
+}
+
+.rounded-2xl{
+  --border-radius: 1rem;
+}
+.\!rounded-2xl{
+  --border-radius: 1rem;
+}
+.rounded-r-2xl{
+  --border-radius: 0rem 1rem 1rem 0rem;
+}
+.\!rounded-r-2xl{
+  --border-radius: 0rem 1rem 1rem 0rem;
+}
+.rounded-l-2xl{
+  --border-radius: 1rem 0rem 0rem 1rem;
+}
+.\!rounded-l-2xl{
+  --border-radius: 1rem 0rem 0rem 1rem;
+}
+.rounded-tr-none{
+  --border-radius: 0rem 0rem 1rem 0rem;
+}
+.\!rounded-tr-none{
+  --border-radius: 0rem 0rem 1rem 0rem;
+}
+
+
+.border-right-danger{
+  &::part(native){
+    border-right-color: var(--ion-color-danger) !important;
+  }
+}
+.border-y-danger{
+  &::part(native){
+    border-top-color: var(--ion-color-danger) !important;
+    border-bottom-color: var(--ion-color-danger) !important;
+  }
+}

package/themes/components/inputs/input-decimal/input-decimal.component.scss

@@ -0,0 +1,44 @@
+ion-input{
+    @apply text-right;
+}
+
+ion-item{
+    &::part(native){
+        @apply transition-all ease-in-out duration-300;
+    }
+}
+
+ion-card{
+    border-width: 1px 1px 2px 1px !important;
+    
+    border-color      : color-mix(in srgb, var(--ion-color-dark)   50%, transparent 50%);
+	border-right-color: color-mix(in srgb, var(--ion-color-medium) 30%, transparent 70%);
+	border-top-color  : color-mix(in srgb, var(--ion-color-medium) 30%, transparent 70%);
+	border-left-color : color-mix(in srgb, var(--ion-color-medium) 30%, transparent 70%);
+    
+    @apply border-solid transition-all;
+    &.submitted.invalid{
+        border-color : color-mix(in srgb, var(--ion-color-danger) 50%, transparent 50%) !important;
+    }
+    
+    &:not(.required){
+
+    }
+}
+
+ion-text{
+    &.required{
+        &::after {
+            content: "*";
+            color: var(--ion-color-danger);
+            vertical-align: text-bottom;
+            font-size: small;
+        }
+    }
+    &:not(.required)::after{ 
+        content: var(--input-opcional-label, "(Opcional)");
+        color: var(--ion-color-medium);
+        vertical-align: text-bottom;
+        font-size: small;
+    }
+}

package/themes/components/inputs/input-file/download-button/download-button.component.scss

@@ -0,0 +1,3 @@
+ion-popover{
+    --width: 30rem
+}

package/themes/components/inputs/input-file/input-file.component.scss

@@ -0,0 +1,3 @@
+ion-popover{
+    --width: 30rem
+}

package/themes/components/inputs/input-select/input-select.component.scss

@@ -0,0 +1,28 @@
+.no-items-opacity{
+  --color: color-mix(in srgb, var(--ion-color-dark) 60%, transparent 40%);
+}
+
+.rounded-2xl{
+  --border-radius: 1rem;
+}
+.\!rounded-2xl{
+  --border-radius: 1rem;
+}
+.rounded-r-2xl{
+  --border-radius: 0rem 1rem 1rem 0rem;
+}
+.\!rounded-r-2xl{
+  --border-radius: 0rem 1rem 1rem 0rem;
+}
+.rounded-l-2xl{
+  --border-radius: 1rem 0rem 0rem 1rem;
+}
+.\!rounded-l-2xl{
+  --border-radius: 1rem 0rem 0rem 1rem;
+}
+.rounded-tr-none{
+  --border-radius: 0rem 0rem 1rem 0rem;
+}
+.\!rounded-tr-none{
+  --border-radius: 0rem 0rem 1rem 0rem;
+}

package/themes/components/inputs/inputs.scss

@@ -0,0 +1,67 @@
+$ion-border-base     : color-mix(in srgb, var(--ion-color-medium) 30%, transparent 70%);
+$ion-border-contrast : var(--ion-color-medium);
+$ion-border-invalid  : color-mix(in srgb, var(--ion-color-danger) 75%, transparent 25%);
+
+$input-height: 58px;
+
+.on-hover{
+  background: color-mix(in srgb, var(--ion-color-light) 97%, transparent 3%);
+  &:hover{
+    @apply transition-all ease-in-out duration-300;
+    background: color-mix(in srgb, var(--ion-color-dark) 15%, transparent 93%);
+  }
+}
+
+ion-card.ion-card-input{
+  @apply rounded-2xl w-full h-full flex justify-center items-center transition-all ease-in-out duration-300 m-0 overflow-hidden shadow-none;
+  background: color-mix(in srgb, var(--ion-color-light) 97%, transparent 3%);
+  &:hover{
+      background: color-mix(in srgb, var(--ion-color-dark) 15%, transparent 93%);
+  }
+  border-bottom-color: $ion-border-contrast;
+  border-right-color : $ion-border-base;
+  border-top-color   : $ion-border-base;
+  border-left-color  : $ion-border-base;
+  
+  border-width: 1px 1px 2px 1px;
+  &.submitted.invalid{
+    border-color: $ion-border-invalid !important;
+  }
+  &.disabled{
+    background-color: color-mix(in srgb, var(--ion-color-medium) 30%, transparent 70%) !important; 
+  }
+  ion-card-content{ @apply size-full bg-transparent p-0; }
+
+  min-height: $input-height;
+  max-height: $input-height;
+  height: $input-height;
+}
+ion-item{
+  --background: transparent;
+}
+
+ion-text#label{
+  &.required{
+      &::after {
+          content: "*";
+          color: var(--ion-color-danger);
+          vertical-align: text-bottom;
+          font-size: small;
+      }
+  }
+  &:not(.required)::after{ 
+      content: var(--input-opcional-label, "(Opcional)");
+      color: var(--ion-color-medium);
+      vertical-align: text-bottom;
+      font-size: small;
+  }
+}
+
+.on-focus{
+  border-bottom-color: var(--ion-color-primary);
+}
+.focus-within\:on-focus{
+  &:focus-within{
+    border-bottom-color: var(--ion-color-primary);
+  }
+}

package/themes/components/login/login-admin/login-admin.component.scss

@@ -0,0 +1,3 @@
+#admin-popover{
+    --width: 17rem;
+}

package/themes/components/login/login.component.scss

@@ -0,0 +1,40 @@
+ion-button{
+  transition: all 1s;
+}
+
+ion-item.ion-touched, ion-item.ion-pristine{
+  --border-width: 0;
+  --border-color: var(--ion-color-dark)
+  --background: transparent !important;
+	transition: border-color .5s;
+	border-radius: 1rem;
+}
+
+$ion-border-base     : color-mix(in srgb, var(--ion-color-medium) 30%, transparent 70%);
+$ion-border-contrast : var(--ion-color-medium);
+$ion-border-invalid  : color-mix(in srgb, var(--ion-color-danger) 75%, transparent 25%);
+
+ion-card{
+  @apply rounded-2xl flex justify-center items-center transition-all ease-in-out duration-300 m-0 my-2 overflow-hidden shadow-none;
+  ion-card-content{
+    @apply p-0;
+  }
+  background: color-mix(in srgb, var(--ion-color-light) 15%, transparent 93%);
+  &:hover{
+      background: color-mix(in srgb, var(--ion-color-dark) 15%, transparent 93%);
+  }
+  border-bottom-color: $ion-border-contrast;
+  border-right-color : $ion-border-base;
+  border-top-color   : $ion-border-base;
+  border-left-color  : $ion-border-base;
+  
+  border-width: 1px 1px 2px 1px;
+  &.submitted.invalid{
+    border-color: $ion-border-invalid !important;
+  }
+  ion-card-content{ @apply size-full bg-transparent p-0; }
+}
+ion-item{
+  --background: transparent;
+  @apply m-0;
+}

package/themes/components/main-content/main-content.component.scss

@@ -0,0 +1,9 @@
+
+#popover-user{
+    --width: 17rem;
+}
+
+.content-shadow{
+    --color: color-mix(in srgb, var(--ion-color-primary) 15%, transparent);
+    box-shadow: 0px 0px 0px 1px var(--color), 0px 6px 10px -4px var(--color);
+}

package/themes/components/stepper/step/step.component.scss

@@ -0,0 +1,48 @@
+:host{
+    --stepper-selected-color: var(--ion-color-primary);
+    --stepper-color: var(--ion-color-light-shade);
+}
+
+.step{
+    background-color: var(--stepper-color);
+    color: var(--ion-color-dark);
+}
+
+.selected{
+    background-color: var(--stepper-selected-color);
+    color: var(--ion-color-light);
+}
+
+ion-progress-bar{
+    &::part(progress){
+        transition: all ease-in-out .3s !important;
+    }
+}
+
+.wrapper:not(:empty) + .default {
+    display: none;
+}
+
+.wrapper:empty{
+    display: none;
+}
+
+.animated{
+    animation-name: slidein;
+    animation-duration: .3s;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in-out 
+}
+
+@keyframes slidein {
+    from {
+        opacity: 0;
+        transform: translateX(3rem);
+    }
+
+
+    to {
+        opacity: 1;
+        transform: translateX();
+    }
+}

package/themes/components/tabs/tabs/tabs.component.scss

@@ -0,0 +1,23 @@
+.tab-selector{
+    @apply cursor-pointer flex items-center justify-center px-2;
+    @apply h-full min-w-32 rounded-t-2xl overflow-hidden ;
+    @apply -mr-4 hover:mr-0 px-4;
+    &:hover{
+        border-color: var(--ion-color-secondary) !important;
+    }
+    &.selected{
+        @apply mx-2 ml-6;
+        border-color: var(--ion-color-primary);
+        background: color-mix(in srgb, var(--ion-color-primary) 30%, transparent 70%) !important;
+    }
+    &:first-of-type{
+        &.selected{
+            @apply ml-0;
+        }
+    }
+}
+.tab-content{
+    @apply size-full rounded-2xl overflow-hidden;
+    border-top-width: .5px;
+    border-top-color: color-mix(in srgb, var(--ion-color-primary) 50%, transparent 50%) !important;;
+}